脚手架搭建
This commit is contained in:
李远
parent
b9279b355e
commit
451f28151c
|
|
@ -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
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
* text=auto eol=lf
|
||||||
|
|
@ -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
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
||||||
|
"plugins": ["eslint", "typescript", "unicorn", "oxc", "vue"],
|
||||||
|
"env": {
|
||||||
|
"browser": true
|
||||||
|
},
|
||||||
|
"categories": {
|
||||||
|
"correctness": "error"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://json.schemastore.org/prettierrc",
|
||||||
|
"semi": false,
|
||||||
|
"singleQuote": true,
|
||||||
|
"printWidth": 100
|
||||||
|
}
|
||||||
|
|
@ -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
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
* text=auto eol=lf
|
||||||
|
|
@ -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
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
||||||
|
"plugins": ["eslint", "typescript", "unicorn", "oxc", "vue"],
|
||||||
|
"env": {
|
||||||
|
"browser": true
|
||||||
|
},
|
||||||
|
"categories": {
|
||||||
|
"correctness": "error"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://json.schemastore.org/prettierrc",
|
||||||
|
"semi": false,
|
||||||
|
"singleQuote": true,
|
||||||
|
"printWidth": 100
|
||||||
|
}
|
||||||
|
|
@ -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
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
@ -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,
|
||||||
|
)
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -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>
|
||||||
|
|
@ -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')
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
|
routes: [],
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
|
|
@ -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 }
|
||||||
|
})
|
||||||
|
|
@ -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/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.node.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.app.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"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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))
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
@ -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,
|
||||||
|
)
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -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>
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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); // 抛出错误让组件层捕获
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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图标组件
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
<template>
|
||||||
|
<div class="audit-container">
|
||||||
|
<h1>资金审核</h1>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
存款
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
<template>
|
||||||
|
<div class="detail-container">
|
||||||
|
<h1>资金详情</h1>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
<template>
|
||||||
|
<div class="recharge-container">
|
||||||
|
<h1>资金充值</h1>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
<template>
|
||||||
|
<div class="transfer-container">
|
||||||
|
<h1>资金转账</h1>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
取款
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
<template>
|
||||||
|
<div class="withdrawal-container">
|
||||||
|
<h1>资金提现</h1>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
首页
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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')
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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 }
|
||||||
|
})
|
||||||
|
|
@ -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
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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);
|
||||||
|
}
|
||||||
|
|
@ -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>;
|
||||||
|
|
@ -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[]
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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' })
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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/*"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.node.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.app.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"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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))
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue