脚手架搭建

2026-02-12 14:29:45 +08:00 · 2026-02-12 14:29:45 +08:00 · 451f28151c
parent b9279b355e
commit 451f28151c
67 changed files with 7317 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,8 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+max_line_length = 100
--- a/.env
+++ b/.env
@ -0,0 +1,9 @@
+# 开发环境配置
+VITE_DEV_API_BASE_URL=http://localhost:3000/api
+VITE_DEV_DEBUG=true
+VITE_DEV_REQUEST_TIMEOUT=5000
+
+# 生产环境配置
+VITE_PROD_API_BASE_URL=https://your-api-domain.com/api
+VITE_PROD_DEBUG=false
+VITE_PROD_REQUEST_TIMEOUT=10000
--- a/.eslintrc-auto-import.json
+++ b/.eslintrc-auto-import.json
@ -0,0 +1,325 @@
+{
+  "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "DirectiveBinding": true,
+    "EffectScope": true,
+    "ElNotification": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
+    "InjectionKey": true,
+    "MaybeRef": true,
+    "MaybeRefOrGetter": true,
+    "PropType": true,
+    "Ref": true,
+    "ShallowRef": true,
+    "Slot": true,
+    "Slots": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "acceptHMRUpdate": true,
+    "asyncComputed": true,
+    "autoResetRef": true,
+    "computed": true,
+    "computedAsync": true,
+    "computedEager": true,
+    "computedInject": true,
+    "computedWithControl": true,
+    "controlledComputed": true,
+    "controlledRef": true,
+    "createApp": true,
+    "createEventHook": true,
+    "createGlobalState": true,
+    "createInjectionState": true,
+    "createPinia": true,
+    "createReactiveFn": true,
+    "createRef": true,
+    "createReusableTemplate": true,
+    "createSharedComposable": true,
+    "createTemplatePromise": true,
+    "createUnrefFn": true,
+    "customRef": true,
+    "debouncedRef": true,
+    "debouncedWatch": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "defineStore": true,
+    "eagerComputed": true,
+    "effectScope": true,
+    "extendRef": true,
+    "getActivePinia": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "getCurrentWatcher": true,
+    "h": true,
+    "ignorableWatch": true,
+    "inject": true,
+    "injectLocal": true,
+    "isDefined": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "isShallow": true,
+    "makeDestructurable": true,
+    "mapActions": true,
+    "mapGetters": true,
+    "mapState": true,
+    "mapStores": true,
+    "mapWritableState": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeRouteLeave": true,
+    "onBeforeRouteUpdate": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onClickOutside": true,
+    "onDeactivated": true,
+    "onElementRemoval": true,
+    "onErrorCaptured": true,
+    "onKeyStroke": true,
+    "onLongPress": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onStartTyping": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "onWatcherCleanup": true,
+    "pausableWatch": true,
+    "provide": true,
+    "provideLocal": true,
+    "reactify": true,
+    "reactifyObject": true,
+    "reactive": true,
+    "reactiveComputed": true,
+    "reactiveOmit": true,
+    "reactivePick": true,
+    "readonly": true,
+    "ref": true,
+    "refAutoReset": true,
+    "refDebounced": true,
+    "refDefault": true,
+    "refManualReset": true,
+    "refThrottled": true,
+    "refWithControl": true,
+    "resolveComponent": true,
+    "resolveRef": true,
+    "setActivePinia": true,
+    "setMapStoreSuffix": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "storeToRefs": true,
+    "syncRef": true,
+    "syncRefs": true,
+    "templateRef": true,
+    "throttledRef": true,
+    "throttledWatch": true,
+    "toRaw": true,
+    "toReactive": true,
+    "toRef": true,
+    "toRefs": true,
+    "toValue": true,
+    "triggerRef": true,
+    "tryOnBeforeMount": true,
+    "tryOnBeforeUnmount": true,
+    "tryOnMounted": true,
+    "tryOnScopeDispose": true,
+    "tryOnUnmounted": true,
+    "unref": true,
+    "unrefElement": true,
+    "until": true,
+    "useActiveElement": true,
+    "useAnimate": true,
+    "useArrayDifference": true,
+    "useArrayEvery": true,
+    "useArrayFilter": true,
+    "useArrayFind": true,
+    "useArrayFindIndex": true,
+    "useArrayFindLast": true,
+    "useArrayIncludes": true,
+    "useArrayJoin": true,
+    "useArrayMap": true,
+    "useArrayReduce": true,
+    "useArraySome": true,
+    "useArrayUnique": true,
+    "useAsyncQueue": true,
+    "useAsyncState": true,
+    "useAttrs": true,
+    "useBase64": true,
+    "useBattery": true,
+    "useBluetooth": true,
+    "useBreakpoints": true,
+    "useBroadcastChannel": true,
+    "useBrowserLocation": true,
+    "useCached": true,
+    "useClipboard": true,
+    "useClipboardItems": true,
+    "useCloned": true,
+    "useColorMode": true,
+    "useConfirmDialog": true,
+    "useCountdown": true,
+    "useCounter": true,
+    "useCssModule": true,
+    "useCssSupports": true,
+    "useCssVar": true,
+    "useCssVars": true,
+    "useCurrentElement": true,
+    "useCycleList": true,
+    "useDark": true,
+    "useDateFormat": true,
+    "useDebounce": true,
+    "useDebounceFn": true,
+    "useDebouncedRefHistory": true,
+    "useDeviceMotion": true,
+    "useDeviceOrientation": true,
+    "useDevicePixelRatio": true,
+    "useDevicesList": true,
+    "useDisplayMedia": true,
+    "useDocumentVisibility": true,
+    "useDraggable": true,
+    "useDropZone": true,
+    "useElementBounding": true,
+    "useElementByPoint": true,
+    "useElementHover": true,
+    "useElementSize": true,
+    "useElementVisibility": true,
+    "useEventBus": true,
+    "useEventListener": true,
+    "useEventSource": true,
+    "useEyeDropper": true,
+    "useFavicon": true,
+    "useFetch": true,
+    "useFileDialog": true,
+    "useFileSystemAccess": true,
+    "useFocus": true,
+    "useFocusWithin": true,
+    "useFps": true,
+    "useFullscreen": true,
+    "useGamepad": true,
+    "useGeolocation": true,
+    "useId": true,
+    "useIdle": true,
+    "useImage": true,
+    "useInfiniteScroll": true,
+    "useIntersectionObserver": true,
+    "useInterval": true,
+    "useIntervalFn": true,
+    "useKeyModifier": true,
+    "useLastChanged": true,
+    "useLink": true,
+    "useLocalStorage": true,
+    "useMagicKeys": true,
+    "useManualRefHistory": true,
+    "useMediaControls": true,
+    "useMediaQuery": true,
+    "useMemoize": true,
+    "useMemory": true,
+    "useModel": true,
+    "useMounted": true,
+    "useMouse": true,
+    "useMouseInElement": true,
+    "useMousePressed": true,
+    "useMutationObserver": true,
+    "useNavigatorLanguage": true,
+    "useNetwork": true,
+    "useNow": true,
+    "useObjectUrl": true,
+    "useOffsetPagination": true,
+    "useOnline": true,
+    "usePageLeave": true,
+    "useParallax": true,
+    "useParentElement": true,
+    "usePerformanceObserver": true,
+    "usePermission": true,
+    "usePointer": true,
+    "usePointerLock": true,
+    "usePointerSwipe": true,
+    "usePreferredColorScheme": true,
+    "usePreferredContrast": true,
+    "usePreferredDark": true,
+    "usePreferredLanguages": true,
+    "usePreferredReducedMotion": true,
+    "usePreferredReducedTransparency": true,
+    "usePrevious": true,
+    "useRafFn": true,
+    "useRefHistory": true,
+    "useResizeObserver": true,
+    "useRoute": true,
+    "useRouter": true,
+    "useSSRWidth": true,
+    "useScreenOrientation": true,
+    "useScreenSafeArea": true,
+    "useScriptTag": true,
+    "useScroll": true,
+    "useScrollLock": true,
+    "useSessionStorage": true,
+    "useShare": true,
+    "useSlots": true,
+    "useSorted": true,
+    "useSpeechRecognition": true,
+    "useSpeechSynthesis": true,
+    "useStepper": true,
+    "useStorage": true,
+    "useStorageAsync": true,
+    "useStyleTag": true,
+    "useSupported": true,
+    "useSwipe": true,
+    "useTemplateRef": true,
+    "useTemplateRefsList": true,
+    "useTextDirection": true,
+    "useTextSelection": true,
+    "useTextareaAutosize": true,
+    "useThrottle": true,
+    "useThrottleFn": true,
+    "useThrottledRefHistory": true,
+    "useTimeAgo": true,
+    "useTimeAgoIntl": true,
+    "useTimeout": true,
+    "useTimeoutFn": true,
+    "useTimeoutPoll": true,
+    "useTimestamp": true,
+    "useTitle": true,
+    "useToNumber": true,
+    "useToString": true,
+    "useToggle": true,
+    "useTransition": true,
+    "useUrlSearchParams": true,
+    "useUserMedia": true,
+    "useVModel": true,
+    "useVModels": true,
+    "useVibrate": true,
+    "useVirtualList": true,
+    "useWakeLock": true,
+    "useWebNotification": true,
+    "useWebSocket": true,
+    "useWebWorker": true,
+    "useWebWorkerFn": true,
+    "useWindowFocus": true,
+    "useWindowScroll": true,
+    "useWindowSize": true,
+    "watch": true,
+    "watchArray": true,
+    "watchAtMost": true,
+    "watchDebounced": true,
+    "watchDeep": true,
+    "watchEffect": true,
+    "watchIgnorable": true,
+    "watchImmediate": true,
+    "watchOnce": true,
+    "watchPausable": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true,
+    "watchThrottled": true,
+    "watchTriggerable": true,
+    "watchWithFilter": true,
+    "whenever": true
+  }
+}
--- a/.gitattributes
+++ b/.gitattributes
@ -0,0 +1 @@
+* text=auto eol=lf
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,43 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+*.vscode
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+.eslintcache
+
+# Cypress
+/cypress/videos/
+/cypress/screenshots/
+
+# Vitest
+__screenshots__/
+
+# Vite
+*.timestamp-*-*.mjs
+
+##auto
+auto-imports.d.ts
+components.d.ts
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@ -0,0 +1,10 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["eslint", "typescript", "unicorn", "oxc", "vue"],
+  "env": {
+    "browser": true
+  },
+  "categories": {
+    "correctness": "error"
+  }
+}
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}
--- a/admin-system/.editorconfig
+++ b/admin-system/.editorconfig
@ -0,0 +1,8 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+max_line_length = 100
--- a/admin-system/.gitattributes
+++ b/admin-system/.gitattributes
@ -0,0 +1 @@
+* text=auto eol=lf
--- a/admin-system/.gitignore
+++ b/admin-system/.gitignore
@ -0,0 +1,39 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+.eslintcache
+
+# Cypress
+/cypress/videos/
+/cypress/screenshots/
+
+# Vitest
+__screenshots__/
+
+# Vite
+*.timestamp-*-*.mjs
--- a/admin-system/.oxlintrc.json
+++ b/admin-system/.oxlintrc.json
@ -0,0 +1,10 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["eslint", "typescript", "unicorn", "oxc", "vue"],
+  "env": {
+    "browser": true
+  },
+  "categories": {
+    "correctness": "error"
+  }
+}
--- a/admin-system/.prettierrc.json
+++ b/admin-system/.prettierrc.json
@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}
--- a/admin-system/README.md
+++ b/admin-system/README.md
@ -0,0 +1,48 @@
+# admin-system
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Recommended Browser Setup
+
+- Chromium-based browsers (Chrome, Edge, Brave, etc.):
+  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
+  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
+- Firefox:
+  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
+  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+pnpm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+pnpm dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+pnpm build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+pnpm lint
+```
--- a/admin-system/env.d.ts
+++ b/admin-system/env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/admin-system/eslint.config.ts
+++ b/admin-system/eslint.config.ts
@ -0,0 +1,26 @@
+import { globalIgnores } from 'eslint/config'
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
+import pluginVue from 'eslint-plugin-vue'
+import pluginOxlint from 'eslint-plugin-oxlint'
+import skipFormatting from 'eslint-config-prettier/flat'
+
+// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
+// import { configureVueProject } from '@vue/eslint-config-typescript'
+// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
+// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
+
+export default defineConfigWithVueTs(
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{vue,ts,mts,tsx}'],
+  },
+
+  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
+
+  ...pluginVue.configs['flat/essential'],
+  vueTsConfigs.recommended,
+
+  ...pluginOxlint.buildFromOxlintConfigFile('.oxlintrc.json'),
+
+  skipFormatting,
+)
--- a/admin-system/index.html
+++ b/admin-system/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/admin-system/package.json
+++ b/admin-system/package.json
@ -0,0 +1,44 @@
+{
+  "name": "admin-system",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "lint": "run-s lint:*",
+    "lint:oxlint": "oxlint . --fix",
+    "lint:eslint": "eslint . --fix --cache",
+    "format": "prettier --write --experimental-cli src/"
+  },
+  "dependencies": {
+    "pinia": "^3.0.4",
+    "vue": "^3.5.27",
+    "vue-router": "^5.0.1"
+  },
+  "devDependencies": {
+    "@tsconfig/node24": "^24.0.4",
+    "@types/node": "^24.10.9",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vue/eslint-config-typescript": "^14.6.0",
+    "@vue/tsconfig": "^0.8.1",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-oxlint": "~1.42.0",
+    "eslint-plugin-vue": "~10.7.0",
+    "jiti": "^2.6.1",
+    "npm-run-all2": "^8.0.4",
+    "oxlint": "~1.42.0",
+    "prettier": "3.8.1",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-vue-devtools": "^8.0.5",
+    "vue-tsc": "^3.2.4"
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  }
+}
--- a/admin-system/public/favicon.ico
+++ b/admin-system/public/favicon.ico
--- a/admin-system/src/App.vue
+++ b/admin-system/src/App.vue
@ -0,0 +1,11 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>You did it!</h1>
+  <p>
+    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
+    documentation
+  </p>
+</template>
+
+<style scoped></style>
--- a/admin-system/src/main.ts
+++ b/admin-system/src/main.ts
@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')
--- a/admin-system/src/router/index.ts
+++ b/admin-system/src/router/index.ts
@ -0,0 +1,8 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [],
+})
+
+export default router
--- a/admin-system/src/stores/counter.ts
+++ b/admin-system/src/stores/counter.ts
@ -0,0 +1,12 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})
--- a/admin-system/tsconfig.app.json
+++ b/admin-system/tsconfig.app.json
@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
--- a/admin-system/tsconfig.json
+++ b/admin-system/tsconfig.json
@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}
--- a/admin-system/tsconfig.node.json
+++ b/admin-system/tsconfig.node.json
@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node24/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*",
+    "eslint.config.*"
+  ],
+  "compilerOptions": {
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}
--- a/admin-system/vite.config.ts
+++ b/admin-system/vite.config.ts
@ -0,0 +1,18 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+  },
+})
--- a/env.d.ts
+++ b/env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/eslint.config.ts
+++ b/eslint.config.ts
@ -0,0 +1,26 @@
+import { globalIgnores } from 'eslint/config'
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
+import pluginVue from 'eslint-plugin-vue'
+import pluginOxlint from 'eslint-plugin-oxlint'
+import skipFormatting from 'eslint-config-prettier/flat'
+
+// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
+// import { configureVueProject } from '@vue/eslint-config-typescript'
+// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
+// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
+
+export default defineConfigWithVueTs(
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{vue,ts,mts,tsx}'],
+  },
+
+  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
+
+  ...pluginVue.configs['flat/essential'],
+  vueTsConfigs.recommended,
+
+  ...pluginOxlint.buildFromOxlintConfigFile('.oxlintrc.json'),
+
+  skipFormatting,
+)
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app" class="app-container"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,54 @@
+{
+  "name": "admin-system",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "lint": "run-s lint:*",
+    "lint:oxlint": "oxlint . --fix",
+    "lint:eslint": "eslint . --fix --cache",
+    "format": "prettier --write --experimental-cli src/"
+  },
+  "dependencies": {
+    "@vueuse/core": "^14.2.0",
+    "axios": "^1.13.4",
+    "dayjs": "^1.11.19",
+    "element-plus": "^2.13.2",
+    "pinia": "^3.0.4",
+    "vue": "^3.5.27",
+    "vue-router": "^5.0.1"
+  },
+  "devDependencies": {
+    "@element-plus/icons-vue": "^2.3.2",
+    "@tsconfig/node24": "^24.0.4",
+    "@types/node": "^24.10.9",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vue/eslint-config-typescript": "^14.6.0",
+    "@vue/tsconfig": "^0.8.1",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-oxlint": "~1.42.0",
+    "eslint-plugin-vue": "~10.7.0",
+    "jiti": "^2.6.1",
+    "npm-run-all2": "^8.0.4",
+    "oxlint": "~1.42.0",
+    "prettier": "3.8.1",
+    "sass": "^1.97.3",
+    "typescript": "~5.9.3",
+    "unplugin-auto-import": "^21.0.0",
+    "unplugin-element-plus": "^0.11.2",
+    "unplugin-icons": "^23.0.1",
+    "unplugin-vue-components": "^31.0.0",
+    "vite": "^7.3.1",
+    "vite-plugin-vue-devtools": "^8.0.5",
+    "vue-tsc": "^3.2.4"
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,50 @@
+<template>
+  <!-- 动态绑定 Transition 的 name -->
+  <router-view v-slot="{ Component }">
+    <transition name="route-fade" mode="out-in" appear>
+      <component :is="Component" />
+    </transition>
+  </router-view>
+
+</template>
+<script setup lang="ts">
+</script>
+<style scoped lang="scss">
+/* 过渡动画的 CSS 类（前缀和 Transition 的 name 一致） */
+/* 进入动画开始 */
+.route-fade-enter-from {
+  opacity: 0;
+  transform: translateX(20px);
+  /* 可选：从右侧滑入 */
+}
+
+/* 进入动画过程 */
+.route-fade-enter-active {
+  transition: all 0.3s ease;
+  /* 动画时长和缓动效果 */
+}
+
+/* 进入动画结束 */
+.route-fade-enter-to {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* 离开动画开始 */
+.route-fade-leave-from {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* 离开动画过程 */
+.route-fade-leave-active {
+  transition: all 0.3s ease;
+}
+
+/* 离开动画结束 */
+.route-fade-leave-to {
+  opacity: 0;
+  transform: translateX(-20px);
+  /* 可选：向左侧滑出 */
+}
+</style>
--- a/src/api/index.ts
+++ b/src/api/index.ts
@ -0,0 +1,138 @@
+import axios from 'axios'
+import type { AxiosInstance, AxiosError, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
+import { useLocalStorage } from '@/utils/storage'
+import type { ApiResponse } from '@/type/api';
+import router from '@/router'
+// 判断当前环境：import.meta.env.DEV 是 Vite 内置的环境变量，开发环境为 true，生产环境为 false
+const isDev = import.meta.env.DEV;
+
+// 根据环境读取对应的配置
+export const API_CONFIG = {
+    // API 基础地址
+    baseUrl: isDev
+        ? import.meta.env.VITE_DEV_API_BASE_URL
+        : import.meta.env.VITE_PROD_API_BASE_URL,
+    // 调试模式
+    debug: isDev
+        ? import.meta.env.VITE_DEV_DEBUG === 'true' // 注意：env 变量读取出来都是字符串，需要转布尔
+        : import.meta.env.VITE_PROD_DEBUG === 'false',
+    // 请求超时时间
+    timeout: isDev
+        ? Number(import.meta.env.VITE_DEV_REQUEST_TIMEOUT) // 转数字
+        : Number(import.meta.env.VITE_PROD_REQUEST_TIMEOUT)
+};
+
+// 创建 axios 实例
+const service: AxiosInstance = axios.create({
+    baseURL: API_CONFIG.baseUrl, // 自动切换的接口地址
+    timeout: API_CONFIG.timeout, // 自动切换的超时时间
+    headers: {
+        'Content-Type': 'application/json;charset=utf-8'
+    }
+})
+
+// 请求拦截器
+service.interceptors.request.use(
+    (config: InternalAxiosRequestConfig) => {
+        // 获取令牌
+        const token = useLocalStorage.get('token')
+
+        // 添加令牌到请求头
+        if (token.value) {
+            config.headers.Authorization = `Bearer ${token.value}`
+        }
+
+        // 开发环境下打印请求信息
+        if (API_CONFIG.debug) {
+            console.log('请求配置:', config)
+        }
+
+        return config
+    },
+    (error: AxiosError) => {
+        console.error('请求错误:', error)
+        return Promise.reject(error)
+    }
+)
+
+// 响应拦截器
+service.interceptors.response.use(
+    (response: AxiosResponse<ApiResponse>) => {
+        // 开发环境下打印响应信息
+        if (API_CONFIG.debug) {
+            console.log('响应数据:', response)
+        }
+
+        // 提取响应数据
+        const { data, headers } = response;
+        // 检查响应状态码
+        if (data.code !== 200) {
+            console.error('业务错误:', data.message)
+            return Promise.reject(new Error(data.message))
+        }
+        if (headers['new_token'] !== undefined) {
+            useLocalStorage.set('token', headers['new_token'])
+        }
+        return response
+    },
+    (error: AxiosError) => {
+        // 处理网络错误
+        const status = error.response?.status
+        let message = ''
+
+        switch (status) {
+            case 401:
+                message = '未授权，请重新登录'
+                // 清除令牌并跳转到登录页
+                useLocalStorage.remove('token')
+                router.replace('/login')
+                break
+            case 403:
+                message = '登录过期，请重新登录'
+                useLocalStorage.remove('token')
+                router.replace('/login')
+                break
+            case 404:
+                message = '请求地址不存在'
+                break
+            case 500:
+                message = '服务器内部错误'
+                break
+            default:
+                message = error.message || '网络请求失败'
+        }
+
+        console.error(`[${status || '未知'}] ${message}`)
+        ElNotification({
+            message: message,
+            type: 'error'
+        })
+        return Promise.reject(new Error(message))
+    }
+)
+
+// 封装请求方法
+export const request = {
+    get: <T = any>(url: string, params?: any) => {
+        return service.get<ApiResponse<T>>(url, { params })
+    },
+
+    post: <T = any>(url: string, data?: any) => {
+        return service.post<ApiResponse<T>>(url, data)
+    },
+
+    // put: <T = any>(url: string, data?: any) => {
+    //     return service.put<ApiResponse<T>>(url, data)
+    // },
+
+    // delete: <T = any>(url: string, params?: any) => {
+    //     return service.delete<ApiResponse<T>>(url, { params })
+    // },
+
+    // patch: <T = any>(url: string, data?: any) => {
+    //     return service.patch<ApiResponse<T>>(url, data)
+    // }
+}
+
+// 导出 axios 实例供业务使用
+export default service
--- a/src/api/menu.ts
+++ b/src/api/menu.ts
@ -0,0 +1,23 @@
+import { request } from './index';
+import type { ApiMenuItem } from '@/components/Aside/type';
+import { useLocalStorage } from '@/utils/storage';
+export const getMenuList = async (): Promise<any> => {
+    if (!useLocalStorage.get('token').value) {
+        console.log('token不存在');
+        return [];
+    }
+    try {
+        // 使用API服务进行获取菜单列表请求
+        const response = await request.get<ApiMenuItem[]>('menu/list');
+        return response.data.data;
+    } catch (error) {
+        // 统一错误处理
+        const errMsg = error instanceof Error ? error.message : '获取菜单列表失败';
+        ElNotification({
+            type: 'error',
+            message: errMsg,
+            duration: 2000
+        });
+        throw new Error(errMsg); // 抛出错误让组件层捕获
+    }
+};
--- a/src/components/Aside/index.vue
+++ b/src/components/Aside/index.vue
@ -0,0 +1,148 @@
+<template>
+    <el-aside class="aside-container">
+        <!-- 侧边菜单（Element Plus默认深色主题） -->
+        <el-menu class="el-menu-container" unique-opened :default-active="activeIndex" router :collapse="isCollapse">
+            <!-- 软件名头部 -->
+            <div class="logo" :class="isCollapse ? 'logo-collapse' : ''">
+                <img src="https://picsum.photos/seed/avatar1/60/60" alt="logo" :class="isCollapse ? 'logo-img' : ''" />
+                <span :class="isCollapse ? 'logo-text' : ''">Foreign Admin</span>
+            </div>
+            <!-- 遍历asideList渲染菜单 -->
+            <template v-for="menu in asideList" :key="menu.id">
+                <!-- 1. 渲染折叠子菜单（el-sub-menu） -->
+                <el-sub-menu v-if="menu.isSubMenu" :index="menu.path">
+                    <template #title>
+                        <!-- 渲染菜单图标（如果有） -->
+                        <el-icon v-if="menu.icon">
+                            <component :is="menu.icon" />
+                        </el-icon>
+                        <span>{{ menu.label }}</span>
+                    </template>
+                    <!-- 渲染子菜单列表 -->
+                    <el-menu-item v-for="child in menu.children" :key="child.id" :index="child.path">
+                        {{ child.label }}
+                    </el-menu-item>
+                </el-sub-menu>
+
+                <!-- 2. 渲染普通菜单项（el-menu-item） -->
+                <el-menu-item v-else :index="menu.path">
+                    <el-icon v-if="menu.icon">
+                        <component :is="menu.icon" />
+                    </el-icon>
+                    <span>{{ menu.label }}</span>
+                </el-menu-item>
+            </template>
+        </el-menu>
+    </el-aside>
+</template>
+<script setup lang="ts">
+import { HomeFilled, Menu, Histogram, UserFilled, Promotion, HelpFilled, BellFilled } from '@element-plus/icons-vue'
+import type { MenuItem } from '@/components/Aside/type'
+import { getMenuList } from '@/api/menu'
+const route = useRoute()
+
+const activeIndex = ref(route.path) // 默认选中项
+let asideList = ref<MenuItem[]>([]) // 处理后的菜单列表
+defineProps({
+    isCollapse: {
+        type: Boolean,
+    }
+})
+// 1. 定义path到图标名称的映射表（核心）
+const pathToIconMap = {
+    "/": markRaw(HomeFilled),           // 首页
+    "/fund": markRaw(Menu),        // 资金管理
+    "/trade": markRaw(Histogram),       // 交易统计
+    "/account": markRaw(UserFilled),    // 账户管理
+    "/customized": markRaw(Promotion),       // 个性化交易
+    "/agent": markRaw(HelpFilled),         // 代理管理
+    "/notice": markRaw(BellFilled)      // 通知管理
+}
+// 2. 为菜单数据补充图标字段的函数
+const addIconToMenu = (menuList: MenuItem[]) => {
+    return menuList.map(menu => {
+        // 为当前菜单项补充图标（根据path匹配）
+        return {
+            ...menu,
+            icon: pathToIconMap[menu.path as keyof typeof pathToIconMap] || "", // 匹配不到则为空
+            // 如果需要给子菜单也加图标，可以在这里处理children
+            children: menu.children ? menu.children.map(child => ({
+                ...child,
+                // 子菜单图标可按需添加，示例：
+                // icon: pathToIconMap[child.path] || ""
+            })) : undefined
+        }
+    })
+}
+onMounted(async () => {
+    // 获取原始数据（icon字段为空字符串）
+    const rawMenuList = await getMenuList()
+    // 补充图标字段
+    asideList.value = addIconToMenu(rawMenuList)
+})
+</script>
+<style scoped lang="scss">
+.aside-container {
+    height: 100vh;
+    width: fit-content;
+
+    .logo {
+        height: 60px;
+        display: flex;
+        align-items: center;
+        padding: 10px;
+        cursor: pointer;
+        border-bottom: 1px solid var(--el-menu-border-color);
+
+        &-collapse {
+            padding: 6px;
+            border: none;
+        }
+
+        img {
+            border-radius: 50%;
+        }
+
+        &-img {
+            width: 50px;
+            height: 50px;
+            object-fit: cover;
+        }
+
+        span {
+            margin-left: 10px;
+            font-weight: bold;
+            font-size: 18px;
+        }
+
+        &-text {
+            opacity: 0;
+            transition: transform 10s ease-in-out;
+            transform: translateX(-70px);
+        }
+    }
+
+    .el-menu-container {
+        height: 100vh;
+        background: transparent;
+
+        :deep(.el-menu) {
+            background: transparent;
+        }
+
+        :deep(.el-menu-item.is-active) {
+            background-color: var(--el-color-primary-light-9) !important;
+            color: var(--el-color-primary) !important;
+        }
+
+        :deep(.el-sub-menu__title.is-active) {
+            color: var(--el-color-primary) !important;
+        }
+
+        :deep(.el-menu-item.is-active .el-icon),
+        :deep(.el-sub-menu__title.is-active .el-icon) {
+            color: inherit !important;
+        }
+    }
+}
+</style>
--- a/src/components/Aside/type.ts
+++ b/src/components/Aside/type.ts
@ -0,0 +1,15 @@
+// 后端返回的原始菜单类型（与后端约定）
+export interface ApiMenuItem {
+    id: number; // 菜单ID，用于唯一标识
+    path: string; // 路由path，如 "/fund/deposit"
+    label: string; // 菜单名称
+    isSubMenu: boolean; // 是否是子菜单容器
+    icon?: string; // 图标名称字符串，如 "Menu" "HomeFilled"
+    children?: ApiMenuItem[]; // 子菜单
+    hidden?: boolean; // 是否隐藏（可选）
+}
+
+// 前端处理后的菜单类型（增加图标组件）
+export interface MenuItem extends Omit<ApiMenuItem, 'icon'> {
+    icon?: any; // Element Plus图标组件
+}
--- a/src/components/Header/index.vue
+++ b/src/components/Header/index.vue
@ -0,0 +1,92 @@
+<template>
+    <el-header class="header">
+        <div class="header-content">
+            <div class="logo">
+                <el-icon class="el-icon--right" size="24" @click="handleToggleCollapse"
+                    :class="{ 'collapse': isCollapse }">
+                    <Expand />
+                </el-icon>
+            </div>
+            <!-- <div class="logout" @click="handleLogout">
+                退出登录
+            </div> -->
+            <div class="profile">
+                <el-dropdown placement="bottom-start">
+                    <el-icon size="24" class="avatar-icon">
+                        <Avatar />
+                    </el-icon>
+                    <template #dropdown>
+                        <el-dropdown-menu>
+                            <el-dropdown-item @click="handleChangePassword">修改密码</el-dropdown-item>
+                            <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
+                        </el-dropdown-menu>
+                    </template>
+                </el-dropdown>
+            </div>
+        </div>
+        <div>
+        </div>
+    </el-header>
+</template>
+<script setup lang="ts">
+import { Expand, Avatar } from '@element-plus/icons-vue'
+import { useUserStore } from '@/stores/user'
+
+
+const router = useRouter()
+const userStore = useUserStore()
+
+// 接收折叠状态
+const props = defineProps<{
+    isCollapse: boolean
+}>()
+
+// 触发父组件的切换方法
+const emit = defineEmits<{
+    'toggle-collapse': []
+}>()
+
+const handleToggleCollapse = () => {
+    emit('toggle-collapse')
+}
+const handleLogout = () => {
+    userStore.logout()
+}
+const handleChangePassword = () => {
+    router.push('/user/change-password')
+}
+</script>
+<style scoped lang="scss">
+.header {
+    .header-content {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 100%;
+
+        .logo {
+            .el-icon--right {
+                cursor: pointer;
+            }
+
+            .collapse {
+                transform: rotate(180deg);
+            }
+        }
+
+        .profile {
+            .avatar-icon {
+                cursor: pointer;
+
+                &:focus-visible {
+                    outline: none;
+                }
+
+                &:hover {
+                    color: var(--el-color-primary);
+                }
+            }
+        }
+    }
+}
+</style>
--- a/src/components/Main/Fund/Audit.vue
+++ b/src/components/Main/Fund/Audit.vue
@ -0,0 +1,5 @@
+<template>
+    <div class="audit-container">
+        <h1>资金审核</h1>
+    </div>
+</template>
--- a/src/components/Main/Fund/Deposit.vue
+++ b/src/components/Main/Fund/Deposit.vue
@ -0,0 +1,5 @@
+<template>
+    <div>
+        存款
+    </div>
+</template>
--- a/src/components/Main/Fund/Detail.vue
+++ b/src/components/Main/Fund/Detail.vue
@ -0,0 +1,5 @@
+<template>
+    <div class="detail-container">
+        <h1>资金详情</h1>
+    </div>
+</template>
--- a/src/components/Main/Fund/Recharge.vue
+++ b/src/components/Main/Fund/Recharge.vue
@ -0,0 +1,5 @@
+<template>
+    <div class="recharge-container">
+        <h1>资金充值</h1>
+    </div>
+</template>
--- a/src/components/Main/Fund/Transfer.vue
+++ b/src/components/Main/Fund/Transfer.vue
@ -0,0 +1,5 @@
+<template>
+    <div class="transfer-container">
+        <h1>资金转账</h1>
+    </div>
+</template>
--- a/src/components/Main/Fund/Withdraw.vue
+++ b/src/components/Main/Fund/Withdraw.vue
@ -0,0 +1,5 @@
+<template>
+    <div>
+        取款
+    </div>
+</template>
--- a/src/components/Main/Fund/Withdrawal.vue
+++ b/src/components/Main/Fund/Withdrawal.vue
@ -0,0 +1,5 @@
+<template>
+    <div class="withdrawal-container">
+        <h1>资金提现</h1>
+    </div>
+</template>
--- a/src/components/Main/Home/index.vue
+++ b/src/components/Main/Home/index.vue
@ -0,0 +1,5 @@
+<template>
+    <div>
+        首页
+    </div>
+</template>
--- a/src/components/Main/index.vue
+++ b/src/components/Main/index.vue
@ -0,0 +1,53 @@
+<template>
+    <el-main>
+        <router-view v-slot="{ Component }">
+            <transition name="route-fade" mode="out-in" appear>
+                <keep-alive :include="cachedViews">
+                    <component :is="Component" />
+                </keep-alive>
+            </transition>
+        </router-view>
+    </el-main>
+</template>
+<script setup lang="ts">
+import { useCacheStore } from '@/stores/cache';
+// 绑定动态缓存列表
+const cacheStore = useCacheStore()
+const cachedViews = cacheStore.cachedViews
+</script>
+<style scoped lang="scss">
+/* 过渡动画的 CSS 类（前缀和 Transition 的 name 一致） */
+/* 进入动画开始 */
+.route-fade-enter-from {
+    opacity: 0;
+    transform: translateX(20px);
+    /* 可选：从右侧滑入 */
+}
+
+/* 进入动画结束 */
+.route-fade-enter-active {
+    transition: all 0.3s ease;
+}
+
+.route-fade-enter-to {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+/* 退出动画开始 */
+.route-fade-leave-from {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+/* 退出动画结束 */
+.route-fade-leave-active {
+    transition: all 0.3s ease;
+}
+
+.route-fade-leave-to {
+    opacity: 0;
+    transform: translateX(-20px);
+    /* 可选：向左侧滑出 */
+}
+</style>
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,13 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import './styles/global.scss'
+
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -0,0 +1,175 @@
+
+import { createRouter, createWebHistory } from 'vue-router'
+import { useLocalStorage, useSessionStorage } from '@/utils/storage'
+import { useCacheStore } from '@/stores/cache';
+
+const routes = [
+    {
+        path: '/',
+        name: 'Layout',
+        component: () => import('@/views/Layout/index.vue'),
+        meta: {
+            title: '首页',
+            // 显式配置为 none，表示无动画
+            transition: 'none'
+        },
+        children: [
+            // 修改密码
+            {
+                path: '/user/change-password',
+                name: 'ChangePassword',
+                component: () => import('@/views/User/ChangePassword.vue'),
+                meta: {
+                    title: '修改密码',
+                    transition: 'fade'
+                }
+            },
+            // 首页
+            {
+                path: '',
+                name: 'Home',
+                component: () => import('@/components/main/Home/index.vue'),
+                meta: {
+                    title: '首页',
+                    transition: 'fade'
+                }
+            },
+            // 存款
+            {
+                path: '/fund/deposit',
+                name: 'Deposit',
+                component: () => import('@/components/main/Fund/Deposit.vue'),
+                meta: {
+                    title: '存款',
+                    transition: 'fade'
+                }
+            },
+            // 取款
+            {
+                path: '/fund/withdraw',
+                name: 'Withdraw',
+                component: () => import('@/components/main/Fund/Withdraw.vue'),
+                meta: {
+                    title: '取款',
+                    transition: 'fade'
+                }
+            },
+            // 转账
+            {
+                path: '/fund/transfer',
+                name: 'Transfer',
+                component: () => import('@/components/main/Fund/Transfer.vue'),
+                meta: {
+                    title: '转账',
+                    transition: 'fade'
+                }
+            },
+            // 资金明细
+            {
+                path: '/fund/detail',
+                name: 'Detail',
+                component: () => import('@/components/main/Fund/Detail.vue'),
+                meta: {
+                    title: '资金明细',
+                    transition: 'fade'
+                }
+            },
+            // 审核记录
+            {
+                path: '/fund/audit',
+                name: 'Audit',
+                component: () => import('@/components/main/Fund/Audit.vue'),
+                meta: {
+                    title: '审核记录',
+                    transition: 'fade'
+                }
+            },
+            //提现记录
+            {
+                path: '/fund/withdrawal',
+                name: 'Withdrawal',
+                component: () => import('@/components/main/Fund/Withdrawal.vue'),
+                meta: {
+                    title: '提现记录',
+                    transition: 'fade'
+                }
+            },
+            // 充值记录
+            {
+                path: '/fund/recharge',
+                name: 'Recharge',
+                component: () => import('@/components/main/Fund/Recharge.vue'),
+                meta: {
+                    title: '充值记录',
+                    transition: 'fade'
+                }
+            },
+        ]
+    },
+    {
+        path: '/login',
+        name: 'Login',
+        component: () => import('@/views/User/Login.vue'),
+        meta: {
+            title: '登录',
+            transition: 'none'
+        }
+    },
+    {
+        path: '/reset-password',
+        name: 'ResetPassword',
+        component: () => import('@/views/User/ResetPassword.vue'),
+        meta: {
+            title: '重置密码',
+            transition: 'none'
+        }
+    },
+]
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+})
+
+// 导航守卫
+// 定义无需登录的白名单页面（登录、重置密码、404等）
+const whiteList = ['/login', '/reset-password', '/404'];
+
+router.beforeEach((to, from, next) => {
+    // 1. 设置页面标题（优化类型判断）
+    if (to.meta.title && typeof to.meta.title === 'string') {
+        document.title = to.meta.title;
+    }
+
+    // 2. 获取 token（使用封装的 useLocalStorage.get，添加空值保护）
+    const token = useLocalStorage.get<string>('token');
+
+    // 3. 修改密码缓存逻辑（提前执行，不影响 next 调用）
+    const cacheStore = useCacheStore()
+    // 进入修改密码页 → 缓存上一个业务页（仅在鉴权放行前记录）
+    if (to.name === 'ChangePassword' && from.name && from.name !== 'Login') {
+        cacheStore.addCache(String(from.name)) // 缓存原操作页
+        useSessionStorage.set('backPath', from.fullPath) // 记录原页面完整地址
+    }
+
+    // 4. 路由鉴权核心逻辑（唯一的 next 调用分支）
+    if (token?.value) { // 空值保护：token 存在且有值
+        // 已登录：如果访问白名单页面，重定向到首页
+        if (whiteList.includes(to.path)) {
+            next('/'); // 唯一调用：重定向首页
+        } else {
+            // 已登录且访问非白名单页面，正常放行
+            next(); // 唯一调用：正常放行
+        }
+    } else {
+        // 未登录：如果访问白名单页面，正常放行
+        if (whiteList.includes(to.path)) {
+            next(); // 唯一调用：正常放行
+        } else {
+            // 未登录且访问非白名单页面，重定向到登录页
+            next('/login'); // 唯一调用：重定向登录
+        }
+    }
+});
+
+export default router
--- a/src/stores/cache.ts
+++ b/src/stores/cache.ts
@ -0,0 +1,14 @@
+//缓存组件，需要缓存的组件需要添加到cachedViews中
+export const useCacheStore = defineStore('cache', () => {
+    // 动态缓存列表（绑定到keep-alive的include）
+    const cachedViews = ref<string[]>([])
+
+    // 添加缓存（去重）
+    const addCache = (name: string) => {
+        if (name && !cachedViews.value.includes(name)) {
+            cachedViews.value.push(name)
+        }
+    }
+
+    return { cachedViews, addCache }
+})
--- a/src/stores/user.ts
+++ b/src/stores/user.ts
@ -0,0 +1,220 @@
+// 导入单独抽离的类型
+import type { UserInfo, LoginForm, LoginResponse, ResetPasswordForm, ResetPasswordResponse, ChangePasswordForm, ChangePasswordResponse } from '@/type/user';
+import { request } from '@/api/index'
+import { useLocalStorage, useSessionStorage } from '@/utils/storage'
+import router from '@/router';
+/**
+ * 用户状态管理 Store
+ * 核心功能：登录、登出、状态持久化、初始化用户信息
+ */
+export const useUserStore = defineStore('user', () => {
+    // ========== 响应式状态 ==========
+    /** 用户基本信息 */
+    const userInfo = ref<UserInfo>({
+        id: '',
+        username: '',
+        nickname: '',
+        roles: [],
+        permissions: []
+    });
+    /** 用户登录令牌 */
+    const token = ref<string>('');
+    /** 是否加载中（登录/登出请求时） */
+    const loading = ref<boolean>(false);
+    // ========== 核心方法 ==========
+    /**
+     * 用户登录
+     * @param form 登录表单数据
+     * @returns Promise<void>
+     */
+    const login = async (form: LoginForm): Promise<void> => {
+        try {
+            loading.value = true;
+            // 使用API服务进行登录请求
+            const response = await request.post<LoginResponse>('user/login', form);
+
+            // 从响应中获取数据
+            const res = response.data;
+            ElNotification({
+                type: 'success',
+                message: '登录成功',
+                duration: 2000
+            })
+            // 更新响应式状态
+            userInfo.value = res.data.user;
+            token.value = res.data.user.token ?? '';
+
+            // 持久化到本地存储（防止页面刷新丢失）
+            useLocalStorage.set('user', res.data.user);
+            useLocalStorage.set('token', res.data.user.token);
+        } catch (error) {
+            // 统一错误处理
+            const errMsg = error instanceof Error ? error.message : '登录异常';
+            ElNotification({
+                type: 'error',
+                message: errMsg,
+                duration: 2000
+            })
+            throw new Error(errMsg); // 抛出错误让组件层捕获
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    /**
+     * 用户登出
+     */
+    const logout = (): void => {
+        // 清空响应式状态
+        userInfo.value = {
+            id: '',
+            username: '',
+            nickname: '',
+            roles: [],
+            permissions: []
+        };
+        token.value = '';
+
+        // 清除本地存储
+        useLocalStorage.remove('user');
+        useLocalStorage.remove('token');
+        useSessionStorage.remove('backPath');
+        // 可选：登出后跳转到登录页（如果需要）
+        // 使用 Vue Router 进行跳转
+        // 显示登出成功通知
+        ElNotification({
+            type: 'success',
+            message: '退出登录',
+            duration: 2000
+        });
+        router.push('/login');
+    };
+
+    /**
+     * 初始化用户信息（页面刷新后恢复）
+     */
+    const initUser = (): void => {
+        try {
+            const savedUser = useLocalStorage.get('user');
+            const savedToken = useLocalStorage.get('token');
+
+            if (savedUser.value && savedToken.value) {
+                // 类型断言 + 验证，确保数据格式正确
+                const parsedUser = savedUser.value as UserInfo;
+                // 基础校验（防止本地存储数据被篡改）
+                if (parsedUser.id && parsedUser.username) {
+                    userInfo.value = parsedUser;
+                    token.value = savedToken.value;
+                }
+            }
+        } catch (error) {
+            console.error('初始化用户信息失败:', error);
+            // 校验失败则清空本地存储
+            useLocalStorage.remove('user');
+            useLocalStorage.remove('token');
+        }
+    };
+
+    /**
+     * 检查用户是否拥有指定权限
+     * @param permission 权限标识
+     * @returns boolean
+     */
+    const hasPermission = (permission: string): boolean => {
+        return userInfo.value.permissions.includes(permission);
+    };
+
+    /**
+     * 检查用户是否拥有指定角色
+     * @param role 角色标识
+     * @returns boolean
+     */
+    const hasRole = (role: string): boolean => {
+        return userInfo.value.roles.includes(role);
+    };
+    /**
+    * 重置密码
+    * @param form 重置密码表单数据
+    * @returns Promise<void>
+    */
+    const resetPassword = async (form: ResetPasswordForm): Promise<void> => {
+        try {
+            loading.value = true;
+            // 使用API服务进行重置密码请求
+            const response = await request.post<ResetPasswordResponse>('user/reset-password', form);
+
+            // 从响应中获取数据
+            const res = response.data;
+            ElNotification({
+                type: 'success',
+                message: '密码重置成功',
+                duration: 2000
+            });
+
+            // 重置成功后跳转到登录页
+            router.push('/login');
+        } catch (error) {
+            // 统一错误处理
+            const errMsg = error instanceof Error ? error.message : '密码重置失败';
+            ElNotification({
+                type: 'error',
+                message: errMsg,
+                duration: 2000
+            });
+            throw new Error(errMsg); // 抛出错误让组件层捕获
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    /**
+   * 修改密码
+   * @param form 修改密码表单数据
+   * @returns Promise<void>
+   */
+    const changePassword = async (form: ChangePasswordForm): Promise<void> => {
+        try {
+            loading.value = true;
+            // 使用API服务进行修改密码请求
+            const response = await request.post<ChangePasswordResponse>('user/change-password', form);
+
+            // 从响应中获取数据
+            const res = response.data;
+            ElNotification({
+                type: 'success',
+                message: '密码修改成功',
+                duration: 2000
+            });
+
+            // 修改成功后跳转到登录页
+            router.push('/login');
+        } catch (error) {
+            // 统一错误处理
+            const errMsg = error instanceof Error ? error.message : '密码修改失败';
+            ElNotification({
+                type: 'error',
+                message: errMsg,
+                duration: 2000
+            });
+            throw new Error(errMsg); // 抛出错误让组件层捕获
+        } finally {
+            loading.value = false;
+        }
+    };
+    // ========== 暴露状态和方法 ==========
+    return {
+        // 状态
+        userInfo,
+        token,
+        loading,
+        // 数据
+        // 方法
+        login,
+        logout,
+        initUser,
+        hasPermission,
+        hasRole,
+        resetPassword,
+        changePassword
+    };
+});
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@ -0,0 +1,44 @@
+// 确保 html 和 body 没有默认边距
+html,
+body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden; // 直接隐藏溢出内容
+}
+
+.app-container {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to top, #ffffff, #e8edf5);
+}
+
+// 登录和忘记密码公用样式
+.user-container {
+    width: inherit;
+    height: inherit;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+
+    .card {
+        width: 375px;
+        padding: 28px;
+        background: #fff;
+        border-radius: 12px;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+
+        h1 {
+            text-align: center;
+        }
+
+        .el-form-item {
+            margin-bottom: 26px !important;
+        }
+    }
+}
--- a/src/styles/hook.scss
+++ b/src/styles/hook.scss
@ -0,0 +1,31 @@
+// 设计稿基准尺寸（根据你的实际设计稿调整，一般是 1920px 或 375px）
+$design-width: 1920px;  // 桌面端设计稿宽度
+$design-height: 1080px; // 桌面端设计稿高度
+
+// px 转 vw 函数（核心）
+@function vw($px) {
+  @if unitless($px) {
+    $px: $px * 1px;
+  }
+  @return ($px / $design-width) * 100vw;
+}
+
+// px 转 vh 函数
+@function vh($px) {
+  @if unitless($px) {
+    $px: $px * 1px;
+  }
+  @return ($px / $design-height) * 100vh;
+}
+
+// 响应式字体大小 mixin（适配不同屏幕）
+@mixin font-size($px) {
+  font-size: $px;
+  font-size: vw($px);
+}
+
+// 响应式尺寸 mixin（宽/高/间距通用）
+@mixin size-vw($width, $height: $width) {
+  width: vw($width);
+  height: vw($height);
+}
--- a/src/type/api.ts
+++ b/src/type/api.ts
@ -0,0 +1,32 @@
+/**
+ * 通用 API 响应接口
+ * @template T - data 字段的类型，默认值为 any
+ */
+export interface ApiResponse<T = any> {
+    success: boolean;
+    code: number;
+    message: string;
+    data: T;
+}
+
+/**
+ * 用户信息接口（登录返回的 user 字段）
+ */
+export interface UserInfo {
+    username: string;
+    token: string;
+    expiresIn: number;
+}
+
+/**
+ * 登录接口返回的 data 结构
+ */
+export interface LoginResponseData {
+    user: UserInfo;
+}
+
+/**
+ * 登录接口的完整响应类型
+ * （通用 ApiResponse + 登录专属的 data 类型）
+ */
+export type LoginApiResponse = ApiResponse<LoginResponseData>;
--- a/src/type/storage.ts
+++ b/src/type/storage.ts
@ -0,0 +1,67 @@
+// src/utils/storage.types.ts
+import type { Ref } from 'vue'
+
+/**
+ * 存储类型
+ */
+export type StorageType = 'localStorage' | 'sessionStorage'
+
+/**
+ * 存储选项
+ */
+export interface StorageOptions {
+    /**
+     * 存储类型，默认为 localStorage
+     */
+    type?: StorageType
+    /**
+     * 命名空间，避免键名冲突
+     */
+    namespace?: string
+}
+
+/**
+ * 存储工具返回的方法集合类型
+ */
+export interface StorageTool {
+    /**
+     * 获取存储值（响应式）
+     * @param key 键名
+     * @param defaultValue 默认值
+     * @returns 响应式存储值
+     */
+    get: <T = any>(key: string, defaultValue?: T) => Ref<T | null>
+
+    /**
+     * 设置存储值
+     * @param key 键名
+     * @param value 值
+     */
+    set: <T = any>(key: string, value: T) => void
+
+    /**
+     * 移除存储值
+     * @param key 键名
+     */
+    remove: (key: string) => void
+
+    /**
+     * 清空存储
+     * @param withNamespace 是否只清空当前命名空间下的存储
+     */
+    clear: (withNamespace?: boolean) => void
+
+    /**
+     * 检查键是否存在
+     * @param key 键名
+     * @returns 是否存在
+     */
+    has: (key: string) => boolean
+
+    /**
+     * 获取所有键
+     * @param withNamespace 是否只获取当前命名空间下的键
+     * @returns 键名数组
+     */
+    keys: (withNamespace?: boolean) => string[]
+}
--- a/src/type/user.ts
+++ b/src/type/user.ts
@ -0,0 +1,68 @@
+/**
+ * 用户信息类型定义
+ */
+export interface UserInfo {
+    // 基础字段（根据你的实际业务调整）
+    id: string | number;
+    username: string;
+    nickname: string;
+    avatar?: string; // 可选字段
+    email?: string;
+    phone?: string;
+    token?: string;
+    expiresIn?: number; // token过期时间（可选）
+    // 权限相关
+    roles: string[];
+    permissions: string[];
+}
+
+/**
+ * 登录表单类型
+ */
+export interface LoginForm {
+    username: string;
+    password: string;
+    remember?: boolean; // 可选：记住我
+}
+
+/**
+ * 登录接口返回数据类型
+ */
+export interface LoginResponse {
+    code: number;
+    message: string;
+    user: UserInfo;
+}
+
+/**
+ * 重置密码表单类型
+ */
+export interface ResetPasswordForm {
+    username: string;
+    newPassword: string;
+    confirmPassword: string;
+}
+
+/**
+ * 重置密码接口返回数据类型
+ */
+export interface ResetPasswordResponse {
+    code: number;
+    message: string;
+}
+/**
+ * 修改密码表单类型
+ */
+export interface ChangePasswordForm {
+    username: string;
+    currentPassword: string;
+    newPassword: string;
+    confirmPassword: string;
+}
+/**
+ * 修改密码接口返回数据类型
+ */
+export interface ChangePasswordResponse {
+    code: number;
+    message: string;
+}
--- a/src/utils/storage.ts
+++ b/src/utils/storage.ts
@ -0,0 +1,113 @@
+import { useStorage } from '@vueuse/core'
+// 引入抽离的类型
+import type { StorageOptions, StorageTool } from '@/type/storage'
+
+/**
+ * 通用存储工具
+ * @param options 存储选项
+ * @returns 包含增删改查方法的对象
+ */
+export function createStorage(options: StorageOptions = {}): StorageTool {
+    const {
+        type = 'localStorage',
+        namespace = 'foreign_'
+    } = options
+
+    // 获取存储实例
+    const storageInstance = type === 'localStorage' ? localStorage : sessionStorage
+
+    /**
+     * 拼接键名，添加命名空间
+     */
+    const getKey = (key: string): string => {
+        if (!key) {
+            throw new Error('存储键名不能为空')
+        }
+        return namespace ? `${namespace}${key}` : key
+    }
+    const serializer = {
+        read: (v: any) => v ? JSON.parse(v) : null,
+        write: (v: any) => JSON.stringify(v),
+    }
+    return {
+        /**
+         * 获取存储值（响应式）
+         * @param key 键名
+         * @param defaultValue 默认值
+         * @returns 响应式存储值
+         */
+        get: <T = any>(key: string, defaultValue?: T) => {
+            return useStorage<T | null>(getKey(key), defaultValue ?? null, storageInstance, { serializer })
+        },
+
+        /**
+         * 设置存储值
+         * @param key 键名
+         * @param value 值
+         */
+        set: <T = any>(key: string, value: T) => {
+            const storage = useStorage<T | null>(getKey(key), null, storageInstance, { serializer })
+            storage.value = value
+        },
+
+        /**
+         * 移除存储值
+         * @param key 键名
+         */
+        remove: (key: string) => {
+            storageInstance.removeItem(getKey(key))
+        },
+
+        /**
+         * 清空存储
+         * @param withNamespace 是否只清空当前命名空间下的存储
+         */
+        clear: (withNamespace = true) => {
+            if (withNamespace && namespace) {
+                // 只清空当前命名空间的存储
+                Object.keys(storageInstance).forEach(key => {
+                    if (key.startsWith(namespace)) {
+                        storageInstance.removeItem(key)
+                    }
+                })
+            } else {
+                // 清空所有存储
+                storageInstance.clear()
+            }
+        },
+
+        /**
+         * 检查键是否存在
+         * @param key 键名
+         * @returns 是否存在
+         */
+        has: (key: string) => {
+            return Object.prototype.hasOwnProperty.call(storageInstance, getKey(key))
+        },
+
+        /**
+         * 获取所有键
+         * @param withNamespace 是否只获取当前命名空间下的键
+         * @returns 键名数组
+         */
+        keys: (withNamespace = true) => {
+            const keys = Object.keys(storageInstance)
+            if (withNamespace && namespace) {
+                return keys
+                    .filter(key => key.startsWith(namespace))
+                    .map(key => key.replace(namespace, ''))
+            }
+            return keys
+        }
+    }
+}
+
+/**
+ * 默认 localStorage 存储实例
+ */
+export const useLocalStorage = createStorage({ type: 'localStorage' })
+
+/**
+ * 默认 sessionStorage 存储实例
+ */
+export const useSessionStorage = createStorage({ type: 'sessionStorage' })
--- a/src/views/Layout/index.vue
+++ b/src/views/Layout/index.vue
@ -0,0 +1,37 @@
+<template>
+    <div class="home-page">
+        <el-container>
+            <Aside :isCollapse="isCollapse" />
+            <el-container class="main-container">
+                <Header :isCollapse="isCollapse" @toggle-collapse="toggleSidebar" />
+                <Main />
+            </el-container>
+        </el-container>
+    </div>
+</template>
+<script setup lang="ts">
+import Aside from '@/components/Aside/index.vue'
+import Header from '@/components/Header/index.vue'
+import Main from '@/components/Main/index.vue'
+
+import { useLocalStorage } from '@/utils/storage'
+// 控制 el-menu 原生折叠的核心状态
+const isCollapse = ref(useLocalStorage.get('isCollapse') ?? false)
+
+// 切换折叠状态的方法
+const toggleSidebar = () => {
+    isCollapse.value = !isCollapse.value
+    // 同步到 localStorage
+    useLocalStorage.set('isCollapse', isCollapse.value)
+}
+</script>
+<style scoped lang="scss">
+.main-container {
+    flex-direction: column;
+
+    .header {
+        height: 50px;
+        border-bottom: 1px solid var(--el-menu-border-color);
+    }
+}
+</style>
--- a/src/views/User/ChangePassword.vue
+++ b/src/views/User/ChangePassword.vue
@ -0,0 +1,80 @@
+<template>
+    <div class="user-container">
+        <div class="card">
+            <div class="header">
+                <h1>修改密码🔑</h1>
+            </div>
+            <el-form :model="changePasswordForm" :rules="formRules" ref="changePasswordFormRef">
+                <el-form-item label="旧密码" prop="currentPassword" :label-position="labelPosition" label-width="100px">
+                    <el-input v-model="changePasswordForm.currentPassword" type="password" />
+                </el-form-item>
+                <el-form-item label="新密码" prop="newPassword" :label-position="labelPosition" label-width="100px">
+                    <el-input v-model="changePasswordForm.newPassword" type="password" />
+                </el-form-item>
+                <el-form-item label="确认新密码" prop="confirmPassword" :label-position="labelPosition" label-width="100px">
+                    <el-input v-model="changePasswordForm.confirmPassword" type="password" />
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" size="large" style="width: 100%"
+                        @click="handleChangePassword">修改密码</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import type { FormRules, FormProps, FormInstance } from 'element-plus'
+import { useLocalStorage } from '@/utils/storage'
+import { useUserStore } from '@/stores/user'
+
+const router = useRouter()
+const labelPosition = ref<FormProps['labelPosition']>('left')
+const changePasswordFormRef = ref<FormInstance>()
+const error = ref('')
+
+const changePasswordForm = ref({
+    username: useLocalStorage.get('user').value?.username || '',
+    currentPassword: '',
+    newPassword: '',
+    confirmPassword: ''
+})
+
+const formRules = reactive<FormRules>({
+    currentPassword: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
+    newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
+    confirmPassword: [{ required: true, message: '请确认新密码', trigger: 'blur' }, {
+        validator: (rule, value, callback) => {
+            if (value !== changePasswordForm.value.newPassword) {
+                callback(new Error('两次输入的密码不一致'))
+            } else {
+                callback()
+            }
+        },
+        trigger: 'blur'
+    }]
+})
+const handleChangePassword = async () => {
+    if (!changePasswordFormRef.value) return
+    changePasswordFormRef.value.validate(async (valid) => {
+        if (valid) {
+            try {
+                error.value = ''
+                await useUserStore().changePassword(changePasswordForm.value)
+
+                // 密码修改成功后跳转到登录页
+                useLocalStorage.remove('token');
+                router.push('/login')
+            } catch (err) {
+                error.value = err instanceof Error ? err.message : '密码修改失败'
+            }
+        } else {
+            console.log('密码修改表单验证失败')
+        }
+    })
+}
+</script>
+<style scoped lang="scss">
+.user-container {
+    height: 100%;
+}
+</style>
--- a/src/views/User/Login.vue
+++ b/src/views/User/Login.vue
@ -0,0 +1,143 @@
+<template>
+    <div class="user-container">
+        <div class="card">
+            <!-- 头部标题 -->
+            <div class="header">
+                <h1>登录 👋</h1>
+            </div>
+
+            <el-form :model="LoginForm" :rules="formRules" ref="loginFormRef" class="login-form" size="default">
+                <!-- 用户名输入 -->
+                <el-form-item label="用户名" prop="username" :label-position="labelPosition" label-width="65px">
+                    <el-input v-model="LoginForm.username" placeholder="请输入用户名" :prefix-icon="User" />
+                </el-form-item>
+
+                <!-- 密码输入 -->
+                <el-form-item label="密码" prop="password" :label-position="labelPosition" label-width="65px">
+                    <el-input v-model="LoginForm.password" type="password" placeholder="请输入密码" :prefix-icon="Lock"
+                        show-password />
+                </el-form-item>
+
+                <!-- 记住账号 & 忘记密码 -->
+                <el-form-item class="form-footer">
+                    <div class="form-footer-content">
+                        <el-checkbox v-model="LoginForm.remember" class="remember-checkbox">记住账号</el-checkbox>
+                        <router-link to="/reset-password" class="forgot-password">忘记密码？</router-link>
+                    </div>
+                </el-form-item>
+
+                <!-- 登录按钮（Element Plus 主按钮规范） -->
+                <el-form-item width="100%">
+                    <el-button type="primary" class="login-btn" size="large" @click="handleLogin" style="width: 100%"
+                        :loading="userStore.loading" :disabled="userStore.loading">
+                        {{ userStore.loading ? '登录中...' : '登录' }}
+                    </el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+// element 导入
+import type { FormInstance, FormRules, FormProps } from 'element-plus'
+import { User, Lock } from '@element-plus/icons-vue'
+// type导入
+import type { LoginForm as LoginFormType } from '@/type/user'
+// 业务导入
+import { useUserStore } from '@/stores/user'
+import { useLocalStorage, useSessionStorage } from '@/utils/storage'
+const router = useRouter()
+const error = ref('')
+const userStore = useUserStore()
+// 表单 Ref（符合 Element Plus 规范）
+const loginFormRef = ref<FormInstance>()
+const labelPosition = ref<FormProps['labelPosition']>('left')
+// 表单数据
+const LoginForm = reactive<LoginFormType>({
+    username: 'admin',
+    password: 'admin',
+    remember: false
+})
+// 表单校验规则（Element Plus 标准校验）
+const formRules = reactive<FormRules>({
+    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+})
+
+// 登录
+const handleLogin = async () => {
+    if (!loginFormRef.value) return
+    loginFormRef.value.validate(async (valid) => {
+        if (valid) {
+            try {
+                error.value = ''
+                await userStore.login(LoginForm)
+                saveRememberedUsername()
+                // 如果是登录或者退出登录重新登录，都是跳转首页，如果是从修改密码操作返回登录页，就跳转回修改密码操作前的页面
+                // 1. 读取路由历史状态（加可选链，避免报错）
+                const historyState = router.options.history.state;
+                // 2. 读取回退路径（无 .value，加兜底为 '/'）
+                const backPath = useSessionStorage.get('backPath') || '/';
+                // 3. 清除 sessionStorage 记录（及时清理，避免残留）
+                useSessionStorage.remove('backPath');
+
+                // 4. 严谨判断：是否从修改密码页跳登录
+                const isFromChangePwd = historyState?.back === '/user/change-password'; // 可选链避免报错
+
+                // 5. 规范跳转（异步 + 兜底校验）
+                const targetPath = isFromChangePwd ? backPath : '/';
+                // 校验目标路径有效性，避免无效跳转
+                if (typeof targetPath === 'string' && targetPath.startsWith('/')) {
+                    await router.push(targetPath); // 异步跳转，符合 Vue Router 规范
+                } else {
+                    await router.push('/'); // 兜底跳首页
+                }
+            } catch (err) {
+                error.value = err instanceof Error ? err.message : '登录失败'
+            }
+        } else {
+            console.log('登录表单验证失败')
+        }
+    })
+}
+// 记住账号
+const saveRememberedUsername = () => {
+    if (LoginForm.remember) {
+        useLocalStorage.set('rememberedUsername', LoginForm.username)
+    } else {
+        useLocalStorage.remove('rememberedUsername')
+    }
+}
+// 从本地存储加载记住的用户名
+const loadRememberedUsername = () => {
+    const rememberedUsername = useLocalStorage.get('rememberedUsername')
+    if (rememberedUsername.value) {
+        LoginForm.username = rememberedUsername.value
+        LoginForm.remember = true
+    }
+}
+
+onMounted(() => {
+    // 组件挂载时加载记住的用户名
+    loadRememberedUsername()
+})
+</script>
+
+<style lang="scss" scoped>
+.login-form {
+    .form-footer {
+        .form-footer-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+
+            .forgot-password {
+                color: #409eff;
+                text-decoration: none;
+            }
+        }
+    }
+}
+</style>
--- a/src/views/User/ResetPassword.vue
+++ b/src/views/User/ResetPassword.vue
@ -0,0 +1,77 @@
+<template>
+    <div class="user-container">
+        <div class="card">
+            <!-- 头部标题 -->
+            <div class="header">
+                <h1>重置密码?🤦🏻‍♂️</h1>
+            </div>
+            <!-- 重置密码表单 -->
+            <el-form :model="ResetPasswordForm" :rules="formRules" ref="ResetPasswordFormRef">
+                <el-form-item label="用户名" prop="username" :label-position="labelPosition" label-width="80px">
+                    <el-input v-model="ResetPasswordForm.username" type="=text" placeholder="请输入用户名"
+                        :prefix-icon="User" />
+                </el-form-item>
+                <el-form-item label="新密码" prop="newPassword" :label-position="labelPosition" label-width="80px">
+                    <el-input v-model="ResetPasswordForm.newPassword" type="password" placeholder="请输入新密码"
+                        :prefix-icon="Lock" show-password />
+                </el-form-item>
+                <el-form-item label="确认密码" prop="confirmPassword" :label-position="labelPosition" label-width="80px">
+                    <el-input v-model="ResetPasswordForm.confirmPassword" type="password" placeholder="请确认新密码"
+                        :prefix-icon="Lock" show-password />
+                </el-form-item>
+                <el-form-item width="100%">
+                    <el-button type="primary" class="login-btn" size="large" @click="handleResetPassword"
+                        style="width: 100%" :loading="userStore.loading" :disabled="userStore.loading">
+                        {{ userStore.loading ? '' : '重置密码' }}
+                    </el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import type { FormRules, FormProps, FormInstance } from 'element-plus'
+import { User, Lock } from '@element-plus/icons-vue'
+
+// 业务导入
+import { useUserStore } from '@/stores/user'
+const userStore = useUserStore()
+
+const labelPosition = ref<FormProps['labelPosition']>('left')
+const ResetPasswordFormRef = ref<FormInstance>()
+const ResetPasswordForm = reactive({
+    username: '',
+    newPassword: '',
+    confirmPassword: ''
+})
+// 表单校验规则（Element Plus 标准校验）
+const formRules = reactive<FormRules>({
+    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+    newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
+    confirmPassword: [{
+        required: true, message: '请确认新密码', trigger: 'blur'
+    }, {
+        validator: (rule, value, callback) => {
+            if (value !== ResetPasswordForm.newPassword) {
+                callback(new Error('两次输入的密码不一致'))
+            } else {
+                callback()
+            }
+        },
+        trigger: 'blur'
+    }]
+})
+
+// 重置密码处理函数
+const handleResetPassword = async () => {
+    if (!ResetPasswordFormRef.value) return
+    ResetPasswordFormRef.value.validate(async (valid) => {
+        if (valid) {
+            await userStore.resetPassword(ResetPasswordForm)
+        } else {
+            console.log('重置密码表单验证失败')
+        }
+    })
+}
+</script>
+<style scoped lang="scss"></style>
--- a/src/views/test.vue
+++ b/src/views/test.vue
@ -0,0 +1,29 @@
+<template>
+    <div>
+        <h1>Test</h1>
+        <el-form-item width="100%">
+            <el-button type="primary" class="login-btn" size="large" @click="handleLogout">
+                退出登录
+            </el-button>
+            <el-button type="primary" class="login-btn" size="large" @click="hadnleList">
+                获取信息
+            </el-button>
+        </el-form-item>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useUserStore } from '@/stores/user'
+
+// 测试
+import { request } from '@/api/index'
+const userStore = useUserStore()
+const handleLogout = () => {
+    userStore.logout()
+}
+const hadnleList = () => {
+    request.get('/list').then(res => {
+        console.log(res)
+    })
+}
+</script>
--- a/src/views/首页拆分模块.vue
+++ b/src/views/首页拆分模块.vue
@ -0,0 +1,395 @@
+<template>
+    <el-container class="app-container">
+        <!-- 侧边栏 -->
+        <el-aside width="200px" class="app-aside">
+            <div class="logo">
+                <h2>Vben Admin</h2>
+            </div>
+            <el-menu :default-active="activeMenu" class="app-menu" background-color="#001529" text-color="#bfcbd9"
+                active-text-color="#409EFF">
+                <el-sub-menu index="1">
+                    <template #title>
+                        <el-icon><data-analysis /></el-icon>
+                        <span>概览</span>
+                    </template>
+                    <el-menu-item index="1-1">分析页</el-menu-item>
+                </el-sub-menu>
+                <el-sub-menu index="2">
+                    <template #title>
+                        <el-icon>
+                            <monitor />
+                        </el-icon>
+                        <span>演示</span>
+                    </template>
+                </el-sub-menu>
+                <el-sub-menu index="3">
+                    <template #title>
+                        <el-icon>
+                            <menu />
+                        </el-icon>
+                        <span>示例</span>
+                    </template>
+                </el-sub-menu>
+                <el-sub-menu index="4">
+                    <template #title>
+                        <el-icon>
+                            <setting />
+                        </el-icon>
+                        <span>系统管理</span>
+                    </template>
+                </el-sub-menu>
+                <el-menu-item index="5">
+                    <el-icon><folder-opened /></el-icon>
+                    <span>项目</span>
+                </el-menu-item>
+                <el-menu-item index="6">
+                    <el-icon><info-filled /></el-icon>
+                    <span>关于</span>
+                </el-menu-item>
+            </el-menu>
+        </el-aside>
+
+        <!-- 主内容区 -->
+        <el-container class="app-main-container">
+            <!-- 顶部导航栏 -->
+            <el-header class="app-header">
+                <div class="header-left">
+                    <el-icon class="toggle-icon" @click="toggleSidebar">
+                        <fold />
+                    </el-icon>
+                    <el-breadcrumb separator="/">
+                        <el-breadcrumb-item :to="{ path: '/' }">概览</el-breadcrumb-item>
+                        <el-breadcrumb-item>分析页</el-breadcrumb-item>
+                    </el-breadcrumb>
+                </div>
+                <div class="header-right">
+                    <el-input placeholder="搜索" prefix-icon="Search" style="width: 200px; margin-right: 20px" />
+                    <el-icon class="header-icon"><moon-night /></el-icon>
+                    <el-icon class="header-icon">
+                        <avatar />
+                    </el-icon>
+                    <el-icon class="header-icon"><zoom-in /></el-icon>
+                    <el-icon class="header-icon">
+                        <bell />
+                    </el-icon>
+                    <el-avatar :size="32" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
+                </div>
+            </el-header>
+
+            <!-- 内容主体 -->
+            <el-main class="app-main">
+                <el-tabs v-model="activeTab" class="content-tabs">
+                    <el-tab-pane label="分析页" name="analysis" />
+                </el-tabs>
+
+                <!-- 数据卡片 -->
+                <el-row :gutter="20" class="data-cards">
+                    <el-col :span="6">
+                        <el-card class="data-card">
+                            <div class="card-content">
+                                <div class="card-info">
+                                    <div class="card-title">用户量</div>
+                                    <div class="card-value">12,000</div>
+                                    <div class="card-desc">日用户量</div>
+                                </div>
+                                <div class="card-icon blue">
+                                    <el-icon>
+                                        <user />
+                                    </el-icon>
+                                </div>
+                            </div>
+                        </el-card>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-card class="data-card">
+                            <div class="card-content">
+                                <div class="card-info">
+                                    <div class="card-title">访问量</div>
+                                    <div class="card-value">25,000</div>
+                                    <div class="card-desc">日访问量</div>
+                                </div>
+                                <div class="card-icon red">
+                                    <el-icon>
+                                        <view />
+                                    </el-icon>
+                                </div>
+                            </div>
+                        </el-card>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-card class="data-card">
+                            <div class="card-content">
+                                <div class="card-info">
+                                    <div class="card-title">下载量</div>
+                                    <div class="card-value">6,000</div>
+                                    <div class="card-desc">日下载量</div>
+                                </div>
+                                <div class="card-icon orange">
+                                    <el-icon>
+                                        <download />
+                                    </el-icon>
+                                </div>
+                            </div>
+                        </el-card>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-card class="data-card">
+                            <div class="card-content">
+                                <div class="card-info">
+                                    <div class="card-title">使用量</div>
+                                    <div class="card-value">1,000</div>
+                                    <div class="card-desc">日使用量</div>
+                                </div>
+                                <div class="card-icon yellow">
+                                    <el-icon><data-analysis /></el-icon>
+                                </div>
+                            </div>
+                        </el-card>
+                    </el-col>
+                </el-row>
+
+                <!-- 图表区域 -->
+                <el-card class="chart-card">
+                    <template #header>
+                        <div class="chart-header">
+                            <span>趋势分析</span>
+                            <el-radio-group v-model="chartRange" size="small">
+                                <el-radio-button value="today">今日</el-radio-button>
+                                <el-radio-button value="week">本周</el-radio-button>
+                                <el-radio-button value="month">本月</el-radio-button>
+                            </el-radio-group>
+                        </div>
+                    </template>
+                    <!-- 这里可以替换为你的图表组件，如 ECharts -->
+                    <div class="chart-placeholder">
+                        <div class="wave-chart"></div>
+                    </div>
+                </el-card>
+
+                <!-- 底部卡片 -->
+                <el-row :gutter="20" class="bottom-cards">
+                    <el-col :span="8">
+                        <el-card class="bottom-card">
+                            <template #header>访问数量</template>
+                            <div class="radar-chart"></div>
+                        </el-card>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-card class="bottom-card">
+                            <template #header>访问来源</template>
+                            <div class="donut-chart"></div>
+                        </el-card>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-card class="bottom-card">
+                            <template #header>访问渠道</template>
+                            <div class="pie-chart"></div>
+                        </el-card>
+                    </el-col>
+                </el-row>
+            </el-main>
+        </el-container>
+    </el-container>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+    Fold,
+    MoonNight,
+    Avatar,
+    ZoomIn,
+    Bell,
+    User,
+    View,
+    Download,
+    DataAnalysis,
+    Monitor,
+    Menu,
+    Setting,
+    FolderOpened,
+    InfoFilled
+} from '@element-plus/icons-vue'
+
+const activeMenu = ref('1-1')
+const activeTab = ref('analysis')
+const chartRange = ref('today')
+
+const toggleSidebar = () => {
+    // 侧边栏折叠/展开逻辑
+}
+</script>
+
+<style scoped>
+.app-container {
+    height: 100vh;
+}
+
+.app-aside {
+    background-color: #001529;
+    color: #bfcbd9;
+}
+
+.logo {
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    border-bottom: 1px solid #0c2135;
+}
+
+.app-menu {
+    border: none;
+}
+
+.app-main-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.app-header {
+    background-color: #fff;
+    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.toggle-icon {
+    cursor: pointer;
+    font-size: 20px;
+}
+
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.header-icon {
+    cursor: pointer;
+    font-size: 18px;
+    color: #606266;
+}
+
+.app-main {
+    background-color: #f0f2f5;
+    padding: 20px;
+    overflow-y: auto;
+}
+
+.content-tabs {
+    margin-bottom: 20px;
+}
+
+.data-cards {
+    margin-bottom: 20px;
+}
+
+.data-card {
+    border-radius: 8px;
+}
+
+.card-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.card-title {
+    font-size: 14px;
+    color: #909399;
+    margin-bottom: 8px;
+}
+
+.card-value {
+    font-size: 24px;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 4px;
+}
+
+.card-desc {
+    font-size: 12px;
+    color: #c0c4cc;
+}
+
+.card-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    color: #fff;
+}
+
+.card-icon.blue {
+    background-color: #409eff;
+}
+
+.card-icon.red {
+    background-color: #f56c6c;
+}
+
+.card-icon.orange {
+    background-color: #e6a23c;
+}
+
+.card-icon.yellow {
+    background-color: #e6a23c;
+}
+
+.chart-card {
+    margin-bottom: 20px;
+    border-radius: 8px;
+}
+
+.chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.chart-placeholder {
+    height: 300px;
+    background-color: #fafafa;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.wave-chart {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(180deg, rgba(64, 158, 255, 0.2) 0%, rgba(64, 158, 255, 0) 100%);
+    border-radius: 4px;
+}
+
+.bottom-cards {
+    margin-top: 20px;
+}
+
+.bottom-card {
+    border-radius: 8px;
+    height: 250px;
+}
+
+.radar-chart,
+.donut-chart,
+.pie-chart {
+    height: 200px;
+    background-color: #fafafa;
+    border-radius: 4px;
+}
+</style>
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -0,0 +1,19 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": [
+    "env.d.ts",
+    "src/**/*",
+    "src/**/*.vue"
+  ],
+  "exclude": [
+    "src/**/__tests__/*"
+  ],
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  }
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,20 @@
+{
+  "extends": "@tsconfig/node24/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*",
+    "eslint.config.*"
+  ],
+  "compilerOptions": {
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": [
+      "node"
+    ]
+  }
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,78 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// auto import - 新增的自动导入插件导入
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import ElementPlus from 'unplugin-element-plus/vite'
+import Icons from 'unplugin-icons/vite'
+import IconsResolver from 'unplugin-icons/resolver'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+
+    // Element Plus 样式按需导入
+    ElementPlus({
+      useSource: true
+    }),
+    // 自动导入 API
+    AutoImport({
+      // 自动导入Vue、VueRouter、Pinia、VueUse等核心API
+      imports: [
+        'vue',
+        'vue-router',
+        'pinia',
+        '@vueuse/core'
+      ],
+      // 解析Element Plus和图标组件的API
+      resolvers: [
+        ElementPlusResolver(),
+        IconsResolver({
+          prefix: 'Icon'
+        })
+      ],
+      // 生成类型声明文件，解决TS类型提示问题
+      dts: './src/auto-imports.d.ts',
+      // 生成eslint配置，解决自动导入的eslint报错
+      eslintrc: {
+        enabled: true,
+        filepath: './.eslintrc-auto-import.json'
+      }
+    }),
+    // 自动导入组件
+    Components({
+      // 自动导入自定义组件的目录
+      dirs: ['src/components'],
+      resolvers: [
+        // 自动导入Element Plus组件
+        ElementPlusResolver(),
+        // 自动导入图标组件
+        IconsResolver({
+          enabledCollections: ['ep'], // Element Plus图标集
+          prefix: 'Icon'
+        })
+      ],
+      // 生成组件类型声明文件
+      dts: './src/components.d.ts'
+    }),
+    // 自动导入图标
+    Icons({
+      autoInstall: true, // 自动安装缺失的图标依赖
+      scale: 1, // 图标缩放比例
+      defaultClass: 'inline-block' // 图标默认样式
+    }),
+    // ========== 新增的自动导入配置结束 ==========
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+  },
+})