v4.4.0

2025-04-04 06:02:50 +08:00 · 2023-11-25 11:33:59 +08:00 · 2023-11-25 11:33:59 +08:00 · cda4216493
commit cda4216493
parent 38069b5b8c
131 changed files with 845 additions and 345 deletions
--- a/.evnrc
+++ b/.evnrc
@ -0,0 +1,2 @@
+layout shell zsh
+layout_fnm
--- a/.nvmrc
+++ b/.nvmrc
@ -0,0 +1 @@
+v18.18.2
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,5 +1,32 @@
 # CHANGE LOG

+## 4.4.0
+
+补充了几个组件。并且更改了组件的导入、导出方式，由从前很恶心的一个个导入，变为 `import { RIcon } from '@/components'`。
+
+替换了过时的 `nvm`，使用 `fnm` 替代，并且配置了一些文件让你能够自动切换 `node` 版本，前提是你也装了对应的插件。
+
+由于 `WebStorm` 一直提示可以缩短路径，强迫症患者表示受不了了，就全部改了（可能遗漏）。
+
+升级 `node` 版本至 `18.18.2`。
+
+### Feats
+
+- 新增组件
+  - RModal
+    - width：配置 modal 宽度
+    - cardWidth：配置 preset 为 card 的宽度
+    - dialogWidth：配置 preset 为 dialog 的宽度
+    - fullscreen：配置 preset 为 card 并且配置 fullscreen 为 true 则可以获得全屏效果
+    - dad：启用拖拽效果。仅在 preset 为 card, dialog 时生效（基于 interactjs 实现）
+- 修改 `components` 包组件的导出方式，也修改组件的使用方式
+- 新增 `layoutContentSpinning` 全局属性，用于管理加载动画效果。区别于 `globalMainLayoutLoad` 会强制刷新页面，该属性仅会触发加载动画。并且基于该属性拓展 `openSpin`, `closeSpin` 方法
+
+### Fixes
+
+- 修复国际化切换，由于字段的错误配置导致缓存一直提示 `Fall back to translate` 的问题
+- 修复锁屏不能正常打开、关闭的问题
+
 ## 4.3.4

 更新了 MenuTag 的样式，现在有更加细腻的过渡动画。
@ -20,7 +47,7 @@
 ### Fixes

 - 修复 `utils/element` 方法不能正确获取 `ref` 绑定 `dom` 的问题
- 修复设置界面抛出治毒警告问题
+- 修复设置界面抛出只读警告问题
 - 修复构建提示循环依赖问题

 ## 4.3.3
@ -306,7 +333,7 @@ const demo2 = null
  - 默认开启 autoChangeTheme 功能
  - 支持配置 throttleWait 节流等待时间，默认 500ms
  - 支持通过配置 `desginConfig.echartTheme` 属性指定 `echart theme`。并且只需按照约定方式注册的主题，只需要指定主题名称，即可完成 `light` `dark` 两种主题指定
-  - RayChartInst 新增 dispose render 方法，允许手动渲染与卸载 chart 图
+  - RChartInst 新增 dispose render 方法，允许手动渲染与卸载 chart 图
  - 新增 animation 属性，如果为 true 则会强制触发渲染过渡动画。该配置受 `options.animation` 属性影响，如果该配置为 false 则不会启用过渡动画
 - 移除反转色功能
 - 新增图标页面
--- a/README-ZH.md
+++ b/README-ZH.md
@ -1,5 +1,5 @@
 <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"> <img alt="Ray Template" width="200" height="200" src="https://r2chevereto.yka.moe/longmao.navigator.th.png"> </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>

--- a/README.md
+++ b/README.md
@ -1,5 +1,5 @@
 <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"> <img alt="Ray Template" width="200" height="200" src="https://r2chevereto.yka.moe/longmao.navigator.th.png"> </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>

--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "ray-template",
  "private": false,
-  "version": "4.3.4",
+  "version": "4.4.0",
  "type": "module",
  "engines": {
    "node": "^18.0.0 || >=20.0.0",
@ -32,6 +32,7 @@
    "currency.js": "^2.0.4",
    "dayjs": "^1.11.10",
    "echarts": "^5.4.3",
+    "interactjs": "1.10.21",
    "lodash-es": "^4.17.21",
    "mockjs": "1.1.0",
    "naive-ui": "^2.35.0",
@ -40,7 +41,7 @@
    "print-js": "^1.6.0",
    "vue": "^3.3.8",
    "vue-hooks-plus": "1.8.5",
-    "vue-i18n": "^9.7.0",
+    "vue-i18n": "^9.7.1",
    "vue-router": "^4.2.4",
    "xlsx": "^0.18.5"
  },
@ -49,6 +50,7 @@
    "@babel/eslint-parser": "^7.22.11",
    "@commitlint/cli": "^17.7.1",
    "@commitlint/config-conventional": "^17.7.0",
+    "@interactjs/types": "1.10.21",
    "@intlify/unplugin-vue-i18n": "^1.5.0",
    "@types/crypto-js": "^4.1.1",
    "@types/lodash-es": "^4.17.11",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -29,6 +29,9 @@ dependencies:
  echarts:
    specifier: ^5.4.3
    version: 5.4.3
+  interactjs:
+    specifier: 1.10.21
+    version: 1.10.21
  lodash-es:
    specifier: ^4.17.21
    version: 4.17.21
@ -54,8 +57,8 @@ dependencies:
    specifier: 1.8.5
    version: 1.8.5(vue@3.3.8)
  vue-i18n:
-    specifier: ^9.7.0
-    version: 9.7.0(vue@3.3.8)
+    specifier: ^9.7.1
+    version: 9.7.1(vue@3.3.8)
  vue-router:
    specifier: ^4.2.4
    version: 4.2.4(vue@3.3.8)
@ -76,9 +79,12 @@ devDependencies:
  '@commitlint/config-conventional':
    specifier: ^17.7.0
    version: 17.7.0
+  '@interactjs/types':
+    specifier: 1.10.21
+    version: 1.10.21
  '@intlify/unplugin-vue-i18n':
    specifier: ^1.5.0
-    version: 1.5.0(vue-i18n@9.7.0)
+    version: 1.5.0(vue-i18n@9.7.1)
  '@types/crypto-js':
    specifier: ^4.1.1
    version: 4.1.1
@ -1046,7 +1052,10 @@ packages:
    resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==}
    dev: true

-  /@intlify/bundle-utils@7.4.0(vue-i18n@9.7.0):
+  /@interactjs/types@1.10.21:
+    resolution: {integrity: sha512-U5N3eg9m3rLO9PrQkAaLKsSlCTRxpuMyhPBdMpicPH09icW/kIjLWQcDa3tP/I57zG0yxG6zBFREAcrjyIB3Bw==}
+
+  /@intlify/bundle-utils@7.4.0(vue-i18n@9.7.1):
    resolution: {integrity: sha512-AQfjBe2HUxzyN8ignIk3WhhSuVcSuirgzOzkd17nb337rCbI4Gv/t1R60UUyIqFoFdviLb/wLcDUzTD/xXjv9w==}
    engines: {node: '>= 14.16'}
    peerDependencies:
@ -1067,16 +1076,16 @@ packages:
      magic-string: 0.30.5
      mlly: 1.4.1
      source-map-js: 1.0.2
-      vue-i18n: 9.7.0(vue@3.3.8)
+      vue-i18n: 9.7.1(vue@3.3.8)
      yaml-eslint-parser: 1.2.2
    dev: true

-  /@intlify/core-base@9.7.0:
-    resolution: {integrity: sha512-1tBnfnCI23jXqGW15cagCjn2GgD487VST1dMG8P5LRzrSfx+kUzqFyTrjMNIwgq1tVaF4HnDpFMUuyrzTLKphw==}
+  /@intlify/core-base@9.7.1:
+    resolution: {integrity: sha512-jPJTeECEhqQ7g//8g3Fb79j5SzSSRqlFCWD6pcX94uMLXU+L1m07gVZnnvzoJBnaMyJHiiwxOqZVfvu6rQfLvw==}
    engines: {node: '>= 16'}
    dependencies:
-      '@intlify/message-compiler': 9.7.0
-      '@intlify/shared': 9.7.0
+      '@intlify/message-compiler': 9.7.1
+      '@intlify/shared': 9.7.1

  /@intlify/message-compiler@9.7.0:
    resolution: {integrity: sha512-/YdZCio2L2tCM5bZ2eMHbSEIQNPh1QqvZIOLI/yCVKXLscis7O0SsR2nmuU/DfCJ3iSeI8juw82C2wLvfsAeww==}
@ -1084,12 +1093,25 @@ packages:
    dependencies:
      '@intlify/shared': 9.7.0
      source-map-js: 1.0.2
+    dev: true
+
+  /@intlify/message-compiler@9.7.1:
+    resolution: {integrity: sha512-HfIr2Hn/K7b0Zv4kGqkxAxwtipyxAwhI9a3krN5cuhH/G9gkaik7of1PdzjR3Mix43t2onBiKYQyaU7mo7e0aA==}
+    engines: {node: '>= 16'}
+    dependencies:
+      '@intlify/shared': 9.7.1
+      source-map-js: 1.0.2

  /@intlify/shared@9.7.0:
    resolution: {integrity: sha512-PUkEuk//YKu4CHS5ah3mNa3XL/+TZj6rAY/6yYN+GCNFd2u+uWUkeuwE4Q6t8dydRWlErOePHHS0KyNoof/oBw==}
    engines: {node: '>= 16'}
+    dev: true

-  /@intlify/unplugin-vue-i18n@1.5.0(vue-i18n@9.7.0):
+  /@intlify/shared@9.7.1:
+    resolution: {integrity: sha512-CBKnHzlUYGrk5QII9q4nElAQKO5cX1rRx8VmSWXltyOZjbkGHXYQTHULn6KwRi+CypuBCfmPkyPBHMzosypIeg==}
+    engines: {node: '>= 16'}
+
+  /@intlify/unplugin-vue-i18n@1.5.0(vue-i18n@9.7.1):
    resolution: {integrity: sha512-jW0MCCdwxybxcwjEfCunAcKjVoxyO3i+cnLL6v+MNGRLUHqrpELF6zQAJUhgAK2afhY7mCliy8RxTFWKdXm26w==}
    engines: {node: '>= 14.16'}
    peerDependencies:
@ -1104,7 +1126,7 @@ packages:
      vue-i18n-bridge:
        optional: true
    dependencies:
-      '@intlify/bundle-utils': 7.4.0(vue-i18n@9.7.0)
+      '@intlify/bundle-utils': 7.4.0(vue-i18n@9.7.1)
      '@intlify/shared': 9.7.0
      '@rollup/pluginutils': 5.0.4
      '@vue/compiler-sfc': 3.3.8
@ -1116,7 +1138,7 @@ packages:
      picocolors: 1.0.0
      source-map-js: 1.0.2
      unplugin: 1.4.0
-      vue-i18n: 9.7.0(vue@3.3.8)
+      vue-i18n: 9.7.1(vue@3.3.8)
    transitivePeerDependencies:
      - rollup
      - supports-color
@ -4580,6 +4602,12 @@ packages:
    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
    dev: true

+  /interactjs@1.10.21:
+    resolution: {integrity: sha512-85GdTHci8W7gFzSPfV26x69LA3Gnl64NbVYDTfw0Jo4rVvH4WAGBNjM5xV2UJwMvusmJLo2XkJDK5k7IsU87bA==}
+    dependencies:
+      '@interactjs/types': 1.10.21
+    dev: false
+
  /internal-slot@1.0.5:
    resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==}
    engines: {node: '>= 0.4'}
@ -7496,14 +7524,14 @@ packages:
      screenfull: 5.2.0
      vue: 3.3.8(typescript@5.2.2)

-  /vue-i18n@9.7.0(vue@3.3.8):
-    resolution: {integrity: sha512-8Z8kSz9U2juzuAf+6mjW1HTd5pIlYuFJZkC+HvYOglFdpzwc2rTUGjxKwN8xGdtGur1MFnyJ44TSr+TksJtY8A==}
+  /vue-i18n@9.7.1(vue@3.3.8):
+    resolution: {integrity: sha512-A6DzWqJQMdzBj+392+g3zIgGV0FnFC7o/V+txs5yIALANEZzY6ZV8hM2wvZR3nTbQI7dntAmzBHMeoEteJO0kQ==}
    engines: {node: '>= 16'}
    peerDependencies:
      vue: ^3.0.0
    dependencies:
-      '@intlify/core-base': 9.7.0
-      '@intlify/shared': 9.7.0
+      '@intlify/core-base': 9.7.1
+      '@intlify/shared': 9.7.1
      '@vue/devtools-api': 6.5.1
      vue: 3.3.8(typescript@5.2.2)

--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,9 +1,9 @@
 import { RouterView } from 'vue-router'
-import AppNaiveGlobalProvider from '@/app-components/provider/AppNaiveGlobalProvider/index'
-import AppStyleProvider from '@/app-components/provider/AppStyleProvider/index'
-import AppLockScreen from '@/app-components/app/AppLockScreen/index'
-import AppWatermarkProvider from '@/app-components/provider/AppWatermarkProvider/index'
-import AppGlobalSpin from '@/spin/index'
+import AppNaiveGlobalProvider from '@/app-components/provider/AppNaiveGlobalProvider'
+import AppStyleProvider from '@/app-components/provider/AppStyleProvider'
+import AppLockScreen from '@/app-components/app/AppLockScreen'
+import AppWatermarkProvider from '@/app-components/provider/AppWatermarkProvider'
+import AppGlobalSpin from '@/spin'

 export default defineComponent({
  name: 'App',
--- a/src/api/demo/mock/person.ts
+++ b/src/api/demo/mock/person.ts
@ -1,4 +1,4 @@
-import { request } from '@/axios/index'
+import { request } from '@/axios'

 import type { BasicResponse, PaginationResponse } from '@/types/modules/axios'

--- a/src/api/demo/test.ts
+++ b/src/api/demo/test.ts
@ -19,7 +19,7 @@
 * 3. 如果该方法在 setup 环境中使用，则可以使用 useHookPlusRequest 包裹该方法，即可便捷使用该请求函数。如果请求方法在非 setup 环境中使用，直接使用即可
 */

-import { request } from '@/axios/index'
+import { request } from '@/axios'

 import type { BasicResponse } from '@/types/modules/axios'

--- a/src/app-components/app/AppLockScreen/components/LockScreen/index.tsx
+++ b/src/app-components/app/AppLockScreen/components/LockScreen/index.tsx
@ -11,8 +11,8 @@

 /** 锁屏界面 */

-import { NInput, NForm, NFormItem, NButton, NSpace } from 'naive-ui'
-import AppAvatar from '@/app-components/app/AppAvatar/index'
+import { NInput, NForm, NFormItem, NButton } from 'naive-ui'
+import AppAvatar from '@/app-components/app/AppAvatar'

 import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar'
 import { rules, useCondition } from '@/app-components/app/AppLockScreen/shared'
--- a/src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx
+++ b/src/app-components/app/AppLockScreen/components/UnlockScreen/index.tsx
@ -12,13 +12,13 @@
 /** 解锁界面 */

 import { NInput, NForm, NFormItem, NButton, NSpace } from 'naive-ui'
-import AppAvatar from '@/app-components/app/AppAvatar/index'
+import AppAvatar from '@/app-components/app/AppAvatar'

 import dayjs from 'dayjs'
 import { useSigningActions, useSettingActions } from '@/store'
 import { rules, useCondition } from '@/app-components/app/AppLockScreen/shared'
 import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar'
-import { useDevice } from '@/hooks/web/index'
+import { useDevice } from '@/hooks/web'

 import type { FormInst, InputInst } from 'naive-ui'

--- a/src/app-components/app/AppLockScreen/index.tsx
+++ b/src/app-components/app/AppLockScreen/index.tsx
@ -22,34 +22,42 @@ import LockScreen from './components/LockScreen'
 import UnlockScreen from './components/UnlockScreen'

 import useAppLockScreen from '@/app-components/app/AppLockScreen/appLockVar'
-import { useSettingGetters } from '@/store'
+import { useSettingGetters, useSettingActions } from '@/store'

 const AppLockScreen = defineComponent({
  name: 'AppLockScreen',
  setup() {
-    const { getLockScreenSwitch } = useSettingGetters()
-
    const { getLockAppScreen } = useAppLockScreen()
+    const { changeSwitcher } = useSettingActions()
+    const { getLockScreenSwitch } = useSettingGetters()
+    const lockScreenSwitchRef = computed({
+      get: () => getLockScreenSwitch.value,
+      set: (val) => {
+        changeSwitcher(val, 'lockScreenSwitch')
+      },
+    })

    return {
-      getLockScreenSwitch,
+      lockScreenSwitchRef,
      getLockAppScreen,
    }
  },
  render() {
+    const { getLockAppScreen } = this
+
    return (
      <NModal
-        v-model:show={this.getLockScreenSwitch}
+        v-model:show={this.lockScreenSwitchRef}
        transformOrigin="center"
        show
        autoFocus={false}
        maskClosable={false}
        closeOnEsc={false}
-        preset={!this.getLockAppScreen() ? 'dialog' : void 0}
+        preset={!getLockAppScreen() ? 'dialog' : void 0}
        title="锁定屏幕"
      >
        <div class="app-lock-screen__content">
-          {!this.getLockAppScreen() ? <LockScreen /> : <UnlockScreen />}
+          {!getLockAppScreen() ? <LockScreen /> : <UnlockScreen />}
        </div>
      </NModal>
    )
--- a/src/app-components/app/RayLink/index.tsx
+++ b/src/app-components/app/RayLink/index.tsx
@ -15,37 +15,37 @@ const RayLink = defineComponent({
        key: 'yunhome',
        src: 'https://yunkuangao.me/',
        tooltip: '云之家',
-        icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/avatar.jpeg',
+        icon: 'https://r2chevereto.yka.moe/avatar.jpeg',
      },
      {
        key: 'yun-cloud-images',
        src: 'https://yunkuangao.com/',
        tooltip: '云图床',
-        icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/avatar.jpeg',
+        icon: 'https://r2chevereto.yka.moe/avatar.jpeg',
      },
      {
        key: 'ray-js-note',
        src: 'https://note.youdao.com/s/ObWEe2BB',
        tooltip: 'Ray的前端学习笔记',
-        icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.navigator.png',
+        icon: 'https://r2chevereto.yka.moe/longmao.navigator.png',
      },
      {
        key: 'ray-js-cover',
        src: 'https://note.youdao.com/s/IC8xKPdB',
        tooltip: 'Ray的面试题总结',
-        icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.navigator.png',
+        icon: 'https://r2chevereto.yka.moe/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.navigator.png',
+        icon: 'https://r2chevereto.yka.moe/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.navigator.png',
+        icon: 'https://r2chevereto.yka.moe/longmao.navigator.png',
      },
    ]

--- a/src/app-config/localConfig.ts
+++ b/src/app-config/localConfig.ts
@ -38,12 +38,20 @@ export const LOCAL_OPTIONS: LocalOptions = [

 /**
 *
- * 系统默认语言
+ * 模板默认语言
 *
 * 配置时应该与 LOCAL_OPTIONS 的 key 一致
 */
 export const SYSTEM_DEFAULT_LOCAL: TemplateLocale<LocalOptions> = 'zh-CN'

+/**
+ *
+ * 模板默认错误回滚语言
+ *
+ * 配置时应该与 LOCAL_OPTIONS 的 key 一致
+ */
+export const SYSTEM_FALLBACK_LOCALE = 'zh-CN'
+
 /**
 *
 * i18n 国际化配置与 dayjs 配置的映射入口
--- a/src/components/RChart/index.ts
+++ b/src/components/RChart/index.ts
@ -0,0 +1,8 @@
+import RChart from './src'
+import chartProps from './src/props'
+
+import type * as RChartType from './src/type'
+
+export type { RChartType }
+
+export { RChart, chartProps }
--- a/src/components/RChart/src/helper.ts
+++ b/src/components/RChart/src/helper.ts
@ -13,7 +13,7 @@ import type {
  ChartThemeRawArray,
  ChartThemeRawModules,
  LoadingOptions,
-} from '@/components/RChart/type'
+} from '@/components/RChart/src/type'

 /**
 *
--- a/src/components/RChart/src/index.scss
+++ b/src/components/RChart/src/index.scss
--- a/src/components/RChart/src/index.tsx
+++ b/src/components/RChart/src/index.tsx
@ -42,12 +42,12 @@ import { NCard } from 'naive-ui'
 import props from './props'
 import { throttle } from 'lodash-es'
 import { completeSize } from '@/utils/element'
-import { call } from '@/utils/vue/index'
+import { call } from '@/utils/vue'
 import { setupChartTheme } from './helper'
 import { APP_THEME } from '@/app-config/designConfig'
 import { useResizeObserver } from '@vueuse/core'
-import RMoreDropdown from '@/components/RMoreDropdown/index'
-import { renderNode } from '@use-utils/vue/index'
+import { RMoreDropdown } from '@/components'
+import { renderNode } from '@use-utils/vue'
 import { downloadBase64File } from '@use-utils/basic'
 import { useSettingGetters } from '@/store'

--- a/src/components/RChart/src/props.ts
+++ b/src/components/RChart/src/props.ts
@ -5,7 +5,7 @@ import type {
  LoadingOptions,
  AutoResize,
  ChartTheme,
-} from '@/components/RChart/type'
+} from '@/components/RChart/src/type'
 import type { ECharts, SetOptionOpts } from 'echarts/core'
 import type { MaybeComputedElementRef, MaybeElement } from '@vueuse/core'
 import type {
--- a/src/components/RChart/src/type.ts
+++ b/src/components/RChart/src/type.ts
@ -9,7 +9,7 @@
 * @remark 今天也是元气满满撸代码的一天
 */

-import type { ECharts, EChartsCoreOption } from 'echarts/core'
+import type { ECharts } from 'echarts/core'
 import type { CanvasRenderer } from 'echarts/renderers' // `echarts` 渲染器

 export interface ChartThemeRawModules {
@ -50,7 +50,7 @@ export type ChartTheme =
  | string
  | null

-export interface RayChartInst {
+export interface RChartInst {
  /**
   *
   * echart 实例
--- a/src/components/RCollapseGrid/index.ts
+++ b/src/components/RCollapseGrid/index.ts
@ -1,5 +1,8 @@
-import RCollapseGrid from './src/index'
-import props from './src/props'
+import RCollapseGrid from './src'
+import collapseGridProps from './src/props'

-export default RCollapseGrid
-export { props }
+import type * as RCollapseGridType from './src/type'
+
+export type { RCollapseGridType }
+
+export { RCollapseGrid, collapseGridProps }
--- a/src/components/RCollapseGrid/src/index.tsx
+++ b/src/components/RCollapseGrid/src/index.tsx
@ -22,9 +22,9 @@
 import './index.scss'

 import { NCard, NGrid, NGridItem, NSpace } from 'naive-ui'
-import RIcon from '@/components/RIcon'
+import { RIcon } from '@/components'

-import { call } from '@/utils/vue/index'
+import { call } from '@/utils/vue'
 import props from './props'

 export default defineComponent({
--- a/src/components/RForm/index.ts
+++ b/src/components/RForm/index.ts
@ -1,5 +0,0 @@
-import RForm from './src/RForm'
-import props from './src/props'
-
-export default RForm
-export { props }
--- a/src/components/RForm/src/RForm.tsx
+++ b/src/components/RForm/src/RForm.tsx
@ -1,25 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-11-18
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-import { NForm } from 'naive-ui'
-
-import props from './props'
-
-export default defineComponent({
-  name: 'RForm',
-  props,
-  setup() {
-    return {}
-  },
-  render() {
-    return <NForm></NForm>
-  },
-})
--- a/src/components/RForm/src/props.ts
+++ b/src/components/RForm/src/props.ts
@ -1,18 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-11-18
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-import { formProps } from 'naive-ui'
-
-const props = {
-  ...formProps,
-}
-
-export default props
--- a/src/components/RIcon/index.ts
+++ b/src/components/RIcon/index.ts
@ -0,0 +1,4 @@
+import RIcon from './src'
+import iconProps from './src/props'
+
+export { RIcon, iconProps }
--- a/src/components/RIcon/src/index.scss
+++ b/src/components/RIcon/src/index.scss
--- a/src/components/RIcon/src/index.tsx
+++ b/src/components/RIcon/src/index.tsx
@ -11,7 +11,7 @@

 import './index.scss'

-import { call } from '@/utils/vue/index'
+import { call } from '@/utils/vue'
 import { completeSize } from '@/utils/element'
 import props from './props'

--- a/src/components/RIcon/src/props.ts
+++ b/src/components/RIcon/src/props.ts
--- a/src/components/RIframe/index.ts
+++ b/src/components/RIframe/index.ts
@ -1,8 +1,8 @@
-import RIframe from './src/index'
-import props from './src/props'
+import RIframe from './src'
+import iframeProps from './src/props'

-import type { RIframeInst } from './src/type'
+import type * as RIframeType from './src/type'

-export default RIframe
-export { props }
-export type { RIframeInst }
+export type { RIframeType }
+
+export { RIframe, iframeProps }
--- a/src/components/RIframe/src/index.tsx
+++ b/src/components/RIframe/src/index.tsx
@ -14,7 +14,7 @@ import './index.scss'
 import { NSpin } from 'naive-ui'

 import { completeSize, on, off } from '@use-utils/element'
-import { call } from '@/utils/vue/index'
+import { call } from '@/utils/vue'
 import props from './props'

 export default defineComponent({
--- a/src/components/RModal/index.ts
+++ b/src/components/RModal/index.ts
@ -0,0 +1,4 @@
+import RModal from './src/Modal'
+import modalProps from './src/props'
+
+export { RModal, modalProps }
--- a/src/components/RModal/src/Modal.tsx
+++ b/src/components/RModal/src/Modal.tsx
@ -0,0 +1,104 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-11-22
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import './index.scss'
+
+import { NModal } from 'naive-ui'
+
+import props from './props'
+import { completeSize } from '@/utils/element'
+import { useWindowSize } from '@vueuse/core'
+import { uuid } from '@/utils/basic'
+import { setupDraggable } from './utils'
+
+import type interact from 'interactjs'
+
+export default defineComponent({
+  name: 'RModal',
+  props,
+  setup(props) {
+    const { height } = useWindowSize()
+    const cssVars = computed(() => ({
+      '--r-modal-width': completeSize(props.width ?? 600),
+      '--r-modal-card-width': completeSize(props.cardWidth ?? 600),
+      '--r-modal-dialog-width': completeSize(props.dialogWidth ?? 446),
+    }))
+    const uuidEl = uuid()
+    let intractable: null | ReturnType<typeof interact>
+
+    /**
+     *
+     * 获取当前是否为 card 风格并且为全屏
+     */
+    const isFullscreenCardType = () =>
+      props.preset === 'card' && props.fullscreen
+
+    const setupInteract = () => {
+      const target = document.getElementById(uuidEl)
+
+      if (target) {
+        setupDraggable(target, props.preset).then((res) => {
+          intractable = res
+        })
+      }
+    }
+
+    watch(
+      () => props.show,
+      (ndata) => {
+        if (
+          ndata &&
+          props.dad &&
+          (props.preset === 'card' || props.preset === 'dialog')
+        ) {
+          nextTick(() => {
+            setupInteract()
+          })
+        } else {
+          intractable?.unset()
+
+          intractable = null
+        }
+      },
+    )
+
+    return {
+      cssVars,
+      height,
+      isFullscreenCardType,
+      uuidEl,
+    }
+  },
+  render() {
+    const { isFullscreenCardType } = this
+    const { $props, $slots, $attrs } = this
+    const { preset, ...$otherProps } = $props
+    const { cssVars, height, uuidEl } = this
+
+    return (
+      <NModal
+        class={[
+          'r-modal',
+          isFullscreenCardType() ? 'r-modal__preset-card--fullscreen' : '',
+        ]}
+        style={[cssVars, isFullscreenCardType() ? `height: ${height}px` : '']}
+        preset={preset}
+        {...{
+          id: uuidEl,
+        }}
+        {...$otherProps}
+        {...$attrs}
+      >
+        {{ ...$slots }}
+      </NModal>
+    )
+  },
+})
--- a/src/components/RModal/src/index.scss
+++ b/src/components/RModal/src/index.scss
@ -0,0 +1,18 @@
+.r-modal.n-card.r-modal__preset-card--fullscreen {
+  width: 100%;
+
+  // 当设置全屏时，启用滚动
+  & .n-card__content {
+    overflow: scroll;
+  }
+}
+
+.r-modal {
+  &.n-card {
+    width: var(--r-modal-card-width);
+  }
+
+  &.n-dialog {
+    width: var(--r-modal-dialog-width);
+  }
+}
--- a/src/components/RModal/src/props.ts
+++ b/src/components/RModal/src/props.ts
@ -0,0 +1,69 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-11-22
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { modalProps } from 'naive-ui'
+
+const props = {
+  ...modalProps,
+  /**
+   *
+   * 是否全屏
+   *
+   * @default false
+   */
+  fullscreen: {
+    type: Boolean,
+    default: false,
+  },
+  width: {
+    /**
+     *
+     * preset 空时宽度设置
+     *
+     * @default 600
+     */
+    type: [String, Number],
+    default: 600,
+  },
+  cardWidth: {
+    /**
+     *
+     * preset 为 card 时宽度设置
+     *
+     * @default 600
+     */
+    type: [String, Number],
+    default: 600,
+  },
+  dialogWidth: {
+    /**
+     *
+     * preset 为 dialog 时宽度设置
+     *
+     * @default 446
+     */
+    type: [String, Number],
+    default: 446,
+  },
+  dad: {
+    /**
+     *
+     * 是否启用拖拽
+     * 当启用拖拽时，可以通过拖拽 header 部分控制模态框
+     *
+     * @default false
+     */
+    type: Boolean,
+    default: false,
+  },
+}
+
+export default props
--- a/src/components/RModal/src/utils.ts
+++ b/src/components/RModal/src/utils.ts
@ -0,0 +1,55 @@
+import interact from 'interactjs'
+
+import type { ModalProps } from 'naive-ui'
+
+/**
+ *
+ * @param bindModal modal 预设元素
+ * @param preset 预设类型
+ *
+ * 根据预设模态框设置拖拽效果
+ * 但是该效果有且仅有 card, dialog 有效
+ */
+export const setupDraggable = (
+  bindModal: HTMLElement,
+  preset: ModalProps['preset'],
+): Promise<ReturnType<typeof interact>> => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const allowFromStr =
+        preset === 'card' ? '.n-card-header__main' : '.n-dialog__title'
+
+      if (bindModal) {
+        const dad = interact(bindModal)
+          .draggable({
+            inertia: true,
+            autoScroll: true,
+            allowFrom: allowFromStr,
+            modifiers: [
+              interact.modifiers.restrictRect({
+                restriction: 'parent',
+                endOnly: true,
+              }),
+            ],
+            listeners: {
+              move: (event) => {
+                const target = event.target
+                const x =
+                  (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
+                const y =
+                  (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
+
+                target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
+
+                target.setAttribute('data-x', x)
+                target.setAttribute('data-y', y)
+              },
+            },
+          })
+          .resizable(false)
+
+        resolve(dad)
+      }
+    }, 30)
+  })
+}
--- a/src/components/RMoreDropdown/index.ts
+++ b/src/components/RMoreDropdown/index.ts
@ -1,5 +1,4 @@
-import RMoreDropdown from './src/index'
-import props from './src/props'
+import RMoreDropdown from './src'
+import moreDropdownProps from './src/props'

-export default RMoreDropdown
-export { props }
+export { RMoreDropdown, moreDropdownProps }
--- a/src/components/RMoreDropdown/src/index.tsx
+++ b/src/components/RMoreDropdown/src/index.tsx
@ -10,10 +10,10 @@
 */

 import { NDropdown } from 'naive-ui'
-import RIcon from '@/components/RIcon/index'
+import { RIcon } from '@/components'

 import props from './props'
-import { renderNode } from '@use-utils/vue/index'
+import { renderNode } from '@use-utils/vue'

 export default defineComponent({
  name: 'RMoreDropdown',
--- a/src/components/RQRCode/index.ts
+++ b/src/components/RQRCode/index.ts
@ -1,9 +1,8 @@
-import RayQRcode from './src/index'
+import RQRCode from './src'
+import qrcodeProps from './src/props'

-export default RayQRcode
-export type {
-  QRCodeStatus,
-  QRCodeLevel,
-  QRCodeRenderResponse,
-  QRCodeInst,
-} from './src/type'
+import type * as RQRCodeType from './src/type'
+
+export type { RQRCodeType }
+
+export { RQRCode, qrcodeProps }
--- a/src/components/RQRCode/src/index.tsx
+++ b/src/components/RQRCode/src/index.tsx
@ -12,12 +12,12 @@
 import './index.scss'

 import { NButton, NSpin } from 'naive-ui'
-import RIcon from '@/components/RIcon/index'
+import { RIcon } from '@/components'

 import props from './props'
 import { AwesomeQR } from 'awesome-qr'
 import { isValueType, downloadAnyFile } from '@/utils/basic'
-import { call } from '@/utils/vue/index'
+import { call } from '@/utils/vue'

 import type {
  QRCodeRenderResponse,
--- a/src/components/RTable/index.ts
+++ b/src/components/RTable/index.ts
@ -1,6 +1,8 @@
 import RTable from './src/Table'
-import props from './src/props'
+import tableProps from './src/props'

-export default RTable
-export { props }
-export type { TableInst } from './src/type'
+import type * as RTableType from './src/type'
+
+export type { RTableType }
+
+export { RTable, tableProps }
--- a/src/components/RTable/src/Table.tsx
+++ b/src/components/RTable/src/Table.tsx
@ -18,7 +18,7 @@ import C from './components/C'
 import Print from './components/Print'

 import props from './props'
-import { call, renderNode } from '@/utils/vue/index'
+import { call, renderNode } from '@/utils/vue'
 import { uuid } from '@/utils/basic'
 import config from './config'

--- a/src/components/RTable/src/components/C.tsx
+++ b/src/components/RTable/src/components/C.tsx
@ -9,13 +9,21 @@
 * @remark 今天也是元气满满撸代码的一天
 */

+/**
+ *
+ * 自定义表格列的顺序
+ *
+ * 但是该方法有几个缺陷地方:
+ * 1. 只能代理第一层的数据，也就意味着深层次的子列不支持配置操作，只会跟随根列更新
+ * 2. 大量数据的时候，可能会出现性能问题
+ */
+
 import { NPopover, NSpace, NTree } from 'naive-ui'
-import RIcon from '@/components/RIcon/index'
+import { RIcon } from '@/components'

 import config from '../config'
 import props from '../props'
-import { h } from 'vue'
-import { call } from '@/utils/vue/index'
+import { call } from '@/utils/vue'

 import type { TreeOption, TreeDropInfo } from 'naive-ui'
 import type { C } from '../type'
--- a/src/components/RTable/src/components/Fullscreen.tsx
+++ b/src/components/RTable/src/components/Fullscreen.tsx
@ -10,7 +10,7 @@
 */

 import { NPopover } from 'naive-ui'
-import RIcon from '@/components/RIcon/index'
+import { RIcon } from '@/components'

 import config from '../config'
 import { useFullscreen } from 'vue-hooks-plus'
--- a/src/components/RTable/src/components/Print.tsx
+++ b/src/components/RTable/src/components/Print.tsx
@ -10,7 +10,7 @@
 */

 import { NPopover } from 'naive-ui'
-import RIcon from '@/components/RIcon/index'
+import { RIcon } from '@/components'

 import config from '../config'
 import props from '../props'
@ -19,7 +19,7 @@ import { print } from '@/utils/basic'
 import type { TableProvider } from '../type'

 export default defineComponent({
-  name: 'PrintTable',
+  name: 'TablePrint',
  props,
  setup(props) {
    const { uuidTable } = inject<TableProvider>(
--- a/src/components/RTable/src/components/Size.tsx
+++ b/src/components/RTable/src/components/Size.tsx
@ -9,10 +9,10 @@
 * @remark 今天也是元气满满撸代码的一天
 */

-import { NPopover, NCard, NPopselect } from 'naive-ui'
-import RIcon from '@/components/RIcon/index'
+import { NPopover, NPopselect } from 'naive-ui'
+import { RIcon } from '@/components'

-import { call } from '@/utils/vue/index'
+import { call } from '@/utils/vue'
 import props from '../props'
 import config from '../config'

--- a/src/components/RTransitionComponent/index.ts
+++ b/src/components/RTransitionComponent/index.ts
@ -0,0 +1,8 @@
+import RTransitionComponent from './src/index.vue'
+import transitionComponentProps from './src/props'
+
+import type * as RTransitionComponentType from './src/type'
+
+export type { RTransitionComponentType }
+
+export { RTransitionComponent, transitionComponentProps }
--- a/src/components/RTransitionComponent/src/index.vue
+++ b/src/components/RTransitionComponent/src/index.vue
@ -25,6 +25,7 @@
 <script lang="ts" setup>
 import { useKeepAliveGetters } from '@/store'
 import { APP_KEEP_ALIVE } from '@/app-config/appConfig'
+import props from './props'

 import type { TransitionProps } from './type'

@ -36,11 +37,7 @@ import type { TransitionProps } from './type'
 defineOptions({
  name: 'RTransitionComponent',
 })
-withDefaults(defineProps<TransitionProps>(), {
-  transitionPropName: 'fade',
-  transitionMode: 'out-in',
-  transitionAppear: true,
-})
+withDefaults(defineProps<TransitionProps>(), props)

 const { getKeepAliveInclude } = useKeepAliveGetters()
 const { setupKeepAlive, maxKeepAliveLength, keepAliveExclude } = APP_KEEP_ALIVE
--- a/src/components/RTransitionComponent/src/props.ts
+++ b/src/components/RTransitionComponent/src/props.ts
@ -0,0 +1,9 @@
+import type { TransitionProps } from './type'
+
+const props: TransitionProps = {
+  transitionPropName: 'fade',
+  transitionMode: 'out-in',
+  transitionAppear: true,
+}
+
+export default props
--- a/src/components/RTransitionComponent/src/type.ts
+++ b/src/components/RTransitionComponent/src/type.ts
--- a/src/components/index.ts
+++ b/src/components/index.ts
@ -0,0 +1,9 @@
+export * from './RChart'
+export * from './RCollapseGrid'
+export * from './RIcon'
+export * from './RIframe'
+export * from './RModal'
+export * from './RMoreDropdown'
+export * from './RQRCode'
+export * from './RTable'
+export * from './RTransitionComponent'
--- a/src/error/views/Error404/index.tsx
+++ b/src/error/views/Error404/index.tsx
@ -9,7 +9,7 @@
 * @remark 今天也是元气满满撸代码的一天
 */

-import PageResult from '@/error/index'
+import PageResult from '@/error'

 const ErrorPage404 = defineComponent({
  name: 'ErrorPage404',
--- a/src/error/views/Error500/index.tsx
+++ b/src/error/views/Error500/index.tsx
@ -9,7 +9,7 @@
 * @remark 今天也是元气满满撸代码的一天
 */

-import PageResult from '@/error/index'
+import PageResult from '@/error'

 const ErrorPage500 = defineComponent({
  name: 'ErrorPage500',
--- a/src/global-variable/variable.ts
+++ b/src/global-variable/variable.ts
@ -35,9 +35,10 @@ import type { AnyFC } from '@/types/modules/utils'
 const variableState = reactive({
  globalSpinning: false, // 全局加载控制器
  globalDrawerValue: false, // 全局抽屉控制器（小尺寸设备可用）
-  globalMainLayoutLoad: true, // LayoutContent 区域加载控制器
+  globalMainLayoutLoad: true, // LayoutContent 区域加载控制器，会触发强制刷新
  layoutContentMaximize: false, // LayoutContent 区域全屏控制器
  globalRootRoute: cloneDeep(ROOT_ROUTE), // 全局根路由配置，同步至 ROOT_ROUTE
+  layoutContentSpinning: false, // LayoutContent 区域加载控制器，不会触发强制刷新
 })

 export type VariableState = typeof variableState
--- a/src/hooks/template/useMainPage.ts
+++ b/src/hooks/template/useMainPage.ts
@ -9,10 +9,10 @@
 * @remark 今天也是元气满满撸代码的一天
 */

-import { setVariable, getVariableToRefs } from '@/global-variable/index'
+import { setVariable, getVariableToRefs } from '@/global-variable'
 import { LAYOUT_CONTENT_REF } from '@/app-config/routerConfig'
 import { addStyle, removeStyle } from '@/utils/element'
-import { unrefElement } from '@/utils/vue/index'
+import { unrefElement } from '@/utils/vue'
 import { useWindowSize } from '@vueuse/core'

 import type { Ref } from 'vue'
@ -26,7 +26,10 @@ export function useMainPage() {
   *
   * @param wait 延迟时长
   *
-   * 刷新当前路由
+   * 刷新当前路由（强制触发刷新）
+   *
+   * @example
+   * reload(1200)
   */
  const reload = (wait = 800) => {
    setVariable('globalMainLayoutLoad', false)
@ -34,11 +37,36 @@ export function useMainPage() {
    setTimeout(() => setVariable('globalMainLayoutLoad', true), wait)
  }

+  /**
+   *
+   * 打开加载动画（不触发强制刷新）
+   *
+   * @example
+   * openSpin()
+   */
+  const openSpin = () => {
+    setVariable('layoutContentSpinning', true)
+  }
+
+  /**
+   *
+   * 关闭加载动画（不触发强制刷新）
+   *
+   * @example
+   * closeSpin()
+   */
+  const closeSpin = () => {
+    setVariable('layoutContentSpinning', false)
+  }
+
  /**
   *
   * 当前 LayoutContent 是处于否全屏状态
   * - true: 全屏
   * - false: 非全屏
+   *
+   * @example
+   * isLayoutContentMaximized() // true or false
   */
  const isLayoutContentMaximized = () =>
    computed(() => getVariableToRefs('layoutContentMaximize').value)
@ -48,6 +76,10 @@ export function useMainPage() {
   * @param full 是否网页全屏内容区域
   *
   * 该方法仅针对于 LayoutContent 区域，并且依赖全局属性 layoutContentMaximize
+   *
+   * @example
+   * maximize(true, { MaximizeOptions }) 全屏内容区域
+   * maximize(false, { MaximizeOptions }) 取消全屏内容区域
   */
  const maximize = (full: boolean, options?: MaximizeOptions) => {
    const contentEl = unrefElement(LAYOUT_CONTENT_REF as Ref<HTMLElement>)
@ -84,5 +116,7 @@ export function useMainPage() {
    reload,
    maximize,
    isLayoutContentMaximized,
+    openSpin,
+    closeSpin,
  }
 }
--- a/src/hooks/template/useMenuTag.ts
+++ b/src/hooks/template/useMenuTag.ts
@ -11,7 +11,7 @@

 import { useMenuGetters, useMenuActions } from '@/store'
 import { redirectRouterToDashboard } from '@/router/helper/routerCopilot'
-import { useRootRoute } from '@/hooks/template/index'
+import { useRootRoute } from '@/hooks/template'

 import type { MenuTagOptions, Key } from '@/types/modules/app'

--- a/src/hooks/template/useRootRoute.ts
+++ b/src/hooks/template/useRootRoute.ts
@ -9,7 +9,7 @@
 * @remark 今天也是元气满满撸代码的一天
 */

-import { setVariable, getVariableToRefs } from '@/global-variable/index'
+import { setVariable, getVariableToRefs } from '@/global-variable'

 import type { DeepMutable } from '@/types/modules/helper'

--- a/src/hooks/web/useDevice.ts
+++ b/src/hooks/web/useDevice.ts
@ -15,7 +15,7 @@
 */

 import { useWindowSize } from '@vueuse/core'
-import { watchEffectWithTarget } from '@/utils/vue/index'
+import { watchEffectWithTarget } from '@/utils/vue'

 export function useDevice() {
  const { width, height } = useWindowSize()
--- a/src/hooks/web/useI18n.ts
+++ b/src/hooks/web/useI18n.ts
@ -9,7 +9,7 @@
 * @remark 今天也是元气满满撸代码的一天
 */

-import { i18n } from '@/locales/index'
+import { i18n } from '@/locales'

 import type { WritableComputedRef } from 'vue'

--- a/src/hooks/web/useVueRouter.ts
+++ b/src/hooks/web/useVueRouter.ts
@ -9,7 +9,7 @@
 * @remark 今天也是元气满满撸代码的一天
 */

-import { router } from '@/router/index'
+import { router } from '@/router'

 /**
 *
--- a/src/layout/components/Menu/components/SiderBarLogo/index.tsx
+++ b/src/layout/components/Menu/components/SiderBarLogo/index.tsx
@ -12,7 +12,7 @@
 import './index.scss'

 import { NEllipsis, NPopover } from 'naive-ui'
-import RIcon from '@/components/RIcon/index'
+import { RIcon } from '@/components'

 export default defineComponent({
  name: 'SiderBarLogo',
--- a/src/layout/components/Menu/index.tsx
+++ b/src/layout/components/Menu/index.tsx
@ -12,11 +12,11 @@
 import './index.scss'

 import { NMenu, NLayoutSider, NDrawer } from 'naive-ui'
-import SiderBarLogo from './components/SiderBarLogo/index'
+import SiderBarLogo from './components/SiderBarLogo'

 import { APP_MENU_CONFIG } from '@/app-config/appConfig'
-import { useDevice } from '@/hooks/web/index'
-import { getVariableToRefs, setVariable } from '@/global-variable/index'
+import { useDevice } from '@/hooks/web'
+import { getVariableToRefs, setVariable } from '@/global-variable'
 import { useMenuGetters, useMenuActions } from '@/store'

 import type { MenuInst } from 'naive-ui'
--- a/src/layout/components/MenuTag/index.tsx
+++ b/src/layout/components/MenuTag/index.tsx
@ -39,8 +39,7 @@ import {
  NButton,
  NIcon,
 } from 'naive-ui'
-import RIcon from '@/components/RIcon/index'
-import RMoreDropdown from '@/components/RMoreDropdown/index'
+import { RIcon, RMoreDropdown } from '@/components'

 import CloseRight from '@/icons/close_right.svg?component'
 import CloseLeft from '@/icons/close_left.svg?component'
@ -49,10 +48,10 @@ import { useMenuGetters, useMenuActions } from '@/store'
 import { uuid } from '@/utils/basic'
 import { hasClass } from '@/utils/element'
 import { queryElements } from '@use-utils/element'
-import { useMainPage } from '@/hooks/template/index'
-import { useMenuTag } from '@/hooks/template/index'
+import { useMainPage } from '@/hooks/template'
+import { useMenuTag } from '@/hooks/template'
 import { throttle } from 'lodash-es'
-import { useRootRoute } from '@/hooks/template/index'
+import { useRootRoute } from '@/hooks/template'

 import type { ScrollbarInst } from 'naive-ui'
 import type { MenuTagOptions, AppMenuOption } from '@/types/modules/app'
@ -100,16 +99,16 @@ export default defineComponent({
        type: 'divider',
        key: 'd1',
      },
-      {
-        label: '关闭右侧标签页',
-        key: 'closeRight',
-        icon: () => <CloseRight class="menu-tag__icon" />,
-      },
      {
        label: '关闭左侧标签页',
        key: 'closeLeft',
        icon: () => <CloseLeft class="menu-tag__icon" />,
      },
+      {
+        label: '关闭右侧标签页',
+        key: 'closeRight',
+        icon: () => <CloseRight class="menu-tag__icon" />,
+      },
      {
        type: 'divider',
        key: 'd1',
@ -497,11 +496,7 @@ export default defineComponent({
                                  meta: { i18nKey },
                                } = curr

-                                if (i18nKey) {
-                                  return $t(i18nKey)
-                                } else {
-                                  return breadcrumbLabel
-                                }
+                                return i18nKey ? $t(i18nKey) : breadcrumbLabel
                              },
                            }}
                          </span>
--- a/src/layout/components/SiderBar/components/Breadcrumb/index.tsx
+++ b/src/layout/components/SiderBar/components/Breadcrumb/index.tsx
@ -21,7 +21,7 @@
 import { NDropdown, NBreadcrumb, NBreadcrumbItem } from 'naive-ui'

 import { useMenuGetters, useMenuActions } from '@/store'
-import { useDevice } from '@/hooks/web/index'
+import { useDevice } from '@/hooks/web'

 import type { DropdownOption } from 'naive-ui'
 import type { AppMenuOption } from '@/types/modules/app'
--- a/src/layout/components/SiderBar/components/GlobalSearch/index.tsx
+++ b/src/layout/components/SiderBar/components/GlobalSearch/index.tsx
@ -21,13 +21,13 @@
 import './index.scss'

 import { NInput, NModal, NResult, NScrollbar, NSpace } from 'naive-ui'
-import RIcon from '@/components/RIcon/index'
+import { RIcon } from '@/components'

 import { on, off, queryElements, addClass, removeClass } from '@/utils/element'
 import { debounce } from 'lodash-es'
 import { useMenuGetters, useMenuActions } from '@/store'
 import { validMenuItemShow } from '@/router/helper/routerCopilot'
-import { useDevice } from '@/hooks/web/index'
+import { useDevice } from '@/hooks/web'

 import type { AppRouteMeta } from '@/router/type'
 import type { AppMenuOption } from '@/types/modules/app'
--- a/src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx
+++ b/src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx
@ -10,7 +10,7 @@
 */

 import { NSpace, NSwitch, NTooltip } from 'naive-ui'
-import RIcon from '@/components/RIcon'
+import { RIcon } from '@/components'

 import { useSettingGetters, useSettingActions } from '@/store'

--- a/src/layout/components/SiderBar/components/SettingDrawer/index.tsx
+++ b/src/layout/components/SiderBar/components/SettingDrawer/index.tsx
@ -21,7 +21,7 @@ import {
  NDescriptionsItem,
  NSelect,
 } from 'naive-ui'
-import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index'
+import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch'

 import { APP_THEME } from '@/app-config/designConfig'
 import { useSettingGetters, useSettingActions } from '@/store'
--- 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 RIcon from '@/components/RIcon/index'
+import { RIcon } from '@/components'

 import { tooltipProps } from 'naive-ui'

--- a/src/layout/components/SiderBar/index.tsx
+++ b/src/layout/components/SiderBar/index.tsx
@ -20,12 +20,12 @@
 import './index.scss'

 import { NLayoutHeader, NSpace, NDropdown } from 'naive-ui'
-import RIcon from '@/components/RIcon/index'
-import TooltipIcon from '@/layout/components/SiderBar/components/TooltipIcon/index'
-import SettingDrawer from './components/SettingDrawer/index'
-import Breadcrumb from './components/Breadcrumb/index'
-import GlobalSearch from './components/GlobalSearch/index'
-import AppAvatar from '@/app-components/app/AppAvatar/index'
+import { RIcon } from '@/components'
+import TooltipIcon from '@/layout/components/SiderBar/components/TooltipIcon'
+import SettingDrawer from './components/SettingDrawer'
+import Breadcrumb from './components/Breadcrumb'
+import GlobalSearch from './components/GlobalSearch'
+import AppAvatar from '@/app-components/app/AppAvatar'

 import { LOCAL_OPTIONS } from '@/app-config/localConfig'
 import {
@ -34,11 +34,11 @@ import {
  createLeftIconOptions,
  createRightIconOptions,
 } from './shared'
-import { useDevice } from '@/hooks/web/index'
-import { getVariableToRefs, setVariable } from '@/global-variable/index'
+import { useDevice } from '@/hooks/web'
+import { getVariableToRefs, setVariable } from '@/global-variable'
 import { useFullscreen } from 'vue-hooks-plus'
-import { useI18n } from '@/hooks/web/index'
-import { useMainPage } from '@/hooks/template/index'
+import { useI18n } from '@/hooks/web'
+import { useMainPage } from '@/hooks/template'
 import { useSettingGetters, useSettingActions } from '@/store'

 import type { IconEventMapOptions, IconEventMap } from './type'
--- a/src/layout/components/SiderBar/shared.ts
+++ b/src/layout/components/SiderBar/shared.ts
@ -1,4 +1,4 @@
-import { useI18n } from '@/hooks/web/index'
+import { useI18n } from '@/hooks/web'
 import { useSigningActions, useSettingActions } from '@/store'

 import type { IconOptionsFC, IconOptions } from './type'
--- a/src/layout/default/ContentWrapper/index.tsx
+++ b/src/layout/default/ContentWrapper/index.tsx
@ -18,13 +18,12 @@
 import './index.scss'

 import { NSpin } from 'naive-ui'
-import RTransitionComponent from '@/components/RTransitionComponent/index.vue'
-import AppRequestCancelerProvider from '@/app-components/provider/AppRequestCancelerProvider/index'
-import RIcon from '@/components/RIcon/index'
+import { RTransitionComponent, RIcon } from '@/components'
+import AppRequestCancelerProvider from '@/app-components/provider/AppRequestCancelerProvider'

-import { getVariableToRefs } from '@/global-variable/index'
+import { getVariableToRefs } from '@/global-variable'
 import { useSettingGetters } from '@/store'
-import { useMainPage } from '@/hooks/template/index'
+import { useMainPage } from '@/hooks/template'

 import type { GlobalThemeOverrides } from 'naive-ui'

@ -33,6 +32,7 @@ export default defineComponent({
  setup() {
    const router = useRouter()

+    const { maximize } = useMainPage()
    const { getContentTransition } = useSettingGetters()
    const spinning = ref(false)
    const themeOverridesSpin: GlobalThemeOverrides['Spin'] = {
@ -40,7 +40,7 @@ export default defineComponent({
    }
    const globalMainLayoutLoad = getVariableToRefs('globalMainLayoutLoad')
    const layoutContentMaximize = getVariableToRefs('layoutContentMaximize')
-    const { maximize } = useMainPage()
+    const layoutContentSpinning = getVariableToRefs('layoutContentSpinning')

    const setupLayoutContentSpin = () => {
      router.beforeEach(() => {
@ -61,15 +61,20 @@ export default defineComponent({
      getContentTransition,
      layoutContentMaximize,
      maximize,
+      layoutContentSpinning,
    }
  },
  render() {
-    const { globalMainLayoutLoad, layoutContentMaximize } = this
+    const {
+      globalMainLayoutLoad,
+      layoutContentMaximize,
+      layoutContentSpinning,
+    } = this
    const { maximize } = this

    return (
      <NSpin
-        show={this.spinning || !globalMainLayoutLoad}
+        show={this.spinning || !globalMainLayoutLoad || layoutContentSpinning}
        description="loading..."
        size="large"
        themeOverrides={this.themeOverridesSpin}
--- a/src/layout/default/FeatureWrapper/index.tsx
+++ b/src/layout/default/FeatureWrapper/index.tsx
@ -9,7 +9,7 @@
 * @remark 今天也是元气满满撸代码的一天
 */

-import MenuTag from '@/layout/components/MenuTag/index'
+import MenuTag from '@/layout/components/MenuTag'

 export default defineComponent({
  name: 'LayoutFeatureWrapper',
--- a/src/layout/default/HeaderWrapper/index.tsx
+++ b/src/layout/default/HeaderWrapper/index.tsx
@ -10,7 +10,7 @@
 */

 import { NSpace } from 'naive-ui'
-import SiderBar from '@/layout/components/SiderBar/index'
+import SiderBar from '@/layout/components/SiderBar'

 export default defineComponent({
  name: 'LayoutHeaderWrapper',
--- a/src/layout/index.tsx
+++ b/src/layout/index.tsx
@ -12,7 +12,7 @@
 import './index.scss'

 import { NLayout, NLayoutContent } from 'naive-ui'
-import Menu from './components/Menu/index'
+import Menu from './components/Menu'
 import ContentWrapper from '@/layout/default/ContentWrapper'
 import FooterWrapper from '@/layout/default/FooterWrapper'
 import HeaderWrapper from './default/HeaderWrapper'
--- a/src/locales/index.ts
+++ b/src/locales/index.ts
@ -26,6 +26,7 @@
 import { createI18n } from 'vue-i18n'
 import { LOCAL_OPTIONS } from '@/app-config/localConfig'
 import { getAppDefaultLanguage, getAppLocalMessages } from '@/locales/helper'
+import { SYSTEM_DEFAULT_LOCAL } from '@/app-config/localConfig'

 import type { App } from 'vue'
 import type { I18n, I18nOptions } from 'vue-i18n'
@ -33,7 +34,10 @@ import type { I18n, I18nOptions } from 'vue-i18n'
 /** i18n 实例 */
 export let i18n: I18n

-/** 创建 i18n 实例 */
+/**
+ *
+ * 获取所有语言包，创建 i18n 实例
+ */
 const createI18nOptions = async () => {
  const locale = getAppDefaultLanguage()
  const messages = await getAppLocalMessages(LOCAL_OPTIONS)
@ -45,12 +49,18 @@ const createI18nOptions = async () => {
    sync: true,
    missingWarn: false,
    silentFallbackWarn: true,
+    fallbackLocale: SYSTEM_DEFAULT_LOCAL,
  })

  return i18nInstance
 }

-/** 注册 i18n */
+/**
+ *
+ * @param app vue app instance
+ *
+ * 注册 i18n，并且缓存实例
+ */
 export const setupI18n = async (app: App<Element>) => {
  const i18nInstance = await createI18nOptions()

--- a/src/locales/lang/en-US/menu.json
+++ b/src/locales/lang/en-US/menu.json
@ -21,5 +21,6 @@
  "Mock": "Mock",
  "QRCode": "QRCode",
  "SvgIcon": "SVG Icon",
-  "TemplateHooks": "Template Api"
+  "TemplateHooks": "Template Api",
+  "Modal": "Modal"
 }
--- a/src/locales/lang/zh-CN/menu.json
+++ b/src/locales/lang/zh-CN/menu.json
@ -21,5 +21,6 @@
  "Mock": "Mock 数据",
  "QRCode": "二维码",
  "SvgIcon": "SVG 图标",
-  "TemplateHooks": "模板内置 Api"
+  "TemplateHooks": "模板内置 Api",
+  "Modal": "模态框"
 }
--- a/src/main.ts
+++ b/src/main.ts
@ -4,11 +4,11 @@ import '@/styles/base.scss'

 import 'virtual:svg-icons-register' // vite-plugin-svg-icons 脚本，启用 svg 雪碧图

-import { setupRouter } from './router/index'
-import { setupStore } from './store/index'
-import { setupI18n } from './locales/index'
-import { setupDayjs } from './dayjs/index'
-import { setupDirectives } from './directives/index'
+import { setupRouter } from './router'
+import { setupStore } from './store'
+import { setupI18n } from './locales'
+import { setupDayjs } from './dayjs'
+import { setupDirectives } from './directives'

 import type { App as AppType } from 'vue'

--- a/src/router/README.md
+++ b/src/router/README.md
@ -5,8 +5,8 @@
 > router modules 包中的路由模块会与菜单一一映射，也就是说，路由模块的配置结构会影响菜单的展示。当你有子菜单需要配置时，你需要使用该组件。

 ```ts
-import { t } from '@/hooks/web/index'
-import { LAYOUT } from '@/router/constant/index'
+import { t } from '@/hooks/web'
+import { LAYOUT } from '@/router/constant'

 import type { AppRouteRecordRaw } from '@/router/type'

--- a/src/router/constant/index.ts
+++ b/src/router/constant/index.ts
@ -16,4 +16,4 @@
 * }
 * ```
 */
-export const LAYOUT = () => import('@/layout/default/ContentWrapper/index')
+export const LAYOUT = () => import('@/layout/default/ContentWrapper')
--- a/src/router/helper/permission.ts
+++ b/src/router/helper/permission.ts
@ -26,7 +26,7 @@ import { redirectRouterToDashboard } from '@/router/helper/routerCopilot'
 import { WHITE_ROUTES } from '@/app-config/routerConfig'
 import { validRole } from '@/router/helper/routerCopilot'
 import { isValueType } from '@/utils/basic'
-import { useRootRoute } from '@/hooks/template/index'
+import { useRootRoute } from '@/hooks/template'

 import type { Router, RouteLocationNormalized } from 'vue-router'
 import type { AppRouteMeta } from '@/router/type'
--- a/src/router/helper/routerCopilot.ts
+++ b/src/router/helper/routerCopilot.ts
@ -11,11 +11,11 @@

 import { permissionRouter } from './permission'
 import { SETUP_ROUTER_ACTION, SUPER_ADMIN } from '@/app-config/routerConfig'
-import { useVueRouter } from '@/hooks/web/index'
+import { useVueRouter } from '@/hooks/web'
 import { setStorage } from '@/utils/cache'
 import { getAppEnvironment } from '@/utils/basic'
 import { useSigningGetters } from '@/store'
-import { useRootRoute } from '@/hooks/template/index'
+import { useRootRoute } from '@/hooks/template'

 import type { Router } from 'vue-router'
 import type { AppRouteMeta } from '@/router/type'
--- 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/setupHelper'
 import { vueRouterRegister } from '@/router/helper/routerCopilot'
-import { useVueRouter } from '@/hooks/web/index'
+import { useVueRouter } from '@/hooks/web'

 import constantRoutes from './routes'

--- a/src/router/modules/dashboard.ts
+++ b/src/router/modules/dashboard.ts
@ -1,5 +1,5 @@
-import { t } from '@/hooks/web/index'
-import { LAYOUT } from '@/router/constant/index'
+import { t } from '@/hooks/web'
+import { LAYOUT } from '@/router/constant'

 import type { AppRouteRecordRaw } from '@/router/type'

--- a/src/router/modules/demo/axios.ts
+++ b/src/router/modules/demo/axios.ts
@ -1,5 +1,5 @@
-import { t } from '@/hooks/web/index'
-import { LAYOUT } from '@/router/constant/index'
+import { t } from '@/hooks/web'
+import { LAYOUT } from '@/router/constant'

 import type { AppRouteRecordRaw } from '@/router/type'

--- a/src/router/modules/demo/directive.ts
+++ b/src/router/modules/demo/directive.ts
@ -1,5 +1,5 @@
-import { t } from '@/hooks/web/index'
-import { LAYOUT } from '@/router/constant/index'
+import { t } from '@/hooks/web'
+import { LAYOUT } from '@/router/constant'

 import type { AppRouteRecordRaw } from '@/router/type'

--- a/src/router/modules/demo/doc.ts
+++ b/src/router/modules/demo/doc.ts
@ -1,5 +1,5 @@
-import { t } from '@/hooks/web/index'
-import { LAYOUT } from '@/router/constant/index'
+import { t } from '@/hooks/web'
+import { LAYOUT } from '@/router/constant'

 import type { AppRouteRecordRaw } from '@/router/type'

--- a/src/router/modules/demo/echart.ts
+++ b/src/router/modules/demo/echart.ts
@ -1,5 +1,5 @@
-import { t } from '@/hooks/web/index'
-import { LAYOUT } from '@/router/constant/index'
+import { t } from '@/hooks/web'
+import { LAYOUT } from '@/router/constant'

 import type { AppRouteRecordRaw } from '@/router/type'

--- a/src/router/modules/demo/iframe.ts
+++ b/src/router/modules/demo/iframe.ts
@ -1,4 +1,4 @@
-import { t } from '@/hooks/web/index'
+import { t } from '@/hooks/web'

 import type { AppRouteRecordRaw } from '@/router/type'

--- a/src/router/modules/demo/mock.ts
+++ b/src/router/modules/demo/mock.ts
@ -1,5 +1,5 @@
-import { t } from '@/hooks/web/index'
-import { LAYOUT } from '@/router/constant/index'
+import { t } from '@/hooks/web'
+import { LAYOUT } from '@/router/constant'

 import type { AppRouteRecordRaw } from '@/router/type'

--- a/src/router/modules/demo/modal.ts
+++ b/src/router/modules/demo/modal.ts
@ -0,0 +1,17 @@
+import { t } from '@/hooks/web'
+import { LAYOUT } from '@/router/constant'
+
+import type { AppRouteRecordRaw } from '@/router/type'
+
+const mockDemo: AppRouteRecordRaw = {
+  path: '/modal-demo',
+  name: 'ModalDemo',
+  component: () => import('@/views/demo/modal-demo/index'),
+  meta: {
+    i18nKey: t('menu.Modal'),
+    icon: 'other',
+    order: 3,
+  },
+}
+
+export default mockDemo
--- a/src/router/modules/demo/multi-menu.ts
+++ b/src/router/modules/demo/multi-menu.ts
@ -1,5 +1,5 @@
-import { t } from '@/hooks/web/index'
-import { LAYOUT } from '@/router/constant/index'
+import { t } from '@/hooks/web'
+import { LAYOUT } from '@/router/constant'

 import type { AppRouteRecordRaw } from '@/router/type'

--- a/src/router/modules/demo/precision.ts
+++ b/src/router/modules/demo/precision.ts
@ -1,5 +1,5 @@
-import { t } from '@/hooks/web/index'
-import { LAYOUT } from '@/router/constant/index'
+import { t } from '@/hooks/web'
+import { LAYOUT } from '@/router/constant'

 import type { AppRouteRecordRaw } from '@/router/type'

--- a/src/router/modules/demo/qrcode.ts
+++ b/src/router/modules/demo/qrcode.ts
@ -1,5 +1,5 @@
-import { t } from '@/hooks/web/index'
-import { LAYOUT } from '@/router/constant/index'
+import { t } from '@/hooks/web'
+import { LAYOUT } from '@/router/constant'

 import type { AppRouteRecordRaw } from '@/router/type'

--- a/src/router/modules/demo/rely.ts
+++ b/src/router/modules/demo/rely.ts
@ -1,16 +1,16 @@
-import { t } from '@/hooks/web/index'
-import { LAYOUT } from '@/router/constant/index'
+import { t } from '@/hooks/web'
+import { LAYOUT } from '@/router/constant'

 import type { AppRouteRecordRaw } from '@/router/type'

 const rely: AppRouteRecordRaw = {
  path: '/rely',
-  name: 'RelyAbout',
+  name: 'Rely',
  component: LAYOUT,
  meta: {
    i18nKey: t('menu.Rely'),
    icon: 'rely',
-    order: 7,
+    order: 999,
  },
  children: [
    {
@ -18,7 +18,7 @@ const rely: AppRouteRecordRaw = {
      name: 'RelyAbout',
      component: () => import('@/views/demo/rely/views/rely-about/index'),
      meta: {
-        i18nKey: 'RelyAbout',
+        i18nKey: t('menu.RelyAbout'),
      },
    },
  ],
--- a/src/router/modules/demo/router-demo.ts
+++ b/src/router/modules/demo/router-demo.ts
@ -1,5 +1,5 @@
-import { t } from '@/hooks/web/index'
-import { LAYOUT } from '@/router/constant/index'
+import { t } from '@/hooks/web'
+import { LAYOUT } from '@/router/constant'

 import type { AppRouteRecordRaw } from '@/router/type'

--- a/src/router/modules/demo/scroll-reveal.ts
+++ b/src/router/modules/demo/scroll-reveal.ts
@ -4,8 +4,8 @@
 * 所以暂时隐藏该页面
 */

-import { t } from '@/hooks/web/index'
-import { LAYOUT } from '@/router/constant/index'
+import { t } from '@/hooks/web'
+import { LAYOUT } from '@/router/constant'

 import type { AppRouteRecordRaw } from '@/router/type'

--- a/src/router/modules/demo/svg-icons.ts
+++ b/src/router/modules/demo/svg-icons.ts
@ -1,5 +1,5 @@
-import { t } from '@/hooks/web/index'
-import { LAYOUT } from '@/router/constant/index'
+import { t } from '@/hooks/web'
+import { LAYOUT } from '@/router/constant'

 import type { AppRouteRecordRaw } from '@/router/type'

--- a/src/router/modules/demo/table.ts
+++ b/src/router/modules/demo/table.ts
@ -1,5 +1,5 @@
-import { t } from '@/hooks/web/index'
-import { LAYOUT } from '@/router/constant/index'
+import { t } from '@/hooks/web'
+import { LAYOUT } from '@/router/constant'

 import type { AppRouteRecordRaw } from '@/router/type'

--- a/Show More
+++ b/Show More