From 17c5ca7e5029d573084ca5535a430023186b362e Mon Sep 17 00:00:00 2001 From: XiaoDaiGua-Ray <443547225@qq.com> Date: Sun, 20 Aug 2023 14:56:51 +0800 Subject: [PATCH] =?UTF-8?q?v4.1.8=E7=89=88=E6=9C=AC=E5=8F=91=E5=B8=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 16 ++ package.json | 4 +- src/appConfig/designConfig.ts | 6 + src/components/RayChart/index.scss | 6 + src/components/RayChart/index.tsx | 226 +++++++++++------- src/components/RayChart/type.ts | 25 ++ src/components/RayIframe/index.ts | 3 + src/components/RayIframe/src/index.tsx | 20 +- src/components/RayTable/src/index.scss | 15 +- src/components/RayTable/src/index.tsx | 83 +++---- src/components/RayTable/src/props.ts | 43 ++-- .../components/SettingDrawer/index.tsx | 10 - src/router/routes.ts | 4 +- src/store/modules/setting/index.ts | 12 - src/store/modules/setting/type.ts | 1 - src/styles/base.scss | 19 +- src/styles/mixins.scss | 14 ++ src/types/modules/cfg.ts | 1 + src/types/modules/component.ts | 3 - src/views/demo/echart/index.tsx | 68 ++++-- 20 files changed, 355 insertions(+), 224 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cfe443df..efc011ad 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,21 @@ # CHANGE LOG +## 4.1.8 + +### Feats + +- 更新 `vite` 版本至 `v4.4.9` +- 更新 `vue-hooks-plus` 版本至 `v1.8.1` +- 更新了 RayTable 的一些事件的命名 +- `RayChart` 组件做了一些调整 + - 支持指定 observer 监听对象，默认为 chart 组件本身 + - 默认开启 autoChangeTheme 功能 + - 支持配置 throttleWait 节流等待时间，默认 500ms + - 支持通过配置 `desginConfig.echartTheme` 属性指定 `echart theme`。并且只需按照约定方式注册的主题，只需要指定主题名称，即可完成 `light` `dark` 两种主题指定 + - RayChartInst 新增 dispose render 方法，允许手动渲染与卸载 chart 图 + - 新增 animation 属性，如果为 true 则会强制触发渲染过渡动画。该配置受 `options.animation` 属性影响，如果该配置为 false 则不会启用过渡动画 +- 移除反转色功能 + ## 4.1.7 ### Feats diff --git a/package.json b/package.json index 0f4ce76c..d24f928b 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "sass": "^1.54.3", "screenfull": "^6.0.2", "vue": "^3.3.4", - "vue-hooks-plus": "1.7.6", + "vue-hooks-plus": "1.8.1", "vue-i18n": "^9.2.2", "vue-router": "^4.2.4", "vuedraggable": "^4.1.0", @@ -85,7 +85,7 @@ "typescript": "^5.0.2", "unplugin-auto-import": "^0.15.0", "unplugin-vue-components": "^0.25.1", - "vite": "^4.3.9", + "vite": "^4.4.9", "vite-plugin-compression": "^0.5.1", "vite-plugin-ejs": "^1.6.4", "vite-plugin-eslint": "1.8.1", diff --git a/src/appConfig/designConfig.ts b/src/appConfig/designConfig.ts index 013d2d67..f07b04bb 100644 --- a/src/appConfig/designConfig.ts +++ b/src/appConfig/designConfig.ts @@ -60,4 +60,10 @@ export const APP_THEME: AppTheme = { * 地址: */ APP_NAIVE_UI_THEME_OVERRIDES: {}, + /** + * + * 配置 echart 主题颜色 + * 约定配置时以：主题名称为文件名，其文件夹下两个主题风格的 json 文件。并且暗色主题必须为 xxx-dark.json + */ + echartTheme: 'macarons', } diff --git a/src/components/RayChart/index.scss b/src/components/RayChart/index.scss index 5ea9021d..4e574163 100644 --- a/src/components/RayChart/index.scss +++ b/src/components/RayChart/index.scss @@ -5,4 +5,10 @@ outline: none; box-sizing: border-box; transition: width 0.35s var(--r-bezier); + + & .ray-chart__container { + width: 100%; + height: 100%; + box-sizing: border-box; + } } diff --git a/src/components/RayChart/index.tsx b/src/components/RayChart/index.tsx index fcce942c..7439beec 100644 --- a/src/components/RayChart/index.tsx +++ b/src/components/RayChart/index.tsx @@ -36,17 +36,19 @@ import { PictorialBarChart, } from 'echarts/charts' // 系列类型(后缀都为 `SeriesOption`) import { LabelLayout, UniversalTransition } from 'echarts/features' // 标签自动布局, 全局过渡动画等特性 -import { CanvasRenderer } from 'echarts/renderers' // `echarts` 渲染器 +import { + CanvasRenderer, + // SVGRenderer, +} from 'echarts/renderers' // `echarts` 渲染器 import { useSetting } from '@/store' import { cloneDeep, throttle } from 'lodash-es' import { on, off, completeSize } from '@/utils/element' import { call } from '@/utils/vue/index' import { setupChartTheme, loadingOptions } from './helper' -import { LAYOUT_CONTENT_REF } from '@/appConfig/routerConfig' +import { APP_THEME } from '@/appConfig/designConfig' import type { PropType } from 'vue' -import type { EChartsInstance } from '@/types/modules/component' import type { AnyFC, MaybeArray } from '@/types/modules/utils' import type { DebouncedFunc } from 'lodash-es' import type { @@ -54,9 +56,15 @@ import type { AutoResize, ChartTheme, } from '@/components/RayChart/type' -import type { UseResizeObserverReturn } from '@vueuse/core' +import type { + UseResizeObserverReturn, + MaybeComputedElementRef, + MaybeElement, +} from '@vueuse/core' +import type { ECharts, EChartsCoreOption } from 'echarts/core' export type EChartsExtensionInstallRegisters = typeof CanvasRenderer +export type { RayChartInst } from './type' const RayChart = defineComponent({ name: 'RayChart', @@ -116,21 +124,19 @@ const RayChart = defineComponent({ type: Object as PropType, default: () => ({}), }, - success: { + onSuccess: { /** * * 返回 chart 实例 * * 渲染成功回调函数 * - * () => EChartsInstance + * () => ECharts */ - type: [Function, Array] as PropType< - MaybeArray<(e: EChartsInstance) => void> - >, + type: [Function, Array] as PropType void>>, default: null, }, - error: { + onError: { /** * * 渲染失败回调函数 @@ -148,13 +154,12 @@ const RayChart = defineComponent({ /** * * 是否自动跟随模板主题切换 - * * 如果开启此属性, 则会覆盖 `theme` 属性 * - * 注意: 这个属性重度依赖此模板, 所以默认不开启. 并且动态切换主题有一定的性能问题 + * 注意: 这个属性重度依赖此模板 */ type: Boolean, - default: false, + default: true, }, use: { /** @@ -180,15 +185,37 @@ const RayChart = defineComponent({ type: Object as PropType, default: () => loadingOptions(), }, + observer: { + /** + * + * 需要被监听尺寸的元素 + * 需要开启 autoResize 才能生效 + * 默认以父元素作为监听对象 + */ + type: Object as PropType>, + default: null, + }, + throttleWait: { + /** 节流等待时间 */ + type: Number, + default: 500, + }, + animation: { + /** 是否强制启用渲染动画 */ + type: Boolean, + default: true, + }, }, setup(props, { expose }) { const settingStore = useSetting() const { themeValue } = storeToRefs(settingStore) const rayChartRef = ref() // `echart` 容器实例 - const echartInstanceRef = ref() // `echart` 拷贝实例, 解决直接使用响应式实例带来的问题 - let echartInstance: EChartsInstance // `echart` 实例 - let resizeThrottle: DebouncedFunc // resize 防抖方法实例 - let resizeOvserverReturn: UseResizeObserverReturn | undefined + const rayChartWrapperRef = ref() + const echartInstanceRef = ref() // `echart` 实例 + let echartInstance: ECharts | null // `echart` 拷贝实例, 解决直接使用响应式实例带来的问题 + let resizeThrottleReturn: DebouncedFunc | null // resize 防抖方法实例 + let resizeOvserverReturn: UseResizeObserverReturn | null + const { echartTheme } = APP_THEME const cssVarsRef = computed(() => { const cssVars = { @@ -198,9 +225,6 @@ const RayChart = defineComponent({ return cssVars }) - const modelLoadingOptions = computed(() => - loadingOptions(props.loadingOptions), - ) /** * @@ -237,7 +261,7 @@ const RayChart = defineComponent({ echarts.use([CanvasRenderer]) // 注册渲染器 try { - echarts.use(props.use) + echarts.use(props.use?.filter(Boolean)) } catch (e) { console.error( 'Error: wrong property and method passed in extend attribute', @@ -253,10 +277,17 @@ const RayChart = defineComponent({ * * 如果有需要特殊全局配置的可以在此继续写... */ - const combineChartOptions = () => { - let options = cloneDeep(props.options) + const combineChartOptions = (ops: EChartsCoreOption) => { + let options = cloneDeep(ops) - const assign = (opts: object) => Object.assign({}, options, opts) + const assign = (opts: object) => + Object.assign( + { + animation: true, + }, + options, + opts, + ) if (props.showAria) { options = assign({ @@ -277,17 +308,16 @@ const RayChart = defineComponent({ * 渲染 `echart` * * 缓存两个实例 - * * 直接使用响应式代理实例会出现诡异的问题, 例如 `legend` 点击时报错 */ - const renderChart = (theme: ChartTheme = 'macarons') => { + const renderChart = (theme: ChartTheme = echartTheme) => { /** 获取 dom 容器 */ const element = rayChartRef.value as HTMLElement /** 获取配置项 */ - const options = combineChartOptions() + const options = combineChartOptions(props.options) /** 获取 dom 容器实际宽高 */ const { height, width } = element.getBoundingClientRect() - const { success, error } = props + const { onSuccess, onError } = props try { /** 注册主题 */ @@ -305,16 +335,22 @@ const RayChart = defineComponent({ echartInstanceRef.value = echartInstance /** 设置 options 配置项 */ - options && echartInstance.setOption(options) + options && echartInstance.setOption({}) + + if (props.animation) { + setTimeout(() => { + options && echartInstance?.setOption(options) + }) + } /** 渲染成功回调 */ - if (success) { - call(success, echartInstance) + if (onSuccess) { + call(onSuccess, echartInstance) } } catch (e) { /** 渲染失败回调 */ - if (error) { - call(error) + if (onError) { + call(onError) } console.error('RayChart render error: ', e) @@ -329,9 +365,9 @@ const RayChart = defineComponent({ */ const renderThemeChart = (bool?: boolean) => { if (props.autoChangeTheme) { - bool ? renderChart('macarons-dark') : renderChart() + bool ? renderChart(`${echartTheme}-dark`) : renderChart() - return void 0 + return } if (!props.theme) { @@ -357,10 +393,51 @@ const RayChart = defineComponent({ } } + const mount = () => { + // 避免重复渲染 + if (echartInstance?.getDom()) { + console.warn( + 'RayChart mount: There is a chart instance already initialized on the dom. Execution was interrupted', + ) + + return + } + + if (props.autoChangeTheme) { + /** 注册 echarts */ + renderThemeChart(themeValue.value) + } else { + props.theme ? renderChart(`${echartTheme}-dark`) : renderChart() + } + + /** 注册事件 */ + if (props.autoResize) { + resizeThrottleReturn = throttle(resizeChart, props.throttleWait) + /** 监听内容区域尺寸变化更新 chart */ + resizeOvserverReturn = useResizeObserver( + props.observer || rayChartWrapperRef, + resizeThrottleReturn, + ) + + on(window, 'resize', resizeThrottleReturn) + } + } + + const unmount = () => { + /** 卸载 echarts */ + destroyChart() + /** 卸载事件柄 */ + resizeThrottleReturn && off(window, 'resize', resizeThrottleReturn) + /** 注销防抖 */ + resizeThrottleReturn?.cancel() + /** 注销 observer 监听 */ + resizeOvserverReturn?.stop?.() + } + /** 监听全局主题变化, 然后重新渲染对应主题 echarts */ watch( - () => [themeValue.value], - ([theme]) => { + () => themeValue.value, + (theme) => { /** * * Q: 为什么需要重新卸载再渲染 @@ -375,19 +452,19 @@ const RayChart = defineComponent({ }, ) + /** + * + * 贴花跟随主题渲染 + * + * 自动跟随模板主题或者指定主题皆可 + */ watch( () => props.showAria, () => { destroyChart() - /** - * - * 贴花跟随主题渲染 - * - * 自动跟随模板主题或者指定主题皆可 - */ if (props.autoChangeTheme || props.theme) { - themeValue.value ? renderChart('macarons-dark') : renderChart() + themeValue.value ? renderChart(`${echartTheme}-dark`) : renderChart() } else { renderChart() } @@ -397,27 +474,36 @@ const RayChart = defineComponent({ /** 显示/隐藏加载动画 */ watch( () => props.loading, - (newData) => { - newData - ? echartInstance?.showLoading(modelLoadingOptions.value) + (ndata) => { + ndata + ? echartInstance?.showLoading(props.loadingOptions) : echartInstance?.hideLoading() }, ) - /** 监听 options 变化 */ if (props.watchOptions) { + /** 监听 options 变化 */ watch( - () => props.watchOptions, - () => { + () => props.options, + (noptions) => { /** 重新组合 options */ - const options = combineChartOptions() + const options = combineChartOptions(noptions) /** 如果 options 发生变动更新 echarts */ echartInstance?.setOption(options) }, + { + deep: true, + }, ) } + expose({ + echart: echartInstanceRef, + dispose: unmount, + render: mount, + }) + onBeforeMount(async () => { /** 注册 echarts 组件与渲染器 */ await registerChartCore() @@ -425,51 +511,25 @@ const RayChart = defineComponent({ onMounted(() => { nextTick(() => { - /** 注册 echarts */ - if (props.autoChangeTheme) { - renderThemeChart(themeValue.value) - } else { - props.theme ? renderChart('macarons-dark') : renderChart() - } - - /** 注册事件 */ - if (props.autoResize) { - resizeThrottle = throttle(resizeChart, 500) - - on(window, 'resize', resizeThrottle) - } - - /** 监听内容区域尺寸变化更新 chart */ - resizeOvserverReturn = useResizeObserver( - LAYOUT_CONTENT_REF.value as unknown as Ref, - resizeThrottle, - ) + mount() }) }) onBeforeUnmount(() => { - /** 卸载 echarts */ - destroyChart() - /** 卸载事件柄 */ - off(window, 'resize', resizeThrottle) - /** 注销防抖 */ - resizeThrottle.cancel() - resizeOvserverReturn?.stop?.() - }) - - expose({ - echart: echartInstanceRef, + unmount() }) return { rayChartRef, cssVarsRef, - echartInstance: echartInstanceRef, + rayChartWrapperRef, } }, render() { return ( -
+
+
+
) }, }) diff --git a/src/components/RayChart/type.ts b/src/components/RayChart/type.ts index d2810740..0750be61 100644 --- a/src/components/RayChart/type.ts +++ b/src/components/RayChart/type.ts @@ -9,6 +9,8 @@ * @remark 今天也是元气满满撸代码的一天 */ +import type { ECharts, EChartsCoreOption } from 'echarts/core' + export interface ChartThemeRawModules { default: Record } @@ -41,3 +43,26 @@ export type AutoResize = } export type ChartTheme = 'macarons-dark' | string | object | 'macarons' + +export interface RayChartInst { + /** + * + * echart 实例 + * 访问当前 chart 图所有方法与属性 + * + * @default undefined + */ + echart: Ref + /** + * + * 手动卸载当前 chart 图 + * 注意：不会卸载当前组件，仅仅是卸载 chart + */ + dispose: () => void + /** + * + * 手动渲染 chart 图 + * 注意：会根据当前的 options 配置项与 props 配置项重新渲染 chart + */ + render: () => void +} diff --git a/src/components/RayIframe/index.ts b/src/components/RayIframe/index.ts index ecea3ef2..e0123a4c 100644 --- a/src/components/RayIframe/index.ts +++ b/src/components/RayIframe/index.ts @@ -1,3 +1,6 @@ import RayIframe from './src/index' +import type { RayIframeInst } from './src/index' + export default RayIframe +export type { RayIframeInst } diff --git a/src/components/RayIframe/src/index.tsx b/src/components/RayIframe/src/index.tsx index f7834848..2ec2871e 100644 --- a/src/components/RayIframe/src/index.tsx +++ b/src/components/RayIframe/src/index.tsx @@ -20,6 +20,10 @@ import type { PropType } from 'vue' import type { MaybeArray } from '@/types/modules/utils' import type { SpinProps } from 'naive-ui' +export interface RayIframeInst { + iframe: Ref +} + const RayIframe = defineComponent({ name: 'RayIframe', props: { @@ -73,7 +77,7 @@ const RayIframe = defineComponent({ type: String, default: null, }, - success: { + onSuccess: { /** * * iframe 加载成功回调 @@ -84,7 +88,7 @@ const RayIframe = defineComponent({ >, default: null, }, - error: { + onError: { /** * * iframe 加载失败回调 @@ -119,20 +123,20 @@ const RayIframe = defineComponent({ const iframeLoadSuccess = (e: Event) => { spinShow.value = false - const { success } = props + const { onSuccess } = props - if (success) { - call(success, iframeRef.value as HTMLIFrameElement, e) + if (onSuccess) { + call(onSuccess, iframeRef.value as HTMLIFrameElement, e) } } const iframeLoadError = (e: Event) => { spinShow.value = false - const { error } = props + const { onError } = props - if (error) { - call(error, e) + if (onError) { + call(onError, e) } } diff --git a/src/components/RayTable/src/index.scss b/src/components/RayTable/src/index.scss index 71ef89d8..06a30254 100644 --- a/src/components/RayTable/src/index.scss +++ b/src/components/RayTable/src/index.scss @@ -1,21 +1,10 @@ -@keyframes scaleScreenfull { - 0% { - transform: scale(1); - } - 50% { - transform: scale(1.3); - } - 100% { - transform: scale(1); - } -} - .ray-table { & .ray-table-icon { transition: transform 0.3s var(--r-bezier); &:hover { - animation: scaleScreenfull 0.3s linear; + @include scaleAnimate(); + animation: elementScale 0.3s linear; animation-direction: alternate; } } diff --git a/src/components/RayTable/src/index.tsx b/src/components/RayTable/src/index.tsx index 41213fd8..bc3de22c 100644 --- a/src/components/RayTable/src/index.tsx +++ b/src/components/RayTable/src/index.tsx @@ -58,8 +58,7 @@ import type { ComponentSize } from '@/types/modules/component' const RayTable = defineComponent({ name: 'RayTable', props: props, - emits: ['update:columns', 'exportSuccess', 'exportError'], - setup(props, { emit, expose }) { + setup(props, { expose }) { const rayTableInstance = ref() const tableUUID = uuid(16) // 表格 id, 用于打印表格 @@ -68,7 +67,15 @@ const RayTable = defineComponent({ const modelColumns = computed({ get: () => props.columns, set: (arr) => { - emit('update:columns', arr) + const { onUpdateColumns, 'onUpdate:columns': _onUpdateColumns } = props + + if (onUpdateColumns) { + call(onUpdateColumns, arr) + } + + if (_onUpdateColumns) { + call(_onUpdateColumns, arr) + } }, }) as unknown as WritableComputedRef const menuConfig = reactive({ @@ -76,7 +83,6 @@ const RayTable = defineComponent({ y: 0, showMenu: false, }) - let prevRightClickIndex = -1 // 缓存上次点击索引位置 const cssVars = computed(() => { const cssVar = { '--ray-table-header-space': props.tableHeaderSpace, @@ -86,6 +92,7 @@ const RayTable = defineComponent({ }) const tableSize = ref(props.size) const tableMethods = ref>() + let prevRightClickIndex = -1 // 缓存上次点击索引位置 /** 注入相关属性 */ provide('tableSettingProvider', { @@ -111,17 +118,12 @@ const RayTable = defineComponent({ key: string | number, option: DropdownOption, ) => { - const { onRightMenuClick, 'onUpdate:rightMenuClick': _onRightMenuClick } = - props + const { onRightMenuClick } = props if (onRightMenuClick) { call(onRightMenuClick, key, prevRightClickIndex, option) } - if (_onRightMenuClick) { - call(_onRightMenuClick, key, prevRightClickIndex, option) - } - menuConfig.showMenu = false } @@ -136,22 +138,24 @@ const RayTable = defineComponent({ const handleRowProps = (arr: ActionOptions, idx: number) => { const interceptRowProps = props.rowProps?.(arr, idx) + const contextmenu = modelRightClickMenu.value.length + ? (e: MouseEvent) => { + e.preventDefault() + + prevRightClickIndex = idx + menuConfig.showMenu = false + + nextTick().then(() => { + menuConfig.showMenu = true + menuConfig.x = e.clientX + menuConfig.y = e.clientY + }) + } + : void 0 + return { ...interceptRowProps, - onContextmenu: (e: MouseEvent) => { - e.preventDefault() - - prevRightClickIndex = idx - - menuConfig.showMenu = false - - nextTick().then(() => { - menuConfig.showMenu = true - - menuConfig.x = e.clientX - menuConfig.y = e.clientY - }) - }, + onContextmenu: contextmenu, } } @@ -164,6 +168,8 @@ const RayTable = defineComponent({ * 按需导入 `xlsx` 减少体积, 不依赖传统 `file save` 插件导出方式 */ const handleExportPositive = async () => { + const { onExportSuccess, onExportError } = props + if (props.data.length && props.columns.length) { try { await exportFileToXLSX( @@ -174,9 +180,9 @@ const RayTable = defineComponent({ }, ) - emit('exportSuccess') + onExportSuccess && call(onExportSuccess) } catch (e) { - emit('exportError') + onExportError && call(onExportError) } } } @@ -276,21 +282,16 @@ const RayTable = defineComponent({ ...this.$slots, }} - {this.showMenu ? ( - // 右键菜单 - (this.showMenu = false)} - onSelect={this.handleRightMenuSelect.bind(this)} - /> - ) : ( - '' - )} + (this.showMenu = false)} + onSelect={this.handleRightMenuSelect.bind(this)} + /> ), header: () => this.title ||
, diff --git a/src/components/RayTable/src/props.ts b/src/components/RayTable/src/props.ts index 468f4675..4e41f180 100644 --- a/src/components/RayTable/src/props.ts +++ b/src/components/RayTable/src/props.ts @@ -15,7 +15,7 @@ import type { PropType, VNode, VNodeChild } from 'vue' import type { DropdownMixedOption } from './type' import type PrintConfiguration from 'print-js' import type { MaybeArray } from '@/types/modules/utils' -import type { DropdownOption } from 'naive-ui' +import type { DropdownOption, DataTableColumn } from 'naive-ui' const rayTableProps = { ...dataTableProps, // 继承 `data table props` @@ -39,14 +39,6 @@ const rayTableProps = { >, default: null, }, - 'onUpdate:rightMenuClick': { - type: [Function, Array] as PropType< - MaybeArray< - (key: string | number, index: number, option: DropdownOption) => void - > - >, - default: null, - }, title: { /** * @@ -77,16 +69,6 @@ const rayTableProps = { type: Object as PropType, default: () => ({}), }, - showMenu: { - /** - * - * 是否展示右键菜单 - * - * 默认启用 - */ - type: Boolean, - default: true, - }, exportTooltip: { /** * @@ -225,7 +207,30 @@ const rayTableProps = { type: Boolean, default: false, }, + /** 导出成功 */ + onExportSuccess: { + type: [Function, Array] as PropType void>>, + default: null, + }, + /** 导出失败 */ + onExportError: { + type: [Function, Array] as PropType void>>, + default: null, + }, + onUpdateColumns: { + type: [Function, Array] as PropType< + MaybeArray<(arr: DataTableColumn[]) => void> + >, + default: null, + }, + 'onUpdate:columns': { + type: [Function, Array] as PropType< + MaybeArray<(arr: DataTableColumn[]) => void> + >, + default: null, + }, } as const + export default rayTableProps /** diff --git a/src/layout/components/SiderBar/components/SettingDrawer/index.tsx b/src/layout/components/SiderBar/components/SettingDrawer/index.tsx index 44f196ac..e03dcd5a 100644 --- a/src/layout/components/SiderBar/components/SettingDrawer/index.tsx +++ b/src/layout/components/SiderBar/components/SettingDrawer/index.tsx @@ -48,7 +48,6 @@ const SettingDrawer = defineComponent({ primaryColorOverride, menuTagSwitch, breadcrumbSwitch, - invertSwitch, footerSwitch, contentTransition, } = storeToRefs(settingStore) @@ -87,7 +86,6 @@ const SettingDrawer = defineComponent({ menuTagSwitch, changeSwitcher, breadcrumbSwitch, - invertSwitch, footerSwitch, contentTransitionOptions, contentTransition, @@ -155,14 +153,6 @@ const SettingDrawer = defineComponent({ } /> - - - this.changeSwitcher(bool, 'invertSwitch') - } - /> - diff --git a/src/router/routes.ts b/src/router/routes.ts index f707f8a2..3486b88f 100644 --- a/src/router/routes.ts +++ b/src/router/routes.ts @@ -3,8 +3,6 @@ import { getAppRawRoutes } from './routeModules' import { ROOT_ROUTE } from '@/appConfig/appConfig' import { expandRoutes } from '@/router/helper/expandRoutes' -const { path } = ROOT_ROUTE - export default async () => [ { path: '/', @@ -14,7 +12,7 @@ export default async () => [ { path: '/', name: 'layout', - redirect: path, + redirect: ROOT_ROUTE.path, component: Layout, children: expandRoutes(getAppRawRoutes()), }, diff --git a/src/store/modules/setting/index.ts b/src/store/modules/setting/index.ts index 9c8ac87a..9de80aca 100644 --- a/src/store/modules/setting/index.ts +++ b/src/store/modules/setting/index.ts @@ -32,7 +32,6 @@ export const useSetting = defineStore( reloadRouteSwitch: true, // 刷新路由开关 menuTagSwitch: true, // 多标签页开关 spinSwitch: false, // 全屏加载 - invertSwitch: false, // 反转色模式 breadcrumbSwitch: true, // 面包屑开关 localeLanguage: getAppDefaultLanguage(), lockScreenSwitch: false, // 锁屏开关 @@ -93,17 +92,6 @@ export const useSetting = defineStore( } } - /** 动态添加反转色 class name */ - watch( - () => settingState.invertSwitch, - (newData) => { - const body = document.body - const className = 'ray-template--invert' - - newData ? addClass(body, className) : removeClass(body, className) - }, - ) - return { ...toRefs(settingState), updateLocale, diff --git a/src/store/modules/setting/type.ts b/src/store/modules/setting/type.ts index ead87cf2..0ec6b67a 100644 --- a/src/store/modules/setting/type.ts +++ b/src/store/modules/setting/type.ts @@ -10,7 +10,6 @@ export interface SettingState { spinSwitch: boolean breadcrumbSwitch: boolean localeLanguage: string - invertSwitch: boolean lockScreenSwitch: boolean lockScreenInputSwitch: boolean footerSwitch: boolean diff --git a/src/styles/base.scss b/src/styles/base.scss index 4c135db3..2c3bcc9b 100644 --- a/src/styles/base.scss +++ b/src/styles/base.scss @@ -44,17 +44,24 @@ img { } body { - font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", - "Droid Sans", "Helvetica Neue", sans-serif; + font-family: + Inter, + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + Oxygen, + Ubuntu, + Cantarell, + "Fira Sans", + "Droid Sans", + "Helvetica Neue", + sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } -body.ray-template--invert { - filter: invert(1); -} - body .ray-template__directive--disabled { opacity: 0.3 !important; pointer-events: none !important; diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss index 28aeffd1..16d4ca7d 100644 --- a/src/styles/mixins.scss +++ b/src/styles/mixins.scss @@ -47,3 +47,17 @@ @content; } } + +@mixin scaleAnimate($scale-from: 1, $scale-to: 1.3) { + @keyframes elementScale { + 0% { + transform: scale($scale-from); + } + 50% { + transform: scale($scale-to); + } + 100% { + transform: scale($scale-from); + } + } +} diff --git a/src/types/modules/cfg.ts b/src/types/modules/cfg.ts index aadb2165..f1384207 100644 --- a/src/types/modules/cfg.ts +++ b/src/types/modules/cfg.ts @@ -79,4 +79,5 @@ export interface AppTheme { APP_THEME_COLOR: string[] APP_PRIMARY_COLOR: AppPrimaryColor APP_NAIVE_UI_THEME_OVERRIDES: GlobalThemeOverrides + echartTheme: string } diff --git a/src/types/modules/component.ts b/src/types/modules/component.ts index e9fc9b12..33048ada 100644 --- a/src/types/modules/component.ts +++ b/src/types/modules/component.ts @@ -1,10 +1,7 @@ -import type { ECharts } from 'echarts/core' import type { MenuOption, MenuDividerOption, MenuGroupOption } from 'naive-ui' export type ComponentSize = 'small' | 'medium' | 'large' -export type EChartsInstance = ECharts - export type Placement = 'top' | 'right' | 'bottom' | 'left' export type NaiveMenuOptions = MenuOption | MenuDividerOption | MenuGroupOption diff --git a/src/views/demo/echart/index.tsx b/src/views/demo/echart/index.tsx index 0853d308..c478bcfe 100644 --- a/src/views/demo/echart/index.tsx +++ b/src/views/demo/echart/index.tsx @@ -1,14 +1,15 @@ import './index.scss' -import { NCard, NSwitch, NSpace, NP, NH2 } from 'naive-ui' +import { NCard, NSwitch, NSpace, NP, NH2, NButton } from 'naive-ui' import RayChart from '@/components/RayChart/index' -import type { EChartsInstance } from '@/types/modules/component' +import type { ECharts } from 'echarts/core' +import type { RayChartInst } from '@/components/RayChart/index' const Echart = defineComponent({ name: 'REchart', setup() { - const baseChartRef = ref() + const baseChartRef = ref() const chartLoading = ref(false) const chartAria = ref(false) const state = reactive({ @@ -186,7 +187,7 @@ const Echart = defineComponent({ chartAria.value = bool } - const handleChartRenderSuccess = (chart: EChartsInstance) => { + const handleChartRenderSuccess = (chart: ECharts) => { window.$notification.info({ title: '可视化图渲染成功回调函数', content: '可视化图渲染成功, 并且返回了当前可视化图实例', @@ -196,6 +197,14 @@ const Echart = defineComponent({ console.log(baseChartRef.value, chart) } + const mountChart = () => { + baseChartRef.value?.render() + } + + const unmountChart = () => { + baseChartRef.value?.dispose() + } + return { baseOptions, baseChartRef, @@ -207,39 +216,52 @@ const Echart = defineComponent({ basePieOptions, baseLineOptions, ...toRefs(state), + mountChart, + unmountChart, } }, render() { return (
- RayChart 组件使用 - - 该组件会默认以 200*200 - 宽高进行填充。预设了常用的图、方法组件，如果不满足需求，需要用 use - 方法进行手动拓展。该组件实现了自动跟随模板主题切换功能，但是动态切换损耗较大，所以默认不启用。 - 该组件可以让你只需要关注 options 的配置，无需关心 chart - 图的资源管理。并且该组件可以自动监听 options - 的变化，所以天生支持响应式，可以让你放心的加载异步数据。 - - 能跟随主题切换的可视化图 + +
    +
  • +

    当未获取到宽高时，组件会默认以 200*200 尺寸填充。

    +
    • +
  • +

    + 默认启用 autoChangeTheme，自动监听模板主题变化（RayTemplate + 独有） +

    +
    • +
  • +

    默认启用 watchOptions，自动监听配置项变化

    +
    • +
  • +

    默认启用 animation，强制启用渲染过渡动画

    +
    • +
+ + 强制渲染过渡动画（animation） + + 渲染 + 卸载 +
- 渲染成功后运行回调函数 -
- -
不跟随主题切换的暗色主题可视化图
- +
加载动画