From 811bd0ca1cb1c58c5d8b63a5037aeec23c205f27 Mon Sep 17 00:00:00 2001
From: XiaoDaiGua-Ray <443547225@qq.com>
Date: Fri, 11 Aug 2023 22:50:38 +0800
Subject: [PATCH 01/19] 4.1.7

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a9c15207..0f4ce76c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "4.1.6",
+  "version": "4.1.7",
   "type": "module",
   "engines": {
     "node": ">=16.0.0",

From 6f98e8fb0db8554dbb18254c3a799450059c083a Mon Sep 17 00:00:00 2001
From: XiaoDaiGua-Ray <443547225@qq.com>
Date: Mon, 14 Aug 2023 17:42:05 +0800
Subject: [PATCH 02/19] =?UTF-8?q?v4.1.7=E7=BB=86=E8=8A=82=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cfg.ts                                |  4 ++++
 mock/demo/person.mock.ts              | 15 +++------------
 mock/shared/database.ts               | 20 ++++++++++++++++++--
 mock/shared/utils.ts                  |  4 ++++
 src/components/RayTable/src/index.tsx |  1 -
 src/views/demo/mock-demo/index.tsx    |  3 +++
 tsconfig.json                         |  7 +++++--
 7 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/cfg.ts b/cfg.ts
index c3367645..9ac1939b 100644
--- a/cfg.ts
+++ b/cfg.ts
@@ -135,6 +135,10 @@ const config: AppConfigExport = {
       find: '@use-images',
       replacement: path.resolve(__dirname, './src/assets/images'),
     },
+    {
+      find: '@mock',
+      replacement: path.resolve(__dirname, './mock'),
+    },
   ],
 }
 
diff --git a/mock/demo/person.mock.ts b/mock/demo/person.mock.ts
index 8cfefbbf..f4232eeb 100644
--- a/mock/demo/person.mock.ts
+++ b/mock/demo/person.mock.ts
@@ -1,26 +1,17 @@
 import { defineMock } from 'vite-plugin-mock-dev-server'
+import { pagination, stringify, response, array } from '@mock/shared/utils'
+import { tableMock } from '@mock/shared/database'
 import Mock from 'mockjs'
-import { pagination, stringify, response } from '../shared/utils'
-import { array } from '../shared/database'
 
 export const getPersonList = defineMock({
   url: '/api/list',
   method: 'GET',
   delay: 500,
   response: (req, res) => {
-    const person = () => ({
-      id: Mock.Random.guid(),
-      address: Mock.Random.county(true),
-      email: Mock.Random.email(),
-      name: Mock.Random.cname(),
-      age: Mock.Random.integer(18, 60),
-      createDate: Mock.Random.date(),
-    })
-
     const {
       query: { page, pageSize, email },
     } = req
-    let list = array(100).map(() => person())
+    let list = array(100).map(() => tableMock())
     let length = list.length
 
     if (!page || !pageSize) {
diff --git a/mock/shared/database.ts b/mock/shared/database.ts
index 8652e13d..91b817c5 100644
--- a/mock/shared/database.ts
+++ b/mock/shared/database.ts
@@ -9,6 +9,22 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-export function array(length: number) {
-  return new Array(length).fill(0)
+import Mock from 'mockjs'
+
+/**
+ *
+ * @param option 自定义配置
+ *
+ * 基础表格数据
+ */
+export function tableMock(option?: object) {
+  return {
+    ...option,
+    id: Mock.Random.guid(),
+    address: Mock.Random.county(true),
+    email: Mock.Random.email(),
+    name: Mock.Random.cname(),
+    age: Mock.Random.integer(18, 60),
+    createDate: Mock.Random.date(),
+  }
 }
diff --git a/mock/shared/utils.ts b/mock/shared/utils.ts
index bfcb991b..94ccd564 100644
--- a/mock/shared/utils.ts
+++ b/mock/shared/utils.ts
@@ -11,6 +11,10 @@
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+export function array(length: number) {
+  return new Array(length).fill(0)
+}
+
 /**
  *
  * @param pageCurrent 当前页码
diff --git a/src/components/RayTable/src/index.tsx b/src/components/RayTable/src/index.tsx
index 7a2ca908..41213fd8 100644
--- a/src/components/RayTable/src/index.tsx
+++ b/src/components/RayTable/src/index.tsx
@@ -255,7 +255,6 @@ const RayTable = defineComponent({
     }
   },
   render() {
-    console.log(this.action)
     return (
       <NCard
         class="ray-table"
diff --git a/src/views/demo/mock-demo/index.tsx b/src/views/demo/mock-demo/index.tsx
index 17bf88a2..4df1755d 100644
--- a/src/views/demo/mock-demo/index.tsx
+++ b/src/views/demo/mock-demo/index.tsx
@@ -45,6 +45,9 @@ const MockDemo = defineComponent({
       run: personFetchRun,
     } = useHookPlusRequest(getPersonList, {
       manual: true,
+      onSuccess: (data) => {
+        console.log(data)
+      },
     })
     const columns = [
       {
diff --git a/tsconfig.json b/tsconfig.json
index 6d680ace..322df7b6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,7 +23,9 @@
       "@use-api/*": ["src/axios/api/*"],
       "@use-images": ["src/assets/images"],
       "@use-images/*": ["src/assets/images"],
-      "@use-micro/*": ["src/micro/*"]
+      "@use-micro/*": ["src/micro/*"],
+      "@mock/*": ["mock/*"],
+      "@mock": ["mock/*"]
     },
     "suppressImplicitAnyIndexErrors": true,
     "typeRoots": ["./src/types/app.d.ts", "./src/types/global.d.ts"],
@@ -38,6 +40,7 @@
     "package.json",
     "vite-env.d.ts",
     "./unplugin/**/*",
-    "src/**/*"
+    "src/**/*",
+    "mock/**/*"
   ]
 }

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 03/19] =?UTF-8?q?v4.1.8=E7=89=88=E6=9C=AC=E5=8F=91?=
 =?UTF-8?q?=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 = {
    * 地址: <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',
 }
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<echarts.EChartsCoreOption>,
       default: () => ({}),
     },
-    success: {
+    onSuccess: {
       /**
        *
        * 返回 chart 实例
        *
        * 渲染成功回调函数
        *
-       * () => EChartsInstance
+       * () => ECharts
        */
-      type: [Function, Array] as PropType<
-        MaybeArray<(e: EChartsInstance) => void>
-      >,
+      type: [Function, Array] as PropType<MaybeArray<(e: ECharts) => 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` 拷贝实例, 解决直接使用响应式实例带来的问题
-    let echartInstance: EChartsInstance // `echart` 实例
-    let resizeThrottle: DebouncedFunc<AnyFC> // resize 防抖方法实例
-    let resizeOvserverReturn: UseResizeObserverReturn | undefined
+    const rayChartWrapperRef = ref<HTMLElement>()
+    const echartInstanceRef = ref<ECharts>() // `echart` 实例
+    let echartInstance: ECharts | null // `echart` 拷贝实例, 解决直接使用响应式实例带来的问题
+    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 = () => {
-      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<HTMLElement>,
-          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 (
-      <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>
     )
   },
 })
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<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
+}
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<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) {
-        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<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 } =
-        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,
                 }}
               </NDataTable>
-              {this.showMenu ? (
-                // 右键菜单
-                <NDropdown
-                  show={this.showMenu}
-                  placement="bottom-start"
-                  trigger="manual"
-                  x={this.x}
-                  y={this.y}
-                  options={this.modelRightClickMenu}
-                  onClickoutside={() => (this.showMenu = false)}
-                  onSelect={this.handleRightMenuSelect.bind(this)}
-                />
-              ) : (
-                ''
-              )}
+              <NDropdown
+                show={this.showMenu}
+                placement="bottom-start"
+                trigger="manual"
+                x={this.x}
+                y={this.y}
+                options={this.modelRightClickMenu}
+                onClickoutside={() => (this.showMenu = false)}
+                onSelect={this.handleRightMenuSelect.bind(this)}
+              />
             </>
           ),
           header: () => this.title || <div style="display: none;"></div>,
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<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
 
 /**
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({
                   }
                 />
               </NDescriptionsItem>
-              <NDescriptionsItem label="反转色">
-                <NSwitch
-                  v-model:value={this.invertSwitch}
-                  onUpdateValue={(bool: boolean) =>
-                    this.changeSwitcher(bool, 'invertSwitch')
-                  }
-                />
-              </NDescriptionsItem>
             </NDescriptions>
           </NSpace>
         </NDrawerContent>
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<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>
-        <NP>
-          该组件会默认以 200*200
-          宽高进行填充。预设了常用的图、方法组件，如果不满足需求，需要用 use
-          方法进行手动拓展。该组件实现了自动跟随模板主题切换功能，但是动态切换损耗较大，所以默认不启用。
-          该组件可以让你只需要关注 options 的配置，无需关心 chart
-          图的资源管理。并且该组件可以自动监听 options
-          的变化，所以天生支持响应式，可以让你放心的加载异步数据。
-        </NP>
-        <NH2>能跟随主题切换的可视化图</NH2>
+        <NCard title="chart 组件">
+          <ul>
+            <li>
+              <h3>当未获取到宽高时，组件会默认以 200*200 尺寸填充。</h3>
+            </li>
+            <li>
+              <h3>
+                默认启用 autoChangeTheme，自动监听模板主题变化（RayTemplate
+                独有）
+              </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

From 99cafd8cb15e5dc83c4add68b408a932653fccaf Mon Sep 17 00:00:00 2001
From: XiaoDaiGua-Ray <443547225@qq.com>
Date: Sun, 20 Aug 2023 14:57:22 +0800
Subject: [PATCH 04/19] 4.1.8

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d24f928b..226ba8b9 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "4.1.7",
+  "version": "4.1.8",
   "type": "module",
   "engines": {
     "node": ">=16.0.0",

From 2690e71713a4915ba3b6db70e09d8ca3f6f71667 Mon Sep 17 00:00:00 2001
From: XiaoDaiGua-Ray <443547225@qq.com>
Date: Fri, 25 Aug 2023 16:49:16 +0800
Subject: [PATCH 05/19] =?UTF-8?q?v4.1.8=E4=B8=80=E4=BA=9B=E7=BB=86?=
 =?UTF-8?q?=E8=8A=82=E8=A1=A5=E5=85=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintignore                                 |  1 +
 .eslintrc.cjs                                 | 12 +---
 .vscode/settings.json                         | 10 ++-
 CHANGELOG.md                                  |  3 +
 src/axios/index.ts                            |  6 +-
 src/components/RayChart/index.tsx             | 50 ++++++++++----
 src/directives/modules/copy/index.ts          | 12 ++--
 src/directives/modules/debounce/index.ts      | 13 ++--
 src/directives/modules/disabled/index.ts      | 11 ++--
 src/directives/modules/throttle/index.ts      | 10 +--
 src/icons/language.svg                        |  9 +--
 src/icons/{scroll_reveal.svg => mouse.svg}    |  0
 src/router/helper/permission.ts               |  2 +-
 src/router/modules/demo/router-demo.ts        |  1 -
 src/router/modules/demo/svg-icons.ts          | 17 +++++
 src/store/modules/menu/index.ts               |  2 -
 src/styles/base.scss                          | 29 +++++++++
 src/views/demo/doc/index.tsx                  |  2 +-
 src/views/demo/echart/index.tsx               | 28 +++++++-
 src/views/demo/iframe/index.tsx               |  4 +-
 .../router-demo/router-demo-detail/index.tsx  |  9 ++-
 .../router-demo/router-demo-home/index.tsx    |  3 -
 src/views/demo/svg-icons/index.scss           | 10 +++
 src/views/demo/svg-icons/index.tsx            | 65 +++++++++++++++++++
 24 files changed, 237 insertions(+), 72 deletions(-)
 rename src/icons/{scroll_reveal.svg => mouse.svg} (100%)
 create mode 100644 src/router/modules/demo/svg-icons.ts
 create mode 100644 src/views/demo/svg-icons/index.scss
 create mode 100644 src/views/demo/svg-icons/index.tsx

diff --git a/.eslintignore b/.eslintignore
index 108c8d65..989633d8 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -15,3 +15,4 @@ src/locales/lang
 .depcheckrc
 src/components/RayChart/theme
 *.md
+src/icons/*.svg
\ No newline at end of file
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 7aeaa58d..f564c44a 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -106,7 +106,7 @@ module.exports = {
     'no-lone-blocks': 2, // 禁止不必要的嵌套块
     'no-multi-spaces': 1, // 禁止使用多余的空格
     'no-multiple-empty-lines': [1, { max: 2 }], // 空行最多不能超过 `2` 行
-    'no-new-func': 1, // 禁止使用 `new Function`
+    'no-new-func': 2, // 禁止使用 `new Function`
     'no-new-object': 2, // 禁止使用 `new Object`
     'no-new-require': 2, // 禁止使用 `new require`
     'no-sparse-arrays': 2, // 禁止稀疏数组
@@ -124,7 +124,6 @@ module.exports = {
     'no-useless-call': 2, // 禁止不必要的 `call` 和 `apply`
     'no-var': 'error', // 禁用 `var`
     'no-with': 2, // 禁用 `with`
-    'no-undef': 0,
     'use-isnan': 2, // 强制使用 isNaN 判断 NaN
     'no-multi-assign': 2, // 禁止连续声明变量
     'prefer-arrow-callback': 2, // 强制使用箭头函数作为回调
@@ -143,15 +142,6 @@ module.exports = {
     ],
     'vue/require-v-for-key': ['error'],
     'vue/require-valid-default-prop': ['error'],
-    'no-use-before-define': [
-      'error',
-      {
-        functions: true,
-        classes: true,
-        variables: false,
-        allowNamedExports: false,
-      },
-    ],
     'vue/component-definition-name-casing': ['error', 'PascalCase'],
     'vue/html-closing-bracket-newline': [
       'error',
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 93251d2d..409e9964 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -9,5 +9,13 @@
   "i18n-ally.displayLanguage": "zh-CN",
   "i18n-ally.enabledFrameworks": ["vue", "react"],
   "typescript.tsdk": "node_modules/typescript/lib",
-  "synthwave84.disableGlow": true
+  "alias-skip.mappings": {
+    "@": "/src",
+    "@use-utils": "/src/utils",
+    "@use-api": "/src/axios/api",
+    "@use-images": "/src/assets/images",
+    "@mock": "/mock"
+  },
+  "alias-skip.allowedsuffix": ["ts", "tsx"],
+  "alias-skip.rootpath": "package.json"
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
index efc011ad..76374d13 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,9 @@
   - RayChartInst 新增 dispose render 方法，允许手动渲染与卸载 chart 图
   - 新增 animation 属性，如果为 true 则会强制触发渲染过渡动画。该配置受 `options.animation` 属性影响，如果该配置为 false 则不会启用过渡动画
 - 移除反转色功能
+- 新增图标页面
+- 修改国际化图标
+- 剔除无用代码，性能++++
 
 ## 4.1.7
 
diff --git a/src/axios/index.ts b/src/axios/index.ts
index 2dec3231..ec52083e 100644
--- a/src/axios/index.ts
+++ b/src/axios/index.ts
@@ -29,10 +29,10 @@ import type { AppRawRequestConfig } from '@/axios/type'
 
 /**
  *
- * 该方法有一定的局限性，仅可在 setup 环境中使用
- * 如果在非 vue component 文件中使用，会抛出一些警告
+ * 该方法有一定的局限性，仅可在 effect 作用域中使用
+ * 如果在非 vue effect scope 中使用，会抛出一些警告
  *
- * 非 vue component 中使用
+ * 非 vue effect 中使用
  * @example
  *
  * const getUser = () => request({ url: 'http://localhost:3000/user' })
diff --git a/src/components/RayChart/index.tsx b/src/components/RayChart/index.tsx
index 7439beec..bc6838ab 100644
--- a/src/components/RayChart/index.tsx
+++ b/src/components/RayChart/index.tsx
@@ -61,7 +61,7 @@ import type {
   MaybeComputedElementRef,
   MaybeElement,
 } from '@vueuse/core'
-import type { ECharts, EChartsCoreOption } from 'echarts/core'
+import type { ECharts, EChartsCoreOption, SetOptionOpts } from 'echarts/core'
 
 export type EChartsExtensionInstallRegisters = typeof CanvasRenderer
 export type { RayChartInst } from './type'
@@ -205,6 +205,22 @@ const RayChart = defineComponent({
       type: Boolean,
       default: true,
     },
+    setChartOptions: {
+      /**
+       *
+       * 当 options 配置项更改时候，setOptions 方法配置项
+       *
+       * 默认值
+       * notMerge: false,
+       * lazyUpdate: true,
+       * silent: false,
+       * replaceMerge: [],
+       *
+       * 会自动进行合并配置项
+       */
+      type: Object as PropType<SetOptionOpts>,
+      default: () => ({}),
+    },
   },
   setup(props, { expose }) {
     const settingStore = useSetting()
@@ -264,7 +280,7 @@ const RayChart = defineComponent({
         echarts.use(props.use?.filter(Boolean))
       } catch (e) {
         console.error(
-          'Error: wrong property and method passed in extend attribute',
+          'register chart Core error: wrong property and method passed in extend attribute',
         )
       }
     }
@@ -481,22 +497,28 @@ const RayChart = defineComponent({
       },
     )
 
-    if (props.watchOptions) {
-      /** 监听 options 变化 */
-      watch(
-        () => props.options,
-        (noptions) => {
+    /** 监听 options 变化 */
+    watch(
+      () => props.options,
+      (noptions) => {
+        if (props.watchOptions) {
           /** 重新组合 options */
           const options = combineChartOptions(noptions)
+          const setOpt = Object.assign({}, props.setChartOptions, {
+            notMerge: false,
+            lazyUpdate: true,
+            silent: false,
+            replaceMerge: [],
+          })
 
           /** 如果 options 发生变动更新 echarts */
-          echartInstance?.setOption(options)
-        },
-        {
-          deep: true,
-        },
-      )
-    }
+          echartInstance?.setOption(options, setOpt)
+        }
+      },
+      {
+        deep: true,
+      },
+    )
 
     expose({
       echart: echartInstanceRef,
diff --git a/src/directives/modules/copy/index.ts b/src/directives/modules/copy/index.ts
index becc4554..b40cbe82 100644
--- a/src/directives/modules/copy/index.ts
+++ b/src/directives/modules/copy/index.ts
@@ -23,11 +23,9 @@ const copyDirective: CustomDirectiveFC<CopyElement, string> = () => {
   let clipboard: ClipboardJS | null
 
   return {
-    mounted: (el, binding) => {
-      const value = binding.value
-
+    mounted: (el, { value }) => {
       clipboard = new ClipboardJS(el, {
-        text: () => String(value),
+        text: () => value,
       })
 
       clipboard?.on('success', () => {
@@ -37,12 +35,10 @@ const copyDirective: CustomDirectiveFC<CopyElement, string> = () => {
         window.$message.error('复制失败')
       })
     },
-    updated: (el, binding) => {
+    updated: (el, { value }) => {
       /** 其实这块代码写的挺蠢的, 但是我目前不知道怎么去优化, 阿巴阿巴阿巴 */
-      const value = binding.value
-
       clipboard = new ClipboardJS(el, {
-        text: () => String(value),
+        text: () => value,
       })
     },
     beforeUnmount: () => {
diff --git a/src/directives/modules/debounce/index.ts b/src/directives/modules/debounce/index.ts
index ec5cb83e..f7bd712a 100644
--- a/src/directives/modules/debounce/index.ts
+++ b/src/directives/modules/debounce/index.ts
@@ -30,16 +30,19 @@ const debounceDirective: CustomDirectiveFC<
   let debounceFunction: DebouncedFunc<AnyFC> | null
 
   return {
-    beforeMount: (el, binding) => {
-      const { func, trigger = 'click', wait = 500, options } = binding.value
+    beforeMount: (el, { value }) => {
+      const { func, trigger = 'click', wait = 500, options } = value
+
       if (typeof func !== 'function') {
         throw new Error('debounce directive value must be a function')
       }
-      debounceFunction = debounce(func, wait, Object.assign({}, {}, options))
+
+      debounceFunction = debounce(func, wait, Object.assign({}, options))
+
       on(el, trigger, debounceFunction)
     },
-    beforeUnmount: (el, binding) => {
-      const { trigger = 'click' } = binding.value
+    beforeUnmount: (el, { value }) => {
+      const { trigger = 'click' } = value
 
       if (debounceFunction) {
         debounceFunction.cancel()
diff --git a/src/directives/modules/disabled/index.ts b/src/directives/modules/disabled/index.ts
index d49a6302..5bda0374 100644
--- a/src/directives/modules/disabled/index.ts
+++ b/src/directives/modules/disabled/index.ts
@@ -16,7 +16,6 @@
 
 import { addClass, removeClass } from '@/utils/element'
 
-import type { Directive } from 'vue'
 import type { CustomDirectiveFC } from '@/directives/type'
 
 const updateElementDisabledType = (el: HTMLElement, value: boolean) => {
@@ -30,13 +29,13 @@ const updateElementDisabledType = (el: HTMLElement, value: boolean) => {
 
 const disabledDirective: CustomDirectiveFC<HTMLElement, boolean> = () => {
   return {
-    mounted: (el, binding) => {
-      const value = binding.value
-
+    mounted: (el, { value }) => {
       updateElementDisabledType(el, value)
     },
-    updated: (el, binding) => {
-      const value = binding.value
+    updated: (el, { value, oldValue }) => {
+      if (value === oldValue) {
+        return
+      }
 
       updateElementDisabledType(el, value)
     },
diff --git a/src/directives/modules/throttle/index.ts b/src/directives/modules/throttle/index.ts
index 6a322aca..ccf91301 100644
--- a/src/directives/modules/throttle/index.ts
+++ b/src/directives/modules/throttle/index.ts
@@ -30,19 +30,19 @@ const throttleDirective: CustomDirectiveFC<
   let throttleFunction: DebouncedFunc<AnyFC> | null
 
   return {
-    beforeMount: (el, binding) => {
-      const { func, trigger = 'click', wait = 500, options } = binding.value
+    beforeMount: (el, { value }) => {
+      const { func, trigger = 'click', wait = 500, options } = value
 
       if (typeof func !== 'function') {
         throw new Error('throttle directive value must be a function')
       }
 
-      throttleFunction = throttle(func, wait, Object.assign({}, {}, options))
+      throttleFunction = throttle(func, wait, Object.assign({}, options))
 
       on(el, trigger, throttleFunction)
     },
-    beforeUnmount: (el, binding) => {
-      const { trigger = 'click' } = binding.value
+    beforeUnmount: (el, { value }) => {
+      const { trigger = 'click' } = value
 
       if (throttleFunction) {
         throttleFunction.cancel()
diff --git a/src/icons/language.svg b/src/icons/language.svg
index b399fdcb..96673e07 100644
--- a/src/icons/language.svg
+++ b/src/icons/language.svg
@@ -1,6 +1,7 @@
-<svg t="1669090001868" class="icon" viewBox="0 0 1024 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg" p-id="7911" width="200" height="200">
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24"
+>
+  <path d="M0 0h24v24H0z" fill="currentColor"></path>
   <path
-    d="M918.954667 880.896c-0.618667-1.322667-154.688-334.378667-177.194667-382.421333-135.402667-288.917333-174.976-369.642667-196.821333-391.957334a31.829333 31.829333 0 0 0-13.013334-12.138666 32 32 0 0 0-42.944 14.293333L109.909333 865.706667a32 32 0 0 0 57.216 28.672l99.349334-198.421334h496.725333a49853.44 49853.44 0 0 1 97.536 211.605334 32.021333 32.021333 0 0 0 58.218667-26.666667zM521.002667 187.626667c39.850667 76.650667 126.698667 260.117333 212.458666 444.330666H298.517333L521.002667 187.626667z"
-    fill="currentColor" p-id="7912"></path>
+    d=" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z "
+  ></path>
 </svg>
\ No newline at end of file
diff --git a/src/icons/scroll_reveal.svg b/src/icons/mouse.svg
similarity index 100%
rename from src/icons/scroll_reveal.svg
rename to src/icons/mouse.svg
diff --git a/src/router/helper/permission.ts b/src/router/helper/permission.ts
index a16469f0..3042d817 100644
--- a/src/router/helper/permission.ts
+++ b/src/router/helper/permission.ts
@@ -41,7 +41,7 @@ export const permissionRouter = (router: Router) => {
 
   beforeEach((to, from, next) => {
     const token = getStorage<string>(APP_CATCH_KEY.token)
-    const catchRoutePath = getStorage<string>(
+    const catchRoutePath = getStorage(
       'menuKey',
       'sessionStorage',
       ROOT_ROUTE.path,
diff --git a/src/router/modules/demo/router-demo.ts b/src/router/modules/demo/router-demo.ts
index 29f267cf..d7a41d81 100644
--- a/src/router/modules/demo/router-demo.ts
+++ b/src/router/modules/demo/router-demo.ts
@@ -29,7 +29,6 @@ const routerDemo: AppRouteRecordRaw = {
         import('@/views/demo/router-demo/router-demo-detail/index'),
       meta: {
         noLocalTitle: '信息详情',
-        hidden: true,
         sameLevel: true,
       },
     },
diff --git a/src/router/modules/demo/svg-icons.ts b/src/router/modules/demo/svg-icons.ts
new file mode 100644
index 00000000..c7aa971c
--- /dev/null
+++ b/src/router/modules/demo/svg-icons.ts
@@ -0,0 +1,17 @@
+import { t } from '@/locales/useI18n'
+import { LAYOUT } from '@/router/constant/index'
+
+import type { AppRouteRecordRaw } from '@/router/type'
+
+const previewSVGIcons: AppRouteRecordRaw = {
+  path: '/svg-icons',
+  name: 'PreviewSVGIcons',
+  component: () => import('@/views/demo/svg-icons/index'),
+  meta: {
+    noLocalTitle: 'SVG图标',
+    icon: 'other',
+    order: 3,
+  },
+}
+
+export default previewSVGIcons
diff --git a/src/store/modules/menu/index.ts b/src/store/modules/menu/index.ts
index 323f5b59..4b35bfca 100644
--- a/src/store/modules/menu/index.ts
+++ b/src/store/modules/menu/index.ts
@@ -34,11 +34,9 @@ import {
 } from './helper'
 import { useI18n } from '@/locales/useI18n'
 import { getAppRawRoutes } from '@/router/routeModules'
-import { expandRoutes } from '@/router/helper/expandRoutes'
 import { useKeepAlive } from '@/store'
 import { useVueRouter } from '@/router/helper/useVueRouter'
 
-import type { MenuOption } from 'naive-ui'
 import type { AppRouteMeta, AppRouteRecordRaw } from '@/router/type'
 import type {
   AppMenuOption,
diff --git a/src/styles/base.scss b/src/styles/base.scss
index 2c3bcc9b..623162c6 100644
--- a/src/styles/base.scss
+++ b/src/styles/base.scss
@@ -41,6 +41,35 @@ fieldset,
 img {
   border: 0;
   vertical-align: middle;
+  border-style: none;
+}
+
+a {
+  background-color: transparent;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
 }
 
 body {
diff --git a/src/views/demo/doc/index.tsx b/src/views/demo/doc/index.tsx
index 23dc6b56..027f4aeb 100644
--- a/src/views/demo/doc/index.tsx
+++ b/src/views/demo/doc/index.tsx
@@ -21,7 +21,7 @@ const RTemplateDoc = defineComponent({
       <RayIframe
         width="100%"
         height="100%"
-        src="https://ray-template.yunkuangao.com/ray-template-doc/"
+        src="https://xiaodaigua-ray.github.io/ray-template-doc/"
         lazy
       ></RayIframe>
     )
diff --git a/src/views/demo/echart/index.tsx b/src/views/demo/echart/index.tsx
index c478bcfe..12eb9b4c 100644
--- a/src/views/demo/echart/index.tsx
+++ b/src/views/demo/echart/index.tsx
@@ -3,6 +3,8 @@ import './index.scss'
 import { NCard, NSwitch, NSpace, NP, NH2, NButton } from 'naive-ui'
 import RayChart from '@/components/RayChart/index'
 
+import dayjs from 'dayjs'
+
 import type { ECharts } from 'echarts/core'
 import type { RayChartInst } from '@/components/RayChart/index'
 
@@ -82,9 +84,9 @@ const Echart = defineComponent({
         },
       ],
     }
-    const baseLineOptions = {
+    const baseLineOptions = ref({
       title: {
-        text: 'Stacked Area Chart',
+        text: dayjs().valueOf(),
       },
       tooltip: {
         trigger: 'axis',
@@ -177,7 +179,7 @@ const Echart = defineComponent({
           data: [820, 932, 901, 934, 1290, 1330, 1320],
         },
       ],
-    }
+    })
 
     const handleLoadingShow = (bool: boolean) => {
       state.loading = bool
@@ -205,6 +207,19 @@ const Echart = defineComponent({
       baseChartRef.value?.dispose()
     }
 
+    const handleUpdateTitle = () => {
+      baseLineOptions.value.title.text = dayjs().valueOf()
+
+      const createData = () => Math.floor((Math.random() + 1) * 100)
+
+      baseLineOptions.value.series[0].data = new Array(7)
+        .fill(0)
+        .map(() => createData())
+      baseLineOptions.value.series[1].data = new Array(7)
+        .fill(0)
+        .map(() => createData())
+    }
+
     return {
       baseOptions,
       baseChartRef,
@@ -218,6 +233,7 @@ const Echart = defineComponent({
       ...toRefs(state),
       mountChart,
       unmountChart,
+      handleUpdateTitle,
     }
   },
   render() {
@@ -240,12 +256,18 @@ const Echart = defineComponent({
             <li>
               <h3>默认启用 animation，强制启用渲染过渡动画</h3>
             </li>
+            <li>
+              <h3>配置 setChartOptions 属性，可以定制化合并模式</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>
+          <NButton onClick={this.handleUpdateTitle.bind(this)}>
+            更新配置项
+          </NButton>
         </NSpace>
         <div class="chart--container">
           <RayChart
diff --git a/src/views/demo/iframe/index.tsx b/src/views/demo/iframe/index.tsx
index f559044d..1e81f0d5 100644
--- a/src/views/demo/iframe/index.tsx
+++ b/src/views/demo/iframe/index.tsx
@@ -35,9 +35,9 @@ const IframeDemo = defineComponent({
             allow="fullscreen"
           />
         </NCard>
-        <NCard title="vueuse（立即加载）">
+        <NCard title="vue-hooks-plus（立即加载）">
           <RayIframe
-            src="https://www.vueusejs.com/"
+            src="https://inhiblabcore.github.io/docs/hooks/"
             height="300"
             lazy={false}
           />
diff --git a/src/views/demo/router-demo/router-demo-detail/index.tsx b/src/views/demo/router-demo/router-demo-detail/index.tsx
index 49e9005a..46cb6d23 100644
--- a/src/views/demo/router-demo/router-demo-detail/index.tsx
+++ b/src/views/demo/router-demo/router-demo-detail/index.tsx
@@ -13,12 +13,17 @@ import { NCard, NSpace } from 'naive-ui'
 
 const RouterDemoDetail = defineComponent({
   name: 'RouterDemoDetail',
-
   render() {
     return (
       <NSpace wrapItem={false}>
         <NCard title="平层路由详情页面">我是平层路由详情页面</NCard>
-        <NCard title="TIP">可以点击面包屑或者菜单返回到主页面</NCard>
+        <NCard title="TIP">
+          <h2>1. 可以点击面包屑或者菜单返回到主页面</h2>
+          <h2>
+            2. 如果这个页面需要配置多个详情页面，只需将该路由所在的 children
+            中，将所需页面配置为 sameLevel 即可。
+          </h2>
+        </NCard>
       </NSpace>
     )
   },
diff --git a/src/views/demo/router-demo/router-demo-home/index.tsx b/src/views/demo/router-demo/router-demo-home/index.tsx
index b72bf663..9319a692 100644
--- a/src/views/demo/router-demo/router-demo-home/index.tsx
+++ b/src/views/demo/router-demo/router-demo-home/index.tsx
@@ -52,9 +52,6 @@ const RouterDemoHome = defineComponent({
                 onClick={() => {
                   router.push({
                     path: '/router-demo/router-demo-detail',
-                    query: {
-                      row: JSON.stringify(row),
-                    },
                   })
                 }}
               >
diff --git a/src/views/demo/svg-icons/index.scss b/src/views/demo/svg-icons/index.scss
new file mode 100644
index 00000000..44170c60
--- /dev/null
+++ b/src/views/demo/svg-icons/index.scss
@@ -0,0 +1,10 @@
+.pre-view-icons__card {
+  width: 120px;
+  height: 120px;
+  padding: 18px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid var(--n-border-color);
+  border-radius: var(--n-border-radius);
+}
diff --git a/src/views/demo/svg-icons/index.tsx b/src/views/demo/svg-icons/index.tsx
new file mode 100644
index 00000000..32f53652
--- /dev/null
+++ b/src/views/demo/svg-icons/index.tsx
@@ -0,0 +1,65 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-08-25
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import './index.scss'
+
+import { NSpace, NCard, NPopover } from 'naive-ui'
+import RayIcon from '@/components/RayIcon/index'
+
+const PreviewSVGIcons = defineComponent({
+  name: 'PreviewSVGIcons',
+  setup() {
+    const icons = ref<string[]>([])
+    const iconsModules = import.meta.glob('@/icons/**.svg')
+
+    Object.keys(iconsModules).forEach((curr) => {
+      const iconName = curr.match(/\/(\w+)\.svg/)![1]
+
+      if (iconName) {
+        icons.value.push(iconName)
+      }
+    })
+
+    return {
+      icons,
+    }
+  },
+  render() {
+    return (
+      <NCard title="svg图标">
+        {{
+          'header-extra': () => '点击图标复制代码',
+          default: () => (
+            <NSpace wrapItem={false}>
+              {this.icons.map((curr) => (
+                <div
+                  class="pre-view-icons__card"
+                  v-copy={`<RayIcon name="${curr}" size="56" />`}
+                >
+                  <NPopover>
+                    {{
+                      trigger: () => (
+                        <RayIcon name={curr} size="56" cursor="pointer" />
+                      ),
+                      default: () => curr,
+                    }}
+                  </NPopover>
+                </div>
+              ))}
+            </NSpace>
+          ),
+        }}
+      </NCard>
+    )
+  },
+})
+
+export default PreviewSVGIcons

From b1890df8f6464561ee3573f19ea095d80c960ab6 Mon Sep 17 00:00:00 2001
From: XiaoDaiGua-Ray <443547225@qq.com>
Date: Fri, 25 Aug 2023 17:01:35 +0800
Subject: [PATCH 06/19] =?UTF-8?q?v4.1.8=E7=BB=86=E8=8A=82=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/icons/language.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/icons/language.svg b/src/icons/language.svg
index 96673e07..0b670b90 100644
--- a/src/icons/language.svg
+++ b/src/icons/language.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24"
 >
-  <path d="M0 0h24v24H0z" fill="currentColor"></path>
+  <path d="M0 0h24v24H0z" fill="none"></path>
   <path
     d=" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z "
   ></path>

From 4dd2024becf164b7e6849515bd0e370ddd7ca455 Mon Sep 17 00:00:00 2001
From: XiaoDaiGua-Ray <443547225@qq.com>
Date: Tue, 29 Aug 2023 10:30:21 +0800
Subject: [PATCH 07/19] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DRayCollapseGrid?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=B8=80=E4=BA=9B=E5=B0=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.cjs                                |  7 ++++-
 src/components/RayCollapseGrid/src/index.tsx | 33 +++++++++-----------
 src/views/demo/mock-demo/index.tsx           | 10 +++---
 3 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index f564c44a..5a8d10e1 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -105,7 +105,12 @@ module.exports = {
     'no-labels': 2, // 禁止标签声明
     'no-lone-blocks': 2, // 禁止不必要的嵌套块
     'no-multi-spaces': 1, // 禁止使用多余的空格
-    'no-multiple-empty-lines': [1, { max: 2 }], // 空行最多不能超过 `2` 行
+    'no-multiple-empty-lines': [
+      'error',
+      {
+        max: 2,
+      },
+    ], // 空行最多不能超过 `2` 行
     'no-new-func': 2, // 禁止使用 `new Function`
     'no-new-object': 2, // 禁止使用 `new Object`
     'no-new-require': 2, // 禁止使用 `new require`
diff --git a/src/components/RayCollapseGrid/src/index.tsx b/src/components/RayCollapseGrid/src/index.tsx
index 1f49d0d5..4c29feb4 100644
--- a/src/components/RayCollapseGrid/src/index.tsx
+++ b/src/components/RayCollapseGrid/src/index.tsx
@@ -9,6 +9,16 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
+/**
+ *
+ * <https://www.naiveui.com/zh-CN/dark/components/grid>
+ *
+ * 可折叠操作栏
+ * 可以结合表单或者表格使用，让你快捷的实现高级搜索功能
+ *
+ * 该组件完全基于 `NGrid` `NGridItem` 实现, 所以需要在使用该组件时使用 `NGridItem` 包裹元素
+ */
+
 import './index.scss'
 
 import { collapseGridProps } from './props'
@@ -76,14 +86,10 @@ const RayCollapseGrid = defineComponent({
             >
               {this.$slots.default?.()}
               <NGridItem suffix class="ray-collapse-grid__suffix--btn">
-                {{
-                  default: ({ overflow }: { overflow: boolean }) => (
-                    <NSpace justify="end">
-                      {this.$slots.action?.()}
-                      {overflow ? this.CollapseIcon() : ''}
-                    </NSpace>
-                  ),
-                }}
+                <NSpace justify="end">
+                  {this.$slots.action?.()}
+                  {this.CollapseIcon()}
+                </NSpace>
               </NGridItem>
             </NGrid>
           ),
@@ -94,14 +100,3 @@ const RayCollapseGrid = defineComponent({
 })
 
 export default RayCollapseGrid
-
-/**
- *
- * <https://www.naiveui.com/zh-CN/dark/components/grid>
- *
- * 可折叠操作栏
- *
- * 可以结合表单或者表格使用
- *
- * 该组件完全基于 `NGrid` `NGridItem` 实现, 所以需要在使用该组件时使用 `NGridItem` 包裹元素
- */
diff --git a/src/views/demo/mock-demo/index.tsx b/src/views/demo/mock-demo/index.tsx
index 4df1755d..dbc65de9 100644
--- a/src/views/demo/mock-demo/index.tsx
+++ b/src/views/demo/mock-demo/index.tsx
@@ -170,13 +170,13 @@ const MockDemo = defineComponent({
                   <NFormItemGi label="邮箱">
                     <NInput v-model:value={this.email} clearable />
                   </NFormItemGi>
-                  <NFormItemGi>
-                    <NButton type="primary" onClick={this.getPerson.bind(this)}>
-                      搜索
-                    </NButton>
-                  </NFormItemGi>
                 </>
               ),
+              action: () => (
+                <NButton type="primary" onClick={this.getPerson.bind(this)}>
+                  搜索
+                </NButton>
+              ),
             }}
           </RayCollapseGrid>
         </NForm>

From d6be8fe9fe833cfe086b3fddf7dcd9364fcedd7e Mon Sep 17 00:00:00 2001
From: XiaoDaiGua-Ray <443547225@qq.com>
Date: Thu, 31 Aug 2023 15:29:46 +0800
Subject: [PATCH 08/19] v4.1.9

---
 CHANGELOG.md                                  |  13 +
 README.md                                     | 147 ++++-----
 package.json                                  |   2 +-
 postcss.config.cjs                            |   2 +
 src/components/RayQRCode/index.ts             |   9 +
 src/components/RayQRCode/src/index.scss       |  26 ++
 src/components/RayQRCode/src/index.tsx        | 140 +++++++++
 src/components/RayQRCode/src/props.ts         | 281 ++++++++++++++++++
 src/components/RayQRCode/src/type.ts          |  26 ++
 src/router/modules/demo/qrcode.ts             |  17 ++
 src/utils/hook.ts                             |  16 +
 src/views/demo/qrcode/index.tsx               | 104 +++++++
 .../login/components/QRCodeSignin/index.tsx   |   6 +-
 src/vite-env.d.ts                             |   1 +
 unplugin/.eslintrc-auto-import.json           |   8 +
 unplugin/auto-imports.d.ts                    |   9 +-
 vite.config.ts                                |   2 +-
 17 files changed, 708 insertions(+), 101 deletions(-)
 create mode 100644 src/components/RayQRCode/index.ts
 create mode 100644 src/components/RayQRCode/src/index.scss
 create mode 100644 src/components/RayQRCode/src/index.tsx
 create mode 100644 src/components/RayQRCode/src/props.ts
 create mode 100644 src/components/RayQRCode/src/type.ts
 create mode 100644 src/router/modules/demo/qrcode.ts
 create mode 100644 src/views/demo/qrcode/index.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 76374d13..d25d2273 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,18 @@
 # CHANGE LOG
 
+## 4.1.9
+
+### Feats
+
+- 新增 RayQRCode 组件（二维码）
+  - 基于 awesome-qr 封装，继承其所有特性。并且拓展了 状态、下载、自动更新等属性
+  - 自动卸载于释放内存，仅需要关注 text 内容填充
+- 移除 qrcode.vue 依赖
+
+### Fixes
+
+- 修复了一些小细节问题
+
 ## 4.1.8
 
 ### Feats
diff --git a/README.md b/README.md
index 9d93aeb9..144c050c 100644
--- a/README.md
+++ b/README.md
@@ -1,44 +1,16 @@
 <div align="center"> <a href="https://github.com/XiaoDaiGua-Ray/ray-template"> <img alt="Ray Template" width="200" height="200" src="https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:alist/ray/ray.svg?sign=ZklU9Bh5b6oKp1X0LOhGwkx4g5mW4wk_w9Jt5zlZ5EQ=:0"> </a> <br> <br>
 
-<h1>Ray Template</h1>
 </div>
 
-<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+<div align="center">
 
-[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)
+# Ray Template
 
-<!-- ALL-CONTRIBUTORS-BADGE:END -->
+一个基于 vite4.x & ts(x) & pinia & vue3.x 的中后台模板
 
-## 前言
+</div>
 
-> 该项目模板采用 `vue3.x` `vite4.x` `pinia` `tsx` 进行开发。
-> 使用 `naive ui` 作为组件库。
-> 预设了最佳构建体验的配置与常用搬砖工具。意在提供一个简洁、快速上手的模板。
-> 该模板不支持移动端设备。
-
-## 感谢
-
-> 感谢 [`yun`](https://me.yka.moe/) 对于本人的支持。
-
-## 预览地址
-
-- [点击预览](https://xiaodaigua-ray.github.io/ray-template/#/)
-- [点击预览(加速地址)](https://ray-template.yunkuangao.com/#/)
-
-## 文档地址
-
-- [文档](https://xiaodaigua-ray.github.io/ray-template-doc/)
-- [文档(加速地址)](https://ray-template.yunkuangao.com/ray-template-doc/)
-
-## 更新日志
-
-- [日志](https://github.com/XiaoDaiGua-Ray/xiaodaigua-ray.github.io/blob/main/CHANGELOG.md)
-
-## 常见问题
-
-- [常见问题](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/COMMONPROBLEM.md)
-
-## 特性
+## ✨ 特性
 
 - **最新技术栈**：使用 Vue3.x/vite4.x 等前端前沿技术开发
 - **TypeScript**：应用程序级 JavaScript 的语言
@@ -49,7 +21,21 @@
 - **组件**：二次封装了多个常用的组件
 - **Axios 请求**：二次封装 axios 库
 
-## 准备
+## 🪄 预览地址
+
+- [点击预览](https://xiaodaigua-ray.github.io/ray-template/#/)
+- [点击预览(加速地址)](https://ray-template.yunkuangao.com/#/)
+
+## 🦾 文档地址
+
+- [文档](https://xiaodaigua-ray.github.io/ray-template-doc/)
+- [文档(加速地址)](https://ray-template.yunkuangao.com/ray-template-doc/)
+
+## 🔋 更新日志
+
+- [更新日志](https://github.com/XiaoDaiGua-Ray/xiaodaigua-ray.github.io/blob/main/CHANGELOG.md)
+
+## 🪴 准备
 
 - [node](http://nodejs.org/) 和 [git](https://git-scm.com/) -项目开发环境
 - [Vite](https://vitejs.dev/) - 熟悉 vite 特性
@@ -62,16 +48,9 @@
 - [Pinia](https://pinia.vuejs.org/zh/introduction.html) - 状态管理器 pinia 使用
 - [TSX](https://github.com/vuejs/babel-plugin-jsx/blob/main/packages/babel-plugin-jsx/README-zh_CN.md) - tsx 基本语法
 
-## 未来
+## 📦 起步
 
-> 根据个人时间空余情况，会不定时对该模板进行更新和迭代。希望将该工具的功能不断补全（虽然现在已经是足够日常开发和使用），将该模板打造为一个更加健全的中后台模板。如果你有好的想法和建议，可以直接联系我或者直接提 `issues` 即可。
-
-## 提示
-
-> 项目默认启用严格模式 `eslint`，但是由于 `vite-plugin-eslint` 插件优先级最高，所以如果出现自动导入类型错误提示，请优先解决其他问题。
-> 建议开启 `vscode` 保存自动修复功能。
-
-## 项目安装
+### 获取项目
 
 ```sh
 # github
@@ -81,12 +60,12 @@ git clone https://github.com/XiaoDaiGua-Ray/ray-template.git
 git clone https://gh.yka.moe/https://github.com/XiaoDaiGua-Ray/ray-template.git
 ```
 
-## 拉取依赖
+### 拉取依赖
 
 ```sh
-# yarn
+# pnpm
 
-yarn
+pnpm
 ```
 
 ```sh
@@ -95,12 +74,12 @@ yarn
 npm install
 ```
 
-## 启动项目
+### 启动项目
 
 ```sh
-# yarn
+# pnpm
 
-yarn dev
+pnpm dev
 ```
 
 ```sh
@@ -109,12 +88,12 @@ yarn dev
 npm run dev
 ```
 
-## 项目打包
+### 项目打包
 
 ```sh
-# yarn
+# pnpm
 
-yarn build
+pnpm build
 ```
 
 ```sh
@@ -123,12 +102,12 @@ yarn build
 npm run build
 ```
 
-## 预览项目
+### 预览项目
 
 ```sh
-# yarn
+# pnpm
 
-yarn preview
+pnpm preview
 ```
 
 ```sh
@@ -137,12 +116,12 @@ yarn preview
 npm run preview
 ```
 
-## 体积分析
+### 体积分析
 
 ```sh
-# yarn
+# pnpm
 
-yarn report
+pnpm report
 ```
 
 ```sh
@@ -151,48 +130,24 @@ yarn report
 npm run report
 ```
 
-## 浏览器支持
+## 🪴 项目活动
 
-> 仅支持现代浏览器，不支持 `IE`
+![Alt](https://repobeats.axiom.co/api/embed/fab6071297ab281913a42f07a2779b488cfd62b8.svg 'Repobeats analytics image')
+
+### 贡献者
+
+感谢他们的所做的一切贡献 🐝 ！
+
+<a href="https://github.com/XiaoDaiGua-Ray/ray-template/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=XiaoDaiGua-Ray/ray-template" />
+</a>
+
+## 浏览器支持
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
 | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
 |                                                                                             not support                                                                                              |                                                                                            last 2 versions                                                                                             |                                                                                                  last 2 versions                                                                                                  |                                                                                                last 2 versions                                                                                                |                                                                                                last 2 versions                                                                                                |
 
-## 最后，希望大家搬砖愉快
+## 📄 证书
 
-## 贡献者
-
-<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-<table>
-  <tbody>
-    <tr>
-      <td align="center" valign="top" width="14.28%"><a href="https://heartofyun.com"><img src="https://avatars.githubusercontent.com/u/40163747?v=4?s=100" width="100px;" alt="Cloud"/><br /><sub><b>Cloud</b></sub></a><br /><a href="#tool-yunkuangao" title="Tools">🔧</a></td>
-    </tr>
-  </tbody>
-</table>
-
-<!-- markdownlint-restore -->
-<!-- prettier-ignore-end -->
-
-<!-- ALL-CONTRIBUTORS-LIST:END -->
-
-## Contributors ✨
-
-Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
-
-<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-<!-- markdownlint-restore -->
-<!-- prettier-ignore-end -->
-
-<!-- ALL-CONTRIBUTORS-LIST:END -->
-
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
-
-## License
-
-[MIT © Ray-2020](./LICENSE)
+[MIT License](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/LICENSE) © 2022-PRESENT [Ray](https://github.com/XiaoDaiGua-Ray/ray-template)
diff --git a/package.json b/package.json
index 226ba8b9..68a8f3c1 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^9.1.0",
+    "awesome-qr": "2.1.5-rc.0",
     "axios": "^1.2.0",
     "clipboard": "^2.0.11",
     "crypto-js": "^4.1.1",
@@ -37,7 +38,6 @@
     "pinia": "^2.1.4",
     "pinia-plugin-persistedstate": "^3.1.0",
     "print-js": "^1.6.0",
-    "qrcode.vue": "^3.3.4",
     "sass": "^1.54.3",
     "screenfull": "^6.0.2",
     "vue": "^3.3.4",
diff --git a/postcss.config.cjs b/postcss.config.cjs
index b5f63577..be83e78f 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -22,6 +22,8 @@ module.exports = {
       unitPrecision: 3,
       /** 指定需要转换成的视窗单位 */
       viewportUnit: 'rem',
+      /** 制定字体转换单位 */
+      fontViewportUnit: 'rem',
       /** 指定不转换为视窗单位的类 */
       selectorBlackList: ['.ignore'],
       /** 小于或等于 1px 不转换为视窗单位 */
diff --git a/src/components/RayQRCode/index.ts b/src/components/RayQRCode/index.ts
new file mode 100644
index 00000000..6002f700
--- /dev/null
+++ b/src/components/RayQRCode/index.ts
@@ -0,0 +1,9 @@
+import RayQRcode from './src/index'
+
+export default RayQRcode
+export type {
+  QRCodeStatus,
+  QRCodeLevel,
+  QRCodeRenderResponse,
+  QRCodeInst,
+} from './src/type'
diff --git a/src/components/RayQRCode/src/index.scss b/src/components/RayQRCode/src/index.scss
new file mode 100644
index 00000000..e447cce8
--- /dev/null
+++ b/src/components/RayQRCode/src/index.scss
@@ -0,0 +1,26 @@
+.ray-qrcode {
+  position: relative;
+  display: inline-flex;
+
+  & .ray-qrcode__error {
+    position: absolute;
+    width: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 10;
+    background-color: rgba(0, 0, 0, 0.7);
+    width: 100%;
+    height: 100%;
+    @include flexCenter;
+    flex-direction: column;
+    gap: 18px 0;
+
+    & .ray-qrcode__error-content {
+      text-align: center;
+      font-size: 18px;
+      font-weight: 500;
+      color: #ffffff;
+    }
+  }
+}
diff --git a/src/components/RayQRCode/src/index.tsx b/src/components/RayQRCode/src/index.tsx
new file mode 100644
index 00000000..e90f62f7
--- /dev/null
+++ b/src/components/RayQRCode/src/index.tsx
@@ -0,0 +1,140 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-08-29
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import './index.scss'
+
+import { NButton, NSpin } from 'naive-ui'
+import RayIcon from '@/components/RayIcon/index'
+
+import props from './props'
+import { AwesomeQR } from 'awesome-qr'
+import { isValueType, downloadBase64File } from '@use-utils/hook'
+import { call } from '@/utils/vue/index'
+
+import type { QRCodeRenderResponse } from './type'
+
+const RayQRcode = defineComponent({
+  name: 'RayQRcode',
+  props,
+  setup(props, ctx) {
+    const { expose } = ctx
+
+    const qrcodeURL = ref<QRCodeRenderResponse>()
+    const spinOverrides = {
+      opacitySpinning: '0.1',
+    }
+
+    const renderQRCode = () => {
+      new AwesomeQR({
+        ...props,
+      })
+        .draw()
+        .then((res) => {
+          const { onSuccess } = props
+
+          if (onSuccess) {
+            call(onSuccess, res)
+          }
+
+          qrcodeURL.value = res
+        })
+        .catch((err) => {
+          const { onError } = props
+
+          if (onError) {
+            call(onError, err)
+          }
+        })
+    }
+
+    const errorActionClick = () => {
+      if (ctx.slots.errorAction) {
+        return
+      }
+
+      const { onReload } = props
+
+      if (onReload) {
+        call(onReload)
+      }
+    }
+
+    const downloadQRCode = (fileName?: string) => {
+      if (qrcodeURL.value && isValueType<string>(qrcodeURL.value, 'String')) {
+        downloadBase64File(qrcodeURL.value, fileName)
+      }
+    }
+
+    watchEffect(() => {
+      if (props.watchText) {
+        nextTick().then(() => {
+          renderQRCode()
+        })
+      }
+    })
+
+    expose({
+      downloadQRCode,
+    })
+
+    onMounted(() => {
+      renderQRCode()
+    })
+
+    return {
+      qrcodeURL,
+      spinOverrides,
+      errorActionClick,
+    }
+  },
+  render() {
+    return (
+      <div class="ray-qrcode">
+        <NSpin
+          show={this.status === 'loading'}
+          themeOverrides={this.spinOverrides}
+        >
+          <img src={this.qrcodeURL as string | undefined} />
+        </NSpin>
+        {this.status === 'error' ? (
+          <div class="ray-qrcode__error">
+            <div class="ray-qrcode__error-content">
+              {isValueType<string>(this.errorDescription, 'String')
+                ? this.errorDescription
+                : () => this.errorDescription}
+            </div>
+            <div
+              class="ray-qrcode__error-btn"
+              onClick={this.errorActionClick.bind(this)}
+            >
+              {this.$slots.errorAction ? (
+                this.$slots.errorAction()
+              ) : (
+                <>
+                  <NButton text color="#ffffff">
+                    {{
+                      default: () => this.errorActionDescription,
+                      icon: () => (
+                        <RayIcon name="reload" size="16" color="#ffffff" />
+                      ),
+                    }}
+                  </NButton>
+                </>
+              )}
+            </div>
+          </div>
+        ) : null}
+      </div>
+    )
+  },
+})
+
+export default RayQRcode
diff --git a/src/components/RayQRCode/src/props.ts b/src/components/RayQRCode/src/props.ts
new file mode 100644
index 00000000..434b3d57
--- /dev/null
+++ b/src/components/RayQRCode/src/props.ts
@@ -0,0 +1,281 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-08-29
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import type { QRCodeStatus, QRCodeLevel } from './type'
+import type { PropType, VNode } from 'vue'
+import type { MaybeArray } from '@/types/modules/utils'
+import type { Options } from 'awesome-qr'
+
+const props = {
+  watchText: {
+    /**
+     *
+     * Atuo watch QR code text
+     * If update text, then re-render QR code
+     *
+     * @default true
+     */
+    type: Boolean,
+    default: true,
+  },
+  status: {
+    /**
+     *
+     * QR code status
+     *
+     * @default undefined
+     */
+    type: String as PropType<QRCodeStatus>,
+  },
+  errorDescription: {
+    /**
+     *
+     * QR code error description label
+     *
+     * @default 二维码已过期
+     */
+    type: [String, Object] as PropType<string | VNode>,
+    default: '二维码已过期',
+  },
+  errorActionDescription: {
+    /**
+     *
+     * QR code error action description label
+     *
+     * @default 重新加载
+     */
+    type: String,
+    default: '重新加载',
+  },
+  text: {
+    /**
+     *
+     * Text to be encoded in the QR code
+     */
+    type: String,
+    required: true,
+  },
+  size: {
+    /**
+     *
+     * Size of the QR code in pixel.
+     *
+     * @default 160
+     */
+    type: Number,
+    default: 160,
+  },
+  margin: {
+    /**
+     *
+     * Size of margins around the QR code body in pixel.
+     *
+     * @default 12
+     */
+    type: Number,
+    default: 12,
+  },
+  correctLevel: {
+    /**
+     *
+     * Error correction level of the QR code
+     * Accepts a value provided by _QRErrorCorrectLevel_
+     *
+     * @default 1
+     */
+    type: Number as PropType<QRCodeLevel>,
+    default: 1,
+    validator: (value: unknown) => [0, 1, 2, 3].includes(value as number),
+  },
+  maskPattern: {
+    /**
+     *
+     * Specify the mask pattern to be used in QR code encoding
+     * Accepts a value provided by _QRMaskPattern_
+     */
+    type: Number,
+  },
+  version: {
+    /**
+     *
+     * Specify the version to be used in QR code encoding
+     * Accepts an integer in range [1, 40]
+     */
+    type: Number,
+  },
+  components: {
+    /**
+     *
+     * Options to control components in the QR code.
+     *
+     * @default {data:{scale...},...}
+     */
+    type: Object as PropType<Options['components']>,
+    default: () => ({
+      data: {
+        scale: 1,
+      },
+      timing: {
+        scale: 1,
+        protectors: false,
+      },
+      alignment: {
+        scale: 1,
+        protectors: false,
+      },
+      cornerAlignment: {
+        scale: 1,
+        protectors: true,
+      },
+    }),
+  },
+  colorDark: {
+    /**
+     *
+     * Color of the blocks on the QR code
+     * Accepts a CSS &lt;color&gt;
+     *
+     * @default #000000
+     */
+    type: String,
+    default: '#000000',
+  },
+  colorLight: {
+    /**
+     *
+     * Color of the blocks on the QR code
+     * Accepts a CSS &lt;color&gt;
+     *
+     * @default #ffffff
+     */
+    type: String,
+    default: '#ffffff',
+  },
+  autoColor: {
+    /**
+     *
+     * Automatically calculate the _colorLight_ value from the QR code's background
+     *
+     * @default true
+     */
+    type: Boolean,
+    default: true,
+  },
+  backgroundImage: {
+    /**
+     *
+     * Background image to be used in the QR code
+     * Accepts a `data:` string in web browsers or a Buffer in Node.js
+     *
+     * @default undefined
+     */
+    type: String,
+  },
+  backgroundDimming: {
+    /**
+     *
+     * Color of the dimming mask above the background image
+     * Accepts a CSS &lt;color&gt;
+     *
+     * @default rgba(0, 0, 0, 0)
+     */
+    type: String,
+    default: 'rgba(0, 0, 0, 0)',
+  },
+  gifBackground: {
+    /**
+     *
+     * GIF background image to be used in the QR code
+     *
+     * @default undefined
+     */
+    type: ArrayBuffer,
+  },
+  whiteMargin: {
+    /**
+     *
+     * Use a white margin instead of a transparent one which reveals the background of the QR code on margins
+     *
+     * @default true
+     */
+    type: Boolean,
+    default: true,
+  },
+  logoImage: {
+    /**
+     *
+     * Logo image to be displayed at the center of the QR code
+     * Accepts a `data:` string in web browsers or a Buffer in Node.js
+     * When set to `undefined` or `null`, the logo is disabled
+     *
+     * @default undefined
+     */
+    type: String,
+  },
+  logoScale: {
+    /**
+     *
+     * Ratio of the logo size to the QR code size
+     *
+     * @default 0.4
+     */
+    type: Number,
+    default: 0.4,
+  },
+  logoMargin: {
+    /**
+     *
+     * Size of margins around the logo image in pixels
+     *
+     * @default 6
+     */
+    type: Number,
+    default: 6,
+  },
+  logoCornerRadius: {
+    /**
+     * Corner radius of the logo image in pixels.
+     *
+     * @default 8
+     */
+    type: Number,
+    default: 8,
+  },
+  onSuccess: {
+    /**
+     *
+     * When the QR code is successfully generated, this callback is called
+     */
+    type: [Function, Array] as PropType<
+      MaybeArray<(dataURL: ArrayBuffer | string | undefined) => void>
+    >,
+    default: null,
+  },
+  onError: {
+    /**
+     *
+     * When the QR code generation fails, this callback is called
+     */
+    type: [Function, Array] as PropType<MaybeArray<(e: unknown) => void>>,
+    default: null,
+  },
+  onReload: {
+    /**
+     *
+     * When reload button is clicked, this callback is called
+     * This method will not execute if the errorAction slot is used
+     */
+    type: [Function, Array] as PropType<MaybeArray<() => void>>,
+    default: null,
+  },
+}
+
+export default props
diff --git a/src/components/RayQRCode/src/type.ts b/src/components/RayQRCode/src/type.ts
new file mode 100644
index 00000000..994a0869
--- /dev/null
+++ b/src/components/RayQRCode/src/type.ts
@@ -0,0 +1,26 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-08-29
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+export type QRCodeStatus = 'error' | 'success' | 'loading'
+
+export type QRCodeLevel = 0 | 1 | 2 | 3
+
+export type QRCodeRenderResponse = string | ArrayBuffer | Buffer | undefined
+
+export type QRCodeInst = {
+  /**
+   *
+   * @param fileName file name
+   *
+   * 如果未设置名称，则默认以 时间戳.png 命名
+   */
+  downloadQRCode: (fileName?: string) => void
+}
diff --git a/src/router/modules/demo/qrcode.ts b/src/router/modules/demo/qrcode.ts
new file mode 100644
index 00000000..27add67f
--- /dev/null
+++ b/src/router/modules/demo/qrcode.ts
@@ -0,0 +1,17 @@
+import { t } from '@/locales/useI18n'
+import { LAYOUT } from '@/router/constant/index'
+
+import type { AppRouteRecordRaw } from '@/router/type'
+
+const qrcode: AppRouteRecordRaw = {
+  path: '/qrcode',
+  name: 'RQRCode',
+  component: () => import('@/views/demo/qrcode/index'),
+  meta: {
+    noLocalTitle: '二维码',
+    icon: 'other',
+    order: 3,
+  },
+}
+
+export default qrcode
diff --git a/src/utils/hook.ts b/src/utils/hook.ts
index 1cecf4ef..00d3b11a 100644
--- a/src/utils/hook.ts
+++ b/src/utils/hook.ts
@@ -33,6 +33,22 @@ export const arrayBufferToBase64Image = (data: ArrayBuffer): string | null => {
   return base64
 }
 
+/**
+ *
+ * @param base64 base64
+ * @param fileName file name
+ *
+ * @remark 下载 base64 文件
+ */
+export const downloadBase64File = (base64: string, fileName?: string) => {
+  const link = document.createElement('a')
+
+  link.href = base64
+  link.download = fileName || new Date().getTime() + '.png'
+
+  link.click()
+}
+
 /**
  *
  * @param value 目标值
diff --git a/src/views/demo/qrcode/index.tsx b/src/views/demo/qrcode/index.tsx
new file mode 100644
index 00000000..ce049390
--- /dev/null
+++ b/src/views/demo/qrcode/index.tsx
@@ -0,0 +1,104 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-08-30
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { NSpace, NCard, NButton } from 'naive-ui'
+import RayQRcode from '@/components/RayQRCode/index'
+
+import LOGO from '@/assets/images/ray.svg'
+
+import type { QRCodeStatus, QRCodeInst } from '@/components/RayQRCode/index'
+
+const RQRCode = defineComponent({
+  name: 'RQRCode',
+  setup() {
+    const qrcodeText = ref('ray template yes')
+    const qrcodeStatus = ref<QRCodeStatus | undefined>()
+    const rayQRCodeRef = ref<QRCodeInst>()
+
+    return {
+      qrcodeText,
+      qrcodeStatus,
+      rayQRCodeRef,
+    }
+  },
+  render() {
+    return (
+      <NSpace wrapItem={false}>
+        <NCard>
+          <h2>
+            基于 awesome-qr 进行封装，支持 LOGO、gif、backgroundImage 等属性。
+          </h2>
+          <h2>该组件会自动监听文本内容变化，然后重新渲染（watchText）</h2>
+          <h2>具体使用请参考 props 配置项</h2>
+        </NCard>
+        <NCard title="基础二维码">
+          <NSpace>
+            <RayQRcode text="ray template yes" />
+            <RayQRcode text="ray template yes" logoImage={LOGO} />
+          </NSpace>
+        </NCard>
+        <NCard title="状态二维码">
+          <NSpace>
+            <RayQRcode
+              text="ray template yes"
+              logoImage={LOGO}
+              status="error"
+              onReload={() => {
+                window.$message.error('relod props')
+              }}
+            />
+            <RayQRcode
+              text="ray template yes"
+              logoImage={LOGO}
+              status="loading"
+            />
+          </NSpace>
+        </NCard>
+        <NCard title="监听内容变化">
+          <NSpace vertical>
+            <NSpace>
+              <NButton
+                onClick={() => {
+                  this.qrcodeStatus = 'loading'
+
+                  setTimeout(() => {
+                    this.qrcodeText = 'text updated: ' + new Date().getTime()
+                    this.qrcodeStatus = void 0
+                  }, 1000)
+                }}
+              >
+                更新二维码内容
+              </NButton>
+              <NButton
+                onClick={() => {
+                  this.rayQRCodeRef?.downloadQRCode()
+                }}
+              >
+                下载二维码
+              </NButton>
+            </NSpace>
+            <NSpace>
+              <RayQRcode
+                text={this.qrcodeText}
+                status={this.qrcodeStatus}
+                logoImage={LOGO}
+                ref="rayQRCodeRef"
+              />
+              当前二维码内容：{this.qrcodeText}
+            </NSpace>
+          </NSpace>
+        </NCard>
+      </NSpace>
+    )
+  },
+})
+
+export default RQRCode
diff --git a/src/views/login/components/QRCodeSignin/index.tsx b/src/views/login/components/QRCodeSignin/index.tsx
index fa5025ab..d4b042c4 100644
--- a/src/views/login/components/QRCodeSignin/index.tsx
+++ b/src/views/login/components/QRCodeSignin/index.tsx
@@ -11,7 +11,9 @@
 
 import './index.scss'
 
-import QRCode from 'qrcode.vue'
+import RayQRcode from '@/components/RayQRCode/index'
+
+import LOGO from '@/assets/images/ray.svg'
 
 /**
  *
@@ -34,7 +36,7 @@ const QRCodeSignin = defineComponent({
   render() {
     return (
       <div class="qrcode-signin">
-        <QRCode value={this.qrcodeValue} size={200} />
+        <RayQRcode text="ray template yes" size={200} logoImage={LOGO} />
       </div>
     )
   },
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index bb2e02f1..0f7192c3 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -2,6 +2,7 @@
 /// <reference types="vite/client" />
 /// <reference types="vue/macros-global" />
 /// <reference types="vite-svg-loader" />
+/// <reference types="./types/app.d.ts" />
 
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'
diff --git a/unplugin/.eslintrc-auto-import.json b/unplugin/.eslintrc-auto-import.json
index f2bd02bd..6aeb49b9 100644
--- a/unplugin/.eslintrc-auto-import.json
+++ b/unplugin/.eslintrc-auto-import.json
@@ -8,6 +8,7 @@
     "PropType": true,
     "Ref": true,
     "VNode": true,
+    "WritableComputedRef": true,
     "acceptHMRUpdate": true,
     "asyncComputed": true,
     "autoResetRef": true,
@@ -121,10 +122,12 @@
     "useArrayFilter": true,
     "useArrayFind": true,
     "useArrayFindIndex": true,
+    "useArrayFindLast": true,
     "useArrayJoin": true,
     "useArrayMap": true,
     "useArrayReduce": true,
     "useArraySome": true,
+    "useArrayUnique": true,
     "useAsyncQueue": true,
     "useAsyncState": true,
     "useAttrs": true,
@@ -136,6 +139,7 @@
     "useBrowserLocation": true,
     "useCached": true,
     "useClipboard": true,
+    "useCloned": true,
     "useColorMode": true,
     "useConfirmDialog": true,
     "useCounter": true,
@@ -212,11 +216,14 @@
     "useParallax": true,
     "usePermission": true,
     "usePointer": true,
+    "usePointerLock": true,
     "usePointerSwipe": true,
     "usePreferredColorScheme": true,
+    "usePreferredContrast": true,
     "usePreferredDark": true,
     "usePreferredLanguages": true,
     "usePreferredReducedMotion": true,
+    "usePrevious": true,
     "useRafFn": true,
     "useRefHistory": true,
     "useResizeObserver": true,
@@ -230,6 +237,7 @@
     "useSessionStorage": true,
     "useShare": true,
     "useSlots": true,
+    "useSorted": true,
     "useSpeechRecognition": true,
     "useSpeechSynthesis": true,
     "useStepper": true,
diff --git a/unplugin/auto-imports.d.ts b/unplugin/auto-imports.d.ts
index faf7b218..5fecb52b 100644
--- a/unplugin/auto-imports.d.ts
+++ b/unplugin/auto-imports.d.ts
@@ -118,10 +118,12 @@ declare global {
   const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
   const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
   const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
+  const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
   const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
   const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
   const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
   const useArraySome: typeof import('@vueuse/core')['useArraySome']
+  const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
   const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
   const useAttrs: typeof import('vue')['useAttrs']
@@ -133,6 +135,7 @@ declare global {
   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
   const useCached: typeof import('@vueuse/core')['useCached']
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
   const useCounter: typeof import('@vueuse/core')['useCounter']
@@ -209,11 +212,14 @@ declare global {
   const useParallax: typeof import('@vueuse/core')['useParallax']
   const usePermission: typeof import('@vueuse/core')['usePermission']
   const usePointer: typeof import('@vueuse/core')['usePointer']
+  const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
   const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
   const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
+  const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
   const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
   const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
   const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
+  const usePrevious: typeof import('@vueuse/core')['usePrevious']
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
@@ -227,6 +233,7 @@ declare global {
   const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
   const useShare: typeof import('@vueuse/core')['useShare']
   const useSlots: typeof import('vue')['useSlots']
+  const useSorted: typeof import('@vueuse/core')['useSorted']
   const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
   const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
   const useStepper: typeof import('@vueuse/core')['useStepper']
@@ -284,5 +291,5 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
 }
diff --git a/vite.config.ts b/vite.config.ts
index 543a39fa..ccdbd04e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -105,7 +105,7 @@ export default defineConfig(async ({ mode }) => {
       viteCompression(),
       viteVueI18nPlugin(),
       viteSvgLoader({
-        defaultImport: 'component', // 默认以 `componetn` 形式导入 `svg`
+        defaultImport: 'url', // 默认以 `componetn` 形式导入 `svg`
       }),
       viteSVGIcon(),
       viteEslint({

From ccc4d6c710903984b2d8d03ee19994b60ba4bc3b Mon Sep 17 00:00:00 2001
From: XiaoDaiGua-Ray <443547225@qq.com>
Date: Thu, 31 Aug 2023 15:30:17 +0800
Subject: [PATCH 09/19] 4.1.9

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 68a8f3c1..121cddaf 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "4.1.8",
+  "version": "4.1.9",
   "type": "module",
   "engines": {
     "node": ">=16.0.0",

From 689813f1a066810249838e5a1865aed1f09dd40a Mon Sep 17 00:00:00 2001
From: XiaoDaiGua-Ray <443547225@qq.com>
Date: Mon, 4 Sep 2023 15:01:17 +0800
Subject: [PATCH 10/19] =?UTF-8?q?feat:=20v4.1.9=E8=A1=A5=E5=85=85qrcode?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  4 +-
 COMMONPROBLEM.md                              | 21 --------
 package.json                                  |  2 +-
 src/components/RayQRCode/src/index.tsx        | 52 ++++++++++++++++++-
 src/components/RayQRCode/src/props.ts         | 20 +++++++
 src/layout/components/MenuTag/index.tsx       |  2 +-
 src/office/index.ts                           | 27 ----------
 src/router/modules/demo/office.ts             | 43 ---------------
 src/views/demo/office/index.tsx               | 21 --------
 .../demo/office/views/document/index.tsx      | 47 -----------------
 .../demo/office/views/presentation/index.tsx  | 24 ---------
 .../demo/office/views/spreadsheet/index.tsx   | 24 ---------
 src/views/demo/qrcode/index.tsx               |  6 +++
 vite.config.ts                                |  1 +
 14 files changed, 82 insertions(+), 212 deletions(-)
 delete mode 100644 COMMONPROBLEM.md
 delete mode 100644 src/office/index.ts
 delete mode 100644 src/router/modules/demo/office.ts
 delete mode 100644 src/views/demo/office/index.tsx
 delete mode 100644 src/views/demo/office/views/document/index.tsx
 delete mode 100644 src/views/demo/office/views/presentation/index.tsx
 delete mode 100644 src/views/demo/office/views/spreadsheet/index.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d25d2273..e60912c4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,9 +5,11 @@
 ### Feats
 
 - 新增 RayQRCode 组件（二维码）
-  - 基于 awesome-qr 封装，继承其所有特性。并且拓展了 状态、下载、自动更新等属性
+  - 基于 awesome-qr 封装，继承其所有特性。并且拓展 状态、下载、自动更新等属性
   - 自动卸载于释放内存，仅需要关注 text 内容填充
 - 移除 qrcode.vue 依赖
+- 更新 vue-hooks-plus 版本至 v1.8.2
+- 移除 office 功能集成
 
 ### Fixes
 
diff --git a/COMMONPROBLEM.md b/COMMONPROBLEM.md
deleted file mode 100644
index fa14ec84..00000000
--- a/COMMONPROBLEM.md
+++ /dev/null
@@ -1,21 +0,0 @@
-## 常见问题
-
-### 路由
-
-#### 缓存失效
-
-> 如果出现缓存配置不生效的情况可以按照如下方法进行排查
-
-- 查看 APP_KEEP_ALIVE setupKeepAlive 属性是否配置为 true
-- 查看每个组件的 `name` 是否唯一，[`KeepAlive`](https://cn.vuejs.org/guide/built-ins/keep-alive.html) 组件重度依赖组件 `name` 作为唯一标识。详情可以查看官方文档
-- 查看该页面的路由配置是否正确，比如：`path` 是否按照模板约定方式进行配置
-
-#### 自动导入失败
-
-> 模板采用自动导入路由模块方式。如果发现路由导入有误、或者导入报错，请查看文件命名是否有误。
-
-### 国际化
-
-#### 国际化切换错误、警告
-
-> 模板二次封装 [`useI18n`](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/src/locales/useI18n.ts) 方法，首选该方法作为国际化语言切换方法。
diff --git a/package.json b/package.json
index 121cddaf..20f7cd91 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.8.1",
+    "vue-hooks-plus": "1.8.2",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.2.4",
     "vuedraggable": "^4.1.0",
diff --git a/src/components/RayQRCode/src/index.tsx b/src/components/RayQRCode/src/index.tsx
index e90f62f7..a7a33832 100644
--- a/src/components/RayQRCode/src/index.tsx
+++ b/src/components/RayQRCode/src/index.tsx
@@ -21,6 +21,35 @@ import { call } from '@/utils/vue/index'
 
 import type { QRCodeRenderResponse } from './type'
 
+const readGIFAsArrayBuffer = (
+  url: string,
+): Promise<string | ArrayBuffer | null> => {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest()
+
+    xhr.responseType = 'blob'
+
+    xhr.onload = () => {
+      const reader = new FileReader()
+
+      reader.onloadend = () => {
+        resolve(reader.result)
+      }
+      reader.onerror = (e) => {
+        reject(e)
+      }
+      reader.onabort = (e) => {
+        reject(e)
+      }
+
+      reader.readAsArrayBuffer(xhr.response)
+    }
+
+    xhr.open('GET', url)
+    xhr.send()
+  })
+}
+
 const RayQRcode = defineComponent({
   name: 'RayQRcode',
   props,
@@ -31,10 +60,28 @@ const RayQRcode = defineComponent({
     const spinOverrides = {
       opacitySpinning: '0.1',
     }
+    let gifBuffer: string | ArrayBuffer | null
+
+    const getGIFImageByURL = async () => {
+      const { gifBackgroundURL } = props
+
+      if (!gifBackgroundURL) {
+        return
+      }
+
+      try {
+        gifBuffer = await readGIFAsArrayBuffer(gifBackgroundURL)
+      } catch (e) {
+        console.error(e)
+      }
+    }
 
     const renderQRCode = () => {
+      const { gifBackgroundURL, gifBackground, ...ops } = props
+
       new AwesomeQR({
-        ...props,
+        ...ops,
+        gifBackground: (gifBuffer as ArrayBuffer) ?? undefined,
       })
         .draw()
         .then((res) => {
@@ -85,7 +132,8 @@ const RayQRcode = defineComponent({
       downloadQRCode,
     })
 
-    onMounted(() => {
+    onMounted(async () => {
+      await getGIFImageByURL()
       renderQRCode()
     })
 
diff --git a/src/components/RayQRCode/src/props.ts b/src/components/RayQRCode/src/props.ts
index 434b3d57..84fc7741 100644
--- a/src/components/RayQRCode/src/props.ts
+++ b/src/components/RayQRCode/src/props.ts
@@ -190,6 +190,15 @@ const props = {
     type: String,
     default: 'rgba(0, 0, 0, 0)',
   },
+  gifBackgroundURL: {
+    /**
+     *
+     * GIF background image to be used in the QR code
+     *
+     * @default undefined
+     */
+    type: String,
+  },
   gifBackground: {
     /**
      *
@@ -249,6 +258,17 @@ const props = {
     type: Number,
     default: 8,
   },
+  dotScale: {
+    /**
+     *
+     * Ratio of the real size to the full size of the blocks.
+     * This can be helpful when you want to make more parts of the background visible.
+     *
+     * @default 1
+     */
+    type: Number,
+    default: 1,
+  },
   onSuccess: {
     /**
      *
diff --git a/src/layout/components/MenuTag/index.tsx b/src/layout/components/MenuTag/index.tsx
index a62d9526..b052d724 100644
--- a/src/layout/components/MenuTag/index.tsx
+++ b/src/layout/components/MenuTag/index.tsx
@@ -388,7 +388,7 @@ const MenuTag = defineComponent({
         if (tags?.length) {
           const [menuTag] = tags
 
-          nextTick(() => {
+          nextTick().then(() => {
             menuTag.scrollIntoView?.()
           })
         }
diff --git a/src/office/index.ts b/src/office/index.ts
deleted file mode 100644
index 2ddf5541..00000000
--- a/src/office/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-03-22
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-/**
- *
- * onlyoffice
- *
- * 该功能暂未实现, 后续应该会补上
- * 由于该方法需要后端进行相关配合, 因为目前还在考虑是否接上私有 onlyoffice 服务器, 所以该功能暂未实现
- * 望多多理解, 理解万岁
- */
-
-import { getAppEnvironment } from '@use-utils/hook'
-import request from '@/axios/instance'
-
-export const getOfficeDocumentApi = async (uuid: string) => {
-  const { VITE_APP_OFFICE_PROXY_URL } = getAppEnvironment()
-  const { get } = request
-}
diff --git a/src/router/modules/demo/office.ts b/src/router/modules/demo/office.ts
deleted file mode 100644
index cec96641..00000000
--- a/src/router/modules/demo/office.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { t } from '@/locales/useI18n'
-import { LAYOUT } from '@/router/constant/index'
-
-import type { AppRouteRecordRaw } from '@/router/type'
-
-const office: AppRouteRecordRaw = {
-  path: '/office',
-  name: 'ROffice',
-  component: () => import('@/views/demo/office/index'),
-  meta: {
-    i18nKey: t('menu.Office'),
-    icon: 'office',
-    hidden: true,
-  },
-  children: [
-    {
-      path: 'document',
-      name: 'Document',
-      component: () => import('@/views/demo/office/views/document/index'),
-      meta: {
-        i18nKey: 'Office_Document',
-      },
-    },
-    {
-      path: 'presentation',
-      name: 'Presentation',
-      component: () => import('@/views/demo/office/views/presentation/index'),
-      meta: {
-        i18nKey: 'Office_Presentation',
-      },
-    },
-    {
-      path: 'spreadsheet',
-      name: 'Spreadsheet',
-      component: () => import('@/views/demo/office/views/spreadsheet/index'),
-      meta: {
-        i18nKey: 'Office_Spreadsheet',
-      },
-    },
-  ],
-}
-
-export default office
diff --git a/src/views/demo/office/index.tsx b/src/views/demo/office/index.tsx
deleted file mode 100644
index c7df6024..00000000
--- a/src/views/demo/office/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-03-22
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-import { RouterView } from 'vue-router'
-
-const Office = defineComponent({
-  name: 'ROffice',
-  render() {
-    return <RouterView />
-  },
-})
-
-export default Office
diff --git a/src/views/demo/office/views/document/index.tsx b/src/views/demo/office/views/document/index.tsx
deleted file mode 100644
index f2907266..00000000
--- a/src/views/demo/office/views/document/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-03-22
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-import { uuid } from '@/utils/hook'
-
-import type { PropType } from 'vue'
-
-const Document = defineComponent({
-  name: 'RDocument',
-  setup() {
-    const editorUUID = uuid(16)
-    const state = reactive({})
-    const config = {
-      document: {
-        fileType: 'docx',
-        key: editorUUID,
-        title: 'Example Document Title.docx',
-        url: 'https://example.com/url-to-example-document.docx',
-      },
-      documentType: 'word',
-      authorization: 'a2122252',
-      token: 'a2122252',
-      Authorization: 'a2122252',
-      editorConfig: {
-        lang: 'zh-cn',
-      },
-    }
-
-    return {
-      ...toRefs(state),
-      editorUUID,
-    }
-  },
-  render() {
-    return <div> </div>
-  },
-})
-
-export default Document
diff --git a/src/views/demo/office/views/presentation/index.tsx b/src/views/demo/office/views/presentation/index.tsx
deleted file mode 100644
index 797a39dd..00000000
--- a/src/views/demo/office/views/presentation/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-03-22
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-import type { PropType } from 'vue'
-
-const Presentation = defineComponent({
-  name: 'RPresentation',
-  setup() {
-    return {}
-  },
-  render() {
-    return <div></div>
-  },
-})
-
-export default Presentation
diff --git a/src/views/demo/office/views/spreadsheet/index.tsx b/src/views/demo/office/views/spreadsheet/index.tsx
deleted file mode 100644
index 14bf9951..00000000
--- a/src/views/demo/office/views/spreadsheet/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-03-22
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-import type { PropType } from 'vue'
-
-const Spreadsheet = defineComponent({
-  name: 'RSpreadsheet',
-  setup() {
-    return {}
-  },
-  render() {
-    return <div></div>
-  },
-})
-
-export default Spreadsheet
diff --git a/src/views/demo/qrcode/index.tsx b/src/views/demo/qrcode/index.tsx
index ce049390..b91d296f 100644
--- a/src/views/demo/qrcode/index.tsx
+++ b/src/views/demo/qrcode/index.tsx
@@ -43,6 +43,12 @@ const RQRCode = defineComponent({
           <NSpace>
             <RayQRcode text="ray template yes" />
             <RayQRcode text="ray template yes" logoImage={LOGO} />
+            <RayQRcode
+              text="ray template yes"
+              gifBackgroundURL="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80"
+              dotScale={0.5}
+              colorDark="#64d9d6"
+            />
           </NSpace>
         </NCard>
         <NCard title="状态二维码">
diff --git a/vite.config.ts b/vite.config.ts
index ccdbd04e..02c8cad3 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -115,6 +115,7 @@ export default defineConfig(async ({ mode }) => {
         fix: true,
         exclude: ['dist/**', '**/node_modules/**', 'vite-env.d.ts', '*.md'],
         include: ['src/**/*.{vue,js,jsx,ts,tsx}'],
+        cache: true,
       }),
       vitePluginImp({
         libList: [

From 6acc80f18a943864f44f7684a79b387e0d674766 Mon Sep 17 00:00:00 2001
From: XiaoDaiGua-Ray <443547225@qq.com>
Date: Fri, 8 Sep 2023 15:13:36 +0800
Subject: [PATCH 11/19] =?UTF-8?q?v4.1.9=E9=83=A8=E5=88=86=E7=BB=86?=
 =?UTF-8?q?=E8=8A=82=E8=A1=A5=E5=85=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  2 +
 README.md                                     | 50 +++----------------
 cfg.ts                                        |  4 +-
 src/app-components/app/AppAvatar/index.tsx    |  2 +-
 .../provider/AppNaiveGlobalProvider/index.tsx |  9 ++--
 .../index.tsx                                 | 10 ++--
 .../provider/AppStyleProvider/index.tsx       |  4 +-
 src/{appConfig => app-config}/appConfig.ts    |  0
 src/{appConfig => app-config}/designConfig.ts |  0
 src/{appConfig => app-config}/localConfig.ts  |  0
 src/{appConfig => app-config}/regexConfig.ts  |  0
 .../requestConfig.ts                          |  0
 src/{appConfig => app-config}/routerConfig.ts |  0
 src/axios/inject/request/provide.ts           |  2 +-
 src/axios/instance.ts                         |  2 +-
 src/components/RayChart/index.tsx             |  2 +-
 src/components/RayQRCode/src/index.tsx        | 15 +++---
 src/components/RayQRCode/src/props.ts         |  9 ++++
 src/components/RayQRCode/src/type.ts          |  2 +
 .../RayTransitionComponent/index.vue          |  2 +-
 src/dayjs/index.ts                            |  2 +-
 src/directives/modules/copy/index.ts          | 35 +++++++------
 src/directives/modules/copy/type.ts           |  3 ++
 src/layout/components/Menu/index.tsx          |  2 +-
 src/layout/components/MenuTag/index.tsx       |  2 +-
 .../components/SettingDrawer/index.tsx        |  2 +-
 src/layout/components/SiderBar/index.tsx      |  2 +-
 src/layout/default/ContentWrapper/index.tsx   |  4 +-
 src/layout/index.tsx                          |  2 +-
 src/locales/helper.ts                         |  4 +-
 src/locales/index.ts                          |  2 +-
 src/locales/lang/zh-CN/views/login/index.json |  2 +-
 src/router/helper/helper.ts                   |  2 +-
 src/router/helper/permission.ts               |  4 +-
 src/router/helper/routerCopilot.ts            |  4 +-
 src/router/routes.ts                          |  2 +-
 src/store/index.ts                            |  7 ++-
 src/store/modules/keep-alive/index.ts         |  2 +-
 src/store/modules/menu/helper.ts              |  2 +-
 src/store/modules/setting/index.ts            |  2 +-
 src/utils/element.ts                          |  2 +-
 src/views/login/components/Signin/index.tsx   |  2 +-
 src/views/login/index.tsx                     |  2 +-
 43 files changed, 98 insertions(+), 110 deletions(-)
 rename src/app-components/provider/{AppRequestCanceler => AppRequestCancelerProvider}/index.tsx (77%)
 rename src/{appConfig => app-config}/appConfig.ts (100%)
 rename src/{appConfig => app-config}/designConfig.ts (100%)
 rename src/{appConfig => app-config}/localConfig.ts (100%)
 rename src/{appConfig => app-config}/regexConfig.ts (100%)
 rename src/{appConfig => app-config}/requestConfig.ts (100%)
 rename src/{appConfig => app-config}/routerConfig.ts (100%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e60912c4..dbd18e1c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,8 @@
 - 移除 qrcode.vue 依赖
 - 更新 vue-hooks-plus 版本至 v1.8.2
 - 移除 office 功能集成
+- 统一包命名方式
+- 更改 v-copy 实现细节（使用方式不变）
 
 ### Fixes
 
diff --git a/README.md b/README.md
index 144c050c..ad22f5e9 100644
--- a/README.md
+++ b/README.md
@@ -12,14 +12,16 @@
 
 ## ✨ 特性
 
-- **最新技术栈**：使用 Vue3.x/vite4.x 等前端前沿技术开发
+- **最新技术栈**：使用 vue3.x/vite4.x/pinia 等前端前沿技术开发
 - **TypeScript**：应用程序级 JavaScript 的语言
 - **主题**：可配置的主题
 - **国际化**：内置完善的国际化方案
 - **Mock 数据**：内置 Mock 数据方案
 - **权限**：内置完善的动态路由权限生成方案
 - **组件**：二次封装了多个常用的组件
-- **Axios 请求**：二次封装 axios 库
+- **Axios 请求**：二次封装 axios 库，支持：取消、防抖、自动重复取消等功能
+- **缓存**：任意深度页面缓存
+- **SVG**：内置 svg icon 解决方案
 
 ## 🪄 预览地址
 
@@ -37,7 +39,7 @@
 
 ## 🪴 准备
 
-- [node](http://nodejs.org/) 和 [git](https://git-scm.com/) -项目开发环境
+- [Node](http://nodejs.org/) 和 [git](https://git-scm.com/) - 项目开发环境
 - [Vite](https://vitejs.dev/) - 熟悉 vite 特性
 - [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法
 - [TypeScript](https://www.typescriptlang.org/) - 熟悉 TypeScript 基本语法
@@ -63,73 +65,33 @@ git clone https://gh.yka.moe/https://github.com/XiaoDaiGua-Ray/ray-template.git
 ### 拉取依赖
 
 ```sh
-# pnpm
-
 pnpm
 ```
 
-```sh
-# npm
-
-npm install
-```
-
 ### 启动项目
 
 ```sh
-# pnpm
-
 pnpm dev
 ```
 
-```sh
-# npm
-
-npm run dev
-```
-
 ### 项目打包
 
 ```sh
-# pnpm
-
 pnpm build
 ```
 
-```sh
-# npm
-
-npm run build
-```
-
 ### 预览项目
 
 ```sh
-# pnpm
-
 pnpm preview
 ```
 
-```sh
-# npm
-
-npm run preview
-```
-
 ### 体积分析
 
 ```sh
-# pnpm
-
 pnpm report
 ```
 
-```sh
-# npm
-
-npm run report
-```
-
 ## 🪴 项目活动
 
 ![Alt](https://repobeats.axiom.co/api/embed/fab6071297ab281913a42f07a2779b488cfd62b8.svg 'Repobeats analytics image')
@@ -150,4 +112,4 @@ npm run report
 
 ## 📄 证书
 
-[MIT License](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/LICENSE) © 2022-PRESENT [Ray](https://github.com/XiaoDaiGua-Ray/ray-template)
+[MIT License](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/LICENSE) © 2022-PRESENT [Ray](https://github.com/XiaoDaiGua-Ray)
diff --git a/cfg.ts b/cfg.ts
index 9ac1939b..9d803ba9 100644
--- a/cfg.ts
+++ b/cfg.ts
@@ -43,8 +43,8 @@ import {
   buildOptions,
   mixinCSSPlugin,
 } from './vite-plugin/index'
-import { APP_THEME } from './src/appConfig/designConfig'
-import { PRE_LOADING_CONFIG, SIDE_BAR_LOGO } from './src/appConfig/appConfig'
+import { APP_THEME } from './src/app-config/designConfig'
+import { PRE_LOADING_CONFIG, SIDE_BAR_LOGO } from './src/app-config/appConfig'
 
 import type { AppConfigExport } from '@/types/modules/cfg'
 
diff --git a/src/app-components/app/AppAvatar/index.tsx b/src/app-components/app/AppAvatar/index.tsx
index 777597a4..4e561648 100644
--- a/src/app-components/app/AppAvatar/index.tsx
+++ b/src/app-components/app/AppAvatar/index.tsx
@@ -22,7 +22,7 @@ import './index.scss'
 import { NAvatar, NSpace } from 'naive-ui'
 
 import { avatarProps, spaceProps } from 'naive-ui'
-import { APP_CATCH_KEY } from '@/appConfig/appConfig'
+import { APP_CATCH_KEY } from '@/app-config/appConfig'
 import { getStorage } from '@/utils/cache'
 
 import type { PropType } from 'vue'
diff --git a/src/app-components/provider/AppNaiveGlobalProvider/index.tsx b/src/app-components/provider/AppNaiveGlobalProvider/index.tsx
index cdbc4602..fe12f1d0 100644
--- a/src/app-components/provider/AppNaiveGlobalProvider/index.tsx
+++ b/src/app-components/provider/AppNaiveGlobalProvider/index.tsx
@@ -31,9 +31,9 @@ import {
 import { useSetting } from '@/store'
 import { naiveLocales } from '@/locales/helper'
 
-const GlobalProvider = defineComponent({
+export default defineComponent({
   name: 'GlobalProvider',
-  setup() {
+  setup(_, { expose }) {
     const settingStore = useSetting()
 
     const modelPrimaryColorOverride = computed(
@@ -54,6 +54,7 @@ const GlobalProvider = defineComponent({
         configProviderProps: computed(() => ({
           theme: modelThemeValue.value,
         })),
+        notificationProviderProps: {},
       },
     )
 
@@ -62,6 +63,8 @@ const GlobalProvider = defineComponent({
     window.$loadingBar = loadingBar // 注入 `loadingBar`
     window.$notification = notification // 注入 `notification`
 
+    expose()
+
     return {
       modelPrimaryColorOverride,
       modelThemeValue,
@@ -90,5 +93,3 @@ const GlobalProvider = defineComponent({
     )
   },
 })
-
-export default GlobalProvider
diff --git a/src/app-components/provider/AppRequestCanceler/index.tsx b/src/app-components/provider/AppRequestCancelerProvider/index.tsx
similarity index 77%
rename from src/app-components/provider/AppRequestCanceler/index.tsx
rename to src/app-components/provider/AppRequestCancelerProvider/index.tsx
index 44f177d9..6aa15f36 100644
--- a/src/app-components/provider/AppRequestCanceler/index.tsx
+++ b/src/app-components/provider/AppRequestCancelerProvider/index.tsx
@@ -19,12 +19,14 @@
 
 import { axiosCanceler } from '@/axios/helper/interceptor'
 
-const AppRequestCanceler = defineComponent({
-  name: 'AppRequestCanceler',
-  setup() {
+const AppRequestCancelerProvider = defineComponent({
+  name: 'AppRequestCancelerProvider',
+  setup(_, { expose }) {
     onBeforeRouteUpdate(() => {
       axiosCanceler.cancelAllRequest()
     })
+
+    expose()
   },
   render() {
     return (
@@ -37,4 +39,4 @@ const AppRequestCanceler = defineComponent({
   },
 })
 
-export default AppRequestCanceler
+export default AppRequestCancelerProvider
diff --git a/src/app-components/provider/AppStyleProvider/index.tsx b/src/app-components/provider/AppStyleProvider/index.tsx
index 7cd3c14d..d60a4edb 100644
--- a/src/app-components/provider/AppStyleProvider/index.tsx
+++ b/src/app-components/provider/AppStyleProvider/index.tsx
@@ -20,7 +20,7 @@ import type { SettingState } from '@/store/modules/setting/type'
 
 const AppStyleProvider = defineComponent({
   name: 'AppStyleProvider',
-  setup() {
+  setup(_, { expose }) {
     const settingStore = useSetting()
 
     const { themeValue } = storeToRefs(settingStore)
@@ -97,6 +97,8 @@ const AppStyleProvider = defineComponent({
         immediate: true,
       },
     )
+
+    expose()
   },
   render() {
     return <div class="app-style-provider"></div>
diff --git a/src/appConfig/appConfig.ts b/src/app-config/appConfig.ts
similarity index 100%
rename from src/appConfig/appConfig.ts
rename to src/app-config/appConfig.ts
diff --git a/src/appConfig/designConfig.ts b/src/app-config/designConfig.ts
similarity index 100%
rename from src/appConfig/designConfig.ts
rename to src/app-config/designConfig.ts
diff --git a/src/appConfig/localConfig.ts b/src/app-config/localConfig.ts
similarity index 100%
rename from src/appConfig/localConfig.ts
rename to src/app-config/localConfig.ts
diff --git a/src/appConfig/regexConfig.ts b/src/app-config/regexConfig.ts
similarity index 100%
rename from src/appConfig/regexConfig.ts
rename to src/app-config/regexConfig.ts
diff --git a/src/appConfig/requestConfig.ts b/src/app-config/requestConfig.ts
similarity index 100%
rename from src/appConfig/requestConfig.ts
rename to src/app-config/requestConfig.ts
diff --git a/src/appConfig/routerConfig.ts b/src/app-config/routerConfig.ts
similarity index 100%
rename from src/appConfig/routerConfig.ts
rename to src/app-config/routerConfig.ts
diff --git a/src/axios/inject/request/provide.ts b/src/axios/inject/request/provide.ts
index f2becd29..1b06c3c9 100644
--- a/src/axios/inject/request/provide.ts
+++ b/src/axios/inject/request/provide.ts
@@ -20,7 +20,7 @@
 
 import { useAxiosInterceptor, axiosCanceler } from '@/axios/helper/interceptor'
 import { appendRequestHeaders } from '@/axios/helper/axiosCopilot'
-import { APP_CATCH_KEY } from '@/appConfig/appConfig'
+import { APP_CATCH_KEY } from '@/app-config/appConfig'
 import { getStorage } from '@/utils/cache'
 
 import type {
diff --git a/src/axios/instance.ts b/src/axios/instance.ts
index 5f717cf1..e968087a 100644
--- a/src/axios/instance.ts
+++ b/src/axios/instance.ts
@@ -17,7 +17,7 @@
  */
 
 import axios from 'axios'
-import { AXIOS_CONFIG } from '@/appConfig/requestConfig'
+import { AXIOS_CONFIG } from '@/app-config/requestConfig'
 import { useAxiosInterceptor, axiosCanceler } from '@/axios/helper/interceptor'
 import {
   setupResponseInterceptor,
diff --git a/src/components/RayChart/index.tsx b/src/components/RayChart/index.tsx
index bc6838ab..2fd661b4 100644
--- a/src/components/RayChart/index.tsx
+++ b/src/components/RayChart/index.tsx
@@ -46,7 +46,7 @@ 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 { APP_THEME } from '@/appConfig/designConfig'
+import { APP_THEME } from '@/app-config/designConfig'
 
 import type { PropType } from 'vue'
 import type { AnyFC, MaybeArray } from '@/types/modules/utils'
diff --git a/src/components/RayQRCode/src/index.tsx b/src/components/RayQRCode/src/index.tsx
index a7a33832..f66085c4 100644
--- a/src/components/RayQRCode/src/index.tsx
+++ b/src/components/RayQRCode/src/index.tsx
@@ -19,11 +19,9 @@ import { AwesomeQR } from 'awesome-qr'
 import { isValueType, downloadBase64File } from '@use-utils/hook'
 import { call } from '@/utils/vue/index'
 
-import type { QRCodeRenderResponse } from './type'
+import type { QRCodeRenderResponse, GIFBuffer } from './type'
 
-const readGIFAsArrayBuffer = (
-  url: string,
-): Promise<string | ArrayBuffer | null> => {
+const readGIFAsArrayBuffer = (url: string): Promise<GIFBuffer> => {
   return new Promise((resolve, reject) => {
     const xhr = new XMLHttpRequest()
 
@@ -50,7 +48,7 @@ const readGIFAsArrayBuffer = (
   })
 }
 
-const RayQRcode = defineComponent({
+export default defineComponent({
   name: 'RayQRcode',
   props,
   setup(props, ctx) {
@@ -60,7 +58,7 @@ const RayQRcode = defineComponent({
     const spinOverrides = {
       opacitySpinning: '0.1',
     }
-    let gifBuffer: string | ArrayBuffer | null
+    let gifBuffer: GIFBuffer
 
     const getGIFImageByURL = async () => {
       const { gifBackgroundURL } = props
@@ -77,7 +75,7 @@ const RayQRcode = defineComponent({
     }
 
     const renderQRCode = () => {
-      const { gifBackgroundURL, gifBackground, ...ops } = props
+      const { gifBackground, ...ops } = props
 
       new AwesomeQR({
         ...ops,
@@ -149,6 +147,7 @@ const RayQRcode = defineComponent({
         <NSpin
           show={this.status === 'loading'}
           themeOverrides={this.spinOverrides}
+          description={this.loadingDescription}
         >
           <img src={this.qrcodeURL as string | undefined} />
         </NSpin>
@@ -184,5 +183,3 @@ const RayQRcode = defineComponent({
     )
   },
 })
-
-export default RayQRcode
diff --git a/src/components/RayQRCode/src/props.ts b/src/components/RayQRCode/src/props.ts
index 84fc7741..7fc97324 100644
--- a/src/components/RayQRCode/src/props.ts
+++ b/src/components/RayQRCode/src/props.ts
@@ -15,6 +15,15 @@ import type { MaybeArray } from '@/types/modules/utils'
 import type { Options } from 'awesome-qr'
 
 const props = {
+  loadingDescription: {
+    /**
+     *
+     * Loading status description label
+     *
+     * @default undefined
+     */
+    type: String,
+  },
   watchText: {
     /**
      *
diff --git a/src/components/RayQRCode/src/type.ts b/src/components/RayQRCode/src/type.ts
index 994a0869..6cffb552 100644
--- a/src/components/RayQRCode/src/type.ts
+++ b/src/components/RayQRCode/src/type.ts
@@ -24,3 +24,5 @@ export type QRCodeInst = {
    */
   downloadQRCode: (fileName?: string) => void
 }
+
+export type GIFBuffer = string | ArrayBuffer | null
diff --git a/src/components/RayTransitionComponent/index.vue b/src/components/RayTransitionComponent/index.vue
index 7970c719..93a7edc4 100644
--- a/src/components/RayTransitionComponent/index.vue
+++ b/src/components/RayTransitionComponent/index.vue
@@ -24,7 +24,7 @@
 </template>
 <script lang="ts" setup>
 import { useKeepAlive } from '@/store'
-import { APP_KEEP_ALIVE } from '@/appConfig/appConfig'
+import { APP_KEEP_ALIVE } from '@/app-config/appConfig'
 
 import type { PropType } from 'vue'
 
diff --git a/src/dayjs/index.ts b/src/dayjs/index.ts
index 335ea102..84bb5309 100644
--- a/src/dayjs/index.ts
+++ b/src/dayjs/index.ts
@@ -10,7 +10,7 @@
  */
 
 import dayjs from 'dayjs'
-import { DEFAULT_DAYJS_LOCAL, DAYJS_LOCAL_MAP } from '@/appConfig/localConfig'
+import { DEFAULT_DAYJS_LOCAL, DAYJS_LOCAL_MAP } from '@/app-config/localConfig'
 import 'dayjs/locale/zh-cn'
 
 import type { DayjsLocal } from './type'
diff --git a/src/directives/modules/copy/index.ts b/src/directives/modules/copy/index.ts
index b40cbe82..c089ad65 100644
--- a/src/directives/modules/copy/index.ts
+++ b/src/directives/modules/copy/index.ts
@@ -20,31 +20,36 @@ import type { CopyElement } from './type'
 import type { CustomDirectiveFC } from '@/directives/type'
 
 const copyDirective: CustomDirectiveFC<CopyElement, string> = () => {
-  let clipboard: ClipboardJS | null
-
   return {
     mounted: (el, { value }) => {
-      clipboard = new ClipboardJS(el, {
+      const clipboard = new ClipboardJS(el, {
         text: () => value,
       })
 
-      clipboard?.on('success', () => {
+      clipboard.on('success', () => {
         window.$message.success('复制成功')
       })
-      clipboard?.on('error', () => {
+      clipboard.on('error', () => {
         window.$message.error('复制失败')
       })
-    },
-    updated: (el, { value }) => {
-      /** 其实这块代码写的挺蠢的, 但是我目前不知道怎么去优化, 阿巴阿巴阿巴 */
-      clipboard = new ClipboardJS(el, {
-        text: () => value,
-      })
-    },
-    beforeUnmount: () => {
-      clipboard?.destroy()
 
-      clipboard = null
+      el.$$clipboard = clipboard
+    },
+    updated: (el, { value, oldValue }) => {
+      if (value !== oldValue) {
+        el.$$clipboard?.destroy()
+
+        el.$$clipboard = new ClipboardJS(el, {
+          text: () => value,
+        })
+      }
+    },
+    beforeUnmount: (el: CopyElement) => {
+      if (el.$$clipboard) {
+        el.$$clipboard?.destroy()
+
+        el.$$clipboard = null
+      }
     },
   }
 }
diff --git a/src/directives/modules/copy/type.ts b/src/directives/modules/copy/type.ts
index 5b3f4f00..e27f026f 100644
--- a/src/directives/modules/copy/type.ts
+++ b/src/directives/modules/copy/type.ts
@@ -1,3 +1,6 @@
+import type ClipboardJS from 'clipboard'
+
 export interface CopyElement extends Element, UnknownObjectKey {
   $value: string
+  $$clipboard: ClipboardJS | null
 }
diff --git a/src/layout/components/Menu/index.tsx b/src/layout/components/Menu/index.tsx
index f1ee7041..3d842e2f 100644
--- a/src/layout/components/Menu/index.tsx
+++ b/src/layout/components/Menu/index.tsx
@@ -13,7 +13,7 @@ import { NMenu, NLayoutSider } from 'naive-ui'
 import SiderBarLogo from './components/SiderBarLogo/index'
 
 import { useMenu } from '@/store'
-import { APP_MENU_CONFIG } from '@/appConfig/appConfig'
+import { APP_MENU_CONFIG } from '@/app-config/appConfig'
 
 import type { MenuInst } from 'naive-ui'
 import type { NaiveMenuOptions } from '@/types/modules/component'
diff --git a/src/layout/components/MenuTag/index.tsx b/src/layout/components/MenuTag/index.tsx
index b052d724..6e63f3ae 100644
--- a/src/layout/components/MenuTag/index.tsx
+++ b/src/layout/components/MenuTag/index.tsx
@@ -32,7 +32,7 @@ import { useMenu, useSetting } from '@/store'
 import { uuid } from '@/utils/hook'
 import { hasClass } from '@/utils/element'
 import { redirectRouterToDashboard } from '@/router/helper/routerCopilot'
-import { ROOT_ROUTE } from '@/appConfig/appConfig'
+import { ROOT_ROUTE } from '@/app-config/appConfig'
 import { queryElements } from '@use-utils/element'
 
 import type { MenuOption, ScrollbarInst } from 'naive-ui'
diff --git a/src/layout/components/SiderBar/components/SettingDrawer/index.tsx b/src/layout/components/SiderBar/components/SettingDrawer/index.tsx
index e03dcd5a..5282c383 100644
--- a/src/layout/components/SiderBar/components/SettingDrawer/index.tsx
+++ b/src/layout/components/SiderBar/components/SettingDrawer/index.tsx
@@ -13,7 +13,7 @@ import {
 } from 'naive-ui'
 import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index'
 
-import { APP_THEME } from '@/appConfig/designConfig'
+import { APP_THEME } from '@/app-config/designConfig'
 import { useSetting } from '@/store'
 import { useI18n } from '@/locales/useI18n'
 
diff --git a/src/layout/components/SiderBar/index.tsx b/src/layout/components/SiderBar/index.tsx
index 4dbc9d36..c3f145df 100644
--- a/src/layout/components/SiderBar/index.tsx
+++ b/src/layout/components/SiderBar/index.tsx
@@ -28,7 +28,7 @@ import GlobalSeach from './components/GlobalSeach/index'
 import AppAvatar from '@/app-components/app/AppAvatar/index'
 
 import { useSetting } from '@/store'
-import { LOCAL_OPTIONS } from '@/appConfig/localConfig'
+import { LOCAL_OPTIONS } from '@/app-config/localConfig'
 import { useAvatarOptions, avatarDropdownClick } from './hook'
 import screenfull from 'screenfull'
 import { useI18n } from '@/locales/useI18n'
diff --git a/src/layout/default/ContentWrapper/index.tsx b/src/layout/default/ContentWrapper/index.tsx
index 08e16710..ee0763a2 100644
--- a/src/layout/default/ContentWrapper/index.tsx
+++ b/src/layout/default/ContentWrapper/index.tsx
@@ -19,7 +19,7 @@ import './index.scss'
 
 import { NSpin } from 'naive-ui'
 import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue'
-import AppRequestCanceler from '@/app-components/provider/AppRequestCanceler/index'
+import AppRequestCancelerProvider from '@/app-components/provider/AppRequestCancelerProvider/index'
 
 import { useSetting } from '@/store'
 
@@ -64,7 +64,7 @@ const ContentWrapper = defineComponent({
         size="large"
         themeOverrides={this.thmeOverridesSpin}
       >
-        <AppRequestCanceler />
+        <AppRequestCancelerProvider />
         {this.reloadRouteSwitch ? (
           <RayTransitionComponent
             class="content-wrapper"
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
index 45c7edf0..e668a34b 100644
--- a/src/layout/index.tsx
+++ b/src/layout/index.tsx
@@ -19,7 +19,7 @@ import HeaderWrapper from './default/HeaderWrapper'
 import FeatureWrapper from './default/FeatureWrapper'
 
 import { useSetting } from '@/store'
-import { LAYOUT_CONTENT_REF } from '@/appConfig/routerConfig'
+import { LAYOUT_CONTENT_REF } from '@/app-config/routerConfig'
 import { layoutHeaderCssVars } from '@/layout/layoutResize'
 import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar'
 
diff --git a/src/locales/helper.ts b/src/locales/helper.ts
index ebcc5938..bbe64f1f 100644
--- a/src/locales/helper.ts
+++ b/src/locales/helper.ts
@@ -19,8 +19,8 @@
 import { set } from 'lodash-es'
 import { zhCN, dateZhCN } from 'naive-ui' // 导入 `naive ui` 中文包
 import { getStorage } from '@use-utils/cache'
-import { SYSTEM_DEFAULT_LOCAL } from '@/appConfig/localConfig'
-import { APP_CATCH_KEY } from '@/appConfig/appConfig'
+import { SYSTEM_DEFAULT_LOCAL } from '@/app-config/localConfig'
+import { APP_CATCH_KEY } from '@/app-config/appConfig'
 
 import type { Recordable } from '@/types/modules/helper'
 import type {
diff --git a/src/locales/index.ts b/src/locales/index.ts
index 1901f192..55826326 100644
--- a/src/locales/index.ts
+++ b/src/locales/index.ts
@@ -24,7 +24,7 @@
  */
 
 import { createI18n } from 'vue-i18n'
-import { LOCAL_OPTIONS } from '@/appConfig/localConfig'
+import { LOCAL_OPTIONS } from '@/app-config/localConfig'
 import { getAppDefaultLanguage, getAppLocalMessages } from '@/locales/helper'
 
 import type { App } from 'vue'
diff --git a/src/locales/lang/zh-CN/views/login/index.json b/src/locales/lang/zh-CN/views/login/index.json
index a99252d3..87bf08a6 100644
--- a/src/locales/lang/zh-CN/views/login/index.json
+++ b/src/locales/lang/zh-CN/views/login/index.json
@@ -1,6 +1,6 @@
 {
   "Register": "注册",
-  "Signin": "登陆",
+  "Signin": "登录",
   "QRCodeSignin": "扫码登陆",
   "NamePlaceholder": "请输入用户名",
   "PasswordPlaceholder": "请输入密码",
diff --git a/src/router/helper/helper.ts b/src/router/helper/helper.ts
index 9fc8a91c..1245c416 100644
--- a/src/router/helper/helper.ts
+++ b/src/router/helper/helper.ts
@@ -18,7 +18,7 @@
  * 如果有需要查看 router 模块的全局通用辅助方法可以查看 routerCopilot 包
  */
 
-import { LAYOUT_CONTENT_REF } from '@/appConfig/routerConfig'
+import { LAYOUT_CONTENT_REF } from '@/app-config/routerConfig'
 
 import type { RouteLocationNormalized } from 'vue-router'
 import type { AppRouteRecordRaw, RouteModules } from '@/router/type'
diff --git a/src/router/helper/permission.ts b/src/router/helper/permission.ts
index 3042d817..2f026413 100644
--- a/src/router/helper/permission.ts
+++ b/src/router/helper/permission.ts
@@ -21,9 +21,9 @@
  */
 
 import { getStorage } from '@/utils/cache'
-import { APP_CATCH_KEY, ROOT_ROUTE } from '@/appConfig/appConfig'
+import { APP_CATCH_KEY, ROOT_ROUTE } from '@/app-config/appConfig'
 import { redirectRouterToDashboard } from '@/router/helper/routerCopilot'
-import { WHITE_ROUTES } from '@/appConfig/routerConfig'
+import { WHITE_ROUTES } from '@/app-config/routerConfig'
 import { validRole } from '@/router/helper/routerCopilot'
 import { isValueType } from '@/utils/hook'
 
diff --git a/src/router/helper/routerCopilot.ts b/src/router/helper/routerCopilot.ts
index 03b6a851..29cc8335 100644
--- a/src/router/helper/routerCopilot.ts
+++ b/src/router/helper/routerCopilot.ts
@@ -10,10 +10,10 @@
  */
 
 import { permissionRouter } from './permission'
-import { SETUP_ROUTER_ACTION, SUPER_ADMIN } from '@/appConfig/routerConfig'
+import { SETUP_ROUTER_ACTION, SUPER_ADMIN } from '@/app-config/routerConfig'
 import { useSignin } from '@/store'
 import { useVueRouter } from '@/router/helper/useVueRouter'
-import { ROOT_ROUTE } from '@/appConfig/appConfig'
+import { ROOT_ROUTE } from '@/app-config/appConfig'
 import { setStorage } from '@/utils/cache'
 import { getAppEnvironment } from '@/utils/hook'
 
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 3486b88f..08326655 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -1,6 +1,6 @@
 import Layout from '@/layout/index'
 import { getAppRawRoutes } from './routeModules'
-import { ROOT_ROUTE } from '@/appConfig/appConfig'
+import { ROOT_ROUTE } from '@/app-config/appConfig'
 import { expandRoutes } from '@/router/helper/expandRoutes'
 
 export default async () => [
diff --git a/src/store/index.ts b/src/store/index.ts
index 2028ee18..81415dca 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -25,11 +25,14 @@ export { useKeepAlive } from './modules/keep-alive/index'
 
 import type { App } from 'vue'
 
-/** 设置并且注册 pinia */
+/**
+ *
+ * 设置并且注册 pinia
+ * pinia 天生支持在非 setup 环境中使用，只要在调用时已经注册
+ */
 export const setupStore = async (app: App<Element>) => {
   const store = createPinia()
 
   app.use(store)
-
   store.use(piniaPluginPersistedstate)
 }
diff --git a/src/store/modules/keep-alive/index.ts b/src/store/modules/keep-alive/index.ts
index 8ed80f0a..1cf41ebb 100644
--- a/src/store/modules/keep-alive/index.ts
+++ b/src/store/modules/keep-alive/index.ts
@@ -18,7 +18,7 @@
  * 依赖 APP_KEEP_ALIVE 配置
  */
 
-import { APP_KEEP_ALIVE } from '@/appConfig/appConfig'
+import { APP_KEEP_ALIVE } from '@/app-config/appConfig'
 
 import type { KeepAliveStoreState } from './type'
 import type { AppMenuOption } from '@/types/modules/app'
diff --git a/src/store/modules/menu/helper.ts b/src/store/modules/menu/helper.ts
index c5d400af..6d4f11ef 100644
--- a/src/store/modules/menu/helper.ts
+++ b/src/store/modules/menu/helper.ts
@@ -11,7 +11,7 @@
 
 /** 本方法感谢 <https://yunkuangao.me/> 的支持 */
 
-import { APP_MENU_CONFIG, ROOT_ROUTE } from '@/appConfig/appConfig'
+import { APP_MENU_CONFIG, ROOT_ROUTE } from '@/app-config/appConfig'
 import RayIcon from '@/components/RayIcon/index'
 import { isValueType } from '@/utils/hook'
 import { getStorage, setStorage } from '@/utils/cache'
diff --git a/src/store/modules/setting/index.ts b/src/store/modules/setting/index.ts
index 9de80aca..8f9b5471 100644
--- a/src/store/modules/setting/index.ts
+++ b/src/store/modules/setting/index.ts
@@ -3,7 +3,7 @@ import { setStorage } from '@use-utils/cache'
 import { set } from 'lodash-es'
 import { addClass, removeClass, colorToRgba } from '@/utils/element'
 import { useI18n } from '@/locales/useI18n'
-import { APP_THEME } from '@/appConfig/designConfig'
+import { APP_THEME } from '@/app-config/designConfig'
 import { useDayjs } from '@/dayjs/index'
 
 import type { ConditionalPick } from '@/types/modules/helper'
diff --git a/src/utils/element.ts b/src/utils/element.ts
index af2cffbd..d43ccba5 100644
--- a/src/utils/element.ts
+++ b/src/utils/element.ts
@@ -1,5 +1,5 @@
 import { isValueType } from '@use-utils/hook'
-import { APP_REGEX } from '@/appConfig/regexConfig'
+import { APP_REGEX } from '@/app-config/regexConfig'
 
 import type {
   EventListenerOrEventListenerObject,
diff --git a/src/views/login/components/Signin/index.tsx b/src/views/login/components/Signin/index.tsx
index 8abc7615..e559086f 100644
--- a/src/views/login/components/Signin/index.tsx
+++ b/src/views/login/components/Signin/index.tsx
@@ -4,7 +4,7 @@ import { setStorage } from '@/utils/cache'
 import { setSpin } from '@/spin'
 import { useSignin } from '@/store'
 import { useI18n } from '@/locales/useI18n'
-import { APP_CATCH_KEY, ROOT_ROUTE } from '@/appConfig/appConfig'
+import { APP_CATCH_KEY, ROOT_ROUTE } from '@/app-config/appConfig'
 import { useVueRouter } from '@/router/helper/useVueRouter'
 
 import type { FormInst } from 'naive-ui'
diff --git a/src/views/login/index.tsx b/src/views/login/index.tsx
index f377167c..12e7418c 100644
--- a/src/views/login/index.tsx
+++ b/src/views/login/index.tsx
@@ -20,7 +20,7 @@ import RayLink from '@/app-components/app/RayLink/index'
 import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index'
 
 import { useSetting } from '@/store'
-import { LOCAL_OPTIONS } from '@/appConfig/localConfig'
+import { LOCAL_OPTIONS } from '@/app-config/localConfig'
 import { useI18n } from '@/locales/useI18n'
 
 const Login = defineComponent({

From 4331b6a3b1b74802aece1b4f3de19a8dca2a7e9c Mon Sep 17 00:00:00 2001
From: XiaoDaiGua-Ray <443547225@qq.com>
Date: Fri, 15 Sep 2023 23:57:14 +0800
Subject: [PATCH 12/19] v4.2.0

---
 CHANGELOG.md                                  |  15 ++
 README.md                                     |   5 +-
 cfg.ts                                        |  43 +++-
 src/app-config/appConfig.ts                   |   6 +-
 src/axios/index.ts                            |   3 +
 src/components/{RayChart => RChart}/helper.ts |   2 +-
 .../{RayChart => RChart}/index.scss           |   0
 src/components/{RayChart => RChart}/index.tsx |   2 +-
 .../theme/macarons/macarons-dark.json         |   0
 .../theme/macarons/macarons.json              |   0
 src/components/{RayChart => RChart}/type.ts   |   0
 .../index.ts                                  |   0
 .../src/index.scss                            |   0
 .../src/index.tsx                             |   2 +-
 .../src/props.ts                              |   0
 .../src/type.ts                               |   0
 src/components/{RayIcon => RIcon}/index.scss  |   0
 src/components/{RayIcon => RIcon}/index.tsx   |   0
 .../{RayIframe => RIframe}/index.ts           |   0
 .../{RayIframe => RIframe}/src/index.scss     |   0
 .../{RayIframe => RIframe}/src/index.tsx      |   0
 .../{RayQRCode => RQRCode}/index.ts           |   0
 .../{RayQRCode => RQRCode}/src/index.scss     |   0
 .../{RayQRCode => RQRCode}/src/index.tsx      |   2 +-
 .../{RayQRCode => RQRCode}/src/props.ts       |   0
 .../{RayQRCode => RQRCode}/src/type.ts        |   0
 src/components/{RayTable => RTable}/index.ts  |   0
 .../src/components/TableAction/index.tsx      |   2 +-
 .../src/components/TableScreenfull/index.scss |   0
 .../src/components/TableScreenfull/index.tsx  |   4 +-
 .../src/components/TableSetting/hook.ts       |   2 +-
 .../src/components/TableSetting/index.scss    |   0
 .../src/components/TableSetting/index.tsx     |   4 +-
 .../src/components/TableSize/index.scss       |   0
 .../src/components/TableSize/index.tsx        |   4 +-
 .../{RayTable => RTable}/src/index.scss       |   0
 .../{RayTable => RTable}/src/index.tsx        |   0
 .../{RayTable => RTable}/src/props.ts         |   0
 .../{RayTable => RTable}/src/type.ts          |   0
 .../index.vue                                 |   0
 src/dayjs/index.ts                            |  23 +--
 src/directives/index.ts                       |  15 +-
 src/directives/modules/debounce/index.ts      |   1 -
 src/directives/modules/disabled/index.ts      |  11 +-
 src/directives/modules/throttle/index.ts      |   1 -
 src/hooks/variable/index.ts                   |  18 ++
 src/hooks/variable/useGlobalVariable.ts       |  40 ++++
 src/hooks/web/index.ts                        |  16 ++
 src/hooks/web/useDayjs.ts                     |  34 ++++
 src/{locales => hooks/web}/useI18n.ts         |  13 +-
 .../helper => hooks/web}/useVueRouter.ts      |   0
 .../Menu/components/SiderBarLogo/index.tsx    |  32 +--
 src/layout/components/MenuTag/index.tsx       |   2 +-
 .../SiderBar/components/GlobalSeach/index.tsx |   2 +-
 .../components/ThemeSwitch/index.tsx          |   4 +-
 .../components/SettingDrawer/index.tsx        |   2 +-
 .../SiderBar/components/TooltipIcon/index.tsx |   2 +-
 src/layout/components/SiderBar/index.tsx      |   4 +-
 src/layout/default/ContentWrapper/index.tsx   |   4 +-
 src/layout/index.tsx                          |   8 +-
 src/router/README.md                          |   2 +-
 .../{routeModules.ts => appRouteModules.ts}   |   0
 src/router/helper/routerCopilot.ts            |   2 +-
 src/router/index.ts                           |   2 +-
 src/router/modules/dashboard.ts               |   2 +-
 src/router/modules/demo/axios.ts              |   2 +-
 src/router/modules/demo/directive.ts          |   2 +-
 src/router/modules/demo/doc.ts                |   2 +-
 src/router/modules/demo/echart.ts             |   2 +-
 src/router/modules/demo/iframe.ts             |   2 +-
 src/router/modules/demo/mock.ts               |   2 +-
 src/router/modules/demo/multi-menu.ts         |   2 +-
 src/router/modules/demo/precision.ts          |   2 +-
 src/router/modules/demo/qrcode.ts             |   2 +-
 src/router/modules/demo/rely.ts               |   2 +-
 src/router/modules/demo/router-demo.ts        |   2 +-
 src/router/modules/demo/scroll-reveal.ts      |   2 +-
 src/router/modules/demo/svg-icons.ts          |   2 +-
 src/router/modules/demo/table.ts              |   2 +-
 src/router/modules/error404.ts                |   2 +-
 src/router/routes.ts                          |   2 +-
 src/spin/hook.ts                              |   9 -
 src/spin/index.tsx                            |   9 +-
 src/store/modules/menu/helper.ts              |   3 +-
 src/store/modules/menu/index.ts               |   6 +-
 src/store/modules/setting/index.ts            |   4 +-
 src/views/dashboard/index.tsx                 |   2 +-
 src/views/demo/doc/index.tsx                  |   2 +-
 src/views/demo/echart/index.tsx               |   4 +-
 src/views/demo/iframe/index.tsx               |   2 +-
 src/views/demo/mock-demo/index.tsx            |   4 +-
 src/views/demo/qrcode/index.tsx               |   4 +-
 .../router-demo/router-demo-home/index.tsx    |   2 +-
 src/views/demo/svg-icons/index.tsx            |   2 +-
 src/views/demo/table/index.tsx                |   6 +-
 .../login/components/QRCodeSignin/index.tsx   |   2 +-
 .../login/components/SSOSignin/index.tsx      |   2 +-
 src/views/login/components/Signin/index.tsx   |  10 +-
 src/views/login/index.scss                    |   1 +
 src/views/login/index.tsx                     |   5 +-
 tsconfig.json                                 |   4 +-
 unplugin/components.d.ts                      |   1 +
 vite-plugin/index.ts                          | 134 -------------
 vite-plugins/index.ts                         |  35 ++++
 {vite-plugin => vite-plugins}/type.ts         |   0
 vite.config.ts                                | 184 +++---------------
 vite.pliugin.config.ts                        | 165 ++++++++++++++++
 107 files changed, 529 insertions(+), 441 deletions(-)
 rename src/components/{RayChart => RChart}/helper.ts (97%)
 rename src/components/{RayChart => RChart}/index.scss (100%)
 rename src/components/{RayChart => RChart}/index.tsx (99%)
 rename src/components/{RayChart => RChart}/theme/macarons/macarons-dark.json (100%)
 rename src/components/{RayChart => RChart}/theme/macarons/macarons.json (100%)
 rename src/components/{RayChart => RChart}/type.ts (100%)
 rename src/components/{RayCollapseGrid => RCollapseGrid}/index.ts (100%)
 rename src/components/{RayCollapseGrid => RCollapseGrid}/src/index.scss (100%)
 rename src/components/{RayCollapseGrid => RCollapseGrid}/src/index.tsx (98%)
 rename src/components/{RayCollapseGrid => RCollapseGrid}/src/props.ts (100%)
 rename src/components/{RayCollapseGrid => RCollapseGrid}/src/type.ts (100%)
 rename src/components/{RayIcon => RIcon}/index.scss (100%)
 rename src/components/{RayIcon => RIcon}/index.tsx (100%)
 rename src/components/{RayIframe => RIframe}/index.ts (100%)
 rename src/components/{RayIframe => RIframe}/src/index.scss (100%)
 rename src/components/{RayIframe => RIframe}/src/index.tsx (100%)
 rename src/components/{RayQRCode => RQRCode}/index.ts (100%)
 rename src/components/{RayQRCode => RQRCode}/src/index.scss (100%)
 rename src/components/{RayQRCode => RQRCode}/src/index.tsx (98%)
 rename src/components/{RayQRCode => RQRCode}/src/props.ts (100%)
 rename src/components/{RayQRCode => RQRCode}/src/type.ts (100%)
 rename src/components/{RayTable => RTable}/index.ts (100%)
 rename src/components/{RayTable => RTable}/src/components/TableAction/index.tsx (98%)
 rename src/components/{RayTable => RTable}/src/components/TableScreenfull/index.scss (100%)
 rename src/components/{RayTable => RTable}/src/components/TableScreenfull/index.tsx (92%)
 rename src/components/{RayTable => RTable}/src/components/TableSetting/hook.ts (84%)
 rename src/components/{RayTable => RTable}/src/components/TableSetting/index.scss (100%)
 rename src/components/{RayTable => RTable}/src/components/TableSetting/index.tsx (98%)
 rename src/components/{RayTable => RTable}/src/components/TableSize/index.scss (100%)
 rename src/components/{RayTable => RTable}/src/components/TableSize/index.tsx (96%)
 rename src/components/{RayTable => RTable}/src/index.scss (100%)
 rename src/components/{RayTable => RTable}/src/index.tsx (100%)
 rename src/components/{RayTable => RTable}/src/props.ts (100%)
 rename src/components/{RayTable => RTable}/src/type.ts (100%)
 rename src/components/{RayTransitionComponent => RTransitionComponent}/index.vue (100%)
 create mode 100644 src/hooks/variable/index.ts
 create mode 100644 src/hooks/variable/useGlobalVariable.ts
 create mode 100644 src/hooks/web/index.ts
 create mode 100644 src/hooks/web/useDayjs.ts
 rename src/{locales => hooks/web}/useI18n.ts (83%)
 rename src/{router/helper => hooks/web}/useVueRouter.ts (100%)
 rename src/router/{routeModules.ts => appRouteModules.ts} (100%)
 delete mode 100644 src/spin/hook.ts
 delete mode 100644 vite-plugin/index.ts
 create mode 100644 vite-plugins/index.ts
 rename {vite-plugin => vite-plugins}/type.ts (100%)
 create mode 100644 vite.pliugin.config.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dbd18e1c..b292e9b5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,20 @@
 # CHANGE LOG
 
+## 4.2.0
+
+针对分包，做了全局的重新设计、调整。让包的名称更加语义化；最重要的是，重新抽离了一些全局可能常用的方法，例如：useI18n、useDayjs 等，在以前这些方法存放于对应的包中，其实这样很不合理，所以现在统一存放于 `src/hooks` 包中。并且该包以后统一存放 `hooks` 方法，并不是 `utils` 方法，做了一个本质的区分，所以 `xxxCopilot.ts` 文件中的方法并不会移动，维持存放在原有的模块下。
+
+引入 `useGlobalVariable` 来管理全局变量。与 `pinia` `的使用场景不同，useGlobalVariable` 是用于引入一些全局的响应式变量，这些变量不需要缓存，也不依赖任何插件。一个典型的应用是实现 `GlobalSpin`。使用该方法时，请谨慎使用，避免滥用，因为这些变量会被全局缓存且无法被回收。该方法存放的值，暂不支持缓存（如果有需要，可能后期会增加该功能）。
+
+当项目插件或者需要配置项过多时候，会导致 `vite.config.ts` 文件变得异常臃肿。所以，在本次更新中，将插件的配置单独提出维护（`vite.plugin.confit.ts`）。系统的常用配置依旧在 `cfg.ts` 文件中。所以默认情况下，一般不需要修改 `vite.config.ts` 文件。
+
+### Feats
+
+- 新增 `useGlobalVariable` 管理全局变量（该变量可以是在注册插件之前被调用）
+- `v-disbaled` 指令现在会尝试给元素添加 `disabled` 属性，如果该属性生效的话
+- 注册指令操作现在不会中断程序执行，但是会抛出错误警告
+- 抽离 `vite.plugin.confit.ts` 维护项目启动所需插件
+
 ## 4.1.9
 
 ### Feats
diff --git a/README.md b/README.md
index ad22f5e9..a444a38d 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,6 @@
-<div align="center"> <a href="https://github.com/XiaoDaiGua-Ray/ray-template"> <img alt="Ray Template" width="200" height="200" src="https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:alist/ray/ray.svg?sign=ZklU9Bh5b6oKp1X0LOhGwkx4g5mW4wk_w9Jt5zlZ5EQ=:0"> </a> <br> <br>
-
+<div align="center">
+ <a href="https://github.com/XiaoDaiGua-Ray/ray-template"> <img alt="Ray Template" width="200" height="200" src="https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:alist/ray/ray.svg?sign=ZklU9Bh5b6oKp1X0LOhGwkx4g5mW4wk_w9Jt5zlZ5EQ=:0"> </a> <br> <br>
+ <a href="https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/LICENSE"><img src="https://img.shields.io/github/license/XiaoDaiGua-Ray/ray-template" alt="LICENSE"></a>
 </div>
 
 <div align="center">
diff --git a/cfg.ts b/cfg.ts
index 9d803ba9..83526643 100644
--- a/cfg.ts
+++ b/cfg.ts
@@ -38,15 +38,12 @@
 
 import path from 'node:path'
 
-import {
-  HTMLTitlePlugin,
-  buildOptions,
-  mixinCSSPlugin,
-} from './vite-plugin/index'
+import { htmlTitlePlugin, mixinCSSPlugin } from './vite-plugins/index'
 import { APP_THEME } from './src/app-config/designConfig'
 import { PRE_LOADING_CONFIG, SIDE_BAR_LOGO } from './src/app-config/appConfig'
 
 import type { AppConfigExport } from '@/types/modules/cfg'
+import type { BuildOptions } from 'vite'
 
 const config: AppConfigExport = {
   /** 公共基础路径配置, 如果为空则会默认以 '/' 填充 */
@@ -82,7 +79,7 @@ const config: AppConfigExport = {
    *
    * 浏览器标题
    */
-  title: HTMLTitlePlugin('Ray Template'),
+  title: htmlTitlePlugin(PRE_LOADING_CONFIG.title || 'Ray Template'),
   /**
    *
    * 配置 HMR 特定选项(端口、主机、路径和协议)
@@ -109,7 +106,39 @@ const config: AppConfigExport = {
    *
    * 打包相关配置
    */
-  buildOptions: buildOptions,
+  buildOptions: (mode: string): BuildOptions => {
+    const outDirMap = {
+      test: 'dist/test-dist',
+      development: 'dist/development-dist',
+      production: 'dist/production-dist',
+      report: 'dist/report-dist',
+    }
+    const dirPath = outDirMap[mode] || 'dist/test-dist'
+
+    if (mode === 'production') {
+      return {
+        outDir: dirPath,
+        sourcemap: false,
+        terserOptions: {
+          compress: {
+            drop_console: true,
+            drop_debugger: true,
+          },
+        },
+      }
+    } else {
+      return {
+        outDir: dirPath,
+        sourcemap: true,
+        terserOptions: {
+          compress: {
+            drop_console: false,
+            drop_debugger: false,
+          },
+        },
+      }
+    }
+  },
   /**
    *
    * 预设别名
diff --git a/src/app-config/appConfig.ts b/src/app-config/appConfig.ts
index a99f7ec7..8889df7e 100644
--- a/src/app-config/appConfig.ts
+++ b/src/app-config/appConfig.ts
@@ -33,7 +33,11 @@ export const APP_KEEP_ALIVE: Readonly<AppKeepAlive> = {
   maxKeepAliveLength: 5,
 }
 
-/** 首屏加载信息配置 */
+/**
+ *
+ * 首屏加载信息配置
+ * 其中 title 属性会是默认的浏览器标题（初始化时）
+ */
 export const PRE_LOADING_CONFIG: PreloadingConfig = {
   title: 'Ray Template',
   tagColor: '#ff6700',
diff --git a/src/axios/index.ts b/src/axios/index.ts
index ec52083e..74e17f57 100644
--- a/src/axios/index.ts
+++ b/src/axios/index.ts
@@ -35,7 +35,10 @@ import type { AppRawRequestConfig } from '@/axios/type'
  * 非 vue effect 中使用
  * @example
  *
+ * // 请求函数
  * const getUser = () => request({ url: 'http://localhost:3000/user' })
+ *
+ * // effect 中使用
  * const { data } = useHookPlusRequest(getUser)
  */
 function useRequest<
diff --git a/src/components/RayChart/helper.ts b/src/components/RChart/helper.ts
similarity index 97%
rename from src/components/RayChart/helper.ts
rename to src/components/RChart/helper.ts
index 4d1e63a4..9a6589f3 100644
--- a/src/components/RayChart/helper.ts
+++ b/src/components/RChart/helper.ts
@@ -13,7 +13,7 @@ import type {
   ChartThemeRawArray,
   ChartThemeRawModules,
   LoadingOptions,
-} from '@/components/RayChart/type'
+} from '@/components/RChart/type'
 
 /**
  *
diff --git a/src/components/RayChart/index.scss b/src/components/RChart/index.scss
similarity index 100%
rename from src/components/RayChart/index.scss
rename to src/components/RChart/index.scss
diff --git a/src/components/RayChart/index.tsx b/src/components/RChart/index.tsx
similarity index 99%
rename from src/components/RayChart/index.tsx
rename to src/components/RChart/index.tsx
index 2fd661b4..9099a691 100644
--- a/src/components/RayChart/index.tsx
+++ b/src/components/RChart/index.tsx
@@ -55,7 +55,7 @@ import type {
   LoadingOptions,
   AutoResize,
   ChartTheme,
-} from '@/components/RayChart/type'
+} from '@/components/RChart/type'
 import type {
   UseResizeObserverReturn,
   MaybeComputedElementRef,
diff --git a/src/components/RayChart/theme/macarons/macarons-dark.json b/src/components/RChart/theme/macarons/macarons-dark.json
similarity index 100%
rename from src/components/RayChart/theme/macarons/macarons-dark.json
rename to src/components/RChart/theme/macarons/macarons-dark.json
diff --git a/src/components/RayChart/theme/macarons/macarons.json b/src/components/RChart/theme/macarons/macarons.json
similarity index 100%
rename from src/components/RayChart/theme/macarons/macarons.json
rename to src/components/RChart/theme/macarons/macarons.json
diff --git a/src/components/RayChart/type.ts b/src/components/RChart/type.ts
similarity index 100%
rename from src/components/RayChart/type.ts
rename to src/components/RChart/type.ts
diff --git a/src/components/RayCollapseGrid/index.ts b/src/components/RCollapseGrid/index.ts
similarity index 100%
rename from src/components/RayCollapseGrid/index.ts
rename to src/components/RCollapseGrid/index.ts
diff --git a/src/components/RayCollapseGrid/src/index.scss b/src/components/RCollapseGrid/src/index.scss
similarity index 100%
rename from src/components/RayCollapseGrid/src/index.scss
rename to src/components/RCollapseGrid/src/index.scss
diff --git a/src/components/RayCollapseGrid/src/index.tsx b/src/components/RCollapseGrid/src/index.tsx
similarity index 98%
rename from src/components/RayCollapseGrid/src/index.tsx
rename to src/components/RCollapseGrid/src/index.tsx
index 4c29feb4..d6eaa430 100644
--- a/src/components/RayCollapseGrid/src/index.tsx
+++ b/src/components/RCollapseGrid/src/index.tsx
@@ -24,7 +24,7 @@ import './index.scss'
 import { collapseGridProps } from './props'
 
 import { NCard, NGrid, NGridItem, NSpace } from 'naive-ui'
-import RayIcon from '@/components/RayIcon'
+import RayIcon from '@/components/RIcon'
 
 import { call } from '@/utils/vue/index'
 
diff --git a/src/components/RayCollapseGrid/src/props.ts b/src/components/RCollapseGrid/src/props.ts
similarity index 100%
rename from src/components/RayCollapseGrid/src/props.ts
rename to src/components/RCollapseGrid/src/props.ts
diff --git a/src/components/RayCollapseGrid/src/type.ts b/src/components/RCollapseGrid/src/type.ts
similarity index 100%
rename from src/components/RayCollapseGrid/src/type.ts
rename to src/components/RCollapseGrid/src/type.ts
diff --git a/src/components/RayIcon/index.scss b/src/components/RIcon/index.scss
similarity index 100%
rename from src/components/RayIcon/index.scss
rename to src/components/RIcon/index.scss
diff --git a/src/components/RayIcon/index.tsx b/src/components/RIcon/index.tsx
similarity index 100%
rename from src/components/RayIcon/index.tsx
rename to src/components/RIcon/index.tsx
diff --git a/src/components/RayIframe/index.ts b/src/components/RIframe/index.ts
similarity index 100%
rename from src/components/RayIframe/index.ts
rename to src/components/RIframe/index.ts
diff --git a/src/components/RayIframe/src/index.scss b/src/components/RIframe/src/index.scss
similarity index 100%
rename from src/components/RayIframe/src/index.scss
rename to src/components/RIframe/src/index.scss
diff --git a/src/components/RayIframe/src/index.tsx b/src/components/RIframe/src/index.tsx
similarity index 100%
rename from src/components/RayIframe/src/index.tsx
rename to src/components/RIframe/src/index.tsx
diff --git a/src/components/RayQRCode/index.ts b/src/components/RQRCode/index.ts
similarity index 100%
rename from src/components/RayQRCode/index.ts
rename to src/components/RQRCode/index.ts
diff --git a/src/components/RayQRCode/src/index.scss b/src/components/RQRCode/src/index.scss
similarity index 100%
rename from src/components/RayQRCode/src/index.scss
rename to src/components/RQRCode/src/index.scss
diff --git a/src/components/RayQRCode/src/index.tsx b/src/components/RQRCode/src/index.tsx
similarity index 98%
rename from src/components/RayQRCode/src/index.tsx
rename to src/components/RQRCode/src/index.tsx
index f66085c4..fcaad2dc 100644
--- a/src/components/RayQRCode/src/index.tsx
+++ b/src/components/RQRCode/src/index.tsx
@@ -12,7 +12,7 @@
 import './index.scss'
 
 import { NButton, NSpin } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 
 import props from './props'
 import { AwesomeQR } from 'awesome-qr'
diff --git a/src/components/RayQRCode/src/props.ts b/src/components/RQRCode/src/props.ts
similarity index 100%
rename from src/components/RayQRCode/src/props.ts
rename to src/components/RQRCode/src/props.ts
diff --git a/src/components/RayQRCode/src/type.ts b/src/components/RQRCode/src/type.ts
similarity index 100%
rename from src/components/RayQRCode/src/type.ts
rename to src/components/RQRCode/src/type.ts
diff --git a/src/components/RayTable/index.ts b/src/components/RTable/index.ts
similarity index 100%
rename from src/components/RayTable/index.ts
rename to src/components/RTable/index.ts
diff --git a/src/components/RayTable/src/components/TableAction/index.tsx b/src/components/RTable/src/components/TableAction/index.tsx
similarity index 98%
rename from src/components/RayTable/src/components/TableAction/index.tsx
rename to src/components/RTable/src/components/TableAction/index.tsx
index 319352fa..564f04ae 100644
--- a/src/components/RayTable/src/components/TableAction/index.tsx
+++ b/src/components/RTable/src/components/TableAction/index.tsx
@@ -10,7 +10,7 @@
  */
 
 import { NPopconfirm, NSpace, NButton, NPopover } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 
 export type EmitterType = 'positive' | 'negative'
 
diff --git a/src/components/RayTable/src/components/TableScreenfull/index.scss b/src/components/RTable/src/components/TableScreenfull/index.scss
similarity index 100%
rename from src/components/RayTable/src/components/TableScreenfull/index.scss
rename to src/components/RTable/src/components/TableScreenfull/index.scss
diff --git a/src/components/RayTable/src/components/TableScreenfull/index.tsx b/src/components/RTable/src/components/TableScreenfull/index.tsx
similarity index 92%
rename from src/components/RayTable/src/components/TableScreenfull/index.tsx
rename to src/components/RTable/src/components/TableScreenfull/index.tsx
index e8d55abe..eb449a51 100644
--- a/src/components/RayTable/src/components/TableScreenfull/index.tsx
+++ b/src/components/RTable/src/components/TableScreenfull/index.tsx
@@ -12,11 +12,11 @@
 import './index.scss'
 
 import { NPopover } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 
 import screenfull from 'screenfull'
 
-import type { TableSettingProvider } from '@/components/RayTable/src/type'
+import type { TableSettingProvider } from '@/components/RTable/src/type'
 
 const TableScreenfull = defineComponent({
   name: 'TableScreenfull',
diff --git a/src/components/RayTable/src/components/TableSetting/hook.ts b/src/components/RTable/src/components/TableSetting/hook.ts
similarity index 84%
rename from src/components/RayTable/src/components/TableSetting/hook.ts
rename to src/components/RTable/src/components/TableSetting/hook.ts
index 5314b758..59d19d73 100644
--- a/src/components/RayTable/src/components/TableSetting/hook.ts
+++ b/src/components/RTable/src/components/TableSetting/hook.ts
@@ -1,4 +1,4 @@
-import type { ActionOptions } from '@/components/RayTable/src/type'
+import type { ActionOptions } from '@/components/RTable/src/type'
 
 export const setupSettingOptions = (options: ActionOptions[]) => {
   const arr = options.map((curr) => {
diff --git a/src/components/RayTable/src/components/TableSetting/index.scss b/src/components/RTable/src/components/TableSetting/index.scss
similarity index 100%
rename from src/components/RayTable/src/components/TableSetting/index.scss
rename to src/components/RTable/src/components/TableSetting/index.scss
diff --git a/src/components/RayTable/src/components/TableSetting/index.tsx b/src/components/RTable/src/components/TableSetting/index.tsx
similarity index 98%
rename from src/components/RayTable/src/components/TableSetting/index.tsx
rename to src/components/RTable/src/components/TableSetting/index.tsx
index 891e08d0..f48e4816 100644
--- a/src/components/RayTable/src/components/TableSetting/index.tsx
+++ b/src/components/RTable/src/components/TableSetting/index.tsx
@@ -19,7 +19,7 @@
 import './index.scss'
 
 import { NCard, NPopover, NEllipsis } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 import VueDraggable from 'vuedraggable'
 
 import { setupSettingOptions } from './hook'
@@ -30,7 +30,7 @@ import type {
   ActionOptions,
   FixedType,
   TableSettingFixedPopoverIcon,
-} from '@/components/RayTable/src/type'
+} from '@/components/RTable/src/type'
 
 const TableSetting = defineComponent({
   name: 'TableSetting',
diff --git a/src/components/RayTable/src/components/TableSize/index.scss b/src/components/RTable/src/components/TableSize/index.scss
similarity index 100%
rename from src/components/RayTable/src/components/TableSize/index.scss
rename to src/components/RTable/src/components/TableSize/index.scss
diff --git a/src/components/RayTable/src/components/TableSize/index.tsx b/src/components/RTable/src/components/TableSize/index.tsx
similarity index 96%
rename from src/components/RayTable/src/components/TableSize/index.tsx
rename to src/components/RTable/src/components/TableSize/index.tsx
index fe992cc3..cef8e91b 100644
--- a/src/components/RayTable/src/components/TableSize/index.tsx
+++ b/src/components/RTable/src/components/TableSize/index.tsx
@@ -12,11 +12,11 @@
 import './index.scss'
 
 import { NPopover, NCard } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 
 import { call } from '@/utils/vue/index'
 
-import type { TableSettingProvider } from '@/components/RayTable/src/type'
+import type { TableSettingProvider } from '@/components/RTable/src/type'
 import type { ComponentSize } from '@/types/modules/component'
 import type { MaybeArray } from '@/types/modules/utils'
 
diff --git a/src/components/RayTable/src/index.scss b/src/components/RTable/src/index.scss
similarity index 100%
rename from src/components/RayTable/src/index.scss
rename to src/components/RTable/src/index.scss
diff --git a/src/components/RayTable/src/index.tsx b/src/components/RTable/src/index.tsx
similarity index 100%
rename from src/components/RayTable/src/index.tsx
rename to src/components/RTable/src/index.tsx
diff --git a/src/components/RayTable/src/props.ts b/src/components/RTable/src/props.ts
similarity index 100%
rename from src/components/RayTable/src/props.ts
rename to src/components/RTable/src/props.ts
diff --git a/src/components/RayTable/src/type.ts b/src/components/RTable/src/type.ts
similarity index 100%
rename from src/components/RayTable/src/type.ts
rename to src/components/RTable/src/type.ts
diff --git a/src/components/RayTransitionComponent/index.vue b/src/components/RTransitionComponent/index.vue
similarity index 100%
rename from src/components/RayTransitionComponent/index.vue
rename to src/components/RTransitionComponent/index.vue
diff --git a/src/dayjs/index.ts b/src/dayjs/index.ts
index 84bb5309..359c56aa 100644
--- a/src/dayjs/index.ts
+++ b/src/dayjs/index.ts
@@ -10,30 +10,9 @@
  */
 
 import dayjs from 'dayjs'
-import { DEFAULT_DAYJS_LOCAL, DAYJS_LOCAL_MAP } from '@/app-config/localConfig'
+import { DEFAULT_DAYJS_LOCAL } from '@/app-config/localConfig'
 import 'dayjs/locale/zh-cn'
 
-import type { DayjsLocal } from './type'
-
 export const setupDayjs = () => {
   dayjs.locale(DEFAULT_DAYJS_LOCAL)
 }
-
-/**
- *
- * dayjs hook
- *
- * 说明:
- *   - locale: 切换 dayjs 语言配置
- */
-export const useDayjs = () => {
-  const locale = (key: DayjsLocal) => {
-    const mapkey = DAYJS_LOCAL_MAP[key]
-
-    mapkey ? dayjs.locale(mapkey) : dayjs.locale(DEFAULT_DAYJS_LOCAL)
-  }
-
-  return {
-    locale,
-  }
-}
diff --git a/src/directives/index.ts b/src/directives/index.ts
index 4e85bdfd..c7a97d17 100644
--- a/src/directives/index.ts
+++ b/src/directives/index.ts
@@ -33,17 +33,20 @@ export const setupDirectives = (app: App<Element>) => {
   // 将所有的包提取出来(./modules/[file-name]/index.ts)
   const directivesModules = combineDirective(directiveRawModules)
   // 提取文件名(./modules/copy/index.ts => copy)
-  const reg = /(?<=modules\/).*(?=\/index\.ts)/
+  const regexExtractDirectiveName = /(?<=modules\/).*(?=\/index\.ts)/
+  // 匹配合法指令名称
+  const regexDirectiveName = /^([^-]+-)*[^-]+$/
 
   forIn(directivesModules, (value, key) => {
-    const dname = key.match(reg)?.[0]
+    const dname = key.match(regexExtractDirectiveName)?.[0]
 
-    if (isValueType<string>(dname, 'String')) {
+    if (
+      isValueType<string>(dname, 'String') &&
+      regexDirectiveName.test(dname)
+    ) {
       app.directive(dname, value?.())
     } else {
-      throw new Error(
-        'directiveName is not string, please check your directive file name',
-      )
+      console.error(`[setupDirectives] ${dname} is not a valid directive name`)
     }
   })
 }
diff --git a/src/directives/modules/debounce/index.ts b/src/directives/modules/debounce/index.ts
index f7bd712a..2dcd14a2 100644
--- a/src/directives/modules/debounce/index.ts
+++ b/src/directives/modules/debounce/index.ts
@@ -17,7 +17,6 @@
 import { debounce } from 'lodash-es'
 import { on, off } from '@use-utils/element'
 
-import type { Directive } from 'vue'
 import type { DebounceBindingOptions } from './type'
 import type { AnyFC } from '@/types/modules/utils'
 import type { DebouncedFunc } from 'lodash-es'
diff --git a/src/directives/modules/disabled/index.ts b/src/directives/modules/disabled/index.ts
index 5bda0374..68a6599a 100644
--- a/src/directives/modules/disabled/index.ts
+++ b/src/directives/modules/disabled/index.ts
@@ -22,7 +22,16 @@ const updateElementDisabledType = (el: HTMLElement, value: boolean) => {
   if (el) {
     const classes = 'ray-template__directive--disabled'
 
-    value ? addClass(el, classes) : removeClass(el, classes)
+    if (value) {
+      el.setAttribute('disabled', 'disabled')
+
+      addClass(el, classes)
+    } else {
+      el.removeAttribute('disabled')
+
+      removeClass(el, classes)
+    }
+
     el?.setAttribute('disabled', value ? 'disabled' : '')
   }
 }
diff --git a/src/directives/modules/throttle/index.ts b/src/directives/modules/throttle/index.ts
index ccf91301..69c5fab6 100644
--- a/src/directives/modules/throttle/index.ts
+++ b/src/directives/modules/throttle/index.ts
@@ -17,7 +17,6 @@
 import { throttle } from 'lodash-es'
 import { on, off } from '@use-utils/element'
 
-import type { Directive } from 'vue'
 import type { ThrottleBindingOptions } from './type'
 import type { AnyFC } from '@/types/modules/utils'
 import type { DebouncedFunc } from 'lodash-es'
diff --git a/src/hooks/variable/index.ts b/src/hooks/variable/index.ts
new file mode 100644
index 00000000..191dd170
--- /dev/null
+++ b/src/hooks/variable/index.ts
@@ -0,0 +1,18 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-09-11
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import {
+  setVariable,
+  getVariable,
+  globalVariableToRefs,
+} from './useGlobalVariable'
+
+export { setVariable, getVariable, globalVariableToRefs }
diff --git a/src/hooks/variable/useGlobalVariable.ts b/src/hooks/variable/useGlobalVariable.ts
new file mode 100644
index 00000000..c110e1ea
--- /dev/null
+++ b/src/hooks/variable/useGlobalVariable.ts
@@ -0,0 +1,40 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-09-11
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * 存放全局临时变量，脱离 pinia 使用的变量
+ * 简单的全局变量，并不需要复杂的控制流程
+ *
+ * 但不建议滥用
+ */
+
+/** 全局响应式变量 */
+const variableState = reactive({
+  globalSpinning: false,
+})
+
+type VariableStateKey = keyof typeof variableState
+
+export function setVariable(
+  key: VariableStateKey,
+  value: (typeof variableState)[VariableStateKey],
+) {
+  variableState[key] = value
+}
+
+export function getVariable(key: VariableStateKey) {
+  return variableState[key] as (typeof variableState)[VariableStateKey]
+}
+
+export function globalVariableToRefs<K extends VariableStateKey>(key: K) {
+  return toRef<typeof variableState, K>(variableState, key)
+}
diff --git a/src/hooks/web/index.ts b/src/hooks/web/index.ts
new file mode 100644
index 00000000..8e86afc1
--- /dev/null
+++ b/src/hooks/web/index.ts
@@ -0,0 +1,16 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-09-11
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { useI18n, t } from './useI18n'
+import { useVueRouter } from '../web/useVueRouter'
+import { useDayjs } from '../web/useDayjs'
+
+export { useI18n, useVueRouter, useDayjs, t }
diff --git a/src/hooks/web/useDayjs.ts b/src/hooks/web/useDayjs.ts
new file mode 100644
index 00000000..e014c776
--- /dev/null
+++ b/src/hooks/web/useDayjs.ts
@@ -0,0 +1,34 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-09-11
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import dayjs from 'dayjs'
+import { DEFAULT_DAYJS_LOCAL, DAYJS_LOCAL_MAP } from '@/app-config/localConfig'
+
+import type { DayjsLocal } from '@/dayjs/type'
+
+/**
+ *
+ * dayjs hook
+ *
+ * 说明:
+ *   - locale: 切换 dayjs 语言配置
+ */
+export const useDayjs = () => {
+  const locale = (key: DayjsLocal) => {
+    const mapkey = DAYJS_LOCAL_MAP[key]
+
+    mapkey ? dayjs.locale(mapkey) : dayjs.locale(DEFAULT_DAYJS_LOCAL)
+  }
+
+  return {
+    locale,
+  }
+}
diff --git a/src/locales/useI18n.ts b/src/hooks/web/useI18n.ts
similarity index 83%
rename from src/locales/useI18n.ts
rename to src/hooks/web/useI18n.ts
index 32da32a6..4e567115 100644
--- a/src/locales/useI18n.ts
+++ b/src/hooks/web/useI18n.ts
@@ -1,4 +1,15 @@
-import { i18n } from './index'
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-09-11
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { i18n } from '@/locales/index'
 
 import type { WritableComputedRef } from 'vue'
 
diff --git a/src/router/helper/useVueRouter.ts b/src/hooks/web/useVueRouter.ts
similarity index 100%
rename from src/router/helper/useVueRouter.ts
rename to src/hooks/web/useVueRouter.ts
diff --git a/src/layout/components/Menu/components/SiderBarLogo/index.tsx b/src/layout/components/Menu/components/SiderBarLogo/index.tsx
index 656a34bd..a26d525d 100644
--- a/src/layout/components/Menu/components/SiderBarLogo/index.tsx
+++ b/src/layout/components/Menu/components/SiderBarLogo/index.tsx
@@ -11,8 +11,8 @@
 
 import './index.scss'
 
-import { NEllipsis } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import { NEllipsis, NPopover } from 'naive-ui'
+import RayIcon from '@/components/RIcon/index'
 
 const SiderBarLogo = defineComponent({
   name: 'SiderBarLogo',
@@ -37,9 +37,14 @@ const SiderBarLogo = defineComponent({
       }
     }
 
+    const TemplateLogo = ({ cursor }: { cursor: string }) => (
+      <RayIcon name={sideBarLogo!.icon as string} size="30" cursor={cursor} />
+    )
+
     return {
       sideBarLogo,
       handleSideBarLogoClick,
+      TemplateLogo,
     }
   },
   render() {
@@ -47,27 +52,32 @@ const SiderBarLogo = defineComponent({
       <div
         class={[
           'ray-menu__logo',
-          this.sideBarLogo?.url ? 'ray-menu__logo-url' : '',
+          this.sideBarLogo?.url ? 'ray-menu__logo-url' : null,
         ]}
         onClick={this.handleSideBarLogoClick.bind(this)}
       >
         {this.sideBarLogo?.icon ? (
-          <RayIcon name={this.sideBarLogo.icon} size="30" />
-        ) : (
-          ''
-        )}
+          this.collapsed ? (
+            <NPopover placement="right">
+              {{
+                trigger: () => <this.TemplateLogo cursor="pointer" />,
+                default: () => this.sideBarLogo?.title,
+              }}
+            </NPopover>
+          ) : (
+            <this.TemplateLogo cursor="pointer" />
+          )
+        ) : null}
         <h1
           class={[
-            !this.collapsed ? 'ray-menu__logo-title--open' : '',
+            !this.collapsed ? 'ray-menu__logo-title--open' : null,
             'ray-menu__logo-title',
           ]}
         >
           <NEllipsis>{this.sideBarLogo?.title}</NEllipsis>
         </h1>
       </div>
-    ) : (
-      ''
-    )
+    ) : null
   },
 })
 
diff --git a/src/layout/components/MenuTag/index.tsx b/src/layout/components/MenuTag/index.tsx
index 6e63f3ae..87794234 100644
--- a/src/layout/components/MenuTag/index.tsx
+++ b/src/layout/components/MenuTag/index.tsx
@@ -26,7 +26,7 @@
 import './index.scss'
 
 import { NScrollbar, NTag, NSpace, NLayoutHeader, NDropdown } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 
 import { useMenu, useSetting } from '@/store'
 import { uuid } from '@/utils/hook'
diff --git a/src/layout/components/SiderBar/components/GlobalSeach/index.tsx b/src/layout/components/SiderBar/components/GlobalSeach/index.tsx
index ad47961e..a27333b0 100644
--- a/src/layout/components/SiderBar/components/GlobalSeach/index.tsx
+++ b/src/layout/components/SiderBar/components/GlobalSeach/index.tsx
@@ -12,7 +12,7 @@
 import './index.scss'
 
 import { NInput, NModal, NResult, NScrollbar, NSpace } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 
 import { on, off, queryElements, addClass, removeClass } from '@/utils/element'
 import { debounce } from 'lodash-es'
diff --git a/src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx b/src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx
index 07b0f8ac..31316c85 100644
--- a/src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx
+++ b/src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx
@@ -10,10 +10,10 @@
  */
 
 import { NSpace, NSwitch, NTooltip } from 'naive-ui'
-import RayIcon from '@/components/RayIcon'
+import RayIcon from '@/components/RIcon'
 
 import { useSetting } from '@/store'
-import { useI18n } from '@/locales/useI18n'
+import { useI18n } from '@/hooks/web/index'
 
 const ThemeSwitch = defineComponent({
   name: 'ThemeSwitch',
diff --git a/src/layout/components/SiderBar/components/SettingDrawer/index.tsx b/src/layout/components/SiderBar/components/SettingDrawer/index.tsx
index 5282c383..725f5b07 100644
--- a/src/layout/components/SiderBar/components/SettingDrawer/index.tsx
+++ b/src/layout/components/SiderBar/components/SettingDrawer/index.tsx
@@ -15,7 +15,7 @@ import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/c
 
 import { APP_THEME } from '@/app-config/designConfig'
 import { useSetting } from '@/store'
-import { useI18n } from '@/locales/useI18n'
+import { useI18n } from '@/hooks/web/index'
 
 import type { PropType } from 'vue'
 import type { Placement } from '@/types/modules/component'
diff --git a/src/layout/components/SiderBar/components/TooltipIcon/index.tsx b/src/layout/components/SiderBar/components/TooltipIcon/index.tsx
index 56770566..c340c5ed 100644
--- a/src/layout/components/SiderBar/components/TooltipIcon/index.tsx
+++ b/src/layout/components/SiderBar/components/TooltipIcon/index.tsx
@@ -12,7 +12,7 @@
 import './index.scss'
 
 import { NTooltip } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 
 import { tooltipProps } from 'naive-ui'
 
diff --git a/src/layout/components/SiderBar/index.tsx b/src/layout/components/SiderBar/index.tsx
index c3f145df..5c1a97f3 100644
--- a/src/layout/components/SiderBar/index.tsx
+++ b/src/layout/components/SiderBar/index.tsx
@@ -20,7 +20,7 @@
 import './index.scss'
 
 import { NLayoutHeader, NSpace, NTooltip, NDropdown } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 import TootipIcon from '@/layout/components/SiderBar/components/TooltipIcon/index'
 import SettingDrawer from './components/SettingDrawer/index'
 import Breadcrumb from './components/Breadcrumb/index'
@@ -31,7 +31,7 @@ import { useSetting } from '@/store'
 import { LOCAL_OPTIONS } from '@/app-config/localConfig'
 import { useAvatarOptions, avatarDropdownClick } from './hook'
 import screenfull from 'screenfull'
-import { useI18n } from '@/locales/useI18n'
+import { useI18n } from '@/hooks/web/index'
 
 import type { IconEventMapOptions, IconEventMap } from './type'
 
diff --git a/src/layout/default/ContentWrapper/index.tsx b/src/layout/default/ContentWrapper/index.tsx
index ee0763a2..d9fa1ef1 100644
--- a/src/layout/default/ContentWrapper/index.tsx
+++ b/src/layout/default/ContentWrapper/index.tsx
@@ -18,7 +18,7 @@
 import './index.scss'
 
 import { NSpin } from 'naive-ui'
-import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue'
+import RTransitionComponent from '@/components/RTransitionComponent/index.vue'
 import AppRequestCancelerProvider from '@/app-components/provider/AppRequestCancelerProvider/index'
 
 import { useSetting } from '@/store'
@@ -66,7 +66,7 @@ const ContentWrapper = defineComponent({
       >
         <AppRequestCancelerProvider />
         {this.reloadRouteSwitch ? (
-          <RayTransitionComponent
+          <RTransitionComponent
             class="content-wrapper"
             transitionPropName={this.contentTransition + '-transform'}
           />
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
index e668a34b..e1cefb38 100644
--- a/src/layout/index.tsx
+++ b/src/layout/index.tsx
@@ -60,9 +60,7 @@ const RLayout = defineComponent({
           <HeaderWrapper ref="layoutSiderBarRef" />
           {this.modelMenuTagSwitch ? (
             <FeatureWrapper ref="layoutMenuTagRef" />
-          ) : (
-            ''
-          )}
+          ) : null}
           <NLayoutContent
             ref="LAYOUT_CONTENT_REF"
             class="r-layout-full__viewer-content"
@@ -73,9 +71,7 @@ const RLayout = defineComponent({
           {this.footerSwitch ? <FooterWrapper ref="layoutFooterRef" /> : ''}
         </NLayoutContent>
       </NLayout>
-    ) : (
-      ''
-    )
+    ) : null
   },
 })
 
diff --git a/src/router/README.md b/src/router/README.md
index 3a00d4b0..e023bff5 100644
--- a/src/router/README.md
+++ b/src/router/README.md
@@ -5,7 +5,7 @@
 > router modules 包中的路由模块会与菜单一一映射，也就是说，路由模块的配置结构会影响菜单的展示。当你有子菜单需要配置时，你需要使用该组件。
 
 ```ts
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'
diff --git a/src/router/routeModules.ts b/src/router/appRouteModules.ts
similarity index 100%
rename from src/router/routeModules.ts
rename to src/router/appRouteModules.ts
diff --git a/src/router/helper/routerCopilot.ts b/src/router/helper/routerCopilot.ts
index 29cc8335..5e2f53dc 100644
--- a/src/router/helper/routerCopilot.ts
+++ b/src/router/helper/routerCopilot.ts
@@ -12,7 +12,7 @@
 import { permissionRouter } from './permission'
 import { SETUP_ROUTER_ACTION, SUPER_ADMIN } from '@/app-config/routerConfig'
 import { useSignin } from '@/store'
-import { useVueRouter } from '@/router/helper/useVueRouter'
+import { useVueRouter } from '@/hooks/web/index'
 import { ROOT_ROUTE } from '@/app-config/appConfig'
 import { setStorage } from '@/utils/cache'
 import { getAppEnvironment } from '@/utils/hook'
diff --git a/src/router/index.ts b/src/router/index.ts
index b2f16a10..545fd69d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,7 +1,7 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import { scrollViewToTop } from '@/router/helper/helper'
 import { vueRouterRegister } from '@/router/helper/routerCopilot'
-import { useVueRouter } from '@/router/helper/useVueRouter'
+import { useVueRouter } from '@/hooks/web/index'
 
 import constantRoutes from './routes'
 
diff --git a/src/router/modules/dashboard.ts b/src/router/modules/dashboard.ts
index bba64493..16f77709 100644
--- a/src/router/modules/dashboard.ts
+++ b/src/router/modules/dashboard.ts
@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'
diff --git a/src/router/modules/demo/axios.ts b/src/router/modules/demo/axios.ts
index df0d3ed9..f92a6ae8 100644
--- a/src/router/modules/demo/axios.ts
+++ b/src/router/modules/demo/axios.ts
@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'
diff --git a/src/router/modules/demo/directive.ts b/src/router/modules/demo/directive.ts
index 2b17d1e6..6051a4bc 100644
--- a/src/router/modules/demo/directive.ts
+++ b/src/router/modules/demo/directive.ts
@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'
diff --git a/src/router/modules/demo/doc.ts b/src/router/modules/demo/doc.ts
index 4ace6670..d3ed1421 100644
--- a/src/router/modules/demo/doc.ts
+++ b/src/router/modules/demo/doc.ts
@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'
diff --git a/src/router/modules/demo/echart.ts b/src/router/modules/demo/echart.ts
index 6f7904a8..d9f85fb8 100644
--- a/src/router/modules/demo/echart.ts
+++ b/src/router/modules/demo/echart.ts
@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'
diff --git a/src/router/modules/demo/iframe.ts b/src/router/modules/demo/iframe.ts
index 37c150cc..0e517b97 100644
--- a/src/router/modules/demo/iframe.ts
+++ b/src/router/modules/demo/iframe.ts
@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'
 
diff --git a/src/router/modules/demo/mock.ts b/src/router/modules/demo/mock.ts
index af4d5762..187ca628 100644
--- a/src/router/modules/demo/mock.ts
+++ b/src/router/modules/demo/mock.ts
@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'
diff --git a/src/router/modules/demo/multi-menu.ts b/src/router/modules/demo/multi-menu.ts
index c942d54f..490ad4f1 100644
--- a/src/router/modules/demo/multi-menu.ts
+++ b/src/router/modules/demo/multi-menu.ts
@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'
diff --git a/src/router/modules/demo/precision.ts b/src/router/modules/demo/precision.ts
index 02857878..abc5dfc9 100644
--- a/src/router/modules/demo/precision.ts
+++ b/src/router/modules/demo/precision.ts
@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'
diff --git a/src/router/modules/demo/qrcode.ts b/src/router/modules/demo/qrcode.ts
index 27add67f..5f6cf651 100644
--- a/src/router/modules/demo/qrcode.ts
+++ b/src/router/modules/demo/qrcode.ts
@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'
diff --git a/src/router/modules/demo/rely.ts b/src/router/modules/demo/rely.ts
index ea8778b8..129468a4 100644
--- a/src/router/modules/demo/rely.ts
+++ b/src/router/modules/demo/rely.ts
@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'
diff --git a/src/router/modules/demo/router-demo.ts b/src/router/modules/demo/router-demo.ts
index d7a41d81..40298ea3 100644
--- a/src/router/modules/demo/router-demo.ts
+++ b/src/router/modules/demo/router-demo.ts
@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'
diff --git a/src/router/modules/demo/scroll-reveal.ts b/src/router/modules/demo/scroll-reveal.ts
index 993ddc18..3a235ec7 100644
--- a/src/router/modules/demo/scroll-reveal.ts
+++ b/src/router/modules/demo/scroll-reveal.ts
@@ -4,7 +4,7 @@
  * 所以暂时隐藏该页面
  */
 
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'
diff --git a/src/router/modules/demo/svg-icons.ts b/src/router/modules/demo/svg-icons.ts
index c7aa971c..97404aab 100644
--- a/src/router/modules/demo/svg-icons.ts
+++ b/src/router/modules/demo/svg-icons.ts
@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'
diff --git a/src/router/modules/demo/table.ts b/src/router/modules/demo/table.ts
index 6ef6e2c4..6a40a2cb 100644
--- a/src/router/modules/demo/table.ts
+++ b/src/router/modules/demo/table.ts
@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'
diff --git a/src/router/modules/error404.ts b/src/router/modules/error404.ts
index 023d1df6..9f3da514 100644
--- a/src/router/modules/error404.ts
+++ b/src/router/modules/error404.ts
@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 08326655..90149746 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -1,5 +1,5 @@
 import Layout from '@/layout/index'
-import { getAppRawRoutes } from './routeModules'
+import { getAppRawRoutes } from './appRouteModules'
 import { ROOT_ROUTE } from '@/app-config/appConfig'
 import { expandRoutes } from '@/router/helper/expandRoutes'
 
diff --git a/src/spin/hook.ts b/src/spin/hook.ts
deleted file mode 100644
index 73d89f25..00000000
--- a/src/spin/hook.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export const spinValue = ref(false)
-
-/**
- *
- * @param bool has spin
- *
- * @remark 使用 spin 全屏加载效果工具函数
- */
-export const setSpin = (bool: boolean) => (spinValue.value = bool)
diff --git a/src/spin/index.tsx b/src/spin/index.tsx
index 93abe313..f9b30c98 100644
--- a/src/spin/index.tsx
+++ b/src/spin/index.tsx
@@ -16,8 +16,8 @@
  * 基于 Naive UI Spin 组件
  *
  * 使用方法
- *   1. import { setSpin } from '@/spin'
- *   2. setSpin(true) | setSpin(false)
+ *   1. import { setVariable } from '@/hooks/variable/index'
+ *   2. setVariable('globalSpinning', true) | setVariable('globalSpinning', false)
  *
  * 仅需按照上述步骤实现全屏加载动画
  *
@@ -29,9 +29,7 @@
 import { NSpin } from 'naive-ui'
 
 import { spinProps } from 'naive-ui'
-import { spinValue } from './hook'
-
-export { setSpin } from './hook'
+import { globalVariableToRefs } from '@/hooks/variable/index'
 
 const GlobalSpin = defineComponent({
   name: 'GlobalSpin',
@@ -42,6 +40,7 @@ const GlobalSpin = defineComponent({
     const overrides = {
       opacitySpinning: '0.3',
     }
+    const spinValue = globalVariableToRefs('globalSpinning')
 
     return {
       spinValue,
diff --git a/src/store/modules/menu/helper.ts b/src/store/modules/menu/helper.ts
index 6d4f11ef..966404bc 100644
--- a/src/store/modules/menu/helper.ts
+++ b/src/store/modules/menu/helper.ts
@@ -12,7 +12,7 @@
 /** 本方法感谢 <https://yunkuangao.me/> 的支持 */
 
 import { APP_MENU_CONFIG, ROOT_ROUTE } from '@/app-config/appConfig'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 import { isValueType } from '@/utils/hook'
 import { getStorage, setStorage } from '@/utils/cache'
 
@@ -164,6 +164,7 @@ export const hasMenuIcon = (option: AppMenuOption) => {
     {
       name: meta!.icon as string,
       size: APP_MENU_CONFIG.MENU_COLLAPSED_ICON_SIZE,
+      cursor: 'pointer',
     },
     {},
   )
diff --git a/src/store/modules/menu/index.ts b/src/store/modules/menu/index.ts
index 4b35bfca..248a42a2 100644
--- a/src/store/modules/menu/index.ts
+++ b/src/store/modules/menu/index.ts
@@ -32,10 +32,10 @@ import {
   hasMenuIcon,
   getCatchMenuKey,
 } from './helper'
-import { useI18n } from '@/locales/useI18n'
-import { getAppRawRoutes } from '@/router/routeModules'
+import { useI18n } from '@/hooks/web/index'
+import { getAppRawRoutes } from '@/router/appRouteModules'
 import { useKeepAlive } from '@/store'
-import { useVueRouter } from '@/router/helper/useVueRouter'
+import { useVueRouter } from '@/hooks/web/index'
 
 import type { AppRouteMeta, AppRouteRecordRaw } from '@/router/type'
 import type {
diff --git a/src/store/modules/setting/index.ts b/src/store/modules/setting/index.ts
index 8f9b5471..750cbaa2 100644
--- a/src/store/modules/setting/index.ts
+++ b/src/store/modules/setting/index.ts
@@ -2,9 +2,9 @@ import { getAppDefaultLanguage } from '@/locales/helper'
 import { setStorage } from '@use-utils/cache'
 import { set } from 'lodash-es'
 import { addClass, removeClass, colorToRgba } from '@/utils/element'
-import { useI18n } from '@/locales/useI18n'
+import { useI18n } from '@/hooks/web/index'
 import { APP_THEME } from '@/app-config/designConfig'
-import { useDayjs } from '@/dayjs/index'
+import { useDayjs } from '@/hooks/web/index'
 
 import type { ConditionalPick } from '@/types/modules/helper'
 import type { SettingState } from '@/store/modules/setting/type'
diff --git a/src/views/dashboard/index.tsx b/src/views/dashboard/index.tsx
index b4c42af4..a426e71e 100644
--- a/src/views/dashboard/index.tsx
+++ b/src/views/dashboard/index.tsx
@@ -9,7 +9,7 @@ import {
   NP,
   NH6,
 } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 import RayLink from '@/app-components/app/RayLink/index'
 
 const Dashboard = defineComponent({
diff --git a/src/views/demo/doc/index.tsx b/src/views/demo/doc/index.tsx
index 027f4aeb..8a591d1a 100644
--- a/src/views/demo/doc/index.tsx
+++ b/src/views/demo/doc/index.tsx
@@ -9,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import RayIframe from '@/components/RayIframe/index'
+import RayIframe from '@/components/RIframe/index'
 
 const RTemplateDoc = defineComponent({
   name: 'RTemplateDoc',
diff --git a/src/views/demo/echart/index.tsx b/src/views/demo/echart/index.tsx
index 12eb9b4c..4a6f0070 100644
--- a/src/views/demo/echart/index.tsx
+++ b/src/views/demo/echart/index.tsx
@@ -1,12 +1,12 @@
 import './index.scss'
 
 import { NCard, NSwitch, NSpace, NP, NH2, NButton } from 'naive-ui'
-import RayChart from '@/components/RayChart/index'
+import RayChart from '@/components/RChart/index'
 
 import dayjs from 'dayjs'
 
 import type { ECharts } from 'echarts/core'
-import type { RayChartInst } from '@/components/RayChart/index'
+import type { RayChartInst } from '@/components/RChart/index'
 
 const Echart = defineComponent({
   name: 'REchart',
diff --git a/src/views/demo/iframe/index.tsx b/src/views/demo/iframe/index.tsx
index 1e81f0d5..08e6c4de 100644
--- a/src/views/demo/iframe/index.tsx
+++ b/src/views/demo/iframe/index.tsx
@@ -18,7 +18,7 @@
  */
 
 import { NCard, NSpace } from 'naive-ui'
-import RayIframe from '@/components/RayIframe/index'
+import RayIframe from '@/components/RIframe/index'
 
 const IframeDemo = defineComponent({
   name: 'IframeDemo',
diff --git a/src/views/demo/mock-demo/index.tsx b/src/views/demo/mock-demo/index.tsx
index dbc65de9..3751b313 100644
--- a/src/views/demo/mock-demo/index.tsx
+++ b/src/views/demo/mock-demo/index.tsx
@@ -10,8 +10,8 @@
  */
 
 import { NSpace, NCard, NButton, NFormItemGi, NInput, NForm } from 'naive-ui'
-import RayTable from '@/components/RayTable/index'
-import RayCollapseGrid from '@/components/RayCollapseGrid/index'
+import RayTable from '@/components/RTable/index'
+import RayCollapseGrid from '@/components/RCollapseGrid/index'
 
 import { useHookPlusRequest } from '@/axios/index'
 import { getPersonList } from '@/axios/api/demo/mock/person'
diff --git a/src/views/demo/qrcode/index.tsx b/src/views/demo/qrcode/index.tsx
index b91d296f..38470e1c 100644
--- a/src/views/demo/qrcode/index.tsx
+++ b/src/views/demo/qrcode/index.tsx
@@ -10,11 +10,11 @@
  */
 
 import { NSpace, NCard, NButton } from 'naive-ui'
-import RayQRcode from '@/components/RayQRCode/index'
+import RayQRcode from '@/components/RQRCode/index'
 
 import LOGO from '@/assets/images/ray.svg'
 
-import type { QRCodeStatus, QRCodeInst } from '@/components/RayQRCode/index'
+import type { QRCodeStatus, QRCodeInst } from '@/components/RQRCode/index'
 
 const RQRCode = defineComponent({
   name: 'RQRCode',
diff --git a/src/views/demo/router-demo/router-demo-home/index.tsx b/src/views/demo/router-demo/router-demo-home/index.tsx
index 9319a692..9b9ef7bb 100644
--- a/src/views/demo/router-demo/router-demo-home/index.tsx
+++ b/src/views/demo/router-demo/router-demo-home/index.tsx
@@ -10,7 +10,7 @@
  */
 
 import { NSpace, NDataTable, NButton } from 'naive-ui'
-import RayTable from '@/components/RayTable/index'
+import RayTable from '@/components/RTable/index'
 
 import type { DataTableColumns } from 'naive-ui'
 
diff --git a/src/views/demo/svg-icons/index.tsx b/src/views/demo/svg-icons/index.tsx
index 32f53652..1c0e8441 100644
--- a/src/views/demo/svg-icons/index.tsx
+++ b/src/views/demo/svg-icons/index.tsx
@@ -12,7 +12,7 @@
 import './index.scss'
 
 import { NSpace, NCard, NPopover } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 
 const PreviewSVGIcons = defineComponent({
   name: 'PreviewSVGIcons',
diff --git a/src/views/demo/table/index.tsx b/src/views/demo/table/index.tsx
index d219f25d..77d4355d 100644
--- a/src/views/demo/table/index.tsx
+++ b/src/views/demo/table/index.tsx
@@ -24,11 +24,11 @@ import {
   NLi,
   NSpace,
 } from 'naive-ui'
-import RayTable from '@/components/RayTable/index'
-import RayCollapseGrid from '@/components/RayCollapseGrid/index'
+import RayTable from '@/components/RTable/index'
+import RayCollapseGrid from '@/components/RCollapseGrid/index'
 
 import type { DataTableColumns } from 'naive-ui'
-import type { RayTableInst } from '@/components/RayTable/index'
+import type { RayTableInst } from '@/components/RTable/index'
 
 type RowData = {
   key: number
diff --git a/src/views/login/components/QRCodeSignin/index.tsx b/src/views/login/components/QRCodeSignin/index.tsx
index d4b042c4..0118f86e 100644
--- a/src/views/login/components/QRCodeSignin/index.tsx
+++ b/src/views/login/components/QRCodeSignin/index.tsx
@@ -11,7 +11,7 @@
 
 import './index.scss'
 
-import RayQRcode from '@/components/RayQRCode/index'
+import RayQRcode from '@/components/RQRCode/index'
 
 import LOGO from '@/assets/images/ray.svg'
 
diff --git a/src/views/login/components/SSOSignin/index.tsx b/src/views/login/components/SSOSignin/index.tsx
index 3eb73f0c..10b1bb01 100644
--- a/src/views/login/components/SSOSignin/index.tsx
+++ b/src/views/login/components/SSOSignin/index.tsx
@@ -19,7 +19,7 @@
 import './index.scss'
 
 import { NSpace, NPopover } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 
 interface SSOSigninOptions {
   icon: string
diff --git a/src/views/login/components/Signin/index.tsx b/src/views/login/components/Signin/index.tsx
index e559086f..504115a1 100644
--- a/src/views/login/components/Signin/index.tsx
+++ b/src/views/login/components/Signin/index.tsx
@@ -1,11 +1,11 @@
 import { NForm, NFormItem, NInput, NButton, NSpace, NDivider } from 'naive-ui'
 
 import { setStorage } from '@/utils/cache'
-import { setSpin } from '@/spin'
 import { useSignin } from '@/store'
-import { useI18n } from '@/locales/useI18n'
+import { useI18n } from '@/hooks/web/index'
 import { APP_CATCH_KEY, ROOT_ROUTE } from '@/app-config/appConfig'
-import { useVueRouter } from '@/router/helper/useVueRouter'
+import { useVueRouter } from '@/hooks/web/index'
+import { setVariable } from '@/hooks/variable/index'
 
 import type { FormInst } from 'naive-ui'
 
@@ -45,13 +45,13 @@ const Signin = defineComponent({
     const handleLogin = () => {
       loginFormRef.value?.validate((valid) => {
         if (!valid) {
-          setSpin(true)
+          setVariable('globalSpinning', true)
 
           signin(signinForm.value)
             .then((res) => {
               if (res.code === 0) {
                 setTimeout(() => {
-                  setSpin(false)
+                  setVariable('globalSpinning', false)
 
                   window.$message.success(`欢迎${signinForm.value.name}登陆~`)
 
diff --git a/src/views/login/index.scss b/src/views/login/index.scss
index de4ea10c..fa0ee0c3 100644
--- a/src/views/login/index.scss
+++ b/src/views/login/index.scss
@@ -2,6 +2,7 @@ $positionX: 24px;
 $positionY: 24px;
 
 .login {
+  width: 100%;
   display: flex;
 
   & .login-wrapper {
diff --git a/src/views/login/index.tsx b/src/views/login/index.tsx
index 12e7418c..41852846 100644
--- a/src/views/login/index.tsx
+++ b/src/views/login/index.tsx
@@ -15,13 +15,13 @@ import Signin from './components/Signin/index'
 import Register from './components/Register/index'
 import QRCodeSignin from './components/QRCodeSignin/index'
 import SSOSignin from './components/SSOSignin/index'
-import RayIcon from '@/components/RayIcon'
+import RayIcon from '@/components/RIcon'
 import RayLink from '@/app-components/app/RayLink/index'
 import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index'
 
 import { useSetting } from '@/store'
 import { LOCAL_OPTIONS } from '@/app-config/localConfig'
-import { useI18n } from '@/locales/useI18n'
+import { useI18n } from '@/hooks/web/index'
 
 const Login = defineComponent({
   name: 'RLogin',
@@ -88,6 +88,7 @@ const Login = defineComponent({
                   customClassName="login-icon"
                   name="language"
                   size="18"
+                  cursor="pointer"
                 />
               </NDropdown>
             </NSpace>
diff --git a/tsconfig.json b/tsconfig.json
index 322df7b6..01b9933f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -34,8 +34,8 @@
   },
   "include": [
     "vite.config.ts",
-    "vite-plugin/index.ts",
-    "vite-plugin/type.ts",
+    "vite-plugins/index.ts",
+    "vite-plugins/type.ts",
     "cfg.ts",
     "package.json",
     "vite-env.d.ts",
diff --git a/unplugin/components.d.ts b/unplugin/components.d.ts
index d4befb0f..5daf3b1d 100644
--- a/unplugin/components.d.ts
+++ b/unplugin/components.d.ts
@@ -10,5 +10,6 @@ declare module 'vue' {
     RayTransitionComponent: typeof import('./../src/components/RayTransitionComponent/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    RTransitionComponent: typeof import('./../src/components/RTransitionComponent/index.vue')['default']
   }
 }
diff --git a/vite-plugin/index.ts b/vite-plugin/index.ts
deleted file mode 100644
index 7cc2406c..00000000
--- a/vite-plugin/index.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import path from 'node:path'
-
-import unpluginViteComponents from 'unplugin-vue-components/vite' // 自动按需导入
-import vueI18nPlugin from '@intlify/unplugin-vue-i18n/vite' // i18n
-import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // `svg icon`
-
-import type { ComponentResolver, TypeImport } from 'unplugin-vue-components'
-import type { BuildOptions } from 'vite'
-import type { ViteSvgIconsPlugin } from 'vite-plugin-svg-icons'
-
-/**
- *
- * @param options `svg icon` 自定义配置
- *
- * 使用 `svg` 作为图标
- */
-export const viteSVGIcon = (options?: ViteSvgIconsPlugin) => {
-  const defaultOptions = {
-    iconDirs: [path.resolve(process.cwd(), 'src/icons')],
-    symbolId: 'icon-[dir]-[name]',
-    inject: 'body-last',
-    customDomId: '__svg__icons__dom__',
-  }
-
-  return createSvgIconsPlugin(Object.assign({}, defaultOptions, options))
-}
-
-/**
- *
- * @param resolvers 按需加载依赖项
- * @param types 按需加载依赖类型
- *
- * 按需加载
- */
-export const viteComponents = async (
-  resolvers: (ComponentResolver | ComponentResolver[])[] = [],
-  types: TypeImport[] = [],
-) =>
-  unpluginViteComponents({
-    dts: './unplugin/components.d.ts',
-    resolvers: [...resolvers],
-    types: [
-      {
-        from: 'vue-router',
-        names: ['RouterLink', 'RouterView'],
-      },
-      ...types,
-    ],
-  })
-
-export const viteVueI18nPlugin = () =>
-  vueI18nPlugin({
-    runtimeOnly: true,
-    compositionOnly: true,
-    forceStringify: true,
-    defaultSFCLang: 'json',
-    include: [path.resolve(__dirname, '../locales/**')],
-  })
-
-/**
- *
- * @param title 浏览器 title 名称
- */
-export const HTMLTitlePlugin = (title: string) => {
-  return {
-    name: 'html-transform',
-    transformIndexHtml: (html: string) => {
-      return html.replace(/<title>(.*?)<\/title>/, `<title>${title}</title>`)
-    },
-  }
-}
-
-/**
- *
- * @param mode 打包环境
- *
- * @remark 打包输出文件配置
- */
-export const buildOptions = (mode: string): BuildOptions => {
-  const outDirMap = {
-    test: 'dist/test-dist',
-    development: 'dist/development-dist',
-    production: 'dist/production-dist',
-    report: 'dist/report-dist',
-  }
-  const dirPath = outDirMap[mode] || 'dist/test-dist'
-
-  if (mode === 'production') {
-    return {
-      outDir: dirPath,
-      sourcemap: false,
-      terserOptions: {
-        compress: {
-          drop_console: true,
-          drop_debugger: true,
-        },
-      },
-    }
-  } else {
-    return {
-      outDir: dirPath,
-      sourcemap: true,
-      terserOptions: {
-        compress: {
-          drop_console: false,
-          drop_debugger: false,
-        },
-      },
-    }
-  }
-}
-
-/**
- *
- * @param options 预处理 css 文件
- * @returns additionalData string
- *
- * @remark 辅助处理需要全局注入的 css 样式文件, 会在构建期间完成注入
- */
-export const mixinCSSPlugin = (options?: string[]) => {
-  const defaultOptions = []
-
-  if (Array.isArray(options)) {
-    defaultOptions.push(...options)
-  }
-
-  const mixisString = defaultOptions.reduce((pre, curr) => {
-    const temp = `@import "${curr}";`
-
-    return (pre += temp)
-  }, '')
-
-  return mixisString as string
-}
diff --git a/vite-plugins/index.ts b/vite-plugins/index.ts
new file mode 100644
index 00000000..63a74c65
--- /dev/null
+++ b/vite-plugins/index.ts
@@ -0,0 +1,35 @@
+/**
+ *
+ * @param title 浏览器 title 名称
+ */
+export const htmlTitlePlugin = (title: string) => {
+  return {
+    name: 'html-transform',
+    transformIndexHtml: (html: string) => {
+      return html.replace(/<title>(.*?)<\/title>/, `<title>${title}</title>`)
+    },
+  }
+}
+
+/**
+ *
+ * @param options 预处理 css 文件
+ * @returns additionalData string
+ *
+ * @remark 辅助处理需要全局注入的 css 样式文件, 会在构建期间完成注入
+ */
+export const mixinCSSPlugin = (options?: string[]) => {
+  const defaultOptions = []
+
+  if (Array.isArray(options)) {
+    defaultOptions.push(...options)
+  }
+
+  const mixisString = defaultOptions.reduce((pre, curr) => {
+    const temp = `@import "${curr}";`
+
+    return (pre += temp)
+  }, '')
+
+  return mixisString as string
+}
diff --git a/vite-plugin/type.ts b/vite-plugins/type.ts
similarity index 100%
rename from vite-plugin/type.ts
rename to vite-plugins/type.ts
diff --git a/vite.config.ts b/vite.config.ts
index 02c8cad3..e5d805f3 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,64 +1,32 @@
 import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-
-import {
-  viteComponents,
-  viteVueI18nPlugin,
-  viteSVGIcon,
-} from './vite-plugin/index'
-import viteVueJSX from '@vitejs/plugin-vue-jsx'
-import viteVeI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
-import viteInspect from 'vite-plugin-inspect'
-import viteSvgLoader from 'vite-svg-loader'
-import vitePluginImp from 'vite-plugin-imp' // 按需打包工具
-import { visualizer } from 'rollup-plugin-visualizer' // 打包体积分析工具
-import viteCompression from 'vite-plugin-compression' // 压缩打包
-import { ViteEjsPlugin as viteEjsPlugin } from 'vite-plugin-ejs'
-import viteAutoImport from 'unplugin-auto-import/vite'
-import viteEslint from 'vite-plugin-eslint'
-import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
-
-import { NaiveUiResolver } from 'unplugin-vue-components/resolvers' // 模板自动导入组件并且按需打包
-import { VueHooksPlusResolver } from '@vue-hooks-plus/resolvers'
 
 import config from './cfg'
 import pkg from './package.json'
-
-const { dependencies, devDependencies, name, version } = pkg
-const {
-  server,
-  buildOptions,
-  alias,
-  title,
-  copyright,
-  sideBarLogo,
-  mixinCSS,
-  appPrimaryColor,
-  preloadingConfig,
-  base,
-} = config
-
-/**
- *
- * 全局注入 `__APP_CFG__` 变量
- *
- * 可以在 `views` 页面使用
- *
- * 使用方法 `const { pkg, layout } = __APP_CFG__`
- *
- * 如果有新的补充, 需要自己手动补充类型 `src/types/cfg.ts AppConfig`
- */
-const __APP_CFG__ = {
-  pkg: { dependencies, devDependencies, name, version },
-  layout: {
-    copyright,
-    sideBarLogo,
-  },
-  appPrimaryColor,
-}
+import vitePlugins from './vite.pliugin.config'
 
 // https://vitejs.dev/config/
 export default defineConfig(async ({ mode }) => {
+  const { dependencies, devDependencies, name, version } = pkg
+  const {
+    server,
+    buildOptions,
+    alias,
+    copyright,
+    sideBarLogo,
+    mixinCSS,
+    appPrimaryColor,
+    base,
+  } = config
+
+  const __APP_CFG__ = {
+    pkg: { dependencies, devDependencies, name, version },
+    layout: {
+      copyright,
+      sideBarLogo,
+    },
+    appPrimaryColor,
+  }
+
   return {
     base: base || '/',
     define: {
@@ -67,113 +35,7 @@ export default defineConfig(async ({ mode }) => {
     resolve: {
       alias: alias,
     },
-    plugins: [
-      vue(),
-      viteVueJSX(),
-      title,
-      viteVeI18nPlugin({}),
-      viteAutoImport({
-        eslintrc: {
-          enabled: true,
-          filepath: './unplugin/.eslintrc-auto-import.json',
-        },
-        include: [
-          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
-          /\.vue$/,
-          /\.vue\?vue/, // .vue
-          /\.md$/, // .md
-        ],
-        dts: './unplugin/auto-imports.d.ts',
-        imports: [
-          'vue',
-          'vue-router',
-          'pinia',
-          '@vueuse/core',
-          'vue-i18n',
-          {
-            'naive-ui': [
-              'useDialog',
-              'useMessage',
-              'useNotification',
-              'useLoadingBar',
-            ],
-          },
-        ],
-        resolvers: [NaiveUiResolver(), VueHooksPlusResolver()],
-      }),
-      await viteComponents([NaiveUiResolver(), VueHooksPlusResolver()]),
-      viteCompression(),
-      viteVueI18nPlugin(),
-      viteSvgLoader({
-        defaultImport: 'url', // 默认以 `componetn` 形式导入 `svg`
-      }),
-      viteSVGIcon(),
-      viteEslint({
-        lintOnStart: true,
-        failOnError: true,
-        failOnWarning: true,
-        fix: true,
-        exclude: ['dist/**', '**/node_modules/**', 'vite-env.d.ts', '*.md'],
-        include: ['src/**/*.{vue,js,jsx,ts,tsx}'],
-        cache: true,
-      }),
-      vitePluginImp({
-        libList: [
-          {
-            libName: 'lodash-es',
-            libDirectory: '',
-            camel2DashComponentName: false,
-          },
-          {
-            libName: '@vueuse',
-            libDirectory: '',
-            camel2DashComponentName: false,
-          },
-          {
-            libName: 'lodash',
-            libDirectory: '',
-            camel2DashComponentName: false,
-          },
-        ],
-      }),
-      {
-        include: [
-          'src/**/*.ts',
-          'src/**/*.tsx',
-          'src/**/*.vue',
-          'src/*.ts',
-          'src/*.tsx',
-          'src/*.vue',
-        ],
-      },
-      visualizer({
-        gzipSize: true, // 搜集 `gzip` 压缩包
-        brotliSize: true, // 搜集 `brotli` 压缩包
-        emitFile: false, // 生成文件在根目录下
-        filename: 'visualizer.html',
-        open: mode === 'report' ? true : false, // 以默认服务器代理打开文件
-      }),
-      viteEjsPlugin({
-        preloadingConfig,
-        appPrimaryColor,
-      }),
-      viteInspect(), // 仅适用于开发模式(检查 `Vite` 插件的中间状态)
-      mockDevServerPlugin({
-        include: ['mock/**/*.mock.ts'],
-        exclude: [
-          '**/node_modules/**',
-          '**/test/**',
-          '**/cypress/**',
-          'src/**',
-          '**/.vscode/**',
-          '**/.git/**',
-          '**/dist/**',
-          'mock/shared/**',
-        ],
-        reload: true,
-        build: true,
-      }),
-    ],
+    plugins: vitePlugins(mode),
     optimizeDeps: {
       include: ['vue', 'vue-router', 'pinia', 'vue-i18n', '@vueuse/core'],
     },
diff --git a/vite.pliugin.config.ts b/vite.pliugin.config.ts
new file mode 100644
index 00000000..764146ba
--- /dev/null
+++ b/vite.pliugin.config.ts
@@ -0,0 +1,165 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-09-15
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import path from 'node:path'
+
+import vue from '@vitejs/plugin-vue'
+import viteVueJSX from '@vitejs/plugin-vue-jsx'
+import viteVeI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
+import viteInspect from 'vite-plugin-inspect'
+import viteSvgLoader from 'vite-svg-loader'
+import vitePluginImp from 'vite-plugin-imp'
+import { visualizer } from 'rollup-plugin-visualizer'
+import viteCompression from 'vite-plugin-compression'
+import { ViteEjsPlugin as viteEjsPlugin } from 'vite-plugin-ejs'
+import viteAutoImport from 'unplugin-auto-import/vite'
+import viteEslint from 'vite-plugin-eslint'
+import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
+import vueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+import unpluginViteComponents from 'unplugin-vue-components/vite'
+
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
+import { VueHooksPlusResolver } from '@vue-hooks-plus/resolvers'
+
+import config from './cfg'
+
+export default function (mode: string) {
+  const { title, appPrimaryColor, preloadingConfig } = config
+
+  return [
+    vue(),
+    viteVueJSX(),
+    title,
+    viteVeI18nPlugin({}),
+    viteAutoImport({
+      eslintrc: {
+        enabled: true,
+        filepath: './unplugin/.eslintrc-auto-import.json',
+      },
+      include: [
+        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
+        /\.vue$/,
+        /\.vue\?vue/, // .vue
+        /\.md$/, // .md
+      ],
+      dts: './unplugin/auto-imports.d.ts',
+      imports: [
+        'vue',
+        'vue-router',
+        'pinia',
+        '@vueuse/core',
+        'vue-i18n',
+        {
+          'naive-ui': [
+            'useDialog',
+            'useMessage',
+            'useNotification',
+            'useLoadingBar',
+          ],
+        },
+      ],
+      resolvers: [NaiveUiResolver(), VueHooksPlusResolver()],
+    }),
+    unpluginViteComponents({
+      dts: './unplugin/components.d.ts',
+      resolvers: [NaiveUiResolver(), VueHooksPlusResolver()],
+      types: [
+        {
+          from: 'vue-router',
+          names: ['RouterLink', 'RouterView'],
+        },
+      ],
+    }),
+    viteCompression(),
+    viteSvgLoader({
+      defaultImport: 'url', // 默认以 url 形式导入 svg
+    }),
+    viteEslint({
+      lintOnStart: true,
+      failOnError: true,
+      failOnWarning: true,
+      fix: true,
+      exclude: ['dist/**', '**/node_modules/**', 'vite-env.d.ts', '*.md'],
+      include: ['src/**/*.{vue,js,jsx,ts,tsx}'],
+      cache: true,
+    }),
+    vitePluginImp({
+      libList: [
+        {
+          libName: 'lodash-es',
+          libDirectory: '',
+          camel2DashComponentName: false,
+        },
+        {
+          libName: '@vueuse',
+          libDirectory: '',
+          camel2DashComponentName: false,
+        },
+        {
+          libName: 'lodash',
+          libDirectory: '',
+          camel2DashComponentName: false,
+        },
+      ],
+    }),
+    {
+      include: [
+        'src/**/*.ts',
+        'src/**/*.tsx',
+        'src/**/*.vue',
+        'src/*.ts',
+        'src/*.tsx',
+        'src/*.vue',
+      ],
+    },
+    visualizer({
+      gzipSize: true, // 搜集 `gzip` 压缩包
+      brotliSize: true, // 搜集 `brotli` 压缩包
+      emitFile: false, // 生成文件在根目录下
+      filename: 'visualizer.html',
+      open: mode === 'report' ? true : false, // 以默认服务器代理打开文件
+    }),
+    viteEjsPlugin({
+      preloadingConfig,
+      appPrimaryColor,
+    }),
+    viteInspect(), // 仅适用于开发模式(检查 `Vite` 插件的中间状态)
+    mockDevServerPlugin({
+      include: ['mock/**/*.mock.ts'],
+      exclude: [
+        '**/node_modules/**',
+        '**/test/**',
+        '**/cypress/**',
+        'src/**',
+        '**/.vscode/**',
+        '**/.git/**',
+        '**/dist/**',
+        'mock/shared/**',
+      ],
+      reload: true,
+      build: true,
+    }),
+    vueI18nPlugin({
+      runtimeOnly: true,
+      compositionOnly: true,
+      forceStringify: true,
+      defaultSFCLang: 'json',
+      include: [path.resolve(__dirname, '../locales/**')],
+    }),
+    createSvgIconsPlugin({
+      iconDirs: [path.resolve(process.cwd(), 'src/icons')],
+      symbolId: 'icon-[dir]-[name]',
+      inject: 'body-last',
+      customDomId: '__svg__icons__dom__',
+    }),
+  ]
+}

From d2773d62bc24d002412636f5b7e2f80a8f5c3189 Mon Sep 17 00:00:00 2001
From: XiaoDaiGua-Ray <443547225@qq.com>
Date: Fri, 15 Sep 2023 23:57:39 +0800
Subject: [PATCH 13/19] v4.2.0

---
 .eslintignore | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.eslintignore b/.eslintignore
index 989633d8..74e0c783 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -13,6 +13,6 @@ visualizer.html
 .env.*
 src/locales/lang
 .depcheckrc
-src/components/RayChart/theme
+src/components/RChart/theme
 *.md
 src/icons/*.svg
\ No newline at end of file

From 405e62c762a6a2c8312c880c8f67732ea52c717d Mon Sep 17 00:00:00 2001
From: XiaoDaiGua-Ray <443547225@qq.com>
Date: Fri, 15 Sep 2023 23:59:28 +0800
Subject: [PATCH 14/19] v4.2.0

---
 package.json             | 2 +-
 unplugin/components.d.ts | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 20f7cd91..5a243e6e 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "4.1.9",
+  "version": "4.2.0",
   "type": "module",
   "engines": {
     "node": ">=16.0.0",
diff --git a/unplugin/components.d.ts b/unplugin/components.d.ts
index 5daf3b1d..f2d45d15 100644
--- a/unplugin/components.d.ts
+++ b/unplugin/components.d.ts
@@ -7,7 +7,6 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    RayTransitionComponent: typeof import('./../src/components/RayTransitionComponent/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     RTransitionComponent: typeof import('./../src/components/RTransitionComponent/index.vue')['default']

From 4d4d5451dc509eea063a54958215455431abb10e Mon Sep 17 00:00:00 2001
From: XiaoDaiGua-Ray <443547225@qq.com>
Date: Sat, 16 Sep 2023 00:03:05 +0800
Subject: [PATCH 15/19] v4.2.0

---
 src/components/RChart/helper.ts |  4 ++--
 src/components/RChart/index.tsx | 10 ++++------
 src/views/demo/echart/index.tsx | 10 +++++-----
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/RChart/helper.ts b/src/components/RChart/helper.ts
index 9a6589f3..8b012084 100644
--- a/src/components/RChart/helper.ts
+++ b/src/components/RChart/helper.ts
@@ -26,12 +26,12 @@ import type {
  * 1. 配置、选择主题
  * 2. 点击下载主题
  * 3. 选择 json 类型，然后复制
- * 4. 在 @/components/RayChart/theme 包中创建对应的 json 文件，文件名为主题名称
+ * 4. 在 @/components/RChart/theme 包中创建对应的 json 文件，文件名为主题名称
  */
 export const setupChartTheme = () => {
   // 获取所有主题
   const themeRawModules: Record<string, ChartThemeRawModules> =
-    import.meta.glob('@/components/RayChart/theme/**/*.json', {
+    import.meta.glob('@/components/RChart/theme/**/*.json', {
       eager: true,
     })
   const regx = /\/([^/]+)\.json$/
diff --git a/src/components/RChart/index.tsx b/src/components/RChart/index.tsx
index 9099a691..50fbd7de 100644
--- a/src/components/RChart/index.tsx
+++ b/src/components/RChart/index.tsx
@@ -66,8 +66,8 @@ import type { ECharts, EChartsCoreOption, SetOptionOpts } from 'echarts/core'
 export type EChartsExtensionInstallRegisters = typeof CanvasRenderer
 export type { RayChartInst } from './type'
 
-const RayChart = defineComponent({
-  name: 'RayChart',
+export default defineComponent({
+  name: 'RChart',
   props: {
     width: {
       /**
@@ -369,7 +369,7 @@ const RayChart = defineComponent({
           call(onError)
         }
 
-        console.error('RayChart render error: ', e)
+        console.error('RChart render error: ', e)
       }
     }
 
@@ -413,7 +413,7 @@ const RayChart = defineComponent({
       // 避免重复渲染
       if (echartInstance?.getDom()) {
         console.warn(
-          'RayChart mount: There is a chart instance already initialized on the dom. Execution was interrupted',
+          'RChart mount: There is a chart instance already initialized on the dom. Execution was interrupted',
         )
 
         return
@@ -555,5 +555,3 @@ const RayChart = defineComponent({
     )
   },
 })
-
-export default RayChart
diff --git a/src/views/demo/echart/index.tsx b/src/views/demo/echart/index.tsx
index 4a6f0070..9e157a28 100644
--- a/src/views/demo/echart/index.tsx
+++ b/src/views/demo/echart/index.tsx
@@ -1,7 +1,7 @@
 import './index.scss'
 
 import { NCard, NSwitch, NSpace, NP, NH2, NButton } from 'naive-ui'
-import RayChart from '@/components/RChart/index'
+import RChart from '@/components/RChart/index'
 
 import dayjs from 'dayjs'
 
@@ -270,7 +270,7 @@ const Echart = defineComponent({
           </NButton>
         </NSpace>
         <div class="chart--container">
-          <RayChart
+          <RChart
             ref="baseChartRef"
             autoChangeTheme
             options={this.baseLineOptions}
@@ -279,7 +279,7 @@ const Echart = defineComponent({
         </div>
         <NH2>不跟随主题切换的暗色主题可视化图</NH2>
         <div class="chart--container">
-          <RayChart
+          <RChart
             autoChangeTheme={false}
             theme="dark"
             options={this.baseOptions}
@@ -297,7 +297,7 @@ const Echart = defineComponent({
           }}
         </NSwitch>
         <div class="chart--container">
-          <RayChart loading={this.loading} options={this.baseOptions} />
+          <RChart loading={this.loading} options={this.baseOptions} />
         </div>
         <NH2>贴画可视化图</NH2>
         <NSwitch
@@ -311,7 +311,7 @@ const Echart = defineComponent({
           }}
         </NSwitch>
         <div class="chart--container">
-          <RayChart options={this.baseOptions} showAria={this.chartAria} />
+          <RChart options={this.baseOptions} showAria={this.chartAria} />
         </div>
       </div>
     )

From 4960eb8175b596d9380973b74803c071d4c62611 Mon Sep 17 00:00:00 2001
From: XiaoDaiGua-Ray <443547225@qq.com>
Date: Fri, 22 Sep 2023 21:50:24 +0800
Subject: [PATCH 16/19] =?UTF-8?q?v4.2.1=E5=8F=91=E5=B8=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                | 13 +++++++++++
 cfg.ts                                      |  2 +-
 package.json                                |  3 ++-
 src/app-components/app/RayLink/index.tsx    |  8 +++----
 src/components/RQRCode/src/index.tsx        |  5 ++++-
 src/directives/index.ts                     |  6 +-----
 src/directives/modules/copy/index.ts        |  4 ++--
 src/directives/modules/debounce/index.ts    |  2 +-
 src/directives/modules/debounce/type.ts     |  6 +++---
 src/directives/modules/throttle/index.ts    |  2 +-
 src/directives/modules/throttle/type.ts     |  6 +++---
 src/directives/type.ts                      |  3 +++
 src/layout/default/ContentWrapper/index.tsx |  4 +---
 src/store/modules/menu/index.ts             |  3 ++-
 src/store/modules/signin/index.ts           |  2 +-
 src/styles/base.scss                        |  1 +
 src/utils/hook.ts                           |  4 ++--
 src/views/demo/directive/index.tsx          |  4 ++++
 vite.pliugin.config.ts                      | 24 ++++++++++++++++++++-
 19 files changed, 72 insertions(+), 30 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b292e9b5..988b6a33 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,18 @@
 # CHANGE LOG
 
+## 4.2.1
+
+经过综合考虑，还是给模板增加 `cdn` 的配置。基于 `vite-plugin-cdn2` 插件实现。
+
+### Feats
+
+- 指令相关
+  - `v-copy` 指令将使用 `String` 强制转换传入的值
+  - 统一暴露节流、防抖指令的配置项类型 `import type { DebounceBindingOptions, ThrottleBindingOptions } from '@/directives/type'`
+  - 现在 `v-disabled` 指令生效时会降低一点元素的亮度
+- `changeMenuModelValue` 方法添加节流锁，避免重复刷新 url 导致的一些问题
+- 新增 `cdn`，缩减构建体积。如果不需要该配置，搜索 `viteCDNPlugin` 注释即可
+
 ## 4.2.0
 
 针对分包，做了全局的重新设计、调整。让包的名称更加语义化；最重要的是，重新抽离了一些全局可能常用的方法，例如：useI18n、useDayjs 等，在以前这些方法存放于对应的包中，其实这样很不合理，所以现在统一存放于 `src/hooks` 包中。并且该包以后统一存放 `hooks` 方法，并不是 `utils` 方法，做了一个本质的区分，所以 `xxxCopilot.ts` 文件中的方法并不会移动，维持存放在原有的模块下。
diff --git a/cfg.ts b/cfg.ts
index 83526643..abe2b43f 100644
--- a/cfg.ts
+++ b/cfg.ts
@@ -47,7 +47,7 @@ import type { BuildOptions } from 'vite'
 
 const config: AppConfigExport = {
   /** 公共基础路径配置, 如果为空则会默认以 '/' 填充 */
-  base: '/ray-template/',
+  // base: '/ray-template/',
   /** 配置首屏加载信息 */
   preloadingConfig: PRE_LOADING_CONFIG,
   /** 默认主题色(不可省略, 必填), 也用于 ejs 注入 */
diff --git a/package.json b/package.json
index 5a243e6e..f8ee6042 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,6 @@
     "pinia": "^2.1.4",
     "pinia-plugin-persistedstate": "^3.1.0",
     "print-js": "^1.6.0",
-    "sass": "^1.54.3",
     "screenfull": "^6.0.2",
     "vue": "^3.3.4",
     "vue-hooks-plus": "1.8.2",
@@ -81,11 +80,13 @@
     "postcss-px-to-viewport-8-plugin": "1.2.2",
     "prettier": "^2.7.1",
     "rollup-plugin-visualizer": "^5.8.3",
+    "sass": "1.54.3",
     "svg-sprite-loader": "^6.0.11",
     "typescript": "^5.0.2",
     "unplugin-auto-import": "^0.15.0",
     "unplugin-vue-components": "^0.25.1",
     "vite": "^4.4.9",
+    "vite-plugin-cdn2": "0.12.4",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-ejs": "^1.6.4",
     "vite-plugin-eslint": "1.8.1",
diff --git a/src/app-components/app/RayLink/index.tsx b/src/app-components/app/RayLink/index.tsx
index 67459166..fe7c62eb 100644
--- a/src/app-components/app/RayLink/index.tsx
+++ b/src/app-components/app/RayLink/index.tsx
@@ -27,25 +27,25 @@ const RayLink = defineComponent({
         key: 'ray-js-note',
         src: 'https://note.youdao.com/s/ObWEe2BB',
         tooltip: 'Ray的前端学习笔记',
-        icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.jpeg',
+        icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.navigator.png',
       },
       {
         key: 'ray-js-cover',
         src: 'https://note.youdao.com/s/IC8xKPdB',
         tooltip: 'Ray的面试题总结',
-        icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.jpeg',
+        icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.navigator.png',
       },
       {
         key: 'ray-template-doc',
         src: 'https://xiaodaigua-ray.github.io/ray-template-doc/',
         tooltip: 'Ray Template Doc',
-        icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.jpeg',
+        icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.navigator.png',
       },
       {
         key: 'ray-template-doc-out',
         src: 'https://ray-template.yunkuangao.com/',
         tooltip: 'Ray Template Doc (国内地址)',
-        icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.jpeg',
+        icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.navigator.png',
       },
     ]
 
diff --git a/src/components/RQRCode/src/index.tsx b/src/components/RQRCode/src/index.tsx
index fcaad2dc..ce3d3245 100644
--- a/src/components/RQRCode/src/index.tsx
+++ b/src/components/RQRCode/src/index.tsx
@@ -114,7 +114,10 @@ export default defineComponent({
 
     const downloadQRCode = (fileName?: string) => {
       if (qrcodeURL.value && isValueType<string>(qrcodeURL.value, 'String')) {
-        downloadBase64File(qrcodeURL.value, fileName)
+        downloadBase64File(
+          qrcodeURL.value,
+          fileName || new Date().getTime() + '.png',
+        )
       }
     }
 
diff --git a/src/directives/index.ts b/src/directives/index.ts
index c7a97d17..6fc8e1ba 100644
--- a/src/directives/index.ts
+++ b/src/directives/index.ts
@@ -11,7 +11,6 @@
 
 import { combineDirective } from './helper/combine'
 import { forIn } from 'lodash-es'
-import { isValueType } from '@/utils/hook'
 
 import type { App } from 'vue'
 import type { DirectiveModules } from '@/directives/type'
@@ -40,10 +39,7 @@ export const setupDirectives = (app: App<Element>) => {
   forIn(directivesModules, (value, key) => {
     const dname = key.match(regexExtractDirectiveName)?.[0]
 
-    if (
-      isValueType<string>(dname, 'String') &&
-      regexDirectiveName.test(dname)
-    ) {
+    if (typeof dname === 'string' && regexDirectiveName.test(dname)) {
       app.directive(dname, value?.())
     } else {
       console.error(`[setupDirectives] ${dname} is not a valid directive name`)
diff --git a/src/directives/modules/copy/index.ts b/src/directives/modules/copy/index.ts
index c089ad65..ce2e52b0 100644
--- a/src/directives/modules/copy/index.ts
+++ b/src/directives/modules/copy/index.ts
@@ -23,7 +23,7 @@ const copyDirective: CustomDirectiveFC<CopyElement, string> = () => {
   return {
     mounted: (el, { value }) => {
       const clipboard = new ClipboardJS(el, {
-        text: () => value,
+        text: () => String(value),
       })
 
       clipboard.on('success', () => {
@@ -40,7 +40,7 @@ const copyDirective: CustomDirectiveFC<CopyElement, string> = () => {
         el.$$clipboard?.destroy()
 
         el.$$clipboard = new ClipboardJS(el, {
-          text: () => value,
+          text: () => String(value),
         })
       }
     },
diff --git a/src/directives/modules/debounce/index.ts b/src/directives/modules/debounce/index.ts
index 2dcd14a2..144fc9d6 100644
--- a/src/directives/modules/debounce/index.ts
+++ b/src/directives/modules/debounce/index.ts
@@ -33,7 +33,7 @@ const debounceDirective: CustomDirectiveFC<
       const { func, trigger = 'click', wait = 500, options } = value
 
       if (typeof func !== 'function') {
-        throw new Error('debounce directive value must be a function')
+        throw new TypeError('debounce directive value must be a function')
       }
 
       debounceFunction = debounce(func, wait, Object.assign({}, options))
diff --git a/src/directives/modules/debounce/type.ts b/src/directives/modules/debounce/type.ts
index ea46a569..40a214c6 100644
--- a/src/directives/modules/debounce/type.ts
+++ b/src/directives/modules/debounce/type.ts
@@ -3,7 +3,7 @@ import type { AnyFC } from '@/types/modules/utils'
 
 export interface DebounceBindingOptions {
   func: AnyFC
-  trigger: string
-  wait: number
-  options: DebounceSettings
+  trigger?: string
+  wait?: number
+  options?: DebounceSettings
 }
diff --git a/src/directives/modules/throttle/index.ts b/src/directives/modules/throttle/index.ts
index 69c5fab6..6f58d124 100644
--- a/src/directives/modules/throttle/index.ts
+++ b/src/directives/modules/throttle/index.ts
@@ -33,7 +33,7 @@ const throttleDirective: CustomDirectiveFC<
       const { func, trigger = 'click', wait = 500, options } = value
 
       if (typeof func !== 'function') {
-        throw new Error('throttle directive value must be a function')
+        throw new TypeError('throttle directive value must be a function')
       }
 
       throttleFunction = throttle(func, wait, Object.assign({}, options))
diff --git a/src/directives/modules/throttle/type.ts b/src/directives/modules/throttle/type.ts
index 74883475..77487d0d 100644
--- a/src/directives/modules/throttle/type.ts
+++ b/src/directives/modules/throttle/type.ts
@@ -3,7 +3,7 @@ import type { AnyFC } from '@/types/modules/utils'
 
 export interface ThrottleBindingOptions {
   func: AnyFC
-  trigger: string
-  wait: number
-  options: ThrottleSettings
+  trigger?: string
+  wait?: number
+  options?: ThrottleSettings
 }
diff --git a/src/directives/type.ts b/src/directives/type.ts
index 1bc15324..1cfa0563 100644
--- a/src/directives/type.ts
+++ b/src/directives/type.ts
@@ -1,6 +1,9 @@
 import type { Directive } from 'vue'
 import type { App } from 'vue'
 
+export type { DebounceBindingOptions } from './modules/debounce/type'
+export type { ThrottleBindingOptions } from './modules/throttle/type'
+
 export type CustomDirectiveFC<T, K> = () => Directive<T, K>
 
 export interface DirectiveModules extends Object {
diff --git a/src/layout/default/ContentWrapper/index.tsx b/src/layout/default/ContentWrapper/index.tsx
index d9fa1ef1..b245b82b 100644
--- a/src/layout/default/ContentWrapper/index.tsx
+++ b/src/layout/default/ContentWrapper/index.tsx
@@ -70,9 +70,7 @@ const ContentWrapper = defineComponent({
             class="content-wrapper"
             transitionPropName={this.contentTransition + '-transform'}
           />
-        ) : (
-          ''
-        )}
+        ) : null}
       </NSpin>
     )
   },
diff --git a/src/store/modules/menu/index.ts b/src/store/modules/menu/index.ts
index 248a42a2..62478eeb 100644
--- a/src/store/modules/menu/index.ts
+++ b/src/store/modules/menu/index.ts
@@ -36,6 +36,7 @@ import { useI18n } from '@/hooks/web/index'
 import { getAppRawRoutes } from '@/router/appRouteModules'
 import { useKeepAlive } from '@/store'
 import { useVueRouter } from '@/hooks/web/index'
+import { throttle } from 'lodash-es'
 
 import type { AppRouteMeta, AppRouteRecordRaw } from '@/router/type'
 import type {
@@ -354,7 +355,7 @@ export const useMenu = defineStore(
 
     return {
       ...toRefs(menuState),
-      changeMenuModelValue,
+      changeMenuModelValue: throttle(changeMenuModelValue, 500),
       setupAppMenu,
       collapsedMenu,
       spliceMenTagOptions,
diff --git a/src/store/modules/signin/index.ts b/src/store/modules/signin/index.ts
index 134646b9..2a7bbedd 100644
--- a/src/store/modules/signin/index.ts
+++ b/src/store/modules/signin/index.ts
@@ -54,7 +54,7 @@ export const useSignin = defineStore(
             role: 'admin',
             name: signinForm.name,
             avatar:
-              'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.jpeg',
+              'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.navigator.png',
           }
 
           resolve({
diff --git a/src/styles/base.scss b/src/styles/base.scss
index 623162c6..87788813 100644
--- a/src/styles/base.scss
+++ b/src/styles/base.scss
@@ -95,4 +95,5 @@ body .ray-template__directive--disabled {
   opacity: 0.3 !important;
   pointer-events: none !important;
   cursor: not-allowed !important;
+  filter: brightness(0.88);
 }
diff --git a/src/utils/hook.ts b/src/utils/hook.ts
index 00d3b11a..f330c5ef 100644
--- a/src/utils/hook.ts
+++ b/src/utils/hook.ts
@@ -40,11 +40,11 @@ export const arrayBufferToBase64Image = (data: ArrayBuffer): string | null => {
  *
  * @remark 下载 base64 文件
  */
-export const downloadBase64File = (base64: string, fileName?: string) => {
+export const downloadBase64File = (base64: string, fileName: string) => {
   const link = document.createElement('a')
 
   link.href = base64
-  link.download = fileName || new Date().getTime() + '.png'
+  link.download = fileName
 
   link.click()
 }
diff --git a/src/views/demo/directive/index.tsx b/src/views/demo/directive/index.tsx
index 620bfc03..6ac7460a 100644
--- a/src/views/demo/directive/index.tsx
+++ b/src/views/demo/directive/index.tsx
@@ -21,6 +21,10 @@ import {
 } from 'naive-ui'
 
 import type { ConditionalPick } from '@/types/modules/helper'
+import type {
+  DebounceBindingOptions,
+  ThrottleBindingOptions,
+} from '@/directives/type'
 
 const RDirective = defineComponent({
   name: 'RDirective',
diff --git a/vite.pliugin.config.ts b/vite.pliugin.config.ts
index 764146ba..88ba02b3 100644
--- a/vite.pliugin.config.ts
+++ b/vite.pliugin.config.ts
@@ -26,13 +26,16 @@ import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
 import vueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import unpluginViteComponents from 'unplugin-vue-components/vite'
+import { cdn as viteCDNPlugin } from 'vite-plugin-cdn2'
 
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
 import { VueHooksPlusResolver } from '@vue-hooks-plus/resolvers'
 
 import config from './cfg'
 
-export default function (mode: string) {
+import type { PluginOption } from 'vite'
+
+export default function (mode: string): PluginOption[] {
   const { title, appPrimaryColor, preloadingConfig } = config
 
   return [
@@ -161,5 +164,24 @@ export default function (mode: string) {
       inject: 'body-last',
       customDomId: '__svg__icons__dom__',
     }),
+    viteCDNPlugin({
+      modules: [
+        'vue',
+        'vue-demi',
+        'pinia',
+        'naive-ui',
+        'vue-router',
+        'vue-i18n',
+        'dayjs',
+        'echarts',
+        'vuedraggable',
+        'xlsx',
+        'axios',
+        'screenfull',
+        'print-js',
+        'clipboard',
+        'lodash-es',
+      ],
+    }),
   ]
 }

From 7a96b5854198c9d0f914a08b67d25cad605482c6 Mon Sep 17 00:00:00 2001
From: XiaoDaiGua-Ray <443547225@qq.com>
Date: Fri, 22 Sep 2023 21:50:55 +0800
Subject: [PATCH 17/19] 4.2.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f8ee6042..643bd8be 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": false,
-  "version": "4.2.0",
+  "version": "4.2.1",
   "type": "module",
   "engines": {
     "node": ">=16.0.0",

From 5e0c85c7f58124c792b6fab7d4e2292f35eacd2e Mon Sep 17 00:00:00 2001
From: XiaoDaiGua-Ray <443547225@qq.com>
Date: Fri, 22 Sep 2023 22:20:19 +0800
Subject: [PATCH 18/19] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DbaseURL?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cfg.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cfg.ts b/cfg.ts
index abe2b43f..83526643 100644
--- a/cfg.ts
+++ b/cfg.ts
@@ -47,7 +47,7 @@ import type { BuildOptions } from 'vite'
 
 const config: AppConfigExport = {
   /** 公共基础路径配置, 如果为空则会默认以 '/' 填充 */
-  // base: '/ray-template/',
+  base: '/ray-template/',
   /** 配置首屏加载信息 */
   preloadingConfig: PRE_LOADING_CONFIG,
   /** 默认主题色(不可省略, 必填), 也用于 ejs 注入 */

From 353bc7d809033f95c1e4db183e7f823c6efc1af2 Mon Sep 17 00:00:00 2001
From: XiaoDaiGua-Ray <443547225@qq.com>
Date: Mon, 25 Sep 2023 16:13:28 +0800
Subject: [PATCH 19/19] readme: update README.md and add english README.md

---
 README-US.md | 121 +++++++++++++++++++++++++++++++++++++++++++++++++++
 README.md    |   9 +++-
 2 files changed, 129 insertions(+), 1 deletion(-)
 create mode 100644 README-US.md

diff --git a/README-US.md b/README-US.md
new file mode 100644
index 00000000..997c5a71
--- /dev/null
+++ b/README-US.md
@@ -0,0 +1,121 @@
+<div align="center">
+ <a href="https://github.com/XiaoDaiGua-Ray/ray-template"> <img alt="Ray Template" width="200" height="200" src="https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:alist/ray/ray.svg?sign=ZklU9Bh5b6oKp1X0LOhGwkx4g5mW4wk_w9Jt5zlZ5EQ=:0"> </a> <br> <br>
+ <a href="https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/LICENSE"><img src="https://img.shields.io/github/license/XiaoDaiGua-Ray/ray-template" alt="LICENSE"></a>
+</div>
+
+<div align="center">
+
+# Ray Template
+
+A middle and backend template based on vite4.x & ts(x) & pinia & vue3.x
+
+</div>
+
+## ✨ Feature
+
+- **Latest Technology Stack**：Developed using front-end cutting-edge technologies such as vue3.x/vite4.x/pinia
+- **TypeScript**：The language for application-level JavaScript
+- **App Theme**：Configurable themes
+- **Globalization**：Built-in complete internationalization solution
+- **Mock Data**：Built-in Mock data scheme
+- **Permissions**：Built-in complete dynamic routing permission generation solution
+- **Components**：Secondary encapsulation of multiple commonly used components
+- **Axios Request**：Secondary encapsulation of the axios library, supporting functions such as cancellation, anti-shake, automatic repeat cancellation, etc.
+- **Page Cache**：Arbitrarily deep page cache
+- **SVG**：Built-in svg icon solution
+- **Standalone Data Methods Views**：Decoupled management of data, methods, and views allows for secondary development with confidence
+
+## 🪄 Preview
+
+- [Click to preview](https://xiaodaigua-ray.github.io/ray-template/#/)
+- [Click to preview(Acceleration address)](https://ray-template.yunkuangao.com/#/)
+
+## 🦾 Document
+
+- [Document](https://xiaodaigua-ray.github.io/ray-template-doc/)
+- [Document(Acceleration address)](https://ray-template.yunkuangao.com/ray-template-doc/)
+
+## 🔋 Change Log
+
+- [Change Log](https://github.com/XiaoDaiGua-Ray/xiaodaigua-ray.github.io/blob/main/CHANGELOG.md)
+
+## 🪴 Prepare
+
+- [Node](http://nodejs.org/) and [git](https://git-scm.com/) - Project development environment
+- [Vite](https://vitejs.dev/) - Familiar with vite features
+- [Vue3](https://v3.vuejs.org/) - Familiar with Vue3.x basic syntax
+- [TypeScript](https://www.typescriptlang.org/) - Familiar with TypeScript basic syntax
+- [Es6+](http://es6.ruanyifeng.com/) - Familiar with es6 basic syntax
+- [Vue-Router-Next](https://next.router.vuejs.org/) - Familiar with the basic use of vue-router4.x
+- [Naive-UI](https://www.naiveui.com) - UI basic usage
+- [Mock.js](https://github.com/nuysoft/Mock) - Mockjs basic syntax
+- [Pinia](https://pinia.vuejs.org/zh/introduction.html) - State manager pinia uses
+- [TSX](https://github.com/vuejs/babel-plugin-jsx/blob/main/packages/babel-plugin-jsx/README-zh_CN.md) - TSX basic syntax
+
+## 📦 Setup
+
+### Get Project
+
+```sh
+# github
+git clone https://github.com/XiaoDaiGua-Ray/ray-template.git
+
+# If your download speed is very slow, you can switch to the proxy address below
+git clone https://gh.yka.moe/https://github.com/XiaoDaiGua-Ray/ray-template.git
+```
+
+### Pull dependencies
+
+```sh
+pnpm i
+```
+
+### Startup project
+
+```sh
+pnpm dev
+```
+
+### Project packaging
+
+```sh
+pnpm build
+```
+
+### Preview project
+
+```sh
+pnpm preview
+```
+
+### Volumetric analysis
+
+```sh
+pnpm report
+```
+
+### Develop
+
+Introduction and ease of use are the core ideas of this template. So you can safely delete all files under `views/demo` and `router/moduels/demo`, and you will have a clean project.
+
+## 🪴 Project Activities
+
+![Alt](https://repobeats.axiom.co/api/embed/fab6071297ab281913a42f07a2779b488cfd62b8.svg 'Repobeats analytics image')
+
+### Contributor
+
+Thanks for all their contributions 🐝!
+
+<a href="https://github.com/XiaoDaiGua-Ray/ray-template/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=XiaoDaiGua-Ray/ray-template" />
+</a>
+
+## Browser Support
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
+| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+|                                                                                             not support                                                                                              |                                                                                            last 2 versions                                                                                             |                                                                                                  last 2 versions                                                                                                  |                                                                                                last 2 versions                                                                                                |                                                                                                last 2 versions                                                                                                |
+
+## 📄 License
+
+[MIT License](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/LICENSE) © 2022-PRESENT [Ray](https://github.com/XiaoDaiGua-Ray)
diff --git a/README.md b/README.md
index a444a38d..c0702f8f 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,8 @@
 
 # Ray Template
 
+简体中文 | [English](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/README-US.md)
+
 一个基于 vite4.x & ts(x) & pinia & vue3.x 的中后台模板
 
 </div>
@@ -23,6 +25,7 @@
 - **Axios 请求**：二次封装 axios 库，支持：取消、防抖、自动重复取消等功能
 - **缓存**：任意深度页面缓存
 - **SVG**：内置 svg icon 解决方案
+- **独立的 Data Methods Views**：解耦管理的数据、方法、视图，放心二次开发
 
 ## 🪄 预览地址
 
@@ -66,7 +69,7 @@ git clone https://gh.yka.moe/https://github.com/XiaoDaiGua-Ray/ray-template.git
 ### 拉取依赖
 
 ```sh
-pnpm
+pnpm i
 ```
 
 ### 启动项目
@@ -93,6 +96,10 @@ pnpm preview
 pnpm report
 ```
 
+### 开发
+
+简介、易上手是该模板的核心思路。所以你可以放心的直接删除 `views/demo` `router/moduels/demo` 下的所有文件，这样就是一个干净的项目了。
+
 ## 🪴 项目活动
 
 ![Alt](https://repobeats.axiom.co/api/embed/fab6071297ab281913a42f07a2779b488cfd62b8.svg 'Repobeats analytics image')