ray template3.0

2025-04-05 19:42:07 +08:00 · 2022-11-22 15:54:07 +08:00 · 2022-11-22 15:54:07 +08:00 · a127427566
commit a127427566
parent f2f82c0fc2
45 changed files with 1124 additions and 64 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,6 +1,4 @@
 {
-  "i18n-ally.localesPaths": [
-    "locales",
-    "src/language"
-  ]
-}
+  "i18n-ally.localesPaths": ["locales", "src/language"],
+  "i18n-ally.keystyle": "nested"
+}
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@ -144,6 +144,7 @@ declare global {
  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
+  const useDialog: typeof import('naive-ui')['useDialog']
  const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
  const useDraggable: typeof import('@vueuse/core')['useDraggable']
@ -176,6 +177,7 @@ declare global {
  const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
+  const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
@ -183,6 +185,7 @@ declare global {
  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
  const useMemoize: typeof import('@vueuse/core')['useMemoize']
  const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useMessage: typeof import('naive-ui')['useMessage']
  const useMounted: typeof import('@vueuse/core')['useMounted']
  const useMouse: typeof import('@vueuse/core')['useMouse']
  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
@ -190,6 +193,7 @@ declare global {
  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
  const useNetwork: typeof import('@vueuse/core')['useNetwork']
+  const useNotification: typeof import('naive-ui')['useNotification']
  const useNow: typeof import('@vueuse/core')['useNow']
  const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
  const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
--- a/locales/en-US.json
+++ b/locales/en-US.json
@ -1,3 +1,21 @@
 {
-  "Test": "Test"
+  "GlobalMenuOptions": {
+    "Dashboard": "Home",
+    "Rely": "Rely",
+    "RelyAbout": "Rely About"
+  },
+  "LayoutHeaderTooltipOptions": {
+    "Reload": "Reload Current Page",
+    "Lock": "Lock",
+    "Setting": "Setting"
+  },
+  "LayoutHeaderSettingOptions": {
+    "Title": "Configuration",
+    "ThemeOptions": {
+      "Title": "Theme",
+      "Dark": "Dark",
+      "Light": "Light",
+      "PrimaryColorConfig": "Primary Color"
+    }
+  }
 }
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@ -1,3 +1,21 @@
 {
-  "Test": "测试"
+  "GlobalMenuOptions": {
+    "Dashboard": "首页",
+    "Rely": "依赖项",
+    "RelyAbout": "关于"
+  },
+  "LayoutHeaderTooltipOptions": {
+    "Reload": "刷新当前页面",
+    "Lock": "锁屏",
+    "Setting": "设置"
+  },
+  "LayoutHeaderSettingOptions": {
+    "Title": "项目配置",
+    "ThemeOptions": {
+      "Title": "主题",
+      "Dark": "暗色",
+      "Light": "明亮",
+      "PrimaryColorConfig": "主题色"
+    }
+  }
 }
--- a/package.json
+++ b/package.json
@ -1,5 +1,5 @@
 {
-  "name": "vue3-ts-template",
+  "name": "ray-template",
  "private": true,
  "version": "0.0.0",
  "type": "module",
@ -15,6 +15,7 @@
    "amfe-flexible": "^2.2.1",
    "axios": "^0.27.2",
    "crypto-js": "^4.1.1",
+    "naive-ui": "^2.34.0",
    "pinia": "^2.0.17",
    "sass": "^1.54.3",
    "scrollreveal": "^4.0.9",
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,50 +1,28 @@
-import { defineComponent } from 'vue'
-import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue' // 动画路由组件
-import DraggableComponent from '@/components/DraggableComponent/index.vue'
-import RayScrollReveal from '@/components/RayScrollReveal/index'
-import R from '@/icons/ray.svg' // 使用 `vite-svg-loader` 作为 `svg` 使用插件, 故而不需要使用 `RayIcon` 作为组件引入
-import RayIcon from '@/components/RayIcon/index' // `svg` 图标组件
+import RayGlobalProvider from '@/components/RayGlobalProvider/index'
+import { useSetting } from '@/store'
+import { RouterView } from 'vue-router'

 const App = defineComponent({
  name: 'App',
  setup() {
-    const { x, y } = useMouse()
+    const settingStore = useSetting()
    const { height: windowHeight } = useWindowSize()
-    const { t } = useI18n()
+    const { settingState } = $(storeToRefs(settingStore))
+
+    // const naiveTheme = computed(() =>
+    //   settingState.themeValue ? darkTheme : undefined,
+    // )

    return {
-      x,
-      y,
      windowHeight,
-      ray: t,
+      // naiveTheme,
    }
  },
  render() {
    return (
-      <div
-        class="app-wrapper"
-        style={`height: ${this.windowHeight}px;font-size: 22px; color: #FDD192;padding: 20px;`}
-      >
-        组件形式使用 svg: <R style="width: 24px; height: 24px;" />
-        <br />
-        icon componet 形式使用 svg: <RayIcon name="ray" size="24" />
-        <br />
-        hello! Welcome to this template!
-        <h1>
-          当前鼠标位置: x: {this.x}, y: {this.y}
-        </h1>
-        <h1>测试 i18n {this.ray('Test')}</h1>
-        <DraggableComponent />
-        {Array.from({ length: 10 }, (_, i) => i).map((_, idx) => (
-          <RayScrollReveal>
-            <div
-              style={`width: 100%; height: 300px;border: 1px solid #FDD192;margin: 20px;background: #e7f5ee;`}
-            >
-              {idx}
-            </div>
-          </RayScrollReveal>
-        ))}
-      </div>
+      <RayGlobalProvider>
+        <RouterView />
+      </RayGlobalProvider>
    )
  },
 })
--- a/src/components/RayGlobalProvider/index.tsx
+++ b/src/components/RayGlobalProvider/index.tsx
@ -0,0 +1,49 @@
+import {
+  NDialogProvider,
+  NLoadingBarProvider,
+  NMessageProvider,
+  NNotificationProvider,
+  NConfigProvider,
+  NGlobalStyle,
+  darkTheme,
+} from 'naive-ui'
+import { useSetting } from '@/store'
+
+const GlobalProvider = defineComponent({
+  name: 'GlobalProvider',
+  setup() {
+    const settingStore = useSetting()
+
+    const modelPrimaryColorOverride = computed(
+      () => settingStore.primaryColorOverride,
+    )
+    const modelThemeValue = computed(() =>
+      settingStore.themeValue ? darkTheme : null,
+    )
+
+    return {
+      modelPrimaryColorOverride,
+      modelThemeValue,
+    }
+  },
+  render() {
+    return (
+      <NConfigProvider
+        themeOverrides={this.modelPrimaryColorOverride}
+        theme={this.modelThemeValue}
+      >
+        <NLoadingBarProvider>
+          <NMessageProvider>
+            <NDialogProvider>
+              <NNotificationProvider>
+                {this.$slots.default?.()}
+              </NNotificationProvider>
+            </NDialogProvider>
+          </NMessageProvider>
+        </NLoadingBarProvider>
+      </NConfigProvider>
+    )
+  },
+})
+
+export default GlobalProvider
--- a/src/components/RayIcon/index.tsx
+++ b/src/components/RayIcon/index.tsx
@ -21,11 +21,11 @@ const RayIcon = defineComponent({
    },
    width: {
      type: [Number, String],
-      default: 14,
+      default: 0,
    },
    height: {
      type: [Number, String],
-      default: 14,
+      default: 0,
    },
    customClassName: {
      type: String,
--- a/src/icons/dark.svg
+++ b/src/icons/dark.svg
@ -0,0 +1,3 @@
+<svg t="1669094703884" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24094" width="200" height="200">
+  <path d="M335.22 240.91c0-57.08 10.68-111.66 30.15-161.87-167.51 64.86-286.3 227.51-286.3 417.92 0 247.42 200.58 448 448 448 190.34 0 352.95-118.71 417.85-286.13-50.16 19.42-104.69 30.08-161.71 30.08-247.41 0-447.99-200.57-447.99-448z" fill="#ffd93d" p-id="24095"></path>
+</svg>
--- a/src/icons/dashboard.svg
+++ b/src/icons/dashboard.svg
@ -0,0 +1,4 @@
+<svg t="1669019958375" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7190" width="200" height="200">
+  <path d="M924.8 385.6c-22.6-53.4-54.9-101.3-96-142.4-41.1-41.1-89-73.4-142.4-96C631.1 123.8 572.5 112 512 112s-119.1 11.8-174.4 35.2c-53.4 22.6-101.3 54.9-142.4 96-41.1 41.1-73.4 89-96 142.4C75.8 440.9 64 499.5 64 560c0 132.7 58.3 257.7 159.9 343.1l1.7 1.4c5.8 4.8 13.1 7.5 20.6 7.5h531.7c7.5 0 14.8-2.7 20.6-7.5l1.7-1.4C901.7 817.7 960 692.7 960 560c0-60.5-11.9-119.1-35.2-174.4zM761.4 836H262.6C184.5 765.5 140 665.6 140 560c0-99.4 38.7-192.8 109-263 70.3-70.3 163.7-109 263-109 99.4 0 192.8 38.7 263 109 70.3 70.3 109 163.7 109 263 0 105.6-44.5 205.5-122.6 276z" p-id="7191" fill="currentColor"></path>
+  <path d="M623.5 421.5c-3.1-3.1-8.2-3.1-11.3 0L527.7 506c-18.7-5-39.4-0.2-54.1 14.5-21.9 21.9-21.9 57.3 0 79.2 21.9 21.9 57.3 21.9 79.2 0 14.7-14.7 19.5-35.4 14.5-54.1l84.5-84.5c3.1-3.1 3.1-8.2 0-11.3l-28.3-28.3zM490 320h44c4.4 0 8-3.6 8-8v-80c0-4.4-3.6-8-8-8h-44c-4.4 0-8 3.6-8 8v80c0 4.4 3.6 8 8 8zM750 538v44c0 4.4 3.6 8 8 8h80c4.4 0 8-3.6 8-8v-44c0-4.4-3.6-8-8-8h-80c-4.4 0-8 3.6-8 8zM762.7 340.8l-31.1-31.1c-3.1-3.1-8.2-3.1-11.3 0l-56.6 56.6c-3.1 3.1-3.1 8.2 0 11.3l31.1 31.1c3.1 3.1 8.2 3.1 11.3 0l56.6-56.6c3.1-3.1 3.1-8.2 0-11.3zM304.1 309.7c-3.1-3.1-8.2-3.1-11.3 0l-31.1 31.1c-3.1 3.1-3.1 8.2 0 11.3l56.6 56.6c3.1 3.1 8.2 3.1 11.3 0l31.1-31.1c3.1-3.1 3.1-8.2 0-11.3l-56.6-56.6zM262 530h-80c-4.4 0-8 3.6-8 8v44c0 4.4 3.6 8 8 8h80c4.4 0 8-3.6 8-8v-44c0-4.4-3.6-8-8-8z" p-id="7192" fill="currentColor"></path>
+</svg>
--- a/src/icons/language.svg
+++ b/src/icons/language.svg
@ -0,0 +1,3 @@
+<svg t="1669090001868" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7911" width="200" height="200">
+  <path d="M918.954667 880.896c-0.618667-1.322667-154.688-334.378667-177.194667-382.421333-135.402667-288.917333-174.976-369.642667-196.821333-391.957334a31.829333 31.829333 0 0 0-13.013334-12.138666 32 32 0 0 0-42.944 14.293333L109.909333 865.706667a32 32 0 0 0 57.216 28.672l99.349334-198.421334h496.725333a49853.44 49853.44 0 0 1 97.536 211.605334 32.021333 32.021333 0 0 0 58.218667-26.666667zM521.002667 187.626667c39.850667 76.650667 126.698667 260.117333 212.458666 444.330666H298.517333L521.002667 187.626667z" fill="currentColor" p-id="7912"></path>
+</svg>
--- a/src/icons/light.svg
+++ b/src/icons/light.svg
@ -0,0 +1,6 @@
+<svg t="1669092652781" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22947" width="200" height="200">
+  <path d="M512 511.4m-212 0a212 212 0 1 0 424 0 212 212 0 1 0-424 0Z" fill="#ffd93d" p-id="22948"></path>
+  <path d="M512 511.4m-198.3 0a198.3 198.3 0 1 0 396.6 0 198.3 198.3 0 1 0-396.6 0Z" fill="#ffd93d" p-id="22949"></path>
+  <path d="M511.7 130.2c12.9-0.2 24.2 11.3 24.5 24.3l0.4 79.6c0.2 12.9-11.3 24.2-24.3 24.5-12.9 0.2-24.2-11.3-24.5-24.3l-0.4-79.6c0.9-14.9 11.4-24.3 24.3-24.5zM901.5 510c-0.2 12.9-9.6 23.4-24.5 24.3l-79.6-0.4c-12.9-0.2-24.5-11.5-24.3-24.5 0.2-12.9 11.5-24.5 24.5-24.3l79.6 0.4c12.9 0.3 24.5 11.6 24.3 24.5zM250.9 510c-0.2 12.9-9.6 23.4-24.5 24.3l-79.6-0.4c-12.9-0.2-24.5-11.5-24.3-24.5 0.2-12.9 11.5-24.5 24.5-24.3l79.6 0.4c12.9 0.3 24.5 11.6 24.3 24.5zM512.3 893.8c-12.9 0.2-24.2-11.3-24.5-24.3l-0.4-79.6c-0.2-12.9 11.3-24.2 24.3-24.5 12.9-0.2 24.2 11.3 24.5 24.3l0.4 79.6c-0.9 14.9-11.4 24.3-24.3 24.5z" fill="#ffd93d" p-id="22950"></path>
+  <path d="M781.2 242.3c9.3 9 9.1 25.1 0.1 34.5l-56 56.5c-9 9.3-25.1 9.1-34.5 0.1-9.3-9-9.1-25.1-0.1-34.5l56-56.5c11.1-9.9 25.1-9.1 34.5-0.1zM788.2 786.5c-9.3 9-23.3 9.8-34.5-0.1l-56-56.5c-9-9.3-9.2-25.5 0.1-34.5 9.3-9 25.5-9.2 34.5 0.1l56 56.5c9 9.3 9.2 25.5-0.1 34.5zM328.1 326.4c-9.3 9-23.3 9.8-34.5-0.1l-56-56.5c-9-9.3-9.2-25.5 0.1-34.5 9.3-9 25.5-9.2 34.5 0.1l56 56.5c9 9.4 9.3 25.5-0.1 34.5zM241.6 782.6c-9.3-9-9.1-25.1-0.1-34.5l56-56.5c9-9.3 25.1-9.1 34.5-0.1 9.3 9 9.1 25.1 0.1 34.5l-56 56.5c-11.1 9.9-25.2 9.1-34.5 0.1z" fill="#ffd93d" p-id="22951"></path>
+</svg>
--- a/src/icons/lock.svg
+++ b/src/icons/lock.svg
@ -0,0 +1,5 @@
+<svg t="1669083065525" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6583" width="200" height="200">
+  <path d="M512 768c-17.664 0-32-14.304-32-32l0-96c0-17.696 14.336-32 32-32s32 14.304 32 32l0 96C544 753.696 529.664 768 512 768z" p-id="6584" fill="currentColor"></path>
+  <path d="M832 960 192 960c-52.928 0-96-43.072-96-96L96 512c0-52.928 43.072-96 96-96l640 0c52.928 0 96 43.072 96 96l0 352C928 916.928 884.928 960 832 960zM192 480c-17.632 0-32 14.368-32 32l0 352c0 17.664 14.368 32 32 32l640 0c17.664 0 32-14.336 32-32L864 512c0-17.632-14.336-32-32-32L192 480z" p-id="6585" fill="currentColor"></path>
+  <path d="M736 480c-17.696 0-32-14.336-32-32L704 318.016C704 209.248 601.76 128 510.336 128 416.768 128 320 198.912 320 317.568L320 448c0 17.664-14.336 32-32 32s-32-14.336-32-32L256 317.568C256 158.848 385.312 64 510.336 64 632.224 64 768 168.32 768 318.016L768 448C768 465.664 753.696 480 736 480z" p-id="6586" fill="currentColor"></path>
+</svg>
--- a/src/icons/reload.svg
+++ b/src/icons/reload.svg
@ -0,0 +1,3 @@
+<svg t="1669082370283" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3070" width="200" height="200">
+  <path d="M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-0.7-8.9-4.9-10.3l-56.7-19.5c-4.1-1.4-8.6 0.7-10.1 4.8-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4-31.6 31.6-68.4 56.4-109.3 73.8-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27-40.9-17.3-77.7-42.1-109.3-73.8-31.6-31.6-56.4-68.4-73.7-109.4-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27 40.9 17.3 77.7 42.1 109.3 73.8 9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47c-5.3 4.1-3.5 12.5 3 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l0.8-180.9c-0.1-6.6-7.8-10.3-13-6.2z" p-id="3071" fill="currentColor"></path>
+</svg>
--- a/src/icons/rely.svg
+++ b/src/icons/rely.svg
@ -0,0 +1,6 @@
+<svg t="1669019135871" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6207" width="200" height="200">
+  <path d="M432.541809 908.452357c-13.634532 0-27.871791-3.208065-42.314735-9.532097l-196.059328-85.830831c-51.599192-22.587438-92.018763-79.652108-92.018763-129.911792L102.148983 424.346661c0-42.561351 28.876678-72.28635 70.224388-72.28635 13.636578 0 27.873838 3.207042 42.317805 9.533121l196.059328 85.837994c51.597145 22.589484 92.015693 79.649038 92.015693 129.902582l0 258.830977C502.766197 878.726336 473.889519 908.452357 432.541809 908.452357zM172.373371 403.225621c-17.083074 0-19.059078 12.054547-19.059078 21.12104l0 258.830977c0 29.924543 28.678156 68.729338 61.372789 83.041298l196.063421 85.831854c7.823176 3.426029 15.357779 5.236258 21.792329 5.236258 17.083074 0 19.059078-12.054547 19.059078-21.123087L451.60191 577.334008c0-29.919427-28.677133-68.720128-61.370743-83.033112l-196.062398-85.839017C186.34457 405.03585 178.808944 403.225621 172.373371 403.225621z" p-id="6208" fill="currentColor"></path>
+  <path d="M620.67563 908.452357 620.67563 908.452357c-38.881542-0.001023-66.035996-29.727045-66.035996-72.288396L554.639634 577.334008c0-49.874921 36.876885-106.759489 83.953064-129.503493l177.675632-85.839017c13.631462-6.589069 27.149337-9.93221 40.172955-9.93221 38.883589 0 66.040089 29.724998 66.040089 72.28635l0 258.830977c0 49.875944-36.876885 106.764606-83.95511 129.511679l-177.676655 85.832877C647.216099 905.109216 633.697201 908.452357 620.67563 908.452357zM856.441285 403.225621c-5.174859 0-11.366885 1.672082-17.910928 4.835122L660.849608 493.901807c-29.322839 14.166651-55.044664 53.152571-55.044664 83.432201l0 258.830977c0 21.122063 11.192923 21.122063 14.870686 21.123087 5.174859 0 11.367909-1.672082 17.913998-4.835122l177.678702-85.833901c29.323862-14.168698 55.047734-53.159734 55.047734-83.441411L871.316064 424.346661C871.316064 403.225621 860.120071 403.225621 856.441285 403.225621z" p-id="6209" fill="currentColor"></path>
+  <path d="M520.643356 416.470273c-0.004093 0-0.005117 0-0.00921 0-33.103956-0.001023-67.656913-5.960759-94.799086-16.35141l-208.099549-79.613222c-15.587-5.957689-28.178783-13.105482-37.417191-21.24179-15.425318-13.582343-18.788925-27.503401-18.894326-36.788881-0.130983-11.576663 4.572132-33.008788 37.553291-46.482661l224.342488-91.591021c22.662139-9.252735 49.824779-11.193947 68.62189-11.193947 33.093722 0 67.638493 5.954619 94.776573 16.338107l208.109782 79.622432c15.585977 5.957689 28.179806 13.106506 37.420261 21.242813 15.426341 13.583366 18.789948 27.505447 18.895349 36.791951 0.130983 11.576663-4.573155 33.008788-37.555337 46.479591l-224.345558 91.589998C566.596967 414.525991 539.438421 416.470273 520.643356 416.470273zM217.706859 263.614933c3.816932 2.592035 9.69378 5.810333 18.303878 9.101285l208.111828 79.617315c21.533432 8.242731 49.420573 12.970406 76.513628 12.971429 0.001023 0 0.005117 0 0.00614 0 19.794835 0 37.744649-2.696412 49.252751-7.399527l224.349651-91.592045c0.209778-0.084934 0.413416-0.170892 0.61296-0.254803-3.816932-2.592035-9.695826-5.810333-18.305925-9.101285L568.433802 177.331801c-21.527292-8.236592-49.40727-12.960173-76.493162-12.960173-19.803022 0-37.765115 2.696412-49.282427 7.398504l-224.337371 91.588975C218.111065 263.446088 217.906403 263.531022 217.706859 263.614933z" p-id="6210" fill="currentColor"></path>
+  <path d="M679.315168 563.803853c0 61.606103 0 123.212206 0 184.818309 22.472827-23.835871 44.945655-47.670719 67.418482-71.506591 18.933211-20.080338 42.513256-4.065596 67.984371 2.351558 0-61.211107 0-122.422214 0-183.633321C769.583055 518.490831 724.448088 541.147854 679.315168 563.803853z" p-id="6211" fill="currentColor"></path>
+</svg>
--- a/src/icons/setting.svg
+++ b/src/icons/setting.svg
@ -0,0 +1,4 @@
+<svg t="1669083002473" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4842" width="200" height="200">
+  <path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56c10.1-8.6 13.8-22.6 9.3-35.2l-0.9-2.6c-18.1-50.5-44.9-96.9-79.7-137.9l-1.8-2.1c-8.6-10.1-22.5-13.9-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85c-2.4-13.1-12.7-23.3-25.8-25.7l-2.7-0.5c-52.1-9.4-106.9-9.4-159 0l-2.7 0.5c-13.1 2.4-23.4 12.6-25.8 25.7l-15.8 85.4c-35.9 13.6-69.2 32.9-99 57.4l-81.9-29.1c-12.5-4.4-26.5-0.7-35.1 9.5l-1.8 2.1c-34.8 41.1-61.6 87.5-79.7 137.9l-0.9 2.6c-4.5 12.5-0.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5c-10.1 8.6-13.8 22.6-9.3 35.2l0.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1c8.6 10.1 22.5 13.9 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4c2.4 13.1 12.7 23.3 25.8 25.7l2.7 0.5c26.1 4.7 52.8 7.1 79.5 7.1 26.7 0 53.5-2.4 79.5-7.1l2.7-0.5c13.1-2.4 23.4-12.6 25.8-25.7l15.7-85c36.2-13.6 69.7-32.9 99.7-57.6l81.3 28.9c12.5 4.4 26.5 0.7 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l0.9-2.6c4.5-12.3 0.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9c-11.3 26.1-25.6 50.7-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97c-28.1 3.2-56.8 3.2-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9z" p-id="4843" fill="currentColor"></path>
+  <path d="M512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m79.2 255.2C570 602.3 541.9 614 512 614c-29.9 0-58-11.7-79.2-32.8C411.7 560 400 531.9 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8C612.3 444 624 472.1 624 502c0 29.9-11.7 58-32.8 79.2z" p-id="4844" fill="currentColor"></path>
+</svg>
--- a/src/language/index.ts
+++ b/src/language/index.ts
@ -20,6 +20,17 @@ export const setupI18n = (app: App<Element>) => {
  app.use(i18n)
 }

+export const useLanguageOptions = () => [
+  {
+    key: 'zh-CN',
+    label: '中文(简体)',
+  },
+  {
+    key: 'en-US',
+    label: 'English(US)',
+  },
+]
+
 /**
 *
 * 注册 `vue-i18n`
--- a/src/layout/Menu/index.tsx
+++ b/src/layout/Menu/index.tsx
@ -0,0 +1,46 @@
+import { NMenu, NLayoutSider } from 'naive-ui'
+import { useMenu } from '@/store'
+
+const LayoutMenu = defineComponent({
+  name: 'LayoutMenu',
+  setup() {
+    const menuStore = useMenu()
+    const { menuModelValueChange, setupAppRoutes, collapsedMenu } = menuStore
+    const modelMenuKey = ref(menuStore.menuKey)
+    const modelMenuOptions = computed(() => menuStore.options)
+    const modelCollapsed = computed(() => menuStore.collapsed)
+
+    setupAppRoutes()
+
+    return {
+      modelMenuKey,
+      menuModelValueChange,
+      modelMenuOptions,
+      modelCollapsed,
+      collapsedMenu,
+    }
+  },
+  render() {
+    return (
+      <NLayoutSider
+        bordered
+        showTrigger
+        collapseMode="width"
+        collapsedWidth={64}
+        onUpdateCollapsed={this.collapsedMenu.bind(this)}
+      >
+        <NMenu
+          v-model:value={this.modelMenuKey}
+          options={this.modelMenuOptions as NaiveMenuOptions[]}
+          indent={24}
+          collapsed={this.modelCollapsed}
+          collapsedIconSize={22}
+          collapsedWidth={64}
+          onUpdateValue={this.menuModelValueChange.bind(this)}
+        />
+      </NLayoutSider>
+    )
+  },
+})
+
+export default LayoutMenu
--- a/src/layout/SiderBar/Components/SettingDrawer/hook.ts
+++ b/src/layout/SiderBar/Components/SettingDrawer/hook.ts
@ -0,0 +1,9 @@
+import { getCache } from '@/utils/cache'
+
+export const useSwatchesColorOptions = () => [
+  '#FFFFFF',
+  '#18A058',
+  '#2080F0',
+  '#F0A020',
+  'rgba(208, 48, 80, 1)',
+]
--- a/src/layout/SiderBar/Components/SettingDrawer/index.scss
+++ b/src/layout/SiderBar/Components/SettingDrawer/index.scss
@ -0,0 +1,3 @@
+.setting-drawer__space {
+  width: 100%;
+}
--- a/src/layout/SiderBar/Components/SettingDrawer/index.tsx
+++ b/src/layout/SiderBar/Components/SettingDrawer/index.tsx
@ -0,0 +1,129 @@
+import './index.scss'
+import {
+  NDrawer,
+  NDrawerContent,
+  NDivider,
+  NSpace,
+  NSwitch,
+  NColorPicker,
+  NTooltip,
+} from 'naive-ui'
+import RayIcon from '@/components/RayIcon/index'
+import { useSwatchesColorOptions } from './hook'
+import { useSetting } from '@/store'
+
+import type { PropType } from 'vue'
+
+const SettingDrawer = defineComponent({
+  name: 'SettingDrawer',
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    placement: {
+      type: String as PropType<NaiveDrawerPlacement>,
+      default: 'right',
+    },
+    width: {
+      type: Number,
+      default: 280,
+    },
+  },
+  emits: ['update:show'],
+  setup(props, { emit }) {
+    const { t } = useI18n()
+    const settingStore = useSetting()
+
+    const { changeTheme, changePrimaryColor } = settingStore
+    const { themeValue, primaryColorOverride } = storeToRefs(settingStore)
+
+    const modelShow = computed({
+      get: () => props.show,
+      set: (bool) => {
+        emit('update:show', bool)
+      },
+    })
+
+    const handleRailStyle = () => ({
+      backgroundColor: '#000000',
+    })
+
+    return {
+      modelShow,
+      ray: t,
+      handleRailStyle,
+      changePrimaryColor,
+      changeTheme,
+      themeValue,
+      primaryColorOverride,
+    }
+  },
+  render() {
+    return (
+      <NDrawer
+        v-model:show={this.modelShow}
+        placement={this.placement}
+        width={this.width}
+      >
+        <NDrawerContent title={this.ray('LayoutHeaderSettingOptions.Title')}>
+          <NSpace class="setting-drawer__space" vertical>
+            <NDivider titlePlacement="center">
+              {this.ray('LayoutHeaderSettingOptions.ThemeOptions.Title')}
+            </NDivider>
+            <NSpace justify="center">
+              <NTooltip>
+                {{
+                  trigger: () => (
+                    <NSwitch
+                      v-model:value={this.themeValue}
+                      railStyle={this.handleRailStyle.bind(this)}
+                      onUpdateValue={this.changeTheme.bind(this)}
+                    >
+                      {{
+                        'checked-icon': () =>
+                          h(
+                            RayIcon,
+                            {
+                              name: 'dark',
+                            },
+                            {},
+                          ),
+                        'unchecked-icon': () =>
+                          h(
+                            RayIcon,
+                            {
+                              name: 'light',
+                            },
+                            {},
+                          ),
+                      }}
+                    </NSwitch>
+                  ),
+                  default: () =>
+                    this.themeValue
+                      ? this.ray('LayoutHeaderSettingOptions.ThemeOptions.Dark')
+                      : this.ray(
+                          'LayoutHeaderSettingOptions.ThemeOptions.Light',
+                        ),
+                }}
+              </NTooltip>
+            </NSpace>
+            <NDivider titlePlacement="center">
+              {this.ray(
+                'LayoutHeaderSettingOptions.ThemeOptions.PrimaryColorConfig',
+              )}
+            </NDivider>
+            <NColorPicker
+              swatches={useSwatchesColorOptions()}
+              v-model:value={this.primaryColorOverride.common.primaryColor}
+              onUpdateValue={this.changePrimaryColor.bind(this)}
+            />
+          </NSpace>
+        </NDrawerContent>
+      </NDrawer>
+    )
+  },
+})
+
+export default SettingDrawer
--- a/src/layout/SiderBar/index.scss
+++ b/src/layout/SiderBar/index.scss
@ -0,0 +1,16 @@
+.layout-header {
+  height: $layoutHeaderHeight;
+  padding: 0 $layoutRouterViewContainer;
+  display: flex;
+  align-items: center;
+
+  > .layout-header__method {
+    width: 100%;
+
+    & .layout-header__method--icon {
+      cursor: pointer;
+      outline: none;
+      border: none;
+    }
+  }
+}
--- a/src/layout/SiderBar/index.tsx
+++ b/src/layout/SiderBar/index.tsx
@ -0,0 +1,144 @@
+import './index.scss'
+import { NLayoutHeader, NSpace, NTooltip, NDropdown } from 'naive-ui'
+import RayIcon from '@/components/RayIcon/index'
+import { useMenu, useSetting } from '@/store'
+import { useLanguageOptions } from '@/language/index'
+import SettingDrawer from './Components/SettingDrawer/index'
+
+import type { IconEventMapOptions, IconEventMap } from './type'
+
+const SiderBar = defineComponent({
+  name: 'SiderBar',
+  setup() {
+    const menuStore = useMenu()
+    const settingStore = useSetting()
+
+    const { t } = useI18n()
+    const { changeReloadLog } = menuStore
+    const { updateLocale } = settingStore
+    const modelDrawerPlacement = ref(settingStore.drawerPlacement)
+    const showSettings = ref(false)
+
+    const leftIconOptions = [
+      {
+        name: 'reload',
+        size: 18,
+        tooltip: 'LayoutHeaderTooltipOptions.Reload',
+      },
+    ]
+    const rightIconOptions = [
+      {
+        name: 'language',
+        size: 18,
+        tooltip: '',
+        dropdown: {
+          methodName: 'handleSelect', // 默认为 `handleSelect`
+          switch: true,
+          options: useLanguageOptions(),
+          handleSelect: (key: string | number) => updateLocale(String(key)),
+        },
+      },
+      // {
+      //   name: 'lock',
+      //   size: 18,
+      //   tooltip: 'LayoutHeaderTooltipOptions.Lock',
+      // },
+      {
+        name: 'setting',
+        size: 18,
+        tooltip: 'LayoutHeaderTooltipOptions.Setting',
+      },
+    ]
+    const iconEventMap: IconEventMapOptions = {
+      reload: () => {
+        changeReloadLog(false)
+
+        setTimeout(() => changeReloadLog(true))
+      },
+      // lock: () => {},
+      setting: () => {
+        showSettings.value = true
+      },
+    }
+
+    const handleIconClick = (key: IconEventMap) => {
+      iconEventMap[key]?.()
+    }
+
+    return {
+      leftIconOptions,
+      rightIconOptions,
+      t,
+      handleIconClick,
+      modelDrawerPlacement,
+      showSettings,
+    }
+  },
+  render() {
+    return (
+      <NLayoutHeader class="layout-header" bordered>
+        <NSpace
+          class="layout-header__method"
+          align="center"
+          justify="space-between"
+        >
+          <NSpace align="center">
+            {this.leftIconOptions.map((curr) => (
+              <NTooltip>
+                {{
+                  trigger: () => (
+                    <RayIcon
+                      customClassName="layout-header__method--icon"
+                      name={curr.name}
+                      size={curr.size}
+                      onClick={this.handleIconClick.bind(this, curr.name)}
+                    />
+                  ),
+                  default: () => this.t(curr.tooltip),
+                }}
+              </NTooltip>
+            ))}
+          </NSpace>
+          <NSpace align="center">
+            {this.rightIconOptions.map((curr) =>
+              curr.dropdown?.switch ? (
+                <NDropdown
+                  options={curr.dropdown.options}
+                  onSelect={
+                    curr.dropdown[curr.dropdown.methodName ?? 'handleSelect']
+                  }
+                >
+                  <RayIcon
+                    customClassName="layout-header__method--icon"
+                    name={curr.name}
+                    size={curr.size}
+                  />
+                </NDropdown>
+              ) : (
+                <NTooltip>
+                  {{
+                    trigger: () => (
+                      <RayIcon
+                        customClassName="layout-header__method--icon"
+                        name={curr.name}
+                        size={curr.size}
+                        onClick={this.handleIconClick.bind(this, curr.name)}
+                      />
+                    ),
+                    default: () => this.t(curr.tooltip),
+                  }}
+                </NTooltip>
+              ),
+            )}
+          </NSpace>
+        </NSpace>
+        <SettingDrawer
+          v-model:show={this.showSettings}
+          placement={this.modelDrawerPlacement}
+        />
+      </NLayoutHeader>
+    )
+  },
+})
+
+export default SiderBar
--- a/src/layout/SiderBar/type.ts
+++ b/src/layout/SiderBar/type.ts
@ -0,0 +1,5 @@
+export interface IconEventMapOptions {
+  [propName: string]: (...args: unknown[]) => unknown
+}
+
+export type IconEventMap = keyof IconEventMapOptions
--- a/src/layout/index.scss
+++ b/src/layout/index.scss
@ -0,0 +1,12 @@
+.layout {
+  box-sizing: border-box;
+
+  > .layout-full {
+    height: 100%;
+  }
+
+  & .layout-content__router-view {
+    height: calc(100% - $layoutHeaderHeight);
+    padding: $layoutRouterViewContainer;
+  }
+}
--- a/src/layout/index.tsx
+++ b/src/layout/index.tsx
@ -0,0 +1,41 @@
+import './index.scss'
+import { NLayout, NLayoutContent } from 'naive-ui'
+import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue'
+import LayoutMenu from './Menu/index'
+import SiderBar from './SiderBar/index'
+import { useMenu } from '@/store'
+
+const Layout = defineComponent({
+  name: 'Layout',
+  props: {},
+  setup() {
+    const menuStore = useMenu()
+    const { height: windowHeight } = useWindowSize()
+    const modelReloadRoute = computed(() => menuStore.reloadRouteLog)
+
+    return {
+      windowHeight,
+      modelReloadRoute,
+    }
+  },
+  render() {
+    return (
+      <div class="layout" style={[`height: ${this.windowHeight}px`]}>
+        <NLayout class="layout-full" hasSider>
+          <LayoutMenu />
+          <NLayout>
+            <SiderBar />
+            <NLayoutContent
+              class="layout-content__router-view"
+              nativeScrollbar={false}
+            >
+              {this.modelReloadRoute ? <RayTransitionComponent /> : ''}
+            </NLayoutContent>
+          </NLayout>
+        </NLayout>
+      </div>
+    )
+  },
+})
+
+export default Layout
--- a/src/main.ts
+++ b/src/main.ts
@ -9,7 +9,11 @@ import 'virtual:svg-icons-register' // `vite-plugin-svg-icons` 脚本, 如果不

 import App from './App'

-import { setupRouter, setupRouterLoadingBar } from './router/index'
+import {
+  setupRouter,
+  setupRouterLoadingBar,
+  permissionRouter,
+} from './router/index'
 import { setupStore } from './store/index'
 import { setupI18n } from './language/index'

@ -20,11 +24,13 @@ import { setupI18n } from './language/index'
 const setupTemplate = () => {
  const app = createApp(App)

+  setupStore(app)
+
  setupRouter(app)

  setupRouterLoadingBar()

-  setupStore(app)
+  permissionRouter()

  setupI18n(app)

@ -42,11 +48,13 @@ const setupWujieTemplate = () => {
  window.__WUJIE_MOUNT = () => {
    instance = createApp(App)

+    setupStore(instance)
+
    setupRouter(instance)

    setupRouterLoadingBar()

-    setupStore(instance)
+    permissionRouter()

    setupI18n(instance)

--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -31,3 +31,11 @@ export const setupRouterLoadingBar = () => {
    window?.$loadingBar?.error()
  })
 }
+
+/**
+ *
+ * 路由权限守卫
+ */
+export const permissionRouter = () => {
+  // router.beforeEach()
+}
--- a/src/router/modules/dashboard.ts
+++ b/src/router/modules/dashboard.ts
@ -0,0 +1,9 @@
+export default {
+  path: '/dashboard',
+  name: 'dashboard',
+  component: () => import('@/views/dashboard/index'),
+  meta: {
+    i18nKey: 'Dashboard',
+    icon: 'dashboard',
+  },
+}
--- a/src/router/modules/demo.ts
+++ b/src/router/modules/demo.ts
@ -1,5 +0,0 @@
-export default {
-  path: '/',
-  name: 'dmeo',
-  component: () => import('@/App'),
-}
--- a/src/router/modules/index.ts
+++ b/src/router/modules/index.ts
@ -1,6 +1,7 @@
-import demo from './demo'
+import dashboard from './dashboard'
+import reyl from './rely'

-const routes = [demo]
+const routes = [dashboard, reyl]

 export default routes

--- a/src/router/modules/rely.ts
+++ b/src/router/modules/rely.ts
@ -0,0 +1,19 @@
+export default {
+  path: '/rely',
+  name: 'rely',
+  component: () => import('@/views/rely/index'),
+  meta: {
+    i18nKey: 'Rely',
+    icon: 'rely',
+  },
+  children: [
+    {
+      path: '/rely-about',
+      name: 'rely-about',
+      component: () => import('@/views/rely/views/rely-about/index'),
+      meta: {
+        i18nKey: 'RelyAbout',
+      },
+    },
+  ],
+}
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@ -1,8 +1,13 @@
+import Layout from '@/layout/index'
+import childrenRoutes from './modules/index'
+
 export const constantRoutes = [
  {
    path: '/',
-    name: 'demo-active',
-    component: () => import('@/App'),
+    name: 'layout',
+    redirect: '/dashboard',
+    component: Layout,
+    children: childrenRoutes,
  },
 ]

--- a/src/store/index.ts
+++ b/src/store/index.ts
@ -1,6 +1,7 @@
 import type { App } from 'vue'

 export { useSetting } from './modules/setting' // import { useSetting } from '@/store' 即可使用
+export { useMenu } from './modules/menu'

 const store = createPinia()

--- a/src/store/modules/menu.ts
+++ b/src/store/modules/menu.ts
@ -0,0 +1,99 @@
+import { getCache, setCache } from '@/utils/cache'
+import { NEllipsis } from 'naive-ui'
+import RayIcon from '@/components/RayIcon/index'
+
+import type { MenuOption } from 'naive-ui'
+import type { RouteRecordRaw } from 'vue-router'
+
+export const useMenu = defineStore('menu', () => {
+  const router = useRouter()
+  const { t } = useI18n()
+
+  const cacheMenuKey = getCache('menuKey') === 'no' ? '' : getCache('menuKey')
+
+  const menuState = reactive({
+    menuKey: cacheMenuKey as string | null, // 当前菜单 `key`
+    options: [] as RouteRecordRaw[], // 菜单列表
+    collapsed: false, // 是否折叠菜单
+    reloadRouteLog: true, // 刷新路由开关
+  })
+
+  /**
+   *
+   * @param key 菜单更新后的 `key`
+   * @param item 菜单当前 `item`
+   *
+   * 修改 `menu key` 后的回调函数
+   */
+  const menuModelValueChange = (key: string, item: MenuOption) => {
+    menuState.menuKey = key
+
+    router.push(`${item.path}`)
+    setCache('menuKey', key)
+  }
+
+  /**
+   *
+   * 获取菜单列表
+   * 缓存菜单
+   */
+  const setupAppRoutes = () => {
+    const layout = router.getRoutes().find((route) => route.name === 'layout')
+
+    const resolveRoutes = (routes: RouteRecordRaw[], index: number) => {
+      return routes.map((curr) => {
+        if (curr.children?.length) {
+          curr.children = resolveRoutes(
+            curr.children as RouteRecordRaw[],
+            index++,
+          )
+        }
+
+        const route = {
+          ...curr,
+          key: curr.path,
+          label: () =>
+            h(NEllipsis, null, {
+              default: () => t(`GlobalMenuOptions.${curr!.meta!.i18nKey}`),
+            }),
+        }
+        const expandIcon = {
+          icon: () =>
+            h(
+              RayIcon,
+              {
+                name: curr?.meta?.icon as string,
+                size: 20,
+              },
+              {},
+            ),
+        }
+
+        return curr.meta?.icon ? Object.assign(route, expandIcon) : route
+      })
+    }
+
+    menuState.options = resolveRoutes(layout?.children as RouteRecordRaw[], 0)
+  }
+
+  /**
+   *
+   * @param collapsed 折叠菜单开关
+   */
+  const collapsedMenu = (collapsed: boolean) =>
+    (menuState.collapsed = collapsed)
+
+  /**
+   *
+   * @param bool 刷新页面开关
+   */
+  const changeReloadLog = (bool: boolean) => (menuState.reloadRouteLog = bool)
+
+  return {
+    ...toRefs(menuState),
+    menuModelValueChange,
+    setupAppRoutes,
+    collapsedMenu,
+    changeReloadLog,
+  }
+})
--- a/src/store/modules/setting.ts
+++ b/src/store/modules/setting.ts
@ -1,15 +1,44 @@
-import { setCache } from '@/utils/cache'
+import { setCache, getCache } from '@/utils/cache'

 export const useSetting = defineStore('setting', () => {
-  const settingState = reactive({})
+  const cachePrimaryColor: string =
+    getCache('primaryColor') === 'no' ? '#18A058' : getCache('primaryColor')
+  const cacheTheme = getCache('theme') === 'no' ? false : getCache('theme')
+
+  const settingState = reactive({
+    drawerPlacement: 'right' as NaiveDrawerPlacement,
+    primaryColorOverride: {
+      common: {
+        primaryColor: cachePrimaryColor, // 主题色
+      },
+    },
+    themeValue: cacheTheme, // `true` 为黑夜主题, `false` 为白色主题
+  })
+  const { locale } = useI18n()

  const updateLocale = (key: string) => {
    // TODO: 修改语言
+    locale.value = key
+
    setCache('localeLanguage', key, 'localStorage')
  }

+  const changeTheme = (bool: boolean) => {
+    settingState.themeValue = bool
+
+    setCache('theme', bool)
+  }
+
+  const changePrimaryColor = (value: string) => {
+    settingState.primaryColorOverride.common.primaryColor = value
+
+    setCache('primaryColor', value)
+  }
+
  return {
-    settingState,
+    ...toRefs(settingState),
    updateLocale,
+    changeTheme,
+    changePrimaryColor,
  }
 })
--- a/src/styles/setting.scss
+++ b/src/styles/setting.scss
@ -0,0 +1,2 @@
+$layoutRouterViewContainer: 18px;
+$layoutHeaderHeight: 64px;
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@ -6,10 +6,27 @@ import type {
  DialogApi,
  LoadingBarApi,
  NotificationApi,
+  MenuOption,
+  MenuDividerOption,
+  MenuGroupOption,
 } from 'naive-ui'

 export global {
-  interface Window {
+  const __APP_INFO__: {
+    pkg: {
+      name: string
+      version: string
+      dependencies: Recordable<string>
+      devDependencies: Recordable<string>
+    }
+  }
+
+  declare type NaiveMenuOptions =
+    | MenuOption
+    | MenuDividerOption
+    | MenuGroupOption
+
+  declare interface Window {
    // 是否存在无界
    __POWERED_BY_WUJIE__?: boolean
    // 子应用公共加载路径
@ -69,4 +86,6 @@ export global {
  declare type CipherParams = CryptoJS.lib.CipherParams

  declare type VoidFunc = (...args: unknown[]) => void
+
+  declare type NaiveDrawerPlacement = 'top' | 'right' | 'bottom' | 'left'
 }
--- a/src/views/dashboard/index.tsx
+++ b/src/views/dashboard/index.tsx
@ -0,0 +1,13 @@
+import { defineComponent } from 'vue'
+
+const Dashboard = defineComponent({
+  name: 'Dashboard',
+  setup() {
+    return {}
+  },
+  render() {
+    return <div>Dashboard</div>
+  },
+})
+
+export default Dashboard
--- a/src/views/rely/index.tsx
+++ b/src/views/rely/index.tsx
@ -0,0 +1,13 @@
+import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue'
+
+const Rely = defineComponent({
+  name: 'Rely',
+  setup() {
+    return {}
+  },
+  render() {
+    return <RayTransitionComponent />
+  },
+})
+
+export default Rely
--- a/src/views/rely/views/rely-about/index.scss
+++ b/src/views/rely/views/rely-about/index.scss
@ -0,0 +1,9 @@
+.rely-about {
+  & .n-card {
+    margin-top: 18px;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+}
--- a/src/views/rely/views/rely-about/index.tsx
+++ b/src/views/rely/views/rely-about/index.tsx
@ -0,0 +1,126 @@
+import './index.scss'
+import { NCard, NDescriptions, NDescriptionsItem, NTag } from 'naive-ui'
+
+interface RelyDataOptions {
+  name: string
+  relyVersion: string
+  relyAddress: string
+}
+
+interface TemplateOptions {
+  name: string
+  label: string
+  url?: string
+}
+
+const RelyAbout = defineComponent({
+  name: 'RelyAbout',
+  setup() {
+    const { pkg } = __APP_INFO__
+    const { dependencies, devDependencies, name, version } = pkg
+
+    const columns = [
+      {
+        title: '依赖名称',
+        key: 'name',
+      },
+      {
+        title: '依赖版本',
+        key: 'relyVersion',
+      },
+      {
+        title: '依赖地址',
+        key: 'relyAddress',
+      },
+    ]
+    const relyData = ref<RelyDataOptions[]>([])
+    const templateOptions = [
+      {
+        name: '项目名称',
+        label: name,
+      },
+      {
+        name: '版本信息',
+        label: version,
+      },
+      {
+        name: '项目地址',
+        label: 'GitHub',
+        url: 'https://github.com/XiaoDaiGua-Ray/ray-template',
+      },
+    ]
+
+    const handleGetRelyData = () => {
+      const _arrayFrom = (obj: object) =>
+        Object.keys(obj).reduce((pre, curr) => {
+          pre.push({
+            name: curr,
+            relyVersion: obj[curr],
+            relyAddress: '',
+          })
+
+          return pre
+        }, [] as RelyDataOptions[])
+
+      const arrDependencies = _arrayFrom(dependencies)
+      const arrDevDependencies = _arrayFrom(devDependencies)
+
+      relyData.value = [...arrDependencies, ...arrDevDependencies]
+    }
+
+    const handleTagClick = (item: TemplateOptions) => {
+      if (item.url) {
+        window.open(item.url)
+      }
+    }
+
+    onBeforeMount(() => {
+      handleGetRelyData()
+    })
+
+    return {
+      columns,
+      relyData,
+      templateOptions,
+      handleTagClick,
+    }
+  },
+  render() {
+    return (
+      <div class="rely-about">
+        <NCard title="关于项目">
+          ray-template 是一个基于 vue3、vite3、TypeScript 的中后台解决方案,
+          它可以帮助你快速搭建企业级中后台项目,
+          相信不管是从新技术使用还是其他方面, 都能帮助到你,持续更新中.
+        </NCard>
+        <NCard title="项目信息">
+          <NDescriptions bordered labelPlacement="left">
+            {this.templateOptions.map((curr) => (
+              <NDescriptionsItem key={curr.name} label={curr.name}>
+                <NTag
+                  bordered={false}
+                  type="info"
+                  onClick={this.handleTagClick.bind(this, curr)}
+                  style={[curr.url ? 'cursor: pointer' : '']}
+                >
+                  {curr.label}
+                </NTag>
+              </NDescriptionsItem>
+            ))}
+          </NDescriptions>
+        </NCard>
+        <NCard title="项目依赖">
+          <NDescriptions bordered labelPlacement="left">
+            {this.relyData.map((curr) => (
+              <NDescriptionsItem key={curr.name} label={curr.name}>
+                {curr.relyVersion}
+              </NDescriptionsItem>
+            ))}
+          </NDescriptions>
+        </NCard>
+      </div>
+    )
+  },
+})
+
+export default RelyAbout
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -3,8 +3,27 @@
 /// <reference types="vue/macros-global" />
 /// <reference types="vite-svg-loader" />

+import 'vue-router'
+
 declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
 }
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    i18nKey: string
+    icon?: string
+  }
+}
+
+declare module '*.json' {
+  const jsonValue: any
+  export default jsonValue
+}
+
+declare module 'virtual:*' {
+  const result: any
+  export default result
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,5 +1,12 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+const pkg = require('./package.json')
+
+const { dependencies, devDependencies, name, version } = pkg
+
+const __APP_INFO__ = {
+  pkg: { dependencies, devDependencies, name, version },
+}

 import {
  useAliasOptions,
@ -19,11 +26,16 @@ import ViteInspect from 'vite-plugin-inspect'
 import viteSvgLoader from 'vite-svg-loader'
 import viteEslintPlugin from 'vite-plugin-eslint'

+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
+
 // https://vitejs.dev/config/
 export default defineConfig(async ({ mode }) => {
  const { buildOptions } = useEnvBuildOutput(mode)

  return {
+    define: {
+      __APP_INFO__: JSON.stringify(__APP_INFO__),
+    },
    resolve: {
      alias: useAliasOptions(),
    },
@ -32,8 +44,17 @@ export default defineConfig(async ({ mode }) => {
      vueJsx(),
      ViteInspect(), // 仅适用于开发模式(检查 `Vite` 插件的中间状态)
      VueI18nPlugin(),
-      await useAutoImport(),
-      await useViteComponents(),
+      await useAutoImport([
+        {
+          'naive-ui': [
+            'useDialog',
+            'useMessage',
+            'useNotification',
+            'useLoadingBar',
+          ],
+        },
+      ]),
+      await useViteComponents([NaiveUiResolver()]),
      useViteCompression(),
      useVueI18nPlugin(),
      useHTMLTitlePlugin(),
@ -62,7 +83,8 @@ export default defineConfig(async ({ mode }) => {
    css: {
      preprocessorOptions: {
        scss: {
-          additionalData: '@import "./src/styles/mixins.scss";', // 全局 `mixin`
+          additionalData:
+            '@import "./src/styles/mixins.scss"; @import "./src/styles/setting.scss";', // 全局 `mixin`
        },
      },
    },
--- a/yarn.lock
+++ b/yarn.lock
@ -406,6 +406,21 @@
    "@babel/helper-validator-identifier" "^7.19.1"
    to-fast-properties "^2.0.0"

+"@css-render/plugin-bem@^0.15.10":
+  version "0.15.11"
+  resolved "https://registry.yarnpkg.com/@css-render/plugin-bem/-/plugin-bem-0.15.11.tgz#250b853704af1fbb935b8fcd987839dcc9c95ce2"
+  integrity sha512-Bn8qadYPIz5DhZ4obTGHOJzeziQH6kY0+Fk5AEvwuuy378SLwwvXuuoechLjBHcgKkPCM03Oo4dDSGP/6NMdyw==
+
+"@css-render/vue3-ssr@^0.15.10":
+  version "0.15.11"
+  resolved "https://registry.yarnpkg.com/@css-render/vue3-ssr/-/vue3-ssr-0.15.11.tgz#d6646f69c7bd4b54485a40441ac60102822cd492"
+  integrity sha512-n+SuqLPbY30FUTM8slX75OaEG+c8XlTOFrAklekX2XQGvBbz9XdBE6hTEgGlV5kPcTMqTJeCG7Vzhs9/29VC7w==
+
+"@emotion/hash@~0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
 "@esbuild/android-arm@0.15.14":
  version "0.15.14"
  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.15.14.tgz#5d0027f920eeeac313c01fd6ecb8af50c306a466"
@ -570,6 +585,11 @@
    "@jridgewell/resolve-uri" "^3.0.3"
    "@jridgewell/sourcemap-codec" "^1.4.10"

+"@juggle/resize-observer@^3.3.1":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
+  integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
+
 "@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1":
  version "5.1.1-v1"
  resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz#dbf733a965ca47b1973177dc0bb6c889edcfb129"
@ -644,11 +664,33 @@
  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
  integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==

+"@types/katex@^0.14.0":
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/@types/katex/-/katex-0.14.0.tgz#b84c0afc3218069a5ad64fe2a95321881021b5fe"
+  integrity sha512-+2FW2CcT0K3P+JMR8YG846bmDwplKUTsWgT2ENwdQ1UdVfRk3GQrh6Mi4sTopy30gI8Uau5CEqHTDZ6YvWIUPA==
+
+"@types/lodash-es@^4.17.6":
+  version "4.17.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash-es/-/lodash-es-4.17.6.tgz#c2ed4c8320ffa6f11b43eb89e9eaeec65966a0a0"
+  integrity sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*", "@types/lodash@^4.14.181":
+  version "4.14.189"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.189.tgz#975ff8c38da5ae58b751127b19ad5e44b5b7f6d2"
+  integrity sha512-kb9/98N6X8gyME9Cf7YaqIMvYGnBSWqEci6tiettE6iJWH1XdJz/PO8LB0GtLCG7x8dU3KWhZT+lA1a35127tA==
+
 "@types/node@*":
  version "18.11.7"
  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.7.tgz#8ccef136f240770c1379d50100796a6952f01f94"
  integrity sha512-LhFTglglr63mNXUSRYD8A+ZAIu5sFqNJ4Y2fPuY7UlrySJH87rRRlhtVmMHplmfk5WkoJGmDjE9oiTfyX94CpQ==

+"@types/node@~17.0.5":
+  version "17.0.45"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.45.tgz#2c0fafd78705e7a18b7906b5201a522719dc5190"
+  integrity sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==
+
 "@types/scrollreveal@^0.0.8":
  version "0.0.8"
  resolved "https://registry.yarnpkg.com/@types/scrollreveal/-/scrollreveal-0.0.8.tgz#d0313ac67b57a32b3beb224e20af63ab13cd2696"
@ -1149,6 +1191,11 @@ assign-symbols@^1.0.0:
  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
  integrity sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==

+async-validator@^4.0.7:
+  version "4.2.5"
+  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-4.2.5.tgz#c96ea3332a521699d0afaaceed510a54656c6339"
+  integrity sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==
+
 asynckit@^0.4.0:
  version "0.4.0"
  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@ -1461,6 +1508,15 @@ crypto-js@^4.1.1:
  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.1.1.tgz#9e485bcf03521041bd85844786b83fb7619736cf"
  integrity sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==

+css-render@^0.15.10:
+  version "0.15.11"
+  resolved "https://registry.yarnpkg.com/css-render/-/css-render-0.15.11.tgz#52a77cd8335394485be2417675121c2efe954bb5"
+  integrity sha512-hnLrHPUndVUTF5nmNPRey6hpixK02IPUGdEsm2xRjvJuewToyrVFx9Nmai8rgfVzhTFo5SJVh2PHAtzaIV8JKw==
+  dependencies:
+    "@emotion/hash" "~0.8.0"
+    "@types/node" "~17.0.5"
+    csstype "~3.0.5"
+
 css-select@^4.1.3:
  version "4.3.0"
  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
@ -1502,6 +1558,21 @@ csstype@^2.6.8:
  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.20.tgz#9229c65ea0b260cf4d3d997cb06288e36a8d6dda"
  integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==

+csstype@~3.0.5:
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33"
+  integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==
+
+date-fns-tz@^1.3.3:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-1.3.7.tgz#e8e9d2aaceba5f1cc0e677631563081fdcb0e69a"
+  integrity sha512-1t1b8zyJo+UI8aR+g3iqr5fkUHWpd58VBx8J/ZSQ+w7YrGlw80Ag4sA86qkfCXRBLmMc4I2US+aPMd4uKvwj5g==
+
+date-fns@^2.28.0:
+  version "2.29.3"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
+  integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==
+
 de-indent@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
@ -2142,6 +2213,11 @@ etag@^1.8.1:
  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
  integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==

+evtd@^0.2.2, evtd@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/evtd/-/evtd-0.2.4.tgz#0aac39ba44d6926e6668948ac27618e0795b9d07"
+  integrity sha512-qaeGN5bx63s/AXgQo8gj6fBkxge+OoLddLniox5qtLAEY5HSnuSlISXVPxnSae1dWblvTh4/HoMIB+mbMsvZzw==
+
 expand-brackets@^2.1.4:
  version "2.1.4"
  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
@ -2524,6 +2600,11 @@ he@^1.1.1, he@^1.2.0:
  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==

+highlight.js@^11.5.0:
+  version "11.6.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.6.0.tgz#a50e9da05763f1bb0c1322c8f4f755242cff3f5a"
+  integrity sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==
+
 html-tags@^3.1.0:
  version "3.2.0"
  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.2.0.tgz#dbb3518d20b726524e4dd43de397eb0a95726961"
@ -2970,6 +3051,11 @@ locate-path@^6.0.0:
  dependencies:
    p-locate "^5.0.0"

+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.merge@^4.6.2:
  version "4.6.2"
  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
@ -3152,6 +3238,30 @@ muggle-string@^0.1.0:
  resolved "https://registry.yarnpkg.com/muggle-string/-/muggle-string-0.1.0.tgz#1fda8a281c8b27bb8b70466dbc9f27586a8baa6c"
  integrity sha512-Tr1knR3d2mKvvWthlk7202rywKbiOm4rVFLsfAaSIhJ6dt9o47W4S+JMtWhd/PW9Wrdew2/S2fSvhz3E2gkfEg==

+naive-ui@^2.34.0:
+  version "2.34.0"
+  resolved "https://registry.yarnpkg.com/naive-ui/-/naive-ui-2.34.0.tgz#115cf42d4217019bd7322f2da1b0cac15e006f8f"
+  integrity sha512-WJtGRc0BHMbCBYCbTYGlEtG3TC3yTyAK5rTQdsIAm6ZYGFbnA6KVDtNXx2Ucd5dyH9V+iwaBXTO3oPRs7PiPoQ==
+  dependencies:
+    "@css-render/plugin-bem" "^0.15.10"
+    "@css-render/vue3-ssr" "^0.15.10"
+    "@types/katex" "^0.14.0"
+    "@types/lodash" "^4.14.181"
+    "@types/lodash-es" "^4.17.6"
+    async-validator "^4.0.7"
+    css-render "^0.15.10"
+    date-fns "^2.28.0"
+    date-fns-tz "^1.3.3"
+    evtd "^0.2.4"
+    highlight.js "^11.5.0"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    seemly "^0.3.6"
+    treemate "^0.3.11"
+    vdirs "^0.1.8"
+    vooks "^0.2.12"
+    vueuc "^0.4.47"
+
 nanoid@^3.3.4:
  version "3.3.4"
  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
@ -3709,6 +3819,11 @@ scule@^0.3.2:
  resolved "https://registry.yarnpkg.com/scule/-/scule-0.3.2.tgz#472445cecd8357165a94a067f78cee40e700b596"
  integrity sha512-zIvPdjOH8fv8CgrPT5eqtxHQXmPNnV/vHJYffZhE43KZkvULvpCTvOt1HPlFaCZx287INL9qaqrZg34e8NgI4g==

+seemly@^0.3.6:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/seemly/-/seemly-0.3.6.tgz#7ef97e8083dea00804965e2662f572a5df9cb18e"
+  integrity sha512-lEV5VB8BUKTo/AfktXJcy+JeXns26ylbMkIUco8CYREsQijuz4mrXres2Q+vMLdwkuLxJdIPQ8IlCIxLYm71Yw==
+
 semver@^6.3.0:
  version "6.3.0"
  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
@ -4078,6 +4193,11 @@ traverse@^0.6.6:
  resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137"
  integrity sha512-kdf4JKs8lbARxWdp7RKdNzoJBhGUcIalSYibuGyHJbmk40pOysQ0+QPvlkCOICOivDWU2IJo2rkrxyTK2AH4fw==

+treemate@^0.3.11:
+  version "0.3.11"
+  resolved "https://registry.yarnpkg.com/treemate/-/treemate-0.3.11.tgz#7d52f8f69ab9ce326f8d139e0a3d1ffb25e48222"
+  integrity sha512-M8RGFoKtZ8dF+iwJfAJTOH/SM4KluKOKRJpjCMhI8bG3qB74zrFoArKZ62ll0Fr3mqkMJiQOmWYkdYgDeITYQg==
+
 tsconfig-paths@^3.14.1:
  version "3.14.1"
  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"
@ -4256,6 +4376,13 @@ vary@^1:
  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
  integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==

+vdirs@^0.1.4, vdirs@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/vdirs/-/vdirs-0.1.8.tgz#a103bc43baca738f8dea912a7e9737154a19dbc2"
+  integrity sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==
+  dependencies:
+    evtd "^0.2.2"
+
 vite-plugin-compression@^0.5.1:
  version "0.5.1"
  resolved "https://registry.yarnpkg.com/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz#a75b0d8f48357ebb377b65016da9f20885ef39b6"
@ -4319,6 +4446,13 @@ vite@^3.2.4:
  optionalDependencies:
    fsevents "~2.3.2"

+vooks@^0.2.12, vooks@^0.2.4:
+  version "0.2.12"
+  resolved "https://registry.yarnpkg.com/vooks/-/vooks-0.2.12.tgz#2b6e23330b77bac81c7f7a344c4ca3e9f4f6c373"
+  integrity sha512-iox0I3RZzxtKlcgYaStQYKEzWWGAduMmq+jS7OrNdQo1FgGfPMubGL3uGHOU9n97NIvfFDBGnpSvkWyb/NSn/Q==
+  dependencies:
+    evtd "^0.2.2"
+
 vue-demi@*:
  version "0.13.6"
  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.6.tgz#f9433cbd75e68a970dec066647f4ba6c08ced48f"
@ -4381,6 +4515,19 @@ vue@^3.2.37:
    "@vue/server-renderer" "3.2.37"
    "@vue/shared" "3.2.37"

+vueuc@^0.4.47:
+  version "0.4.49"
+  resolved "https://registry.yarnpkg.com/vueuc/-/vueuc-0.4.49.tgz#913e6fd629bdfd5bbed79bf108aec605720af2db"
+  integrity sha512-WarAC44a/Yx78CxkAgROYLq+LkAeCGA/6wHidVoFmHLbzyF3SiP2nzRNGD/8zJeJInXv18EnWK6A//eGgMMq8w==
+  dependencies:
+    "@css-render/vue3-ssr" "^0.15.10"
+    "@juggle/resize-observer" "^3.3.1"
+    css-render "^0.15.10"
+    evtd "^0.2.4"
+    seemly "^0.3.6"
+    vdirs "^0.1.4"
+    vooks "^0.2.4"
+
 webpack-sources@^3.2.3:
  version "3.2.3"
  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"