SCHISANDRA/schisandra-cloud-album-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 fix dark mode issue

Browse Source
This commit is contained in:
landaiqing
2024-08-20 23:28:46 +08:00
parent 498807ca66
commit 7683fffb34
36 changed files with 1249 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
auto-import.d.ts vendored
View File

@@ -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 {

12
components.d.ts vendored
View File

@@ -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']
}
}

3
package.json
View File

@@ -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",

BIN
src/assets/images/3dr_chihiro.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

BIN
src/assets/images/3dr_howlbg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
src/assets/images/3dr_howlcastle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
src/assets/images/3dr_mono.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
src/assets/images/3dr_monobg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/assets/images/3dr_spirited.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
src/assets/images/cloud.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
src/assets/images/clouds.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

BIN
src/assets/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 292 KiB

22
src/assets/styles/global.scss
View File

@@ -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 {
background-color: getModeVar('bgColor') !important;
color: getModeVar('infoColor') !important;
}
}
#app {
overflow-x: hidden;
@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;
}

4
src/assets/styles/scroll-bar.scss
View File

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

7
src/assets/styles/theme.scss
View File

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

3
src/components/BoxDog/index.scss
View File

@@ -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;
}

32
src/components/3DCard/Card3D.vue → src/components/Card3D/Card3D.vue
View File

@@ -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>
@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;
}
<style scoped lang="scss">
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 {

226
src/components/Clouds/Clouds.vue Normal file
View File

@@ -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>

12
src/layout/Landing/Content/Content.vue
View File

@@ -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>

34
src/layout/Landing/Footer/Footer.vue
View File

@@ -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>

67
src/layout/Landing/Footer/index.scss Normal file
View File

@@ -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;
}
}
}
}

106
src/layout/Landing/Header/Header.vue
View File

@@ -1,23 +1,45 @@
<template>
<div class="landing-header">
<AFlex :vertical="false" align-items="center" justify-content="space-between">
<div class="logo">
<img class="landing-header-logo" src="@/assets/svgs/logo-schisandra.svg" alt="logo">
</div>
</AFlex>
<AFlex :vertical="false" justify="space-between">
<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
style="display: flex; align-items: center;justify-content: space-between; width: 1200px;min-width: 1200px; max-width: 1200px;">
<AFlex :vertical="false" align-items="center" justify-content="space-between">
<div class="logo" style="display: flex; align-items: center;justify-content: center;cursor: pointer;">
<img class="landing-header-logo" src="@/assets/svgs/logo-schisandra.svg" alt="logo">
<img style="width: 200px;" src="@/assets/images/logo.png" alt="logo">
</div>
<AButton @click="router.push('/login')" type="primary" size="large" style="margin-right: 10px;">立即进入
</AButton>
</div>
</AFlex>
</AFlex>
<AFlex :vertical="false" justify="space-between">
<div style="display: flex; align-items: center;justify-content: center;">
<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>

34
src/layout/Landing/Header/index.scss
View File

@@ -1,10 +1,13 @@
.landing-header {
height: 100px;
width: 80%;
//background-color: #767779;
width: 100%;
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;
}
}

125
src/layout/Landing/index.scss Normal file
View File

@@ -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%;
}
}

133
src/layout/Landing/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<AFlex :vertical="true" align="center" justify-content="center">
<Header/>
<Content/>
<AFlex :vertical="true" align="center" justify-content="center" v-cloak>
<Header style="position: fixed;"/>
<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">
.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;
<style src="./index.scss" scoped lang="scss">
}
.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>

15
src/locales/language/en.ts
View File

@@ -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)',

17
src/locales/language/zh.ts
View File

@@ -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: '网络连接失败！',

9
src/store/modules/themeStore.ts
View File

@@ -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: {

25
src/utils/alova/service.ts
View File

@@ -22,15 +22,22 @@ const {onAuthRequired, onResponseRefreshToken} = createServerTokenAuthentication
// 当token过期时触发，在此函数中触发刷新token
handler: async () => {
// 刷新token
const user = useStore().user;
const res: any = await refreshToken(user.user?.refreshToken || '');
if (res.code === 0 && res.data) {
const {access_token, refresh_token, uid} = res.data;
user.user.accessToken = access_token;
user.user.refreshToken = refresh_token;
user.user.uid = uid;
} else {
try {
// 刷新token
const user = useStore().user;
const res: any = await refreshToken(user.user?.refreshToken || '');
if (res.code === 0 && res.data) {
const {access_token, refresh_token, uid} = res.data;
user.user.accessToken = access_token;
user.user.refreshToken = refresh_token;
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');

33
src/views/Login/LoginPage.vue
View File

@@ -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>
@import "@/assets/styles/global.scss";
<style src="./index.scss" scoped lang="scss">
</style>

145
src/views/Login/index.scss
View File

@@ -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-repeat: no-repeat;
/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
background-attachment: fixed;
/* 让背景图基于容器大小伸缩 */
background-size: cover;
//background-position: center center;
///* 背景图不平铺 */
//background-repeat: no-repeat;
///* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
//background-attachment: fixed;
///* 让背景图基于容器大小伸缩 */
//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%;
}
}
}

14
src/views/QRLogin/QRLogin.vue
View File

@@ -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">

144
src/views/QRLogin/index.scss
View File

@@ -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-repeat: no-repeat;
/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
background-attachment: fixed;
/* 让背景图基于容器大小伸缩 */
background-size: cover;
//background-position: center center;
///* 背景图不平铺 */
//background-repeat: no-repeat;
///* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
//background-attachment: fixed;
///* 让背景图基于容器大小伸缩 */
//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%;
}
}
}

2
src/views/TestTheme.vue
View File

@@ -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>

2
vite.config.ts
View File

@@ -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({

39
yarn.lock
View File

@@ -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==