update

2025-04-04 06:02:50 +08:00 · 2023-07-05 10:52:54 +08:00 · 2023-07-05 10:52:54 +08:00 · 0887bf18cd
commit 0887bf18cd
parent bbd4765d67
275 changed files with 16210 additions and 0 deletions
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@ -0,0 +1,25 @@
+{
+  "files": [
+    "README.md"
+  ],
+  "imageSize": 100,
+  "commit": false,
+  "commitConvention": "angular",
+  "contributors": [
+    {
+      "login": "yunkuangao",
+      "name": "Cloud",
+      "avatar_url": "https://avatars.githubusercontent.com/u/40163747?v=4",
+      "profile": "https://heartofyun.com",
+      "contributions": [
+        "tool"
+      ]
+    }
+  ],
+  "contributorsPerLine": 7,
+  "skipCi": true,
+  "repoType": "github",
+  "repoHost": "https://github.com",
+  "projectName": "xiaodaigua-ray.github.io",
+  "projectOwner": "XiaoDaiGua-Ray"
+}
--- a/.depcheckrc
+++ b/.depcheckrc
@ -0,0 +1,2 @@
+ignores: [ "eslint", "babel-*", "@use-*/**", "@use-*" ]
+skip-missing: true
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,10 @@
+#开发环境
+NODE_ENV = 'development'
+
+VITE_APP_URL = '/api'
+
+# office 服务代理地址
+VITE_APP_OFFICE_PROXY_URL = '/office/'
+
+# office 脚本地址(用于动态创建脚本标签)
+VITE_APP_OFFICE_SCRIPT_URL = 'https://office.yka.one/web-apps/apps/api/documents/api.js'
--- a/.env.production
+++ b/.env.production
@ -0,0 +1,10 @@
+#生产环境
+NODE_ENV = 'production'
+
+VITE_APP_URL = '/'
+
+# office 服务代理地址
+VITE_APP_OFFICE_PROXY_URL = 'https://office.yka.one/'
+
+# office 脚本地址(用于动态创建脚本标签)
+VITE_APP_OFFICE_SCRIPT_URL = 'https://office.yka.one/web-apps/apps/api/documents/api.js'
--- a/.env.test
+++ b/.env.test
@ -0,0 +1,10 @@
+#测试环境
+NODE_ENV = 'test'
+
+VITE_APP_URL = 'https://testray.yka.moe/doc-json/'
+
+# office 服务代理地址
+VITE_APP_OFFICE_PROXY_URL = 'https://office.yka.one/'
+
+# office 脚本地址(用于动态创建脚本标签)
+VITE_APP_OFFICE_SCRIPT_URL = 'https://office.yka.one/web-apps/apps/api/documents/api.js'
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,15 @@
+dist/*
+node_modules/*
+auto-imports.d.ts
+components.d.ts
+.gitignore
+.vscode
+public
+yarn.*
+vite-env.*
+.prettierrc.*
+visualizer.*
+visualizer.html
+.env.*
+src/locales/lang
+.depcheckrc
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -0,0 +1,198 @@
+/* eslint-env node */
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+  },
+  extends: [
+    'eslint-config-prettier',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:vue/vue3-essential',
+    'plugin:prettier/recommended',
+    'prettier',
+  ],
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    parser: '@typescript-eslint/parser',
+    ecmaFeatures: {
+      jsx: true,
+      tsx: true,
+    },
+  },
+  plugins: ['vue', '@typescript-eslint', 'prettier'],
+  globals: {
+    defineProps: 'readonly',
+    defineEmits: 'readonly',
+    defineExpose: 'readonly',
+    withDefaults: 'readonly',
+  },
+  rules: {
+    '@typescript-eslint/no-explicit-any': [
+      'error',
+      {
+        ignoreRestArgs: true,
+      },
+    ],
+    'prettier/prettier': 'error',
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
+    '@typescript-eslint/consistent-type-imports': [
+      'error',
+      { disallowTypeAnnotations: false },
+    ], // 强制导入类型显示标注 `import type xxx from 'xxx'`
+    '@typescript-eslint/no-empty-interface': [
+      'error',
+      {
+        allowSingleExtends: true,
+      },
+    ],
+    'accessor-pairs': 2, // 强制同时存在 `get` 与 `set`
+    'constructor-super': 0, // 强制子类构造函数中使用 `super` 调用父类的构造函数
+    'default-case': 2, // `switch` 中强制含有 `default`
+    eqeqeq: [2, 'allow-null'], // 强制使用严格判断 `===`
+    'no-alert': 0, // 禁止使用 `alert`、`confirm`
+    'no-array-constructor': 2, // 禁止使用数组构造器
+    'no-bitwise': 0, // 禁止使用按位运算符
+    'no-caller': 1, // 禁止使用 `arguments.caller`、`arguments.callee`
+    'no-catch-shadow': 2, // 禁止 `catch` 子句参数与外部作用域变量同名
+    'no-class-assign': 2, // 禁止给类赋值
+    'no-cond-assign': 2, // 禁止在条件表达式中使用赋值语句
+    'no-const-assign': 2, // 禁止修改 `const` 声明的变量
+    'no-constant-condition': 2, // 禁止在条件中使用常量表达式 `if(true)`、`if(1)`
+    'no-dupe-keys': 2, // 在创建对象字面量时不允许 `key` 重复
+    'no-dupe-args': 2, // 函数参数不能重复
+    'no-duplicate-case': 2, // `switch` 中的 `case` 标签不能重复
+    'no-eval': 1, // 禁止使用 `eval`
+    'no-ex-assign': 2, // 禁止给 `catch` 语句中的异常参数赋值
+    'no-extend-native': 2, // 禁止扩展 `native` 对象
+    'no-extra-bind': 2, // 禁止不必要的函数绑定
+    'no-extra-boolean-cast': [
+      'error',
+      {
+        enforceForLogicalOperands: true,
+      },
+    ], // 禁止不必要的 `bool` 转换
+    'no-extra-parens': 0, // 禁止非必要的括号
+    semi: ['error', 'never', { beforeStatementContinuationChars: 'always' }],
+    'no-fallthrough': 1, // 禁止 `switch` 穿透
+    'no-func-assign': 2, // 禁止重复的函数声明
+    'no-implicit-coercion': [
+      'error',
+      {
+        allow: ['!!', '~'],
+      },
+    ], // 禁止隐式转换
+    'no-implied-eval': 2, // 禁止使用隐式 `eval`
+    'no-invalid-regexp': 2, // 禁止无效的正则表达式
+    'no-invalid-this': 2, // 禁止无效的 `this`
+    'no-irregular-whitespace': 2, // 禁止含有不合法空格
+    'no-iterator': 2, // 禁止使用 `__iterator__ ` 属性
+    'no-label-var': 2, // `label` 名不能与 `var` 声明的变量名相同
+    'no-labels': 2, // 禁止标签声明
+    'no-lone-blocks': 2, // 禁止不必要的嵌套块
+    'no-multi-spaces': 1, // 禁止使用多余的空格
+    'no-multiple-empty-lines': [1, { max: 2 }], // 空行最多不能超过 `2` 行
+    'no-new-func': 1, // 禁止使用 `new Function`
+    'no-new-object': 2, // 禁止使用 `new Object`
+    'no-new-require': 2, // 禁止使用 `new require`
+    'no-sparse-arrays': 2, // 禁止稀疏数组
+    'no-trailing-spaces': 1, // 一行结束后面不要有空格
+    'no-unreachable': 2, // 禁止有无法执行的代码
+    'no-unused-expressions': [
+      'error',
+      {
+        allowShortCircuit: true,
+        allowTernary: true,
+        allowTaggedTemplates: true,
+        enforceForJSX: true,
+      },
+    ], // 禁止无用的表达式
+    'no-useless-call': 2, // 禁止不必要的 `call` 和 `apply`
+    'no-var': 'error', // 禁用 `var`
+    'no-with': 2, // 禁用 `with`
+    'no-undef': 0,
+    'use-isnan': 2, // 强制使用 isNaN 判断 NaN
+    'no-multi-assign': 2, // 禁止连续声明变量
+    'prefer-arrow-callback': 2, // 强制使用箭头函数作为回调
+    curly: ['error', 'all'],
+    'vue/multi-word-component-names': [
+      'error',
+      {
+        ignores: [],
+      },
+    ],
+    'vue/no-use-v-if-with-v-for': [
+      'error',
+      {
+        allowUsingIterationVar: false,
+      },
+    ],
+    'vue/require-v-for-key': ['error'],
+    'vue/require-valid-default-prop': ['error'],
+    'no-use-before-define': [
+      'error',
+      {
+        functions: true,
+        classes: true,
+        variables: false,
+        allowNamedExports: false,
+      },
+    ],
+    'vue/component-definition-name-casing': ['error', 'PascalCase'],
+    'vue/html-closing-bracket-newline': [
+      'error',
+      {
+        singleline: 'never',
+        multiline: 'always',
+      },
+    ],
+    'vue/v-on-event-hyphenation': ['error', 'never'],
+    'vue/component-tags-order': [
+      'error',
+      {
+        order: ['template', 'script', 'style'],
+      },
+    ],
+    'vue/no-v-html': ['error'],
+    'vue/no-v-text': ['error'],
+    'vue/component-api-style': [
+      'error',
+      ['script-setup', 'composition', 'composition-vue2'],
+    ],
+    'vue/component-name-in-template-casing': [
+      'error',
+      'PascalCase',
+      {
+        registeredComponentsOnly: true,
+        globals: ['RouterView'],
+      },
+    ],
+    'vue/no-unused-refs': ['error'],
+    'vue/prop-name-casing': ['error', 'camelCase'],
+    'vue/component-options-name-casing': ['error', 'camelCase'],
+    'vue/attribute-hyphenation': [
+      'error',
+      'never',
+      {
+        ignore: [],
+      },
+    ],
+    'vue/no-restricted-static-attribute': [
+      'error',
+      {
+        key: 'key',
+        message: 'Disallow using key as a custom attribute',
+      },
+    ],
+  },
+}
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,31 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+yarn.lock*
+
+node_modules
+dist-ssr
+dist
+dist/
+*.local
+visualizer.*
+components.d.ts
+auto-imports.d.ts
+
+# Editor directories and files
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+yarn-*.*
+yarn.*
+pnpm.*
+pnpm-lock.yaml
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged --allow-empty "$1"
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged --allow-empty "$1"
--- a/.npmignore
+++ b/.npmignore
@ -0,0 +1,5 @@
+node_modules/
+dist/
+yarn.lock
+yarn-error.log
+visualizer.html
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,12 @@
+dist/*
+node_modules/*
+auto-imports.d.ts
+components.d.ts
+.gitignore
+public
+yarn.*
+vite-env.*
+.prettierrc.*
+visualizer.*
+visualizer.html
+.env.*
--- a/.prettierrc.cjs
+++ b/.prettierrc.cjs
@ -0,0 +1,20 @@
+module.exports = {
+  printWidth: 80, // 一行最多 `80` 字符
+  tabWidth: 2, // 使用 `2` 个空格缩进
+  useTabs: false, // 不使用缩进符, 而使用空格
+  semi: false, // 行尾不需要有分号
+  singleQuote: true, // 使用单引号
+  quoteProps: 'as-needed', // 对象的 `key` 仅在必要时用引号
+  jsxSingleQuote: false, // `jsx` 不使用单引号, 而使用双引号
+  trailingComma: 'all', // 尾随逗号
+  bracketSpacing: true, // 大括号内的首尾需要空格
+  jsxBracketSameLine: false, // `jsx` 标签的反尖括号需要换行
+  arrowParens: 'always', // 箭头函数, 只有一个参数的时候, 也需要括号
+  rangeStart: 0, // 每个文件格式化的范围是文件的全部内容
+  rangeEnd: Infinity,
+  requirePragma: false, // 不需要写文件开头的 `@prettier`
+  insertPragma: false, // 不需要自动在文件开头插入 `@prettier`
+  proseWrap: 'preserve', // 使用默认的折行标准
+  htmlWhitespaceSensitivity: 'css', // 根据显示样式决定 `html` 要不要折行
+  endOfLine: 'lf', // 换行符使用 `lf`
+}
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,3 @@
+{
+  "recommendations": ["vue.volar", "lokalise.i18n-ally"]
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,11 @@
+{
+  "i18n-ally.localesPaths": ["src/locales/lang"],
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.sortKeys": true,
+  "i18n-ally.namespace": true,
+  "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",
+  "i18n-ally.enabledParsers": ["json"],
+  "i18n-ally.sourceLanguage": "zh-CN",
+  "i18n-ally.displayLanguage": "zh-CN",
+  "i18n-ally.enabledFrameworks": ["vue", "react"]
+}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -0,0 +1,308 @@
+# CHANGE LOG
+
+## 4.0.2
+
+### Feats
+
+- 新增平级路由配置（router meta）配置项，sameLevel 允许你将子路由标记为平级模式，跳转时不会出发菜单、标签页更新，仅会更新面包屑
+- 修改路由菜单显示、隐藏逻辑，现在仅会针对权限的验证匹配选择是否加入菜单列表中
+- 更新 setupAppMenu 方法触发时机（Layout => menu store），现在将在 pinia menu store 初始化时触发 App Menu 更新
+- 更新了 utils 包中的一些方法，进行了一些重写和重命名
+- GlobalSearch 组件支持上下按键切换、回车键选择
+- 整合 router 模块的一些包，让它看起来更合理一点
+- 剔除 styles 包中一些不合理的样式模块
+- 补充了一些注释与说明文档
+
+### Fixes
+
+- 修复不能正确渲染浏览器标题问题
+- 修复初始化模板菜单函数与菜单更新函数重复执行一些方法的问题
+- 修复指令示例变量绑定错误导致示例错误问题
+- 修复路由白名单失效 bug
+
+## 4.0.1
+
+### Feats
+
+- 更改自定义路由暴露形式（由变量暴露改为方法获取）
+- 模板所有方法进行检查，重命名部分方法（使其更加贴切其逻辑）
+- 部分逻辑进行重写，使代码更容易阅读与维护
+- 模板类型进一步完善
+
+### Fixes
+
+- 修复了内存高占用问题（路由模块）
+- 修复类型导入错误问题
+
+## 4.0.0
+
+### Feats
+
+- 重构 types 包设计，现在的类型包更加清晰
+- 重构 utils 包设计，该包下的所有 hook 提供了更加友好的类型提示
+- RayIframe 组件新增 lazy 属性
+- 新增 v-disabled 指令
+- demo 页面展示优化
+
+### Fixes
+
+- 修复一些已知的 bug
+
+### 补充
+
+> 这次花了一点时间，将模板进行重新梳理，进行了一些很大的破坏性更新改动。核心重点是 types 包与 utils 包的重大更新。不过只是做了初步的一些大方向的更新，后续的细节更新还在继续。。。
+
+## 3.3.7
+
+### Feats
+
+- 新增全局指令（目前仅有：v-copy、v-debounce、v-throttle）
+
+### Fixes
+
+- 修复错误的插件命名，导致项目构建失败（viteComponents）
+
+## 3.3.6
+
+### Feats
+
+- 重写 axios interceptor 方法。现在逻辑更加清晰，并且支持请求错误、响应错误处理。补充了两个工具函数
+- MenuTag 支持动态更新所在位置
+- 修复了鉴权方法的 bug
+- 更新了 router permission 方法（路由守卫）
+- 补充了一些模块文档
+- 搜索支持以菜单模块的 icon 进行渲染，如果为空则以 icon table 默认填充
+- 重写锁屏功能，现在将锁屏逻辑与解锁逻辑拆分为两个组件
+
+### Fixes
+
+- 修复选中所搜结果后，菜单不能默认展开 bug
+
+### 补充
+
+> 文档拖欠太多了，我补不回来了，就。。。算了吧，我在每个关键模块补充了对应的 md 说明文档，凑合一下吧。真希望有一个好心人帮补充文档。
+
+## 3.3.5
+
+### Feats
+
+- Router Meta 属性支持自定义图标，不再局限于 RayIcon，支持自定义图标
+- 更改部分组件默认值，默认值统一为 `null`
+- 调整 validRole 方法逻辑，将该方法以前逻辑拆分为 validRole 与 validMenuItemShow 两个方法
+- 新增使用手册
+
+### 补充
+
+> 由于文档已经拖更很久，所以补充一个使用手册。最近太忙了，一直忙着更新完善模板本身，文档的事情暂时没有时间去维护更新，所以与模板断层太久。。。后续有时间肯定会补上！！！
+
+## 3.3.4
+
+### Feats
+
+- 新增 RayIframe 组件
+- 同步更新 `naive-ui` 版本至最新版本(2.34.3 => 2.34.4)
+- 支持更多 appConfig 配置
+
+### TODO
+
+- MenuTag: 切换页面时, 同步更新该标签的所在位置
+
+## 3.3.3
+
+### Feats
+
+- 新增五个计算方法（解决精度问题）
+- 解决一些小问题
+
+## 3.3.1
+
+### Feats
+
+- 新增 useAppTheme sass 方法
+
+```ts
+useAppTheme key 类型: 'dark' | 'light'
+```
+
+```scss
+// 暗色主题
+.demo--dark {
+  @include useAppTheme('dark') {
+    color: #ffffff;
+  }
+}
+// 明亮主题
+.demo--light {
+  @include useAppTheme('light') {
+    color: #000000;
+  }
+}
+```
+
+- 一些细节优化
+- axios 拦截器与 axios instance 进行独立（现在不再 instance.ts 文件中编写拦截器相关逻辑），拦截器逻辑放在 inject 包中
+- 一些 bug 修复
+
+## 3.3.0
+
+### 特征
+
+- 取消 RootRoute 属性暴露全局
+- 新增 Route Meta keepAlive 配置开启页面缓存（可以在 AppConfig APP_KEEP_ALIVE 中进行缓存的配置管理）
+- 回退使用自动导入路由模块方式，具体使用方法查看 [路由配置](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/src/router/README.md)
+- 新增 Route Meta order 配置，配置菜单顺序
+- 新增 useVueRouter 方法，让你在 setup 环境之外使用 router hook
+- 补充引入了一些 eslint 规则
+- 支持更多 appConfig 配置
+
+### 补充
+
+- 后续该模板还会持续维护，会尽可能多的支持更多业务场景
+- 最近破坏性更新很多，发布比较频繁，后续应该不会有这么大的破坏性更新。核心重点会放在模板整体的健壮性、可维护性上
+- 未来希望模板拆分为一个高拓展性的工程，积木式管理项目，让项目模块之间尽可能的解耦。让模板有更好的拓展性，让你在使用时，可以根据自身业务需求进行拓展（当然，我希望你能以项目的基本维护原则延续）
+
+## 3.2.3
+
+### 特征
+
+- 新增锁屏功能（值得注意的是，锁屏解锁后会刷新当前 RouterView 区域，因为在处于锁屏状态时，会自动销毁所有的操作页面。可以理解为是一个 v-if 操作行为）
+- 新增 dayjs hook，支持国际化与切换
+- 支持更多 appConfig 配置
+- 调整 setupAppRoute 触发时机（现在会在 layout 渲染阶段触发）
+- 补充了新的组件分包 AppComponents，存放该系统的一些组件（会与系统进行一些深度绑定，例如 AppAvatar 组件依赖系统数据）
+
+### 补充
+
+- 锁屏功能的设计并不理想，后期会进行破坏性更新。锁屏触发条件与管理方式目前并不理想，管理有点混乱
+- 后期会考虑补充 keepAlive 功能。目前没有实现是因为该功能实现的话，需要将所有路由提升为顶层路由（这是 KeepAlive 组件限制），目前并未实现该功能。后期会在权衡后增加该功能，实现时会在 RayTransitionComponent 进行拓展补充
+
+## 3.2.2
+
+### 特征
+
+- 移除 amfe-flexible 插件，改用为 postcss-px-to-viewport 作为适配插件
+- 支持更多 appConfig 配置
+
+## 3.2.1
+
+### 特征
+
+- 调整系统文件分包，现在结构更加合理、更加清晰
+- 新增 src/appConfig 配置入口，配置系统（还在持续补充中...）
+- vite 版本更新到 4.3.8
+
+## 3.1.8
+
+### Fixes
+
+- 修复路由切换不能复位容器位置问题（让可视区域置顶）
+
+### Feats
+
+- 新增 useI18n hook 方法
+- 手动补充 AppRouteRecordRaw、AppRouteMeta 类型
+- 重新拆分 Layout 入口文件
+- 重新指定组件暴露方法、属性
+- 修改国际化管理方式，现在支持自动合并管理与结合 i18n-ally 使用。并且支持 unplugin-vue-i18n 构建，提高性能
+
+## 3.1.7
+
+### Fixes
+
+- 修复默认获取容器可视区域高度问题
+- 修复登陆页虚线高度问题
+
+### Feats
+
+- 修改 Menu 菜单过滤逻辑，现在如果权限不匹配或者设置了 hidden 属性，则会被过滤掉
+- 移除 $activedColor 全局 sass 变量，使用 --ray-theme-primary-color 替代
+- 新增路由菜单检索功能
+- 移除 App.tsx 中同步主题方法，改为使用 cfg 配置并且使用 ejs 注入
+- 移除 MenuTag 默认主题色，现在会以当前主题色为主色
+
+## 3.1.6
+
+### Fixes
+
+- 修复移动端登陆页显示问题
+- 改进了一些方法逻辑的问题
+- 修改移动端自适应配置方案(现在使用 postcss-px-to-viewport)，默认不启用
+- 修复 RayTable 实例方法暴露错误
+- 修复 sideBarLogo.icon 为空时警告问题，现在未配置该属性则不会渲染图标
+- 修复 RayTable 演示页面 action 方法失效问题
+
+### Feats
+
+- 新增加载动画
+- 现在可以直接配置首屏加载动画一些信息(cfg.ts)
+- 新增对于 ejs 支持
+- 补充一些细节注释
+- 新增 RayChart 组件 loading、loadingOptions 属性配置
+- 新增反转色模式
+- 修改 Menu 菜单过滤逻辑，现在如果权限不匹配或者设置了 hidden 属性，则会被过滤掉
+
+## 3.1.5
+
+### Fixes
+
+- 配置 `tsconfig.json` 中 `ignoreDeprecations` 属性，消除 `ts5.0` 破坏性配置更新警告
+
+### Feats
+
+- 基于 `onlyoffice` 新增 `Office` 功能(待完成...)
+- 重写 `AxiosInstance` 类型
+- `src/types` 分包更加清晰
+- 将主色调同步至 `body`，默认同步 `cfg.primaryColor` 值
+- 登陆页一些修改(现在支持简单的响应式)
+- 将一些设置型功能抽离为组件
+- 调整同步主题色执行时机
+
+## 3.1.4
+
+### Fixes
+
+- 修复主题色切换后，点击、鼠标滑入主题未被修改问题
+- 修复 menu store 菜单切换可能会重复执行问题
+
+### Feats
+
+- 补充 MenuTag 标签页功能，现在支持丰富的关闭操作与右键菜单激活操作菜单功能
+- 新增配置全局重定向地址配置（详情见：[cfg](https://github.com/XiaoDaiGua-Ray/xiaodaigua-ray.github.io/blob/main/cfg.ts)）
+- 补充了一些不值一提的小东西
+
+## 3.1.3
+
+### Fixes
+
+- 修复菜单栏、标签页栏 border 显示问题
+
+### Feats
+
+- RayTable 组件新增全屏、尺寸调整功能
+- 新增 css 预处理全局注入辅助函数。详情看 [mixinCSS](https://github.com/XiaoDaiGua-Ray/xiaodaigua-ray.github.io/blob/main/cfg.ts)
+- RayTable 组件部分提示文案修改
+- body 新增当前主题色 class 标识(dark: ray-template--dark，light: ray-template--light)，便捷主题切换配置
+
+## 3.1.2
+
+### Fixes
+
+- 修复 DatePicker 组件国际化部分失效问题
+
+### Feats
+
+- 修改 demo 页面展示
+- 修改 RayCollapseGrid、RayTable 组件为默认不展示 border
+
+## 3.1.1
+
+### Fixes
+
+- 修复国际化语言包模块合并处理不能正常合并问题
+- 修复国际化切换时，面包屑、标签页不能正常切换
+
+### Feats
+
+- 新增面包屑
+- 支持国际化语言包分包管理(但是，依旧是合并到一个文件中，所以需要注意 key 的管理)
+- 新增国内预览地址
--- a/COMMONPROBLEM.md
+++ b/COMMONPROBLEM.md
@ -0,0 +1,21 @@
+## 常见问题
+
+### 路由
+
+#### 缓存失效
+
+> 如果出现缓存配置不生效的情况可以按照如下方法进行排查
+
+- 查看 APP_KEEP_ALIVE setupKeepAlive 属性是否配置为 true
+- 查看每个组件的 `name` 是否唯一，[`KeepAlive`](https://cn.vuejs.org/guide/built-ins/keep-alive.html) 组件重度依赖组件 `name` 作为唯一标识。详情可以查看官方文档
+- 查看该页面的路由配置是否正确，比如：`path` 是否按照模板约定方式进行配置
+
+#### 自动导入失败
+
+> 模板采用自动导入路由模块方式。如果发现路由导入有误、或者导入报错，请查看文件命名是否有误。
+
+### 国际化
+
+#### 国际化切换错误、警告
+
+> 模板二次封装 [`useI18n`](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/src/locales/useI18n.ts) 方法，首选该方法作为国际化语言切换方法。
--- a/MANUAL.md
+++ b/MANUAL.md
@ -0,0 +1,161 @@
+## Ray Template 使用手册
+
+## 前言
+
+> `Ray Template` 默认使用 `yarn` 作为包管理器，并且默认启用严格模式的 `eslint`。在导入模块的时候除 `.ts` `.tsx` `.d.ts` 文件等不需要手动补全后缀名，其余的模块导入应该手动补全所有后缀名。
+
+### 使用
+
+#### 依赖安装
+
+```sh
+# yarn
+yarn
+
+# npm
+npm i
+```
+
+#### 启动项目
+
+```sh
+# yarn
+yarn dev
+
+# npm
+npm run dev
+```
+
+#### 构建项目
+
+```sh
+# yarn
+yarn build
+
+# npm
+npm run build
+```
+
+### 国际化
+
+#### Tip
+
+- 每个新的语言包文件的文件名视为 path 开头（menu.json => menu.xxx）
+
+#### 新增语言包、新增语言模块
+
+> 项目国际化管理模块，统一放置于 `src/locales` 下。
+
+##### 文件包
+
+- lang
+- helper.ts
+- index.ts
+- useI18n.ts
+
+> 项目中使用 t locale 方法时，使用模板提供方法（useI18n.ts）
+
+```tsx
+// 引入包
+import { useI18n } from '@/locales/useI18n'
+
+const { t, locale } = useI18n()
+
+/**
+ *
+ * t: 用于绑定国际化 path
+ * locale: 用于切换系统语言。参数 key 必须与 lang 包中的语言包一致
+ */
+
+const demo = () => <span>{t('demo.demo')}</span>
+
+locale('zh-CN')
+locale('en-US')
+```
+
+##### 新增语言包
+
+> 我们举例新增台湾地区语言包。
+
+- `src/locales/lang` 文件下创建对应新语言包文件夹与语言文件
+  - zh-TW 文件夹
+  - zh-TW.ts 文件
+- 创建与原有语言格式一样的文件夹（可以直接 cv 过去）
+- 配置语言下拉项（LOCAL_OPTIONS）
+- 配置 dayjs 国际化映射（DAYJS_LOCAL_MAP）
+
+> 具体注意事项看注释。
+
+##### 最后
+
+> 按照上述步骤操作后，就已经给模板添加了一个新的语言包了。可以在页面的右上角国际化下拉框中看到新增的下拉选项，点击切换后，即可切换到对应的语言了。
+
+### 路由
+
+#### Tip
+
+- 在该模板中，路由 path 属性视 `/` 开头的路由为根路由
+- 路由会在初始化的时候将所有路由进行提升（全部提升为顶级路由），所以注意第一条 Tip
+- 路由模块会影响菜单的输出显示（菜单模块与路由模块进行拆分开来的）
+- 具体路由支持配置属性看 router/README.md 文件
+
+#### 文件包
+
+- constant 文件放置一些公共东西
+- helper 文件放置 router 的一些 hook 方法
+- modules 页面路由入口（modules 文件中每一个 xxx.ts 文件都会被视为是一个路由模块）
+- utils router 拓展方法
+- ...
+
+##### 新增路由页面
+
+- modules 中添加一个新的模块（log.ts）
+- 配置路由的相关信息
+- views 中创建 log 相关的页面信息
+
+```ts
+// 辅助函数，配合 i18n-ally 插件使用
+import { t } from '@/locales/useI18n'
+
+// 路由配置类型提示
+import type { AppRouteRecordRaw } from '@/router/type'
+
+const log: AppRouteRecordRaw = {
+  path: '/log',
+  name: 'Log',
+  component: () => import('@/views/log/index.vue'),
+  meta: {
+    i18nKey: t('menu.Log'),
+    icon: 'log',
+    order: 3,
+  },
+  children: [
+    {
+      path: 'my-log',
+      name: 'MyLog',
+      component: () => import('@/views/my-log/index.vue'),
+      meta: {
+        i18nKey: t('menu.MyLog'),
+        order: 0,
+      },
+    },
+    {
+      path: 'group-log',
+      name: 'MyLog',
+      component: () => import('@/views/group-log/index.vue'),
+      meta: {
+        i18nKey: t('menu.GroupLog'),
+        order: 0,
+      },
+    },
+  ],
+}
+
+export default log
+```
+
+##### 最后
+
+> 打开浏览器可以看到页面菜单上已经有一个日志菜单。
+
+#### 未完待续。。。后续慢慢更新该手册
--- a/README.md
+++ b/README.md
@ -0,0 +1,232 @@
+# `Ray Template`
+
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
+[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)
+
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
+
+## 感谢
+
+> 感谢 <https://me.yka.moe/> 对于本人的支持。
+
+## 预览地址
+
+- [点击预览](https://xiaodaigua-ray.github.io/ray-template/#/)
+- [点击预览(加速地址)](https://ray-template.yunkuangao.com/#/)
+
+## 文档地址
+
+- [文档](https://xiaodaigua-ray.github.io/ray-template-doc/)
+- [文档(加速地址)](https://ray-template.yunkuangao.com/ray-template-doc/)
+
+## 更新日志
+
+- [日志](https://github.com/XiaoDaiGua-Ray/xiaodaigua-ray.github.io/blob/main/CHANGELOG.md)
+
+## 常见问题
+
+- [常见问题](https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/COMMONPROBLEM.md)
+
+## 功能
+
+- 主题切换
+- 任意深度页面缓存
+- 系统配置化
+- 锁屏
+- 自动化路由
+- 带有拓展功能的表格
+- 封装 `axios` 自动取消重复请求，暴露拦截器注册器
+- 全局菜单搜索
+- 动态菜单（多级菜单）
+- 主题色切换
+- 错误页
+- 面包屑
+- 标签页
+- 国际化（允许按模块管理语言包）
+- 权限路由
+- 动态切换主题、贴花的 `EChart` 图
+- 最佳构建体验
+- 体积分析
+- 还有一些不值一提的小东西...
+
+## 未来
+
+> 根据个人时间空余情况，会不定时对该模板进行更新和迭代。希望将该工具的功能不断补全（虽然现在已经是足够日常开发和使用），将该模板打造为一个更加健全的中后台模板。如果你有好的想法和建议，可以直接联系我或者直接提 `issues` 即可。
+
+## 前言
+
+> 该项目模板采用 `vue3.x` `vite4.x` `pinia` `tsx` 进行开发。
+> 使用 `naive ui` 作为组件库。
+> 预设了最佳构建体验的配置与常用搬砖工具。意在提供一个简洁、快速上手的模板。
+> 该模板不支持移动端设备。
+
+## 提示
+
+> 项目默认启用严格模式 `eslint`，但是由于 `vite-plugin-eslint` 插件优先级最高，所以如果出现自动导入类型错误提示，请优先解决其他问题。
+> 建议开启 `vscode` 保存自动修复功能。
+
+## 版本说明
+
+> 做了一些大的改动升级，让模板更加好用了一点，默认主题色也做了变更更好看了一点。啰嗦两句，好像也没啥其他的了...
+
+## 拉取依赖
+
+```sh
+# yarn
+
+yarn
+```
+
+```sh
+# npm
+
+npm install
+```
+
+## 启动项目
+
+```sh
+# yarn
+
+yarn dev
+```
+
+```sh
+# npm
+
+npm run dev
+```
+
+## 项目打包
+
+```sh
+# yarn
+
+yarn build
+```
+
+```sh
+# npm
+
+npm run build
+```
+
+## 预览项目
+
+```sh
+# yarn
+
+yarn preview
+```
+
+```sh
+# npm
+
+npm run preview
+```
+
+## 体积分析
+
+```sh
+# yarn
+
+yarn report
+```
+
+```sh
+# npm
+
+npm run report
+```
+
+## 项目依赖
+
+- [pinia](https://pinia.vuejs.org/) `全局状态管理器`
+- [@vueuse](https://vueuse.org/) `vue3 hooks`
+- [vue-router](https://router.vuejs.org/zh/) `router`
+- [axios](http://axios-js.com/zh-cn/docs/index.html) `ajax request`
+- [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html) `国际化`
+- [scrollreveal.js](https://scrollrevealjs.org/) `滚动加载动画`(暂时移除)
+- [crypto-js](https://github.com/brix/crypto-js) `加密`
+- [vite-svg-loader](https://github.com/jpkleemans/vite-svg-loader) `svg组件化`
+- [vite-plugin-svg-icons](https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.zh_CN.md) `svg雪碧图`
+- [echarts5](https://echarts.apache.org/examples/zh/index.html#chart-type-line) `可视化`
+- [lodash-es](https://www.lodashjs.com/) `拓展方法`
+- 还有一些后续补充的，懒得写了。。。自己看项目依赖页面
+
+## 基础组件
+
+- `RayIcon` `svg icon`
+- `RayChart` 基于 `echarts5.x` 封装可视化组件
+- `RayTransitionComponent` 带过渡动画路由组件，效果与 `RouterView` 相同
+- `RayTable` 基于 `Naive UI DataTable` 组件封装，实现了一些小功能
+- `RayCollapseGrid` 基于 `Naive UI NGrid` 组件封装的可折叠操作栏
+
+## 项目结构
+
+```
+- locales: 国际化多语言入口(本项目采用 json 格式)
+
+- assets: 项目静态资源入口
+
+- component: 全局共用组件
+
+- icons: 项目svg图标资源，需要配合 RayIcon 组件使用
+
+- language: 国际化
+
+- layout: 全局页面结构入口
+
+- router: 路由表
+
+- store: 全局状态管理入口
+
+- styles: 全局公共样式入口
+
+- types: 全局 type
+
+- utils: 工具包
+
+- views: 页面入口
+
+- vite-plugin: 插件注册
+```
+
+## 浏览器支持
+
+> 仅支持现代浏览器，不支持 `IE`
+
+## 最后，希望大家搬砖愉快
+
+## 贡献者
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tbody>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://heartofyun.com"><img src="https://avatars.githubusercontent.com/u/40163747?v=4?s=100" width="100px;" alt="Cloud"/><br /><sub><b>Cloud</b></sub></a><br /><a href="#tool-yunkuangao" title="Tools">🔧</a></td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+## Contributors ✨
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
--- a/cfg.ts
+++ b/cfg.ts
@ -0,0 +1,150 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-04-06
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * 系统配置文件入口
+ *
+ * 配置范围:
+ *   - 构建: 开发构建、打包构建、预览构建、体积分析构建等
+ *   - 系统: 根路由、标题、浏览器标题、别名等
+ *   - 请求: 代理配置
+ *
+ * 如果需要新增相关内容, 需要在 src/types/modules/cfg.ts 中进行类型配置
+ * ```
+ * interface Config // config 内容类型配置
+ *
+ * interface AppConfig // __APP_CFG__ 内容配置
+ * ```
+ *
+ * __APP_CFG__ 说明
+ * ```
+ * 该属性是用于全局注入的配置方法
+ *
+ * const { appPrimaryColor } = __APP_CFG__
+ *
+ * 以上例子展示, 从 __APP_CFG__ 中解构取出 appPrimaryColor 根路由配置信息
+ * __APP_CFG__ 会被挂载于全局变量 `window` 下(vite define 默认是挂载于 window 下)
+ * ```
+ */
+
+import path from 'node:path'
+
+import {
+  HTMLTitlePlugin,
+  buildOptions,
+  mixinCSSPlugin,
+} from './vite-plugin/index'
+import { APP_THEME } from './src/appConfig/designConfig'
+import {
+  PRE_LOADING_CONFIG,
+  ROOT_ROUTE,
+  SIDE_BAR_LOGO,
+} from './src/appConfig/appConfig'
+
+import type { AppConfigExport } from '@/types/modules/cfg'
+
+const config: AppConfigExport = {
+  /** 公共基础路径配置, 如果为空则会默认以 '/' 填充 */
+  base: '/ray-template/',
+  /** 配置首屏加载信息 */
+  preloadingConfig: PRE_LOADING_CONFIG,
+  /** 默认主题色(不可省略, 必填), 也用于 ejs 注入 */
+  appPrimaryColor: APP_THEME.APP_PRIMARY_COLOR,
+  sideBarLogo: SIDE_BAR_LOGO,
+  /**
+   *
+   * 预处理全局需要注入的 css 文件
+   *
+   * 预设:
+   *   - ./src/styles/mixins.scss
+   *   - ./src/styles/setting.scss
+   *   - ./src/styles/theme.scss
+   *
+   * 如果需要删除或者修改, 需要同步修改目录下的 css 文件
+   */
+  mixinCSS: mixinCSSPlugin([
+    './src/styles/mixins.scss',
+    './src/styles/setting.scss',
+  ]),
+  /**
+   *
+   * 版权信息
+   *
+   * 也可以当作页底设置, 看实际业务需求
+   */
+  copyright: 'Copyright © 2022-present Ray',
+  /**
+   *
+   * 浏览器标题
+   */
+  title: HTMLTitlePlugin('Ray Template'),
+  /**
+   *
+   * 配置 HMR 特定选项(端口、主机、路径和协议)
+   */
+  server: {
+    host: '0.0.0.0',
+    port: 9527,
+    open: false,
+    https: false,
+    strictPort: false,
+    fs: {
+      strict: false,
+      allow: [],
+    },
+    proxy: {
+      '/api': {
+        target: 'url',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+      '/office': {
+        target: 'https://office.yka.one/',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/office/, ''),
+      },
+    },
+  },
+  /**
+   *
+   * 打包相关配置
+   */
+  buildOptions: buildOptions,
+  /**
+   *
+   * 预设别名
+   * - `@`: `src` 根目录
+   * - `@use-utils`: `src/utils` 根目录
+   * - `@use-api`: `src/axios/api` 根目录
+   * - `@use-images`: `src/assets/images` 根目录
+   */
+  alias: [
+    {
+      find: '@',
+      replacement: path.resolve(__dirname, './src'),
+    },
+    {
+      find: '@use-utils',
+      replacement: path.resolve(__dirname, './src/utils'),
+    },
+    {
+      find: '@use-api',
+      replacement: path.resolve(__dirname, './src/axios/api'),
+    },
+    {
+      find: '@use-images',
+      replacement: path.resolve(__dirname, './src/assets/images'),
+    },
+  ],
+}
+
+export default config
--- a/commitlint.config.cjs
+++ b/commitlint.config.cjs
@ -0,0 +1,21 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'type-enum': [
+      2,
+      'always',
+      [
+        'bug',
+        'feat',
+        'fix',
+        'docs',
+        'style',
+        'refactor',
+        'test',
+        'chore',
+        'revert',
+        'merge',
+      ],
+    ],
+  },
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/ray.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <style>
+    :root {
+      --preloading-tag-color: <%= preloadingConfig.tagColor %>;
+      --preloading-title-color: <%= preloadingConfig.titleColor %>;
+      --ray-theme-primary-fade-color: <%= appPrimaryColor.primaryFadeColor %>;
+      --ray-theme-primary-color: <%= appPrimaryColor.primaryColor %>;
+    }
+
+    #pre-loading-animation {
+      position: fixed;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background-color: #ffffff;
+      color: var(--preloading-title-color);
+      text-align: center;
+    }
+
+    .ray-template--dark #pre-loading-animation {
+      background-color: #2a3146;
+    }
+
+    #pre-loading-animation .pre-loading-animation__wrapper {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+
+    #pre-loading-animation
+      .pre-loading-animation__wrapper
+      .pre-loading-animation__wrapper-title {
+      font-size: 30px;
+      padding-bottom: 48px;
+    }
+
+    .pre-loading-animation__wrapper-loading {
+      display: block;
+      position: relative;
+      width: 6px;
+      height: 10px;
+
+      animation: rectangle infinite 1s ease-in-out -0.2s;
+
+      background-color: var(--preloading-tag-color);
+    }
+
+    .pre-loading-animation__wrapper-loading:before,
+    .pre-loading-animation__wrapper-loading:after {
+      position: absolute;
+      width: 6px;
+      height: 10px;
+      content: '';
+      background-color: var(--preloading-tag-color);
+    }
+
+    .pre-loading-animation__wrapper-loading:before {
+      left: -14px;
+
+      animation: rectangle infinite 1s ease-in-out -0.4s;
+    }
+
+    .pre-loading-animation__wrapper-loading:after {
+      right: -14px;
+
+      animation: rectangle infinite 1s ease-in-out;
+    }
+
+    @keyframes rectangle {
+      0%,
+      80%,
+      100% {
+        height: 20px;
+        box-shadow: 0 0 var(--preloading-tag-color);
+      }
+
+      40% {
+        height: 30px;
+        box-shadow: 0 -20px var(--preloading-tag-color);
+      }
+    }
+  </style>
+  <body>
+    <div id="app"></div>
+    <div id="pre-loading-animation">
+      <div class="pre-loading-animation__wrapper">
+        <div class="pre-loading-animation__wrapper-title">
+          <%= preloadingConfig.title %>
+        </div>
+        <div class="pre-loading-animation__wrapper-loading"></div>
+      </div>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,114 @@
+{
+  "name": "ray-template",
+  "private": false,
+  "version": "4.0.2",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build --mode production",
+    "preview": "vite preview",
+    "test": "vue-tsc --noEmit && vite build --mode test",
+    "dev-build": "vue-tsc --noEmit && vite build --mode development",
+    "report": "vue-tsc --noEmit && vite build --mode report",
+    "prepare": "husky install"
+  },
+  "lint-staged": {
+    "src/**/*.{vue,jsx,ts,tsx,json}": [
+      "prettier --write",
+      "eslint",
+      "git add"
+    ]
+  },
+  "dependencies": {
+    "@vueuse/core": "^9.1.0",
+    "axios": "^1.2.0",
+    "clipboard": "^2.0.11",
+    "crypto-js": "^4.1.1",
+    "currency.js": "^2.0.4",
+    "dayjs": "^1.11.7",
+    "echarts": "^5.4.0",
+    "lodash-es": "^4.17.21",
+    "naive-ui": "^2.34.4",
+    "pinia": "^2.0.17",
+    "pinia-plugin-persistedstate": "^2.4.0",
+    "print-js": "^1.6.0",
+    "qrcode.vue": "^3.3.4",
+    "sass": "^1.54.3",
+    "screenfull": "^6.0.2",
+    "vue": "^3.2.47",
+    "vue-i18n": "^9.2.2",
+    "vue-router": "^4.1.3",
+    "vuedraggable": "^4.1.0",
+    "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.5.0",
+    "@types/crypto-js": "^4.1.1",
+    "@types/lodash-es": "^4.17.7",
+    "@types/scrollreveal": "^0.0.8",
+    "@typescript-eslint/eslint-plugin": "^5.61.0",
+    "@typescript-eslint/parser": "^5.61.0",
+    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "@vue/eslint-config-prettier": "^7.1.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-react": "^7.31.10",
+    "eslint-plugin-vue": "^9.15.1",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.1.0",
+    "postcss": "^8.1.0",
+    "postcss-px-to-viewport": "^1.1.1",
+    "prettier": "^2.7.1",
+    "rollup-plugin-visualizer": "^5.8.3",
+    "svg-sprite-loader": "^6.0.11",
+    "typescript": "^5.0.2",
+    "unplugin-auto-import": "^0.11.0",
+    "unplugin-vue-components": "^0.22.0",
+    "vite": "^4.3.9",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-ejs": "^1.6.4",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-imp": "^2.3.1",
+    "vite-plugin-inspect": "^0.7.26",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vite-svg-loader": "^3.4.0",
+    "vue-tsc": "^1.4.2"
+  },
+  "description": "<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->",
+  "main": "index.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/XiaoDaiGua-Ray/xiaodaigua-ray.github.io.git"
+  },
+  "keywords": [
+    "ray-template",
+    "vue3.2模板",
+    "vue3-tsx-vite-pinia",
+    "ray template",
+    "Ray Template",
+    "admin template",
+    "中后台模板"
+  ],
+  "files": [
+    "**/*"
+  ],
+  "author": "Ray",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/XiaoDaiGua-Ray/xiaodaigua-ray.github.io/issues"
+  },
+  "homepage": "https://github.com/XiaoDaiGua-Ray/xiaodaigua-ray.github.io#readme"
+}
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@ -0,0 +1,31 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {
+      overrideBrowserslist: [
+        'Android 4.1',
+        'iOS 7.1',
+        'Chrome > 31',
+        'ff > 31',
+        'ie >= 8',
+        'last 10 versions',
+      ],
+      grid: true,
+    },
+    // 'postcss-px-to-viewport': {
+    //   /** 视窗的宽度(设计稿的宽度) */
+    //   viewportWidth: 1920,
+    //   /** 视窗的高度(设计稿高度, 一般无需指定) */
+    //   viewportHeight: 1080,
+    //   /** 指定 px 转换为视窗单位值的小数位数 */
+    //   unitPrecision: 3,
+    //   /** 指定需要转换成的视窗单位 */
+    //   viewportUnit: 'vw',
+    //   /** 指定不转换为视窗单位的类 */
+    //   selectorBlackList: ['.ignore'],
+    //   /** 小于或等于 1px 不转换为视窗单位 */
+    //   minPixelValue: 1,
+    //   /** 允许在媒体查询中转换 px */
+    //   mediaQuery: false,
+    // },
+  },
+}
--- a/public/ray.svg
+++ b/public/ray.svg
@ -0,0 +1,14 @@
+<svg t="1659811416176" class="icon" viewBox="0 0 1147 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10290" width="64" height="64">
+  <path d="M472.342857 968.685714c-73.828571 0-130.171429-12-172.114286-36.571428-38.742857-22.742857-84.914286-68.685714-84.914285-158.057143-2.971429-141.942857 109.714286-259.542857 251.657143-262.514286 141.942857-2.971429 259.542857 109.714286 262.514285 251.657143 0.114286 3.657143 0.114286 7.2 0 10.857143 0 89.371429-46.171429 135.2-84.914285 158.057143-41.942857 24.685714-98.285714 36.571429-172.228572 36.571428z" fill="#25467A" p-id="10291"></path>
+  <path d="M766.742857 968.685714c-73.942857 0-130.171429-12-172.228571-36.571428-38.742857-22.742857-84.914286-68.685714-84.914286-158.057143 2.857143-141.942857 120.228571-254.742857 262.285714-252 137.942857 2.742857 249.142857 113.942857 252 252 0 89.371429-46.171429 135.2-84.914285 158.057143-42.057143 24.685714-98.4 36.571429-172.228572 36.571428z" fill="#25467A" p-id="10292"></path>
+  <path d="M512 940.571429c-153.257143 0-268.457143-24-352.457143-73.257143-50.971429-29.942857-90.514286-69.714286-117.142857-118.057143C14.285714 698.285714 0 637.028571 0 567.085714c0.114286-282.857143 229.6-512 512.457143-511.885714 205.6 0.114286 391.2 123.2 471.314286 312.571429 26.742857 63.085714 40.342857 130.857143 40.228571 199.314285 0 69.828571-14.285714 131.2-42.4 182.171429-26.742857 48.342857-66.171429 88.114286-117.142857 118.057143C780.571429 916.685714 665.257143 940.571429 512 940.571429z" fill="#25467A" p-id="10293"></path>
+  <path d="M48 567.085714c0-256.228571 207.771429-464 464-464s464 207.771429 464 464S768.228571 892.571429 512 892.571429 48 823.314286 48 567.085714z" fill="#FFF3E0" p-id="10294"></path>
+  <path d="M472.342857 943.542857c-69.257143 0-121.371429-10.857143-159.428571-33.142857-48.114286-28.228571-72.457143-74.171429-72.457143-136.342857 0-127.885714 104-232 232-232s232 104 232 232c0 62.171429-24.342857 108.114286-72.571429 136.342857-38.057143 22.4-90.171429 33.142857-159.542857 33.142857z" fill="#25467A" p-id="10295"></path>
+  <path d="M263.314286 774.057143c0-115.428571 93.485714-209.142857 209.028571-209.142857 115.428571 0 209.142857 93.485714 209.142857 209.028571v0.114286c0 115.428571-93.6 146.628571-209.142857 146.628571s-209.028571-31.085714-209.028571-146.628571z" fill="#FFF3E0" p-id="10296"></path>
+  <path d="M472.342857 652.8c-73.371429 0-132.8 51.771429-132.8 115.657143 0 18.514286 5.028571 33.142857 13.942857 44.571428-1.714286 10.971429-2.628571 22.057143-2.742857 33.142858 0 32.8 9.942857 38.971429 22.285714 38.971428s22.285714-6.285714 22.285715-38.971428c0-2.057143 0-4.228571-0.114286-6.285715 21.714286 7.085714 48.457143 9.714286 77.142857 9.714286 73.371429 0 132.8-17.257143 132.8-81.142857s-59.428571-115.657143-132.8-115.657143z" fill="#388E3C" p-id="10297"></path>
+  <path d="M766.742857 943.542857c-69.257143 0-121.371429-10.857143-159.428571-33.142857-48.114286-28.228571-72.571429-74.171429-72.571429-136.342857 0-127.885714 104.114286-232 232-232s232 104 232 232c0 62.171429-24.342857 108.114286-72.571428 136.342857-38.057143 22.4-90.171429 33.142857-159.428572 33.142857z" fill="#25467A" p-id="10298"></path>
+  <path d="M557.6 774.057143c0-115.428571 93.6-209.142857 209.142857-209.142857s209.142857 93.6 209.142857 209.142857c0 115.428571-93.6 146.628571-209.142857 146.628571s-209.142857-31.085714-209.142857-146.628571z" fill="#FFF3E0" p-id="10299"></path>
+  <path d="M766.742857 652.8c-73.371429 0-132.8 51.771429-132.8 115.657143 0 18.514286 5.028571 33.142857 13.942857 44.571428-1.714286 10.971429-2.628571 22.057143-2.742857 33.142858 0 32.8 9.942857 38.971429 22.285714 38.971428s22.285714-6.285714 22.285715-38.971428c0-2.057143 0-4.228571-0.114286-6.285715 21.714286 7.085714 48.342857 9.714286 77.142857 9.714286 73.371429 0 132.8-17.257143 132.8-81.142857S840 652.8 766.742857 652.8z" fill="#FBC02D" p-id="10300"></path>
+  <path d="M401.6 486.857143c-38.171429 0-69.142857-30.971429-69.142857-69.257143 0-7.657143 6.171429-13.828571 13.828571-13.828571 7.314286 0 13.485714 5.714286 13.828572 13.028571v0.8c-0.342857 22.971429 17.942857 41.828571 40.8 42.171429s41.828571-17.942857 42.171428-40.8v-1.371429c-0.228571-7.657143 5.828571-14.057143 13.371429-14.285714s14.057143 5.828571 14.285714 13.371428v0.8c0.114286 38.4-30.857143 69.371429-69.142857 69.371429zM221.714286 306.971429c-0.342857 22.971429 17.942857 41.828571 40.8 42.171428s41.828571-17.942857 42.171428-40.8v-1.371428c0.342857-22.971429-17.942857-41.828571-40.8-42.171429-22.971429-0.342857-41.828571 17.942857-42.171428 40.8v1.371429zM498.514286 306.971429c-0.342857 22.971429 17.828571 41.828571 40.8 42.285714 22.971429 0.342857 41.828571-17.828571 42.285714-40.8v-1.485714c0.342857-22.971429-17.942857-41.828571-40.8-42.171429-22.971429-0.342857-41.828571 17.942857-42.171429 40.8-0.114286 0.457143-0.114286 0.914286-0.114285 1.371429z" fill="#25467A" p-id="10301"></path>
+  <path d="M207.885714 376.228571h-55.314285c-15.314286-0.342857-27.885714 11.771429-28.228572 27.085715-0.342857 15.314286 11.771429 27.885714 27.085714 28.228571H208c15.314286 0.342857 27.885714-11.771429 28.228571-27.085714 0.342857-15.314286-11.771429-27.885714-27.085714-28.228572h-1.257143z m442.857143 0H595.428571c-15.314286 0-27.657143 12.342857-27.657142 27.657143s12.342857 27.657143 27.657142 27.657143h55.314286c15.314286 0.342857 27.885714-11.771429 28.228572-27.085714 0.342857-15.314286-11.771429-27.885714-27.085715-28.228572h-1.142857z" fill="#F8BBD0" p-id="10302"></path>
+</svg>
--- a/src/App.tsx
+++ b/src/App.tsx
@ -0,0 +1,105 @@
+import RayGlobalProvider from '@/components/RayGlobalProvider/index'
+import { RouterView } from 'vue-router'
+import GlobalSpin from '@/spin/index'
+import LockScreen from '@/components/AppComponents/AppLockScreen/index'
+
+import { getStorage } from '@/utils/cache'
+import { get } from 'lodash-es'
+import { useSetting } from '@/store'
+import { addClass, removeClass, addStyle, colorToRgba } from '@/utils/element'
+
+import type { SettingState } from '@/store/modules/setting/type'
+
+const App = defineComponent({
+  name: 'App',
+  setup() {
+    const settingStore = useSetting()
+
+    const { themeValue } = storeToRefs(settingStore)
+
+    /** 同步主题色变量至 body, 如果未获取到缓存值则已默认值填充 */
+    const syncPrimaryColorToBody = () => {
+      const {
+        appPrimaryColor: { primaryColor, primaryFadeColor },
+      } = __APP_CFG__ // 默认主题色
+      const body = document.body
+
+      const primaryColorOverride = getStorage<SettingState>(
+        'piniaSettingStore',
+        'localStorage',
+      )
+
+      if (primaryColorOverride) {
+        const _p = get(
+          primaryColorOverride,
+          'primaryColorOverride.common.primaryColor',
+          primaryColor,
+        )
+        const _fp = colorToRgba(_p, 0.3)
+
+        /** 设置全局主题色 css 变量 */
+        body.style.setProperty('--ray-theme-primary-color', _p)
+        body.style.setProperty(
+          '--ray-theme-primary-fade-color',
+          _fp || primaryFadeColor,
+        )
+      }
+    }
+
+    /** 隐藏加载动画 */
+    const hiddenLoadingAnimation = () => {
+      /** pre-loading-animation 是默认 id */
+      const el = document.getElementById('pre-loading-animation')
+
+      if (el) {
+        addStyle(el, {
+          display: 'none',
+        })
+      }
+    }
+
+    syncPrimaryColorToBody()
+    hiddenLoadingAnimation()
+
+    /** 切换主题时, 同步更新 body class 以便于进行自定义 css 配置 */
+    watch(
+      () => themeValue.value,
+      (newData) => {
+        /**
+         *
+         * 初始化时根据当前主题色进行初始化 body 的 class 属性
+         *
+         * 根据 themeValue 进行初始化
+         */
+        const body = document.body
+        const darkClassName = 'ray-template--dark'
+        const lightClassName = 'ray-template--light'
+
+        newData
+          ? removeClass(body, lightClassName)
+          : removeClass(body, darkClassName)
+
+        addClass(body, newData ? darkClassName : lightClassName)
+      },
+      {
+        immediate: true,
+      },
+    )
+  },
+  render() {
+    return (
+      <RayGlobalProvider>
+        <LockScreen />
+
+        <GlobalSpin>
+          {{
+            default: () => <RouterView />,
+            description: () => 'lodaing...',
+          }}
+        </GlobalSpin>
+      </RayGlobalProvider>
+    )
+  },
+})
+
+export default App
--- a/src/appConfig/appConfig.ts
+++ b/src/appConfig/appConfig.ts
@ -0,0 +1,106 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-05-23
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/** 系统配置 */
+
+import type {
+  LayoutSideBarLogo,
+  PreloadingConfig,
+  RootRoute,
+} from '@/types/modules/cfg'
+import type { AppMenuConfig, AppKeepAlive } from '@/types/modules/appConfig'
+
+/**
+ *
+ * 系统缓存
+ *
+ * 说明:
+ *   - setupKeepAlive: 是否启用系统页面缓存, 设置为 false 则关闭系统页面缓存
+ *   - keepAliveExclude: 排除哪些页面不缓存
+ *   - maxKeepAliveLength: 最大缓存页面数量
+ */
+export const APP_KEEP_ALIVE: Readonly<AppKeepAlive> = {
+  setupKeepAlive: true,
+  keepAliveExclude: [],
+  maxKeepAliveLength: 5,
+}
+
+/** 首屏加载信息配置 */
+export const PRE_LOADING_CONFIG: PreloadingConfig = {
+  title: 'Ray Template',
+  tagColor: '#ff6700',
+  titleColor: '#2d8cf0',
+}
+
+/**
+ *
+ * 配置根页面
+ * 该项目所有重定向至首页, 都依赖该配置项
+ *
+ * 如果修改了该项目的首页路由配置, 需要更改该配置项, 以免重定向首页操作出现错误
+ */
+export const ROOT_ROUTE: Readonly<RootRoute> = {
+  name: 'Dashboard',
+  path: '/dashboard',
+}
+
+/**
+ *
+ * icon: LOGO 图标, 依赖 `RayIcon` 实现(如果为空则不会渲染图标)
+ * title: LOGO 标题
+ * url: 点击跳转地址, 如果不配置该属性, 则不会触发跳转
+ * jumpType: 跳转类型(station: 项目内跳转, outsideStation: 新页面打开)
+ *
+ * 如果不设置该属性或者为空, 则不会渲染 LOGO
+ */
+export const SIDE_BAR_LOGO: LayoutSideBarLogo = {
+  icon: 'ray',
+  title: 'Ray Template',
+  url: '/dashboard',
+  jumpType: 'station',
+}
+
+/**
+ *
+ * 系统菜单折叠配置
+ *
+ * MENU_COLLAPSED_WIDTH 配置仅当 MENU_COLLAPSED_MODE 为 width 风格时才有效
+ *
+ * MENU_COLLAPSED_MODE:
+ *   - transform: 边栏将只会移动它的位置而不会改变宽度
+ *   - width: Sider 的内容宽度将会被实际改变
+ * MENU_COLLAPSED_ICON_SIZE 配置菜单未折叠时图标的大小
+ * MENU_COLLAPSED_INDENT 配置菜单每级的缩进
+ * MENU_ACCORDION 手风琴模式
+ */
+export const APP_MENU_CONFIG: Readonly<AppMenuConfig> = {
+  MENU_COLLAPSED_WIDTH: 64,
+  MENU_COLLAPSED_MODE: 'width',
+  MENU_COLLAPSED_ICON_SIZE: 22,
+  MENU_COLLAPSED_INDENT: 24,
+  MENU_ACCORDION: false,
+}
+
+/**
+ *
+ * 系统默认缓存 key 配置
+ * 仅暴露部分系统获取缓存配置, 其余 key 暂不开放
+ *
+ * 说明:
+ *   - signin: 登陆信息缓存 key
+ *   - localeLanguage: 国际化默认缓存 key
+ *   - token: token key
+ */
+export const APP_CATCH_KEY = {
+  signin: 'signin',
+  localeLanguage: 'localeLanguage',
+  token: 'token',
+} as const
--- a/src/appConfig/designConfig.ts
+++ b/src/appConfig/designConfig.ts
@ -0,0 +1,63 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-05-19
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/** 系统颜色风格配置入口 */
+
+import type { AppTheme } from '@/types/modules/cfg'
+
+export const APP_THEME: AppTheme = {
+  /**
+   *
+   * 系统主题颜色预设色盘
+   * 支持 RGBA、RGB、十六进制
+   */
+  APP_THEME_COLOR: [
+    '#2d8cf0',
+    '#0960bd',
+    '#536dfe',
+    '#ff5c93',
+    '#ee4f12',
+    '#9c27b0',
+    '#ff9800',
+    '#18A058',
+  ],
+  /** 系统主题色 */
+  APP_PRIMARY_COLOR: {
+    /** 主题色 */
+    primaryColor: '#2d8cf0',
+    /** 主题辅助色(用于整体 hover、active 等之类颜色) */
+    primaryFadeColor: 'rgba(45, 140, 240, 0.3)',
+  },
+  /**
+   *
+   * 配置系统 naive-ui 主题色
+   * 官网文档地址: <https://www.naiveui.com/zh-CN/dark/docs/customize-theme>
+   *
+   * 注意:
+   *   - APP_PRIMARY_COLOR common 配置优先级大于该配置
+   *
+   * 如果需要定制化整体组件样式, 配置示例
+   * ```
+   * const themeOverrides: GlobalThemeOverrides = {
+   *   common: {
+   *     primaryColor: '#FF0000',
+   *   },
+   *   Button: {
+   *     textColor: '#FF0000',
+   *   },
+   * }
+   * ```
+   *
+   * 具体自行查看官网, 还有模式更佳丰富的 peers 主题变量配置
+   * 地址: <https://www.naiveui.com/zh-CN/dark/docs/customize-theme#%E4%BD%BF%E7%94%A8-peers-%E4%B8%BB%E9%A2%98%E5%8F%98%E9%87%8F>
+   */
+  APP_NAIVE_UI_THEME_OVERRIDES: {},
+}
--- a/src/appConfig/localConfig.ts
+++ b/src/appConfig/localConfig.ts
@ -0,0 +1,62 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-05-19
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/** 国际化相关配置 */
+
+import type { DayjsLocal, DayjsLocalMap } from '@/dayjs/type'
+import type { AppLocalesDropdownMixedOption } from '@/locales/type'
+
+/**
+ *
+ * 语言包语种添加后, 需要在此文件配置语言包
+ * 该配置中的 key 也会影响 naiveLocales 方法, 配置后请仔细核对一下
+ *
+ * 添加新的语言包后, 如果需要其类型提示, 需要在 CurrentAppMessages 中添加新的类型
+ */
+export const LOCAL_OPTIONS: AppLocalesDropdownMixedOption[] = [
+  {
+    key: 'zh-CN',
+    label: '中文(简体)',
+  },
+  {
+    key: 'en-US',
+    label: 'English(US)',
+  },
+]
+
+/**
+ *
+ * 系统默认语言
+ *
+ * 配置时应该与 LOCAL_OPTIONS 的 key 一致
+ */
+export const SYSTEM_DEFAULT_LOCAL = 'zh-CN'
+
+/**
+ *
+ * dayjs 默认语言格式
+ * 默认为英文(en)
+ *
+ * 系统默认设置为中文(大陆-简体)
+ */
+export const DEFAULT_DAYJS_LOCAL: DayjsLocal = 'zh-cn'
+
+/**
+ *
+ * i18n 国际化配置与 dayjs 配置的映射入口
+ *
+ * key 应该与 LOCAL_OPTIONS key 一致
+ * 配置时请仔细检查
+ */
+export const DAYJS_LOCAL_MAP: DayjsLocalMap = {
+  'zh-CN': 'zh-cn',
+  'en-US': 'en',
+}
--- a/src/appConfig/regexConfig.ts
+++ b/src/appConfig/regexConfig.ts
@ -0,0 +1,22 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-12
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * 正则入口
+ * 系统公共正则, 配置在该文件中
+ */
+
+export const APP_REGEX: Record<string, RegExp> = {
+  /** css 尺寸单位匹配 */
+  validerCSSUnit:
+    /^\d+(\.\d+)?(px|em|rem|%|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ch|ex|q|s|ms|deg|rad|turn|grad|hz|khz|dpi|dpcm|dppx|fr|auto)$/,
+}
--- a/src/appConfig/requestConfig.ts
+++ b/src/appConfig/requestConfig.ts
@ -0,0 +1,22 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-02
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import type { AxiosConfig } from '@/types/modules/appConfig'
+
+/** axios 相关配置 */
+export const AXIOS_CONFIG: AxiosConfig = {
+  baseURL: '', // `import.meta.env`,
+  withCredentials: false, // 是否允许跨域携带 `cookie`
+  timeout: 5 * 1000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+}
--- a/src/appConfig/routerConfig.ts
+++ b/src/appConfig/routerConfig.ts
@ -0,0 +1,55 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-05-19
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/** vue-router 相关配置入口 */
+
+import type { LayoutInst } from 'naive-ui'
+
+/**
+ *
+ * 内容区域 ref 注册
+ * 可以控制内容区域当前滚动位置
+ * 如果你需要在切换路由时候配置自定义滚动到某个视图区域时, 可以使用该属性提供的方法(scrollTo)
+ *
+ * 请注意
+ * 如果你动态的添加了某个属性后, 希望控制滚动条滚动到某个区域时, 应该注意 dom 挂载后再执行该方法
+ * @example
+ * ```ts
+ * nextTick().then(() => {
+ *  LAYOUT_CONTENT_REF.value?.scrollTo()
+ * })
+ * ```
+ */
+export const LAYOUT_CONTENT_REF = ref<LayoutInst>()
+
+/** 是否启用路由切换时顶部加载条 */
+export const SETUP_ROUTER_LOADING_BAR = true
+
+/** 是否启用路由守卫, 如果设置为 false 则不会触发路由切换校验 */
+export const SETUP_ROUTER_GUARD = true
+
+/**
+ *
+ * 路由白名单(不进行权限校验路由)
+ *
+ * 路由表单白名单
+ *
+ * 如果需要启用该功能, 则需要配置路由 name 属性, 并且需要一一对应(对大小写敏感)
+ * 并且在配置 route name 属性时, 如果 name 类型为 symbol 的话, 会认为该路由永远不与白名单列表进行匹配
+ */
+export const WHITE_ROUTES: string[] = ['RLogin', 'ErrorPage', 'RayTemplateDoc']
+
+/**
+ *
+ * 超级管理员
+ * 配置默认超级管理员, 默认拥有全部最高权限
+ */
+export const SUPER_ADMIN: (string | number)[] = ['admin']
--- a/src/assets/images/ray.svg
+++ b/src/assets/images/ray.svg
@ -0,0 +1,14 @@
+<svg t="1659811416176" class="icon" viewBox="0 0 1147 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10290" width="64" height="64">
+  <path d="M472.342857 968.685714c-73.828571 0-130.171429-12-172.114286-36.571428-38.742857-22.742857-84.914286-68.685714-84.914285-158.057143-2.971429-141.942857 109.714286-259.542857 251.657143-262.514286 141.942857-2.971429 259.542857 109.714286 262.514285 251.657143 0.114286 3.657143 0.114286 7.2 0 10.857143 0 89.371429-46.171429 135.2-84.914285 158.057143-41.942857 24.685714-98.285714 36.571429-172.228572 36.571428z" fill="#25467A" p-id="10291"></path>
+  <path d="M766.742857 968.685714c-73.942857 0-130.171429-12-172.228571-36.571428-38.742857-22.742857-84.914286-68.685714-84.914286-158.057143 2.857143-141.942857 120.228571-254.742857 262.285714-252 137.942857 2.742857 249.142857 113.942857 252 252 0 89.371429-46.171429 135.2-84.914285 158.057143-42.057143 24.685714-98.4 36.571429-172.228572 36.571428z" fill="#25467A" p-id="10292"></path>
+  <path d="M512 940.571429c-153.257143 0-268.457143-24-352.457143-73.257143-50.971429-29.942857-90.514286-69.714286-117.142857-118.057143C14.285714 698.285714 0 637.028571 0 567.085714c0.114286-282.857143 229.6-512 512.457143-511.885714 205.6 0.114286 391.2 123.2 471.314286 312.571429 26.742857 63.085714 40.342857 130.857143 40.228571 199.314285 0 69.828571-14.285714 131.2-42.4 182.171429-26.742857 48.342857-66.171429 88.114286-117.142857 118.057143C780.571429 916.685714 665.257143 940.571429 512 940.571429z" fill="#25467A" p-id="10293"></path>
+  <path d="M48 567.085714c0-256.228571 207.771429-464 464-464s464 207.771429 464 464S768.228571 892.571429 512 892.571429 48 823.314286 48 567.085714z" fill="#FFF3E0" p-id="10294"></path>
+  <path d="M472.342857 943.542857c-69.257143 0-121.371429-10.857143-159.428571-33.142857-48.114286-28.228571-72.457143-74.171429-72.457143-136.342857 0-127.885714 104-232 232-232s232 104 232 232c0 62.171429-24.342857 108.114286-72.571429 136.342857-38.057143 22.4-90.171429 33.142857-159.542857 33.142857z" fill="#25467A" p-id="10295"></path>
+  <path d="M263.314286 774.057143c0-115.428571 93.485714-209.142857 209.028571-209.142857 115.428571 0 209.142857 93.485714 209.142857 209.028571v0.114286c0 115.428571-93.6 146.628571-209.142857 146.628571s-209.028571-31.085714-209.028571-146.628571z" fill="#FFF3E0" p-id="10296"></path>
+  <path d="M472.342857 652.8c-73.371429 0-132.8 51.771429-132.8 115.657143 0 18.514286 5.028571 33.142857 13.942857 44.571428-1.714286 10.971429-2.628571 22.057143-2.742857 33.142858 0 32.8 9.942857 38.971429 22.285714 38.971428s22.285714-6.285714 22.285715-38.971428c0-2.057143 0-4.228571-0.114286-6.285715 21.714286 7.085714 48.457143 9.714286 77.142857 9.714286 73.371429 0 132.8-17.257143 132.8-81.142857s-59.428571-115.657143-132.8-115.657143z" fill="#388E3C" p-id="10297"></path>
+  <path d="M766.742857 943.542857c-69.257143 0-121.371429-10.857143-159.428571-33.142857-48.114286-28.228571-72.571429-74.171429-72.571429-136.342857 0-127.885714 104.114286-232 232-232s232 104 232 232c0 62.171429-24.342857 108.114286-72.571428 136.342857-38.057143 22.4-90.171429 33.142857-159.428572 33.142857z" fill="#25467A" p-id="10298"></path>
+  <path d="M557.6 774.057143c0-115.428571 93.6-209.142857 209.142857-209.142857s209.142857 93.6 209.142857 209.142857c0 115.428571-93.6 146.628571-209.142857 146.628571s-209.142857-31.085714-209.142857-146.628571z" fill="#FFF3E0" p-id="10299"></path>
+  <path d="M766.742857 652.8c-73.371429 0-132.8 51.771429-132.8 115.657143 0 18.514286 5.028571 33.142857 13.942857 44.571428-1.714286 10.971429-2.628571 22.057143-2.742857 33.142858 0 32.8 9.942857 38.971429 22.285714 38.971428s22.285714-6.285714 22.285715-38.971428c0-2.057143 0-4.228571-0.114286-6.285715 21.714286 7.085714 48.342857 9.714286 77.142857 9.714286 73.371429 0 132.8-17.257143 132.8-81.142857S840 652.8 766.742857 652.8z" fill="#FBC02D" p-id="10300"></path>
+  <path d="M401.6 486.857143c-38.171429 0-69.142857-30.971429-69.142857-69.257143 0-7.657143 6.171429-13.828571 13.828571-13.828571 7.314286 0 13.485714 5.714286 13.828572 13.028571v0.8c-0.342857 22.971429 17.942857 41.828571 40.8 42.171429s41.828571-17.942857 42.171428-40.8v-1.371429c-0.228571-7.657143 5.828571-14.057143 13.371429-14.285714s14.057143 5.828571 14.285714 13.371428v0.8c0.114286 38.4-30.857143 69.371429-69.142857 69.371429zM221.714286 306.971429c-0.342857 22.971429 17.942857 41.828571 40.8 42.171428s41.828571-17.942857 42.171428-40.8v-1.371428c0.342857-22.971429-17.942857-41.828571-40.8-42.171429-22.971429-0.342857-41.828571 17.942857-42.171428 40.8v1.371429zM498.514286 306.971429c-0.342857 22.971429 17.828571 41.828571 40.8 42.285714 22.971429 0.342857 41.828571-17.828571 42.285714-40.8v-1.485714c0.342857-22.971429-17.942857-41.828571-40.8-42.171429-22.971429-0.342857-41.828571 17.942857-42.171429 40.8-0.114286 0.457143-0.114286 0.914286-0.114285 1.371429z" fill="#25467A" p-id="10301"></path>
+  <path d="M207.885714 376.228571h-55.314285c-15.314286-0.342857-27.885714 11.771429-28.228572 27.085715-0.342857 15.314286 11.771429 27.885714 27.085714 28.228571H208c15.314286 0.342857 27.885714-11.771429 28.228571-27.085714 0.342857-15.314286-11.771429-27.885714-27.085714-28.228572h-1.257143z m442.857143 0H595.428571c-15.314286 0-27.657143 12.342857-27.657142 27.657143s12.342857 27.657143 27.657142 27.657143h55.314286c15.314286 0.342857 27.885714-11.771429 28.228572-27.085714 0.342857-15.314286-11.771429-27.885714-27.085715-28.228572h-1.142857z" fill="#F8BBD0" p-id="10302"></path>
+</svg>
--- a/src/axios/README.md
+++ b/src/axios/README.md
@ -0,0 +1,71 @@
+## 说明
+
+> axios 包，全局的 axios 使用入口
+> `src/axios/instance.ts` 文件为 axios 实例文件，应该不可更改，如果需要有拦截器相关的操作，应该在 `src/axios/inject` 文件下按照需求在对应注册器中进行注册相关方法。该项目将 axios instance 与 axios interceptor 进行解耦，避免实例文件的臃肿。
+
+## 工具函数
+
+- BeforeFetchFunction
+- FetchErrorFunction
+
+> 两个工具函数方便类型推导。
+
+## 约束
+
+### 拦截器添加
+
+> 这里以请求拦截器添加为示例
+
+```ts
+/**
+ *
+ * 拦截器说明
+ *
+ * 注册一个根据系统当前环境是否携带测试环境请求拦截器
+ */
+
+import { appendRequestHeaders } from '@/axios/helper/axiosCopilot'
+
+import type {
+  RequestInterceptorConfig,
+  BeforeFetchFunction,
+  FetchErrorFunction,
+} from '@/axios/type'
+
+const injectRequestHeaderOfEnv: BeforeFetchFunction<
+  RequestInterceptorConfig
+> = (ins, mode) => {
+  if (mode === 'development') {
+    appendRequestHeaders(ins, [
+      {
+        key: 'Development-Mode',
+        value: 'development',
+      },
+    ])
+  }
+}
+
+/**
+ *
+ * 在 setupRequestInterceptor 中注册
+ */
+
+export const setupRequestInterceptor = () => {
+  setImplement(
+    'implementRequestInterceptorArray',
+    [injectRequestHeaderOfEnv],
+    'ok',
+  )
+}
+
+/** 至此完成了请求拦截器的注册 */
+```
+
+### 注册器
+
+> 每个类型注册器都有两个方法，用于注册拦截器方法。都以 setupXXX 开头命名。注册器以队列形式管理拦截器方法，所以可能需要注意执行顺序。如果有新的拦截器方法，需要根据其使用场景在对应的注册器中注册（注册器第二个参数中注册）。
+
+- 请求注册器: setupRequestInterceptor
+- 请求错误注册器: setupRequestErrorInterceptor
+- 响应注册器: setupResponseInterceptor
+- 响应错误注册器: setupResponseErrorInterceptor
--- a/src/axios/api/test.ts
+++ b/src/axios/api/test.ts
@ -0,0 +1,44 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-03-31
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * 该方法演示如何使用 axios
+ *
+ * 示范如何完整批注响应体及其数据:
+ *
+ * ```
+ * const demoRequest = () => {
+ *   return {} as AxiosResponseBody<AxiosTestResponse>
+ * }
+ * ```
+ */
+
+import useRequest from '@/axios/instance'
+
+import type { AxiosResponseBody } from '@/types/modules/axios'
+
+interface AxiosTestResponse extends UnknownObjectKey {
+  data: UnknownObjectKey[]
+  city?: string
+}
+
+/**
+ *
+ * @returns 测试
+ *
+ * @medthod get
+ */
+export const onAxiosTest = async (city: string) => {
+  return useRequest<AxiosTestResponse>({
+    url: `https://www.tianqiapi.com/api?version=v9&appid=23035354&appsecret=8YvlPNrz&city=${city}`,
+  })
+}
--- a/src/axios/helper/axiosCopilot.ts
+++ b/src/axios/helper/axiosCopilot.ts
@ -0,0 +1,35 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-02
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/** axios 拦截器工具 */
+
+import type { RawAxiosRequestHeaders, AxiosRequestConfig } from 'axios'
+import type { RequestHeaderOptions } from '../type'
+
+/**
+ *
+ * @param instance axios instance
+ * @param options axios headers options
+ *
+ * @remark 自定义 `axios` 请求头配置
+ */
+export const appendRequestHeaders = <T = unknown>(
+  instance: AxiosRequestConfig<T>,
+  options: RequestHeaderOptions[],
+) => {
+  if (instance) {
+    const requestHeaders = instance.headers as RawAxiosRequestHeaders
+
+    options.forEach((curr) => {
+      requestHeaders[curr.key] = curr.value
+    })
+  }
+}
--- a/src/axios/helper/canceler.ts
+++ b/src/axios/helper/canceler.ts
@ -0,0 +1,82 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-02-27
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * 自动取消重复请求
+ *
+ * 可以根据自己项目进行定制化配置
+ */
+
+import type { AxiosRequestConfig } from 'axios'
+
+export default class RequestCanceler {
+  pendingRequest: Map<string, AbortController>
+
+  constructor() {
+    this.pendingRequest = new Map<string, AbortController>()
+  }
+
+  /**
+   *
+   * @param config 请求体 config
+   * @returns 返回当前请求拼接 key
+   *
+   * @remark 将当前请求 config 生成 request key
+   */
+  generateRequestKey(config: AxiosRequestConfig): string {
+    const { method, url } = config
+
+    return [
+      url || '',
+      method || '',
+      JSON.stringify(config.params),
+      JSON.stringify(config.data),
+    ].join('&')
+  }
+
+  /**
+   *
+   * @param config axios request config
+   *
+   * @remark 给请求体添加 signal 属性, 用于取消请求
+   */
+  addPendingRequest(config: AxiosRequestConfig) {
+    const requestKey = this.generateRequestKey(config)
+
+    if (!this.pendingRequest.has(requestKey)) {
+      const controller = new AbortController()
+
+      config.signal = controller.signal
+
+      this.pendingRequest.set(requestKey, controller)
+    } else {
+      // 如果已经有该 key 则重新挂载 signal
+      config.signal = this.pendingRequest.get(requestKey)?.signal
+    }
+  }
+
+  /**
+   *
+   * @param config axios request config
+   *
+   * @remark 取消该请求, 并且清除 map 中对应 generateRequestKey value
+   */
+  removePendingRequest(config: AxiosRequestConfig) {
+    const requestKey = this.generateRequestKey(config)
+
+    if (this.pendingRequest.has(requestKey)) {
+      this.pendingRequest.get(requestKey)!.abort()
+
+      this.pendingRequest.delete(requestKey)
+    }
+  }
+}
--- a/src/axios/helper/interceptor.ts
+++ b/src/axios/helper/interceptor.ts
@ -0,0 +1,145 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-05
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * axios 拦截器注入
+ *
+ * 请求拦截器、响应拦截器
+ * 暴露启动方法调用所有已注册方法
+ *
+ * 该拦截器仅适合放置公共的 axios 拦截器操作, 并且采用队列形式管理请求拦截器的注入
+ * 所以在使用的时候, 需要按照约定格式进行参数传递
+ */
+
+import RequestCanceler from '@/axios/helper/canceler'
+import { getAppEnvironment } from '@use-utils/hook'
+
+import type {
+  RequestInterceptorConfig,
+  ResponseInterceptorConfig,
+  ImplementQueue,
+  ErrorImplementQueue,
+  FetchType,
+  AxiosFetchInstance,
+  AxiosFetchError,
+} from '@/axios/type'
+import type { AnyFunc } from '@/types/modules/utils'
+
+/** 当前请求的实例 */
+const axiosFetchInstance: AxiosFetchInstance = {
+  requestInstance: null,
+  responseInstance: null,
+}
+/** 请求失败返回值 */
+const axiosFetchError: AxiosFetchError = {
+  requestError: null,
+  responseError: null,
+}
+/** 请求队列(区分 reslove 与 reject 状态) */
+const implement: ImplementQueue = {
+  implementRequestInterceptorArray: [],
+  implementResponseInterceptorArray: [],
+}
+const errorImplement: ErrorImplementQueue = {
+  implementRequestInterceptorErrorArray: [],
+  implementResponseInterceptorErrorArray: [],
+}
+/** 取消器实例 */
+export const axiosCanceler = new RequestCanceler()
+
+export const useAxiosInterceptor = () => {
+  /** 创建拦截器实例 */
+  const createAxiosInstance = (
+    instance: RequestInterceptorConfig | ResponseInterceptorConfig,
+    instanceKey: keyof AxiosFetchInstance,
+  ) => {
+    instanceKey === 'requestInstance'
+      ? (axiosFetchInstance['requestInstance'] =
+          instance as RequestInterceptorConfig)
+      : (axiosFetchInstance['responseInstance'] =
+          instance as ResponseInterceptorConfig)
+  }
+
+  /** 获取当前实例 */
+  const getAxiosInstance = (instanceKey: keyof AxiosFetchInstance) => {
+    return axiosFetchInstance[instanceKey]
+  }
+
+  /** 设置注入方法队列 */
+  const setImplement = (
+    key: keyof ImplementQueue | keyof ErrorImplementQueue,
+    func: AnyFunc[],
+    fetchType: FetchType,
+  ) => {
+    fetchType === 'ok' ? (implement[key] = func) : (errorImplement[key] = func)
+  }
+
+  /** 获取队列中所有的所有拦截器方法 */
+  const getImplement = (
+    key: keyof ImplementQueue | keyof ErrorImplementQueue,
+    fetchType: FetchType,
+  ): AnyFunc[] => {
+    return fetchType === 'ok' ? implement[key] : errorImplement[key]
+  }
+
+  /** 队列执行器 */
+  const implementer = (funcs: AnyFunc[], ...args: any[]) => {
+    if (Array.isArray(funcs)) {
+      funcs?.forEach((curr) => {
+        if (typeof curr === 'function') {
+          curr(...args)
+        }
+      })
+    }
+  }
+
+  /** 请求、响应前执行拦截器队列中的所有方法 */
+  const beforeFetch = (
+    key: keyof AxiosFetchInstance,
+    implementKey: keyof ImplementQueue | keyof ErrorImplementQueue,
+    fetchType: FetchType,
+  ) => {
+    const funcArr =
+      fetchType === 'ok'
+        ? implement[implementKey]
+        : errorImplement[implementKey]
+    const instance = getAxiosInstance(key)
+    const { MODE } = getAppEnvironment()
+
+    if (instance) {
+      implementer(funcArr, instance, MODE)
+    }
+  }
+
+  /** 请求、响应错误时执行队列中所有方法 */
+  const fetchError = (
+    key: keyof AxiosFetchError,
+    error: unknown,
+    errorImplementKey: keyof ErrorImplementQueue,
+  ) => {
+    axiosFetchError[key] = error
+
+    const funcArr = errorImplement[errorImplementKey]
+    const { MODE } = getAppEnvironment()
+
+    implementer(funcArr, error, MODE)
+  }
+
+  return {
+    createAxiosInstance,
+    setImplement,
+    getImplement,
+    getAxiosInstance,
+    beforeFetch,
+    fetchError,
+  }
+}
--- a/src/axios/inject/request/provide.ts
+++ b/src/axios/inject/request/provide.ts
@ -0,0 +1,103 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-06
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * 请求拦截器入口
+ * 被注册方法执行时其实例能够保证获取到, 所以不需要做额外空判断
+ * 在内部执行方法中, 已经做了边界处理
+ *
+ * 提供两个工具方法, 方便类型推导
+ */
+
+import { useAxiosInterceptor, axiosCanceler } from '@/axios/helper/interceptor'
+import { appendRequestHeaders } from '@/axios/helper/axiosCopilot'
+import { APP_CATCH_KEY } from '@/appConfig/appConfig'
+import { getStorage } from '@/utils/cache'
+
+import type {
+  RequestInterceptorConfig,
+  BeforeFetchFunction,
+  FetchErrorFunction,
+} from '@/axios/type'
+
+const { setImplement } = useAxiosInterceptor()
+
+/**
+ *
+ * 这里只是示例如何获取到系统缓存的 token 并且返回请求头 token 的 key 和 value
+ * 尽可能的拆分每个拦截器的功能函数
+ * 这是这个包存在的意义
+ *
+ * 当然你也可以根据 request instance 来特殊处理, 这里暂时不做演示
+ */
+const requestHeaderToken = (ins: RequestInterceptorConfig, mode: string) => {
+  const token = getStorage<string>(APP_CATCH_KEY.token)
+
+  if (ins.url) {
+    // TODO: 根据 url 不同是否设置 token
+  }
+
+  return {
+    key: 'X-TOKEN',
+    value: token,
+  }
+}
+
+/** 注入请求头信息 */
+const injectRequestHeaders: BeforeFetchFunction<RequestInterceptorConfig> = (
+  ins,
+  mode,
+) => {
+  appendRequestHeaders(ins, [
+    requestHeaderToken(ins, mode),
+    {
+      key: 'Demo-Header-Key',
+      value: 'Demo Header Value',
+    },
+  ])
+}
+
+/** 注入重复请求拦截器 */
+const injectCanceler: BeforeFetchFunction<RequestInterceptorConfig> = (
+  ins,
+  mode,
+) => {
+  axiosCanceler.removePendingRequest(ins) // 检查是否存在重复请求, 若存在则取消已发的请求
+  axiosCanceler.addPendingRequest(ins) // 把当前的请求信息添加到 pendingRequest 表中
+}
+
+/** 请求发生错误示例 */
+const requestError: FetchErrorFunction<unknown> = (error, mode) => {
+  console.log(error, mode)
+}
+
+/**
+ *
+ * 注册请求拦截器
+ * 请注意执行顺序
+ */
+export const setupRequestInterceptor = () => {
+  setImplement(
+    'implementRequestInterceptorArray',
+    [injectRequestHeaders, injectCanceler],
+    'ok',
+  )
+}
+
+/**
+ *
+ * 注册请求错误拦截器
+ * 请注意执行顺序
+ */
+export const setupRequestErrorInterceptor = () => {
+  setImplement('implementRequestInterceptorErrorArray', [requestError], 'error')
+}
--- a/src/axios/inject/response/provide.ts
+++ b/src/axios/inject/response/provide.ts
@ -0,0 +1,77 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-06
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * 响应拦截器入口
+ * 被注册方法执行时其实例能够保证获取到, 所以不需要做额外空判断
+ * 在内部执行方法中, 已经做了边界处理
+ *
+ * 提供两个工具方法, 方便类型推导
+ */
+
+import { useAxiosInterceptor, axiosCanceler } from '@/axios/helper/interceptor'
+
+import type {
+  ResponseInterceptorConfig,
+  BeforeFetchFunction,
+  FetchErrorFunction,
+} from '@/axios/type'
+
+const { setImplement } = useAxiosInterceptor()
+
+/** 响应成功后移除缓存请求 url */
+const injectResponseCanceler: BeforeFetchFunction<ResponseInterceptorConfig> = (
+  ins,
+  mode,
+) => {
+  axiosCanceler.removePendingRequest(ins.config)
+}
+
+/**
+ *
+ * @param error 错误信息
+ * @param mode 当前环境
+ *
+ * 你可以在响应错误的时候做一些什么
+ * 这里不做具体演示
+ *
+ * 方法执行时会有两个参数, 可以根据报错信息与环境定做一些处理
+ */
+const responseError: FetchErrorFunction<unknown> = (error, mode) => {
+  console.log(error, mode)
+}
+
+/**
+ *
+ * 注册响应拦截器
+ * 请注意执行顺序
+ */
+export const setupResponseInterceptor = () => {
+  setImplement(
+    'implementResponseInterceptorArray',
+    [injectResponseCanceler],
+    'ok',
+  )
+}
+
+/**
+ *
+ * 注册响应错误拦截器
+ * 请注意执行顺序
+ */
+export const setupResponseErrorInterceptor = () => {
+  setImplement(
+    'implementResponseInterceptorErrorArray',
+    [responseError],
+    'error',
+  )
+}
--- a/src/axios/instance.ts
+++ b/src/axios/instance.ts
@ -0,0 +1,80 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2022-11-18
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * 请求拦截器与响应拦截器
+ * 如果有需要拓展拦截器, 请在 inject 目录下参照示例方法继续拓展
+ * 该页面不做改动与配置
+ */
+
+import axios from 'axios'
+import { AXIOS_CONFIG } from '@/appConfig/requestConfig'
+import { useAxiosInterceptor, axiosCanceler } from '@/axios/helper/interceptor'
+import {
+  setupResponseInterceptor,
+  setupResponseErrorInterceptor,
+} from '@/axios/inject/response/provide'
+import {
+  setupRequestInterceptor,
+  setupRequestErrorInterceptor,
+} from '@/axios/inject/request/provide'
+
+import type { AxiosInstanceExpand } from './type'
+
+const server: AxiosInstanceExpand = axios.create(AXIOS_CONFIG)
+const { createAxiosInstance, beforeFetch, fetchError } = useAxiosInterceptor()
+
+// 请求拦截器
+server.interceptors.request.use(
+  (request) => {
+    // 生成 request instance
+    createAxiosInstance(request, 'requestInstance')
+    // 初始化拦截器所有已注入方法
+    setupRequestInterceptor()
+    // 执行拦截器所有已注入方法
+    beforeFetch('requestInstance', 'implementRequestInterceptorArray', 'ok')
+
+    return request
+  },
+  (error) => {
+    // 初始化拦截器所有已注入方法(错误状态)
+    setupRequestErrorInterceptor()
+    // 执行所有已注入方法
+    fetchError('requestError', error, 'implementRequestInterceptorErrorArray')
+
+    return Promise.reject(error)
+  },
+)
+
+// 响应拦截器
+server.interceptors.response.use(
+  (response) => {
+    createAxiosInstance(response, 'responseInstance')
+    setupResponseInterceptor()
+    beforeFetch('responseInstance', 'implementResponseInterceptorArray', 'ok')
+
+    const { data } = response
+
+    return Promise.resolve(data)
+  },
+  (error) => {
+    setupResponseErrorInterceptor()
+    fetchError('responseError', error, 'implementResponseInterceptorErrorArray')
+
+    // 注销该失败请求的取消器
+    axiosCanceler.removePendingRequest(error.config || {})
+
+    return Promise.reject(error)
+  },
+)
+
+export default server
--- a/src/axios/type.ts
+++ b/src/axios/type.ts
@ -0,0 +1,116 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type {
+  AxiosHeaders,
+  AxiosRequestConfig,
+  HeadersDefaults,
+  AxiosDefaults,
+  Axios,
+  InternalAxiosRequestConfig,
+  AxiosResponse,
+} from 'axios'
+import type { AnyFunc } from '@/types/modules/utils'
+
+export type AxiosHeaderValue =
+  | AxiosHeaders
+  | string
+  | string[]
+  | number
+  | boolean
+  | null
+
+export interface RequestHeaderOptions {
+  key: string
+  value: AxiosHeaderValue
+}
+
+export interface AxiosInstanceExpand extends Axios {
+  <T = any, D = any>(config: AxiosRequestConfig<D>): Promise<T>
+  <T = any, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<T>
+
+  getUri(config?: AxiosRequestConfig): string
+  request<R = any, D = any>(config: AxiosRequestConfig<D>): Promise<R>
+  get<R = any, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>
+  delete<R = any, D = any>(
+    url: string,
+    config?: AxiosRequestConfig<D>,
+  ): Promise<R>
+  head<R = any, D = any>(
+    url: string,
+    config?: AxiosRequestConfig<D>,
+  ): Promise<R>
+  options<R = any, D = any>(
+    url: string,
+    config?: AxiosRequestConfig<D>,
+  ): Promise<R>
+  post<R = any, D = any>(
+    url: string,
+    data?: D,
+    config?: AxiosRequestConfig<D>,
+  ): Promise<R>
+  put<R = any, D = any>(
+    url: string,
+    data?: D,
+    config?: AxiosRequestConfig<D>,
+  ): Promise<R>
+  patch<R = any, D = any>(
+    url: string,
+    data?: D,
+    config?: AxiosRequestConfig<D>,
+  ): Promise<R>
+  postForm<R = any, D = any>(
+    url: string,
+    data?: D,
+    config?: AxiosRequestConfig<D>,
+  ): Promise<R>
+  putForm<R = any, D = any>(
+    url: string,
+    data?: D,
+    config?: AxiosRequestConfig<D>,
+  ): Promise<R>
+  patchForm<R = any, D = any>(
+    url: string,
+    data?: D,
+    config?: AxiosRequestConfig<D>,
+  ): Promise<R>
+
+  defaults: Omit<AxiosDefaults, 'headers' | 'cancelToken'> & {
+    headers: HeadersDefaults & {
+      [key: string]: AxiosHeaderValue
+    }
+  }
+}
+
+export type RequestInterceptorConfig<T = any> = InternalAxiosRequestConfig<T>
+
+export type ResponseInterceptorConfig<T = any, K = any> = AxiosResponse<T, K>
+
+export interface ImplementQueue {
+  implementRequestInterceptorArray: AnyFunc[]
+  implementResponseInterceptorArray: AnyFunc[]
+}
+
+export interface ErrorImplementQueue {
+  implementRequestInterceptorErrorArray: AnyFunc[]
+  implementResponseInterceptorErrorArray: AnyFunc[]
+}
+
+export type BeforeFetchFunction<
+  T = RequestInterceptorConfig | ResponseInterceptorConfig,
+> = <K extends T>(ins: K, mode: string) => void
+
+export type FetchType = 'ok' | 'error'
+
+export type FetchErrorFunction<T = any> = <K extends T>(
+  error: K,
+  mode: string,
+) => void
+
+export interface AxiosFetchInstance {
+  requestInstance: RequestInterceptorConfig | null
+  responseInstance: ResponseInterceptorConfig | null
+}
+
+export interface AxiosFetchError<T = unknown> {
+  requestError: T | null
+  responseError: T | null
+}
--- a/src/components/AppComponents/AppAvatar/index.scss
+++ b/src/components/AppComponents/AppAvatar/index.scss
@ -0,0 +1,7 @@
+.app-avatar {
+  cursor: var(--app-avatar-cursor);
+
+  & .app-avatar__name {
+    font-weight: 500;
+  }
+}
--- a/src/components/AppComponents/AppAvatar/index.tsx
+++ b/src/components/AppComponents/AppAvatar/index.tsx
@ -0,0 +1,88 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-05-31
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * 系统管理员头像与名称
+ *
+ * 头像展示基于 naive ui Avatar 组件, 继承该组件所有属性与方法
+ * 默认读取本地 session catch 缓存
+ */
+
+import './index.scss'
+
+import { NAvatar, NSpace } from 'naive-ui'
+
+import { avatarProps, spaceProps } from 'naive-ui'
+import { APP_CATCH_KEY } from '@/appConfig/appConfig'
+import { getStorage } from '@/utils/cache'
+
+import type { PropType } from 'vue'
+import type { AvatarProps, SpaceProps } from 'naive-ui'
+import type { SigninCallback } from '@/store/modules/signin/type'
+
+const AppAvatar = defineComponent({
+  name: 'AppAvatar',
+  props: {
+    ...avatarProps,
+    ...spaceProps,
+    cursor: {
+      type: String,
+      default: 'auto',
+    },
+    spaceSize: {
+      type: [String, Number] as PropType<SpaceProps['size']>,
+      default: 'medium',
+    },
+    avatarSize: {
+      type: [String, Number] as PropType<AvatarProps['size']>,
+      default: 'medium',
+    },
+  },
+  setup(props) {
+    const signin = getStorage<SigninCallback>(APP_CATCH_KEY.signin)
+    const cssVars = computed(() => {
+      const vars = {
+        '--app-avatar-cursor': props.cursor,
+      }
+
+      return vars
+    })
+
+    return {
+      signin,
+      cssVars,
+    }
+  },
+  render() {
+    return (
+      <NSpace
+        class="app-avatar"
+        {...this.$props}
+        wrapItem={false}
+        style={this.cssVars}
+        size={this.spaceSize}
+      >
+        <NAvatar
+          // eslint-disable-next-line prettier/prettier, @typescript-eslint/no-explicit-any
+          {...(this.$props as any)}
+          src={this.signin?.avatar}
+          objectFit="cover"
+          round
+          size={this.avatarSize}
+        />
+        <div class="app-avatar__name">{this.signin?.name}</div>
+      </NSpace>
+    )
+  },
+})
+
+export default AppAvatar
--- a/src/components/AppComponents/AppLockScreen/appLockVar.ts
+++ b/src/components/AppComponents/AppLockScreen/appLockVar.ts
@ -0,0 +1,36 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-20
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * 统一管理是否处于锁屏状态
+ *
+ * 可以根据后台接口进行替换该变量, 只要是一个响应式的变量值即可
+ */
+
+const appLockScreen = useStorage('isAppLockScreen', false, sessionStorage, {
+  mergeDefaults: true,
+})
+
+const useAppLockScreen = () => {
+  const setLockAppScreen = (bool: boolean) => {
+    appLockScreen.value = bool
+  }
+
+  const getLockAppScreen = () => appLockScreen.value
+
+  return {
+    setLockAppScreen,
+    getLockAppScreen,
+  }
+}
+
+export default useAppLockScreen
--- a/src/components/AppComponents/AppLockScreen/components/LockScreen/index.tsx
+++ b/src/components/AppComponents/AppLockScreen/components/LockScreen/index.tsx
@ -0,0 +1,91 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-20
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/** 锁屏界面 */
+
+import { NInput, NForm, NFormItem, NButton, NSpace } from 'naive-ui'
+import AppAvatar from '@/components/AppComponents/AppAvatar/index'
+
+import { useSetting } from '@/store'
+import useAppLockScreen from '@/components/AppComponents/AppLockScreen/appLockVar'
+import {
+  rules,
+  useCondition,
+  autoFouceInput,
+} from '@/components/AppComponents/AppLockScreen/hook'
+
+import type { FormInst, InputInst } from 'naive-ui'
+
+const LockScreen = defineComponent({
+  name: 'LockScreen',
+  setup() {
+    const formInstRef = ref<FormInst | null>(null)
+    const inputInstRef = ref<InputInst | null>(null)
+
+    const { setLockAppScreen } = useAppLockScreen()
+    const { changeSwitcher } = useSetting()
+
+    const state = reactive({
+      lockCondition: useCondition(),
+    })
+
+    /** 锁屏 */
+    const lockScreen = () => {
+      formInstRef.value?.validate((error) => {
+        if (!error) {
+          setLockAppScreen(true)
+          changeSwitcher(true, 'lockScreenSwitch')
+
+          state.lockCondition = useCondition()
+        }
+      })
+    }
+
+    autoFouceInput(inputInstRef)
+
+    return {
+      ...toRefs(state),
+      lockScreen,
+      formInstRef,
+      inputInstRef,
+    }
+  },
+  render() {
+    return (
+      <div class="app-lock-screen__input">
+        <AppAvatar vertical align="center" avatarSize={52} />
+        <NForm
+          ref="formInstRef"
+          model={this.lockCondition}
+          rules={rules}
+          labelPlacement="left"
+        >
+          <NFormItem path="lockPassword">
+            <NInput
+              ref="inputInstRef"
+              v-model:value={this.lockCondition.lockPassword}
+              type="password"
+              placeholder="请输入锁屏密码"
+              clearable
+              minlength={6}
+              maxlength={12}
+            />
+          </NFormItem>
+          <NButton type="primary" onClick={this.lockScreen.bind(this)}>
+            锁屏
+          </NButton>
+        </NForm>
+      </div>
+    )
+  },
+})
+
+export default LockScreen
--- a/src/components/AppComponents/AppLockScreen/components/UnlockScreen/index.tsx
+++ b/src/components/AppComponents/AppLockScreen/components/UnlockScreen/index.tsx
@ -0,0 +1,156 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-20
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/** 解锁界面 */
+
+import { NInput, NForm, NFormItem, NButton, NSpace } from 'naive-ui'
+import AppAvatar from '@/components/AppComponents/AppAvatar/index'
+
+import dayjs from 'dayjs'
+import { useSetting, useSignin } from '@/store'
+import {
+  rules,
+  useCondition,
+  autoFouceInput,
+} from '@/components/AppComponents/AppLockScreen/hook'
+import useAppLockScreen from '@/components/AppComponents/AppLockScreen/appLockVar'
+
+import type { FormInst, InputInst } from 'naive-ui'
+
+const UnlockScreen = defineComponent({
+  name: 'UnlockScreen',
+  setup() {
+    const formRef = ref<FormInst | null>(null)
+    const inputInstRef = ref<InputInst | null>(null)
+
+    const { logout } = useSignin()
+    const { changeSwitcher } = useSetting()
+    const { setLockAppScreen } = useAppLockScreen()
+
+    const HH_MM_FORMAT = 'HH:mm'
+    const AM_PM_FORMAT = 'A'
+    const YY_MM_DD_FORMAT = 'YY年MM月DD日'
+    const DDD_FORMAT = 'ddd'
+
+    const state = reactive({
+      lockCondition: useCondition(),
+      HH_MM: dayjs().format(HH_MM_FORMAT),
+      AM_PM: dayjs().locale('en').format(AM_PM_FORMAT),
+      YY_MM_DD: dayjs().format(YY_MM_DD_FORMAT),
+      DDD: dayjs().format(DDD_FORMAT),
+    })
+    const dayInterval = setInterval(() => {
+      state.HH_MM = dayjs().format(HH_MM_FORMAT)
+      state.AM_PM = dayjs().format(AM_PM_FORMAT)
+    }, 6_000)
+    const yearInterval = setInterval(() => {
+      state.YY_MM_DD = dayjs().format(YY_MM_DD_FORMAT)
+      state.DDD = dayjs().format(DDD_FORMAT)
+    }, 86_400_000)
+
+    /** 退出登陆并且回到登陆页 */
+    const backToSignin = () => {
+      window.$dialog.warning({
+        title: '警告',
+        content: '是否返回到登陆页?',
+        positiveText: '确定',
+        negativeText: '取消',
+        onPositiveClick: () => {
+          logout()
+          setTimeout(() => {
+            changeSwitcher(false, 'lockScreenSwitch')
+          })
+        },
+      })
+    }
+
+    /** 解锁 */
+    const unlockScreen = () => {
+      formRef.value?.validate((error) => {
+        if (!error) {
+          setLockAppScreen(false)
+          changeSwitcher(false, 'lockScreenSwitch')
+
+          state.lockCondition = useCondition()
+        }
+      })
+    }
+
+    onBeforeUnmount(() => {
+      clearInterval(dayInterval)
+      clearInterval(yearInterval)
+    })
+
+    return {
+      ...toRefs(state),
+      backToSignin,
+      unlockScreen,
+      formRef,
+      inputInstRef,
+    }
+  },
+  render() {
+    return (
+      <div class="app-lock-screen__unlock">
+        <div class="app-lock-screen__unlock__content">
+          <div class="app-lock-screen__unlock__content-bg">
+            <div class="left">{this.HH_MM?.split(':')[0]}</div>
+            <div class="right">{this.HH_MM?.split(':')[1]}</div>
+          </div>
+          <div class="app-lock-screen__unlock__content-avatar">
+            <AppAvatar vertical align="center" avatarSize={52} />
+          </div>
+          <div class="app-lock-screen__unlock__content-input">
+            <NForm ref="formRef" model={this.lockCondition} rules={rules}>
+              <NFormItem path="lockPassword">
+                <NInput
+                  ref="inputInstRef"
+                  v-model:value={this.lockCondition.lockPassword}
+                  type="password"
+                  placeholder="请输入解锁密码"
+                  clearable
+                  minlength={6}
+                  maxlength={12}
+                />
+              </NFormItem>
+              <NSpace justify="space-between">
+                <NButton
+                  type="primary"
+                  text
+                  onClick={this.backToSignin.bind(this)}
+                >
+                  返回登陆
+                </NButton>
+                <NButton
+                  type="primary"
+                  text
+                  onClick={this.unlockScreen.bind(this)}
+                >
+                  进入系统
+                </NButton>
+              </NSpace>
+            </NForm>
+          </div>
+          <div class="app-lock-screen__unlock__content-date">
+            <div class="current-date">
+              {this.HH_MM}&nbsp;<span>{this.AM_PM}</span>
+            </div>
+            <div class="current-year">
+              {this.YY_MM_DD}&nbsp;<span>{this.DDD}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  },
+})
+
+export default UnlockScreen
--- a/src/components/AppComponents/AppLockScreen/hook.ts
+++ b/src/components/AppComponents/AppLockScreen/hook.ts
@ -0,0 +1,38 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-20
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import type { InputInst } from 'naive-ui'
+import type { Ref } from 'vue'
+
+/** 统一的校验锁屏密码校验规则 */
+export const rules = {
+  lockPassword: {
+    required: true,
+    message: '请输入正确格式密码',
+    min: 6,
+    max: 12,
+    trigger: ['input'],
+  },
+}
+
+/** 锁屏密码参数 */
+export const useCondition = () => {
+  return {
+    lockPassword: null,
+  }
+}
+
+/** 自动获取焦点 */
+export const autoFouceInput = (inputInstRef: Ref<InputInst | null>) => {
+  nextTick(() => {
+    inputInstRef.value?.focus()
+  })
+}
--- a/src/components/AppComponents/AppLockScreen/index.scss
+++ b/src/components/AppComponents/AppLockScreen/index.scss
@ -0,0 +1,68 @@
+.app-lock-screen__content {
+  & .app-lock-screen__input {
+    & button[class*="n-button"] {
+      width: 100%;
+    }
+
+    & form[class*="n-form"] {
+      margin: 24px 0px;
+    }
+  }
+
+  & .app-lock-screen__unlock {
+    .app-lock-screen__unlock__content {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      @include flexCenter;
+      flex-direction: column;
+
+      & .app-lock-screen__unlock__content-bg {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        @include flexCenter;
+        font-size: 220px;
+        gap: 80px;
+        z-index: 0;
+
+        & .left,
+        & .right {
+          @include flexCenter;
+          border-radius: 30px;
+          background-color: #141313;
+          font-weight: 700;
+          padding: 80px;
+          filter: blur(4px);
+        }
+      }
+
+      & .app-lock-screen__unlock__content-avatar {
+        margin-top: 5px;
+        color: #bababa;
+        font-weight: 500;
+        z-index: 1;
+      }
+
+      & .app-lock-screen__unlock__content-input {
+        width: 260px;
+        z-index: 1;
+      }
+
+      & .app-lock-screen__unlock__content-date {
+        position: fixed;
+        width: 100%;
+        font-size: 3rem;
+        text-align: center;
+        font-weight: 500;
+        bottom: 24px;
+        z-index: 1;
+
+        & .current-year,
+        & .current-date span {
+          font-size: 1.5rem;
+        }
+      }
+    }
+  }
+}
--- a/src/components/AppComponents/AppLockScreen/index.tsx
+++ b/src/components/AppComponents/AppLockScreen/index.tsx
@ -0,0 +1,59 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-05-13
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * 这里没有做解锁密码校验, 只要符合校验规则值皆可
+ * 可以根据需求自行更改
+ */
+
+import './index.scss'
+
+import { NModal } from 'naive-ui'
+import LockScreen from './components/LockScreen'
+import UnlockScreen from './components/UnlockScreen'
+
+import { useSetting } from '@/store'
+import useAppLockScreen from '@/components/AppComponents/AppLockScreen/appLockVar'
+
+const AppLockScreen = defineComponent({
+  name: 'AppLockScreen',
+  setup() {
+    const settingStore = useSetting()
+    const { lockScreenSwitch } = storeToRefs(settingStore)
+
+    const { getLockAppScreen } = useAppLockScreen()
+
+    return {
+      lockScreenSwitch,
+      getLockAppScreen,
+    }
+  },
+  render() {
+    return (
+      <NModal
+        v-model:show={this.lockScreenSwitch}
+        transformOrigin="center"
+        show
+        maskClosable={false}
+        closeOnEsc={false}
+        preset={!this.getLockAppScreen() ? 'dialog' : undefined}
+        title="锁定屏幕"
+      >
+        <div class="app-lock-screen__content">
+          {!this.getLockAppScreen() ? <LockScreen /> : <UnlockScreen />}
+        </div>
+      </NModal>
+    )
+  },
+})
+
+export default AppLockScreen
--- a/src/components/AppComponents/README.md
+++ b/src/components/AppComponents/README.md
@ -0,0 +1,9 @@
+## 描述
+
+> 该组件包存放依赖系统数据的公共组件。
+
+## 约束
+
+- 该组件包仅存放与系统数据有绑定、关联的组件，纯组件或纯 UI 组件应放置于外层包中
+- 以 `App` 开头标记组件是系统组件
+- 组件应该尽量避免与其他系统组件有关联性
--- a/src/components/RayChart/index.scss
+++ b/src/components/RayChart/index.scss
@ -0,0 +1,7 @@
+.ray-chart {
+  width: var(--ray-chart-width);
+  height: var(--ray-chart-height);
+  border: none;
+  outline: none;
+  box-sizing: border-box;
+}
--- a/src/components/RayChart/index.tsx
+++ b/src/components/RayChart/index.tsx
@ -0,0 +1,503 @@
+/**
+ *
+ * 基于 `echarts` 的组件. 意在便捷的使用 `chart` 图
+ *
+ * 暂时不支持自动解析导入 `chart` 组件, 如果使用未注册的组件, 需要在顶部手动导入并且再使用 `use` 注册
+ *
+ * 预引入: 柱状图, 折线图, 饼图, k线图, 散点图等
+ * 预引入: 提示框, 标题, 直角坐标系, 数据集, 内置数据转换器等
+ *
+ * 如果需要大批量数据渲染, 可以通过获取实例后阶段性调用 `setOption` 方法注入数据
+ *
+ * 该组件会在卸载组件时, 自动释放资源
+ *
+ * 注意: 尽量别一次性倒入全部 `chart` 会造成打包体积异常大
+ */
+
+import './index.scss'
+
+import * as echarts from 'echarts/core' // `echarts` 核心模块
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  LegendComponent,
+  ToolboxComponent,
+  AriaComponent,
+} from 'echarts/components' // 提示框, 标题, 直角坐标系, 数据集, 内置数据转换器等组件(组件后缀都为 `Component`)
+import {
+  BarChart,
+  LineChart,
+  PieChart,
+  CandlestickChart,
+  ScatterChart,
+  PictorialBarChart,
+} from 'echarts/charts' // 系列类型(后缀都为 `SeriesOption`)
+import { LabelLayout, UniversalTransition } from 'echarts/features' // 标签自动布局, 全局过渡动画等特性
+import { CanvasRenderer } from 'echarts/renderers' // `echarts` 渲染器
+
+import { useSetting } from '@/store'
+import { cloneDeep, debounce } from 'lodash-es'
+import { on, off, addStyle, completeSize } from '@/utils/element'
+
+import type { PropType } from 'vue'
+import type { EChartsInstance } from '@/types/modules/component'
+import type { AnyFunc } from '@/types/modules/utils'
+
+export type AutoResize =
+  | boolean
+  | {
+      width: number
+      height: number
+    }
+
+export interface LoadingOptions {
+  text: string // 文本内容
+  color: string // 颜色
+  textColor: string // 字体颜色
+  maskColor: string // 遮罩颜色
+  zlevel: number // 水平
+  fontSize: number // 字体大小
+  showSpinner: boolean // 是否显示旋转动画(`spinner`)
+  spinnerRadius: number // 旋转动画(`spinner`)的半径
+  lineWidth: number // 旋转动画(`spinner`)的线宽
+  fontWeight: string // 字体粗细
+  fontStyle: string // 字体风格
+  fontFamily: string // 字体系列
+}
+
+export type ChartTheme = 'dark' | '' | object
+
+/**
+ *
+ * @returns LoadingOptions
+ *
+ * 为了方便使用加载动画, 写了此方法, 虽然没啥用
+ */
+export const loadingOptions = (options?: LoadingOptions) =>
+  Object.assign(
+    {},
+    {
+      text: 'loading',
+      color: '#c23531',
+      textColor: '#000',
+      maskColor: 'rgba(255, 255, 255, 0.9)',
+      zlevel: 0,
+      fontSize: 12,
+      showSpinner: true,
+      spinnerRadius: 10,
+      lineWidth: 5,
+      fontWeight: 'normal',
+      fontStyle: 'normal',
+      fontFamily: 'sans-serif',
+    },
+    options,
+  )
+
+const RayChart = defineComponent({
+  name: 'RayChart',
+  props: {
+    width: {
+      /**
+       *
+       * chart 容器初始化宽度
+       *
+       * 如果未能继承宽度, 则会以 200px 宽度填充
+       */
+      type: String,
+      default: '100%',
+    },
+    height: {
+      /**
+       *
+       * chart 容器初始化高度
+       *
+       * 如果未能继承高度, 则会以 200px 宽度填充
+       */
+      type: String,
+      default: '100%',
+    },
+    autoResize: {
+      /**
+       *
+       * `chart` 是否跟随窗口尺寸变化自动变化
+       *
+       * 如果为对象, 则可以指定其变化尺寸, 实现图表大小不等于容器大小的效果
+       */
+      type: [Boolean, Object] as PropType<AutoResize>,
+      default: true,
+    },
+    canvasRender: {
+      /**
+       *
+       * `chart` 渲染器, 默认使用 `canvas`
+       *
+       * 考虑到打包体积与大多数业务场景缘故, 暂时移除 `SVGRenderer` 渲染器的默认导入
+       */
+      type: Boolean,
+      default: true,
+    },
+    showAria: {
+      /**
+       *
+       * 是否开启 `chart` 无障碍访问
+       *
+       * 此选项会覆盖 `options` 中的 `aria` 配置
+       */
+      type: Boolean,
+      default: false,
+    },
+    options: {
+      type: Object as PropType<echarts.EChartsCoreOption>,
+      default: () => ({}),
+    },
+    success: {
+      /**
+       *
+       * 返回 chart 实例
+       *
+       * 渲染成功回调函数
+       *
+       * () => EChartsInstance
+       */
+      type: Function,
+      default: () => ({}),
+    },
+    error: {
+      /**
+       *
+       * 渲染失败回调函数
+       *
+       * () => void
+       */
+      type: Function,
+      default: () => ({}),
+    },
+    theme: {
+      type: [String, Object] as PropType<ChartTheme>,
+      default: '',
+    },
+    autoChangeTheme: {
+      /**
+       *
+       * 是否自动跟随模板主题切换
+       *
+       * 如果开启此属性, 则会覆盖 `theme` 属性
+       *
+       * 注意: 这个属性重度依赖此模板, 所以默认不开启. 并且动态切换主题有一定的性能问题
+       */
+      type: Boolean,
+      default: false,
+    },
+    use: {
+      /**
+       *
+       * 拓展 `echarts` 图表
+       *
+       * 由于官方并没有提供该类型, 手动去复刻成本过高, 故而采用 `any`
+       */
+      type: Array,
+      default: () => [],
+    },
+    watchOptions: {
+      /** 主动监听 options 变化 */
+      type: Boolean,
+      default: true,
+    },
+    loading: {
+      /** 加载动画 */
+      type: Boolean,
+      default: false,
+    },
+    loadingOptions: {
+      /** 配置加载动画样式 */
+      type: Object as PropType<LoadingOptions>,
+      default: () => loadingOptions(),
+    },
+  },
+  setup(props, { expose }) {
+    const settingStore = useSetting()
+    const { themeValue } = storeToRefs(settingStore)
+    const rayChartRef = ref<HTMLElement>() // `echart` 容器实例
+    const echartInstanceRef = ref<EChartsInstance>() // `echart` 拷贝实例, 解决直接使用响应式实例带来的问题
+    let echartInstance: EChartsInstance // `echart` 实例
+    let resizeDebounce: AnyFunc // resize 防抖方法实例
+
+    const cssVarsRef = computed(() => {
+      const cssVars = {
+        '--ray-chart-width': completeSize(props.width),
+        '--ray-chart-height': completeSize(props.height),
+      }
+
+      return cssVars
+    })
+    const modelLoadingOptions = computed(() =>
+      loadingOptions(props.loadingOptions),
+    )
+
+    /**
+     *
+     * 注册 `echart` 组件, 图利, 渲染器等
+     *
+     * 会自动合并拓展 `echart` 组件
+     * 该方法必须在注册图表之前调用
+     */
+    const registerChartCore = async () => {
+      echarts.use([
+        TitleComponent,
+        TooltipComponent,
+        GridComponent,
+        DatasetComponent,
+        TransformComponent,
+        LegendComponent,
+        ToolboxComponent,
+        AriaComponent,
+      ]) // 注册组件
+
+      echarts.use([
+        BarChart,
+        LineChart,
+        PieChart,
+        CandlestickChart,
+        ScatterChart,
+        PictorialBarChart,
+      ]) // 注册类型
+
+      echarts.use([LabelLayout, UniversalTransition]) // 注册布局, 过度效果
+
+      // 如果业务场景中需要 `svg` 渲染器, 手动导入渲染器后使用该行代码即可(不过为了体积考虑, 移除了 SVG 渲染器)
+      // echarts.use([props.canvasRender ? CanvasRenderer : SVGRenderer])
+      echarts.use([CanvasRenderer]) // 注册渲染器
+
+      try {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        echarts.use(props.use as any[])
+      } catch (e) {
+        console.error(
+          'Error: wrong property and method passed in extend attribute',
+        )
+      }
+    }
+
+    /**
+     *
+     * @returns `chart options`
+     *
+     * 合并配置项
+     *
+     * 如果有需要特殊全局配置的可以在此继续写...
+     */
+    const useMergeOptions = () => {
+      let options = cloneDeep(props.options)
+
+      const merge = (opts: object) => Object.assign({}, options, opts)
+
+      if (props.showAria) {
+        options = merge({
+          aria: {
+            enabled: true,
+            decal: {
+              show: true,
+            },
+          },
+        })
+      }
+
+      return options
+    }
+
+    /**
+     *
+     * 渲染 `echart`
+     *
+     * 缓存两个实例
+     *
+     * 直接使用响应式代理实例会出现诡异的问题, 例如 `legend` 点击时报错
+     */
+    const renderChart = (theme: ChartTheme) => {
+      /** 获取 dom 容器 */
+      const element = rayChartRef.value as HTMLElement
+      /** 获取配置项 */
+      const options = useMergeOptions()
+      /** 获取 dom 容器实际宽高 */
+      const { height, width } = element.getBoundingClientRect()
+
+      /** 如果高度为 0, 则以 200px 填充 */
+      if (height === 0) {
+        addStyle(element, {
+          height: '200px',
+        })
+      }
+
+      /** 如果款度为 0, 则以 200px 填充 */
+      if (width === 0) {
+        addStyle(element, {
+          width: '200px',
+        })
+      }
+
+      try {
+        /** 注册 chart */
+        echartInstance = echarts.init(element, theme)
+        echartInstanceRef.value = echartInstance
+
+        /** 设置 options 配置项 */
+        options && echartInstance.setOption(options)
+
+        /** 渲染成功回调 */
+        props.success?.(echartInstance)
+      } catch (e) {
+        /** 渲染失败回调 */
+        props.error?.()
+
+        console.error(e)
+      }
+    }
+
+    /**
+     *
+     * @param bool 渲染带有主题色的可视化图
+     *
+     * 区别自动跟随模板主题切换与指定主题切换
+     */
+    const renderThemeChart = (bool?: boolean) => {
+      if (props.autoChangeTheme) {
+        bool ? renderChart('dark') : renderChart('')
+
+        return void 0
+      }
+
+      if (!props.theme) {
+        renderChart('')
+      }
+    }
+
+    /**
+     *
+     * 销毁 `chart` 实例, 释放资源
+     */
+    const destroyChart = () => {
+      if (echartInstance) {
+        echartInstance.clear()
+        echartInstance.dispose()
+      }
+    }
+
+    /** 重置 echarts 尺寸 */
+    const resizeChart = () => {
+      if (echartInstance) {
+        echartInstance.resize()
+      }
+    }
+
+    /** 监听全局主题变化, 然后重新渲染对应主题 echarts */
+    watch(
+      () => [themeValue.value],
+      ([theme]) => {
+        /**
+         *
+         * Q: 为什么需要重新卸载再渲染
+         * A: 因为 echarts 官方文档并未提供动态渲染方法
+         * A: 虽然原型上有 setTheme 方法, 但是官方标记是仅限于在类 ECharts 中访问
+         */
+        if (props.autoChangeTheme) {
+          destroyChart()
+
+          renderThemeChart(theme)
+        }
+      },
+    )
+
+    watch(
+      () => props.showAria,
+      () => {
+        destroyChart()
+
+        /**
+         *
+         * 贴花跟随主题渲染
+         *
+         * 自动跟随模板主题或者指定主题皆可
+         */
+        if (props.autoChangeTheme || props.theme) {
+          themeValue.value ? renderChart('dark') : renderChart('')
+        } else {
+          renderChart('')
+        }
+      },
+    )
+
+    /** 显示/隐藏加载动画 */
+    watch(
+      () => props.loading,
+      (newData) => {
+        newData
+          ? echartInstance?.showLoading(modelLoadingOptions.value)
+          : echartInstance?.hideLoading()
+      },
+    )
+
+    /** 监听 options 变化 */
+    if (props.watchOptions) {
+      watch(
+        () => props.watchOptions,
+        () => {
+          /** 重新组合 options */
+          const options = useMergeOptions()
+
+          /** 如果 options 发生变动更新 echarts */
+          echartInstance?.setOption(options)
+        },
+      )
+    }
+
+    onBeforeMount(async () => {
+      /** 注册 echarts 组件与渲染器 */
+      await registerChartCore()
+    })
+
+    onMounted(() => {
+      nextTick(() => {
+        /** 注册 echarts */
+        if (props.autoChangeTheme) {
+          renderThemeChart(themeValue.value)
+        } else {
+          props.theme ? renderChart('dark') : renderChart('')
+        }
+
+        /** 注册事件 */
+        if (props.autoResize) {
+          resizeDebounce = debounce(resizeChart, 500)
+
+          on(window, 'resize', resizeDebounce)
+        }
+      })
+    })
+
+    onBeforeUnmount(() => {
+      /** 卸载 echarts */
+      destroyChart()
+      /** 卸载事件柄 */
+      off(window, 'resize', resizeDebounce)
+    })
+
+    expose({
+      echart: echartInstanceRef,
+    })
+
+    return {
+      rayChartRef,
+      cssVarsRef,
+      echartInstance: echartInstanceRef,
+    }
+  },
+  render() {
+    return (
+      <div class="ray-chart" style={[this.cssVarsRef]} ref="rayChartRef"></div>
+    )
+  },
+})
+
+export default RayChart
--- a/src/components/RayCollapseGrid/index.ts
+++ b/src/components/RayCollapseGrid/index.ts
@ -0,0 +1,3 @@
+import RayCollapseGrid from './src/index'
+
+export default RayCollapseGrid
--- a/src/components/RayCollapseGrid/src/index.scss
+++ b/src/components/RayCollapseGrid/src/index.scss
@ -0,0 +1,20 @@
+.ray-collapse-grid {
+  box-sizing: border-box;
+
+  & .collapse-icon {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    transition: color 0.3s var(--r-bezier);
+
+    > .collapse-icon--arrow {
+      margin-left: 0.5em;
+      transition: color 0.3s var(--r-bezier), transform 0.3s var(--r-bezier);
+
+      &.collapse-icon--arrow__expanded {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
--- a/src/components/RayCollapseGrid/src/index.tsx
+++ b/src/components/RayCollapseGrid/src/index.tsx
@ -0,0 +1,95 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2022-12-27
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import './index.scss'
+
+import { collapseGridProps } from './props'
+
+import { NCard, NGrid, NGridItem, NSpace } from 'naive-ui'
+import RayIcon from '@/components/RayIcon'
+
+const RayCollapseGrid = defineComponent({
+  name: 'RayCollapseGrid',
+  props: collapseGridProps,
+  emits: ['updateValue'],
+  setup(props, { emit }) {
+    const modelCollapsed = ref(props.value)
+
+    const handleCollapse = () => {
+      modelCollapsed.value = !modelCollapsed.value
+
+      emit('updateValue', modelCollapsed.value)
+    }
+
+    const CollapseIcon = () => (
+      <div class="collapse-icon" onClick={handleCollapse.bind(this)}>
+        <span>
+          {modelCollapsed.value
+            ? props.collapseToggleText[0]
+            : props.collapseToggleText[1]}
+        </span>
+        <RayIcon
+          customClassName={`collapse-icon--arrow ${
+            modelCollapsed.value ? '' : 'collapse-icon--arrow__expanded'
+          }`}
+          name="expanded"
+          size="14"
+        />
+      </div>
+    )
+
+    return {
+      modelCollapsed,
+      handleCollapse,
+      CollapseIcon,
+    }
+  },
+  render() {
+    return (
+      <NCard bordered={this.bordered}>
+        {{
+          default: () => (
+            <NGrid
+              class="ray-collapse-grid"
+              {...this.$props}
+              collapsed={this.modelCollapsed}
+              xGap={this.xGap || 12}
+              yGap={this.yGap || 18}
+              cols={this.cols}
+              collapsedRows={this.collapsedRows}
+            >
+              {this.$slots.default?.()}
+              <NGridItem suffix class="ray-collapse-grid__suffix--btn">
+                <NSpace justify="end">
+                  {this.$slots.action?.()}
+                  {this.CollapseIcon()}
+                </NSpace>
+              </NGridItem>
+            </NGrid>
+          ),
+        }}
+      </NCard>
+    )
+  },
+})
+
+export default RayCollapseGrid
+
+/**
+ *
+ * <https://www.naiveui.com/zh-CN/dark/components/grid>
+ *
+ * 可折叠操作栏
+ *
+ * 可以结合表单或者表格使用
+ *
+ * 该组件完全基于 `NGrid` `NGridItem` 实现, 所以需要在使用该组件时使用 `NGridItem` 包裹元素
+ */
--- a/src/components/RayCollapseGrid/src/props.ts
+++ b/src/components/RayCollapseGrid/src/props.ts
@ -0,0 +1,53 @@
+import { gridProps } from 'naive-ui'
+
+import type { PropType } from 'vue'
+import type { CollapseToggleText } from './type'
+
+export const collapseGridProps = {
+  value: {
+    /**
+     *
+     * 是否折叠操作栏
+     *
+     * 默认折叠
+     *
+     * `true` 收起, `false` 展开
+     */
+    type: Boolean,
+    default: true,
+  },
+  collapseToggleText: {
+    /**
+     *
+     * 自定义展开与收起文案
+     *
+     * 默认 `['展开', '收起']`
+     *
+     * 索引第一位为展开时显示内容, 所以第二位置为收起时显示内容
+     */
+    type: Array as unknown as PropType<CollapseToggleText>,
+    default: () => ['展开', '收起'],
+  },
+  bordered: {
+    /**
+     *
+     * 卡片边框
+     *
+     * 默认 `false`
+     */
+    type: Boolean,
+    default: false,
+  },
+  ...gridProps,
+} as const
+
+/**
+ *
+ * 基于 `NGird` 实现
+ *
+ * 继承该组件所有属性和方法, <https://www.naiveui.com/zh-CN/dark/components/grid>
+ *
+ * `xGap` 默认 `12`
+ *
+ * `yGap` 默认 `18`
+ */
--- a/src/components/RayCollapseGrid/src/type.ts
+++ b/src/components/RayCollapseGrid/src/type.ts
@ -0,0 +1 @@
+export type CollapseToggleText = [string | number, string | number]
--- a/src/components/RayGlobalProvider/index.tsx
+++ b/src/components/RayGlobalProvider/index.tsx
@ -0,0 +1,94 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-14
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * 全局注入 naive ui 提示性组件
+ * 使用该组件注册后, 可以直接通过 window.$message、window.$notification、window.$dialog、window.$loadingBar 访问
+ * 但是, 使用该组件注册后, 使用 window.$notification 组件时不能更改 placement 位置(只能默认右上角弹出)
+ * 如果需要更改弹出位置, 需要在需要地方重新定义组件注册
+ */
+
+import {
+  NDialogProvider,
+  NLoadingBarProvider,
+  NMessageProvider,
+  NNotificationProvider,
+  NConfigProvider,
+  createDiscreteApi,
+  darkTheme,
+  NGlobalStyle,
+} from 'naive-ui'
+
+import { useSetting } from '@/store'
+import { naiveLocales } from '@/locales/helper'
+
+const GlobalProvider = defineComponent({
+  name: 'GlobalProvider',
+  setup() {
+    const settingStore = useSetting()
+
+    const modelPrimaryColorOverride = computed(
+      () => settingStore.primaryColorOverride,
+    )
+    const modelThemeValue = computed(() =>
+      settingStore.themeValue ? darkTheme : null,
+    )
+    const localePackage = computed(() => {
+      const key = settingStore.localeLanguage
+
+      return naiveLocales(key)
+    })
+
+    const { message, notification, dialog, loadingBar } = createDiscreteApi(
+      ['message', 'dialog', 'notification', 'loadingBar'],
+      {
+        configProviderProps: computed(() => ({
+          theme: modelThemeValue.value,
+        })),
+      },
+    )
+
+    window.$dialog = dialog // 注入 `dialog`
+    window.$message = message // 注入 `message`
+    window.$loadingBar = loadingBar // 注入 `loadingBar`
+    window.$notification = notification // 注入 `notification`
+
+    return {
+      modelPrimaryColorOverride,
+      modelThemeValue,
+      localePackage,
+    }
+  },
+  render() {
+    return (
+      <NConfigProvider
+        themeOverrides={this.modelPrimaryColorOverride}
+        theme={this.modelThemeValue}
+        locale={this.localePackage.locale}
+        dateLocale={this.localePackage.dateLocal}
+      >
+        <NLoadingBarProvider>
+          <NMessageProvider>
+            <NDialogProvider>
+              <NNotificationProvider>
+                <NGlobalStyle />
+                {this.$slots.default?.()}
+              </NNotificationProvider>
+            </NDialogProvider>
+          </NMessageProvider>
+        </NLoadingBarProvider>
+      </NConfigProvider>
+    )
+  },
+})
+
+export default GlobalProvider
--- a/src/components/RayIcon/index.scss
+++ b/src/components/RayIcon/index.scss
@ -0,0 +1,20 @@
+.ray-icon {
+  position: relative;
+  width: var(--ray-icon-width);
+  height: var(--ray-icon-height);
+  border: none;
+  outline: none;
+  text-align: center;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  fill: currentColor;
+  transform: translateZ(0);
+  opacity: var(--ray-icon-depth);
+  cursor: var(--ray-icon-cursor);
+
+  & svg[RayIconAttribute="ray-icon"] {
+    width: var(--ray-icon-width);
+    height: var(--ray-icon-height);
+  }
+}
--- a/src/components/RayIcon/index.tsx
+++ b/src/components/RayIcon/index.tsx
@ -0,0 +1,106 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-01-04
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import './index.scss'
+
+const RayIcon = defineComponent({
+  name: 'RayIcon',
+  props: {
+    color: {
+      type: String,
+      default: 'currentColor',
+    },
+    prefix: {
+      type: String,
+      default: 'icon',
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    size: {
+      type: [Number, String],
+      default: 14,
+    },
+    width: {
+      type: [Number, String],
+      default: 0,
+    },
+    height: {
+      type: [Number, String],
+      default: 0,
+    },
+    customClassName: {
+      /** 自定义 class name */
+      type: String,
+      default: null,
+    },
+    depth: {
+      /** 图标深度 */
+      type: Number,
+      default: 1,
+    },
+    cursor: {
+      /** 鼠标指针样式 */
+      type: String,
+      default: 'default',
+    },
+  },
+  emits: ['click'],
+  setup(props, ctx) {
+    const emit = ctx.emit
+
+    const modelColor = computed(() => props.color)
+    const symbolId = computed(() => `#${props.prefix}-${props.name}`)
+    const cssVars = computed(() => {
+      const cssVar = {
+        '--ray-icon-width': props.width
+          ? props.width + 'px'
+          : props.size + 'px',
+        '--ray-icon-height': props.height
+          ? props.height + 'px'
+          : props.size + 'px',
+        '--ray-icon-depth': props.depth,
+        '--ray-icon-cursor': props.cursor,
+      }
+
+      return cssVar
+    })
+
+    const handleClick = () => {
+      emit('click')
+    }
+
+    return {
+      modelColor,
+      symbolId,
+      cssVars,
+      handleClick,
+    }
+  },
+  render() {
+    return (
+      <span
+        class={['ray-icon', this.customClassName]}
+        style={[this.cssVars]}
+        onClick={this.handleClick.bind(this)}
+      >
+        <svg
+          {...({ RayIconAttribute: 'ray-icon', ariaHidden: true } as object)}
+        >
+          <use {...{ 'xlink:href': this.symbolId }} fill={this.modelColor} />
+        </svg>
+      </span>
+    )
+  },
+})
+
+export default RayIcon
--- a/src/components/RayIframe/index.ts
+++ b/src/components/RayIframe/index.ts
@ -0,0 +1,3 @@
+import RayIframe from './src/index'
+
+export default RayIframe
--- a/src/components/RayIframe/src/index.scss
+++ b/src/components/RayIframe/src/index.scss
@ -0,0 +1,13 @@
+.ray-iframe {
+  width: var(--ray-iframe-width);
+  height: var(--ray-iframe-height);
+  box-sizing: border-box;
+  border: var(--ray-iframe-frameborder);
+
+  & .ray-iframe__container {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    outline: 0;
+  }
+}
--- a/src/components/RayIframe/src/index.tsx
+++ b/src/components/RayIframe/src/index.tsx
@ -0,0 +1,180 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-09
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import './index.scss'
+
+import { NSpin } from 'naive-ui'
+
+import { completeSize, on, off } from '@use-utils/element'
+
+import type { PropType } from 'vue'
+import type { SpinProps } from 'naive-ui'
+
+const RayIframe = defineComponent({
+  name: 'RayIframe',
+  props: {
+    src: {
+      /** iframe url */
+      type: String,
+      required: true,
+    },
+    iframeWrapperClass: {
+      /** 自定义类名 */
+      type: String,
+      default: null,
+    },
+    frameborder: {
+      /** 边框尺寸, 0 则不显示 */
+      type: Number,
+      default: 0,
+    },
+    width: {
+      /** iframe 宽度 */
+      type: [String, Number],
+      default: '100%',
+    },
+    height: {
+      /** iframe 高度 */
+      type: [String, Number],
+      default: '100%',
+    },
+    allow: {
+      /**
+       *
+       * iframe 特征策略
+       *
+       * ```
+       * 全屏激活: allow = 'fullscreen'
+       * 允许跨域: allow = 'payment'
+       * ```
+       *
+       * 但是该配置属性受到浏览器安全策略影响, 使用前请仔细阅读文档
+       */
+      type: String,
+      default: null,
+    },
+    name: {
+      /** iframe 定位嵌入的浏览上下文的名称 */
+      type: String,
+      default: null,
+    },
+    title: {
+      /** 标识 iframe 的主要内容 */
+      type: String,
+      default: null,
+    },
+    success: {
+      /**
+       *
+       * iframe 加载成功回调
+       * 返回值: iframe 对象, Event
+       */
+      type: Function,
+      default: null,
+    },
+    error: {
+      /**
+       *
+       * iframe 加载失败回调
+       * 返回值: iframe 对象, Event
+       */
+      type: Function,
+      default: null,
+    },
+    customSpinProps: {
+      type: Object as PropType<SpinProps>,
+      default: () => ({}),
+    },
+    lazy: {
+      /** 是否延迟加载 iframe */
+      type: Boolean,
+      default: true,
+    },
+  },
+  setup(props, { expose }) {
+    const cssVars = computed(() => {
+      const cssVar = {
+        '--ray-iframe-frameborder': completeSize(props.frameborder),
+        '--ray-iframe-width': completeSize(props.width),
+        '--ray-iframe-height': completeSize(props.height),
+      }
+
+      return cssVar
+    })
+    const iframeRef = ref<HTMLIFrameElement>()
+    const spinShow = ref(true)
+
+    const iframeLoadSuccess = (e: Event) => {
+      spinShow.value = false
+
+      props.success?.(iframeRef.value, e)
+    }
+
+    const iframeLoadError = (e: Event) => {
+      spinShow.value = false
+
+      props.error?.(iframeRef.value, e)
+    }
+
+    const getIframeRef = () => {
+      const iframeEl = iframeRef.value as HTMLElement
+
+      return iframeEl
+    }
+
+    expose()
+
+    onMounted(() => {
+      on(getIframeRef(), 'load', iframeLoadSuccess.bind(this))
+      on(getIframeRef(), 'error', iframeLoadError)
+    })
+
+    onBeforeUnmount(() => {
+      off(getIframeRef(), 'load', iframeLoadSuccess)
+      off(getIframeRef(), 'error', iframeLoadError)
+    })
+
+    return {
+      cssVars,
+      iframeRef,
+      spinShow,
+    }
+  },
+  render() {
+    return (
+      <div
+        class={['ray-iframe', this.iframeWrapperClass]}
+        style={[this.cssVars]}
+      >
+        <NSpin {...this.customSpinProps} show={this.spinShow}>
+          {{
+            ...this.$slots,
+            default: () => (
+              <iframe
+                class="ray-iframe__container"
+                ref="iframeRef"
+                src={this.src}
+                allow={this.allow}
+                name={this.name}
+                title={this.title}
+                {...{
+                  loading: this.lazy ? 'lazy' : null,
+                }}
+              ></iframe>
+            ),
+          }}
+        </NSpin>
+      </div>
+    )
+  },
+})
+
+export default RayIframe
--- a/src/components/RayLink/index.tsx
+++ b/src/components/RayLink/index.tsx
@ -0,0 +1,95 @@
+import { NAvatar, NTooltip, NSpace } from 'naive-ui'
+
+interface AvatarOptions {
+  key: string
+  src: string
+  tooltip: string
+  icon: string
+}
+
+const RayLink = defineComponent({
+  name: 'RayLink',
+  setup() {
+    const avatarOptions: AvatarOptions[] = [
+      {
+        key: 'yunhome',
+        src: 'https://yunkuangao.me/',
+        tooltip: '云之家',
+        icon: 'https://yunkuangao.me/wp-content/uploads/2022/05/cropped-cropped-QQ%E5%9B%BE%E7%89%8720220511113928.jpg',
+      },
+      {
+        key: 'yun-cloud-images',
+        src: 'https://yunkuangao.com/',
+        tooltip: '云图床',
+        icon: 'https://yunkuangao.me/wp-content/uploads/2022/05/cropped-cropped-QQ%E5%9B%BE%E7%89%8720220511113928.jpg',
+      },
+      {
+        key: 'ray-js-note',
+        src: 'https://note.youdao.com/s/ObWEe2BB',
+        tooltip: 'Ray的前端学习笔记',
+        icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.jpeg',
+      },
+      {
+        key: 'ray-js-cover',
+        src: 'https://note.youdao.com/s/IC8xKPdB',
+        tooltip: 'Ray的面试题总结',
+        icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.jpeg',
+      },
+      {
+        key: 'ray-template-doc',
+        src: 'https://xiaodaigua-ray.github.io/ray-template-doc/',
+        tooltip: 'Ray Template Doc',
+        icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.jpeg',
+      },
+      {
+        key: 'ray-template-doc-out',
+        src: 'https://ray-template.yunkuangao.com/',
+        tooltip: 'Ray Template Doc (国内地址)',
+        icon: 'https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:image/longmao.jpeg',
+      },
+    ]
+
+    const handleLinkClick = (item: AvatarOptions) => {
+      window.open(item.src)
+    }
+
+    return {
+      handleLinkClick,
+      avatarOptions,
+    }
+  },
+  render() {
+    return (
+      <NSpace>
+        {this.avatarOptions.map((curr) => (
+          <NTooltip>
+            {{
+              trigger: () => (
+                <NAvatar
+                  round
+                  src={curr.icon}
+                  style={['cursor: pointer']}
+                  {...{
+                    onClick: this.handleLinkClick.bind(this, curr),
+                  }}
+                  objectFit="cover"
+                  size={24}
+                />
+              ),
+              default: () => curr.tooltip,
+            }}
+          </NTooltip>
+        ))}
+      </NSpace>
+    )
+  },
+})
+
+export default RayLink
+
+/**
+ *
+ * 友链组件
+ *
+ * 这个组件用作初试模板中, 不喜欢自行删除
+ */
--- a/src/components/RayTable/index.ts
+++ b/src/components/RayTable/index.ts
@ -0,0 +1,4 @@
+import RayTable from './src/index'
+
+export default RayTable
+export type { RayTableInst } from './src/type'
--- a/src/components/RayTable/src/components/TableAction/index.tsx
+++ b/src/components/RayTable/src/components/TableAction/index.tsx
@ -0,0 +1,132 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2022-12-22
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { NPopconfirm, NSpace, NButton, NPopover } from 'naive-ui'
+import RayIcon from '@/components/RayIcon/index'
+
+export type EmitterType = 'positive' | 'negative'
+
+const TableAction = defineComponent({
+  name: 'TableAction',
+  props: {
+    tooltip: {
+      /**
+       *
+       * 提示内容
+       */
+      type: String,
+      required: true,
+    },
+    negativeText: {
+      /**
+       *
+       * 取消提示按钮文本内容
+       *
+       * 默认 `取消`
+       */
+      type: String,
+      default: '取消',
+    },
+    positiveText: {
+      /**
+       *
+       * 确认提示按钮文本内容
+       *
+       * 默认 `确认`
+       */
+      type: String,
+      default: '确认',
+    },
+    icon: {
+      /**
+       *
+       * 图标
+       *
+       * 必须为 `icons` 中已包含的
+       */
+      type: String,
+      required: true,
+    },
+    iconSize: {
+      /**
+       *
+       * 图标尺寸
+       *
+       * 默认为 `18px`
+       */
+      type: Number,
+      default: 18,
+    },
+    popoverContent: {
+      type: String,
+      required: true,
+    },
+  },
+  emits: ['positive', 'negative'],
+  setup(_, { emit }) {
+    const showPopoconfirm = ref(false)
+
+    const handleEmit = (type: EmitterType) => {
+      type === 'positive' ? emit('positive') : emit('negative')
+
+      showPopoconfirm.value = false
+    }
+
+    return {
+      handleEmit,
+      showPopoconfirm,
+    }
+  },
+  render() {
+    return (
+      <NPopover>
+        {{
+          trigger: () => (
+            <NPopconfirm v-model:show={this.showPopoconfirm} showArrow={true}>
+              {{
+                trigger: () => (
+                  <RayIcon
+                    name={this.icon}
+                    size={this.iconSize}
+                    customClassName="ray-table-icon"
+                  />
+                ),
+                default: () => this.tooltip,
+                action: () => (
+                  <NSpace>
+                    <NButton
+                      size="small"
+                      ghost
+                      onClick={this.handleEmit.bind(this, 'negative')}
+                    >
+                      {this.negativeText}
+                    </NButton>
+                    <NButton
+                      size="small"
+                      ghost
+                      type="info"
+                      onClick={this.handleEmit.bind(this, 'positive')}
+                    >
+                      {this.positiveText}
+                    </NButton>
+                  </NSpace>
+                ),
+              }}
+            </NPopconfirm>
+          ),
+          default: () => this.popoverContent,
+        }}
+      </NPopover>
+    )
+  },
+})
+
+export default TableAction
--- a/src/components/RayTable/src/components/TableScreenfull/index.scss
+++ b/src/components/RayTable/src/components/TableScreenfull/index.scss
--- a/src/components/RayTable/src/components/TableScreenfull/index.tsx
+++ b/src/components/RayTable/src/components/TableScreenfull/index.tsx
@ -0,0 +1,67 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-03-11
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import './index.scss'
+
+import { NPopover } from 'naive-ui'
+import RayIcon from '@/components/RayIcon/index'
+
+import screenfull from 'screenfull'
+
+import type { TableSettingProvider } from '@/components/RayTable/src/type'
+
+const TableScreenfull = defineComponent({
+  name: 'TableScreenfull',
+  setup() {
+    const tableSettingProvider = inject(
+      'tableSettingProvider',
+      {} as TableSettingProvider,
+    )
+
+    const rayTableUUID = computed(() => tableSettingProvider.rayTableUUID)
+    let currentTableIsFullscreen = screenfull.isFullscreen // 缓存当前是否处于全屏状态
+
+    const handleScreenfull = () => {
+      const el = document.getElementById(rayTableUUID.value)
+
+      currentTableIsFullscreen = !currentTableIsFullscreen
+
+      if (el && screenfull.isEnabled && currentTableIsFullscreen) {
+        screenfull.request(el)
+      } else {
+        screenfull.exit()
+      }
+    }
+
+    return {
+      handleScreenfull,
+    }
+  },
+  render() {
+    return (
+      <NPopover>
+        {{
+          trigger: () => (
+            <RayIcon
+              name="fullscreen"
+              size="18"
+              customClassName="ray-table-icon tay-table-icon__screenfull"
+              onClick={this.handleScreenfull.bind(this)}
+            />
+          ),
+          default: () => '全屏表格',
+        }}
+      </NPopover>
+    )
+  },
+})
+
+export default TableScreenfull
--- a/src/components/RayTable/src/components/TableSetting/hook.ts
+++ b/src/components/RayTable/src/components/TableSetting/hook.ts
@ -0,0 +1,19 @@
+import type { ActionOptions } from '@/components/RayTable/src/type'
+
+export const setupSettingOptions = (options: ActionOptions[]) => {
+  const arr = options.map((curr) => {
+    if (curr.fixed) {
+      curr.fixed === 'right'
+        ? (curr.rightFixedActivated = true)
+        : (curr.leftFixedActivated = true)
+    }
+
+    if (curr.resizable) {
+      curr.resizeColumnActivated = true
+    }
+
+    return curr
+  })
+
+  return arr
+}
--- a/src/components/RayTable/src/components/TableSetting/index.scss
+++ b/src/components/RayTable/src/components/TableSetting/index.scss
@ -0,0 +1,70 @@
+.ray-table__setting:hover {
+  transform: rotate(180deg);
+  transition: transform 0.3s var(--r-bezier);
+}
+
+.table-setting__card {
+  padding: 12px 8px;
+
+  & .n-card__content {
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+}
+
+.ray-table__setting-option--draggable {
+  display: grid;
+  grid-row-gap: 10px;
+  justify-self: center;
+  align-self: center;
+
+  & .draggable-item {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 8px 10px;
+    border-radius: 2px;
+    transition: background-color 0.3s var(--r-bezier);
+
+    &.draggable-item--dark {
+      &:hover {
+        background-color: var(--ray-theme-primary-fade-color);
+      }
+    }
+
+    &:hover {
+      background-color: var(--ray-theme-primary-fade-color);
+
+      & .draggable-item__d--icon {
+        opacity: 1;
+      }
+    }
+
+    & .draggable-item__d--icon {
+      transition: opacity 0.3s var(--r-bezier), transform 0.3s var(--r-bezier);
+      opacity: 0;
+    }
+
+    & .draggable-item__d--icon,
+    & .draggable-item__icon {
+      padding: 5px;
+      outline: none;
+      border: none;
+    }
+
+    & .draggable-item__icon {
+      cursor: pointer;
+    }
+
+    & .draggable-item__icon {
+      &.draggable-item__icon--actived {
+        color: var(--ray-theme-primary-color);
+      }
+    }
+
+    & .n-ellipsis {
+      max-width: 80px;
+      min-width: 80px;
+    }
+  }
+}
--- a/src/components/RayTable/src/components/TableSetting/index.tsx
+++ b/src/components/RayTable/src/components/TableSetting/index.tsx
@ -0,0 +1,233 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2022-12-08
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * 依赖 table columns 属性操作
+ *
+ * 支持拖拽修改列顺序、动态修改列宽度、固定(锁列)
+ */
+
+import './index.scss'
+
+import { NCard, NPopover, NEllipsis } from 'naive-ui'
+import RayIcon from '@/components/RayIcon/index'
+import VueDraggable from 'vuedraggable'
+
+import { setupSettingOptions } from './hook'
+import { useSetting } from '@/store'
+
+import type {
+  TableSettingProvider,
+  ActionOptions,
+  FixedType,
+  TableSettingFixedPopoverIcon,
+} from '@/components/RayTable/src/type'
+
+const TableSetting = defineComponent({
+  name: 'TableSetting',
+  emits: ['columnsUpdate'],
+  setup(_, { emit }) {
+    const tableSettingProvider = inject(
+      'tableSettingProvider',
+      {} as TableSettingProvider,
+    )
+    const settingStore = useSetting()
+
+    const settingOptions = ref(
+      setupSettingOptions(tableSettingProvider.modelColumns.value),
+    ) // 表格表头
+    const disableDraggable = ref(true) // 拖拽开关(暂时弃用)
+    const { themeValue } = storeToRefs(settingStore)
+
+    /** 拖拽结束后 */
+    const handleDraggableEnd = () => {
+      emit('columnsUpdate', settingOptions.value)
+    }
+
+    const FixedPopoverIcon = (options: TableSettingFixedPopoverIcon) => {
+      const { element, name, tooltip, fn, index, fixed, key } = options
+
+      return (
+        <NPopover>
+          {{
+            trigger: () => (
+              <RayIcon
+                customClassName={`draggable-item__icon ray-table-icon ${
+                  element[key] ? 'draggable-item__icon--actived' : ''
+                }`}
+                name={name}
+                size="18"
+                onClick={fn.bind(this, fixed, index)}
+              />
+            ),
+            default: () => tooltip,
+          }}
+        </NPopover>
+      )
+    }
+
+    /**
+     *
+     * @param type 列所需固定方向
+     * @param idx 当前操作栏索引位置
+     *
+     * @remark 操作栏锁定列, 不能同时存在两种状态(互斥)
+     */
+    const handleFixedClick = (type: FixedType, idx: number) => {
+      const key = `${type}FixedActivated`
+      const value = settingOptions.value[idx]
+
+      if (key === 'leftFixedActivated') {
+        value['rightFixedActivated'] = false
+      } else if (key === 'rightFixedActivated') {
+        value['leftFixedActivated'] = false
+      }
+
+      value[key] = !value[key]
+
+      if (value[key]) {
+        value.fixed = type
+      } else {
+        value.fixed = undefined
+      }
+
+      settingOptions.value[idx] = value
+
+      emit('columnsUpdate', settingOptions.value)
+    }
+
+    /**
+     *
+     * @param idx 索引
+     *
+     * @remark 动态设置列宽度, 如果表格并未出现横向滚动条则不会启用拖拽修改列按钮
+     */
+    const handleResizeColumnClick = (idx: number) => {
+      const value = settingOptions.value[idx]
+
+      value['resizeColumnActivated'] = !value['resizeColumnActivated']
+      value['resizable'] = value['resizeColumnActivated']
+
+      settingOptions.value[idx] = value
+
+      emit('columnsUpdate', settingOptions.value)
+    }
+
+    return {
+      settingOptions,
+      handleDraggableEnd,
+      handleFixedClick,
+      disableDraggable,
+      FixedPopoverIcon,
+      handleResizeColumnClick,
+      themeValue,
+    }
+  },
+  render() {
+    return (
+      <NPopover trigger="click" placement="bottom" showArrow={false} raw>
+        {{
+          trigger: () => (
+            <RayIcon
+              customClassName="ray-table__setting"
+              name="setting"
+              size="18"
+            />
+          ),
+          default: () => (
+            <NCard bordered={false} class="table-setting__card">
+              {{
+                default: () => (
+                  <VueDraggable
+                    class={['ray-table__setting-option--draggable']}
+                    v-model={this.settingOptions}
+                    itemKey="key"
+                    {...{
+                      disabled: !this.disableDraggable,
+                      onEnd: this.handleDraggableEnd.bind(this),
+                    }}
+                  >
+                    {{
+                      item: ({
+                        element,
+                        index,
+                      }: {
+                        element: ActionOptions
+                        index: number
+                      }) => (
+                        <div
+                          class={[
+                            'draggable-item',
+                            this.themeValue ? 'draggable-item--dark' : '',
+                          ]}
+                        >
+                          <RayIcon
+                            customClassName={`draggable-item__d--icon`}
+                            name="draggable"
+                            size="18"
+                          />
+                          <NEllipsis>
+                            <span>{element.title}</span>
+                          </NEllipsis>
+                          {this.FixedPopoverIcon({
+                            element: element,
+                            name: 'left_arrow',
+                            tooltip: '左固定',
+                            fn: this.handleFixedClick,
+                            index,
+                            fixed: 'left',
+                            key: 'leftFixedActivated',
+                          })}
+                          <NPopover>
+                            {{
+                              trigger: () => (
+                                <RayIcon
+                                  customClassName={`draggable-item__icon ${
+                                    element['resizeColumnActivated']
+                                      ? 'draggable-item__icon--actived'
+                                      : ''
+                                  }`}
+                                  name="resize_h"
+                                  size="18"
+                                  onClick={this.handleResizeColumnClick.bind(
+                                    this,
+                                    index,
+                                  )}
+                                />
+                              ),
+                              default: () => '修改列宽',
+                            }}
+                          </NPopover>
+                          {this.FixedPopoverIcon({
+                            element: element,
+                            name: 'right_arrow',
+                            tooltip: '右固定',
+                            fn: this.handleFixedClick,
+                            index,
+                            fixed: 'right',
+                            key: 'rightFixedActivated',
+                          })}
+                        </div>
+                      ),
+                    }}
+                  </VueDraggable>
+                ),
+              }}
+            </NCard>
+          ),
+        }}
+      </NPopover>
+    )
+  },
+})
+
+export default TableSetting
--- a/src/components/RayTable/src/components/TableSize/index.scss
+++ b/src/components/RayTable/src/components/TableSize/index.scss
@ -0,0 +1,47 @@
+.ray-table__table-size {
+  padding: 0 !important;
+
+  & .n-card__content {
+    padding: 0 !important;
+    margin: 0 !important;
+
+    & .table-size__dropdown {
+      box-sizing: border-box;
+      padding: 4px 0;
+      background-color: transparent;
+
+      & .table-size__dropdown-wrapper {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        flex-direction: column;
+
+        & .dropdown-item {
+          height: 34px;
+          line-height: 34px;
+          text-align: center;
+          cursor: pointer;
+          padding: 0 16px;
+          transition: background-color 0.3s var(--r-bezier), color 0.3s var(--r-bezier);
+
+          &.dropdown-item--active,
+          &:hover {
+            background-color: var(--ray-theme-primary-fade-color);
+            color: var(--ray-theme-primary-color);
+          }
+        }
+      }
+    }
+  }
+}
+
+.ray-table__table-size--dark {
+  @include useAppTheme("dark") {
+    & .table-size__dropdown-wrapper {
+      & .dropdown-item:hover {
+        background-color: var(--ray-theme-primary-fade-color);
+        color: var(--ray-theme-primary-color);
+      }
+    }
+  }
+}
--- a/src/components/RayTable/src/components/TableSize/index.tsx
+++ b/src/components/RayTable/src/components/TableSize/index.tsx
@ -0,0 +1,129 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-03-10
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import './index.scss'
+
+import { NPopover, NCard } from 'naive-ui'
+import RayIcon from '@/components/RayIcon/index'
+
+import type { TableSettingProvider } from '@/components/RayTable/src/type'
+import type { ComponentSize } from '@/types/modules/component'
+
+const TableSize = defineComponent({
+  name: 'TableSize',
+  emits: ['changeSize'],
+  setup(_, { emit }) {
+    const tableSettingProvider = inject(
+      'tableSettingProvider',
+      {} as TableSettingProvider,
+    )
+
+    const popoverShow = ref(false)
+    const currentSize = ref(tableSettingProvider.size)
+    const size = computed({
+      get: () => tableSettingProvider.size,
+      set: (val) => {
+        currentSize.value = val
+      },
+    })
+    const sizeOptions = ref([
+      {
+        label: '默认',
+        key: 'medium',
+      },
+      {
+        label: '紧凑',
+        key: 'small',
+      },
+      {
+        label: '宽松',
+        key: 'large',
+      },
+    ])
+
+    const handleDropdownClick = (key: ComponentSize) => {
+      sizeOptions.value.forEach((curr) => {
+        if (curr.key === key) {
+          size.value = key
+
+          popoverShow.value = false
+
+          emit('changeSize', key)
+        }
+      })
+    }
+
+    return {
+      sizeOptions,
+      currentSize,
+      handleDropdownClick,
+      popoverShow,
+    }
+  },
+  render() {
+    return (
+      <NPopover
+        v-model:show={this.popoverShow}
+        trigger="click"
+        placement="bottom"
+        showArrow={false}
+        raw
+      >
+        {{
+          trigger: () => (
+            <NPopover>
+              {{
+                trigger: () => (
+                  <RayIcon
+                    name="adjustment"
+                    size="18"
+                    customClassName="ray-table-icon"
+                  />
+                ),
+                default: () => '表格密度',
+              }}
+            </NPopover>
+          ),
+          default: () => (
+            <NCard
+              bordered={false}
+              class="ray-table__table-size ray-table__table-size--dark ray-table__table-size--light"
+            >
+              <div class="table-size__dropdown">
+                <div class="table-size__dropdown-wrapper">
+                  {this.sizeOptions.map((curr) => (
+                    <div
+                      class={[
+                        'dropdown-item',
+                        curr.key === this.currentSize
+                          ? 'dropdown-item--active'
+                          : '',
+                      ]}
+                      key={curr.key}
+                      onClick={this.handleDropdownClick.bind(
+                        this,
+                        curr.key as ComponentSize,
+                      )}
+                    >
+                      <div class="drop-item__label">{curr.label}</div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </NCard>
+          ),
+        }}
+      </NPopover>
+    )
+  },
+})
+
+export default TableSize
--- a/src/components/RayTable/src/index.scss
+++ b/src/components/RayTable/src/index.scss
@ -0,0 +1,39 @@
+@keyframes scaleScreenfull {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.3);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.ray-table {
+  & .ray-table-icon {
+    transition: transform 0.3s var(--r-bezier);
+
+    &:hover {
+      animation: scaleScreenfull 0.3s linear;
+      animation-direction: alternate;
+    }
+  }
+
+  & .ray-table__setting,
+  & .ray-table-icon {
+    cursor: pointer;
+    outline: none;
+    border: none;
+  }
+
+  & .n-card-header .n-card-header__main {
+    padding-right: var(--ray-table-header-space);
+  }
+
+  & .ray-table-header-extra__space {
+    display: flex;
+    gap: 0 12px;
+    align-items: center;
+  }
+}
--- a/src/components/RayTable/src/index.tsx
+++ b/src/components/RayTable/src/index.tsx
@ -0,0 +1,328 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2022-12-08
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * <https://www.naiveui.com/zh-CN/dark/components/data-table>
+ *
+ * 完全继承 `NDataTable`, 该组件继承 `NDataTable Props` 属性和方法
+ *
+ * 实现: 抬头, 操作栏, 右键菜单功能拓展, 输出 `excel`, 表格尺寸调整
+ *
+ * 右键菜单功能, 需要同时启用 `showMenu` 与配置菜单选项才能正常使用
+ *
+ * 可以通过设置 `action` 为 `false` 隐藏操作栏
+ *
+ * 具体拓展 `props` 方法, 可以查看 `props.ts` 中相关注释与代码
+ *
+ * 基于 `xlsx.js` 实现输出 `excel`
+ */
+
+/**
+ *
+ * 为什么有些拓展功能是写在该组件内, 有些则是完全抽离出去呢...
+ * 好问题, 因为我一开始没想到而且我又想偷懒
+ *
+ * 凑合凑合看吧, 等我啥时候有空再抽离出去
+ */
+
+import './index.scss'
+
+import { NDataTable, NCard, NDropdown } from 'naive-ui'
+import TableSetting from './components/TableSetting/index'
+import TableAction from './components/TableAction/index'
+import TableSize from './components/TableSize/index'
+import TableScreenfull from './components/TableScreenfull/index'
+
+import props from './props'
+import print from 'print-js'
+import { uuid } from '@use-utils/hook'
+import { exportFileToXLSX } from '@use-utils/xlsx'
+
+import type { ActionOptions } from './type'
+import type { WritableComputedRef } from 'vue'
+import type { DropdownOption } from 'naive-ui'
+import type { ExportExcelHeader } from '@use-utils/xlsx'
+import type { DataTableInst } from 'naive-ui'
+import type { ComponentSize } from '@/types/modules/component'
+
+const RayTable = defineComponent({
+  name: 'RayTable',
+  props: props,
+  emits: ['update:columns', 'menuSelect', 'exportSuccess', 'exportError'],
+  setup(props, { emit, expose }) {
+    const rayTableInstance = ref<DataTableInst>()
+
+    const tableUUID = uuid(16) // 表格 id, 用于打印表格
+    const rayTableUUID = uuid(16) // RayTable id, 用于全屏表格
+    const modelRightClickMenu = computed(() => props.rightClickMenu)
+    const modelColumns = computed({
+      get: () => props.columns,
+      set: (arr) => {
+        emit('update:columns', arr)
+      },
+    }) as unknown as WritableComputedRef<ActionOptions[]>
+    const menuConfig = reactive({
+      x: 0,
+      y: 0,
+      showMenu: false,
+    })
+    let prevRightClickIndex = -1 // 缓存上次点击索引位置
+    const cssVars = computed(() => {
+      const cssVar = {
+        '--ray-table-header-space': props.tableHeaderSpace,
+      }
+
+      return cssVar
+    })
+    const tableSize = ref(props.size)
+    const tableMethods = ref<Omit<DataTableInst, 'clearFilter'>>()
+
+    /** 注入相关属性 */
+    provide('tableSettingProvider', {
+      modelRightClickMenu,
+      modelColumns,
+      size: props.size,
+      rayTableUUID,
+    })
+
+    /** 拖拽更新后的表格列 */
+    const handleColumnsUpdate = (arr: ActionOptions[]) => {
+      modelColumns.value = arr
+    }
+
+    /**
+     *
+     * @param key 右键菜单当前选择 `key`
+     * @param option 右键菜单当前 `item`
+     *
+     * @remark (key: string | number, index: number,option: DropdownOption) => void
+     */
+    const handleRightMenuSelect = (
+      key: string | number,
+      option: DropdownOption,
+    ) => {
+      emit('menuSelect', key, prevRightClickIndex, option)
+
+      menuConfig.showMenu = false
+    }
+
+    /**
+     *
+     * @param arr 表格当前行
+     * @param idx 表格当前索引位置
+     * @returns 自定义属性集
+     *
+     * @remark 集成右键菜单属性, 会自动拦截右键方法, 会自动合并自定义行属性
+     */
+    const handleRowProps = (arr: ActionOptions, idx: number) => {
+      const interceptRowProps = props.rowProps?.(arr, idx)
+
+      return {
+        ...interceptRowProps,
+        onContextmenu: (e: MouseEvent) => {
+          e.preventDefault()
+
+          prevRightClickIndex = idx
+
+          menuConfig.showMenu = false
+
+          nextTick().then(() => {
+            menuConfig.showMenu = true
+
+            menuConfig.x = e.clientX
+            menuConfig.y = e.clientY
+          })
+        },
+      }
+    }
+
+    /**
+     *
+     * 导出表格数据为 `excel`
+     *
+     * 基于 `xlsx`
+     *
+     * 按需导入 `xlsx` 减少体积, 不依赖传统 `file save` 插件导出方式
+     */
+    const handleExportPositive = async () => {
+      if (props.data.length && props.columns.length) {
+        try {
+          await exportFileToXLSX(
+            props.data,
+            props.columns as ExportExcelHeader[],
+            {
+              filename: props.exportFilename,
+            },
+          )
+
+          emit('exportSuccess')
+        } catch (e) {
+          emit('exportError')
+        }
+      }
+    }
+
+    /**
+     *
+     * 打印输出表格内容
+     *
+     * 默认配置按照 `print-js` 配置
+     *
+     * 会自动合并自定义配置项
+     *
+     * 受到 `print-js` 限制有些样式是无法打印输出的
+     */
+    const handlePrintPositive = () => {
+      const options = Object.assign({}, props.printOptions, {
+        printable: tableUUID,
+        type: props.printType,
+        documentTitle: props.printOptions.documentTitle
+          ? props.printOptions.documentTitle
+          : '表格',
+      })
+
+      print(options)
+    }
+
+    /** 更新后的表格尺寸 */
+    const handleChangeTableSize = (size: ComponentSize) => {
+      tableSize.value = size
+    }
+
+    const registerRayTableMethods = (ins: DataTableInst) => {
+      const {
+        clearFilters,
+        clearSorter,
+        filters,
+        page,
+        scrollTo,
+        sort,
+        filter,
+      } = ins
+
+      tableMethods.value = {
+        clearFilters,
+        clearSorter,
+        filters,
+        page,
+        scrollTo,
+        sort,
+        filter,
+      }
+    }
+
+    expose({
+      tableMethods: computed(() => tableMethods.value),
+    })
+
+    onMounted(() => {
+      registerRayTableMethods(rayTableInstance.value as DataTableInst)
+    })
+
+    return {
+      tableUUID,
+      rayTableUUID,
+      handleColumnsUpdate,
+      ...toRefs(menuConfig),
+      handleRowProps,
+      handleRightMenuSelect,
+      handleExportPositive,
+      handlePrintPositive,
+      cssVars,
+      handleChangeTableSize,
+      tableSize,
+      rayTableInstance,
+    }
+  },
+  render() {
+    return (
+      <NCard
+        class="ray-table"
+        bordered={this.bordered}
+        style={[this.cssVars]}
+        {...{ id: this.rayTableUUID }}
+      >
+        {{
+          default: () => (
+            <>
+              <NDataTable
+                ref="rayTableInstance"
+                {...{ id: this.tableUUID }}
+                {...this.$props}
+                rowProps={this.handleRowProps.bind(this)}
+                size={this.tableSize}
+              >
+                {{
+                  ...this.$slots,
+                }}
+              </NDataTable>
+              {this.showMenu ? (
+                // 右键菜单
+                <NDropdown
+                  show={this.showMenu}
+                  placement="bottom-start"
+                  trigger="manual"
+                  x={this.x}
+                  y={this.y}
+                  options={this.rightClickMenu}
+                  onClickoutside={() => (this.showMenu = false)}
+                  onSelect={this.handleRightMenuSelect.bind(this)}
+                />
+              ) : (
+                ''
+              )}
+            </>
+          ),
+          header: () => this.title,
+          'header-extra': () =>
+            this.action ? (
+              <div class="ray-table-header-extra__space">
+                {/* 打印输出操作 */}
+                <TableAction
+                  icon={this.printIcon}
+                  tooltip={this.printTooltip}
+                  popoverContent="打印表格"
+                  positiveText={this.printPositiveText}
+                  negativeText={this.printNegativeText}
+                  onPositive={this.handlePrintPositive.bind(this)}
+                />
+                {/* 输出为Excel表格 */}
+                <TableAction
+                  icon={this.exportExcelIcon}
+                  tooltip={this.exportTooltip}
+                  popoverContent="导出表格"
+                  positiveText={this.exportPositiveText}
+                  negativeText={this.exportNegativeText}
+                  onPositive={this.handleExportPositive.bind(this)}
+                />
+                {/* 表格尺寸调整 */}
+                <TableSize
+                  onChangeSize={this.handleChangeTableSize.bind(this)}
+                />
+                {/* 全屏表格 */}
+                <TableScreenfull />
+                {/* 表格列操作 */}
+                <TableSetting
+                  onColumnsUpdate={this.handleColumnsUpdate.bind(this)}
+                />
+              </div>
+            ) : (
+              ''
+            ),
+          footer: () => this.$slots.tableFooter?.(),
+        }}
+      </NCard>
+    )
+  },
+})
+
+export default RayTable
--- a/src/components/RayTable/src/props.ts
+++ b/src/components/RayTable/src/props.ts
@ -0,0 +1,219 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2022-12-08
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { dataTableProps } from 'naive-ui'
+
+import type { PropType, VNode, VNodeChild } from 'vue'
+import type { DropdownMixedOption } from './type'
+import type PrintConfiguration from 'print-js'
+
+const rayTableProps = {
+  ...dataTableProps, // 继承 `data table props`
+  rightClickMenu: {
+    /**
+     *
+     * 表格右键菜单, 基于 `NDropdown` 实现
+     *
+     * 如果菜单内容长度为 `0` 则不会渲染
+     *
+     * 只需要传入对应的菜单配置项, 即可自动开启右键菜单功能
+     */
+    type: Array as PropType<DropdownMixedOption[]>,
+    default: () => [],
+  },
+  title: {
+    /**
+     *
+     * 表格标题
+     *
+     * 可以自定义渲染
+     */
+    type: [String, Object] as PropType<string | VNodeChild>,
+    default: '',
+  },
+  action: {
+    /**
+     *
+     * 是否开启操作栏
+     *
+     * 默认开启
+     */
+    type: Boolean,
+    default: true,
+  },
+  actionExtra: {
+    /**
+     *
+     * 自定义拓展操作栏
+     *
+     * 暂时不开放
+     */
+    type: Object as PropType<VNode>,
+    default: () => ({}),
+  },
+  showMenu: {
+    /**
+     *
+     * 是否展示右键菜单
+     *
+     * 默认启用
+     */
+    type: Boolean,
+    default: true,
+  },
+  exportTooltip: {
+    /**
+     *
+     * 导出表格提示
+     */
+    type: String,
+    default: '是否导出为Excel表格?',
+  },
+  exportType: {
+    /**
+     *
+     * 导出类型
+     *
+     * 默认为 `xlsx`
+     *
+     * 暂时只支持导出为 `xlsx`
+     */
+    type: String,
+    default: 'xlsx',
+  },
+  exportPositiveText: {
+    /**
+     *
+     * 导出确认按钮文字
+     *
+     * 默认为 `确认`
+     */
+    type: String,
+    default: '确认',
+  },
+  exportNegativeText: {
+    /**
+     *
+     * 导出取消按钮文字
+     *
+     * 默认为 `取消`
+     */
+    type: String,
+    default: '取消',
+  },
+  exportFilename: {
+    /**
+     *
+     * 导出表格名称
+     */
+    type: String,
+    default: '',
+  },
+  printPositiveText: {
+    /**
+     *
+     * 打印确认按钮文字
+     *
+     * 默认为 `确认`
+     */
+    type: String,
+    default: '确认',
+  },
+  printNegativeText: {
+    /**
+     *
+     * 打印取消按钮文字
+     *
+     * 默认为 `取消`
+     */
+    type: String,
+    default: '取消',
+  },
+  printTooltip: {
+    /**
+     *
+     * 打印表格提示
+     */
+    type: String,
+    default: '是否打印该表格?',
+  },
+  printType: {
+    /**
+     *
+     * 打印输出类型: 'pdf' | 'html' | 'image' | 'json'
+     *
+     * 默认为 `html`
+     */
+    type: String as PropType<PrintConfiguration.PrintTypes>,
+    default: 'html',
+  },
+  printOptions: {
+    /**
+     *
+     * `print-js` 打印配置项
+     *
+     * 会自动过滤: `printable`, 'type'
+     */
+    type: Object as PropType<
+      Omit<PrintConfiguration.Configuration, 'printable' | 'type'>
+    >,
+    default: () => ({}),
+  },
+  printIcon: {
+    /**
+     *
+     * 打印按钮自定义图标名称
+     *
+     * 需要结合 `RayIcon` 组件使用
+     *
+     * 如果需要自定义图标, 则需要在 `src/icons` 中添加后使用
+     */
+    type: String,
+    default: 'print',
+  },
+  exportExcelIcon: {
+    /**
+     *
+     * 导出为表格按钮自定义图标名称
+     *
+     * 需要结合 `RayIcon` 组件使用
+     *
+     * 如果需要自定义图标, 则需要在 `src/icons` 中添加后使用
+     */
+    type: String,
+    default: 'export_excel',
+  },
+  tableHeaderSpace: {
+    /**
+     *
+     * 表格头部操作栏, 主要操作栏与额外操作栏之间间隔
+     */
+    type: String,
+    default: '10px',
+  },
+  bordered: {
+    /**
+     *
+     * 表格边框
+     */
+    type: Boolean,
+    default: false,
+  },
+} as const
+
+export default rayTableProps
+
+/**
+ *
+ * `Ray Table Props`
+ *
+ * 继承 `Naive UI Data Table` <https://www.naiveui.com/zh-CN/dark/components/data-table>
+ */
--- a/src/components/RayTable/src/type.ts
+++ b/src/components/RayTable/src/type.ts
@ -0,0 +1,78 @@
+import type {
+  DropdownOption,
+  DropdownGroupOption,
+  DropdownDividerOption,
+  DropdownRenderOption,
+  DataTableBaseColumn,
+  DataTableInst,
+} from 'naive-ui'
+import type { ComputedRef, WritableComputedRef, VNode } from 'vue'
+import type { ComponentSize } from '@/types/modules/component'
+
+export interface ActionOptions extends DataTableBaseColumn {
+  leftFixedActivated?: boolean // 向左固定
+  rightFixedActivated?: boolean // 向右固定
+  resizeColumnActivated?: boolean // 拖拽表格列
+}
+
+export type FixedType = 'left' | 'right' | undefined
+
+export interface TableSettingFixedPopoverIcon {
+  element: ActionOptions
+  name: string
+  tooltip: string
+  fn: Function
+  index: number
+  fixed: FixedType
+  key: 'leftFixedActivated' | 'rightFixedActivated'
+}
+
+export type DropdownMixedOption =
+  | DropdownOption
+  | DropdownGroupOption
+  | DropdownDividerOption
+  | DropdownRenderOption
+
+export type SettingOptions = WritableComputedRef<ActionOptions[]>
+
+export type RightClickMenu = ComputedRef<DropdownMixedOption[]>
+
+export interface TableSettingProvider {
+  modelRightClickMenu: RightClickMenu
+  modelColumns: SettingOptions
+  size: ComponentSize
+  rayTableUUID: string
+}
+
+export interface ExportExcelProvider {
+  exportTooltip: string
+  exportType: string
+  exportPositiveText: string
+  exportNegativeText: string
+  exportFilename: string
+}
+
+export type ColumnKey = string | number
+
+declare type VNodeChildAtom =
+  | VNode
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | void
+
+export declare type VNodeArrayChildren = Array<
+  VNodeArrayChildren | VNodeChildAtom
+>
+
+export declare type VNodeChild = VNodeChildAtom | VNodeArrayChildren
+
+export declare type TableColumnTitle =
+  | string
+  | ((column: DataTableBaseColumn) => VNodeChild)
+
+export declare type RayTableInst = {
+  tableMethods: Omit<DataTableInst, 'clearFilter'>
+}
--- a/src/components/RayTransitionComponent/TransitionComponent.vue
+++ b/src/components/RayTransitionComponent/TransitionComponent.vue
@ -0,0 +1,46 @@
+<template>
+  <RouterView>
+    <template #default="{ Component, route }">
+      <transition
+        :name="transitionPropName"
+        :mode="transitionMode"
+        :appear="transitionAppear"
+      >
+        <keep-alive
+          v-if="setupKeepAlive"
+          :max="maxKeepAliveLength"
+          :include="keepAliveInclude"
+          :exclude="keepAliveExclude"
+        >
+          <component :is="Component" :key="route.fullPath" />
+        </keep-alive>
+        <component :is="Component" v-else :key="route.fullPath" />
+      </transition>
+    </template>
+  </RouterView>
+</template>
+<script lang="ts" setup>
+import { useKeepAlive } from '@/store'
+import { APP_KEEP_ALIVE } from '@/appConfig/appConfig'
+
+import type { PropType } from 'vue'
+
+defineProps({
+  transitionPropName: {
+    type: String,
+    default: 'fade',
+  },
+  transitionMode: {
+    type: String as PropType<'default' | 'out-in' | 'in-out' | undefined>,
+    default: 'out-in',
+  },
+  transitionAppear: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const keepAliveStore = useKeepAlive()
+const { keepAliveInclude } = storeToRefs(keepAliveStore)
+const { setupKeepAlive, maxKeepAliveLength, keepAliveExclude } = APP_KEEP_ALIVE
+</script>
--- a/src/dayjs/index.ts
+++ b/src/dayjs/index.ts
@ -0,0 +1,39 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-02
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import dayjs from 'dayjs'
+import { DEFAULT_DAYJS_LOCAL, DAYJS_LOCAL_MAP } from '@/appConfig/localConfig'
+import 'dayjs/locale/zh-cn'
+
+import type { DayjsLocal } from './type'
+
+export const setupDayjs = () => {
+  dayjs.locale(DEFAULT_DAYJS_LOCAL)
+}
+
+/**
+ *
+ * dayjs hook
+ *
+ * 说明:
+ *   - locale: 切换 dayjs 语言配置
+ */
+export const useDayjs = () => {
+  const locale = (key: DayjsLocal) => {
+    const mapkey = DAYJS_LOCAL_MAP[key]
+
+    mapkey ? dayjs.locale(mapkey) : dayjs.locale(DEFAULT_DAYJS_LOCAL)
+  }
+
+  return {
+    locale,
+  }
+}
--- a/src/dayjs/type.ts
+++ b/src/dayjs/type.ts
@ -0,0 +1,6 @@
+export type DayjsLocal = 'zh-cn' | 'en'
+
+export interface DayjsLocalMap {
+  'zh-CN': 'zh-cn'
+  'en-US': 'en'
+}
--- a/src/directives/README.md
+++ b/src/directives/README.md
@ -0,0 +1,38 @@
+## 说明
+
+> 全局自定义指令入口。
+
+## 规范
+
+- 指令应该为全局的通用性指令
+- 如果指令需要与系统的数据进行关联，应该注意数据的管理与指令注册使用时机
+
+## 添加指令说明
+
+- 模板视 modules 中每一个文件包为一个模板的指令（全局），并且每个文件包的名称，也被视为该指令名称
+- 添加文件包后，强制要求 index.ts 为指令的输出文件名
+- modules 包中所有指令都会被自动合并到模板中
+
+```ts
+/**
+ *
+ * 示例添加 demo 指令
+ */
+
+// 1. modules 中添加文件包
+// 2. modules/demo 目录下创建 index.ts 文件
+// 3. 进行自定义指令开发
+
+import type { Directive } from 'vue'
+import type { RoleBindingValue } from './type'
+
+const demoDirective: Directive<HTMLElement, RoleBindingValue> = {
+  beforeMount: (el, binding) => {
+    console.log(el, binding)
+  },
+}
+
+export default demoDirective
+
+// 4. 按照上述步骤执行后，会自动在模板中创建一个 v-demo 的指令供全局使用
+```
--- a/src/directives/README_DIR.md
+++ b/src/directives/README_DIR.md
@ -0,0 +1,215 @@
+## 全局自定义指令
+
+### v-copy
+
+- 参数类型: any（参数会强制被 String 方法强制转换）
+- 默认值: ''
+
+#### 示例
+
+```tsx
+import { NSpace, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui'
+
+const Demo = defineComponent({
+  name: 'Demo',
+  setup() {
+    const dmeoCopyValue = ref('hello copy')
+
+    return {
+      dmeoCopyValue,
+    }
+  },
+  render() {
+    return (
+      <NInputGroup>
+        <NInput v-model:value={this.dmeoCopyValue} />
+        <NButton v-copy={this.dmeoCopyValue}>复制</NButton>
+      </NInputGroup>
+    )
+  },
+})
+```
+
+### v-debounce
+
+- 参数类型: DebounceBindingOptions
+- 默认值:
+
+```ts
+{
+  trigger: 'click',
+  wait: 500,
+  options: null
+}
+```
+
+#### 示例
+
+```tsx
+import { NSpace, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui'
+
+const Demo = defineComponent({
+  name: 'Demo',
+  setup() {
+    const demoValue = ref(0)
+
+    const updateDemoValue = () => {
+      demoValue.value++
+    }
+
+    return {
+      demoValue,
+      updateDemoValue,
+    }
+  },
+  render() {
+    return (
+      <NSpace wrapItem={true} vertical>
+        <NButton
+          v-debounce={{
+            func: this.updateDemoValue,
+            trigger: 'click',
+            wait: 1000,
+            options: {},
+          }}
+        >
+          点击执行
+        </NButton>
+        <p>我执行了{this.demoValue}次</p>
+        <p>该方法将延迟 1s 执行</p>
+      </NSpace>
+    )
+  },
+})
+```
+
+### v-throttle
+
+- 参数类型: ThrottleBindingOptions
+- 默认值:
+
+```ts
+{
+  trigger: 'click',
+  wait: 500,
+  options: null
+}
+```
+
+#### 示例
+
+```tsx
+import { NSpace, NCard, NInput, NInputGroup, NButton, NSwitch } from 'naive-ui'
+
+const Demo = defineComponent({
+  name: 'Demo',
+  setup() {
+    const demoValue = ref(0)
+
+    const updateDemoValue = () => {
+      demoValue.value++
+    }
+
+    return {
+      demoValue,
+      updateDemoValue,
+    }
+  },
+  render() {
+    return (
+      <NSpace wrapItem={true} vertical>
+        <NButton
+          v-throttle={{
+            func: this.updateDemoValue,
+            trigger: 'click',
+            wait: 1000,
+            options: {},
+          }}
+        >
+          点击执行
+        </NButton>
+        <p>我执行了{this.demoValue}次</p>
+        <p>该方法 1s 内仅会执行一次</p>
+      </NSpace>
+    )
+  },
+})
+```
+
+### v-disabled
+
+- 参数类型: boolean
+- 默认值: false
+
+#### Tip
+
+> 该指令基于 css 层面进行禁用操作，如果元素含有 `disabled` 属性方法，会尝试使用原生 `disabled` 属性。对于组件库而言，本身就提供了丰富的 `disabled props`，所以应该是优先使用组件自带属性。
+
+#### 示例
+
+```tsx
+import {
+  NSpace,
+  NCard,
+  NInput,
+  NInputGroup,
+  NButton,
+  NSwitch,
+  NForm,
+  NFormItem,
+} from 'naive-ui'
+
+const Demo = defineComponent({
+  name: 'Demo',
+  setup() {
+    const disabledValue = ref(false)
+
+    return {
+      disabledValue,
+    }
+  },
+  render() {
+    return (
+      <NSpace vertical>
+        <NSwitch v-model:value={this.disabledValue}>
+          {{
+            checked: () => '取消',
+            unchecked: () => '禁用',
+          }}
+        </NSwitch>
+        <p>
+          该指令会强制禁用（通过 css 层面）禁用元素交互。但是 naive ui
+          组件提供了完整的 disabled
+          属性，所以在组件库有禁用需求时，直接调用组件库 disabled 属性即可
+        </p>
+        <NSpace vertical wrapItem={false}>
+          <NCard title="原生表单" bordered={false}>
+            <NSpace vertical wrapItem={false}>
+              <form v-disabled={this.disabledValue}>
+                <input type="text" placeholder="请输入" />
+                <button>提交</button>
+              </form>
+            </NSpace>
+          </NCard>
+          <NCard title="文本内容" bordered={false}>
+            <NSpace vertical wrapItem={false}>
+              <p v-disabled={this.disabledValue}>我是可以被禁用的文本内容</p>
+            </NSpace>
+          </NCard>
+          <NCard title="naive 组件" bordered={false}>
+            <NSpace vertical wrapItem={false} justify="start">
+              <NButton v-disabled={this.disabledValue}>按钮</NButton>
+              <NForm v-disabled={this.disabledValue}>
+                <NFormItem label="名称">
+                  <NInput />
+                </NFormItem>
+              </NForm>
+              <NSwitch v-disabled={this.disabledValue}></NSwitch>
+            </NSpace>
+          </NCard>
+        </NSpace>
+      </NSpace>
+    )
+  },
+})
+```
--- a/src/directives/helper/combine.ts
+++ b/src/directives/helper/combine.ts
@ -0,0 +1,33 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-24
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import type { DirectiveModules } from '@/directives/type'
+
+export const combineDirective = <
+  T extends Record<string, DirectiveModules>,
+  K extends keyof T,
+>(
+  directiveModules: T,
+) => {
+  const directives = Object.keys(directiveModules).reduce((pre, curr) => {
+    if (directiveModules[curr]?.default) {
+      const value = directiveModules[curr]?.default
+
+      pre[curr] = value
+
+      return pre
+    } else {
+      throw new Error('directiveModules[curr]?.default is undefined')
+    }
+  }, {} as Record<K, T[K]['default']>)
+
+  return directives
+}
--- a/src/directives/index.ts
+++ b/src/directives/index.ts
@ -0,0 +1,49 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-24
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { combineDirective } from './helper/combine'
+import { forIn } from 'lodash-es'
+import { isValueType } from '@/utils/hook'
+
+import type { App } from 'vue'
+import type { DirectiveModules } from '@/directives/type'
+
+/**
+ *
+ * 初始化全局自定义指令
+ *
+ * 该方法会将 modules 下每个文件夹视为一个指令
+ * 并且会将文件夹名称识别为指令名称
+ * 每个文件下的 index.ts 文件视为每个指令的入口(也就是指令的处理逻辑, 需要暴露出一个 Directive 类型的对象)
+ */
+export const setupDirective = (app: App<Element>) => {
+  // 获取 modules 包下所有的 index.ts 文件
+  const directiveRawModules: Record<string, DirectiveModules> =
+    import.meta.glob('./modules/**/index.ts', {
+      eager: true,
+    })
+  // 将所有的包提取出来(./modules/[file-name]/index.ts)
+  const directivesModules = combineDirective(directiveRawModules)
+  // 提取文件名(./modules/copy/index.ts => copy)
+  const reg = /(?<=modules\/).*(?=\/index\.ts)/
+
+  forIn(directivesModules, (value, key) => {
+    const dname = key.match(reg)?.[0]
+
+    if (isValueType<string>(dname, 'String')) {
+      app.directive(dname, value)
+    } else {
+      throw new Error(
+        'directiveName is not string, please check your directive file name',
+      )
+    }
+  })
+}
--- a/src/directives/modules/copy/index.ts
+++ b/src/directives/modules/copy/index.ts
@ -0,0 +1,54 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-24
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * directive name: copy
+ */
+
+import ClipboardJS from 'clipboard'
+
+import type { Directive } from 'vue'
+import type { CopyElement } from './type'
+
+let clipboard: ClipboardJS | null
+
+const copyDirective: Directive<CopyElement, string> = {
+  mounted: (el, binding) => {
+    const value = binding.value
+
+    clipboard = new ClipboardJS(el, {
+      text: () => String(value),
+    })
+
+    clipboard?.on('success', () => {
+      window.$message.success('复制成功')
+    })
+    clipboard?.on('error', () => {
+      window.$message.error('复制失败')
+    })
+  },
+  updated: (el, binding) => {
+    /** 其实这块代码写的挺蠢的, 但是我目前不知道怎么去优化, 阿巴阿巴阿巴 */
+    const value = binding.value
+
+    clipboard = new ClipboardJS(el, {
+      text: () => String(value),
+    })
+  },
+  beforeUnmount: () => {
+    clipboard?.destroy()
+
+    clipboard = null
+  },
+}
+
+export default copyDirective
--- a/src/directives/modules/copy/type.ts
+++ b/src/directives/modules/copy/type.ts
@ -0,0 +1,3 @@
+export interface CopyElement extends Element, UnknownObjectKey {
+  $value: string
+}
--- a/src/directives/modules/debounce/index.ts
+++ b/src/directives/modules/debounce/index.ts
@ -0,0 +1,49 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-24
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * directive name: debounce
+ */
+
+import { debounce } from 'lodash-es'
+import { on, off } from '@use-utils/element'
+
+import type { Directive } from 'vue'
+import type { DebounceBindingOptions } from './type'
+import type { AnyFunc } from '@/types/modules/utils'
+
+let debounceFunction: AnyFunc | null
+
+const debounceDirective: Directive<HTMLElement, DebounceBindingOptions> = {
+  beforeMount: (el, binding) => {
+    const { func, trigger = 'click', wait = 500, options } = binding.value
+
+    if (typeof func !== 'function') {
+      throw new Error('debounce directive value must be a function')
+    }
+
+    debounceFunction = debounce(func, wait, Object.assign({}, {}, options))
+
+    on(el, trigger, debounceFunction)
+  },
+  beforeUnmount: (el, binding) => {
+    const { trigger = 'click' } = binding.value
+
+    if (debounceFunction) {
+      off(el, trigger, debounceFunction)
+    }
+
+    debounceFunction = null
+  },
+}
+
+export default debounceDirective
--- a/src/directives/modules/debounce/type.ts
+++ b/src/directives/modules/debounce/type.ts
@ -0,0 +1,9 @@
+import type { DebounceSettings } from 'lodash-es'
+import type { AnyFunc } from '@/types/modules/utils'
+
+export interface DebounceBindingOptions {
+  func: AnyFunc
+  trigger: string
+  wait: number
+  options: DebounceSettings
+}
--- a/src/directives/modules/disabled/index.ts
+++ b/src/directives/modules/disabled/index.ts
@ -0,0 +1,43 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-26
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * directive name: disabled
+ */
+
+import { addClass, removeClass } from '@/utils/element'
+
+import type { Directive } from 'vue'
+
+const updateElementDisabledType = (el: HTMLElement, value: boolean) => {
+  if (el) {
+    const classes = 'ray-template__directive--disabled'
+
+    value ? addClass(el, classes) : removeClass(el, classes)
+    el?.setAttribute('disabled', value ? 'disabled' : '')
+  }
+}
+
+const disabledDirective: Directive<HTMLElement, boolean> = {
+  mounted: (el, binding) => {
+    const value = binding.value
+
+    updateElementDisabledType(el, value)
+  },
+  updated: (el, binding) => {
+    const value = binding.value
+
+    updateElementDisabledType(el, value)
+  },
+}
+
+export default disabledDirective
--- a/src/directives/modules/throttle/index.ts
+++ b/src/directives/modules/throttle/index.ts
@ -0,0 +1,49 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-24
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * directive name: throttle
+ */
+
+import { throttle } from 'lodash-es'
+import { on, off } from '@use-utils/element'
+
+import type { Directive } from 'vue'
+import type { ThrottleBindingOptions } from './type'
+import type { AnyFunc } from '@/types/modules/utils'
+
+let throttleFunction: AnyFunc | null
+
+const throttleDirective: Directive<HTMLElement, ThrottleBindingOptions> = {
+  beforeMount: (el, binding) => {
+    const { func, trigger = 'click', wait = 500, options } = binding.value
+
+    if (typeof func !== 'function') {
+      throw new Error('throttle directive value must be a function')
+    }
+
+    throttleFunction = throttle(func, wait, Object.assign({}, {}, options))
+
+    on(el, trigger, throttleFunction)
+  },
+  beforeUnmount: (el, binding) => {
+    const { trigger = 'click' } = binding.value
+
+    if (throttleFunction) {
+      off(el, trigger, throttleFunction)
+    }
+
+    throttleFunction = null
+  },
+}
+
+export default throttleDirective
--- a/src/directives/modules/throttle/type.ts
+++ b/src/directives/modules/throttle/type.ts
@ -0,0 +1,9 @@
+import type { ThrottleSettings } from 'lodash-es'
+import type { AnyFunc } from '@/types/modules/utils'
+
+export interface ThrottleBindingOptions {
+  func: AnyFunc
+  trigger: string
+  wait: number
+  options: ThrottleSettings
+}
--- a/src/directives/type.ts
+++ b/src/directives/type.ts
@ -0,0 +1,5 @@
+import type { Directive } from 'vue'
+
+export interface DirectiveModules extends Object {
+  default: Directive
+}
--- a/src/error/PageResult/index.scss
+++ b/src/error/PageResult/index.scss
@ -0,0 +1,5 @@
+.error-page {
+  width: 100%;
+  height: 100vh;
+  @include flexCenter;
+}
--- a/src/error/PageResult/index.tsx
+++ b/src/error/PageResult/index.tsx
@ -0,0 +1,50 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-02
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * 错误页面
+ *
+ * 基于 NResult 组件实现, 继承该组件所有 props 与 slots
+ * 可以当作一个组件使用, 也可以当作一个页面调用
+ */
+
+import './index.scss'
+
+import { NResult, NButton } from 'naive-ui'
+
+import { redirectRouterToDashboard } from '@/router/helper/routerCopilot'
+import { resultProps } from 'naive-ui'
+
+const PageResult = defineComponent({
+  name: 'PageResult',
+  props: {
+    ...resultProps,
+  },
+  render() {
+    return (
+      <div class="error-page">
+        <NResult {...this.$props} status="500" title="小调皮你走错地方了">
+          {{
+            ...this.$slots,
+            footer: () => (
+              <NButton onClick={redirectRouterToDashboard.bind(this, false)}>
+                返回首页
+              </NButton>
+            ),
+          }}
+        </NResult>
+      </div>
+    )
+  },
+})
+
+export default PageResult
--- a/src/error/README.md
+++ b/src/error/README.md
@ -0,0 +1,10 @@
+## 异常
+
+### 说明
+
+- 当前系统使用 Error404 作为系统的默认异常页重定向页面（可自行替换或者更改）
+- 提供公共的入口组件，虽然没啥大用，强迫症患者典型
+
+### 更改与替换
+
+> 如果需要自己更改，或者补充更多的异常页面，可以在当前文件的 views 下补充（建议这么做哈）。也可以直接摒弃现有的东西，全部重新折腾一次，因为这个东西，一般不会太复杂。
--- a/src/error/index.ts
+++ b/src/error/index.ts
@ -0,0 +1,3 @@
+import PageResult from './PageResult/index'
+
+export default PageResult
--- a/src/error/views/Error404/index.tsx
+++ b/src/error/views/Error404/index.tsx
@ -0,0 +1,24 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-06-02
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import PageResult from '@/error/index'
+
+const ErrorPage404 = defineComponent({
+  name: 'ErrorPage404',
+  setup() {
+    return {}
+  },
+  render() {
+    return <PageResult status="404" />
+  },
+})
+
+export default ErrorPage404
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`export type CollapseToggleText = [string \| number, string \| number]`