├── src
    ├── assets
    │   ├── images
    │   │   └── .gitkeep
    │   ├── styles
    │   │   ├── index.scss
    │   │   └── transition
    │   │   │   └── fade.scss
    │   └── svg
    │   │   └── vue.svg
    ├── hooks
    │   ├── business
    │   │   └── .gitkeep
    │   └── common
    │   │   ├── useLoading.ts
    │   │   ├── useBoolean.ts
    │   │   └── useReload.ts
    ├── components
    │   ├── business
    │   │   └── .gitkeep
    │   ├── common
    │   │   ├── NaiveProviderContent.vue
    │   │   └── NaiveProvider.vue
    │   └── HelloWorld.vue
    ├── store
    │   ├── index.ts
    │   └── modules
    │   │   ├── setting.ts
    │   │   └── route.ts
    ├── App.vue
    ├── views
    │   ├── example
    │   │   ├── KeepAlive.vue
    │   │   ├── UnKeep.vue
    │   │   ├── AboutAuthor.vue
    │   │   ├── AboutProject.vue
    │   │   └── HomePage.vue
    │   └── redirect
    │   │   └── index.vue
    ├── main.ts
    ├── settings
    │   └── index.ts
    ├── layouts
    │   ├── components
    │   │   ├── LayoutFooter.vue
    │   │   ├── LayoutLogo.vue
    │   │   ├── LayoutContent.vue
    │   │   ├── LayoutMenu.vue
    │   │   └── LayoutHeader.vue
    │   └── PcLayout.vue
    ├── utils
    │   ├── index.ts
    │   ├── cipher.ts
    │   ├── router.ts
    │   ├── http
    │   │   ├── axiosCancel.ts
    │   │   └── index.ts
    │   ├── is.ts
    │   └── storage
    │   │   └── index.ts
    └── router
    │   ├── modules
    │       ├── constant.ts
    │       └── example.ts
    │   ├── index.ts
    │   └── guard.ts
├── .prettierignore
├── typings
    ├── vite-env.d.ts
    ├── window.d.ts
    ├── components.d.ts
    └── auto-imports.d.ts
├── commitlint.config.cjs
├── vercel.json
├── .env.production
├── .env.development
├── tsconfig.node.json
├── .editorconfig
├── .gitignore
├── prettier.config.js
├── public
    ├── loading.svg
    ├── loading.css
    └── vite.svg
├── tsconfig.json
├── index.html
├── eslint.config.mjs
├── .cz-config.cjs
├── package.json
├── vite.config.ts
├── uno.config.ts
├── README.md
└── .eslintrc-auto-import.json


/src/assets/images/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/hooks/business/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/components/business/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | pnpm-lock.yaml
3 | dist
4 | 


--------------------------------------------------------------------------------
/typings/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/src/assets/styles/index.scss:
--------------------------------------------------------------------------------
1 | @import './transition/fade.scss';
2 | 


--------------------------------------------------------------------------------
/commitlint.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = { extends: ['@commitlint/config-conventional'] }
2 | 


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 |   "rewrites": [{ "source": "/:path*", "destination": "/index.html" }]
3 | }
4 | 


--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
1 | import { createPinia } from 'pinia'
2 | 
3 | export const store = createPinia()
4 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 | <script setup lang="ts"></script>
2 | 
3 | <template>
4 |   <router-view />
5 | </template>
6 | 


--------------------------------------------------------------------------------
/.env.production:
--------------------------------------------------------------------------------
1 | # 项目根目录
2 | VITE_BASE_URL = ./
3 | 
4 | # api接口地址
5 | VITE_API_URL = /api
6 | 
7 | # 是否打开打包可视化
8 | VISUALIZER = false
9 | 


--------------------------------------------------------------------------------
/.env.development:
--------------------------------------------------------------------------------
 1 | # 项目根目录
 2 | VITE_BASE_URL = ./
 3 | 
 4 | # api接口代理
 5 | VITE_PROXY = http://localhost:8199
 6 | 
 7 | # api接口地址
 8 | VITE_API_URL = /api
 9 | 
10 | # 是否打开打包可视化
11 | VISUALIZER = true
12 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "Node",
 6 |     "allowSyntheticDefaultImports": true
 7 |   },
 8 |   "include": ["vite.config.ts"]
 9 | }
10 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see http://editorconfig.org
 2 | 
 3 | root = true
 4 | 
 5 | [*]
 6 | charset = utf-8
 7 | indent_style = space
 8 | indent_size = 2
 9 | end_of_line = lf
10 | trim_trailing_whitespace = true
11 | insert_final_newline = true
12 | 


--------------------------------------------------------------------------------
/src/views/example/KeepAlive.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const count = ref(0)
 3 | </script>
 4 | 
 5 | <template>
 6 |   <n-card>
 7 |     <n-h2>该页面已被缓存，切换页面不会导致状态丢失</n-h2>
 8 |     <n-h1>当前值：{{ count }}</n-h1>
 9 |     <n-button @click="count++">
10 |       +1
11 |     </n-button>
12 |   </n-card>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/src/views/example/UnKeep.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const count = ref(0)
 3 | </script>
 4 | 
 5 | <template>
 6 |   <n-card>
 7 |     <n-h2>该页面不被缓存，切换页面会导致状态丢失</n-h2>
 8 |     <n-h1>当前值：{{ count }}</n-h1>
 9 |     <n-button @click="count++">
10 |       +1
11 |     </n-button>
12 |   </n-card>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/src/hooks/common/useLoading.ts:
--------------------------------------------------------------------------------
 1 | import { useBoolean } from './useBoolean'
 2 | 
 3 | export function useLoading(initValue = false) {
 4 |   const {
 5 |     bool: loading,
 6 |     setTrue: startLoading,
 7 |     setFalse: endLoading,
 8 |   } = useBoolean(initValue)
 9 | 
10 |   return {
11 |     loading,
12 |     startLoading,
13 |     endLoading,
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/src/store/modules/setting.ts:
--------------------------------------------------------------------------------
 1 | import { defineStore } from 'pinia'
 2 | import { animationType } from '@/settings'
 3 | 
 4 | export const useSettingStore = defineStore({
 5 |   id: 'setting',
 6 |   state: () => ({
 7 |     darkTheme: false,
 8 |     animationType,
 9 |   }),
10 |   getters: {
11 |     getDarkTheme(): boolean {
12 |       return this.darkTheme
13 |     },
14 |   },
15 |   actions: {},
16 | })
17 | 


--------------------------------------------------------------------------------
/typings/window.d.ts:
--------------------------------------------------------------------------------
 1 | import type {
 2 |   DialogProviderInst,
 3 |   LoadingBarProviderInst,
 4 |   MessageProviderInst,
 5 |   NotificationProviderInst,
 6 | } from 'naive-ui'
 7 | 
 8 | declare global {
 9 |   interface Window {
10 |     $loading: LoadingBarProviderInst
11 |     $dialog: DialogProviderInst
12 |     $message: MessageProviderInst
13 |     $notification: NotificationProviderInst
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import 'uno.css'
 2 | // 统一浏览器默认样式
 3 | import '@unocss/reset/normalize.css'
 4 | import '@/assets/styles/index.scss'
 5 | import { createApp } from 'vue'
 6 | import App from './App.vue'
 7 | import { store } from '@/store'
 8 | import { routerPlugin } from '@/router'
 9 | 
10 | /**
11 |  * 加载页面，可以在mount的前后执行任务
12 |  */
13 | function startApp() {
14 |   createApp(App).use(store).use(routerPlugin).mount('#app')
15 | }
16 | 
17 | startApp()
18 | 


--------------------------------------------------------------------------------
/src/settings/index.ts:
--------------------------------------------------------------------------------
 1 | // 默认缓存期限为7天
 2 | export const defaultCacheTime = 60 * 60 * 24 * 7
 3 | 
 4 | // storage是否加密，默认使用AES-ECB
 5 | export const storageEncrypt = true
 6 | 
 7 | // aes-ecb加密密钥
 8 | export const encryptoKey = 'KgAh3Tc7PCL1j794'
 9 | 
10 | // api接口url
11 | export const apiBaseUrl = import.meta.env.VITE_API_URL
12 | 
13 | // 请求超时时长
14 | export const requestTimeout = 5000
15 | 
16 | // 路由动画类型
17 | export const animationType = 'zoom-fade'
18 | 


--------------------------------------------------------------------------------
/src/layouts/components/LayoutFooter.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const settingStore = useSettingStore()
 3 | const inverted = computed(() => settingStore.darkTheme)
 4 | </script>
 5 | 
 6 | <template>
 7 |   <n-layout-footer
 8 |     class="min-h-40px flex items-center justify-center"
 9 |     :class="{ 'bg-white': inverted === false }"
10 |   >
11 |     <div class="footer">
12 |       Copyright ©2023 Vue3 Starter
13 |     </div>
14 |   </n-layout-footer>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/src/assets/svg/vue.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>


--------------------------------------------------------------------------------
/src/utils/index.ts:
--------------------------------------------------------------------------------
 1 | import { h } from 'vue'
 2 | import { Icon } from '@iconify/vue'
 3 | 
 4 | /**
 5 |  * 动态渲染iconify
 6 |  * @param icon - 图标名称
 7 |  * @param color - 图标颜色
 8 |  * @param size - 图标大小
 9 |  */
10 | export function iconifyRender(icon: string, color?: string, size?: number) {
11 |   const style: { color?: string, size?: string } = {}
12 |   if (color)
13 |     style.color = color
14 | 
15 |   if (size)
16 |     style.size = `${size}px`
17 | 
18 |   return () => h(Icon, { icon, style })
19 | }
20 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   // 字符串使用单引号
 3 |   singleQuote: true,
 4 |   // 每行末尾自动添加分号
 5 |   semi: false,
 6 |   // tab缩进大小,默认为2
 7 |   tabWidth: 2,
 8 |   // 使用tab缩进，默认false
 9 |   useTabs: false,
10 |   // 对象中打印空格 默认true
11 |   // true: { foo: bar }
12 |   // false: {foo: bar}
13 |   bracketSpacing: true,
14 |   // 箭头函数参数括号 默认avoid 可选 avoid| always
15 |   // avoid 能省略括号的时候就省略 例如x => x
16 |   // always 总是有括号
17 |   arrowParens: 'avoid',
18 |   // 换行长度，默认80
19 |   printWidth: 80,
20 | 
21 |   jsxBracketSameLine: true,
22 | }
23 | 


--------------------------------------------------------------------------------
/src/hooks/common/useBoolean.ts:
--------------------------------------------------------------------------------
 1 | import { ref } from 'vue'
 2 | 
 3 | export function useBoolean(initValue = false) {
 4 |   const bool = ref(initValue)
 5 | 
 6 |   function setBool(value: boolean) {
 7 |     bool.value = value
 8 |   }
 9 |   function setTrue() {
10 |     setBool(true)
11 |   }
12 |   function setFalse() {
13 |     setBool(false)
14 |   }
15 |   function toggle() {
16 |     setBool(!bool.value)
17 |   }
18 | 
19 |   return {
20 |     bool,
21 |     setBool,
22 |     setTrue,
23 |     setFalse,
24 |     toggle,
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/components/common/NaiveProviderContent.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { useDialog, useLoadingBar, useMessage, useNotification } from 'naive-ui'
 3 | 
 4 | // 挂载naive组件的方法至window, 以便在路由钩子函数和请求函数里面调用
 5 | function registerNaiveTools() {
 6 |   window.$loading = useLoadingBar()
 7 |   window.$dialog = useDialog()
 8 |   window.$message = useMessage()
 9 |   window.$notification = useNotification()
10 | }
11 | 
12 | registerNaiveTools()
13 | </script>
14 | 
15 | <template>
16 |   <div />
17 | </template>
18 | 
19 | <style scoped></style>
20 | 


--------------------------------------------------------------------------------
/src/views/example/AboutAuthor.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | defineProps({
 3 |   msg: {
 4 |     type: String,
 5 |     default: '该页面待完成',
 6 |   },
 7 | })
 8 | </script>
 9 | 
10 | <template>
11 |   <div>
12 |     <h1>{{ msg }}</h1>
13 |     <n-skeleton text :repeat="10" /> <n-skeleton text style="width: 60%" />
14 |   </div>
15 | </template>
16 | 
17 | <style scoped>
18 | a {
19 |   color: #42b983;
20 | }
21 | 
22 | label {
23 |   margin: 0 0.5em;
24 |   font-weight: bold;
25 | }
26 | 
27 | code {
28 |   background-color: #eee;
29 |   padding: 2px 4px;
30 |   border-radius: 4px;
31 |   color: #304455;
32 | }
33 | </style>
34 | 


--------------------------------------------------------------------------------
/src/views/redirect/index.vue:
--------------------------------------------------------------------------------
 1 | <script lang="tsx">
 2 | import { defineComponent, onBeforeMount } from 'vue'
 3 | import { useRoute, useRouter } from 'vue-router'
 4 | 
 5 | export default defineComponent({
 6 |   name: 'RedirectComponent',
 7 |   setup() {
 8 |     const route = useRoute()
 9 |     const router = useRouter()
10 |     onBeforeMount(() => {
11 |       const { params, query } = route
12 |       const { path } = params
13 |       router.replace({
14 |         path: `/${Array.isArray(path) ? path.join('/') : path}`,
15 |         query,
16 |       })
17 |     })
18 |     return () => <div />
19 |   },
20 | })
21 | </script>
22 | 


--------------------------------------------------------------------------------
/src/views/example/AboutProject.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | interface Props {
 3 |   msg?: string
 4 | }
 5 | withDefaults(defineProps<Props>(), {
 6 |   msg: '该页面待完成',
 7 | })
 8 | </script>
 9 | 
10 | <template>
11 |   <div>
12 |     <h1>{{ msg }}</h1>
13 |     <n-skeleton text :repeat="10" /> <n-skeleton text style="width: 60%" />
14 |   </div>
15 | </template>
16 | 
17 | <style scoped>
18 | a {
19 |   color: #42b983;
20 | }
21 | 
22 | label {
23 |   margin: 0 0.5em;
24 |   font-weight: bold;
25 | }
26 | 
27 | code {
28 |   background-color: #eee;
29 |   padding: 2px 4px;
30 |   border-radius: 4px;
31 |   color: #304455;
32 | }
33 | </style>
34 | 


--------------------------------------------------------------------------------
/src/hooks/common/useReload.ts:
--------------------------------------------------------------------------------
 1 | import { nextTick } from 'vue'
 2 | import { useBoolean } from './useBoolean'
 3 | 
 4 | /** 重载 */
 5 | export function useReload() {
 6 |   // 重载的标志
 7 |   const { bool: reloadFlag, setTrue, setFalse } = useBoolean(true)
 8 | 
 9 |   /**
10 |    * 触发重载
11 |    * @param duration - 延迟时间(ms)
12 |    */
13 |   async function handleReload(duration = 0) {
14 |     setFalse()
15 |     await nextTick()
16 |     if (duration) {
17 |       setTimeout(() => {
18 |         setTrue()
19 |       }, duration)
20 |     }
21 |     else {
22 |       setTrue()
23 |     }
24 |   }
25 | 
26 |   return {
27 |     reloadFlag,
28 |     handleReload,
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/layouts/components/LayoutLogo.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | defineProps<{
 3 |   collapsed: boolean
 4 | }>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div class="logo">
 9 |     <transition name="fade" mode="out-in" appear>
10 |       <img v-if="collapsed" src="@/assets/svg/vue.svg">
11 |       <span v-else class="text-xl font-bold">Vue3 Starter</span>
12 |     </transition>
13 |   </div>
14 | </template>
15 | 
16 | <style scoped>
17 | .logo {
18 |   display: flex;
19 |   align-items: center;
20 |   justify-content: center;
21 |   height: 64px;
22 |   line-height: 64px;
23 |   overflow: hidden;
24 |   white-space: nowrap;
25 | }
26 | img {
27 |   width: auto;
28 |   height: 32px;
29 | }
30 | </style>
31 | 


--------------------------------------------------------------------------------
/src/router/modules/constant.ts:
--------------------------------------------------------------------------------
 1 | import type { RouteRecordRaw } from 'vue-router'
 2 | import layout from '../../layouts/PcLayout.vue'
 3 | 
 4 | const routes: Array<RouteRecordRaw> = [
 5 |   {
 6 |     path: '/redirect',
 7 |     name: 'RedirectComponent',
 8 |     component: layout,
 9 |     meta: {
10 |       hidden: true,
11 |       hideBreadcrumb: true,
12 |     },
13 |     children: [
14 |       {
15 |         path: '/redirect/:path(.*)',
16 |         name: 'RedirectComponent',
17 |         component: () => import('@/views/redirect/index.vue'),
18 |       },
19 |     ],
20 |   },
21 |   {
22 |     path: '/',
23 |     name: 'Root',
24 |     redirect: '/home',
25 |   },
26 | ]
27 | 
28 | export default routes
29 | 


--------------------------------------------------------------------------------
/src/layouts/components/LayoutContent.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const routeStore = useRouteStore()
 3 | const settingStore = useSettingStore()
 4 | const keepAliveComponents = computed(() => routeStore.keepAliveComponents)
 5 | </script>
 6 | 
 7 | <template>
 8 |   <router-view v-slot="{ Component, route }">
 9 |     <transition :name="settingStore.animationType" mode="out-in" appear>
10 |       <keep-alive :include="keepAliveComponents">
11 |         <component
12 |           :is="Component"
13 |           v-if="routeStore.reloadFlag"
14 |           :key="route.fullPath"
15 |         />
16 |       </keep-alive>
17 |     </transition>
18 |   </router-view>
19 | </template>
20 | 
21 | <style scoped></style>
22 | 


--------------------------------------------------------------------------------
/public/loading.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" color="#646464"><g stroke="currentColor"><circle cx="12" cy="12" r="9.5" fill="none" stroke-linecap="round" stroke-width="3"><animate attributeName="stroke-dasharray" calcMode="spline" dur="1.5s" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" keyTimes="0;0.475;0.95;1" repeatCount="indefinite" values="0 150;42 150;42 150;42 150"/><animate attributeName="stroke-dashoffset" calcMode="spline" dur="1.5s" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" keyTimes="0;0.475;0.95;1" repeatCount="indefinite" values="0;-16;-59;-59"/></circle><animateTransform attributeName="transform" dur="2s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></g></svg>
2 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "jsx": "preserve",
 5 |     "lib": ["ESNext", "DOM"],
 6 |     "useDefineForClassFields": true,
 7 |     "baseUrl": ".",
 8 |     "module": "ESNext",
 9 |     "moduleResolution": "Node",
10 |     "paths": {
11 |       "@/*": ["./src/*"]
12 |     },
13 |     "resolveJsonModule": true,
14 |     "types": ["unplugin-icons/types/vue"],
15 |     "strict": true,
16 |     "noEmit": true,
17 |     "esModuleInterop": true,
18 |     "isolatedModules": true,
19 |     "skipLibCheck": true
20 |   },
21 |   "references": [{ "path": "./tsconfig.node.json" }],
22 |   "include": [
23 |     "typings",
24 |     "src/**/*.ts",
25 |     "src/**/*.d.ts",
26 |     "src/**/*.tsx",
27 |     "src/**/*.vue"
28 |   ]
29 | }
30 | 


--------------------------------------------------------------------------------
/public/loading.css:
--------------------------------------------------------------------------------
 1 | .before-create-app-loading-container {
 2 |   position: fixed;
 3 |   left: 0;
 4 |   top: 0;
 5 |   display: flex;
 6 |   flex-direction: column;
 7 |   justify-content: center;
 8 |   align-items: center;
 9 |   width: 100%;
10 |   height: 100%;
11 | }
12 | 
13 | .before-create-app-loading-logo {
14 |   margin-bottom: 10px;
15 | }
16 | 
17 | .before-create-app-loading-logo:hover {
18 |   filter: drop-shadow(0 0 2em #42b883aa) drop-shadow(0 0 4em #42b883aa);
19 | }
20 | 
21 | .before-create-app-loading-title {
22 |   font-size: 28px;
23 |   font-weight: 500;
24 |   color: #646464;
25 | }
26 | 
27 | .before-create-app-loading-svg {
28 |   --colorA: #42b883aa;
29 |   filter: drop-shadow(0 0 2px var(--colorA)) drop-shadow(0 0 5px var(--colorA))
30 |     drop-shadow(0 0 10px var(--colorA)) drop-shadow(0 0 15px var(--colorA));
31 | }
32 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <link rel="stylesheet" href="/loading.css" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |     <title>Vite + Vue + TS</title>
 9 |   </head>
10 |   <body>
11 |     <div id="app">
12 |       <div class="before-create-app-loading-container">
13 |         <div class="before-create-app-loading-logo">
14 |           <img
15 |             style="width: 10vw; height: 10vw"
16 |             src="/src/assets/svg/vue.svg"
17 |           />
18 |         </div>
19 |         <h2 class="before-create-app-loading-title">Vue3 PCWeb Starter</h2>
20 |         <img class="before-create-app-loading-svg" src="/loading.svg" />
21 |       </div>
22 |     </div>
23 |     <script type="module" src="/src/main.ts"></script>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/src/layouts/components/LayoutMenu.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import type { MenuOption } from 'naive-ui'
 3 | import { generatorMenu } from '@/utils/router'
 4 | 
 5 | defineProps<{
 6 |   collapsed: boolean
 7 |   inverted: boolean
 8 | }>()
 9 | const route = useRoute()
10 | const router = useRouter()
11 | const routeStore = useRouteStore()
12 | const defaultValue = route.name as string
13 | 
14 | const menus = generatorMenu(routeStore.routes) as unknown as MenuOption[]
15 | 
16 | // 点击菜单
17 | function clickMenuItem(key: string) {
18 |   if (/http(s)?:/.test(key))
19 |     window.open(key)
20 |   else
21 |     router.push({ name: key })
22 | }
23 | </script>
24 | 
25 | <template>
26 |   <n-menu
27 |     :options="menus"
28 |     :inverted="inverted"
29 |     :collapsed="collapsed"
30 |     :collapsed-width="64"
31 |     :collapsed-icon-size="20"
32 |     :indent="15"
33 |     :default-value="defaultValue"
34 |     @update:value="clickMenuItem"
35 |   />
36 | </template>
37 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue'
 3 | 
 4 | defineProps<{ msg: string }>()
 5 | 
 6 | const count = ref(0)
 7 | </script>
 8 | 
 9 | <template>
10 |   <h1>{{ msg }}</h1>
11 | 
12 |   <div class="card">
13 |     <button type="button" @click="count++">
14 |       count is {{ count }}
15 |     </button>
16 |     <p>
17 |       Edit
18 |       <code>components/HelloWorld.vue</code> to test HMR
19 |     </p>
20 |   </div>
21 | 
22 |   <p>
23 |     Check out
24 |     <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite starter
25 |   </p>
26 |   <p>
27 |     Install
28 |     <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
29 |     in your IDE for a better DX
30 |   </p>
31 |   <p class="read-the-docs">
32 |     Click on the Vite and Vue logos to learn more
33 |   </p>
34 | </template>
35 | 
36 | <style scoped>
37 | .read-the-docs {
38 |   color: #888;
39 | }
40 | </style>
41 | 


--------------------------------------------------------------------------------
/src/components/common/NaiveProvider.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { computed } from 'vue'
 3 | import {
 4 |   NConfigProvider,
 5 |   NDialogProvider,
 6 |   NLoadingBarProvider,
 7 |   NMessageProvider,
 8 |   NNotificationProvider,
 9 |   darkTheme,
10 |   dateZhCN,
11 |   zhCN,
12 | } from 'naive-ui'
13 | import NaiveProviderContent from './NaiveProviderContent.vue'
14 | 
15 | import { useSettingStore } from '@/store/modules/setting'
16 | 
17 | const settingStore = useSettingStore()
18 | const theme = computed(() => (settingStore.darkTheme ? darkTheme : undefined))
19 | </script>
20 | 
21 | <template>
22 |   <NConfigProvider :locale="zhCN" :date-locale="dateZhCN" :theme="theme">
23 |     <NLoadingBarProvider>
24 |       <NDialogProvider>
25 |         <NNotificationProvider>
26 |           <NMessageProvider>
27 |             <slot />
28 |             <NaiveProviderContent />
29 |           </NMessageProvider>
30 |         </NNotificationProvider>
31 |       </NDialogProvider>
32 |     </NLoadingBarProvider>
33 |   </NConfigProvider>
34 | </template>
35 | 
36 | <style scoped></style>
37 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import antfu from '@antfu/eslint-config'
 2 | 
 3 | export default antfu({
 4 |   ignores: ['*.sh', '**/*.sh/**', 'node_modules', '**/node_modules/**', 'lib', '**/lib/**', '*.md', '**/*.md/**', '*.woff', '**/*.woff/**', '*.ttf', '**/*.ttf/**', '.vscode', '**/.vscode/**', '.idea', '**/.idea/**', 'dist/', 'dist/**/', 'public', 'public/**', 'docs', 'docs/**', '.local', '**/.local/**', '!.env-config.ts', '!**/.env-config.ts/**', 'components.d.ts', '**/components.d.ts/**'],
 5 |   formatters: {
 6 |     prettierOptions: {
 7 |       // 字符串使用单引号
 8 |       singleQuote: true,
 9 |       // 每行末尾自动添加分号
10 |       semi: false,
11 |       // tab缩进大小,默认为2
12 |       tabWidth: 2,
13 |       // 使用tab缩进，默认false
14 |       useTabs: false,
15 |       // 对象中打印空格 默认true
16 |       // true: { foo: bar }
17 |       // false: {foo: bar}
18 |       bracketSpacing: true,
19 |       // 箭头函数参数括号 默认avoid 可选 avoid| always
20 |       // avoid 能省略括号的时候就省略 例如x => x
21 |       // always 总是有括号
22 |       arrowParens: 'avoid',
23 |       // 换行长度，默认80
24 |       printWidth: 80,
25 |       jsxBracketSameLine: true,
26 |     },
27 |   },
28 |   unocss: true,
29 |   vue: true,
30 | })
31 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import type { Plugin } from 'vue'
 2 | import type { RouteRecordRaw } from 'vue-router'
 3 | import { createRouter, createWebHistory } from 'vue-router'
 4 | import { createGuard } from './guard'
 5 | 
 6 | type RouteGlob = {
 7 |   [key in string]: {
 8 |     default: Array<RouteRecordRaw>
 9 |   }
10 | }
11 | 
12 | // 从modules目录动态导入路由
13 | const modules = import.meta.glob('./modules/**/*.ts', {
14 |   eager: true,
15 | }) as RouteGlob
16 | const routeModuleList: RouteRecordRaw[] = []
17 | 
18 | Object.keys(modules).forEach((key) => {
19 |   const module = modules[key].default || {}
20 |   const modList = Array.isArray(module) ? [...module] : [module]
21 |   routeModuleList.push(...modList)
22 | })
23 | 
24 | // 导出默认静态路由
25 | export const constantRoute: RouteRecordRaw[] = [...routeModuleList]
26 | 
27 | // 创建路由实例
28 | const router = createRouter({
29 |   history: createWebHistory(import.meta.env.VITE_BASE_URL as string),
30 |   routes: routeModuleList,
31 | })
32 | 
33 | export const routerPlugin = {
34 |   install(app) {
35 |     app.use(router)
36 |     createGuard(router)
37 |   },
38 | } as Plugin
39 | 
40 | // 也可以使用导出的路由实例进行挂载
41 | export default router
42 | 


--------------------------------------------------------------------------------
/src/store/modules/route.ts:
--------------------------------------------------------------------------------
 1 | import { nextTick } from 'vue'
 2 | import { defineStore } from 'pinia'
 3 | import type { RouteRecordRaw } from 'vue-router'
 4 | import { constantRoute } from '@/router'
 5 | 
 6 | export interface IRouteState {
 7 |   keepAliveComponents: string[]
 8 |   routes: RouteRecordRaw[]
 9 |   reloadFlag: boolean
10 | }
11 | 
12 | export const useRouteStore = defineStore({
13 |   id: 'route',
14 |   state: (): IRouteState => ({
15 |     keepAliveComponents: [],
16 |     routes: constantRoute,
17 |     reloadFlag: true,
18 |   }),
19 |   actions: {
20 |     setKeepAliveComponents(compNames: string[]) {
21 |       // 设置需要缓存的组件
22 |       this.keepAliveComponents = compNames
23 |     },
24 |     /**
25 |      * 重载页面
26 |      * @param duration - 重载的延迟时间(ms)
27 |      */
28 |     async reloadPage(duration = 0) {
29 |       this.reloadFlag = false
30 |       await nextTick()
31 |       if (duration) {
32 |         setTimeout(() => {
33 |           this.reloadFlag = true
34 |         }, duration)
35 |       }
36 |       else {
37 |         this.reloadFlag = true
38 |       }
39 |       setTimeout(() => {
40 |         document.documentElement.scrollTo({ left: 0, top: 0 })
41 |       }, 100)
42 |     },
43 |   },
44 | })
45 | 


--------------------------------------------------------------------------------
/src/utils/cipher.ts:
--------------------------------------------------------------------------------
 1 | import { decrypt, encrypt } from 'crypto-js/aes'
 2 | import pkcs7 from 'crypto-js/pad-pkcs7'
 3 | import ECB from 'crypto-js/mode-ecb'
 4 | import md5 from 'crypto-js/md5'
 5 | import UTF8, { parse } from 'crypto-js/enc-utf8'
 6 | import Base64 from 'crypto-js/enc-base64'
 7 | 
 8 | export interface EncryptionParams {
 9 |   key: string
10 |   iv?: string
11 | }
12 | 
13 | // 提供简单的aes-ECB加密，如有其他需求按需进行改造
14 | export class AesECBEncryption {
15 |   private key
16 |   private options
17 | 
18 |   constructor(options: EncryptionParams) {
19 |     this.key = parse(options.key)
20 |     this.options = {
21 |       mode: ECB,
22 |       padding: pkcs7,
23 |     }
24 |   }
25 | 
26 |   encryptByAES(cipherText: string) {
27 |     if (this.key)
28 |       return encrypt(cipherText, this.key, this.options).toString()
29 |   }
30 | 
31 |   decryptByAES(cipherText: string) {
32 |     if (this.key)
33 |       return decrypt(cipherText, this.key, this.options).toString(UTF8)
34 |   }
35 | }
36 | 
37 | export function encryptByBase64(cipherText: string) {
38 |   return Base64.parse(cipherText).toString(UTF8)
39 | }
40 | 
41 | export function decodeByBase64(cipherText: string) {
42 |   return Base64.parse(cipherText).toString(UTF8)
43 | }
44 | 
45 | export function encryptByMd5(password: string) {
46 |   return md5(password).toString()
47 | }
48 | 


--------------------------------------------------------------------------------
/src/utils/router.ts:
--------------------------------------------------------------------------------
 1 | import type { RouteRecordRaw } from 'vue-router'
 2 | 
 3 | /**
 4 |  * 判断根路由 Router
 5 |  */
 6 | export function isRootRouter(item: RouteRecordRaw) {
 7 |   return item.meta?.isRoot === true && item.children?.length === 1
 8 | }
 9 | 
10 | /**
11 |  * 排除Router
12 |  */
13 | export function filterRouter(routerMap: Array<RouteRecordRaw>) {
14 |   return routerMap.filter((item) => {
15 |     return (
16 |       (item.meta?.hidden || false) !== true
17 |       && !['/:path(.*)*', '/', '/redirect'].includes(item.path)
18 |     )
19 |   })
20 | }
21 | 
22 | /**
23 |  * 递归组装菜单格式
24 |  */
25 | export function generatorMenu(routerMap: Array<RouteRecordRaw>) {
26 |   return filterRouter(routerMap).map((item) => {
27 |     const isRoot = isRootRouter(item)
28 |     if (!item.children) {
29 |       return {
30 |         ...item,
31 |         label: item.meta?.title,
32 |         key: item.name,
33 |         icon: item.meta?.icon,
34 |       }
35 |     }
36 |     const info = isRoot ? item.children[0] : item
37 |     const currentMenu = {
38 |       ...info,
39 |       ...info.meta,
40 |       label: info.meta?.title,
41 |       key: info.name,
42 |       icon: isRoot ? item.meta?.icon : info.meta?.icon,
43 |     }
44 |     // 是否有子菜单，并递归处理
45 |     if (!isRoot && info.children && info.children.length > 0) {
46 |       // Recursion
47 |       currentMenu.children = generatorMenu(info.children)
48 |     }
49 |     return currentMenu
50 |   })
51 | }
52 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/.cz-config.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   types: [
 3 |     { value: 'init', name: 'init:     项目初始化' },
 4 |     { value: 'feat', name: 'feat:     添加新特性' },
 5 |     { value: 'fix', name: 'fix:      修复bug' },
 6 |     { value: 'docs', name: 'docs:     仅仅修改文档' },
 7 |     {
 8 |       value: 'style',
 9 |       name: 'style:    仅仅修改了空格、格式缩进、逗号等等，不改变代码逻辑',
10 |     },
11 |     { value: 'refactor', name: 'refactor: 代码重构，没有加新功能或者修复bug' },
12 |     { value: 'perf', name: 'perf:     优化相关，比如提升性能、体验' },
13 |     { value: 'test', name: 'test:     添加测试用例' },
14 |     { value: 'build', name: 'build:    依赖相关的内容' },
15 |     {
16 |       value: 'ci',
17 |       name: 'ci:       CI配置相关，例如对k8s，docker的配置文件的修改',
18 |     },
19 |     { value: 'chore', name: 'chore:    改变构建流程、或者增加依赖库、工具等' },
20 |     { value: 'revert', name: 'revert:   回滚到上一个版本' },
21 |   ],
22 |   scopes: [
23 |     ['projects', '项目搭建'],
24 |     ['components', '组件相关'],
25 |     ['hooks', 'hook 相关'],
26 |     ['utils', 'utils 相关'],
27 |     ['types', 'ts类型相关'],
28 |     ['styles', '样式相关'],
29 |     ['deps', '项目依赖'],
30 |     ['auth', '对 auth 修改'],
31 |     ['other', '其他修改'],
32 |     ['custom', '以上都不是？我要自定义'],
33 |   ].map(([value, description]) => {
34 |     return {
35 |       value,
36 |       name: `${value.padEnd(30)} (${description})`,
37 |     }
38 |   }),
39 |   messages: {
40 |     type: '确保本次提交遵循 Angular 规范！\n选择你要提交的类型：',
41 |     scope: '\n选择一个 scope（可选）：',
42 |     customScope: '请输入自定义的 scope：',
43 |     subject: '填写简短精炼的变更描述：\n',
44 |     body: '填写更加详细的变更描述（可选）。使用 "|" 换行：\n',
45 |     breaking: '列举非兼容性重大的变更（可选）：\n',
46 |     footer: '列举出所有变更的 ISSUES CLOSED（可选）。 例如: #31, #34：\n',
47 |     confirmCommit: '确认提交？',
48 |   },
49 |   allowBreakingChanges: ['feat', 'fix'],
50 |   subjectLimit: 100,
51 |   breaklineChar: '|',
52 | }
53 | 


--------------------------------------------------------------------------------
/src/utils/http/axiosCancel.ts:
--------------------------------------------------------------------------------
 1 | import type { AxiosRequestConfig, Canceler } from 'axios'
 2 | import axios from 'axios'
 3 | import { isFunction } from '@/utils/is'
 4 | 
 5 | // Used to store the identification and cancellation function of each request
 6 | let pendingMap = new Map<string, Canceler>()
 7 | 
 8 | export function getPendingUrl(config: AxiosRequestConfig) {
 9 |   return [config.method, config.url].join('&')
10 | }
11 | 
12 | export class AxiosCanceler {
13 |   /**
14 |    * Add request
15 |    * @param {object} config
16 |    */
17 |   addPending(config: AxiosRequestConfig) {
18 |     this.removePending(config)
19 |     const url = getPendingUrl(config)
20 |     config.cancelToken
21 |       = config.cancelToken
22 |       || new axios.CancelToken((cancel) => {
23 |         if (!pendingMap.has(url)) {
24 |           // If there is no current request in pending, add it
25 |           pendingMap.set(url, cancel)
26 |         }
27 |       })
28 |   }
29 | 
30 |   /**
31 |    * @description: Clear all pending
32 |    */
33 |   removeAllPending() {
34 |     pendingMap.forEach((cancel) => {
35 |       cancel && isFunction(cancel) && cancel()
36 |     })
37 |     pendingMap.clear()
38 |   }
39 | 
40 |   /**
41 |    * Removal request
42 |    * @param {object} config
43 |    */
44 |   removePending(config: AxiosRequestConfig) {
45 |     const url = getPendingUrl(config)
46 | 
47 |     if (pendingMap.has(url)) {
48 |       // If there is a current request identifier in pending,
49 |       // the current request needs to be cancelled and removed
50 |       const cancel = pendingMap.get(url)
51 |       cancel && cancel(url)
52 |       pendingMap.delete(url)
53 |     }
54 |   }
55 | 
56 |   /**
57 |    * @description: reset
58 |    */
59 |   reset(): void {
60 |     pendingMap = new Map<string, Canceler>()
61 |   }
62 | }
63 | 


--------------------------------------------------------------------------------
/src/views/example/HomePage.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { Icon } from '@iconify/vue'
 3 | 
 4 | function handlerBtn() {
 5 |   window.$loading.error()
 6 |   window.$notification.error({
 7 |     title: '功能未完善',
 8 |     content: '请耐心等待功能实现',
 9 |     duration: 3000,
10 |   })
11 | }
12 | function onOpenMyGithub() {
13 |   window.open('https://github.com/Wyatex')
14 | }
15 | </script>
16 | 
17 | <template>
18 |   <n-card
19 |     hoverable
20 |     class="home-page min-h-full rounded-16px"
21 |     content-style="display: flex; flex-direction: column; justify-content:center; align-item: center;"
22 |   >
23 |     <div class="flex flex-col items-center justify-center">
24 |       <div class="flex">
25 |         <img src="/vite.svg" class="logo h-200px w-200px transition">
26 |         <img
27 |           src="@/assets/svg/vue.svg"
28 |           class="logo vue ml-50px h-200px w-200px transition"
29 |         >
30 |       </div>
31 |       <n-gradient-text type="success" :size="64">
32 |         Vue3 Starter
33 |       </n-gradient-text>
34 |       <n-h1 prefix="bar" type="success">
35 |         <n-gradient-text type="danger">
36 |           一个开箱即用的Vue3项目模板
37 |         </n-gradient-text>
38 |       </n-h1>
39 |       <div class="btns mt-4">
40 |         <n-button size="large" type="primary" class="mr-8" @click="handlerBtn">
41 |           关于项目
42 |         </n-button>
43 |         <n-button size="large" class="mr-8" @click="onOpenMyGithub">
44 |           <template #icon>
45 |             <Icon icon="tabler:3d-cube-sphere" />
46 |           </template>
47 |           作者Github
48 |         </n-button>
49 |       </div>
50 |     </div>
51 |   </n-card>
52 | </template>
53 | 
54 | <style scoped>
55 | .logo:hover {
56 |   filter: drop-shadow(0 0 2em #646cffaa);
57 | }
58 | .logo.vue:hover {
59 |   filter: drop-shadow(0 0 2em #42b883aa);
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/src/utils/http/index.ts:
--------------------------------------------------------------------------------
 1 | // axios请求库
 2 | import Axios from 'axios'
 3 | // import { storage } from '@/utils/storage'
 4 | 
 5 | // alova请求库
 6 | import { createAlova } from 'alova'
 7 | import GlobalFetch from 'alova/GlobalFetch'
 8 | import VueHook from 'alova/vue'
 9 | import { apiBaseUrl, requestTimeout } from '@/settings/index'
10 | 
11 | // axios请求实例
12 | const axiosInstance = Axios.create({
13 |   baseURL: apiBaseUrl as string,
14 |   timeout: requestTimeout,
15 | })
16 | 
17 | axiosInstance.interceptors.request.use(
18 |   (config) => {
19 |     // 按照业务需求填写，比如：
20 | 
21 |     //   // 请求加上token
22 |     //   if (storage.get('token')) {
23 |     //     // jwt token
24 |     //     config.headers.Authorization = 'Bearer ' + storage.get('token')
25 |     //   }
26 |     return config
27 |   },
28 |   (err) => {
29 |     // 错误处理
30 |     console.error(err)
31 |     return Promise.reject(err)
32 |   },
33 | )
34 | 
35 | axiosInstance.interceptors.response.use(
36 |   (response) => {
37 |     // 按照业务需求填写，比如只返回响应的body，不返回status code等信息
38 |     return response.data
39 |   },
40 |   (err) => {
41 |     // 错误处理
42 |     console.error(err)
43 |     return Promise.reject(err)
44 |   },
45 | )
46 | 
47 | // alova请求实例
48 | const alovaInstance = createAlova({
49 |   // 假设我们需要与这个域名的服务器交互
50 |   baseURL: apiBaseUrl,
51 | 
52 |   // 在vue项目下引入VueHook，它可以帮我们用vue的ref函数创建请求相关的，可以被alova管理的状态
53 |   statesHook: VueHook,
54 | 
55 |   // 请求适配器，这里我们使用fetch请求适配器
56 |   requestAdapter: GlobalFetch(),
57 | 
58 |   // 设置全局的请求拦截器，与axios相似
59 |   // beforeRequest(config) {
60 |   //   // 假设我们需要添加token到请求头
61 |   //     if (storage.get('token')) {
62 |   //       config.config.headers.Authorization = 'Bearer ' + storage.get('token')
63 |   //     }
64 |   // },
65 | 
66 |   // 响应拦截器，也与axios类似
67 |   async responsed(response) {
68 |     const json = await response.json()
69 |     if (json.code !== 200) {
70 |       // 这边抛出错误时，将会进入请求失败拦截器内
71 |       throw new Error(json.message)
72 |     }
73 |     return json.data
74 |   },
75 | })
76 | 
77 | export { axiosInstance as axios, alovaInstance as useRequest }
78 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue3-starter-new",
 3 |   "type": "module",
 4 |   "version": "0.0.0",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "typecheck": "vue-tsc --noEmit --skipLibCheck",
 8 |     "dev": "vite",
 9 |     "build": "vue-tsc && vite build",
10 |     "preview": "vite preview",
11 |     "prepare": "npx simple-git-hooks",
12 |     "cz": "cz",
13 |     "release": "standard-version",
14 |     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md",
15 |     "lint": "eslint . --fix"
16 |   },
17 |   "dependencies": {
18 |     "@unocss/reset": "^0.59.4",
19 |     "@vueuse/core": "^10.9.0",
20 |     "alova": "^2.20.1",
21 |     "axios": "^1.6.8",
22 |     "dayjs": "^1.11.10",
23 |     "lodash-es": "^4.17.21",
24 |     "pinia": "^2.1.7",
25 |     "vue": "^3.4.25",
26 |     "vue-router": "^4.3.2"
27 |   },
28 |   "devDependencies": {
29 |     "@antfu/eslint-config": "^2.15.0",
30 |     "@commitlint/cli": "^19.3.0",
31 |     "@commitlint/config-conventional": "^19.2.2",
32 |     "@iconify/json": "^2.2.204",
33 |     "@iconify/vue": "^4.1.2",
34 |     "@types/crypto-js": "^4.2.2",
35 |     "@unocss/eslint-plugin": "^0.59.3",
36 |     "@vitejs/plugin-vue": "^5.0.4",
37 |     "@vitejs/plugin-vue-jsx": "^3.1.0",
38 |     "commitizen": "^4.3.0",
39 |     "cz-conventional-changelog": "^3.3.0",
40 |     "cz-customizable": "^7.0.0",
41 |     "eslint": "^9.1.1",
42 |     "eslint-plugin-format": "^0.1.1",
43 |     "lint-staged": "^15.2.2",
44 |     "naive-ui": "^2.38.1",
45 |     "prettier": "^3.2.5",
46 |     "sass": "^1.75.0",
47 |     "simple-git-hooks": "^2.11.1",
48 |     "standard-version": "^9.5.0",
49 |     "typescript": "^5.4.5",
50 |     "unocss": "^0.59.4",
51 |     "unplugin-auto-import": "^0.17.5",
52 |     "unplugin-icons": "^0.18.5",
53 |     "unplugin-vue-components": "^0.26.0",
54 |     "vite": "^5.2.10",
55 |     "vue-tsc": "^2.0.14"
56 |   },
57 |   "simple-git-hooks": {
58 |     "commit-msg": "npx --no -- commitlint --edit ${1}",
59 |     "pre-commit": "pnpm typecheck && pnpm lint-staged"
60 |   },
61 |   "lint-staged": {
62 |     "*.{js,jsx,mjs,json,ts,tsx,vue}": "eslint . --fix"
63 |   },
64 |   "config": {
65 |     "commitizen": {
66 |       "path": "./node_modules/cz-customizable"
67 |     }
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/src/layouts/PcLayout.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import LayoutMenu from './components/LayoutMenu.vue'
 3 | import LayoutHeader from './components/LayoutHeader.vue'
 4 | import LayoutContent from './components/LayoutContent.vue'
 5 | import LayoutLogo from './components/LayoutLogo.vue'
 6 | import LayoutFooter from './components/LayoutFooter.vue'
 7 | 
 8 | const settingStore = useSettingStore()
 9 | const collapsed = ref(false)
10 | const inverted = computed(() => settingStore.darkTheme)
11 | 
12 | function watchWidth() {
13 |   const Width = document.body.clientWidth
14 |   if (Width <= 950)
15 |     collapsed.value = true
16 |   else collapsed.value = false
17 | }
18 | 
19 | onMounted(() => {
20 |   window.addEventListener('resize', watchWidth)
21 |   window.$loading.finish()
22 | })
23 | </script>
24 | 
25 | <template>
26 |   <naive-provider>
27 |     <n-layout class="h-100vh flex" has-sider>
28 |       <n-layout-sider
29 |         bordered
30 |         :collapsed="collapsed"
31 |         :collapsed-width="64"
32 |         :width="200"
33 |         :inverted="inverted"
34 |         collapse-mode="width"
35 |         class="relative z-13 min-h-100vh shadow"
36 |         show-trigger="bar"
37 |         @collapse="collapsed = true"
38 |         @expand="collapsed = false"
39 |       >
40 |         <LayoutLogo :collapsed="collapsed" />
41 |         <LayoutMenu :collapsed="collapsed" :inverted="inverted" />
42 |       </n-layout-sider>
43 |       <n-layout
44 |         :inverted="inverted"
45 |         class="min-h-full"
46 |         content-style="display: flex;flex-direction: column;"
47 |       >
48 |         <n-layout-header :inverted="inverted" position="absolute">
49 |           <LayoutHeader v-model:collapsed="collapsed" :inverted="inverted" />
50 |         </n-layout-header>
51 |         <n-layout-content
52 |           class="relative mt-60px flex flex-1"
53 |           content-style="width: 100%;display: flex;flex-direction: column;"
54 |           :class="{ 'bg-hex-f5f7f9': inverted === false }"
55 |         >
56 |           <div class="flex-1 p-16px">
57 |             <LayoutContent />
58 |           </div>
59 |           <LayoutFooter />
60 |         </n-layout-content>
61 |       </n-layout>
62 |     </n-layout>
63 |   </naive-provider>
64 | </template>
65 | 
66 | <style scoped></style>
67 | 


--------------------------------------------------------------------------------
/typings/components.d.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | /* prettier-ignore */
 3 | // @ts-nocheck
 4 | // Generated by unplugin-vue-components
 5 | // Read more: https://github.com/vuejs/core/pull/3399
 6 | export {}
 7 | 
 8 | declare module 'vue' {
 9 |   export interface GlobalComponents {
10 |     HelloWorld: typeof import('./../src/components/HelloWorld.vue')['default']
11 |     'IAntDesign:fullscreenExitOutlined': typeof import('~icons/ant-design/fullscreen-exit-outlined')['default']
12 |     'IAntDesign:fullscreenOutlined': typeof import('~icons/ant-design/fullscreen-outlined')['default']
13 |     'IIc:roundRefresh': typeof import('~icons/ic/round-refresh')['default']
14 |     'ILineMd:githubLoop': typeof import('~icons/line-md/github-loop')['default']
15 |     'ILineMd:moonAltToSunnyOutlineLoopTransition': typeof import('~icons/line-md/moon-alt-to-sunny-outline-loop-transition')['default']
16 |     'ILineMd:sunnyFilledLoopToMoonAltFilledLoopTransition': typeof import('~icons/line-md/sunny-filled-loop-to-moon-alt-filled-loop-transition')['default']
17 |     'ITabler:indentDecrease': typeof import('~icons/tabler/indent-decrease')['default']
18 |     'ITabler:indentIncrease': typeof import('~icons/tabler/indent-increase')['default']
19 |     NaiveProvider: typeof import('./../src/components/common/NaiveProvider.vue')['default']
20 |     NaiveProviderContent: typeof import('./../src/components/common/NaiveProviderContent.vue')['default']
21 |     NButton: typeof import('naive-ui')['NButton']
22 |     NCard: typeof import('naive-ui')['NCard']
23 |     NGradientText: typeof import('naive-ui')['NGradientText']
24 |     NH1: typeof import('naive-ui')['NH1']
25 |     NH2: typeof import('naive-ui')['NH2']
26 |     NIcon: typeof import('naive-ui')['NIcon']
27 |     NLayout: typeof import('naive-ui')['NLayout']
28 |     NLayoutContent: typeof import('naive-ui')['NLayoutContent']
29 |     NLayoutFooter: typeof import('naive-ui')['NLayoutFooter']
30 |     NLayoutHeader: typeof import('naive-ui')['NLayoutHeader']
31 |     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
32 |     NMenu: typeof import('naive-ui')['NMenu']
33 |     NTooltip: typeof import('naive-ui')['NTooltip']
34 |     RouterLink: typeof import('vue-router')['RouterLink']
35 |     RouterView: typeof import('vue-router')['RouterView']
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { URL, fileURLToPath } from 'node:url'
 2 | import { defineConfig, loadEnv } from 'vite'
 3 | import unocss from 'unocss/vite'
 4 | import vue from '@vitejs/plugin-vue'
 5 | import vueJsx from '@vitejs/plugin-vue-jsx'
 6 | import autoImport from 'unplugin-auto-import/vite'
 7 | import components from 'unplugin-vue-components/vite'
 8 | import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
 9 | import icons from 'unplugin-icons/vite'
10 | import IconsResolver from 'unplugin-icons/resolver'
11 | import { FileSystemIconLoader } from 'unplugin-icons/loaders'
12 | 
13 | export default defineConfig((configEnv) => {
14 |   const env = loadEnv(configEnv.mode, './')
15 |   return {
16 |     server: {
17 |       proxy: {
18 |         [env.VITE_API_URL]: {
19 |           target: env.VITE_PROXY,
20 |           changeOrigin: true,
21 |           rewrite: (path: string) =>
22 |             path.replace(new RegExp(`^${env.VITE_API_URL}`), ''),
23 |         },
24 |       },
25 |     },
26 |     resolve: {
27 |       alias: {
28 |         '@': fileURLToPath(new URL('./src', import.meta.url)),
29 |       },
30 |     },
31 |     plugins: [
32 |       vue(),
33 |       vueJsx(),
34 |       unocss(),
35 |       icons({
36 |         autoInstall: true,
37 |         compiler: 'vue3',
38 |         customCollections: {
39 |           custom: FileSystemIconLoader(
40 |             fileURLToPath(new URL('./src/assets/svg', import.meta.url)),
41 |           ),
42 |         },
43 |       }),
44 |       autoImport({
45 |         dts: './typings/auto-imports.d.ts',
46 |         imports: [
47 |           'vue',
48 |           'vue-router',
49 |           'pinia',
50 |           '@vueuse/core',
51 |           {
52 |             'naive-ui': [
53 |               'useDialog',
54 |               'useMessage',
55 |               'useNotification',
56 |               'useLoadingBar',
57 |             ],
58 |           },
59 |         ],
60 |         dirs: ['./src/store/modules/**', './src/hooks/common/**'],
61 |         eslintrc: {
62 |           enabled: true,
63 |         },
64 |       }),
65 |       components({
66 |         dts: './typings/components.d.ts',
67 |         types: [{ from: 'vue-router', names: ['RouterLink', 'RouterView'] }],
68 |         resolvers: [
69 |           NaiveUiResolver(),
70 |           IconsResolver({
71 |             customCollections: ['custom'],
72 |           }),
73 |         ],
74 |       }),
75 |     ],
76 |   }
77 | })
78 | 


--------------------------------------------------------------------------------
/src/router/guard.ts:
--------------------------------------------------------------------------------
 1 | import { isNavigationFailure } from 'vue-router'
 2 | import type { Router } from 'vue-router'
 3 | import { useRouteStore } from '@/store/modules/route'
 4 | import { storage } from '@/utils/storage'
 5 | 
 6 | export function createGuard(router: Router) {
 7 |   router.beforeEach(async (_to, _from, next) => {
 8 |     const Loading = window.$loading || null
 9 |     Loading && Loading.start()
10 | 
11 |     // 可以执行token检查业务，比如token失效了跳转login页面
12 |     const token = storage.get('token')
13 |     if (!token) {
14 |       //   if (to.meta.ignoreAuth) {
15 |       //     next()
16 |       //     return
17 |       //   }
18 |       //   // redirect login page
19 |       //   const redirectData: {
20 |       //     path: string
21 |       //     replace: boolean
22 |       //     query?: Recordable<string>
23 |       //   } = {
24 |       //     path: '/login',
25 |       //     replace: true,
26 |       //   }
27 |       //   if (to.path) {
28 |       //     redirectData.query = {
29 |       //       ...redirectData.query,
30 |       //       redirect: to.path,
31 |       //     }
32 |       //   }
33 |       //   next(redirectData)
34 |       //   return
35 |     }
36 | 
37 |     next()
38 |     Loading && Loading.finish()
39 |   })
40 | 
41 |   router.afterEach((to, _, failure) => {
42 |     document.title = (to?.meta?.title as string) || document.title
43 |     if (isNavigationFailure(failure))
44 |       console.error('failed navigation', failure)
45 | 
46 |     const routeStore = useRouteStore()
47 |     // 在这里设置需要缓存的组件名称
48 |     const keepAliveComponents = routeStore.keepAliveComponents
49 |     const currentComName = to.matched.find(item => item.name === to.name)
50 |       ?.name as string | undefined
51 |     if (
52 |       currentComName
53 |       && !keepAliveComponents.includes(currentComName)
54 |       && to.meta?.keepAlive
55 |     ) {
56 |       // 需要缓存的组件
57 |       keepAliveComponents.push(currentComName)
58 |     }
59 |     else if (!to.meta?.keepAlive || to.name === 'Redirect') {
60 |       // 不需要缓存的组件
61 |       const index = routeStore.keepAliveComponents.findIndex(
62 |         name => name === currentComName,
63 |       )
64 |       if (index !== -1)
65 |         keepAliveComponents.splice(index, 1)
66 |     }
67 |     routeStore.setKeepAliveComponents(keepAliveComponents)
68 | 
69 |     const Loading = window.$loading || null
70 |     Loading && Loading.finish()
71 |   })
72 | 
73 |   router.onError((error) => {
74 |     console.error('路由错误:', error)
75 |   })
76 | }
77 | 


--------------------------------------------------------------------------------
/src/router/modules/example.ts:
--------------------------------------------------------------------------------
  1 | import type { RouteRecordRaw } from 'vue-router'
  2 | import layout from '../../layouts/PcLayout.vue'
  3 | import home from '~icons/tabler/home'
  4 | import component from '~icons/icon-park-outline/figma-component'
  5 | import info from '~icons/tabler/info-circle'
  6 | import user from '~icons/tabler/user-circle'
  7 | import blogger from '~icons/jam/blogger-circle'
  8 | 
  9 | const routes: Array<RouteRecordRaw> = [
 10 |   {
 11 |     path: '/home',
 12 |     name: 'home',
 13 |     component: layout,
 14 |     meta: {
 15 |       isRoot: true,
 16 |       icon: () => h(home),
 17 |     },
 18 |     children: [
 19 |       {
 20 |         path: '',
 21 |         name: 'home-index',
 22 |         component: () => import('@/views/example/HomePage.vue'),
 23 |         meta: {
 24 |           title: '首页',
 25 |         },
 26 |       },
 27 |     ],
 28 |   },
 29 |   {
 30 |     path: '/comp',
 31 |     name: 'comp',
 32 |     component: layout,
 33 |     meta: {
 34 |       title: '组件实例',
 35 |       icon: () => h(component),
 36 |     },
 37 |     children: [
 38 |       {
 39 |         path: 'keep-alive',
 40 |         name: 'KeepAlive',
 41 |         component: () => import('@/views/example/KeepAlive.vue'),
 42 |         meta: {
 43 |           title: '组件缓存',
 44 |           keepAlive: true,
 45 |           icon: () => h(component),
 46 |         },
 47 |       },
 48 |       {
 49 |         path: 'un-keep-alive',
 50 |         name: 'UnKeepAlive',
 51 |         component: () => import('@/views/example/UnKeep.vue'),
 52 |         meta: {
 53 |           title: '组件不缓存',
 54 |           icon: () => h(component),
 55 |         },
 56 |       },
 57 |     ],
 58 |   },
 59 |   {
 60 |     path: '/about',
 61 |     name: 'about',
 62 |     component: layout,
 63 |     meta: {
 64 |       icon: () => h(info),
 65 |       title: '关于',
 66 |     },
 67 |     children: [
 68 |       {
 69 |         path: 'project',
 70 |         name: 'https://github.com/MatrixCross/Vue3-PCWeb-Starter',
 71 |         component: layout,
 72 |         meta: {
 73 |           title: '关于项目',
 74 |           icon: () => h(info),
 75 |         },
 76 |       },
 77 |       {
 78 |         path: 'author',
 79 |         name: 'https://github.com/Wyatex',
 80 |         component: layout,
 81 |         meta: {
 82 |           title: '关于作者',
 83 |           icon: () => h(user),
 84 |         },
 85 |       },
 86 |     ],
 87 |   },
 88 |   {
 89 |     path: '/blog',
 90 |     name: 'https://wyatex.work',
 91 |     component: layout,
 92 |     meta: {
 93 |       title: '作者博客',
 94 |       icon: () => h(blogger),
 95 |       isRoot: true,
 96 |     },
 97 |   },
 98 | ]
 99 | 
100 | export default routes
101 | 


--------------------------------------------------------------------------------
/src/assets/styles/transition/fade.scss:
--------------------------------------------------------------------------------
  1 | // ///////////////////////////////////////////////
  2 | // Fade Base
  3 | // ///////////////////////////////////////////////
  4 | .fade {
  5 |   &-enter-active,
  6 |   &-leave-active {
  7 |     transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
  8 |   }
  9 | 
 10 |   &-enter-from,
 11 |   &-leave-to {
 12 |     opacity: 0;
 13 |   }
 14 | }
 15 | 
 16 | // ///////////////////////////////////////////////
 17 | // Fade Left
 18 | // ///////////////////////////////////////////////
 19 | 
 20 | .fade-left-leave-active,
 21 | .fade-left-enter-active {
 22 |   transition: all 0.3s;
 23 | }
 24 | 
 25 | .fade-left-enter-from {
 26 |   opacity: 0;
 27 |   transform: translateX(30px);
 28 | }
 29 | 
 30 | .fade-left-leave-to {
 31 |   opacity: 0;
 32 |   transform: translateX(-30px);
 33 | }
 34 | 
 35 | // ///////////////////////////////////////////////
 36 | // Fade Right
 37 | // ///////////////////////////////////////////////
 38 | 
 39 | .fade-right-leave-active,
 40 | .fade-right-enter-active {
 41 |   transition: all 0.3s;
 42 | }
 43 | 
 44 | .fade-right-enter-from {
 45 |   opacity: 0;
 46 |   transform: translateX(-30px);
 47 | }
 48 | 
 49 | .fade-right-leave-to {
 50 |   opacity: 0;
 51 |   transform: translateX(30px);
 52 | }
 53 | 
 54 | // ///////////////////////////////////////////////
 55 | // Fade Top
 56 | // ///////////////////////////////////////////////
 57 | 
 58 | .fade-top-enter-active,
 59 | .fade-top-leave-active {
 60 |   transition: opacity 0.25s, transform 0.3s;
 61 | }
 62 | 
 63 | .fade-top-enter-from {
 64 |   opacity: 0;
 65 |   transform: translateY(10%);
 66 | }
 67 | 
 68 | .fade-top-leave-to {
 69 |   opacity: 0;
 70 |   transform: translateY(-10%);
 71 | }
 72 | 
 73 | // ///////////////////////////////////////////////
 74 | // Fade Bottom
 75 | // ///////////////////////////////////////////////
 76 | 
 77 | .fade-bottom-enter-active,
 78 | .fade-bottom-leave-active {
 79 |   transition: opacity 0.25s, transform 0.3s;
 80 | }
 81 | 
 82 | .fade-bottom-enter-from {
 83 |   opacity: 0;
 84 |   transform: translateY(-10%);
 85 | }
 86 | 
 87 | .fade-bottom-leave-to {
 88 |   opacity: 0;
 89 |   transform: translateY(10%);
 90 | }
 91 | 
 92 | // ///////////////////////////////////////////////
 93 | // Fade In
 94 | // ///////////////////////////////////////////////
 95 | 
 96 | .fade-in-leave-active,
 97 | .fade-in-enter-active {
 98 |   transition: all 0.28s;
 99 | }
100 | 
101 | .fade-in-enter-from {
102 |   opacity: 0;
103 |   transform: scale(0.8);
104 | }
105 | 
106 | .fade-in-leave-to {
107 |   opacity: 0;
108 |   transform: scale(1.2);
109 | }
110 | 
111 | // ///////////////////////////////////////////////
112 | // Fade Out
113 | // ///////////////////////////////////////////////
114 | 
115 | .fade-out-leave-active,
116 | .fade-out-enter-active {
117 |   transition: all 0.28s;
118 | }
119 | 
120 | .fade-out-enter-from {
121 |   opacity: 0;
122 |   transform: scale(1.2);
123 | }
124 | 
125 | .fade-out-leave-to {
126 |   opacity: 0;
127 |   transform: scale(0.8);
128 | }
129 | 


--------------------------------------------------------------------------------
/src/utils/is.ts:
--------------------------------------------------------------------------------
  1 | const toString = Object.prototype.toString
  2 | 
  3 | /**
  4 |  * @description: 判断值是否未某个类型
  5 |  */
  6 | export function is(val: unknown, type: string) {
  7 |   return toString.call(val) === `[object ${type}]`
  8 | }
  9 | 
 10 | /**
 11 |  * @description:  是否为函数
 12 |  */
 13 | export function isFunction<T = Function>(val: unknown): val is T {
 14 |   return is(val, 'Function')
 15 | }
 16 | 
 17 | /**
 18 |  * @description: 是否已定义
 19 |  */
 20 | export function isDef<T = unknown>(val?: T): val is T {
 21 |   return typeof val !== 'undefined'
 22 | }
 23 | 
 24 | export function isUnDef<T = unknown>(val?: T): val is T {
 25 |   return !isDef(val)
 26 | }
 27 | /**
 28 |  * @description: 是否为对象
 29 |  */
 30 | export function isObject<T = Record<string, any>>(val: unknown): val is T {
 31 |   return is(val, 'Object')
 32 | }
 33 | 
 34 | /**
 35 |  * @description:  是否为时间
 36 |  */
 37 | export function isDate(val: unknown): val is Date {
 38 |   return is(val, 'Date')
 39 | }
 40 | 
 41 | /**
 42 |  * @description:  是否为数值
 43 |  */
 44 | export function isNumber(val: unknown): val is number {
 45 |   return is(val, 'Number')
 46 | }
 47 | 
 48 | /**
 49 |  * @description:  是否为AsyncFunction
 50 |  */
 51 | export function isAsyncFunction<T = unknown, U = unknown>(
 52 |   val: unknown,
 53 | ): val is (...args: U[]) => Promise<T> {
 54 |   return is(val, 'AsyncFunction')
 55 | }
 56 | 
 57 | /**
 58 |  * @description:  是否为promise
 59 |  */
 60 | export function isPromise<T = unknown>(val: unknown): val is Promise<T> {
 61 |   return (
 62 |     is(val, 'Promise')
 63 |     && isObject(val)
 64 |     && isFunction(val.then)
 65 |     && isFunction(val.catch)
 66 |   )
 67 | }
 68 | 
 69 | /**
 70 |  * @description:  是否为字符串
 71 |  */
 72 | export function isString(val: unknown): val is string {
 73 |   return is(val, 'String')
 74 | }
 75 | 
 76 | /**
 77 |  * @description:  是否为boolean类型
 78 |  */
 79 | export function isBoolean(val: unknown): val is boolean {
 80 |   return is(val, 'Boolean')
 81 | }
 82 | 
 83 | /**
 84 |  * @description:  是否为数组
 85 |  */
 86 | export function isArray<T = unknown>(val: unknown): val is Array<T> {
 87 |   return Array.isArray(val)
 88 | }
 89 | 
 90 | export function isNull(val: unknown): val is null {
 91 |   return val === null
 92 | }
 93 | 
 94 | export function isNullOrUnDef(val: unknown): val is null | undefined {
 95 |   return isUnDef(val) || isNull(val)
 96 | }
 97 | 
 98 | /**
 99 |  * @description: 是否客户端
100 |  */
101 | export function isClient() {
102 |   return typeof window !== 'undefined'
103 | }
104 | 
105 | /**
106 |  * @description: 是否为浏览器
107 |  */
108 | export function isWindow(val: unknown): val is Window {
109 |   return typeof window !== 'undefined' && is(val, 'Window')
110 | }
111 | 
112 | export function isElement(val: unknown): val is Element {
113 |   return isObject(val) && !!val.tagName
114 | }
115 | 
116 | export const isServer = typeof window === 'undefined'
117 | 
118 | // 是否为图片节点
119 | export function isImageDom(o: Element) {
120 |   return o && ['IMAGE', 'IMG'].includes(o.tagName)
121 | }
122 | 


--------------------------------------------------------------------------------
/uno.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig, presetIcons, presetUno } from 'unocss'
 2 | import { FileSystemIconLoader } from 'unplugin-icons/loaders'
 3 | 
 4 | export default defineConfig({
 5 |   content: {
 6 |     pipeline: {
 7 |       exclude: ['node_modules', '.git', 'dist', 'mock', './stats.html'],
 8 |     },
 9 |   },
10 |   presets: [
11 |     presetUno({ dark: 'class' }),
12 |     presetIcons({
13 |       collections: {
14 |         custom: FileSystemIconLoader('./src/assets/svg', svg =>
15 |           svg.replace(/#fff/, 'currentColor')),
16 |       },
17 |     }),
18 |   ],
19 |   shortcuts: {
20 |     'wh-full': 'w-full h-full',
21 |     'flex-center': 'flex justify-center items-center',
22 |     'flex-col-center': 'flex-center flex-col',
23 |     'flex-x-center': 'flex justify-center',
24 |     'flex-y-center': 'flex items-center',
25 |     'i-flex-center': 'inline-flex justify-center items-center',
26 |     'i-flex-x-center': 'inline-flex justify-center',
27 |     'i-flex-y-center': 'inline-flex items-center',
28 |     'flex-col': 'flex flex-col',
29 |     'flex-col-stretch': 'flex-col items-stretch',
30 |     'i-flex-col': 'inline-flex flex-col',
31 |     'i-flex-col-stretch': 'i-flex-col items-stretch',
32 |     'flex-1-hidden': 'flex-1 overflow-hidden',
33 |     'absolute-lt': 'absolute left-0 top-0',
34 |     'absolute-lb': 'absolute left-0 bottom-0',
35 |     'absolute-rt': 'absolute right-0 top-0',
36 |     'absolute-rb': 'absolute right-0 bottom-0',
37 |     'absolute-tl': 'absolute-lt',
38 |     'absolute-tr': 'absolute-rt',
39 |     'absolute-bl': 'absolute-lb',
40 |     'absolute-br': 'absolute-rb',
41 |     'absolute-center': 'absolute-lt flex-center wh-full',
42 |     'fixed-lt': 'fixed left-0 top-0',
43 |     'fixed-lb': 'fixed left-0 bottom-0',
44 |     'fixed-rt': 'fixed right-0 top-0',
45 |     'fixed-rb': 'fixed right-0 bottom-0',
46 |     'fixed-tl': 'fixed-lt',
47 |     'fixed-tr': 'fixed-rt',
48 |     'fixed-bl': 'fixed-lb',
49 |     'fixed-br': 'fixed-rb',
50 |     'fixed-center': 'fixed-lt flex-center wh-full',
51 |     'nowrap-hidden': 'whitespace-nowrap overflow-hidden',
52 |     'ellipsis-text': 'nowrap-hidden overflow-ellipsis',
53 |     'transition-base': 'transition-all duration-300 ease-in-out',
54 |   },
55 |   theme: {
56 |     colors: {
57 |       primary: 'var(--primary-color)',
58 |       primary_hover: 'var(--primary-color-hover)',
59 |       primary_pressed: 'var(--primary-color-pressed)',
60 |       primary_active: 'var(--primary-color-active)',
61 |       info: 'var(--info-color)',
62 |       info_hover: 'var(--info-color-hover)',
63 |       info_pressed: 'var(--info-color-pressed)',
64 |       info_active: 'var(--info-color-active)',
65 |       success: 'var(--success-color)',
66 |       success_hover: 'var(--success-color-hover)',
67 |       success_pressed: 'var(--success-color-pressed)',
68 |       success_active: 'var(--success-color-active)',
69 |       warning: 'var(--warning-color)',
70 |       warning_hover: 'var(--warning-color-hover)',
71 |       warning_pressed: 'var(--warning-color-pressed)',
72 |       warning_active: 'var(--warning-color-active)',
73 |       error: 'var(--error-color)',
74 |       error_hover: 'var(--error-color-hover)',
75 |       error_pressed: 'var(--error-color-pressed)',
76 |       error_active: 'var(--error-color-active)',
77 |       dark: '#18181c',
78 |     },
79 |   },
80 | })
81 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue 3 Starter
  2 | 
  3 | [![Author](https://img.shields.io/badge/Author-Wyatex-green)](https://github.com/Wyatex/)
  4 | [![Issues](https://img.shields.io/github/issues/Wyatex/Vue3-starter)](https://github.com/Wyatex/Vue3-starter/issues)
  5 | [![License](https://img.shields.io/badge/License-MIT-yellowgreen)](https://github.com/Wyatex/Vue3-starter/blob/master/LICENSE)
  6 | 
  7 | > 一套集成了 Vite 3.x + Vue 3.x + TypeScript + Vue Router + Pinia + Axios + ESlint 等套件的快速开发模板。
  8 | 
  9 | [在线预览](https://vue3-pc-web-starter.wyatex.online/)
 10 | 
 11 | ## 快速开始
 12 | 
 13 | ### 使用cli创建项目
 14 | 
 15 | ```sh
 16 | pnpm create matrix-starter
 17 | ```
 18 | 
 19 | 选择 vue3 - PCWeb-NaiveUI
 20 | 
 21 | ### 安装依赖
 22 | 
 23 | ```sh
 24 | pnpm i
 25 | ```
 26 | 
 27 | ### 启动 dev 服务器和构建
 28 | 
 29 | 启动 dev 服务器
 30 | 
 31 | ```sh
 32 | pnpm dev
 33 | ```
 34 | 
 35 | 构建，默认打包到'./dist'
 36 | 
 37 | ```sh
 38 | pnpm build
 39 | ```
 40 | 
 41 | ## 技术栈
 42 | 
 43 | - 编程语言：[Typescript](https://www.typescriptlang.org/zh/) + [Javascript](https://www.javascript.com/)
 44 | - 构建工具：[Vite4](https://vitejs.cn/)
 45 | - 前端框架：[Vue3](https://v3.cn.vuejs.org/)
 46 | - 路由管理：[Vue-Router4](https://next.router.vuejs.org/zh/index.html)
 47 | - 状态管理：[pinia](https://pinia.esm.dev/)
 48 | - CSS 预处理：[Sass](https://sass-lang.com/)
 49 | - CSS 引擎：[UnoCSS](https://github.com/unocss/unocss)
 50 | - HTTP 工具：[Axios](https://axios-http.com/) + [Alova](https://alova.js.org/zh-CN/)
 51 | - JSX 处理：[@vitejs/plugin-vue-jsx](https://www.npmjs.com/package/@vitejs/plugin-vue-jsx)
 52 | - 代码规范：[ESLint](https://eslint.org/)
 53 | - 代码格式化：[Prettier](https://prettier.io/)
 54 | - 组件库：[Naive-UI](https://www.naiveui.com/)
 55 | - Icon 库：[@iconify/json](https://www.npmjs.com/package/@iconify/json) + [@iconify/vue](https://www.npmjs.com/package/@iconify/vue) + [unplugin-icons](https://github.com/antfu/unplugin-icons) + [unocss-icon](https://unocss.dev/presets/icons)
 56 | 
 57 | > icon 图标查找：[icones](https://icones.js.org/)
 58 | 
 59 | ## 项目配置
 60 | 
 61 | 目前的主要配置项：
 62 | 
 63 | - src/settings/index.ts
 64 | - .env(.development / .production)
 65 | - vite.config.ts
 66 | 
 67 | ## 图标使用
 68 | 
 69 | 如果是静态的 icon，可以使用 unplugin-icons 或者 unocss
 70 | 
 71 | ```html
 72 | <!-- unplugin-icons写法 -->
 73 | <i-ph-anchor-simple-thin />
 74 | <!-- unocss写法 -->
 75 | <div class="i-ph-anchor-simple-thin" />
 76 | <button class="i-carbon-sun dark:i-carbon-moon" />
 77 | ```
 78 | 
 79 | 如果是在 js/ts 引入 icon：
 80 | 
 81 | ```js
 82 | import IconAccessibility from '~icons/carbon/accessibility'
 83 | import IconAccountBox from '~icons/mdi/account-box'
 84 | // 可以给jsx / tsx用，项目已经安装jsx插件可以之间使用
 85 | 
 86 | const IconComponent = () => (
 87 |   <div>
 88 |     <IconAccessibility />
 89 |     <IconAccountBox style={{ fontSize: '2em', color: 'red' }} />
 90 |   </div>
 91 | )
 92 | ```
 93 | 
 94 | 动态 icon，可以根据一个字符串名字，运行时获取 icon 数据：
 95 | 
 96 | ```
 97 | <template>
 98 |   <Icon :icon="iconName" />
 99 | </template>
100 | <script setup>
101 | const iconName = ref('')
102 | // 省略.......
103 | iconName.value = getIconName()
104 | </script>
105 | ```
106 | 
107 | 上面的组件都可以用 unocss 快速设置样式：`class="w-10px h-10px text-red"`，icon 的宽高 10px，主色为红色
108 | 
109 | ## 打包
110 | 
111 | vite3 之后，生产和开发打包都统一使用 esbuild，无需安装 terser 进行压缩，速度更快，如果生产代码需要去除 console、debugger 等代码，直接配置 esbuild 即可。
112 | 
113 | ## UI 组件库
114 | 
115 | 本分支（master）使用的是 NaiveUI，后续会在其他分支使用其他的组件库，比如 ArcoDesign 和 Tdesign，敬请期待！
116 | 


--------------------------------------------------------------------------------
/src/utils/storage/index.ts:
--------------------------------------------------------------------------------
  1 | import { defaultCacheTime } from '@/settings'
  2 | 
  3 | const DEFAULT_CACHE_TIME = defaultCacheTime
  4 | 
  5 | /**
  6 |  * 创建本地缓存对象
  7 |  * @param {string=} prefixKey -
  8 |  * @param {object} [storage] - sessionStorage | localStorage
  9 |  */
 10 | export function createStorage({
 11 |   prefixKey = '',
 12 |   storage = localStorage,
 13 | } = {}) {
 14 |   /**
 15 |    * 本地缓存类
 16 |    * @class Storage
 17 |    */
 18 |   const Storage = class {
 19 |     private storage = storage
 20 |     private prefixKey?: string = prefixKey
 21 | 
 22 |     private getKey(key: string) {
 23 |       return `${this.prefixKey}${key}`.toUpperCase()
 24 |     }
 25 | 
 26 |     /**
 27 |      * @description 设置缓存
 28 |      * @param {string} key 缓存键
 29 |      * @param {*} value 缓存值
 30 |      * @param expire
 31 |      */
 32 |     set(
 33 |       key: string,
 34 |       value: unknown,
 35 |       expire: number | null = DEFAULT_CACHE_TIME,
 36 |     ) {
 37 |       const stringData = JSON.stringify({
 38 |         value,
 39 |         expire: expire !== null ? new Date().getTime() + expire * 1000 : null,
 40 |       })
 41 |       this.storage.setItem(this.getKey(key), stringData)
 42 |     }
 43 | 
 44 |     /**
 45 |      * 读取缓存
 46 |      * @param {string} key 缓存键
 47 |      * @param {*=} def 默认值
 48 |      */
 49 |     get(key: string, def: unknown = null) {
 50 |       const item = this.storage.getItem(this.getKey(key))
 51 |       if (item) {
 52 |         try {
 53 |           const data = JSON.parse(item)
 54 |           const { value, expire } = data
 55 |           // 在有效期内直接返回
 56 |           if (expire === null || expire >= Date.now())
 57 |             return value
 58 | 
 59 |           this.remove(this.getKey(key))
 60 |         }
 61 |         catch (e) {
 62 |           return def
 63 |         }
 64 |       }
 65 |       return def
 66 |     }
 67 | 
 68 |     /**
 69 |      * 从缓存删除某项
 70 |      * @param {string} key
 71 |      */
 72 |     remove(key: string) {
 73 |       this.storage.removeItem(this.getKey(key))
 74 |     }
 75 | 
 76 |     /**
 77 |      * 清空所有缓存
 78 |      * @memberOf Cache
 79 |      */
 80 |     clear(): void {
 81 |       this.storage.clear()
 82 |     }
 83 | 
 84 |     /**
 85 |      * 设置cookie
 86 |      * @param {string} name cookie 名称
 87 |      * @param {*} value cookie 值
 88 |      * @param {number=} expire 过期时间
 89 |      * 如果过期时间为设置，默认关闭浏览器自动删除
 90 |      * @example
 91 |      */
 92 |     setCookie(
 93 |       name: string,
 94 |       value: unknown,
 95 |       expire: number | null = DEFAULT_CACHE_TIME,
 96 |     ) {
 97 |       document.cookie = `${this.getKey(name)}=${value}; Max-Age=${expire}`
 98 |     }
 99 | 
100 |     /**
101 |      * 根据名字获取cookie值
102 |      * @param name
103 |      */
104 |     getCookie(name: string): string {
105 |       const cookieArr = document.cookie.split('; ')
106 |       for (let i = 0, length = cookieArr.length; i < length; i++) {
107 |         const kv = cookieArr[i].split('=')
108 |         if (kv[0] === this.getKey(name))
109 |           return kv[1]
110 |       }
111 |       return ''
112 |     }
113 | 
114 |     /**
115 |      * 根据名字删除指定的cookie
116 |      * @param {string} key
117 |      */
118 |     removeCookie(key: string) {
119 |       this.setCookie(key, 1, -1)
120 |     }
121 | 
122 |     /**
123 |      * 清空cookie，使所有cookie失效
124 |      */
125 |     clearCookie(): void {
126 |       const keys = document.cookie.match(/[^ =;]+(?==)/g)
127 |       if (keys) {
128 |         for (let i = keys.length; i--;)
129 |           document.cookie = `${keys[i]}=0;expire=${new Date(0).toUTCString()}`
130 |       }
131 |     }
132 |   }
133 |   return new Storage()
134 | }
135 | 
136 | export const storage = createStorage()
137 | 
138 | export default Storage
139 | 


--------------------------------------------------------------------------------
/src/layouts/components/LayoutHeader.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | defineProps<{
  3 |   collapsed: boolean
  4 |   inverted: boolean
  5 | }>()
  6 | defineEmits(['update:collapsed'])
  7 | const settingStore = useSettingStore()
  8 | const routeStore = useRouteStore()
  9 | function openGithub() {
 10 |   window.open('https://github.com/Wyatex/Vue3-starter')
 11 | }
 12 | function darkThemeSwitch() {
 13 |   settingStore.darkTheme = !settingStore.darkTheme
 14 | }
 15 | // 刷新页面
 16 | const { loading, startLoading, endLoading } = useLoading()
 17 | function reloadPage() {
 18 |   startLoading()
 19 |   routeStore.reloadPage()
 20 |   setTimeout(() => {
 21 |     endLoading()
 22 |   }, 1000)
 23 | }
 24 | 
 25 | const isFullScreen = ref(false)
 26 | // 切换全屏图标
 27 | function toggleFullscreenIcon() {
 28 |   return isFullScreen.value = document.fullscreenElement !== null
 29 | }
 30 | 
 31 | // 监听全屏切换事件
 32 | document.addEventListener('fullscreenchange', toggleFullscreenIcon)
 33 | 
 34 | // 全屏切换
 35 | function toggleFullScreen() {
 36 |   if (!document.fullscreenElement) {
 37 |     document.documentElement.requestFullscreen()
 38 |   }
 39 |   else {
 40 |     if (document.exitFullscreen)
 41 |       document.exitFullscreen()
 42 |   }
 43 | }
 44 | </script>
 45 | 
 46 | <template>
 47 |   <div
 48 |     class="z-11 h-64px w-full flex items-center justify-between p-0 shadow transition"
 49 |   >
 50 |     <div class="flex items-center">
 51 |       <!-- 菜单收起 -->
 52 |       <div
 53 |         class="ml-1 ml-24px h-64px flex-center cursor-pointer transition"
 54 |         @click="() => $emit('update:collapsed', !collapsed)"
 55 |       >
 56 |         <n-icon v-if="collapsed" size="20">
 57 |           <i-tabler:indent-increase />
 58 |         </n-icon>
 59 |         <n-icon v-else size="20">
 60 |           <i-tabler:indent-decrease />
 61 |         </n-icon>
 62 |       </div>
 63 |       <!-- 刷新 -->
 64 |       <div
 65 |         class="ml-24px h-64px flex-center cursor-pointer transition"
 66 |         @click="reloadPage"
 67 |       >
 68 |         <n-icon size="20">
 69 |           <i-ic:round-refresh :class="{ 'animate-spin': loading }" />
 70 |         </n-icon>
 71 |       </div>
 72 |       <!-- 切换全屏 -->
 73 |       <div
 74 |         class="ml-24px h-64px flex-center cursor-pointer transition"
 75 |         @click="toggleFullScreen"
 76 |       >
 77 |         <n-tooltip placement="bottom">
 78 |           <template #trigger>
 79 |             <n-icon size="20">
 80 |               <i-ant-design:fullscreen-outlined v-if="!isFullScreen" />
 81 |               <i-ant-design:fullscreen-exit-outlined v-else />
 82 |             </n-icon>
 83 |           </template>
 84 |           <span>全屏</span>
 85 |         </n-tooltip>
 86 |       </div>
 87 |     </div>
 88 |     <div class="flex items-center">
 89 |       <!-- 深色开关 -->
 90 |       <div
 91 |         class="mr-24px h-64px flex-center cursor-pointer transition"
 92 |         @click="darkThemeSwitch"
 93 |       >
 94 |         <div class="h-full flex items-center">
 95 |           <n-tooltip placement="bottom">
 96 |             <template #trigger>
 97 |               <n-icon size="20">
 98 |                 <i-line-md:sunny-filled-loop-to-moon-alt-filled-loop-transition
 99 |                   v-if="settingStore.darkTheme"
100 |                 />
101 |                 <i-line-md:moon-alt-to-sunny-outline-loop-transition v-else />
102 |               </n-icon>
103 |             </template>
104 |             <span> 深浅色切换 </span>
105 |           </n-tooltip>
106 |         </div>
107 |       </div>
108 |       <!-- github -->
109 |       <div
110 |         class="mr-24px h-64px flex-center cursor-pointer transition"
111 |         @click="openGithub"
112 |       >
113 |         <n-tooltip placement="bottom">
114 |           <template #trigger>
115 |             <n-icon size="20">
116 |               <i-line-md:github-loop />
117 |             </n-icon>
118 |           </template>
119 |           <span> github </span>
120 |         </n-tooltip>
121 |       </div>
122 |     </div>
123 |   </div>
124 | </template>
125 | 
126 | <style scoped></style>
127 | 


--------------------------------------------------------------------------------
/.eslintrc-auto-import.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "globals": {
  3 |     "Component": true,
  4 |     "ComponentPublicInstance": true,
  5 |     "ComputedRef": true,
  6 |     "EffectScope": true,
  7 |     "InjectionKey": true,
  8 |     "PropType": true,
  9 |     "Ref": true,
 10 |     "VNode": true,
 11 |     "acceptHMRUpdate": true,
 12 |     "asyncComputed": true,
 13 |     "autoResetRef": true,
 14 |     "computed": true,
 15 |     "computedAsync": true,
 16 |     "computedEager": true,
 17 |     "computedInject": true,
 18 |     "computedWithControl": true,
 19 |     "controlledComputed": true,
 20 |     "controlledRef": true,
 21 |     "createApp": true,
 22 |     "createEventHook": true,
 23 |     "createGlobalState": true,
 24 |     "createInjectionState": true,
 25 |     "createPinia": true,
 26 |     "createReactiveFn": true,
 27 |     "createReusableTemplate": true,
 28 |     "createSharedComposable": true,
 29 |     "createTemplatePromise": true,
 30 |     "createUnrefFn": true,
 31 |     "customRef": true,
 32 |     "debouncedRef": true,
 33 |     "debouncedWatch": true,
 34 |     "defineAsyncComponent": true,
 35 |     "defineComponent": true,
 36 |     "defineStore": true,
 37 |     "eagerComputed": true,
 38 |     "effectScope": true,
 39 |     "extendRef": true,
 40 |     "getActivePinia": true,
 41 |     "getCurrentInstance": true,
 42 |     "getCurrentScope": true,
 43 |     "h": true,
 44 |     "ignorableWatch": true,
 45 |     "inject": true,
 46 |     "isDefined": true,
 47 |     "isProxy": true,
 48 |     "isReactive": true,
 49 |     "isReadonly": true,
 50 |     "isRef": true,
 51 |     "makeDestructurable": true,
 52 |     "mapActions": true,
 53 |     "mapGetters": true,
 54 |     "mapState": true,
 55 |     "mapStores": true,
 56 |     "mapWritableState": true,
 57 |     "markRaw": true,
 58 |     "nextTick": true,
 59 |     "onActivated": true,
 60 |     "onBeforeMount": true,
 61 |     "onBeforeRouteLeave": true,
 62 |     "onBeforeRouteUpdate": true,
 63 |     "onBeforeUnmount": true,
 64 |     "onBeforeUpdate": true,
 65 |     "onClickOutside": true,
 66 |     "onDeactivated": true,
 67 |     "onErrorCaptured": true,
 68 |     "onKeyStroke": true,
 69 |     "onLongPress": true,
 70 |     "onMounted": true,
 71 |     "onRenderTracked": true,
 72 |     "onRenderTriggered": true,
 73 |     "onScopeDispose": true,
 74 |     "onServerPrefetch": true,
 75 |     "onStartTyping": true,
 76 |     "onUnmounted": true,
 77 |     "onUpdated": true,
 78 |     "pausableWatch": true,
 79 |     "provide": true,
 80 |     "reactify": true,
 81 |     "reactifyObject": true,
 82 |     "reactive": true,
 83 |     "reactiveComputed": true,
 84 |     "reactiveOmit": true,
 85 |     "reactivePick": true,
 86 |     "readonly": true,
 87 |     "ref": true,
 88 |     "refAutoReset": true,
 89 |     "refDebounced": true,
 90 |     "refDefault": true,
 91 |     "refThrottled": true,
 92 |     "refWithControl": true,
 93 |     "resolveComponent": true,
 94 |     "resolveRef": true,
 95 |     "resolveUnref": true,
 96 |     "setActivePinia": true,
 97 |     "setMapStoreSuffix": true,
 98 |     "shallowReactive": true,
 99 |     "shallowReadonly": true,
100 |     "shallowRef": true,
101 |     "storeToRefs": true,
102 |     "syncRef": true,
103 |     "syncRefs": true,
104 |     "templateRef": true,
105 |     "throttledRef": true,
106 |     "throttledWatch": true,
107 |     "toRaw": true,
108 |     "toReactive": true,
109 |     "toRef": true,
110 |     "toRefs": true,
111 |     "triggerRef": true,
112 |     "tryOnBeforeMount": true,
113 |     "tryOnBeforeUnmount": true,
114 |     "tryOnMounted": true,
115 |     "tryOnScopeDispose": true,
116 |     "tryOnUnmounted": true,
117 |     "unref": true,
118 |     "unrefElement": true,
119 |     "until": true,
120 |     "useActiveElement": true,
121 |     "useAnimate": true,
122 |     "useArrayDifference": true,
123 |     "useArrayEvery": true,
124 |     "useArrayFilter": true,
125 |     "useArrayFind": true,
126 |     "useArrayFindIndex": true,
127 |     "useArrayFindLast": true,
128 |     "useArrayIncludes": true,
129 |     "useArrayJoin": true,
130 |     "useArrayMap": true,
131 |     "useArrayReduce": true,
132 |     "useArraySome": true,
133 |     "useArrayUnique": true,
134 |     "useAsyncQueue": true,
135 |     "useAsyncState": true,
136 |     "useAttrs": true,
137 |     "useBase64": true,
138 |     "useBattery": true,
139 |     "useBluetooth": true,
140 |     "useBoolean": true,
141 |     "useBreakpoints": true,
142 |     "useBroadcastChannel": true,
143 |     "useBrowserLocation": true,
144 |     "useCached": true,
145 |     "useClipboard": true,
146 |     "useCloned": true,
147 |     "useColorMode": true,
148 |     "useConfirmDialog": true,
149 |     "useCounter": true,
150 |     "useCssModule": true,
151 |     "useCssVar": true,
152 |     "useCssVars": true,
153 |     "useCurrentElement": true,
154 |     "useCycleList": true,
155 |     "useDark": true,
156 |     "useDateFormat": true,
157 |     "useDebounce": true,
158 |     "useDebounceFn": true,
159 |     "useDebouncedRefHistory": true,
160 |     "useDeviceMotion": true,
161 |     "useDeviceOrientation": true,
162 |     "useDevicePixelRatio": true,
163 |     "useDevicesList": true,
164 |     "useDisplayMedia": true,
165 |     "useDocumentVisibility": true,
166 |     "useDraggable": true,
167 |     "useDropZone": true,
168 |     "useElementBounding": true,
169 |     "useElementByPoint": true,
170 |     "useElementHover": true,
171 |     "useElementSize": true,
172 |     "useElementVisibility": true,
173 |     "useEventBus": true,
174 |     "useEventListener": true,
175 |     "useEventSource": true,
176 |     "useEyeDropper": true,
177 |     "useFavicon": true,
178 |     "useFetch": true,
179 |     "useFileDialog": true,
180 |     "useFileSystemAccess": true,
181 |     "useFocus": true,
182 |     "useFocusWithin": true,
183 |     "useFps": true,
184 |     "useFullscreen": true,
185 |     "useGamepad": true,
186 |     "useGeolocation": true,
187 |     "useIdle": true,
188 |     "useImage": true,
189 |     "useInfiniteScroll": true,
190 |     "useIntersectionObserver": true,
191 |     "useInterval": true,
192 |     "useIntervalFn": true,
193 |     "useKeyModifier": true,
194 |     "useLastChanged": true,
195 |     "useLink": true,
196 |     "useLoading": true,
197 |     "useLocalStorage": true,
198 |     "useMagicKeys": true,
199 |     "useManualRefHistory": true,
200 |     "useMediaControls": true,
201 |     "useMediaQuery": true,
202 |     "useMemoize": true,
203 |     "useMemory": true,
204 |     "useMounted": true,
205 |     "useMouse": true,
206 |     "useMouseInElement": true,
207 |     "useMousePressed": true,
208 |     "useMutationObserver": true,
209 |     "useNavigatorLanguage": true,
210 |     "useNetwork": true,
211 |     "useNow": true,
212 |     "useObjectUrl": true,
213 |     "useOffsetPagination": true,
214 |     "useOnline": true,
215 |     "usePageLeave": true,
216 |     "useParallax": true,
217 |     "useParentElement": true,
218 |     "usePerformanceObserver": true,
219 |     "usePermission": true,
220 |     "usePointer": true,
221 |     "usePointerLock": true,
222 |     "usePointerSwipe": true,
223 |     "usePreferredColorScheme": true,
224 |     "usePreferredContrast": true,
225 |     "usePreferredDark": true,
226 |     "usePreferredLanguages": true,
227 |     "usePreferredReducedMotion": true,
228 |     "usePrevious": true,
229 |     "useRafFn": true,
230 |     "useRefHistory": true,
231 |     "useReload": true,
232 |     "useResizeObserver": true,
233 |     "useRoute": true,
234 |     "useRouteStore": true,
235 |     "useRouter": true,
236 |     "useScreenOrientation": true,
237 |     "useScreenSafeArea": true,
238 |     "useScriptTag": true,
239 |     "useScroll": true,
240 |     "useScrollLock": true,
241 |     "useSessionStorage": true,
242 |     "useSettingStore": true,
243 |     "useShare": true,
244 |     "useSlots": true,
245 |     "useSorted": true,
246 |     "useSpeechRecognition": true,
247 |     "useSpeechSynthesis": true,
248 |     "useStepper": true,
249 |     "useStorage": true,
250 |     "useStorageAsync": true,
251 |     "useStyleTag": true,
252 |     "useSupported": true,
253 |     "useSwipe": true,
254 |     "useTemplateRefsList": true,
255 |     "useTextDirection": true,
256 |     "useTextSelection": true,
257 |     "useTextareaAutosize": true,
258 |     "useThrottle": true,
259 |     "useThrottleFn": true,
260 |     "useThrottledRefHistory": true,
261 |     "useTimeAgo": true,
262 |     "useTimeout": true,
263 |     "useTimeoutFn": true,
264 |     "useTimeoutPoll": true,
265 |     "useTimestamp": true,
266 |     "useTitle": true,
267 |     "useToNumber": true,
268 |     "useToString": true,
269 |     "useToggle": true,
270 |     "useTransition": true,
271 |     "useUrlSearchParams": true,
272 |     "useUserMedia": true,
273 |     "useVModel": true,
274 |     "useVModels": true,
275 |     "useVibrate": true,
276 |     "useVirtualList": true,
277 |     "useWakeLock": true,
278 |     "useWebNotification": true,
279 |     "useWebSocket": true,
280 |     "useWebWorker": true,
281 |     "useWebWorkerFn": true,
282 |     "useWindowFocus": true,
283 |     "useWindowScroll": true,
284 |     "useWindowSize": true,
285 |     "watch": true,
286 |     "watchArray": true,
287 |     "watchAtMost": true,
288 |     "watchDebounced": true,
289 |     "watchDeep": true,
290 |     "watchEffect": true,
291 |     "watchIgnorable": true,
292 |     "watchImmediate": true,
293 |     "watchOnce": true,
294 |     "watchPausable": true,
295 |     "watchPostEffect": true,
296 |     "watchSyncEffect": true,
297 |     "watchThrottled": true,
298 |     "watchTriggerable": true,
299 |     "watchWithFilter": true,
300 |     "whenever": true,
301 |     "ExtractDefaultPropTypes": true,
302 |     "ExtractPropTypes": true,
303 |     "ExtractPublicPropTypes": true,
304 |     "WritableComputedRef": true,
305 |     "injectLocal": true,
306 |     "provideLocal": true,
307 |     "toValue": true,
308 |     "useClipboardItems": true,
309 |     "useDialog": true,
310 |     "useLoadingBar": true,
311 |     "useMessage": true,
312 |     "useNotification": true
313 |   }
314 | }
315 | 


--------------------------------------------------------------------------------
/typings/auto-imports.d.ts:
--------------------------------------------------------------------------------
  1 | /* eslint-disable */
  2 | /* prettier-ignore */
  3 | // @ts-nocheck
  4 | // noinspection JSUnusedGlobalSymbols
  5 | // Generated by unplugin-auto-import
  6 | export {}
  7 | declare global {
  8 |   const EffectScope: typeof import('vue')['EffectScope']
  9 |   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
 10 |   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
 11 |   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
 12 |   const computed: typeof import('vue')['computed']
 13 |   const computedAsync: typeof import('@vueuse/core')['computedAsync']
 14 |   const computedEager: typeof import('@vueuse/core')['computedEager']
 15 |   const computedInject: typeof import('@vueuse/core')['computedInject']
 16 |   const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
 17 |   const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
 18 |   const controlledRef: typeof import('@vueuse/core')['controlledRef']
 19 |   const createApp: typeof import('vue')['createApp']
 20 |   const createEventHook: typeof import('@vueuse/core')['createEventHook']
 21 |   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
 22 |   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
 23 |   const createPinia: typeof import('pinia')['createPinia']
 24 |   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
 25 |   const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
 26 |   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
 27 |   const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
 28 |   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
 29 |   const customRef: typeof import('vue')['customRef']
 30 |   const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
 31 |   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
 32 |   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
 33 |   const defineComponent: typeof import('vue')['defineComponent']
 34 |   const defineStore: typeof import('pinia')['defineStore']
 35 |   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
 36 |   const effectScope: typeof import('vue')['effectScope']
 37 |   const extendRef: typeof import('@vueuse/core')['extendRef']
 38 |   const getActivePinia: typeof import('pinia')['getActivePinia']
 39 |   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
 40 |   const getCurrentScope: typeof import('vue')['getCurrentScope']
 41 |   const h: typeof import('vue')['h']
 42 |   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
 43 |   const inject: typeof import('vue')['inject']
 44 |   const injectLocal: typeof import('@vueuse/core')['injectLocal']
 45 |   const isDefined: typeof import('@vueuse/core')['isDefined']
 46 |   const isProxy: typeof import('vue')['isProxy']
 47 |   const isReactive: typeof import('vue')['isReactive']
 48 |   const isReadonly: typeof import('vue')['isReadonly']
 49 |   const isRef: typeof import('vue')['isRef']
 50 |   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
 51 |   const mapActions: typeof import('pinia')['mapActions']
 52 |   const mapGetters: typeof import('pinia')['mapGetters']
 53 |   const mapState: typeof import('pinia')['mapState']
 54 |   const mapStores: typeof import('pinia')['mapStores']
 55 |   const mapWritableState: typeof import('pinia')['mapWritableState']
 56 |   const markRaw: typeof import('vue')['markRaw']
 57 |   const nextTick: typeof import('vue')['nextTick']
 58 |   const onActivated: typeof import('vue')['onActivated']
 59 |   const onBeforeMount: typeof import('vue')['onBeforeMount']
 60 |   const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
 61 |   const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
 62 |   const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
 63 |   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
 64 |   const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
 65 |   const onDeactivated: typeof import('vue')['onDeactivated']
 66 |   const onErrorCaptured: typeof import('vue')['onErrorCaptured']
 67 |   const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
 68 |   const onLongPress: typeof import('@vueuse/core')['onLongPress']
 69 |   const onMounted: typeof import('vue')['onMounted']
 70 |   const onRenderTracked: typeof import('vue')['onRenderTracked']
 71 |   const onRenderTriggered: typeof import('vue')['onRenderTriggered']
 72 |   const onScopeDispose: typeof import('vue')['onScopeDispose']
 73 |   const onServerPrefetch: typeof import('vue')['onServerPrefetch']
 74 |   const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
 75 |   const onUnmounted: typeof import('vue')['onUnmounted']
 76 |   const onUpdated: typeof import('vue')['onUpdated']
 77 |   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
 78 |   const provide: typeof import('vue')['provide']
 79 |   const provideLocal: typeof import('@vueuse/core')['provideLocal']
 80 |   const reactify: typeof import('@vueuse/core')['reactify']
 81 |   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
 82 |   const reactive: typeof import('vue')['reactive']
 83 |   const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
 84 |   const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
 85 |   const reactivePick: typeof import('@vueuse/core')['reactivePick']
 86 |   const readonly: typeof import('vue')['readonly']
 87 |   const ref: typeof import('vue')['ref']
 88 |   const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
 89 |   const refDebounced: typeof import('@vueuse/core')['refDebounced']
 90 |   const refDefault: typeof import('@vueuse/core')['refDefault']
 91 |   const refThrottled: typeof import('@vueuse/core')['refThrottled']
 92 |   const refWithControl: typeof import('@vueuse/core')['refWithControl']
 93 |   const resolveComponent: typeof import('vue')['resolveComponent']
 94 |   const resolveRef: typeof import('@vueuse/core')['resolveRef']
 95 |   const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
 96 |   const setActivePinia: typeof import('pinia')['setActivePinia']
 97 |   const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
 98 |   const shallowReactive: typeof import('vue')['shallowReactive']
 99 |   const shallowReadonly: typeof import('vue')['shallowReadonly']
100 |   const shallowRef: typeof import('vue')['shallowRef']
101 |   const storeToRefs: typeof import('pinia')['storeToRefs']
102 |   const syncRef: typeof import('@vueuse/core')['syncRef']
103 |   const syncRefs: typeof import('@vueuse/core')['syncRefs']
104 |   const templateRef: typeof import('@vueuse/core')['templateRef']
105 |   const throttledRef: typeof import('@vueuse/core')['throttledRef']
106 |   const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
107 |   const toRaw: typeof import('vue')['toRaw']
108 |   const toReactive: typeof import('@vueuse/core')['toReactive']
109 |   const toRef: typeof import('vue')['toRef']
110 |   const toRefs: typeof import('vue')['toRefs']
111 |   const toValue: typeof import('vue')['toValue']
112 |   const triggerRef: typeof import('vue')['triggerRef']
113 |   const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
114 |   const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
115 |   const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
116 |   const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
117 |   const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
118 |   const unref: typeof import('vue')['unref']
119 |   const unrefElement: typeof import('@vueuse/core')['unrefElement']
120 |   const until: typeof import('@vueuse/core')['until']
121 |   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
122 |   const useAnimate: typeof import('@vueuse/core')['useAnimate']
123 |   const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
124 |   const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
125 |   const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
126 |   const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
127 |   const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
128 |   const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
129 |   const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
130 |   const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
131 |   const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
132 |   const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
133 |   const useArraySome: typeof import('@vueuse/core')['useArraySome']
134 |   const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
135 |   const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
136 |   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
137 |   const useAttrs: typeof import('vue')['useAttrs']
138 |   const useBase64: typeof import('@vueuse/core')['useBase64']
139 |   const useBattery: typeof import('@vueuse/core')['useBattery']
140 |   const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
141 |   const useBoolean: typeof import('../src/hooks/common/useBoolean')['useBoolean']
142 |   const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
143 |   const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
144 |   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
145 |   const useCached: typeof import('@vueuse/core')['useCached']
146 |   const useClipboard: typeof import('@vueuse/core')['useClipboard']
147 |   const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
148 |   const useCloned: typeof import('@vueuse/core')['useCloned']
149 |   const useColorMode: typeof import('@vueuse/core')['useColorMode']
150 |   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
151 |   const useCounter: typeof import('@vueuse/core')['useCounter']
152 |   const useCssModule: typeof import('vue')['useCssModule']
153 |   const useCssVar: typeof import('@vueuse/core')['useCssVar']
154 |   const useCssVars: typeof import('vue')['useCssVars']
155 |   const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
156 |   const useCycleList: typeof import('@vueuse/core')['useCycleList']
157 |   const useDark: typeof import('@vueuse/core')['useDark']
158 |   const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
159 |   const useDebounce: typeof import('@vueuse/core')['useDebounce']
160 |   const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
161 |   const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
162 |   const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
163 |   const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
164 |   const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
165 |   const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
166 |   const useDialog: typeof import('naive-ui')['useDialog']
167 |   const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
168 |   const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
169 |   const useDraggable: typeof import('@vueuse/core')['useDraggable']
170 |   const useDropZone: typeof import('@vueuse/core')['useDropZone']
171 |   const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
172 |   const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
173 |   const useElementHover: typeof import('@vueuse/core')['useElementHover']
174 |   const useElementSize: typeof import('@vueuse/core')['useElementSize']
175 |   const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
176 |   const useEventBus: typeof import('@vueuse/core')['useEventBus']
177 |   const useEventListener: typeof import('@vueuse/core')['useEventListener']
178 |   const useEventSource: typeof import('@vueuse/core')['useEventSource']
179 |   const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
180 |   const useFavicon: typeof import('@vueuse/core')['useFavicon']
181 |   const useFetch: typeof import('@vueuse/core')['useFetch']
182 |   const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
183 |   const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
184 |   const useFocus: typeof import('@vueuse/core')['useFocus']
185 |   const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
186 |   const useFps: typeof import('@vueuse/core')['useFps']
187 |   const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
188 |   const useGamepad: typeof import('@vueuse/core')['useGamepad']
189 |   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
190 |   const useIdle: typeof import('@vueuse/core')['useIdle']
191 |   const useImage: typeof import('@vueuse/core')['useImage']
192 |   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
193 |   const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
194 |   const useInterval: typeof import('@vueuse/core')['useInterval']
195 |   const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
196 |   const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
197 |   const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
198 |   const useLink: typeof import('vue-router')['useLink']
199 |   const useLoading: typeof import('../src/hooks/common/useLoading')['useLoading']
200 |   const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
201 |   const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
202 |   const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
203 |   const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
204 |   const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
205 |   const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
206 |   const useMemoize: typeof import('@vueuse/core')['useMemoize']
207 |   const useMemory: typeof import('@vueuse/core')['useMemory']
208 |   const useMessage: typeof import('naive-ui')['useMessage']
209 |   const useMounted: typeof import('@vueuse/core')['useMounted']
210 |   const useMouse: typeof import('@vueuse/core')['useMouse']
211 |   const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
212 |   const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
213 |   const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
214 |   const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
215 |   const useNetwork: typeof import('@vueuse/core')['useNetwork']
216 |   const useNotification: typeof import('naive-ui')['useNotification']
217 |   const useNow: typeof import('@vueuse/core')['useNow']
218 |   const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
219 |   const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
220 |   const useOnline: typeof import('@vueuse/core')['useOnline']
221 |   const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
222 |   const useParallax: typeof import('@vueuse/core')['useParallax']
223 |   const useParentElement: typeof import('@vueuse/core')['useParentElement']
224 |   const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
225 |   const usePermission: typeof import('@vueuse/core')['usePermission']
226 |   const usePointer: typeof import('@vueuse/core')['usePointer']
227 |   const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
228 |   const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
229 |   const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
230 |   const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
231 |   const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
232 |   const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
233 |   const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
234 |   const usePrevious: typeof import('@vueuse/core')['usePrevious']
235 |   const useRafFn: typeof import('@vueuse/core')['useRafFn']
236 |   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
237 |   const useReload: typeof import('../src/hooks/common/useReload')['useReload']
238 |   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
239 |   const useRoute: typeof import('vue-router')['useRoute']
240 |   const useRouteStore: typeof import('../src/store/modules/route')['useRouteStore']
241 |   const useRouter: typeof import('vue-router')['useRouter']
242 |   const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
243 |   const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
244 |   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
245 |   const useScroll: typeof import('@vueuse/core')['useScroll']
246 |   const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
247 |   const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
248 |   const useSettingStore: typeof import('../src/store/modules/setting')['useSettingStore']
249 |   const useShare: typeof import('@vueuse/core')['useShare']
250 |   const useSlots: typeof import('vue')['useSlots']
251 |   const useSorted: typeof import('@vueuse/core')['useSorted']
252 |   const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
253 |   const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
254 |   const useStepper: typeof import('@vueuse/core')['useStepper']
255 |   const useStorage: typeof import('@vueuse/core')['useStorage']
256 |   const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
257 |   const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
258 |   const useSupported: typeof import('@vueuse/core')['useSupported']
259 |   const useSwipe: typeof import('@vueuse/core')['useSwipe']
260 |   const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
261 |   const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
262 |   const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
263 |   const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
264 |   const useThrottle: typeof import('@vueuse/core')['useThrottle']
265 |   const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
266 |   const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
267 |   const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
268 |   const useTimeout: typeof import('@vueuse/core')['useTimeout']
269 |   const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
270 |   const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
271 |   const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
272 |   const useTitle: typeof import('@vueuse/core')['useTitle']
273 |   const useToNumber: typeof import('@vueuse/core')['useToNumber']
274 |   const useToString: typeof import('@vueuse/core')['useToString']
275 |   const useToggle: typeof import('@vueuse/core')['useToggle']
276 |   const useTransition: typeof import('@vueuse/core')['useTransition']
277 |   const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
278 |   const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
279 |   const useVModel: typeof import('@vueuse/core')['useVModel']
280 |   const useVModels: typeof import('@vueuse/core')['useVModels']
281 |   const useVibrate: typeof import('@vueuse/core')['useVibrate']
282 |   const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
283 |   const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
284 |   const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
285 |   const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
286 |   const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
287 |   const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
288 |   const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
289 |   const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
290 |   const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
291 |   const watch: typeof import('vue')['watch']
292 |   const watchArray: typeof import('@vueuse/core')['watchArray']
293 |   const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
294 |   const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
295 |   const watchDeep: typeof import('@vueuse/core')['watchDeep']
296 |   const watchEffect: typeof import('vue')['watchEffect']
297 |   const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
298 |   const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
299 |   const watchOnce: typeof import('@vueuse/core')['watchOnce']
300 |   const watchPausable: typeof import('@vueuse/core')['watchPausable']
301 |   const watchPostEffect: typeof import('vue')['watchPostEffect']
302 |   const watchSyncEffect: typeof import('vue')['watchSyncEffect']
303 |   const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
304 |   const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
305 |   const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
306 |   const whenever: typeof import('@vueuse/core')['whenever']
307 | }
308 | // for type re-export
309 | declare global {
310 |   // @ts-ignore
311 |   export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
312 |   import('vue')
313 | }
314 | 


--------------------------------------------------------------------------------