🐛 fix dark mode issue

auto-import.d.ts

@@ -7,23 +7,47 @@ export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
+  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
+  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const computed: typeof import('vue')['computed']
+  const computedAsync: typeof import('@vueuse/core')['computedAsync']
+  const computedEager: typeof import('@vueuse/core')['computedEager']
+  const computedInject: typeof import('@vueuse/core')['computedInject']
+  const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
+  const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
+  const controlledRef: typeof import('@vueuse/core')['controlledRef']
   const createApp: typeof import('vue')['createApp']
+  const createEventHook: typeof import('@vueuse/core')['createEventHook']
+  const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
+  const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
   const createPinia: typeof import('pinia')['createPinia']
+  const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+  const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
+  const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
+  const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
+  const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
   const customRef: typeof import('vue')['customRef']
+  const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
+  const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
   const defineStore: typeof import('pinia')['defineStore']
+  const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
+  const extendRef: typeof import('@vueuse/core')['extendRef']
   const getActivePinia: typeof import('pinia')['getActivePinia']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const h: typeof import('vue')['h']
+  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
+  const injectLocal: typeof import('@vueuse/core')['injectLocal']
+  const isDefined: typeof import('@vueuse/core')['isDefined']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
+  const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
   const mapActions: typeof import('pinia')['mapActions']
   const mapGetters: typeof import('pinia')['mapGetters']
   const mapState: typeof import('pinia')['mapState']
@@ -37,43 +61,240 @@ declare global {
   const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
   const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
   const onDeactivated: typeof import('vue')['onDeactivated']
   const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
+  const onLongPress: typeof import('@vueuse/core')['onLongPress']
   const onMounted: typeof import('vue')['onMounted']
   const onRenderTracked: typeof import('vue')['onRenderTracked']
   const onRenderTriggered: typeof import('vue')['onRenderTriggered']
   const onScopeDispose: typeof import('vue')['onScopeDispose']
   const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
+  const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
   const provide: typeof import('vue')['provide']
+  const provideLocal: typeof import('@vueuse/core')['provideLocal']
+  const reactify: typeof import('@vueuse/core')['reactify']
+  const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
   const reactive: typeof import('vue')['reactive']
+  const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
+  const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
+  const reactivePick: typeof import('@vueuse/core')['reactivePick']
   const readonly: typeof import('vue')['readonly']
   const ref: typeof import('vue')['ref']
+  const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
+  const refDebounced: typeof import('@vueuse/core')['refDebounced']
+  const refDefault: typeof import('@vueuse/core')['refDefault']
+  const refThrottled: typeof import('@vueuse/core')['refThrottled']
+  const refWithControl: typeof import('@vueuse/core')['refWithControl']
   const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveRef: typeof import('@vueuse/core')['resolveRef']
+  const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
   const setActivePinia: typeof import('pinia')['setActivePinia']
   const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
   const storeToRefs: typeof import('pinia')['storeToRefs']
+  const syncRef: typeof import('@vueuse/core')['syncRef']
+  const syncRefs: typeof import('@vueuse/core')['syncRefs']
+  const templateRef: typeof import('@vueuse/core')['templateRef']
+  const throttledRef: typeof import('@vueuse/core')['throttledRef']
+  const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
   const toRaw: typeof import('vue')['toRaw']
+  const toReactive: typeof import('@vueuse/core')['toReactive']
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
   const toValue: typeof import('vue')['toValue']
   const triggerRef: typeof import('vue')['triggerRef']
+  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
+  const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
+  const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
+  const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
+  const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
   const unref: typeof import('vue')['unref']
+  const unrefElement: typeof import('@vueuse/core')['unrefElement']
+  const until: typeof import('@vueuse/core')['until']
+  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+  const useAnimate: typeof import('@vueuse/core')['useAnimate']
+  const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
+  const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
+  const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
+  const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
+  const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
+  const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
+  const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
+  const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
+  const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
+  const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
+  const useArraySome: typeof import('@vueuse/core')['useArraySome']
+  const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
+  const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
+  const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
   const useAttrs: typeof import('vue')['useAttrs']
+  const useBase64: typeof import('@vueuse/core')['useBase64']
+  const useBattery: typeof import('@vueuse/core')['useBattery']
+  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
+  const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
+  const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
+  const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
+  const useCached: typeof import('@vueuse/core')['useCached']
+  const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
+  const useCloned: typeof import('@vueuse/core')['useCloned']
+  const useColorMode: typeof import('@vueuse/core')['useColorMode']
+  const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
+  const useCounter: typeof import('@vueuse/core')['useCounter']
   const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVar: typeof import('@vueuse/core')['useCssVar']
   const useCssVars: typeof import('vue')['useCssVars']
+  const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
+  const useCycleList: typeof import('@vueuse/core')['useCycleList']
+  const useDark: typeof import('@vueuse/core')['useDark']
+  const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
+  const useDebounce: typeof import('@vueuse/core')['useDebounce']
+  const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
+  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
+  const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
+  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
+  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
+  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
+  const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
+  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
+  const useDraggable: typeof import('@vueuse/core')['useDraggable']
+  const useDropZone: typeof import('@vueuse/core')['useDropZone']
+  const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
+  const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
+  const useElementHover: typeof import('@vueuse/core')['useElementHover']
+  const useElementSize: typeof import('@vueuse/core')['useElementSize']
+  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
+  const useEventBus: typeof import('@vueuse/core')['useEventBus']
+  const useEventListener: typeof import('@vueuse/core')['useEventListener']
+  const useEventSource: typeof import('@vueuse/core')['useEventSource']
+  const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
+  const useFavicon: typeof import('@vueuse/core')['useFavicon']
+  const useFetch: typeof import('@vueuse/core')['useFetch']
+  const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
+  const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
+  const useFocus: typeof import('@vueuse/core')['useFocus']
+  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
+  const useFps: typeof import('@vueuse/core')['useFps']
+  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
+  const useGamepad: typeof import('@vueuse/core')['useGamepad']
+  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useIdle: typeof import('@vueuse/core')['useIdle']
+  const useImage: typeof import('@vueuse/core')['useImage']
+  const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
+  const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
+  const useInterval: typeof import('@vueuse/core')['useInterval']
+  const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
+  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
+  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
   const useLink: typeof import('vue-router')['useLink']
+  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
+  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
+  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
+  const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
+  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
+  const useMemoize: typeof import('@vueuse/core')['useMemoize']
+  const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useMounted: typeof import('@vueuse/core')['useMounted']
+  const useMouse: typeof import('@vueuse/core')['useMouse']
+  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
+  const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
+  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
+  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
+  const useNetwork: typeof import('@vueuse/core')['useNetwork']
+  const useNow: typeof import('@vueuse/core')['useNow']
+  const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
+  const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
+  const useOnline: typeof import('@vueuse/core')['useOnline']
+  const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
+  const useParallax: typeof import('@vueuse/core')['useParallax']
+  const useParentElement: typeof import('@vueuse/core')['useParentElement']
+  const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
+  const usePermission: typeof import('@vueuse/core')['usePermission']
+  const usePointer: typeof import('@vueuse/core')['usePointer']
+  const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
+  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
+  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
+  const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
+  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
+  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
+  const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
+  const usePrevious: typeof import('@vueuse/core')['usePrevious']
+  const useRafFn: typeof import('@vueuse/core')['useRafFn']
+  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
+  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
+  const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
+  const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
+  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
+  const useScroll: typeof import('@vueuse/core')['useScroll']
+  const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
+  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
+  const useShare: typeof import('@vueuse/core')['useShare']
   const useSlots: typeof import('vue')['useSlots']
+  const useSorted: typeof import('@vueuse/core')['useSorted']
+  const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
+  const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
+  const useStepper: typeof import('@vueuse/core')['useStepper']
+  const useStorage: typeof import('@vueuse/core')['useStorage']
+  const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
+  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
+  const useSupported: typeof import('@vueuse/core')['useSupported']
+  const useSwipe: typeof import('@vueuse/core')['useSwipe']
+  const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
+  const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
+  const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
+  const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
+  const useThrottle: typeof import('@vueuse/core')['useThrottle']
+  const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
+  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
+  const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
+  const useTimeout: typeof import('@vueuse/core')['useTimeout']
+  const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
+  const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
+  const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
+  const useTitle: typeof import('@vueuse/core')['useTitle']
+  const useToNumber: typeof import('@vueuse/core')['useToNumber']
+  const useToString: typeof import('@vueuse/core')['useToString']
+  const useToggle: typeof import('@vueuse/core')['useToggle']
+  const useTransition: typeof import('@vueuse/core')['useTransition']
+  const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
+  const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
+  const useVModel: typeof import('@vueuse/core')['useVModel']
+  const useVModels: typeof import('@vueuse/core')['useVModels']
+  const useVibrate: typeof import('@vueuse/core')['useVibrate']
+  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
+  const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
+  const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
+  const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
+  const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
+  const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
+  const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
+  const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
+  const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
   const watch: typeof import('vue')['watch']
+  const watchArray: typeof import('@vueuse/core')['watchArray']
+  const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
+  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
+  const watchDeep: typeof import('@vueuse/core')['watchDeep']
   const watchEffect: typeof import('vue')['watchEffect']
+  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
+  const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
+  const watchOnce: typeof import('@vueuse/core')['watchOnce']
+  const watchPausable: typeof import('@vueuse/core')['watchPausable']
   const watchPostEffect: typeof import('vue')['watchPostEffect']
   const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+  const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
+  const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
+  const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
+  const whenever: typeof import('@vueuse/core')['whenever']
 }
 // for type re-export
 declare global {

components.d.ts

@@ -7,7 +7,6 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    3DCard: typeof import('./src/components/3DCard/3DCard.vue')['default']
     AButton: typeof import('ant-design-vue/es')['Button']
     AButtonGroup: typeof import('ant-design-vue/es')['ButtonGroup']
     ACard: typeof import('ant-design-vue/es')['Card']
@@ -15,12 +14,16 @@ declare module 'vue' {
     AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
     ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
     ADivider: typeof import('ant-design-vue/es')['Divider']
+    ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     AFlex: typeof import('ant-design-vue/es')['Flex']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
+    AMenu: typeof import('ant-design-vue/es')['Menu']
+    AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     AQrcode: typeof import('ant-design-vue/es')['QRCode']
+    ArrowRightOutlined: typeof import('@ant-design/icons-vue')['ArrowRightOutlined']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ATabPane: typeof import('ant-design-vue/es')['TabPane']
@@ -28,15 +31,19 @@ declare module 'vue' {
     ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     BoxDog: typeof import('./src/components/BoxDog/BoxDog.vue')['default']
-    Card3D: typeof import('./src/components/3DCard/Card3D.vue')['default']
+    Card3D: typeof import('./src/components/Card3D/Card3D.vue')['default']
+    Clouds: typeof import('./src/components/Clouds/Clouds.vue')['default']
+    DownOutlined: typeof import('@ant-design/icons-vue')['DownOutlined']
     DynamicTitle: typeof import('./src/components/DynamicTitle/DynamicTitle.vue')['default']
     EffectsCard: typeof import('./src/components/EffectsCard/EffectsCard.vue')['default']
     ForgetPage: typeof import('./src/views/Forget/ForgetPage.vue')['default']
+    GithubOutlined: typeof import('@ant-design/icons-vue')['GithubOutlined']
     LandingPage: typeof import('./src/views/Landing/LandingPage.vue')['default']
     LockOutlined: typeof import('@ant-design/icons-vue')['LockOutlined']
     LoginFooter: typeof import('./src/views/Login/LoginFooter.vue')['default']
     LoginPage: typeof import('./src/views/Login/LoginPage.vue')['default']
     NotFound: typeof import('./src/views/404/NotFound.vue')['default']
+    QqOutlined: typeof import('@ant-design/icons-vue')['QqOutlined']
     QRLogin: typeof import('./src/views/QRLogin/QRLogin.vue')['default']
     QRLoginFooter: typeof import('./src/views/QRLogin/QRLoginFooter.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
@@ -46,5 +53,6 @@ declare module 'vue' {
     TestI18n: typeof import('./src/views/TestI18n.vue')['default']
     TestTheme: typeof import('./src/views/TestTheme.vue')['default']
     UserOutlined: typeof import('@ant-design/icons-vue')['UserOutlined']
+    WechatOutlined: typeof import('@ant-design/icons-vue')['WechatOutlined']
   }
 }

package.json

@@ -11,11 +11,14 @@
   "dependencies": {
     "@alova/adapter-axios": "^2.0.5",
     "@ant-design/icons-vue": "^7.0.1",
+    "@types/animejs": "^3.1.12",
     "@types/crypto-js": "^4.2.2",
     "@types/json-stringify-safe": "^5.0.3",
     "@types/node": "^22.2.0",
     "@types/nprogress": "^0.2.3",
+    "@vueuse/core": "^11.0.1",
     "alova": "^3.0.6",
+    "animejs": "^3.2.2",
     "ant-design-vue": "^4.2.3",
     "axios": "^1.7.3",
     "crypto-js": "^4.2.0",

src/assets/styles/global.scss

@@ -1,18 +1,22 @@
 @import "theme";
 
-body {
+:root {
+    --background-color: #ffffff;
+    --text-color: #000000;
+}
+
+[data-theme="dark"] {
+    --background-color: #121212;
+    --text-color: #ffffff;
+}
+
+#app {
     position: relative;
     transition: background-color 0.3s,
     color 0.3s;
     width: 100vw;
     height: 100vh;
-    @include useTheme {
+    overflow-x: hidden;
-        background-color: getModeVar('bgColor') !important;
-        color: getModeVar('infoColor') !important;
-    }
-}
-
-#app {
     @include useTheme {
         background-color: getModeVar('bgColor') !important;
         color: getModeVar('infoColor') !important;
@@ -35,3 +39,5 @@ body {
 #nprogress .peg {
     box-shadow: 0 0 10px cyan, 0 0 5px cyan !important;
 }
+
+

src/assets/styles/scroll-bar.scss

@@ -1,7 +1,7 @@
 
 ::-webkit-scrollbar {
-    width: 6px;
+    width: 1px;
-    height: 8px;
+    height: 1px;
 }
 
 ::-webkit-scrollbar-button {

src/assets/styles/theme.scss

@@ -1,16 +1,15 @@
 @import "colors.module";
 
 $modes: (
-        light: (
+        "light": (
-                bgColor: #fff,
+                bgColor: transparent,
                 infoColor: #000
         ),
-        dark: (
+        "dark": (
                 bgColor: #000,
                 infoColor: #fff
         )
 );
-
 $curMode: light;
 $curTheme: red;
 @mixin useTheme() {

src/components/BoxDog/index.scss

@@ -1,4 +1,3 @@
-
 html,
 body {
     height: 100%;
@@ -18,7 +17,7 @@ html {
 
 body {
     position: relative;
-    background: transparent;
+    background: transparent !important;
     padding: 0;
     margin: 0;
 }

src/components/Card3D/Card3D.vue

@@ -4,7 +4,7 @@
     <h1>Popular</h1>
     <div class="card card__one">
       <div class="card__bg" style="background-position: -8.01px 4.59px;"></div>
-      <img class="card__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/3dr_mono.png"
+      <img class="card__img" src="@/assets/images/3dr_mono.png"
            style="transform: translateX(17.8px) translateY(-10.2px);">
       <div class="card__text">
         <p class="card__title">Princess Mononoke</p>
@@ -12,7 +12,7 @@
     </div>
     <div class="card card__two">
       <div class="card__bg" style="background-position: -8.01px 4.59px;"></div>
-      <img class="card__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/3dr_chihiro.png"
+      <img class="card__img" src="@/assets/images/3dr_chihiro.png"
            style="transform: translateX(17.8px) translateY(-10.2px);">
       <div class="card__text">
         <p class="card__title">Spirited Away</p>
@@ -20,7 +20,7 @@
     </div>
     <div class="card card__three">
       <div class="card__bg" style="background-position: -8.01px 4.59px;"></div>
-      <img class="card__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/3dr_howlcastle.png"
+      <img class="card__img" src="@/assets/images/3dr_howlcastle.png"
            style="transform: translateX(17.8px) translateY(-10.2px);">
       <div class="card__text">
         <p class="card__title">Howl's Moving Castle</p>
@@ -65,25 +65,7 @@ onMounted(() => {
 });
 
 </script>
-<style scoped>
+<style scoped lang="scss">
-@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800");
-
-html, body {
-  height: 100%;
-}
-
-body {
-  align-items: center;
-  background: #642B73;
-  background: linear-gradient(to bottom, #C6426E, #642B73);
-  display: flex;
-  font-family: "Open Sans", sans;
-  justify-content: center;
-  overflow: hidden;
-  perspective: 1800px;
-  text-align: center;
-  margin: 0 20px;
-}
 
 h1 {
   color: #3e3e42;
@@ -157,7 +139,7 @@ h3 {
 }
 
 .card__one .card__bg {
-  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/3dr_monobg.jpg") center/cover no-repeat;
+  background: url("@/assets/images/3dr_monobg.jpg") center/cover no-repeat;
 }
 
 .card__two .card__img {
@@ -165,7 +147,7 @@ h3 {
 }
 
 .card__two .card__bg {
-  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/3dr_spirited.jpg") center/cover no-repeat;
+  background: url("@/assets/images/3dr_spirited.jpg") center/cover no-repeat;
 }
 
 .card__three .card__img {
@@ -175,7 +157,7 @@ h3 {
 }
 
 .card__three .card__bg {
-  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/3dr_howlbg.jpg") center/cover no-repeat;
+  background: url("@/assets/images/3dr_howlbg.jpg") center/cover no-repeat;
 }
 
 .card__text {

src/components/Clouds/Clouds.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="flex-wrapper">
+    <section class="container">
+      <img id="cloudOne" class="clouds" src="@/assets/images/clouds.png"
+           style="transform: translateY(8.42555px);" alt="">
+      <img id="cloudTwo" class="clouds" src="@/assets/images/cloud.png"
+           style="transform: translateY(-1.92713px);" alt="">
+      <img id="cloudThree" class="clouds" src="@/assets/images/cloud.png"
+           style="transform: translateY(-13.9905px);" alt="">
+      <img id="cloudFour" class="clouds" src="@/assets/images/cloud.png"
+           style="transform: translateY(2.24832px);" alt="">
+      <div class="card-content">
+        <h1>{{ t("landing.title") }}</h1>
+        <p>{{ t("landing.description") }}</p>
+        <AButton class="button-text" type="primary">{{ t("landing.learnMore") }}</AButton>
+      </div>
+      <div class="background-container"></div>
+    </section>
+  </div>
+</template>
+<script setup lang="ts">
+import {onMounted} from "vue";
+import anime from 'animejs/lib/anime.es.js';
+import {useI18n} from "vue-i18n";
+
+const {t} = useI18n();
+onMounted(() => {
+  anime({
+    targets: '#cloudOne',
+    translateY: '20',
+    duration: 2000,
+    loop: true,
+    direction: 'alternate',
+    easing: 'linear'
+  });
+
+
+  anime({
+    targets: '#cloudTwo',
+    translateY: '-20',
+    duration: 2500,
+    loop: true,
+    direction: 'alternate',
+    easing: 'linear'
+  });
+
+
+  anime({
+    targets: '#cloudThree',
+    translateY: '-30',
+    duration: 3000,
+    loop: true,
+    direction: 'alternate',
+    easing: 'linear'
+  });
+
+
+  anime({
+    targets: '#cloudFour',
+    translateY: '40',
+    duration: 5000,
+    loop: true,
+    direction: 'alternate',
+    easing: 'linear'
+  });
+
+});
+</script>
+<style scoped lang="scss">
+* {
+  box-sizing: border-box;
+}
+
+button {
+  background: #55B4FB;
+  border-radius: 30px;
+  border: 2px solid #55B4FB;
+  height: 44px;
+  width: 165px;
+  color: white;
+  position: relative;
+  cursor: pointer;
+  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
+  transition: box-shadow 0.25s;
+}
+
+button:hover {
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
+  background: #46adfb;
+}
+
+button i {
+  background: #75C2FB;
+  padding: 10px;
+  border-radius: 50px;
+  position: absolute;
+  border: 1px solid white;
+  right: 2px;
+  top: 50%;
+  transform: translate(0%, -50%);
+}
+
+button .button-text {
+  position: absolute;
+  top: 50%;
+  transform: translate(0%, -50%);
+  left: 25px;
+}
+
+body {
+  background: #F4F5F8;
+  padding: 0 30px;
+  overflow: hidden;
+}
+
+.card-content {
+  z-index: 10;
+  width: 80%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -65%);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.card-content h1 {
+  color: white;
+  font-size: 2.5rem;
+  text-align: center;
+  margin-bottom: 10px;
+  font-family: Lato, sans-serif;
+  font-weight: 500;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
+}
+
+.card-content p {
+  color: white;
+  line-height: 1.5;
+  text-align: center;
+  margin-bottom: 25px;
+  margin-top: 0px;
+  font-size: 1.2rem;
+  font-weight: lighter;
+  max-width: 650px;
+  font-family: "Source Sans Pro", sans-serif;
+  font-weight: 300;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
+}
+
+.flex-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+}
+
+.container {
+  max-width: 800px;
+  min-width: 320px;
+  width: 100%;
+  background: #7A90F6;
+  /* fallback for old browsers */
+  /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(to right, #7A90F6, #7B6FF6);
+  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  position: relative;
+  height: 400px;
+  border-radius: 10px;
+  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
+}
+
+.background-container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+}
+
+.background-container:before {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  z-index: 1;
+  width: 2000px;
+  height: 100%;
+  //background: url("https://www.digitalocean.com/assets/media/products/header-04dcc3be.svg");
+  //background-position: bottom;
+  //background-repeat: no-repeat;
+  content: "";
+  transform: translateX(-50%);
+}
+
+.clouds {
+  width: 225px;
+  position: absolute;
+}
+
+#cloudOne {
+  top: -100px;
+  left: -90px;
+}
+
+#cloudTwo {
+  right: -100px;
+  bottom: -90px;
+  z-index: 3;
+}
+
+#cloudThree {
+  left: 150px;
+  bottom: -150px;
+  z-index: -1;
+}
+
+#cloudFour {
+  right: 80px;
+  top: -100px;
+  z-index: -1;
+  width: 100px;
+}
+</style>

src/layout/Landing/Content/Content.vue

@@ -1,12 +1,20 @@
 <template>
   <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;">
+    <div style="height: 100px;margin-top: 50px;">
+      <span style="font-size: 50px; font-weight: bold;">{{ t('landing.title') }}</span>
+    </div>
     <Card3D/>
+    <Clouds/>
   </div>
 </template>
 <script setup lang="ts">
 
-import Card3D from "@/components/3DCard/Card3D.vue";
+import Card3D from "@/components/Card3D/Card3D.vue";
+import Clouds from "@/components/Clouds/Clouds.vue";
+import {useI18n} from "vue-i18n";
+
+const {t} = useI18n();
 </script>
-<style scoped>
+<style scoped lang="scss">
 
 </style>

src/layout/Landing/Footer/Footer.vue

@@ -1,11 +1,41 @@
 <template>
-  <div>
+  <div class="landing-footer">
+    <div class="landing-footer-content">
+      <div class="landing-footer-content-left">
+        <div class="landing-footer-content-left-top">
+          <a href="#" class="landing-footer-content-a">{{t('landing.userAgreement')}}</a>
 
+          <a class="landing-footer-content-a">{{t('landing.privacyPolicy')}}</a>
+
+          <a class="landing-footer-content-a">{{t('landing.termsOfService')}}</a>
+
+          <a class="landing-footer-content-a">{{t('landing.contactUs')}}</a>
+
+          <a class="landing-footer-content-a">{{t('landing.friends')}}</a>
+
+          <a class="landing-footer-content-a">{{ t('landing.helpCenter')}}</a>
+        </div>
+        <div class="landing-footer-content-left-bottom">
+          <p class="landing-footer-content-p">{{t('landing.copyright')}}</p>
+          <p class="landing-footer-content-p">京ICP备19053963号-1</p>
+          <p class="landing-footer-content-p">京公网安备11010502037888号</p>
+        </div>
+      </div>
+      <div class="landing-footer-content-right">
+        <div style="width: 200px; display: flex; justify-content: space-between; align-items: center;">
+          <GithubOutlined class="landing-footer-content-icon"/>
+          <QqOutlined class="landing-footer-content-icon"/>
+          <WechatOutlined class="landing-footer-content-icon"/>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
+import {useI18n} from "vue-i18n";
 
+const { t } = useI18n();
 </script>
-<style scoped>
+<style src="./index.scss" scoped>
 
 </style>

src/layout/Landing/Footer/index.scss

@@ -0,0 +1,67 @@
+.landing-footer {
+    width: 100%;
+    height: 200px;
+    background-color: #333;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .landing-footer-content {
+        display: flex;
+        height: 100%;
+        max-width: 1200px;
+        min-width: 1200px;
+        width: 1200px;
+
+        .landing-footer-content-left {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 800px;
+
+            .landing-footer-content-left-top {
+                width: 100%;
+                height: 100px;
+                display: flex;
+                flex-direction: row;
+                align-items: flex-end;
+                justify-content: space-between;
+                font-size: 15px;
+                font-weight: bold;
+
+                .landing-footer-content-a {
+                    color: #fff !important;
+
+                }
+            }
+
+
+            .landing-footer-content-left-bottom {
+                width: 100%;
+                height: 100px;
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                justify-content: space-around;
+                color: #777777;
+                font-size: 15px;
+
+
+            }
+        }
+
+        .landing-footer-content-right {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            width: 400px;
+
+            .landing-footer-content-icon {
+                font-size: 40px;
+                color: #777777;
+            }
+        }
+    }
+}

src/layout/Landing/Header/Header.vue

@@ -1,23 +1,45 @@
 <template>
   <div class="landing-header">
-    <AFlex :vertical="false" align-items="center" justify-content="space-between">
+    <div
-      <div class="logo">
+        style="display: flex; align-items: center;justify-content: space-between; width: 1200px;min-width: 1200px; max-width: 1200px;">
-        <img class="landing-header-logo" src="@/assets/svgs/logo-schisandra.svg" alt="logo">
+      <AFlex :vertical="false" align-items="center" justify-content="space-between">
-      </div>
+        <div class="logo" style="display: flex; align-items: center;justify-content: center;cursor: pointer;">
-    </AFlex>
+          <img class="landing-header-logo" src="@/assets/svgs/logo-schisandra.svg" alt="logo">
-    <AFlex :vertical="false" justify="space-between">
+          <img style="width: 200px;" src="@/assets/images/logo.png" alt="logo">
-      <div style="display: flex; align-items: center;justify-content: center;">
-        <div class="toggle-box" style="margin-top: 20px;">
-          <input @click="app.toggleDarkMode" v-model="isDarkMode" type="checkbox" name="checkbox1"
-                 id="toggle-box-checkbox">
-          <label for="toggle-box-checkbox" class="toggle-box-label-left"></label>
-          <label for="toggle-box-checkbox" class="toggle-box-label"></label>
         </div>
-        <AButton @click="router.push('/login')" type="primary" size="large" style="margin-right: 10px;">立即进入
+      </AFlex>
-        </AButton>
+      <AFlex :vertical="false" justify="space-between">
-      </div>
+        <div style="display: flex; align-items: center;justify-content: center;">
-    </AFlex>
+          <div class="toggle-box" style="margin-top: 20px;margin-right: 20px;">
+            <input @click="toggleTheme" v-model="isDarkMode" type="checkbox" name="checkbox1"
+                   id="toggle-box-checkbox">
+            <label for="toggle-box-checkbox" class="toggle-box-label-left"></label>
+            <label for="toggle-box-checkbox" class="toggle-box-label"></label>
+          </div>
 
+          <div style="margin-right: 20px;">
+            <ADropdown>
+              <template #overlay>
+                <AMenu @click="(e: any)=>{
+                  changeLang(e.key)
+                }">
+                  <AMenuItem key="zh">{{ t("landing.chinese") }}</AMenuItem>
+                  <AMenuItem key="en">{{ t("landing.english") }}</AMenuItem>
+                </AMenu>
+              </template>
+              <AButton type="text" size="large">
+                {{ lang.lang === 'zh' ? '中文' : 'English' }}
+                <DownOutlined/>
+              </AButton>
+            </ADropdown>
+
+          </div>
+          <AButton @click="router.push('/login')" type="primary" size="large" style="margin-right: 10px;">
+            {{ t("landing.immediately") }}
+          </AButton>
+        </div>
+      </AFlex>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
@@ -25,10 +47,62 @@
 import router from "@/router/router.ts";
 import useStore from "@/store/index.ts";
 import {ref} from "vue";
+import {DownOutlined} from '@ant-design/icons-vue';
+import {useI18n} from "vue-i18n";
+
+const lang = useStore().lang;
+const {t, locale} = useI18n();
+
+
+async function changeLang(language: any) {
+  lang.lang = language;
+  locale.value = language;
+}
 
 const app = useStore().theme;
 const isDarkMode = ref<boolean>(app.darkMode === "dark");
 
+const toggleTheme = (event: any) => {
+  const x = event.clientX;
+  const y = event.clientY;
+  const endRadius = Math.hypot(
+      Math.max(x, innerWidth - x),
+      Math.max(y, innerHeight - y)
+  );
+
+  // 兼容性处理
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-expect-error
+  if (!document.startViewTransition) {
+    app.toggleDarkMode();
+    return;
+  }
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-expect-error
+  const transition = document.startViewTransition(async () => {
+    app.toggleDarkMode();
+  });
+
+  transition.ready.then(() => {
+    const clipPath = [
+      `circle(0px at ${x}px ${y}px)`,
+      `circle(${endRadius}px at ${x}px ${y}px)`,
+    ];
+    document.documentElement.animate(
+        {
+          clipPath: app.darkMode === "dark" ? [...clipPath].reverse() : clipPath,
+        },
+        {
+          duration: 400,
+          easing: "ease-in",
+          pseudoElement: app.darkMode === "dark"
+              ? "::view-transition-old(root)"
+              : "::view-transition-new(root)",
+        }
+    );
+  });
+};
+
 </script>
 <style src="./index.scss" scoped>
 

src/layout/Landing/Header/index.scss

@@ -1,10 +1,13 @@
 .landing-header {
     height: 100px;
-    width: 80%;
+    width: 100%;
-    //background-color: #767779;
+    background-color: rgba(255, 255, 255, 0.38);
+    backdrop-filter: blur(20px);
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: center;
+    transition: background-color 0.3s;
+    z-index: 3;
 
     .landing-header-logo {
         display: inline-block;
@@ -14,6 +17,7 @@
         padding: 1rem;
     }
 
+    // 黑暗切换按钮
     .toggle-box-label-left:empty {
         margin-left: -10px;
     }
@@ -115,4 +119,28 @@
         color: rgba(250, 250, 250, 0.51);
         font-weight: bold;
     }
+
+
+    ::view-transition-old(root),
+    ::view-transition-new(root) {
+        animation: none;
+        mix-blend-mode: normal;
+    }
+
+    ::view-transition-old(root) {
+        z-index: 1;
+    }
+
+    ::view-transition-new(root) {
+        z-index: 2147483646;
+    }
+
+    [data-bs-theme="dark"]::view-transition-old(root) {
+        z-index: 2147483646;
+    }
+
+    [data-bs-theme="dark"]::view-transition-new(root) {
+        z-index: 1;
+    }
+
 }

src/layout/Landing/index.scss

@@ -0,0 +1,125 @@
+.area {
+    background: #b9f187;
+    background: -webkit-linear-gradient(to left, #b9f187, #90d952, #70c13a, #52a82e) !important;
+    width: 100%;
+    height: 100vh;
+    z-index: -1;
+    overflow: hidden;
+    position: fixed;
+    top: 0;
+    left: 0;
+}
+
+.circles {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.circles li {
+    position: absolute;
+    display: block;
+    list-style: none;
+    width: 20px;
+    height: 20px;
+    background: rgba(255, 255, 255, 0.5);
+    animation: animate 25s linear infinite;
+    bottom: -150px;
+
+}
+
+.circles li:nth-child(1) {
+    left: 25%;
+    width: 80px;
+    height: 80px;
+    animation-delay: 0s;
+}
+
+
+.circles li:nth-child(2) {
+    left: 10%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 2s;
+    animation-duration: 12s;
+}
+
+.circles li:nth-child(3) {
+    left: 70%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 4s;
+}
+
+.circles li:nth-child(4) {
+    left: 40%;
+    width: 60px;
+    height: 60px;
+    animation-delay: 0s;
+    animation-duration: 18s;
+}
+
+.circles li:nth-child(5) {
+    left: 65%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 0s;
+}
+
+.circles li:nth-child(6) {
+    left: 75%;
+    width: 110px;
+    height: 110px;
+    animation-delay: 3s;
+}
+
+.circles li:nth-child(7) {
+    left: 35%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 7s;
+}
+
+.circles li:nth-child(8) {
+    left: 50%;
+    width: 25px;
+    height: 25px;
+    animation-delay: 15s;
+    animation-duration: 45s;
+}
+
+.circles li:nth-child(9) {
+    left: 20%;
+    width: 15px;
+    height: 15px;
+    animation-delay: 2s;
+    animation-duration: 35s;
+}
+
+.circles li:nth-child(10) {
+    left: 85%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 0s;
+    animation-duration: 11s;
+}
+
+
+@keyframes animate {
+
+    0% {
+        transform: translateY(0) rotate(0deg);
+        opacity: 1;
+        border-radius: 0;
+    }
+
+    100% {
+        transform: translateY(-1000px) rotate(720deg);
+        opacity: 0;
+        border-radius: 50%;
+    }
+
+}

src/layout/Landing/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <AFlex :vertical="true" align="center" justify-content="center">
+  <AFlex :vertical="true" align="center" justify-content="center" v-cloak>
-    <Header/>
+    <Header style="position: fixed;"/>
-    <Content/>
+    <Content style="margin-top: 100px;z-index: 2;"/>
     <Footer/>
     <div class="area">
       <ul class="circles">
@@ -24,131 +24,6 @@ import Header from "@/layout/Landing/Header/Header.vue";
 import Footer from "@/layout/Landing/Footer/Footer.vue";
 import Content from "@/layout/Landing/Content/Content.vue";
 </script>
-<style scoped lang="scss">
+<style src="./index.scss" scoped lang="scss">
-.area {
-  background: #b9f187;
-  background: -webkit-linear-gradient(to left, #b9f187, #90d952,#70c13a,#52a82e);
-  width: 100%;
-  height: 100vh;
-  z-index: -1;
-  overflow: hidden;
-  position: fixed;
-  top: 0;
-  left: 0;
 
-}
-
-.circles {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.circles li {
-  position: absolute;
-  display: block;
-  list-style: none;
-  width: 20px;
-  height: 20px;
-  background: rgba(255, 255, 255, 0.5);
-  animation: animate 25s linear infinite;
-  bottom: -150px;
-
-}
-
-.circles li:nth-child(1) {
-  left: 25%;
-  width: 80px;
-  height: 80px;
-  animation-delay: 0s;
-}
-
-
-.circles li:nth-child(2) {
-  left: 10%;
-  width: 20px;
-  height: 20px;
-  animation-delay: 2s;
-  animation-duration: 12s;
-}
-
-.circles li:nth-child(3) {
-  left: 70%;
-  width: 20px;
-  height: 20px;
-  animation-delay: 4s;
-}
-
-.circles li:nth-child(4) {
-  left: 40%;
-  width: 60px;
-  height: 60px;
-  animation-delay: 0s;
-  animation-duration: 18s;
-}
-
-.circles li:nth-child(5) {
-  left: 65%;
-  width: 20px;
-  height: 20px;
-  animation-delay: 0s;
-}
-
-.circles li:nth-child(6) {
-  left: 75%;
-  width: 110px;
-  height: 110px;
-  animation-delay: 3s;
-}
-
-.circles li:nth-child(7) {
-  left: 35%;
-  width: 150px;
-  height: 150px;
-  animation-delay: 7s;
-}
-
-.circles li:nth-child(8) {
-  left: 50%;
-  width: 25px;
-  height: 25px;
-  animation-delay: 15s;
-  animation-duration: 45s;
-}
-
-.circles li:nth-child(9) {
-  left: 20%;
-  width: 15px;
-  height: 15px;
-  animation-delay: 2s;
-  animation-duration: 35s;
-}
-
-.circles li:nth-child(10) {
-  left: 85%;
-  width: 150px;
-  height: 150px;
-  animation-delay: 0s;
-  animation-duration: 11s;
-}
-
-
-@keyframes animate {
-
-  0% {
-    transform: translateY(0) rotate(0deg);
-    opacity: 1;
-    border-radius: 0;
-  }
-
-  100% {
-    transform: translateY(-1000px) rotate(720deg);
-    opacity: 0;
-    border-radius: 50%;
-  }
-
-}
 </style>

src/locales/language/en.ts

@@ -43,6 +43,21 @@ export default {
         resetPasswordError: "reset password failed！",
 
     },
+    landing: {
+        immediately: 'Immediately',
+        english: 'English',
+        chinese: 'Chinese',
+        learnMore: 'Learn More',
+        title: 'Schisandra Cloud Album',
+        description: 'Schisandra Cloud Album is a cloud storage service that allows users to store and manage their digital assets in the cloud. It provides a simple and easy-to-use interface, and supports multiple file formats, including images, videos, documents, and audio files.',
+        userAgreement: 'user agreement',
+        privacyPolicy: 'privacy policy',
+        termsOfService: 'terms of service',
+        contactUs: 'contact us',
+        friends: 'friends',
+        helpCenter: 'help center',
+        copyright: '© 2021 Schisandra Cloud Album. All rights reserved.',
+    },
     error: {
         networkError: 'Network error, please try again later',
         400: 'request error (400)',

src/locales/language/zh.ts

@@ -42,8 +42,21 @@ export default {
         resetPasswordSuccess: "密码重置成功！",
         resetPasswordError: "密码重置失败！",
 
-
+    },
-
+    landing: {
+        immediately: '立即进入',
+        english: 'English',
+        chinese: '中文',
+        learnMore: '了解更多',
+        title: '五味子云相册',
+        description: '在这个瞬息万变的世界里，我们用镜头捕捉每一个精彩瞬间。五味子云相册，为您提供一个安全、便捷的云端空间，让您的照片随时随地触手可及。 无需担心存储空间不足，无需担心照片丢失。五味子云相册，让您的每一张照片都得到妥善保管，让美好的记忆永不褪色。',
+        userAgreement: '用户协议',
+        privacyPolicy: '隐私政策',
+        termsOfService: '服务条款',
+        contactUs: '联系我们',
+        friends: '友情链接',
+        helpCenter: '帮助中心',
+        copyright: '版权所有 © 2021 五味子云相册',
     },
     error: {
         networkError: '网络连接失败！',

src/store/modules/themeStore.ts

@@ -11,12 +11,9 @@ export const useThemeStore = defineStore(
     () => {
         const themeName = ref<string>('green'); // 主题名称
         const darkMode = ref<string>('light'); // 颜色模式
-        const darkModeComp = computed(() => {
-            document.documentElement.setAttribute('data-dark', darkMode.value);
-            return darkMode.value;
-        });
         const themeConfig = computed(() => {
             document.documentElement.setAttribute('data-theme', themeName.value);
+            document.documentElement.setAttribute('data-dark', darkMode.value);
             // 主题配置
             return {
                 token: {
@@ -35,9 +32,9 @@ export const useThemeStore = defineStore(
             themeName.value = value;
         };
         const toggleDarkMode = () => {
-            darkMode.value = darkMode.value === 'light' ? 'dark' : 'light';
+            darkMode.value = darkMode.value === "dark" ? "light" : "dark";
         };
-        return {themeName, themeConfig, darkMode, darkModeComp, setThemeName, toggleDarkMode};
+        return {themeName, themeConfig, darkMode, setThemeName, toggleDarkMode};
     },
     {
         persist: {

src/utils/alova/service.ts

@@ -22,15 +22,22 @@ const {onAuthRequired, onResponseRefreshToken} = createServerTokenAuthentication
 
         // 当token过期时触发，在此函数中触发刷新token
         handler: async () => {
-            // 刷新token
+            try {
-            const user = useStore().user;
+                // 刷新token
-            const res: any = await refreshToken(user.user?.refreshToken || '');
+                const user = useStore().user;
-            if (res.code === 0 && res.data) {
+                const res: any = await refreshToken(user.user?.refreshToken || '');
-                const {access_token, refresh_token, uid} = res.data;
+                if (res.code === 0 && res.data) {
-                user.user.accessToken = access_token;
+                    const {access_token, refresh_token, uid} = res.data;
-                user.user.refreshToken = refresh_token;
+                    user.user.accessToken = access_token;
-                user.user.uid = uid;
+                    user.user.refreshToken = refresh_token;
-            } else {
+                    user.user.uid = uid;
+                } else {
+                    message.error(i18n.global.t('error.loginExpired'));
+                    localStorage.removeItem('user');
+                    await router.push('/login');
+                }
+            } catch (error: any) {
+                console.error(error);
                 message.error(i18n.global.t('error.loginExpired'));
                 localStorage.removeItem('user');
                 await router.push('/login');

src/views/Login/LoginPage.vue

@@ -4,7 +4,13 @@
       <BoxDog/>
     </div>
     <div class="login-right">
-      <span class="login-right-title">{{ t("login.title") }}</span>
+
+      <span class="login-right-title">
+        <img src="@/assets/images/logo-schisandra.png" @click="()=>{
+          router.push('/')
+        }" style="width: 30px; height: 30px;cursor: pointer;" alt="">
+        {{ t("login.title") }}
+      </span>
       <ACard class="login-card" bordered :hoverable="false">
         <ATabs :centered="false" size="large">
           <!--    短信登录      -->
@@ -54,7 +60,8 @@
               </AFormItem>
               <AFormItem id="phone_login_auto" name="auto_login">
                 <AFlex :vertical="false" justify="space-between">
-                  <ACheckbox v-model:checked="phoneLoginForm.auto_login">{{ t("login.autoLogin") }}
+                  <ACheckbox id="phone_login_auto_checkbox" v-model:checked="phoneLoginForm.auto_login">
+                    {{ t("login.autoLogin") }}
                   </ACheckbox>
                 </AFlex>
 
@@ -101,7 +108,8 @@
               </AFormItem>
               <AFormItem id="account_login_auto" name="auto_login">
                 <AFlex :vertical="false" justify="space-between">
-                  <ACheckbox v-model:checked="accountLoginForm.auto_login">{{ t("login.autoLogin") }}
+                  <ACheckbox id="account_login_auto_checkbox" v-model:checked="accountLoginForm.auto_login">
+                    {{ t("login.autoLogin") }}
                   </ACheckbox>
                   <a @click="()=>{
                     router.push('/resetpass')
@@ -154,6 +162,21 @@
           :events="accountLoginRotateEvent"
       />
     </div>
+
+    <div class="area">
+      <ul class="circles">
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ul>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
@@ -440,6 +463,6 @@ async function sendMessageByPhone(): Promise<boolean> {
   }
 }
 </script>
-<style src="./index.scss" scoped>
+<style src="./index.scss" scoped lang="scss">
-@import "@/assets/styles/global.scss";
+
 </style>

src/views/Login/index.scss

@@ -4,17 +4,19 @@
     width: 100vw;
     height: 100vh;
     /* 加载背景图 */
-    background-image: url("@/assets/images/background.png");
+    //@include useLoginTheme;
+    //background-image: url("@/assets/images/background.png");
     /* 背景图垂直、水平均居中 */
-    background-position: center center;
+    //background-position: center center;
-    /* 背景图不平铺 */
+    ///* 背景图不平铺 */
-    background-repeat: no-repeat;
+    //background-repeat: no-repeat;
-    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
+    ///* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
-    background-attachment: fixed;
+    //background-attachment: fixed;
-    /* 让背景图基于容器大小伸缩 */
+    ///* 让背景图基于容器大小伸缩 */
-    background-size: cover;
+    //background-size: cover;
     z-index: -1;
 
+
     .login-left {
         width: 50%;
     }
@@ -102,4 +104,131 @@
         right: 0;
         background-color: rgba(0, 0, 0, 0.5);
     }
+
+
+    .area {
+        background: #b9f187;
+        background: -webkit-linear-gradient(to left, #b9f187, #90d952, #70c13a, #52a82e) !important;
+        width: 100%;
+        height: 100vh;
+        z-index: -1;
+        overflow: hidden;
+        position: fixed;
+        top: 0;
+        left: 0;
+    }
+
+    .circles {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .circles li {
+        position: absolute;
+        display: block;
+        list-style: none;
+        width: 20px;
+        height: 20px;
+        background: rgba(255, 255, 255, 0.5);
+        animation: animate 25s linear infinite;
+        bottom: -150px;
+
+    }
+
+    .circles li:nth-child(1) {
+        left: 25%;
+        width: 80px;
+        height: 80px;
+        animation-delay: 0s;
+    }
+
+
+    .circles li:nth-child(2) {
+        left: 10%;
+        width: 20px;
+        height: 20px;
+        animation-delay: 2s;
+        animation-duration: 12s;
+    }
+
+    .circles li:nth-child(3) {
+        left: 70%;
+        width: 20px;
+        height: 20px;
+        animation-delay: 4s;
+    }
+
+    .circles li:nth-child(4) {
+        left: 40%;
+        width: 60px;
+        height: 60px;
+        animation-delay: 0s;
+        animation-duration: 18s;
+    }
+
+    .circles li:nth-child(5) {
+        left: 65%;
+        width: 20px;
+        height: 20px;
+        animation-delay: 0s;
+    }
+
+    .circles li:nth-child(6) {
+        left: 75%;
+        width: 110px;
+        height: 110px;
+        animation-delay: 3s;
+    }
+
+    .circles li:nth-child(7) {
+        left: 35%;
+        width: 150px;
+        height: 150px;
+        animation-delay: 7s;
+    }
+
+    .circles li:nth-child(8) {
+        left: 50%;
+        width: 25px;
+        height: 25px;
+        animation-delay: 15s;
+        animation-duration: 45s;
+    }
+
+    .circles li:nth-child(9) {
+        left: 20%;
+        width: 15px;
+        height: 15px;
+        animation-delay: 2s;
+        animation-duration: 35s;
+    }
+
+    .circles li:nth-child(10) {
+        left: 85%;
+        width: 150px;
+        height: 150px;
+        animation-delay: 0s;
+        animation-duration: 11s;
+    }
+
+
+    @keyframes animate {
+
+        0% {
+            transform: translateY(0) rotate(0deg);
+            opacity: 1;
+            border-radius: 0;
+        }
+
+        100% {
+            transform: translateY(-1000px) rotate(720deg);
+            opacity: 0;
+            border-radius: 50%;
+        }
+
+    }
 }

src/views/QRLogin/QRLogin.vue

@@ -36,6 +36,20 @@
         </ATooltip>
       </ACard>
     </div>
+    <div class="area">
+      <ul class="circles">
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ul>
+    </div>
   </div>
 </template>
 <script setup lang="ts">

src/views/QRLogin/index.scss

@@ -5,15 +5,15 @@
     width: 100vw;
     height: 100vh;
     /* 加载背景图 */
-    background-image: url("@/assets/images/background.png");
+    //background-image: url("@/assets/images/background.png");
     /* 背景图垂直、水平均居中 */
-    background-position: center center;
+    //background-position: center center;
-    /* 背景图不平铺 */
+    ///* 背景图不平铺 */
-    background-repeat: no-repeat;
+    //background-repeat: no-repeat;
-    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
+    ///* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
-    background-attachment: fixed;
+    //background-attachment: fixed;
-    /* 让背景图基于容器大小伸缩 */
+    ///* 让背景图基于容器大小伸缩 */
-    background-size: cover;
+    //background-size: cover;
     z-index: -1;
 
     .qrlogin-left {
@@ -92,8 +92,134 @@
         }
 
         .qrlogin-form-bottom-button {
-            color: #999ba1;
+            color: #999ba1 !important;
         }
     }
 
+    .area {
+        background: #b9f187;
+        background: -webkit-linear-gradient(to left, #b9f187, #90d952, #70c13a, #52a82e) !important;
+        width: 100%;
+        height: 100vh;
+        z-index: -1;
+        overflow: hidden;
+        position: fixed;
+        top: 0;
+        left: 0;
+    }
+
+    .circles {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .circles li {
+        position: absolute;
+        display: block;
+        list-style: none;
+        width: 20px;
+        height: 20px;
+        background: rgba(255, 255, 255, 0.5);
+        animation: animate 25s linear infinite;
+        bottom: -150px;
+
+    }
+
+    .circles li:nth-child(1) {
+        left: 25%;
+        width: 80px;
+        height: 80px;
+        animation-delay: 0s;
+    }
+
+
+    .circles li:nth-child(2) {
+        left: 10%;
+        width: 20px;
+        height: 20px;
+        animation-delay: 2s;
+        animation-duration: 12s;
+    }
+
+    .circles li:nth-child(3) {
+        left: 70%;
+        width: 20px;
+        height: 20px;
+        animation-delay: 4s;
+    }
+
+    .circles li:nth-child(4) {
+        left: 40%;
+        width: 60px;
+        height: 60px;
+        animation-delay: 0s;
+        animation-duration: 18s;
+    }
+
+    .circles li:nth-child(5) {
+        left: 65%;
+        width: 20px;
+        height: 20px;
+        animation-delay: 0s;
+    }
+
+    .circles li:nth-child(6) {
+        left: 75%;
+        width: 110px;
+        height: 110px;
+        animation-delay: 3s;
+    }
+
+    .circles li:nth-child(7) {
+        left: 35%;
+        width: 150px;
+        height: 150px;
+        animation-delay: 7s;
+    }
+
+    .circles li:nth-child(8) {
+        left: 50%;
+        width: 25px;
+        height: 25px;
+        animation-delay: 15s;
+        animation-duration: 45s;
+    }
+
+    .circles li:nth-child(9) {
+        left: 20%;
+        width: 15px;
+        height: 15px;
+        animation-delay: 2s;
+        animation-duration: 35s;
+    }
+
+    .circles li:nth-child(10) {
+        left: 85%;
+        width: 150px;
+        height: 150px;
+        animation-delay: 0s;
+        animation-duration: 11s;
+    }
+
+
+    @keyframes animate {
+
+        0% {
+            transform: translateY(0) rotate(0deg);
+            opacity: 1;
+            border-radius: 0;
+        }
+
+        100% {
+            transform: translateY(-1000px) rotate(720deg);
+            opacity: 0;
+            border-radius: 50%;
+        }
+
+    }
+
 }

src/views/TestTheme.vue

@@ -13,7 +13,7 @@
       </ASelect>
       <AButtonGroup>
         <AButton type="primary">切换主题- {{ app.themeName }}</AButton>
-        <AButton @click="app.toggleDarkMode">切换模式{{ app.darkModeComp }}</AButton>
+        <AButton @click="app.toggleDarkMode">切换模式{{ app.darkMode }}</AButton>
       </AButtonGroup>
       <div class="test">test</div>
     </AConfigProvider>

vite.config.ts

@@ -39,7 +39,7 @@ export default defineConfig(({mode}: { mode: string }): object => {
             }),
             AutoImport({
                 //安装两行后你会发现在组件中不用再导入ref，reactive等
-                imports: ['vue', 'vue-router', 'pinia'],
+                imports: ['vue', 'vue-router', 'pinia', '@vueuse/core'],
                 dts: 'auto-import.d.ts',
                 //ant-design-vue
                 resolvers: [AntDesignVueResolver({

yarn.lock

@@ -500,6 +500,11 @@
     core-js "^3.15.1"
     nanopop "^2.1.0"
 
+"@types/animejs@^3.1.12":
+  version "3.1.12"
+  resolved "https://registry.npmmirror.com/@types/animejs/-/animejs-3.1.12.tgz#78fcc3df03ac07cbaef50fd37512e5031826dc42"
+  integrity sha512-fpdH+ZtlO0kqjTOqRaBdsEmvpRNOayI8k4EVkEtitL5l6wducDOXk0rgQgfZqWf/ZX9DzXrHf257S5i9xTcISQ==
+
 "@types/crypto-js@^4.2.2":
   version "4.2.2"
   resolved "https://registry.npmmirror.com/@types/crypto-js/-/crypto-js-4.2.2.tgz#771c4a768d94eb5922cc202a3009558204df0cea"
@@ -527,6 +532,11 @@
   resolved "https://registry.npmmirror.com/@types/nprogress/-/nprogress-0.2.3.tgz#b2150b054a13622fabcba12cf6f0b54c48b14287"
   integrity sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==
 
+"@types/web-bluetooth@^0.0.20":
+  version "0.0.20"
+  resolved "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz#f066abfcd1cbe66267cdbbf0de010d8a41b41597"
+  integrity sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==
+
 "@typescript-eslint/eslint-plugin@8.0.1":
   version "8.0.1"
   resolved "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.0.1.tgz#5dbd1b498fdea83a16d292322d27d293ce156f94"
@@ -765,6 +775,28 @@
   resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.4.37.tgz#4f4c08a2e73da512a77b47165cf59ffbc1b5ade8"
   integrity sha512-nIh8P2fc3DflG8+5Uw8PT/1i17ccFn0xxN/5oE9RfV5SVnd7G0XEFRwakrnNFE/jlS95fpGXDVG5zDETS26nmg==
 
+"@vueuse/core@^11.0.1":
+  version "11.0.1"
+  resolved "https://registry.npmmirror.com/@vueuse/core/-/core-11.0.1.tgz#cffaf8824a1b3b3c3cbe5d7d6de21000f43fab23"
+  integrity sha512-YTrekI18WwEyP3h168Fir94G/HNC27wvXJI21Alm0sPOwvhihfkrvHIe+5PNJq+MpgWdRcsjvE/38JaoKrgZhQ==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.20"
+    "@vueuse/metadata" "11.0.1"
+    "@vueuse/shared" "11.0.1"
+    vue-demi ">=0.14.10"
+
+"@vueuse/metadata@11.0.1":
+  version "11.0.1"
+  resolved "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-11.0.1.tgz#b78fee96948896f1663c8da1f4a94839aa7627d7"
+  integrity sha512-dTFvuHFAjLYOiSd+t9Sk7xUiuL6jbfay/eX+g+jaipXXlwKur2VCqBCZX+jfu+2vROUGcUsdn3fJR9KkpadIOg==
+
+"@vueuse/shared@11.0.1":
+  version "11.0.1"
+  resolved "https://registry.npmmirror.com/@vueuse/shared/-/shared-11.0.1.tgz#50c34d3d20a889bfa36db87fd7208be29e5448c7"
+  integrity sha512-eAPf5CQB3HR0S76HqrhjBqFYstZfiHWZq8xF9EQmobGBkrhPfErJEhr8aMNQMqd6MkENIx2pblIEfJGlHpClug==
+  dependencies:
+    vue-demi ">=0.14.10"
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.npmmirror.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
@@ -793,6 +825,11 @@ alova@^3.0.6:
     "@alova/shared" "^1.0.4"
     rate-limiter-flexible "^5.0.3"
 
+animejs@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.npmmirror.com/animejs/-/animejs-3.2.2.tgz#59be98c58834339d5847f4a70ddba74ac75b6afc"
+  integrity sha512-Ao95qWLpDPXXM+WrmwcKbl6uNlC5tjnowlaRYtuVDHHoygjtIPfDUoK9NthrlZsQSKjZXlmji2TrBUAVbiH0LQ==
+
 ansi-regex@^5.0.1:
   version "5.0.1"
   resolved "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
@@ -3328,7 +3365,7 @@ vscode-uri@^3.0.8:
   resolved "https://registry.npmmirror.com/vscode-uri/-/vscode-uri-3.0.8.tgz#1770938d3e72588659a172d0fd4642780083ff9f"
   integrity sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==
 
-vue-demi@^0.14.10:
+vue-demi@>=0.14.10, vue-demi@^0.14.10:
   version "0.14.10"
   resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz#afc78de3d6f9e11bf78c55e8510ee12814522f04"
   integrity sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==