v4.1.8版本发布

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

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",

src/appConfig/designConfig.ts

@@ -60,4 +60,10 @@ export const APP_THEME: AppTheme = {
    * 地址: <https://www.naiveui.com/zh-CN/dark/docs/customize-theme#%E4%BD%BF%E7%94%A8-peers-%E4%B8%BB%E9%A2%98%E5%8F%98%E9%87%8F>
    */
   APP_NAIVE_UI_THEME_OVERRIDES: {},
+  /**
+   *
+   * 配置 echart 主题颜色
+   * 约定配置时以：主题名称为文件名，其文件夹下两个主题风格的 json 文件。并且暗色主题必须为 xxx-dark.json
+   */
+  echartTheme: 'macarons',
 }

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;
+  }
 }

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<echarts.EChartsCoreOption>,
       default: () => ({}),
     },
-    success: {
+    onSuccess: {
       /**
        *
        * 返回 chart 实例
        *
        * 渲染成功回调函数
        *
-       * () => EChartsInstance
+       * () => ECharts
        */
-      type: [Function, Array] as PropType<
+      type: [Function, Array] as PropType<MaybeArray<(e: ECharts) => void>>,
-        MaybeArray<(e: EChartsInstance) => 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<LoadingOptions>,
       default: () => loadingOptions(),
     },
+    observer: {
+      /**
+       *
+       * 需要被监听尺寸的元素
+       * 需要开启 autoResize 才能生效
+       * 默认以父元素作为监听对象
+       */
+      type: Object as PropType<MaybeComputedElementRef<MaybeElement>>,
+      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<HTMLElement>() // `echart` 容器实例
-    const echartInstanceRef = ref<EChartsInstance>() // `echart` 拷贝实例, 解决直接使用响应式实例带来的问题
+    const rayChartWrapperRef = ref<HTMLElement>()
-    let echartInstance: EChartsInstance // `echart` 实例
+    const echartInstanceRef = ref<ECharts>() // `echart` 实例
-    let resizeThrottle: DebouncedFunc<AnyFC> // resize 防抖方法实例
+    let echartInstance: ECharts | null // `echart` 拷贝实例, 解决直接使用响应式实例带来的问题
-    let resizeOvserverReturn: UseResizeObserverReturn | undefined
+    let resizeThrottleReturn: DebouncedFunc<AnyFC> | 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 = () => {
+    const combineChartOptions = (ops: EChartsCoreOption) => {
-      let options = cloneDeep(props.options)
+      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) {
+        if (onSuccess) {
-          call(success, echartInstance)
+          call(onSuccess, echartInstance)
         }
       } catch (e) {
         /** 渲染失败回调 */
-        if (error) {
+        if (onError) {
-          call(error)
+          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],
+      () => themeValue.value,
-      ([theme]) => {
+      (theme) => {
         /**
          *
          * Q: 为什么需要重新卸载再渲染
@@ -375,19 +452,19 @@ const RayChart = defineComponent({
       },
     )
 
-    watch(
-      () => props.showAria,
-      () => {
-        destroyChart()
-
     /**
      *
      * 贴花跟随主题渲染
      *
      * 自动跟随模板主题或者指定主题皆可
      */
+    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) => {
+      (ndata) => {
-        newData
+        ndata
-          ? echartInstance?.showLoading(modelLoadingOptions.value)
+          ? 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 */
+        mount()
-        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<HTMLElement>,
-          resizeThrottle,
-        )
       })
     })
 
     onBeforeUnmount(() => {
-      /** 卸载 echarts */
+      unmount()
-      destroyChart()
-      /** 卸载事件柄 */
-      off(window, 'resize', resizeThrottle)
-      /** 注销防抖 */
-      resizeThrottle.cancel()
-      resizeOvserverReturn?.stop?.()
-    })
-
-    expose({
-      echart: echartInstanceRef,
     })
 
     return {
       rayChartRef,
       cssVarsRef,
-      echartInstance: echartInstanceRef,
+      rayChartWrapperRef,
     }
   },
   render() {
     return (
-      <div class="ray-chart" style={[this.cssVarsRef]} ref="rayChartRef"></div>
+      <div class="ray-chart" style={[this.cssVarsRef]} ref="rayChartWrapperRef">
+        <div class="ray-chart__container" ref="rayChartRef"></div>
+      </div>
     )
   },
 })

src/components/RayChart/type.ts

@@ -9,6 +9,8 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
+import type { ECharts, EChartsCoreOption } from 'echarts/core'
+
 export interface ChartThemeRawModules {
   default: Record<string, UnknownObjectKey>
 }
@@ -41,3 +43,26 @@ export type AutoResize =
     }
 
 export type ChartTheme = 'macarons-dark' | string | object | 'macarons'
+
+export interface RayChartInst {
+  /**
+   *
+   * echart 实例
+   * 访问当前 chart 图所有方法与属性
+   *
+   * @default undefined
+   */
+  echart: Ref<ECharts | undefined>
+  /**
+   *
+   * 手动卸载当前 chart 图
+   * 注意：不会卸载当前组件，仅仅是卸载 chart
+   */
+  dispose: () => void
+  /**
+   *
+   * 手动渲染 chart 图
+   * 注意：会根据当前的 options 配置项与 props 配置项重新渲染 chart
+   */
+  render: () => void
+}

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 }

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<HTMLIFrameElement>
+}
+
 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) {
+      if (onSuccess) {
-        call(success, iframeRef.value as HTMLIFrameElement, e)
+        call(onSuccess, iframeRef.value as HTMLIFrameElement, e)
       }
     }
 
     const iframeLoadError = (e: Event) => {
       spinShow.value = false
 
-      const { error } = props
+      const { onError } = props
 
-      if (error) {
+      if (onError) {
-        call(error, e)
+        call(onError, e)
       }
     }
 

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;
     }
   }

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, { expose }) {
-  setup(props, { emit, expose }) {
     const rayTableInstance = ref<DataTableInst>()
 
     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<ActionOptions[]>
     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<Omit<DataTableInst, 'clearFilter'>>()
+    let prevRightClickIndex = -1 // 缓存上次点击索引位置
 
     /** 注入相关属性 */
     provide('tableSettingProvider', {
@@ -111,17 +118,12 @@ const RayTable = defineComponent({
       key: string | number,
       option: DropdownOption,
     ) => {
-      const { onRightMenuClick, 'onUpdate:rightMenuClick': _onRightMenuClick } =
+      const { onRightMenuClick } = props
-        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)
 
-      return {
+      const contextmenu = modelRightClickMenu.value.length
-        ...interceptRowProps,
+        ? (e: MouseEvent) => {
-        onContextmenu: (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: 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,8 +282,6 @@ const RayTable = defineComponent({
                   ...this.$slots,
                 }}
               </NDataTable>
-              {this.showMenu ? (
-                // 右键菜单
               <NDropdown
                 show={this.showMenu}
                 placement="bottom-start"
@@ -288,9 +292,6 @@ const RayTable = defineComponent({
                 onClickoutside={() => (this.showMenu = false)}
                 onSelect={this.handleRightMenuSelect.bind(this)}
               />
-              ) : (
-                ''
-              )}
             </>
           ),
           header: () => this.title || <div style="display: none;"></div>,

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<VNode>,
     default: () => ({}),
   },
-  showMenu: {
-    /**
-     *
-     * 是否展示右键菜单
-     *
-     * 默认启用
-     */
-    type: Boolean,
-    default: true,
-  },
   exportTooltip: {
     /**
      *
@@ -225,7 +207,30 @@ const rayTableProps = {
     type: Boolean,
     default: false,
   },
+  /** 导出成功 */
+  onExportSuccess: {
+    type: [Function, Array] as PropType<MaybeArray<() => void>>,
+    default: null,
+  },
+  /** 导出失败 */
+  onExportError: {
+    type: [Function, Array] as PropType<MaybeArray<() => 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
 
 /**

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({
                   }
                 />
               </NDescriptionsItem>
-              <NDescriptionsItem label="反转色">
-                <NSwitch
-                  v-model:value={this.invertSwitch}
-                  onUpdateValue={(bool: boolean) =>
-                    this.changeSwitcher(bool, 'invertSwitch')
-                  }
-                />
-              </NDescriptionsItem>
             </NDescriptions>
           </NSpace>
         </NDrawerContent>

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()),
   },

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,

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

src/styles/base.scss

@@ -44,17 +44,24 @@ img {
 }
 
 body {
-  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans",
+  font-family:
-    "Droid Sans", "Helvetica Neue", sans-serif;
+    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;

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);
+    }
+  }
+}

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
 }

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

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<RayChartInst>()
     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 (
       <div class="echart">
-        <NH2>RayChart 组件使用</NH2>
+        <NCard title="chart 组件">
-        <NP>
+          <ul>
-          该组件会默认以 200*200
+            <li>
-          宽高进行填充。预设了常用的图、方法组件，如果不满足需求，需要用 use
+              <h3>当未获取到宽高时，组件会默认以 200*200 尺寸填充。</h3>
-          方法进行手动拓展。该组件实现了自动跟随模板主题切换功能，但是动态切换损耗较大，所以默认不启用。
+            </li>
-          该组件可以让你只需要关注 options 的配置，无需关心 chart
+            <li>
-          图的资源管理。并且该组件可以自动监听 options
+              <h3>
-          的变化，所以天生支持响应式，可以让你放心的加载异步数据。
+                默认启用 autoChangeTheme，自动监听模板主题变化（RayTemplate
-        </NP>
+                独有）
-        <NH2>能跟随主题切换的可视化图</NH2>
+              </h3>
+            </li>
+            <li>
+              <h3>默认启用 watchOptions，自动监听配置项变化</h3>
+            </li>
+            <li>
+              <h3>默认启用 animation，强制启用渲染过渡动画</h3>
+            </li>
+          </ul>
+        </NCard>
+        <NH2>强制渲染过渡动画（animation）</NH2>
+        <NSpace style={['padding: 18px 0']}>
+          <NButton onClick={this.mountChart.bind(this)}>渲染</NButton>
+          <NButton onClick={this.unmountChart.bind(this)}>卸载</NButton>
+        </NSpace>
         <div class="chart--container">
           <RayChart
+            ref="baseChartRef"
             autoChangeTheme
             options={this.baseLineOptions}
             showAria={this.chartAria}
           />
         </div>
-        <NH2>渲染成功后运行回调函数</NH2>
-        <div class="chart--container">
-          <RayChart
-            ref="baseChartRef"
-            options={this.basePieOptions}
-            success={this.handleChartRenderSuccess.bind(this)}
-          />
-        </div>
         <NH2>不跟随主题切换的暗色主题可视化图</NH2>
         <div class="chart--container">
-          <RayChart theme="dark" options={this.baseOptions} />
+          <RayChart
+            autoChangeTheme={false}
+            theme="dark"
+            options={this.baseOptions}
+          />
         </div>
         <NH2>加载动画</NH2>
         <NSwitch