Merge branch 'main' into ray-template-dev

2025-04-05 07:03:00 +08:00 · 2023-12-06 16:16:26 +08:00 · 2023-12-06 16:16:26 +08:00 · 76d87a9bb1
commit 76d87a9bb1
parent f542b4fd6e 89618e402f
173 changed files with 4267 additions and 1910 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -0,0 +1,5 @@
+node_modules
+.git
+.gitignore
+*.md
+dist
--- a/.env.production
+++ b/.env.production
@ -1,6 +1,4 @@
 #生产环境
-NODE_ENV = 'production'
-
 VITE_APP_URL = '/'

 # office 服务代理地址
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -33,6 +33,7 @@ module.exports = {
    defineExpose: 'readonly',
    withDefaults: 'readonly',
    defineOptions: 'readonly',
+    defineModel: 'readonly',
  },
  rules: {
    'no-undefined': ['error'],
--- a/.evnrc
+++ b/.evnrc
@ -0,0 +1,2 @@
+layout shell zsh
+layout_fnm
--- a/.github/workflows/push-build.yaml
+++ b/.github/workflows/push-build.yaml
@ -2,13 +2,14 @@ on:
  - push
  - pull_request

+
 jobs:
  cache-and-install:
    runs-on: ${{ matrix.os }}
    strategy:
      fail-fast: false
      matrix:
-        node-version: [ 16.x, 18.x ]
+        node-version: [ 18.x ]
        os: [ ubuntu-latest, windows-latest, macos-latest ]
        experimental: [ true ]

--- a/.nvmrc
+++ b/.nvmrc
@ -0,0 +1 @@
+v18.18.2
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,5 +1,154 @@
 # CHANGE LOG

+## 4.4.3
+
+更新 `vue` 版本至 `3.3.10`。
+
+补充了一些代码的注释（慢慢还账-，-）。
+
+## Feats
+
+- 更新 `vue` 版本至 `3.3.10`
+- 新增 `useElementFullscreen` 方法，用于全屏元素。但是该全屏区别于浏览器全屏元素，仅是网页全屏效果
+- 使用 `useElementFullscreen` 方法重构 `maximize` 方法
+- `changeMenuModelValue`
+  - 现在方法支持第三个参数配置跳转时，是否携带参数
+  - 避免递归查找的时候，一些不必要的操作，优化性能
+
+## Fixes
+
+- 修复了通过 `url` 携带参数跳转页面，参数可能会被拦截并且丢失的问题
+- 修复了 `url` 跳转页面导致多次更新的问题
+
+## 4.4.2
+
+这是一个具有破坏性更新的版本，如果你使用了该模板，那么你需要做一些改动。
+
+详细拆分 `hooks` 包的方法。以前的划分方式不太合理，所以进行了一次大的重构。并且新增了一些方法。现在按照方法功能进行分包，更加详细。
+
+剔除 `h` 函数渲染，因为该方法不会受到 `vue` 的编译优化。
+
+针对 `MenuTag` 的定位滚动效果做了优化，现在滚动效果更加平滑。
+
+补充了一些代码的注释（慢慢还账-，-）。
+
+### Feats
+
+- 重新划分 `hooks` 包，按照功能进行拆分，并且新增一些包
+  - `useAppMenu` 方法更名为 `useAppNavigation`
+  - `useMenuTag` 方法更名为 `useSiderBar`
+  - `useRootRoute` 方法更名为 `useAppRoot`
+  - `useMainPage` 包移除
+  - 新增 `useMaximize`, `useSpinning`, `useTheme`, `useWatermark` 方法
+  - 新增 `components` 包，用于存放模板二次封装组件、`NaiveUI` 组件的一些 `hooks` 方法
+  - 每个方法包导出对应的 `ReturnType` 类型
+- `Breadcrumb` 组件新增过渡效果，现在切换路由时会有过渡动画，视觉效果更友好
+- 移除 `getVariable` 方法
+- 移除 `utils/element` 包部分方法
+  - `on`
+  - `off`
+- 移除 `changeSwitcher` 方法，使用 `updateSettingState` 方法代替
+- `useContextmenuCoordinate` 方法支持配置项
+- `MenuTag` 的定位滚动现在支持过渡效果
+
+## Fixes
+
+- 修复 `setRootRoute` 方法执行时提示只读错误导致不能正常修改的问题
+
+## 4.4.1
+
+更新 `vite` 版本至 `5.0.4`。同步修复了一些小问题。
+
+基础性能优化，根据开发模式与构建模式拆分插件启用。避免某些仅仅需要在构建模式的插件在开发模式下也被启用。
+
+新增预构建插件列表。
+
+### Feats
+
+- 补充 components 包组件的 `props` 类型导出
+- 补充 `__DEV__` 全局变量
+- 优化 `precision` 包中的基本运算方法，并且将小数点默认保留 `8` 位
+  - 新增 `isCurrency` 方法检测是否为 `currency.js` 对象
+- 按照构建模式与开发模式拆分插件启用
+- 新增预构建列表
+
+## Fixes
+
+- 修复 `i18n fallbackLocale` 错误配置为 `SYSTEM_DEFAULT_LOCAL` 的问题
+- 修复 `SYSTEM_DEFAULT_LOCAL` 类型定义错误问题
+
+## 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` 方法
+- 更新 `vite` 版本至 `5.0.2`
+
+### Fixes
+
+- 修复国际化切换，由于字段的错误配置导致缓存一直提示 `Fall back to translate` 的问题
+- 修复锁屏不能正常打开、关闭的问题
+
+## 4.3.4
+
+更新了 MenuTag 的样式，现在有更加细腻的过渡动画。
+
+针对 `utils` 下的方法，修复 `utils/element` 中的部分方法因为 `ref` 注册 `dom` 的时候不能正确的触发方法的问题。并且修复了部分方法类型的不准确问题；补充了一些示例。
+
+由于 vite 不再支持显式声明 .env=production 配置文件 NODE_ENV=production，所以该版本移除了配置文件的 NODE_ENV 声明。
+
+修复构建提示循环依赖问题。
+
+### Feats
+
+- 更新了 MenuTag 的动画效果
+- 基于 `print-js` 与 `vue hooks` 开发新 `print` 方法，存放于 `utils/basic`
+- 移除 .env.production 文件的 NODE_ENV 显式声明
+- 优化构建 chunk
+
+### Fixes
+
+- 修复 `utils/element` 方法不能正确获取 `ref` 绑定 `dom` 的问题
+- 修复设置界面抛出只读警告问题
+- 修复构建提示循环依赖问题
+
+## 4.3.3
+
+紧跟尤大大脚步，更新 `vite` 版本至 `5.0.0` 版本！与此同时，更新了配套所有插件！
+
+更新 ROOT_ROUTE 的一些使用方法，该配置方法与原有的方式不变，但是有一个新的功能点则是，该配置项会传递给 global-variable 的 globalRootRoute 属性。并且更改模板原有获取 path 的方法，改为响应式获取。当你要进行动态的维护 Root Route 的时候，该方法可能可以帮助到你 `useAppRoot`。
+
+如果你在更新版本后出现一些奇奇怪怪的问题，不要犹豫，直接删除 `node_modules` 后再重新安装依赖，这是缓存导致的问题。
+
+### Feats
+
+- 更新 `vite` 版本至 `5.0.0`
+- 升级所有配套插件
+- 升级 ROOT_ROUTE 配置与使用
+
+### Fixes
+
+- 修复不能正确关闭标签页问题
+- 修复不能正确识别是否能关闭标签页问题
+- 修复 `closeAll` 方法导致标签页闪烁问题
+- 修改 useVueRouter 注册时机，避免该方法使用的 HMR 报错问题
+
 ## 4.3.2

 升级 `vue` 版本至最新 `v3.3.8`。
@ -262,7 +411,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/11
+++ b/11
@ -0,0 +1,11 @@
+FROM debian:11
+COPY . /app
+WORKDIR /app
+RUN apt-get update
+RUN apt-get install -y wget curl make sudo unzip
+RUN curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
+RUN apt-get install -y nodejs
+RUN npm i -g pnpm
+RUN pnpm install
+EXPOSE 9527
+CMD [ "pnpm", "dev" ]
--- 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>

@ -9,13 +9,14 @@

 简体中文 | [English](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/README.md)

-一个基于 vite4.x & ts(x) & pinia & vue3.x 的中后台模板
+一个 `免费`、`高效`、`特性完整` 并且基于 vite5.x & ts(x) & pinia & vue3.x 等最新技术的中后台模板。

 </div>

 ## ✨ 特性

- **最新技术栈**：使用 vue3.x/vite4.x/pinia 等前端前沿技术开发
+- **靠爱发电**：几乎包含市面常见的模板特性并且全部免费使用
+- **最新技术栈**：使用 vue3.x/vite5.x/pinia 等前端前沿技术开发
 - **TypeScript**：应用程序级 JavaScript 的语言
 - **主题**：可配置的主题
 - **国际化**：内置完善的国际化方案
@ -26,6 +27,7 @@
 - **缓存**：任意深度页面缓存
 - **SVG**：内置 svg icon 解决方案
 - **独立的 Data Methods Views**：解耦管理的数据、方法、视图，放心二次开发
+- **模板专属 hooks**：基于模板特性封装的 hooks 让你更加方便的使用模板一些功能

 ## 🪄 预览地址

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

@ -9,23 +9,25 @@

 English | [简体中文](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/README-ZH.md)

-A middle and backend template based on vite4.x & ts(x) & pinia & vue3.x
+A `free`, `efficient`, `complete with features` middle and backend template based on the latest technologies such as vite5.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
+- **Power by love**: Contains almost all common template features on the market and all are free to use.
+- **Latest Technology Stack**：Developed using front-end cutting-edge technologies such as vue3.x/vite5.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
+- **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.
+- **Template Specific Hooks** : Hooks based on the template feature package make it easier to use some of the features of the template.

 ## 🪄 Preview

--- a/cfg.ts
+++ b/cfg.ts
@ -88,7 +88,6 @@ const config: AppConfigExport = {
    host: '0.0.0.0',
    port: 9527,
    open: false,
-    https: false,
    strictPort: false,
    fs: {
      strict: false,
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -0,0 +1,14 @@
+version: '3'
+
+services:
+  ray-template:
+    build: .
+    container_name: ray-template
+    restart: unless-stopped
+    environment:
+      - TZ=Asia/Shanghai
+    ports:
+      - "9527:9527"
+    # if you want to persist
+#    volumes:
+#      - ./app:/app
--- a/package.json
+++ b/package.json
@ -1,15 +1,15 @@
 {
  "name": "ray-template",
  "private": false,
-  "version": "4.3.2",
+  "version": "4.4.3",
  "type": "module",
  "engines": {
-    "node": ">=16.0.0",
+    "node": "^18.0.0 || >=20.0.0",
    "pnpm": ">=8.0.0"
  },
  "scripts": {
    "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build --mode production",
+    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "test": "vue-tsc --noEmit && vite build --mode test",
    "dev-build": "vue-tsc --noEmit && vite build --mode development",
@ -24,74 +24,76 @@
    ]
  },
  "dependencies": {
-    "@vueuse/core": "^9.13.0",
+    "@vueuse/core": "^10.6.1",
    "awesome-qr": "2.1.5-rc.0",
-    "axios": "^1.2.0",
+    "axios": "^1.5.0",
    "clipboard": "^2.0.11",
    "crypto-js": "^4.1.1",
    "currency.js": "^2.0.4",
-    "dayjs": "^1.11.7",
+    "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",
-    "pinia": "^2.1.4",
-    "pinia-plugin-persistedstate": "^3.1.0",
+    "pinia": "^2.1.6",
+    "pinia-plugin-persistedstate": "^3.2.0",
    "print-js": "^1.6.0",
-    "vue": "^3.3.8",
+    "vue": "^3.3.10",
    "vue-hooks-plus": "1.8.5",
-    "vue-i18n": "^9.2.2",
+    "vue-i18n": "^9.7.1",
    "vue-router": "^4.2.4",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
-    "@babel/core": "^7.20.2",
-    "@babel/eslint-parser": "^7.19.1",
-    "@commitlint/cli": "^17.4.2",
-    "@commitlint/config-conventional": "^17.4.2",
-    "@intlify/unplugin-vue-i18n": "^0.12.1",
+    "@babel/core": "^7.23.2",
+    "@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.7",
+    "@types/lodash-es": "^4.17.11",
    "@types/mockjs": "1.0.7",
-    "@typescript-eslint/eslint-plugin": "^5.61.0",
-    "@typescript-eslint/parser": "^5.61.0",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
+    "@typescript-eslint/parser": "^6.5.0",
+    "@vitejs/plugin-vue": "^4.4.1",
+    "@vitejs/plugin-vue-jsx": "^3.0.2",
    "@vue-hooks-plus/resolvers": "1.2.4",
-    "@vue/eslint-config-prettier": "^7.1.0",
+    "@vue/eslint-config-prettier": "^8.0.0",
    "@vue/eslint-config-typescript": "^11.0.3",
-    "autoprefixer": "^10.4.8",
-    "depcheck": "^1.4.3",
-    "eslint": "^8.44.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-config-standard-with-typescript": "^23.0.0",
-    "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-n": "^15.0.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-vue": "^9.15.1",
+    "autoprefixer": "^10.4.15",
+    "depcheck": "^1.4.5",
+    "eslint": "^8.52.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-standard-with-typescript": "^39.0.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-n": "^16.2.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-vue": "^9.18.1",
    "husky": "^8.0.3",
-    "lint-staged": "^13.1.0",
-    "postcss": "^8.1.0",
+    "lint-staged": "^15.1.0",
+    "postcss": "^8.4.31",
    "postcss-px-to-viewport-8-plugin": "1.2.2",
-    "prettier": "^2.7.1",
-    "rollup-plugin-visualizer": "^5.8.3",
-    "sass": "1.54.3",
+    "prettier": "^3.0.3",
+    "rollup-plugin-visualizer": "^5.9.2",
+    "sass": "1.69.5",
    "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",
+    "typescript": "^5.2.2",
+    "unplugin-auto-import": "^0.16.6",
+    "unplugin-vue-components": "^0.25.2",
+    "vite": "^5.0.4",
+    "vite-plugin-cdn2": "0.15.2",
    "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-ejs": "^1.6.4",
+    "vite-plugin-ejs": "^1.7.0",
    "vite-plugin-eslint": "1.8.1",
-    "vite-plugin-imp": "^2.3.1",
-    "vite-plugin-inspect": "^0.7.26",
-    "vite-plugin-mock-dev-server": "1.3.0",
+    "vite-plugin-imp": "^2.4.0",
+    "vite-plugin-inspect": "^0.7.38",
+    "vite-plugin-mock-dev-server": "1.3.4",
    "vite-plugin-svg-icons": "^2.0.1",
    "vite-svg-loader": "^4.0.0",
-    "vue-tsc": "^1.8.4"
+    "vue-tsc": "^1.8.8"
  },
  "description": "<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->",
  "main": "index.ts",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- 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'
@ -27,7 +27,7 @@ const LockScreen = defineComponent({
    const inputInstRef = ref<InputInst | null>(null)

    const { setLockAppScreen } = useAppLockScreen()
-    const { changeSwitcher } = useSettingActions()
+    const { updateSettingState } = useSettingActions()

    const state = reactive({
      lockCondition: useCondition(),
@ -38,7 +38,7 @@ const LockScreen = defineComponent({
      formInstRef.value?.validate((error) => {
        if (!error) {
          setLockAppScreen(true)
-          changeSwitcher(true, 'lockScreenSwitch')
+          updateSettingState('lockScreenSwitch', true)

          state.lockCondition = useCondition()
        }
--- 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'

@ -29,7 +29,7 @@ export default defineComponent({
    const inputInstRef = ref<InputInst | null>(null)

    const { logout } = useSigningActions()
-    const { changeSwitcher } = useSettingActions()
+    const { updateSettingState } = useSettingActions()
    const { setLockAppScreen } = useAppLockScreen()
    const { isTabletOrSmaller } = useDevice()

@ -64,7 +64,7 @@ export default defineComponent({
        onPositiveClick: () => {
          logout()
          setTimeout(() => {
-            changeSwitcher(false, 'lockScreenSwitch')
+            updateSettingState('lockScreenSwitch', false)
          })
        },
      })
@ -75,7 +75,7 @@ export default defineComponent({
      formRef.value?.validate((error) => {
        if (!error) {
          setLockAppScreen(false)
-          changeSwitcher(false, 'lockScreenSwitch')
+          updateSettingState('lockScreenSwitch', false)

          state.lockCondition = useCondition()
        }
--- 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 { updateSettingState } = useSettingActions()
+    const { getLockScreenSwitch } = useSettingGetters()
+    const lockScreenSwitchRef = computed({
+      get: () => getLockScreenSwitch.value,
+      set: (val) => {
+        updateSettingState('lockScreenSwitch', val)
+      },
+    })

    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-components/provider/AppWatermarkProvider/index.tsx
+++ b/src/app-components/provider/AppWatermarkProvider/index.tsx
@ -15,25 +15,29 @@
 *
 * 该组件启用时，会在全局（包括首页）展示
 * 如果你不希望在登录页显示，可以手动将该组件放置于 Layout 中
+ *
+ * 当然你也可以通过 useWatermark hook 自定义控制水印的显示以及内容
 */

 import { NWatermark } from 'naive-ui'

-import { APP_WATERMARK_CONFIG } from '@/app-config/appConfig'
 import { useSettingGetters } from '@/store'

 export default defineComponent({
  name: 'AppWatermarkProvider',
  setup() {
-    const { getWatermarkSwitch } = useSettingGetters()
+    const { getWatermarkSwitch, getWatermarkConfig } = useSettingGetters()

    return {
      getWatermarkSwitch,
+      getWatermarkConfig,
    }
  },
  render() {
-    return this.getWatermarkSwitch ? (
-      <NWatermark cross fullscreen {...APP_WATERMARK_CONFIG} />
+    const { getWatermarkConfig, getWatermarkSwitch } = this
+
+    return getWatermarkSwitch ? (
+      <NWatermark cross fullscreen {...getWatermarkConfig} />
    ) : null
  },
 })
--- a/src/app-config/appConfig.ts
+++ b/src/app-config/appConfig.ts
@ -46,12 +46,15 @@ export const PRE_LOADING_CONFIG: PreloadingConfig = {

 /**
 *
- * 配置根页面
- * 该项目所有重定向至首页, 都依赖该配置项
+ * 配置根路由信息
+ * 模板维护一个根路由 ROOT_ROUTE，所有的重定向操作、回到 Layout Root Path 操作都依赖该 path
 *
- * 如果修改了该项目的首页路由配置, 需要更改该配置项, 以免重定向首页操作出现错误
+ * 该变量的值，会传递给 globalRootRoute
+ * 这么做也是为了能够在兼容老版本的模板，并且也是为了能够动态的维护根路由信息
+ *
+ * 有些时候，如果你希望动态的维护 Root Route 信息，可以使用 useAppRoot 方法
 */
-export const ROOT_ROUTE: Readonly<RootRoute> = {
+export const ROOT_ROUTE: RootRoute = {
  name: 'Dashboard',
  path: '/dashboard',
 }
@ -115,7 +118,7 @@ export const APP_CATCH_KEY = {
 * 具体配置信息查看官网: https://www.naiveui.com/zh-CN/dark/components/watermark#API
 */
 export const APP_WATERMARK_CONFIG = {
-  content: 'Tring be better~',
+  content: 'Trying be better~',
  fontSize: 16,
  lineHeight: 16,
  width: 384,
--- 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: TemplateLocale<LocalOptions> = 'zh-CN'
+
 /**
 *
 * i18n 国际化配置与 dayjs 配置的映射入口
--- a/src/app-config/requestConfig.ts
+++ b/src/app-config/requestConfig.ts
@ -13,7 +13,7 @@ import type { AxiosConfig } from '@/types/modules/appConfig'

 /** axios 相关配置 */
 export const AXIOS_CONFIG: AxiosConfig = {
-  baseURL: '', // `import.meta.env`,
+  baseURL: '', // `const { MODE } = getAppEnvironment()`,
  withCredentials: false, // 是否允许跨域携带 `cookie`
  timeout: 5 * 1000,
  headers: {
--- a/src/components/RChart/index.ts
+++ b/src/components/RChart/index.ts
@ -0,0 +1,11 @@
+import RChart from './src'
+import chartProps from './src/props'
+
+import type { ExtractPublicPropTypes } from 'vue'
+
+import type * as RChartType from './src/type'
+
+export type ChartProps = ExtractPublicPropTypes<typeof chartProps>
+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,10 @@
-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'
+import type { ExtractPublicPropTypes } from 'vue'
+
+export type CollapseGridProps = ExtractPublicPropTypes<typeof collapseGridProps>
+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/RIcon/index.ts
+++ b/src/components/RIcon/index.ts
@ -0,0 +1,8 @@
+import RIcon from './src'
+import iconProps from './src/props'
+
+import type { ExtractPublicPropTypes } from 'vue'
+
+export type IconProps = ExtractPublicPropTypes<typeof iconProps>
+
+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,10 @@
-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'
+import type { ExtractPublicPropTypes } from 'vue'

-export default RIframe
-export { props }
-export type { RIframeInst }
+export type IframeProps = ExtractPublicPropTypes<typeof iframeProps>
+export type { RIframeType }
+
+export { RIframe, iframeProps }
--- a/src/components/RIframe/src/index.tsx
+++ b/src/components/RIframe/src/index.tsx
@ -13,9 +13,10 @@ import './index.scss'

 import { NSpin } from 'naive-ui'

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

 export default defineComponent({
  name: 'RIframe',
@ -53,19 +54,13 @@ export default defineComponent({
      }
    }

+    useEventListener(iframeRef, 'load', iframeLoadSuccess)
+    useEventListener(iframeRef, 'error', iframeLoadError)
+
    expose({
      iframeInst: iframeRef,
    })

-    onMounted(() => {
-      on(iframeRef.value, 'load', iframeLoadSuccess.bind(this))
-      on(iframeRef.value, 'error', iframeLoadError)
-    })
-    onBeforeUnmount(() => {
-      off(iframeRef.value, 'load', iframeLoadSuccess)
-      off(iframeRef.value, 'error', iframeLoadError)
-    })
-
    return {
      cssVars,
      iframeRef,
--- a/src/components/RModal/index.ts
+++ b/src/components/RModal/index.ts
@ -0,0 +1,8 @@
+import RModal from './src/Modal'
+import modalProps from './src/props'
+
+import type { ExtractPublicPropTypes } from 'vue'
+
+export type ModalProps = ExtractPublicPropTypes<typeof modalProps>
+
+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,57 @@
+import interact from 'interactjs'
+
+import type { ModalProps } from 'naive-ui'
+
+/**
+ *
+ * @param bindModal modal 预设元素
+ * @param preset 预设类型
+ *
+ * 根据预设模态框设置拖拽效果
+ * 但是该效果有且仅有 card, dialog 有效
+ *
+ * 默认添加 30ms 延迟，避免诡异问题
+ */
+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,8 @@
-import RMoreDropdown from './src/index'
-import props from './src/props'
+import RMoreDropdown from './src'
+import moreDropdownProps from './src/props'

-export default RMoreDropdown
-export { props }
+import type { ExtractPublicPropTypes } from 'vue'
+
+export type MoreDropdownProps = ExtractPublicPropTypes<typeof moreDropdownProps>
+
+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,10 @@
-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'
+import type { ExtractPublicPropTypes } from 'vue'
+
+export type QRCodeProps = ExtractPublicPropTypes<typeof qrcodeProps>
+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,10 @@
 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'
+import type { ExtractPublicPropTypes } from 'vue'
+
+export type TableProps = ExtractPublicPropTypes<typeof tableProps>
+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'

@ -35,13 +35,23 @@ export default defineComponent({
    const rTableInst = ref<DataTableInst | null>(null)
    const wrapperRef = ref<HTMLElement | null>(null)

-    const uuidWrapper = uuid(16)
-    const uuidTable = uuid(16)
+    const uuidWrapper = uuid(16) // wrapper id
+    const uuidTable = uuid(16) // table id
+    /**
+     *
+     * x: 横坐标
+     * y: 纵坐标
+     * showContextMenu: 是否显示右键菜单
+     */
    const contextMenuReactive = reactive({
      x: 0,
      y: 0,
      showContextMenu: false,
    })
+    /**
+     *
+     * size: table size，内部私有状态管理
+     */
    const privateReactive = reactive({
      size: props.size,
    })
@ -90,10 +100,22 @@ export default defineComponent({
      }
    }

+    /**
+     *
+     * @param size table size
+     *
+     * 修改 table size
+     */
    const changeTableSize = (size: ComponentSize) => {
      privateReactive.size = size
    }

+    /**
+     *
+     * @param options table columns
+     *
+     * 更新 table columns，同时触发 onUpdateColumns 和 onUpdate:columns 事件
+     */
    const updateTableColumn = (options: CType[]) => {
      const { onUpdateColumns, 'onUpdate:columns': $onUpdateColumns } = props

@ -105,6 +127,11 @@ export default defineComponent({
      }
    }

+    /**
+     *
+     * 处理自定义的 toolOptions
+     * 匹配所有符合条件的 toolOptions，然后执行
+     */
    const renderToolOptions = () => {
      const { toolOptions } = props

@ -113,6 +140,12 @@ export default defineComponent({
        .map((curr) => (typeof curr === 'function' ? curr() : curr))
    }

+    /**
+     *
+     * @param p props
+     *
+     * 处理 toolOptions，合并渲染所有的 toolOptions
+     */
    const tool = (p: typeof props) => {
      const renderDefaultToolOptions = () => (
        <>
@ -163,7 +196,6 @@ export default defineComponent({
    }
  },
  render() {
-    /* eslint-disable @typescript-eslint/no-explicit-any */
    const { tool } = this

    return (
@ -208,6 +240,7 @@ export default defineComponent({
          }),
          'header-extra': () => (
            <NSpace wrapItem={false} align="center">
+              {/* eslint-disable @typescript-eslint/no-explicit-any */}
              {tool(this.$props as any)}
            </NSpace>
          ),
--- 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'
@ -24,11 +32,9 @@ import type { MaybeArray } from '@/types/modules/utils'

 type FixedClick = (type: 'left' | 'right', option: C, index: number) => void

-const renderSwitcherIcon = () =>
-  h(RIcon, {
-    name: 'draggable',
-    size: config.tableIconSize,
-  })
+const renderSwitcherIcon = () => (
+  <RIcon name="draggable" size={config.tableIconSize} />
+)

 const RowIconRender = ({
  icon,
--- 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,16 +10,16 @@
 */

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

 import config from '../config'
 import props from '../props'
-import print from 'print-js'
+import { print } from '@/utils/basic'

 import type { TableProvider } from '../type'

 export default defineComponent({
-  name: 'PrintTable',
+  name: 'TablePrint',
  props,
  setup(props) {
    const { uuidTable } = inject<TableProvider>(
@ -39,7 +39,7 @@ export default defineComponent({
          : '表格',
      })

-      print(options)
+      print(document.getElementById(uuidTable), options)
    }

    return {
--- 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,12 @@
+import RTransitionComponent from './src/index.vue'
+import transitionComponentProps from './src/props'
+
+import type * as RTransitionComponentType from './src/type'
+import type { ExtractPublicPropTypes } from 'vue'
+
+export type TransitionComponentProps = ExtractPublicPropTypes<
+  typeof transitionComponentProps
+>
+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,18 @@
+// 导出所有自定义组件
+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'
+
+// 导出自定义组件类型
+export type * from './RChart/src/type'
+export type * from './RCollapseGrid/src/type'
+export type * from './RIframe/src/type'
+export type * from './RQRCode/src/type'
+export type * from './RTable/src/type'
+export type * from './RTransitionComponent/src/type'
--- a/src/directives/helper/combine.ts
+++ b/src/directives/helper/combine.ts
@ -17,17 +17,20 @@ export const combineDirective = <
 >(
  directiveModules: T,
 ) => {
-  const directives = Object.keys(directiveModules).reduce((pre, curr) => {
-    const fc = directiveModules[curr]?.default
+  const directives = Object.keys(directiveModules).reduce(
+    (pre, curr) => {
+      const fc = directiveModules[curr]?.default

-    if (typeof fc === 'function') {
-      pre[curr] = fc
+      if (typeof fc === 'function') {
+        pre[curr] = fc

-      return pre
-    } else {
-      throw new TypeError(`directiveModules: ${curr} is not function`)
-    }
-  }, {} as Record<K, CustomDirectiveFC<unknown, unknown>>)
+        return pre
+      } else {
+        throw new TypeError(`directiveModules: ${curr} is not function`)
+      }
+    },
+    {} as Record<K, CustomDirectiveFC<unknown, unknown>>,
+  )

  return directives
 }
--- a/src/directives/modules/debounce/index.ts
+++ b/src/directives/modules/debounce/index.ts
@ -15,7 +15,7 @@
 */

 import { debounce } from 'lodash-es'
-import { on, off } from '@use-utils/element'
+import { useEventListener } from '@vueuse/core'

 import type { DebounceBindingOptions } from './type'
 import type { AnyFC } from '@/types/modules/utils'
@ -27,6 +27,7 @@ const debounceDirective: CustomDirectiveFC<
  DebounceBindingOptions
 > = () => {
  let debounceFunction: DebouncedFunc<AnyFC> | null
+  let cleanup: () => void

  return {
    beforeMount: (el, { value }) => {
@ -38,14 +39,14 @@ const debounceDirective: CustomDirectiveFC<

      debounceFunction = debounce(func, wait, Object.assign({}, options))

-      on(el, trigger, debounceFunction)
+      cleanup = useEventListener(el, trigger, debounceFunction)
    },
    beforeUnmount: (el, { value }) => {
      const { trigger = 'click' } = value

      if (debounceFunction) {
        debounceFunction.cancel()
-        off(el, trigger, debounceFunction)
+        cleanup?.()
      }

      debounceFunction = null
--- a/src/directives/modules/throttle/index.ts
+++ b/src/directives/modules/throttle/index.ts
@ -15,7 +15,7 @@
 */

 import { throttle } from 'lodash-es'
-import { on, off } from '@use-utils/element'
+import { useEventListener } from '@vueuse/core'

 import type { ThrottleBindingOptions } from './type'
 import type { AnyFC } from '@/types/modules/utils'
@ -27,6 +27,7 @@ const throttleDirective: CustomDirectiveFC<
  ThrottleBindingOptions
 > = () => {
  let throttleFunction: DebouncedFunc<AnyFC> | null
+  let cleanup: () => void

  return {
    beforeMount: (el, { value }) => {
@ -38,14 +39,12 @@ const throttleDirective: CustomDirectiveFC<

      throttleFunction = throttle(func, wait, Object.assign({}, options))

-      on(el, trigger, throttleFunction)
+      useEventListener(el, trigger, throttleFunction)
    },
-    beforeUnmount: (el, { value }) => {
-      const { trigger = 'click' } = value
-
+    beforeUnmount: () => {
      if (throttleFunction) {
        throttleFunction.cancel()
-        off(el, trigger, throttleFunction)
+        cleanup?.()
      }

      throttleFunction = null
--- 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/index.ts
+++ b/src/global-variable/index.ts
@ -9,10 +9,6 @@
 * @remark 今天也是元气满满撸代码的一天
 */

-import { setVariable, getVariable, getVariableToRefs } from './variable'
+export * from './variable'

-import type { VariableState, VariableStateKey } from './variable'
-
-export { setVariable, getVariable, getVariableToRefs }
-
-export type { VariableState, VariableStateKey }
+export type * from './variable'
--- a/src/global-variable/variable.ts
+++ b/src/global-variable/variable.ts
@ -11,35 +11,62 @@

 /**
 *
- * 存放全局临时变量，脱离 pinia 使用的变量
+ * 存放全局响应式变量，脱离 pinia 使用的变量
 * 简单的全局变量，并不需要复杂的控制流程
 *
 * 使用方法
+ *
 * @example
- *
- * 获取普通变量
- * getVariable('target key', 'default value')
- *
 * 获取响应式变量
 * getVariableToRefs('target key')
 *
 * 更改 state 变量
 * setVariable('key', 'value')
+ *
+ * 创建响应式说仓库
+ * createVariableState({ your state })
 */

-import type { AnyFC } from '@/types/modules/utils'
+import { ROOT_ROUTE, APP_WATERMARK_CONFIG } from '@/app-config/appConfig'
+import { cloneDeep } from 'lodash-es'

+import type { AnyFC } from '@/types/modules/utils'
+import type { Mutable } from '@/types/modules/helper'
+
+/**
+ *
+ * 全局响应式变量
+ * 不推荐直接访问、设置该 state。并且更不建议在组件中直接使用该 state
+ * 请使用 `getVariable`、`getVariableToRefs`、`setVariable` 方法进行操作
+ *
+ * 为什么会有该变量存在，是因为在有时候你希望在 vue 声明之后就调用该变量，但是又不想使用 pinia
+ * 你可以使用该变量，但是请注意，该变量不会被 pinia 管理，所以你需要自己手动管理
+ */
 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

 export type VariableStateKey = keyof VariableState

+/**
+ *
+ * @param key variable key
+ * @param value variable value
+ * @param cb 设置完成后的回调函数
+ *
+ * 手动设置 variableState 的值
+ *
+ * @example
+ * setVariable('globalSpinning', true) // 设置全局加载状态为 true
+ * setVariable('globalSpinning', true, () => {}) // 设置全局加载状态为 true，并且在设置完成后执行回调函数
+ */
 export function setVariable<T extends VariableStateKey, FC extends AnyFC>(
  key: T,
  value: VariableState[T],
@ -50,15 +77,15 @@ export function setVariable<T extends VariableStateKey, FC extends AnyFC>(
  cb?.()
 }

-export function getVariable<T extends VariableStateKey>(
-  key: VariableStateKey,
-  defaultValue?: VariableState[T],
-) {
-  const v = variableState[key]
-
-  return v ? readonly(variableState)[key] : defaultValue
-}
-
+/**
+ *
+ * @param key 目标值 key
+ *
+ * 返回目标值的响应式 ref
+ *
+ * @example
+ * getVariableToRefs('globalSpinning') // 返回 ref<boolean>
+ */
 export function getVariableToRefs<K extends VariableStateKey>(key: K) {
  return readonly(toRef<VariableState, K>(variableState, key))
 }
--- a/src/hooks/components/index.ts
+++ b/src/hooks/components/index.ts
@ -0,0 +1 @@
+export * from './useContextmenuCoordinate'
--- a/src/hooks/components/useContextmenuCoordinate.ts
+++ b/src/hooks/components/useContextmenuCoordinate.ts
@ -0,0 +1,95 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-12-01
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { useEventListener, onClickOutside } from '@vueuse/core'
+
+import type { BasicTarget } from '@/types/modules/vue'
+import type {
+  MaybeElementRef,
+  MaybeElement,
+  UseEventSourceOptions,
+  MaybeRefOrGetter,
+} from '@vueuse/core'
+
+/**
+ *
+ * @param target 绑定元素
+ *
+ * 右键点击元素时，获取鼠标坐标。该方法结合 NDropdown 组件使用，可以实现右键菜单功能
+ *
+ * @example
+ * const target = ref<HTMLElement | null>(null)
+ * const { x, y, show, stop } = useContextmenuCoordinate(target)
+ *
+ * 如果需要手动停止右键菜单，可以调用 stop 方法
+ * stop()
+ *
+ * <NDropdown show={show} x={x} y={y} trigger="manual" placement="bottom-start" />
+ */
+export const useContextmenuCoordinate = (
+  target: BasicTarget,
+  options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>,
+) => {
+  const x = ref(0) // 鼠标 x 坐标
+  const y = ref(0) // 鼠标 y 坐标
+  const show = ref(false) // 是否显示右键菜单
+
+  /**
+   *
+   * @param evt 鼠标事件
+   *
+   * 鼠标右键点击事件，并且阻止默认事件
+   * 设置坐标后激活右键菜单
+   */
+  const bindContextMenuEvent = (evt: Event) => {
+    evt.preventDefault()
+
+    show.value = false
+
+    nextTick().then(() => {
+      const { clientX, clientY } = evt as MouseEvent
+
+      x.value = clientX
+      y.value = clientY
+      show.value = true
+    })
+  }
+
+  onClickOutside(target as MaybeElementRef<MaybeElement>, () => {
+    show.value = false
+  })
+
+  const cleanupContextmenu = useEventListener(
+    target,
+    'contextmenu',
+    bindContextMenuEvent,
+    options,
+  )
+  const cleanupClick = useEventListener(target, 'click', () => {
+    show.value = false
+  })
+
+  const stop = () => {
+    cleanupContextmenu()
+    cleanupClick()
+  }
+
+  return {
+    stop,
+    x: readonly(x),
+    y: readonly(y),
+    show,
+  }
+}
+
+export type UseContextmenuCoordinateReturnType = ReturnType<
+  typeof useContextmenuCoordinate
+>
--- a/src/hooks/template/index.ts
+++ b/src/hooks/template/index.ts
@ -1,9 +1,7 @@
-import { useAppMenu } from './useAppMenu'
-import { useMainPage } from './useMainPage'
-import { useMenuTag } from './useMenuTag'
-
-export type { MaximizeOptions } from './useMainPage'
-export type { Target } from './useAppMenu'
-export type { CloseMenuTag } from './useMenuTag'
-
-export { useAppMenu, useMainPage, useMenuTag }
+export * from './useMaximize'
+export * from './useSpinning'
+export * from './useWatermark'
+export * from './useTheme'
+export * from './useSiderBar'
+export * from './useAppNavigation'
+export * from './useAppRoot'
--- a/src/hooks/template/useAppNavigation.ts
+++ b/src/hooks/template/useAppNavigation.ts
@ -20,7 +20,7 @@ export type Target = number | AppMenuOption
 * 导航函数
 * 但是该方法仅限于在登入后调用
 */
-export function useAppMenu() {
+export function useAppNavigation() {
  const { changeMenuModelValue } = useMenuActions()

  /**
@ -32,6 +32,10 @@ export function useAppMenu() {
   * - 如果传递参数需要导航的菜单项为非根菜单项，会自动的递归导航至第一个子菜单项
   *
   * 当传递参数为 AppMenuOption 类型，会直接导航至目标页面。该方法可以不区分菜单层级
+   *
+   * @example
+   * navigationTo(1) // 导航至第二个菜单项，如果为根菜单项，会自动的递归导航至第一个子菜单项
+   * navigationTo({ AppMenuOption }) // 导航至目标菜单项
   */
  const navigationTo = (target: Target) => {
    if (typeof target === 'number') {
@ -80,3 +84,5 @@ export function useAppMenu() {
    navigationTo,
  }
 }
+
+export type UseAppNavigationReturnType = ReturnType<typeof useAppNavigation>
--- a/src/hooks/template/useAppRoot.ts
+++ b/src/hooks/template/useAppRoot.ts
@ -0,0 +1,60 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-11-17
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { setVariable, getVariableToRefs } from '@/global-variable'
+import { cloneDeep } from 'lodash-es'
+
+import type { DeepMutable } from '@/types/modules/helper'
+
+export function useAppRoot() {
+  const globalRootRoute = getVariableToRefs('globalRootRoute')
+
+  /**
+   *
+   * @remark 获取根路由
+   */
+  const getRootRoute = computed(() => globalRootRoute.value)
+  /**
+   *
+   * @remark 获取根路由 path
+   */
+  const getRootPath = computed(() => globalRootRoute.value.path)
+  /**
+   *
+   * @remark 获取根路由 name
+   */
+  const getRootName = computed(() => globalRootRoute.value.name)
+
+  /**
+   *
+   * @param route 根路由配置内容
+   *
+   * 设置根路由
+   *
+   * @example
+   * setRootRoute({ path: '/your root path', name: 'your root name' })
+   */
+  const setRootRoute = (route: DeepMutable<typeof globalRootRoute.value>) => {
+    const routeRef = getVariableToRefs('globalRootRoute')
+    const assignRoute = Object.assign(cloneDeep(routeRef.value), route)
+
+    setVariable('globalRootRoute', assignRoute)
+  }
+
+  return {
+    getRootRoute,
+    getRootPath,
+    getRootName,
+    setRootRoute,
+  }
+}
+
+export type UseAppRootReturnType = ReturnType<typeof useAppRoot>
--- a/src/hooks/template/useAppSetting.ts
+++ b/src/hooks/template/useAppSetting.ts
@ -1,32 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-11-16
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-import { useSettingActions } from '@/store'
-
-export function useApp() {
-  /**
-   *
-   * @param theme 当前主题色
-   *
-   * 当前主题仅有明暗两套
-   * - true: 暗色
-   * - false: 亮色
-   */
-  const changeTheme = (theme: boolean) => {
-    const { changeSwitcher } = useSettingActions()
-
-    changeSwitcher(theme, 'appTheme')
-  }
-
-  return {
-    changeTheme,
-  }
-}
--- a/src/hooks/template/useMainPage.ts
+++ b/src/hooks/template/useMainPage.ts
@ -1,88 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-11-03
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-import { setVariable, getVariableToRefs } from '@/global-variable/index'
-import { LAYOUT_CONTENT_REF } from '@/app-config/routerConfig'
-import { addStyle, removeStyle } from '@/utils/element'
-import { unrefElement } from '@/utils/vue/index'
-import { useWindowSize } from '@vueuse/core'
-
-import type { Ref } from 'vue'
-
-export interface MaximizeOptions {
-  zIndex?: string
-}
-
-export function useMainPage() {
-  /**
-   *
-   * @param wait 延迟时长
-   *
-   * 刷新当前路由
-   */
-  const reload = (wait = 800) => {
-    setVariable('globalMainLayoutLoad', false)
-
-    setTimeout(() => setVariable('globalMainLayoutLoad', true), wait)
-  }
-
-  /**
-   *
-   * 当前 LayoutContent 是处于否全屏状态
-   * - true: 全屏
-   * - false: 非全屏
-   */
-  const isLayoutContentMaximized = () =>
-    computed(() => getVariableToRefs('layoutContentMaximize').value)
-
-  /**
-   *
-   * @param full 是否网页全屏内容区域
-   *
-   * 该方法仅针对于 LayoutContent 区域，并且依赖全局属性 layoutContentMaximize
-   */
-  const maximize = (full: boolean, options?: MaximizeOptions) => {
-    const contentEl = unrefElement(LAYOUT_CONTENT_REF as Ref<HTMLElement>)
-
-    if (contentEl) {
-      const { left, top } = contentEl.getBoundingClientRect() // 使用 left, top 计算 translate 偏移
-      const { height } = useWindowSize() // 获取实际高度避免 100vh 会导致手机端浏览器获取不准确问题
-      const { zIndex = '99' } = options ?? {}
-
-      full
-        ? addStyle(contentEl, {
-            position: 'fixed',
-            width: '100%',
-            height: `${height.value}px`,
-            transform: `translate(-${left}px, -${top}px)`,
-            transition: 'all 0.3s var(--r-bezier)',
-            zIndex,
-          })
-        : removeStyle(contentEl, [
-            'position',
-            'width',
-            'height',
-            'transform',
-            // 为了兼容浏览器 zIndex 的样式表
-            'zIndex',
-            'z-index',
-          ])
-    }
-
-    setVariable('layoutContentMaximize', full)
-  }
-
-  return {
-    reload,
-    maximize,
-    isLayoutContentMaximized,
-  }
-}
--- a/src/hooks/template/useMaximize.ts
+++ b/src/hooks/template/useMaximize.ts
@ -0,0 +1,57 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-11-30
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { setVariable, getVariableToRefs } from '@/global-variable'
+import { LAYOUT_CONTENT_REF } from '@/app-config/routerConfig'
+import { unrefElement } from '@/utils/vue'
+import { useElementFullscreen } from '../web'
+
+import type { UseElementFullscreenOptions } from '../web'
+
+export const useMaximize = () => {
+  /**
+   *
+   * 当前 LayoutContent 是处于否全屏状态
+   * - true: 全屏
+   * - false: 非全屏
+   *
+   * @example
+   * isLayoutContentMaximized() // true or false
+   */
+  const isLayoutContentMaximized = computed(
+    () => getVariableToRefs('layoutContentMaximize').value,
+  )
+
+  /**
+   *
+   * @param full 是否网页全屏内容区域
+   *
+   * 该方法仅针对于 LayoutContent 区域，并且依赖全局属性 layoutContentMaximize
+   *
+   * @example
+   * maximize(true, { UseElementFullscreenOptions }) 全屏内容区域
+   * maximize(false, { UseElementFullscreenOptions }) 取消全屏内容区域
+   */
+  const maximize = (full: boolean, options?: UseElementFullscreenOptions) => {
+    const contentEl = unrefElement(LAYOUT_CONTENT_REF as Ref<HTMLElement>)
+    const { toggleFullscreen } = useElementFullscreen(contentEl, options)
+
+    setVariable('layoutContentMaximize', full)
+    toggleFullscreen()
+  }
+
+  return {
+    isLayoutContentMaximized,
+    maximize,
+  }
+}
+
+export type UseMaximizeReturnType = ReturnType<typeof useMaximize>
--- a/src/hooks/template/useSiderBar.ts
+++ b/src/hooks/template/useSiderBar.ts
@ -10,13 +10,77 @@
 */

 import { useMenuGetters, useMenuActions } from '@/store'
-import { ROOT_ROUTE } from '@/app-config/appConfig'
+import { redirectRouterToDashboard } from '@/router/helper/routerCopilot'

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

 export type CloseMenuTag = Key | MenuTagOptions

-export function useMenuTag() {
+/**
+ *
+ * @param target 标签页对象、索引、key
+ * @param fc 触发函数
+ *
+ * 该方法用于统一获取目标标签页方法
+ */
+const normalMenuTagOption = (target: CloseMenuTag, fc: string) => {
+  const { getMenuTagOptions } = useMenuGetters()
+
+  if (typeof target === 'number') {
+    // 判断是否为 NaN
+    if (isNaN(target)) {
+      console.warn(`${fc}: The ${target} is NaN, expect number.`)
+
+      return
+    }
+
+    // 判断是否超出当前标签页列表最大长度或者是否为负数
+    if (target > getMenuTagOptions.value.length || target < -1) {
+      console.warn(
+        `${fc}: The incoming index ${target} did not match the corresponding item.`,
+      )
+
+      return
+    }
+
+    return {
+      option: getMenuTagOptions.value[target],
+      index: target,
+    }
+  } else if (typeof target === 'string') {
+    // 查找符合条件的 key
+    const index = getMenuTagOptions.value.findIndex(
+      (curr) => curr.key === target,
+    )
+
+    return index > -1
+      ? {
+          option: getMenuTagOptions.value[index],
+          index,
+        }
+      : console.warn(
+          `${fc}: The incoming key ${target} did not match the corresponding item.`,
+        )
+  } else {
+    const { key } = target
+    const index = getMenuTagOptions.value.findIndex((curr) => curr.key === key)
+
+    if (index === -1) {
+      console.warn(
+        `${fc}: The incoming menuTag option ${target.key} did not match the corresponding item.`,
+      )
+
+      return
+    }
+
+    return {
+      option: target,
+      index,
+    }
+  }
+}
+
+export function useSiderBar() {
  const { getMenuTagOptions, getMenuKey } = useMenuGetters()
  const {
    changeMenuModelValue,
@ -24,71 +88,6 @@ export function useMenuTag() {
    emptyMenuTagOptions,
    setMenuTagOptions,
  } = useMenuActions()
-  const { path } = ROOT_ROUTE
-
-  /**
-   *
-   * @param target 标签页对象、索引、key
-   * @param fc 触发函数
-   *
-   * 该方法用于统一获取目标标签页方法
-   */
-  const normalMenuTagOption = (target: CloseMenuTag, fc: string) => {
-    if (typeof target === 'number') {
-      // 判断是否为 NaN
-      if (isNaN(target)) {
-        console.warn(`${fc}: The ${target} is NaN, expect number.`)
-
-        return
-      }
-
-      // 判断是否超出当前标签页列表最大长度或者是否为负数
-      if (target > getMenuTagOptions.value.length || target < -1) {
-        console.warn(
-          `${fc}: The incoming index ${target} did not match the corresponding item.`,
-        )
-
-        return
-      }
-
-      return {
-        option: getMenuTagOptions.value[target],
-        index: target,
-      }
-    } else if (typeof target === 'string') {
-      // 查找符合条件的 key
-      const index = getMenuTagOptions.value.findIndex(
-        (curr) => curr.key === target,
-      )
-
-      return index > -1
-        ? {
-            option: getMenuTagOptions.value[index],
-            index,
-          }
-        : console.warn(
-            `${fc}: The incoming key ${target} did not match the corresponding item.`,
-          )
-    } else {
-      const { key } = target
-      const index = getMenuTagOptions.value.findIndex(
-        (curr) => curr.key === key,
-      )
-
-      if (index === -1) {
-        console.warn(
-          `${fc}: The incoming menuTag option ${target.key} did not match the corresponding item.`,
-        )
-
-        return
-      }
-
-      return {
-        option: target,
-        index,
-      }
-    }
-  }

  /**
   *
@ -169,9 +168,17 @@ export function useMenuTag() {
    const normal = normalMenuTagOption(target, 'close')

    if (normal) {
-      const { option } = normal
+      const { index, option } = normal

-      changeMenuModelValue(option.key, option)
+      spliceMenTagOptions(index)
+
+      if (option.key === getMenuKey.value) {
+        const tag = getMenuTagOptions.value[index - 1]
+
+        if (tag) {
+          changeMenuModelValue(tag.key, tag)
+        }
+      }
    }
  }

@ -180,13 +187,8 @@ export function useMenuTag() {
   * 关闭所有标签并且导航至 root path
   */
  const closeAll = () => {
-    const option = getMenuTagOptions.value.find((curr) => curr.key === path)
-
-    if (option) {
-      changeMenuModelValue(path, option)
-    }
-
    emptyMenuTagOptions()
+    redirectRouterToDashboard()
  }

  /**
@ -213,7 +215,7 @@ export function useMenuTag() {

      if (index <= currentIndex) {
        if (getMenuKey.value !== option.key) {
-          changeMenuModelValue(option.key as string, option)
+          changeMenuModelValue(option.key, option)
        }
      }
    }
@ -242,7 +244,7 @@ export function useMenuTag() {

      if (currentIndex <= index) {
        if (getMenuKey.value !== option.key) {
-          changeMenuModelValue(option.key as string, option)
+          changeMenuModelValue(option.key, option)
        }
      }
    }
@ -285,3 +287,5 @@ export function useMenuTag() {
    checkCloseLeft,
  }
 }
+
+export type UseSiderBarReturnType = ReturnType<typeof useSiderBar>
--- a/src/hooks/template/useSpinning.ts
+++ b/src/hooks/template/useSpinning.ts
@ -0,0 +1,59 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-11-30
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { setVariable } from '@/global-variable'
+
+export const useSpinning = () => {
+  /**
+   *
+   * @param wait 延迟时长
+   *
+   * 刷新当前路由（强制触发刷新）
+   *
+   * @example
+   * reload(1200)
+   */
+  const reload = (wait = 800) => {
+    setVariable('globalMainLayoutLoad', false)
+
+    setTimeout(() => setVariable('globalMainLayoutLoad', true), wait)
+  }
+
+  /**
+   *
+   * 打开加载动画（不触发强制刷新）
+   *
+   * @example
+   * openSpin()
+   */
+  const openSpin = () => {
+    setVariable('layoutContentSpinning', true)
+  }
+
+  /**
+   *
+   * 关闭加载动画（不触发强制刷新）
+   *
+   * @example
+   * closeSpin()
+   */
+  const closeSpin = () => {
+    setVariable('layoutContentSpinning', false)
+  }
+
+  return {
+    reload,
+    openSpin,
+    closeSpin,
+  }
+}
+
+export type UseSpinningReturnType = ReturnType<typeof useSpinning>
--- a/src/hooks/template/useTheme.ts
+++ b/src/hooks/template/useTheme.ts
@ -0,0 +1,90 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-11-30
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { useSettingActions, useSettingGetters } from '@/store'
+import { useI18n } from '@/hooks/web'
+
+export const useTheme = () => {
+  /**
+   *
+   * 获取当前主题色与主题色描述
+   * 并且描述会根据当前语言环境自动切换
+   *
+   * @example
+   * getAppTheme() // { theme: true, themeLabel: '暗色' | 'Dark' }
+   * getAppTheme() // { theme: false, themeLabel: '亮色' | 'Light' }
+   */
+  const getAppTheme = () => {
+    const { getAppTheme } = useSettingGetters()
+    const { t } = useI18n()
+
+    return {
+      theme: getAppTheme.value,
+      themeLabel: getAppTheme.value
+        ? t('headerSettingOptions.ThemeOptions.Dark')
+        : t('headerSettingOptions.ThemeOptions.Light'),
+    }
+  }
+
+  /**
+   *
+   * 切换至暗色主题
+   *
+   * @example
+   * changeDarkTheme()
+   */
+  const changeDarkTheme = () => {
+    const { updateSettingState } = useSettingActions()
+
+    updateSettingState('appTheme', true)
+  }
+
+  /**
+   *
+   * 切换至明色主题
+   *
+   * @example
+   * changeLightTheme()
+   */
+  const changeLightTheme = () => {
+    const { updateSettingState } = useSettingActions()
+
+    updateSettingState('appTheme', false)
+  }
+
+  /**
+   *
+   * @param theme 当前主题色
+   *
+   * 当前主题有明暗两套
+   *
+   * @example
+   * 假设当前主题为暗色主题
+   * toggleTheme() // 切换至明色主题
+   * 假设当前主题为明色主题
+   * toggleTheme() // 切换至暗色主题
+   */
+  const toggleTheme = () => {
+    const { theme } = getAppTheme()
+    const { updateSettingState } = useSettingActions()
+
+    updateSettingState('appTheme', !theme)
+  }
+
+  return {
+    changeDarkTheme,
+    changeLightTheme,
+    toggleTheme,
+    getAppTheme,
+  }
+}
+
+export type UseThemeReturnType = ReturnType<typeof useTheme>
--- a/src/hooks/template/useWatermark.ts
+++ b/src/hooks/template/useWatermark.ts
@ -0,0 +1,90 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-11-30
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { useSettingActions, useSettingGetters } from '@/store'
+
+export const useWatermark = () => {
+  /**
+   *
+   * @param content 水印内容
+   *
+   * 设置水印内容
+   * 如果覆盖的水印内容为: '', undefined, null, 0, false, NaN，则会沿用上次一次的水印内容
+   *
+   * @example
+   * setWatermarkContent('Ray Template Yes!')
+   * setWatermarkContent('') // 沿用上次一次的水印内容
+   * setWatermarkContent(undefined) // 沿用上次一次的水印内容
+   */
+  const setWatermarkContent = (content: string) => {
+    const { getWatermarkConfig } = useSettingGetters()
+    const assignWatermark = Object.assign(getWatermarkConfig.value, {
+      content,
+    })
+    const { updateSettingState } = useSettingActions()
+
+    updateSettingState('watermarkConfig', assignWatermark)
+  }
+
+  /**
+   *
+   * 显示水印
+   *
+   * @example
+   * showWatermark()
+   */
+  const showWatermark = () => {
+    const { updateSettingState } = useSettingActions()
+
+    updateSettingState('watermarkSwitch', true)
+  }
+
+  /**
+   *
+   * 隐藏水印
+   *
+   * @example
+   * hiddenWatermark()
+   */
+  const hiddenWatermark = () => {
+    const { updateSettingState } = useSettingActions()
+
+    updateSettingState('watermarkSwitch', false)
+  }
+
+  /**
+   *
+   * @param value 是否显示水印
+   *
+   * 切换水印显示状态
+   *
+   * @example
+   * 假设当前水印显示状态为隐藏
+   * toggleWatermark() // 显示水印
+   * 假设当前水印显示状态为显示
+   * toggleWatermark() // 隐藏水印
+   */
+  const toggleWatermark = () => {
+    const { getWatermarkSwitch } = useSettingGetters()
+    const { updateSettingState } = useSettingActions()
+
+    updateSettingState('watermarkSwitch', !getWatermarkSwitch.value)
+  }
+
+  return {
+    setWatermarkContent,
+    showWatermark,
+    hiddenWatermark,
+    toggleWatermark,
+  }
+}
+
+export type UseWatermarkReturnType = ReturnType<typeof useWatermark>
--- a/src/hooks/web/index.ts
+++ b/src/hooks/web/index.ts
@ -9,11 +9,8 @@
 * @remark 今天也是元气满满撸代码的一天
 */

-import { useI18n, t } from './useI18n'
-import { useVueRouter } from '../web/useVueRouter'
-import { useDayjs } from '../web/useDayjs'
-import { useDevice } from './useDevice'
-
-export type { FormatOption, DateRange, LocalKey } from './useDayjs'
-
-export { useI18n, useVueRouter, useDayjs, t, useDevice }
+export * from './useI18n'
+export * from './useVueRouter'
+export * from './useDayjs'
+export * from './useDevice'
+export * from './useElementFullscreen'
--- a/src/hooks/web/useDayjs.ts
+++ b/src/hooks/web/useDayjs.ts
@ -155,3 +155,5 @@ export const useDayjs = () => {
    isDateInRange,
  }
 }
+
+export type UseDayjsReturnType = ReturnType<typeof useDayjs>
--- a/src/hooks/web/useDevice.ts
+++ b/src/hooks/web/useDevice.ts
@ -15,8 +15,19 @@
 */

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

+/**
+ *
+ * 检测当前尺寸是否为平板或者更小
+ * 默认主流平板尺寸为 768px
+ *
+ * @example
+ * const { width, height, isTabletOrSmaller } = useDevice()
+ *
+ * isTabletOrSmaller.value => true // 当前尺寸为平板或者更小
+ * isTabletOrSmaller.value => false // 当前尺寸为桌面或者更大
+ */
 export function useDevice() {
  const { width, height } = useWindowSize()
  const isTabletOrSmaller = ref(false)
@ -33,3 +44,5 @@ export function useDevice() {
    isTabletOrSmaller,
  }
 }
+
+export type UseDeviceReturnType = ReturnType<typeof useDevice>
--- a/src/hooks/web/useElementFullscreen.ts
+++ b/src/hooks/web/useElementFullscreen.ts
@ -0,0 +1,162 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-12-04
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { unrefElement, effectDispose } from '@/utils/vue'
+import { useWindowSize } from '@vueuse/core'
+import { isValueType } from '@/utils/basic'
+
+import type { BasicTarget } from '@/types/modules/vue'
+
+export interface UseElementFullscreenOptions {
+  beforeEnter?: () => void
+  beforeExit?: () => void
+  zIndex?: number
+  backgroundColor?: string
+}
+
+let currentZIndex = 999
+let isAppend = false
+const ID_TAG = 'ELEMENT-FULLSCREEN-RAY'
+const { height } = useWindowSize() // 获取实际高度避免 100vh 会导致手机端浏览器获取不准确问题
+const styleElement = document.createElement('style')
+
+/**
+ *
+ * @param target target dom
+ * @param options useElementFullscreen options
+ *
+ * 使元素全屏，但是不调用浏览器的全屏 API，仅使用纯 css 实现
+ * 该方法具有入侵性，并且会在元素上覆盖 transition 样式
+ *
+ * 该方法虽然能够实现全屏，但是会覆盖元素的一些基本样式，因此需要注意管理元素的一些基本样式，例如：position、z-index、transition、transform、width、height
+ *
+ * @example
+ * <template>
+ *  <div ref="refDom" />
+ * </template>
+ * <script lang="ts" setup>
+ * const refDom = ref<HTMLElement>()
+ * const { enter, exit, toggleFullscreen } = useElementFullscreen(refDom, { UseElementFullscreenOptions })
+ *
+ * enter() // 进入全屏
+ * exit() // 退出全屏
+ * toggleFullscreen() // 切换全屏
+ * </script>
+ */
+export const useElementFullscreen = (
+  target: BasicTarget,
+  options?: UseElementFullscreenOptions,
+) => {
+  const { beforeEnter, beforeExit, backgroundColor, zIndex } = options ?? {}
+  const cacheStyle: Partial<CSSStyleDeclaration> = {} // 缓存一些需要被覆盖的样式，例如: transition
+  let isSetup = false
+
+  const updateStyle = () => {
+    const element = unrefElement(target) as HTMLElement | null
+
+    if (!element) {
+      return
+    }
+
+    const { left, top } = element.getBoundingClientRect()
+    const cssContent = `
+          [${ID_TAG}] {
+            position: fixed;
+            width: 100% !important;
+            height: ${height.value}px !important;
+            transform: translate(-${left}px, -${top}px) !important;
+            transition: all 0.3s var(--r-bezier);
+            z-index: ${
+              isValueType<null>(zIndex, 'Null') ||
+              isValueType<undefined>(zIndex, 'Undefined')
+                ? currentZIndex
+                : zIndex
+            } !important;
+            background-color: ${backgroundColor ?? null};
+          }
+        `
+
+    styleElement.innerHTML = cssContent
+
+    // 避免重复添加 style 标签
+    if (!isAppend) {
+      document.head.appendChild(styleElement)
+    }
+  }
+
+  const enter = () => {
+    const element = unrefElement(target) as HTMLElement | null
+
+    beforeEnter?.()
+
+    if (element) {
+      if (!element.getAttribute(ID_TAG)) {
+        element.setAttribute(ID_TAG, ID_TAG)
+      }
+
+      if (!isSetup) {
+        isSetup = true
+        currentZIndex += 1
+      }
+
+      if (!isAppend) {
+        updateStyle()
+
+        isAppend = true
+      }
+
+      cacheStyle.transition = element.style.transition
+      element.style.transition = 'all 0.3s var(--r-bezier)'
+    }
+  }
+
+  const exit = () => {
+    beforeExit?.()
+
+    const element = unrefElement(target)
+
+    if (element) {
+      element.removeAttribute(ID_TAG)
+    }
+  }
+
+  const toggleFullscreen = () => {
+    const element = unrefElement(target)
+
+    if (element) {
+      if (element.getAttribute(ID_TAG)) {
+        exit()
+      } else {
+        enter()
+      }
+    }
+  }
+
+  const stopWatch = watch(() => height.value, updateStyle)
+
+  effectDispose(() => {
+    const element = unrefElement(target) as HTMLElement | null
+
+    if (element) {
+      element.style.transition = cacheStyle.transition ?? ''
+
+      element.removeAttribute(ID_TAG)
+    }
+
+    stopWatch()
+  })
+
+  return {
+    enter,
+    exit,
+    toggleFullscreen,
+  }
+}
--- 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'

@ -63,3 +63,5 @@ export const useI18n = (namespace?: string) => {
 * 该插件识别 t 方法包裹 path 进行提示文案内容
 */
 export const t = (key: string) => key
+
+export type UseI18nReturnType = ReturnType<typeof useI18n>
--- 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'

 /**
 *
@ -33,3 +33,5 @@ export const useVueRouter = () => {
    throw new Error('router is not defined')
  }
 }
+
+export type UseVueRouterReturnType = ReturnType<typeof useVueRouter>
--- a/src/hooks/web/useWebFullscreen.ts
+++ b/src/hooks/web/useWebFullscreen.ts
@ -1,14 +0,0 @@
-/**
- *
- * @author Ray <https://github.com/XiaoDaiGua-Ray>
- *
- * @date 2023-11-16
- *
- * @workspace ray-template
- *
- * @remark 今天也是元气满满撸代码的一天
- */
-
-export function useWebFullscreen() {
-  //
-}
--- 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.scss
+++ b/src/layout/components/MenuTag/index.scss
@ -41,6 +41,46 @@ $menuTagWrapperWidth: 76px;
  }
 }

+// 激活标签页关闭按钮样式
+.menu-tag {
+  .menu-tag__btn {
+    padding: 7px 10px;
+
+    .menu-tag__btn-icon--hidden {
+      display: none !important;
+    }
+
+    .menu-tag__btn-icon {
+      display: inline;
+      margin-left: 0;
+      width: 0;
+      height: 0;
+      transition: all 0.3s var(--r-bezier);
+      overflow: hidden;
+      opacity: 0;
+
+      & .ray-icon {
+        transform: translate(-1px, 0px);
+      }
+    }
+
+    &:hover {
+      .menu-tag__btn-icon {
+        width: 14px;
+        height: 14px;
+        margin-left: 5px;
+        font-size: 12px;
+        background-color: rgba(0, 0, 0, 0.12);
+        border-radius: 50%;
+        padding: 1px;
+        transition: all 0.3s var(--r-bezier);
+        opacity: 1;
+      }
+    }
+  }
+}
+
+// 设置 dropdown animate svg 尺寸
 .menu-tag__dropdown {
  & .menu-tag__icon {
    width: 18px;
--- a/src/layout/components/MenuTag/index.tsx
+++ b/src/layout/components/MenuTag/index.tsx
@ -31,23 +31,27 @@

 import './index.scss'

-import { NScrollbar, NTag, NSpace, NLayoutHeader, NDropdown } from 'naive-ui'
-import RIcon from '@/components/RIcon/index'
-import RMoreDropdown from '@/components/RMoreDropdown/index'
+import {
+  NScrollbar,
+  NSpace,
+  NLayoutHeader,
+  NDropdown,
+  NButton,
+  NIcon,
+} from 'naive-ui'
+import { RIcon, RMoreDropdown } from '@/components'

-// import Reload from '@/icons/reload.svg?component'
 import CloseRight from '@/icons/close_right.svg?component'
 import CloseLeft from '@/icons/close_left.svg?component'

 import { useMenuGetters, useMenuActions } from '@/store'
 import { uuid } from '@/utils/basic'
 import { hasClass } from '@/utils/element'
-import { ROOT_ROUTE } from '@/app-config/appConfig'
 import { queryElements } from '@use-utils/element'
-import { renderNode } from '@/utils/vue/index'
-import { useMainPage } from '@/hooks/template/index'
-import { useMenuTag } from '@/hooks/template/index'
+import { useMaximize, useSpinning } from '@/hooks/template'
+import { useSiderBar } from '@/hooks/template'
 import { throttle } from 'lodash-es'
+import { useAppRoot } from '@/hooks/template'

 import type { ScrollbarInst } from 'naive-ui'
 import type { MenuTagOptions, AppMenuOption } from '@/types/modules/app'
@ -59,15 +63,16 @@ export default defineComponent({

    const { getMenuKey, getMenuTagOptions } = useMenuGetters()
    const { changeMenuModelValue } = useMenuActions()
-    const { path } = ROOT_ROUTE
-    const { reload, maximize } = useMainPage()
+    const { getRootPath } = useAppRoot()
+    const { maximize } = useMaximize()
+    const { reload } = useSpinning()
    const {
      close,
      closeAll: $closeAll,
      closeRight: $closeRight,
      closeLeft: $closeLeft,
      closeOther: $closeOther,
-    } = useMenuTag()
+    } = useSiderBar()

    const canDisabledOptions = [
      'closeAll',
@ -95,16 +100,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',
@ -124,7 +129,7 @@ export default defineComponent({
    const uuidScrollBar = uuid(16) // scroll bar uuid
    const actionMap = {
      closeCurrentPage: () => {
-        getMenuKey.value !== path && close(currentContextmenuIndex)
+        getMenuKey.value !== getRootPath.value && close(currentContextmenuIndex)
      },
      reloadCurrentPage: () => {
        reload()
@ -180,7 +185,7 @@ export default defineComponent({
    const handleTagClick = (option: AppMenuOption) => {
      actionState.actionDropdownShow = false

-      changeMenuModelValue(option.key as string, option)
+      changeMenuModelValue(option.key, option)
    }

    /**
@ -194,9 +199,11 @@ export default defineComponent({
        const scrollContentElement = Array.from(
          scroll.childNodes,
        ) as HTMLElement[]
-        const findElement = scrollContentElement.find((el) =>
-          hasClass(el, 'n-scrollbar-container'),
-        )
+        const findElement = scrollContentElement.find((el) => {
+          const has = hasClass(el, 'n-scrollbar-container')
+
+          return has.value
+        })

        return findElement
      }
@ -262,20 +269,12 @@ export default defineComponent({
     */
    const setDisabledAccordionToIndex = () => {
      const length = getMenuTagOptions.value.length - 1
+      const { closeable } =
+        getMenuTagOptions.value[currentContextmenuIndex] ??
+        ({} as MenuTagOptions)

      // 是否需要禁用关闭当前标签页
-      if (getMenuKey.value === path) {
-        setMoreOptionsDisabled('closeCurrentPage', true)
-      } else {
-        const isRoot = moreOptions.value[currentContextmenuIndex]
-
-        // 避免 isRoot 为 undefined
-        if (isRoot?.key === 'closeCurrentPage') {
-          setMoreOptionsDisabled('closeCurrentPage', true)
-        } else {
-          setMoreOptionsDisabled('closeCurrentPage', false)
-        }
-      }
+      setMoreOptionsDisabled('closeCurrentPage', !closeable ?? false)

      // 是否需要禁用关闭右侧标签页
      if (currentContextmenuIndex === length) {
@ -310,7 +309,10 @@ export default defineComponent({

    /** 仅有 getMenuTagOptions 长度大于 1 并且非 root path 时, 才激活关闭按钮 */
    const menuTagMouseenter = (option: MenuTagOptions) => {
-      if (getMenuTagOptions.value.length > 1 && option.key !== path) {
+      if (
+        getMenuTagOptions.value.length > 1 &&
+        option.key !== getRootPath.value
+      ) {
        option.closeable = true
      }
    }
@ -351,7 +353,10 @@ export default defineComponent({
          const [menuTag] = tags

          nextTick().then(() => {
-            menuTag.scrollIntoView?.(true)
+            scrollRef.value?.scrollTo({
+              left: menuTag.offsetLeft,
+              behavior: 'smooth',
+            })
          })
        }
      })
@ -360,21 +365,19 @@ export default defineComponent({
    /** 如果有且只有一个标签页时, 禁止全部关闭操作 */
    watch(
      () => getMenuTagOptions.value,
-      (newData, oldData) => {
+      (ndata, odata) => {
        // 当 menuTagOptions 长度为 1时，禁用所有 canDisabledOptions 匹配的项
        moreOptions.value.forEach((curr) => {
          if (canDisabledOptions.includes(curr.key)) {
-            newData.length > 1
-              ? (curr.disabled = false)
-              : (curr.disabled = true)
+            ndata.length > 1 ? (curr.disabled = false) : (curr.disabled = true)
          }
        })

        // 更新当前激活标签定位
-        if (oldData?.length) {
-          if (newData.length > oldData?.length) {
+        if (odata?.length) {
+          if (ndata.length > odata?.length) {
            updateScrollBarPosition()
-          } else if (newData.length === oldData?.length) {
+          } else if (ndata.length === odata?.length) {
            positionMenuTag()
          }
        }
@ -418,11 +421,12 @@ export default defineComponent({
        height: 28,
      },
      maximize,
+      getRootPath,
    }
  },
  render() {
-    const { iconConfig } = this
-    const { maximize } = this
+    const { iconConfig, getRootPath, uuidScrollBar } = this
+    const { maximize, closeCurrentMenuTag, scrollX, $t } = this

    return (
      <NLayoutHeader>
@ -460,7 +464,7 @@ export default defineComponent({
              xScrollable
              ref="scrollRef"
              {...{
-                id: this.uuidScrollBar,
+                id: uuidScrollBar,
              }}
            >
              <NSpace
@ -471,13 +475,12 @@ export default defineComponent({
                justify="start"
              >
                {this.getMenuTagOptions.map((curr, idx) => (
-                  <NTag
+                  <NButton
                    key={curr.key}
+                    class={['menu-tag__btn']}
                    strong
-                    closable={curr.closeable}
-                    onClose={this.closeCurrentMenuTag.bind(this, idx)}
+                    secondary
                    type={curr.key === this.getMenuKey ? 'primary' : 'default'}
-                    bordered={false}
                    {...{
                      onClick: this.handleTagClick.bind(this, curr),
                      onContextmenu: this.handleContextMenu.bind(this, idx),
@ -486,8 +489,49 @@ export default defineComponent({
                      [this.MENU_TAG_DATA]: curr.path,
                    }}
                  >
-                    {renderNode(curr.breadcrumbLabel)}
-                  </NTag>
+                    {{
+                      default: () => (
+                        <>
+                          <span>
+                            {{
+                              default: () => {
+                                const {
+                                  breadcrumbLabel,
+                                  meta: { i18nKey },
+                                } = curr
+
+                                return i18nKey ? $t(i18nKey) : breadcrumbLabel
+                              },
+                            }}
+                          </span>
+                          {(curr.closeable ||
+                            this.getMenuTagOptions.length === 1) &&
+                          curr.key !== getRootPath ? (
+                            <NIcon
+                              class="menu-tag__btn-icon"
+                              {...{
+                                onMousedown: closeCurrentMenuTag.bind(
+                                  this,
+                                  idx,
+                                ),
+                              }}
+                            >
+                              <RIcon name="close" size="14" />
+                            </NIcon>
+                          ) : (
+                            // 默认使用一个空 NIcon 占位，避免不能正确的触发动画
+                            <NIcon
+                              class={[
+                                curr.key !== getRootPath
+                                  ? 'menu-tag__btn-icon'
+                                  : 'menu-tag__btn-icon--hidden',
+                              ]}
+                            />
+                          )}
+                        </>
+                      ),
+                    }}
+                  </NButton>
                ))}
              </NSpace>
            </NScrollbar>
@ -504,7 +548,7 @@ export default defineComponent({
                width={iconConfig.width}
                height={iconConfig.height}
                customClassName="menu-tag__right-arrow"
-                onClick={this.scrollX.bind(this, 'right')}
+                onClick={scrollX.bind(this, 'right')}
              />
              <RIcon
                name="fullscreen_fold"
--- a/src/layout/components/SiderBar/components/Breadcrumb/index.scss
+++ b/src/layout/components/SiderBar/components/Breadcrumb/index.scss
@ -0,0 +1,20 @@
+.n-breadcrumb .n-breadcrumb-item {
+  &.breadcrumb-enter-active,
+  &.breadcrumb-leave-active {
+    transition: all 0.5s;
+  }
+
+  & .breadcrumb-move {
+    transition: all 0.5s;
+  }
+
+  &.breadcrumb-enter-from,
+  &.breadcrumb-leave-active {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+
+  &.breadcrumb-leave-active {
+    position: absolute;
+  }
+}
--- a/src/layout/components/SiderBar/components/Breadcrumb/index.tsx
+++ b/src/layout/components/SiderBar/components/Breadcrumb/index.tsx
@ -18,10 +18,13 @@
 * 添加 <span> 标签, 避免 Runtime directive used on component... 警告
 */

+import './index.scss'
+
 import { NDropdown, NBreadcrumb, NBreadcrumbItem } from 'naive-ui'
+import { TransitionGroup } from 'vue'

 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'
@ -61,36 +64,41 @@ export default defineComponent({
    }
  },
  render() {
-    const { isTabletOrSmaller } = this
+    const { isTabletOrSmaller, getBreadcrumbOptions } = this
+    const { dropdownSelect, breadcrumbItemClick } = this

    return isTabletOrSmaller ? (
-      <div></div>
+      <div style="display: none;"></div>
    ) : (
      <NBreadcrumb>
-        {this.getBreadcrumbOptions.map((curr) => (
-          <NBreadcrumbItem
-            key={curr.key}
-            onClick={this.breadcrumbItemClick.bind(this, curr)}
-          >
-            <NDropdown
-              labelField="breadcrumbLabel"
-              options={
-                curr.children && curr.children?.length > 1 ? curr.children : []
-              }
-              onSelect={this.dropdownSelect.bind(this)}
+        <TransitionGroup tag="li" name="breadcrumb" appear>
+          {getBreadcrumbOptions.map((curr) => (
+            <NBreadcrumbItem
+              key={curr.path}
+              onClick={breadcrumbItemClick.bind(this, curr)}
            >
-              {{
-                default: () => (
-                  <span>
-                    {curr.label && typeof curr.label === 'function'
-                      ? curr.label()
-                      : curr.breadcrumbLabel}
-                  </span>
-                ),
-              }}
-            </NDropdown>
-          </NBreadcrumbItem>
-        ))}
+              <NDropdown
+                labelField="breadcrumbLabel"
+                options={
+                  curr.children && curr.children?.length > 1
+                    ? curr.children
+                    : []
+                }
+                onSelect={dropdownSelect.bind(this)}
+              >
+                {{
+                  default: () => (
+                    <span>
+                      {curr.label && typeof curr.label === 'function'
+                        ? curr.label()
+                        : curr.breadcrumbLabel}
+                    </span>
+                  ),
+                }}
+              </NDropdown>
+            </NBreadcrumbItem>
+          ))}
+        </TransitionGroup>
      </NBreadcrumb>
    )
  },
--- a/src/layout/components/SiderBar/components/GlobalSearch/index.tsx
+++ b/src/layout/components/SiderBar/components/GlobalSearch/index.tsx
@ -21,13 +21,14 @@
 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 { 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 { useEventListener } from '@vueuse/core'

 import type { AppRouteMeta } from '@/router/type'
 import type { AppMenuOption } from '@/types/modules/app'
@ -275,17 +276,9 @@ export default defineComponent({
      }
    })

-    onMounted(() => {
-      on(window, 'keydown', (e: Event) => {
-        registerArouseKeyboard(e as KeyboardEvent)
-        registerChangeSearchElementIndex(e as KeyboardEvent)
-      })
-    })
-    onBeforeUnmount(() => {
-      off(window, 'keydown', (e: Event) => {
-        registerArouseKeyboard(e as KeyboardEvent)
-        registerChangeSearchElementIndex(e as KeyboardEvent)
-      })
+    useEventListener(window, 'keydown', (e: KeyboardEvent) => {
+      registerArouseKeyboard(e)
+      registerChangeSearchElementIndex(e)
    })

    return {
--- a/src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx
+++ b/src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx
@ -10,18 +10,19 @@
 */

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

-import { useSettingGetters, useSettingActions } from '@/store'
+import { useSettingGetters } from '@/store'
+import { useTheme } from '@/hooks/template'

 export default defineComponent({
  name: 'ThemeSwitch',
  setup() {
-    const { changeSwitcher } = useSettingActions()
+    const { changeDarkTheme, changeLightTheme } = useTheme()
    const { getAppTheme } = useSettingGetters()
    const modelAppThemeRef = ref(getAppTheme.value)

-    const handleRailStyle = ({ checked }: { checked: boolean }) => {
+    const railStyle = ({ checked }: { checked: boolean }) => {
      return checked
        ? {
            backgroundColor: '#000000',
@ -32,14 +33,15 @@ export default defineComponent({
    }

    return {
-      changeSwitcher,
+      changeDarkTheme,
+      changeLightTheme,
      getAppTheme,
-      handleRailStyle,
+      railStyle,
      modelAppThemeRef,
    }
  },
  render() {
-    const { $t } = this
+    const { $t, changeDarkTheme, changeLightTheme, railStyle } = this

    return (
      <NSpace justify="center">
@ -48,28 +50,14 @@ export default defineComponent({
            trigger: () => (
              <NSwitch
                v-model:value={this.modelAppThemeRef}
-                railStyle={this.handleRailStyle.bind(this)}
+                railStyle={railStyle.bind(this)}
                onUpdateValue={(bool: boolean) =>
-                  this.changeSwitcher(bool, 'appTheme')
+                  bool ? changeDarkTheme() : changeLightTheme()
                }
              >
                {{
-                  'checked-icon': () =>
-                    h(
-                      RIcon,
-                      {
-                        name: 'dark',
-                      },
-                      {},
-                    ),
-                  'unchecked-icon': () =>
-                    h(
-                      RIcon,
-                      {
-                        name: 'light',
-                      },
-                      {},
-                    ),
+                  'checked-icon': () => <RIcon name="dark" />,
+                  'unchecked-icon': () => <RIcon name="light" />,
                  checked: () => '亮',
                  unchecked: () => '暗',
                }}
--- 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'
@ -47,8 +47,7 @@ const SettingDrawer = defineComponent({
  },
  emits: ['update:show'],
  setup(props, { emit }) {
-    const { changePrimaryColor, changeSwitcher, updateContentTransition } =
-      useSettingActions()
+    const { changePrimaryColor, updateSettingState } = useSettingActions()
    const {
      getAppTheme,
      getPrimaryColorOverride,
@ -84,20 +83,22 @@ const SettingDrawer = defineComponent({
        value: 'opacity',
      },
    ]
+    const modelSwitchReactive = reactive({
+      getMenuTagSwitch: getMenuTagSwitch.value,
+      getBreadcrumbSwitch: getBreadcrumbSwitch.value,
+      getCopyrightSwitch: getCopyrightSwitch.value,
+      getContentTransition: getContentTransition.value,
+      getWatermarkSwitch: getWatermarkSwitch.value,
+    })

    return {
      modelShow,
      changePrimaryColor,
      getAppTheme,
      getPrimaryColorOverride,
-      getMenuTagSwitch,
-      changeSwitcher,
-      getBreadcrumbSwitch,
-      getCopyrightSwitch,
      contentTransitionOptions,
-      getContentTransition,
-      updateContentTransition,
-      getWatermarkSwitch,
+      updateSettingState,
+      modelSwitchReactive,
    }
  },
  render() {
@ -127,10 +128,10 @@ const SettingDrawer = defineComponent({
              {$t('headerSettingOptions.ContentTransition')}
            </NDivider>
            <NSelect
-              v-model:value={this.getContentTransition}
+              v-model:value={this.modelSwitchReactive.getContentTransition}
              options={this.contentTransitionOptions}
              onUpdateValue={(value) => {
-                this.updateContentTransition(value)
+                this.updateSettingState('contentTransition', value)
              }}
            />
            <NDivider titlePlacement="center">
@ -139,33 +140,33 @@ const SettingDrawer = defineComponent({
            <NDescriptions labelPlacement="left" column={1}>
              <NDescriptionsItem label="多标签">
                <NSwitch
-                  v-model:value={this.getMenuTagSwitch}
+                  v-model:value={this.modelSwitchReactive.getMenuTagSwitch}
                  onUpdateValue={(bool: boolean) =>
-                    this.changeSwitcher(bool, 'menuTagSwitch')
+                    this.updateSettingState('menuTagSwitch', bool)
                  }
                />
              </NDescriptionsItem>
              <NDescriptionsItem label="面包屑">
                <NSwitch
-                  v-model:value={this.getBreadcrumbSwitch}
+                  v-model:value={this.modelSwitchReactive.getBreadcrumbSwitch}
                  onUpdateValue={(bool: boolean) =>
-                    this.changeSwitcher(bool, 'breadcrumbSwitch')
+                    this.updateSettingState('breadcrumbSwitch', bool)
                  }
                />
              </NDescriptionsItem>
              <NDescriptionsItem label="水印">
                <NSwitch
-                  v-model:value={this.getWatermarkSwitch}
+                  v-model:value={this.modelSwitchReactive.getWatermarkSwitch}
                  onUpdateValue={(bool: boolean) =>
-                    this.changeSwitcher(bool, 'watermarkSwitch')
+                    this.updateSettingState('watermarkSwitch', bool)
                  }
                />
              </NDescriptionsItem>
              <NDescriptionsItem label="版权信息">
                <NSwitch
-                  v-model:value={this.getCopyrightSwitch}
+                  v-model:value={this.modelSwitchReactive.getCopyrightSwitch}
                  onUpdateValue={(bool: boolean) =>
-                    this.changeSwitcher(bool, 'copyrightSwitch')
+                    this.updateSettingState('copyrightSwitch', bool)
                  }
                />
              </NDescriptionsItem>
--- 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 { useSpinning } from '@/hooks/template'
 import { useSettingGetters, useSettingActions } from '@/store'

 import type { IconEventMapOptions, IconEventMap } from './type'
@ -46,9 +46,9 @@ import type { IconEventMapOptions, IconEventMap } from './type'
 export default defineComponent({
  name: 'AppSiderBar',
  setup() {
-    const { updateLocale, changeSwitcher } = useSettingActions()
+    const { updateLocale, updateSettingState } = useSettingActions()
    const { t } = useI18n()
-    const { reload } = useMainPage()
+    const { reload } = useSpinning()

    const [isFullscreen, { toggleFullscreen, isEnabled }] = useFullscreen(
      document.getElementsByTagName('html')[0],
@ -107,7 +107,7 @@ export default defineComponent({
        globalSearchShown.value = true
      },
      lock: () => {
-        changeSwitcher(true, 'lockScreenSwitch')
+        updateSettingState('lockScreenSwitch', true)
      },
      menu: () => {
        setVariable('globalDrawerValue', !globalDrawerValue.value)
--- 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'
@ -54,9 +54,9 @@ const avatarDropdownActionMap = {
   * 锁定屏幕
   */
  lockScreen: () => {
-    const { changeSwitcher } = useSettingActions()
+    const { updateSettingState } = useSettingActions()

-    changeSwitcher(true, 'lockScreenSwitch')
+    updateSettingState('lockScreenSwitch', true)
  },
 }

--- 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 { useMaximize } from '@/hooks/template'

 import type { GlobalThemeOverrides } from 'naive-ui'

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

+    const { maximize } = useMaximize()
    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/Show More
+++ b/Show More