From 6d132c59770e925cfc61217dcefa5b4d937604df Mon Sep 17 00:00:00 2001 From: Soybean Date: Sun, 9 Jan 2022 13:25:42 +0800 Subject: [PATCH] =?UTF-8?q?feat(projects):=20=E4=B8=BB=E9=A2=98=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E6=8A=BD=E5=B1=89:=20=E8=BF=81=E7=A7=BB=E5=85=B6?= =?UTF-8?q?=E4=BB=96=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 38 +++++++++ .../components/PageFunc/index.vue | 80 +++++++++++++++++++ .../components/PageView/index.vue | 52 ++++++++++++ .../components/SettingMenu/index.vue | 16 ++++ .../components/ThemeConfig/index.vue | 57 +++++++++++++ .../common/SettingDrawer/components/index.ts | 5 +- src/layouts/common/SettingDrawer/index.vue | 5 +- src/store/modules/auth/index.ts | 11 ++- src/store/modules/theme/index.ts | 10 ++- 10 files changed, 269 insertions(+), 6 deletions(-) create mode 100644 src/layouts/common/SettingDrawer/components/PageFunc/index.vue create mode 100644 src/layouts/common/SettingDrawer/components/PageView/index.vue create mode 100644 src/layouts/common/SettingDrawer/components/SettingMenu/index.vue create mode 100644 src/layouts/common/SettingDrawer/components/ThemeConfig/index.vue diff --git a/package.json b/package.json index 0a347e21..61713a68 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "dependencies": { "@vueuse/core": "^7.5.3", "axios": "^0.24.0", + "clipboard": "^2.0.8", "colord": "^2.9.2", "crypto-js": "^4.1.1", "dayjs": "^1.10.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 43ae3ecc..e93fd802 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -15,6 +15,7 @@ specifiers: '@vue/eslint-config-typescript': ^10.0.0 '@vueuse/core': ^7.5.3 axios: ^0.24.0 + clipboard: ^2.0.8 colord: ^2.9.2 commitizen: ^4.2.4 cross-env: ^7.0.3 @@ -57,6 +58,7 @@ specifiers: dependencies: '@vueuse/core': registry.npmmirror.com/@vueuse/core/7.5.3_vue@3.2.26 axios: registry.npmmirror.com/axios/0.24.0 + clipboard: registry.npmmirror.com/clipboard/2.0.8 colord: registry.npmmirror.com/colord/2.9.2 crypto-js: registry.npmmirror.com/crypto-js/4.1.1 dayjs: registry.npmmirror.com/dayjs/1.10.7 @@ -711,6 +713,12 @@ packages: engines: {node: '>=0.4.0'} dev: false + registry.nlark.com/delegate/3.2.0: + resolution: {integrity: sha1-tmtxwxWFIuirV0T3INjKDCr1kWY=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/delegate/download/delegate-3.2.0.tgz} + name: delegate + version: 3.2.0 + dev: false + registry.nlark.com/detect-file/1.0.0: resolution: {integrity: sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/detect-file/download/detect-file-1.0.0.tgz} name: detect-file @@ -1258,6 +1266,14 @@ packages: slash: registry.nlark.com/slash/3.0.0 dev: true + registry.nlark.com/good-listener/1.2.2: + resolution: {integrity: sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/good-listener/download/good-listener-1.2.2.tgz} + name: good-listener + version: 1.2.2 + dependencies: + delegate: registry.nlark.com/delegate/3.2.0 + dev: false + registry.nlark.com/hard-rejection/2.1.0: resolution: {integrity: sha1-HG7aXBaFxjlCdm15u0Cudzzs2IM=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/hard-rejection/download/hard-rejection-2.1.0.tgz} name: hard-rejection @@ -2471,6 +2487,12 @@ packages: version: 2.1.2 dev: true + registry.nlark.com/select/1.1.2: + resolution: {integrity: sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/select/download/select-1.1.2.tgz} + name: select + version: 1.1.2 + dev: false + registry.nlark.com/semver/5.7.1: resolution: {integrity: sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/semver/download/semver-5.7.1.tgz?cache=0&sync_timestamp=1631500167672&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsemver%2Fdownload%2Fsemver-5.7.1.tgz} name: semver @@ -2745,6 +2767,12 @@ packages: readable-stream: registry.nlark.com/readable-stream/3.6.0 dev: true + registry.nlark.com/tiny-emitter/2.1.0: + resolution: {integrity: sha1-HRpW7fxRxD6GPLtTgqcjMONVVCM=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/tiny-emitter/download/tiny-emitter-2.1.0.tgz} + name: tiny-emitter + version: 2.1.0 + dev: false + registry.nlark.com/tmp/0.0.33: resolution: {integrity: sha1-bTQzWIl2jSGyvNoKonfO07G/rfk=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/tmp/download/tmp-0.0.33.tgz} name: tmp @@ -4227,6 +4255,16 @@ packages: string-width: registry.npmmirror.com/string-width/5.0.1 dev: true + registry.npmmirror.com/clipboard/2.0.8: + resolution: {integrity: sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/clipboard/download/clipboard-2.0.8.tgz} + name: clipboard + version: 2.0.8 + dependencies: + good-listener: registry.nlark.com/good-listener/1.2.2 + select: registry.nlark.com/select/1.1.2 + tiny-emitter: registry.nlark.com/tiny-emitter/2.1.0 + dev: false + registry.npmmirror.com/color-convert/1.9.3: resolution: {integrity: sha1-u3GFBpDh8TZWfeYp0tVHHe2kweg=, registry: http://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/color-convert/download/color-convert-1.9.3.tgz} name: color-convert diff --git a/src/layouts/common/SettingDrawer/components/PageFunc/index.vue b/src/layouts/common/SettingDrawer/components/PageFunc/index.vue new file mode 100644 index 00000000..fe538148 --- /dev/null +++ b/src/layouts/common/SettingDrawer/components/PageFunc/index.vue @@ -0,0 +1,80 @@ + + + + diff --git a/src/layouts/common/SettingDrawer/components/PageView/index.vue b/src/layouts/common/SettingDrawer/components/PageView/index.vue new file mode 100644 index 00000000..41e7e811 --- /dev/null +++ b/src/layouts/common/SettingDrawer/components/PageView/index.vue @@ -0,0 +1,52 @@ + + + + diff --git a/src/layouts/common/SettingDrawer/components/SettingMenu/index.vue b/src/layouts/common/SettingDrawer/components/SettingMenu/index.vue new file mode 100644 index 00000000..f29e6610 --- /dev/null +++ b/src/layouts/common/SettingDrawer/components/SettingMenu/index.vue @@ -0,0 +1,16 @@ + + + + diff --git a/src/layouts/common/SettingDrawer/components/ThemeConfig/index.vue b/src/layouts/common/SettingDrawer/components/ThemeConfig/index.vue new file mode 100644 index 00000000..b1f18e66 --- /dev/null +++ b/src/layouts/common/SettingDrawer/components/ThemeConfig/index.vue @@ -0,0 +1,57 @@ + + + + diff --git a/src/layouts/common/SettingDrawer/components/index.ts b/src/layouts/common/SettingDrawer/components/index.ts index 45552df0..3a5e2d2c 100644 --- a/src/layouts/common/SettingDrawer/components/index.ts +++ b/src/layouts/common/SettingDrawer/components/index.ts @@ -2,5 +2,8 @@ import DrawerButton from './DrawerButton/index.vue'; import DarkMode from './DarkMode/index.vue'; import LayoutMode from './LayoutMode/index.vue'; import ThemeColorSelect from './ThemeColorSelect/index.vue'; +import PageFunc from './PageFunc/index.vue'; +import PageView from './PageView/index.vue'; +import ThemeConfig from './ThemeConfig/index.vue'; -export { DarkMode, DrawerButton, LayoutMode, ThemeColorSelect }; +export { DrawerButton, DarkMode, LayoutMode, ThemeColorSelect, PageFunc, PageView, ThemeConfig }; diff --git a/src/layouts/common/SettingDrawer/index.vue b/src/layouts/common/SettingDrawer/index.vue index dd022ab6..13f81371 100644 --- a/src/layouts/common/SettingDrawer/index.vue +++ b/src/layouts/common/SettingDrawer/index.vue @@ -4,6 +4,9 @@ + + + @@ -12,7 +15,7 @@ diff --git a/src/store/modules/auth/index.ts b/src/store/modules/auth/index.ts index 99632bb8..f19b914e 100644 --- a/src/store/modules/auth/index.ts +++ b/src/store/modules/auth/index.ts @@ -32,7 +32,6 @@ interface AuthStore { export const useAuthStore = defineStore('auth-store', () => { const { toLogin, toLoginRedirect } = useRouterPush(false); - const { loading: loginLoding, startLoading: startLoginLoading, endLoading: endLoginLoading } = useLoading(); const userInfo: Auth.UserInfo = reactive(getUserInfo()); function handleSetUserInfo(data: Auth.UserInfo) { @@ -46,12 +45,18 @@ export const useAuthStore = defineStore('auth-store', () => { const isLogin = computed(() => Boolean(token.value)); + const { loading: loginLoding, startLoading: startLoginLoading, endLoading: endLoginLoading } = useLoading(); + + function resetStore() { + handleSetUserInfo(getUserInfo()); + handleSetToken(getToken()); + } + function resetAuthStore(pushRoute: boolean = true) { - const auth = useAuthStore(); const route = unref(globalRouter.currentRoute); clearAuthStorage(); - auth.$reset(); + resetStore(); if (pushRoute && route.meta.requiresAuth) { toLogin(); diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts index 4cba7f26..0bd8b833 100644 --- a/src/store/modules/theme/index.ts +++ b/src/store/modules/theme/index.ts @@ -67,6 +67,8 @@ interface ThemeStore extends LayoutFunc, HeaderFunc, TabFunc, SiderFunc, FooterF naiveThemeOverrides: ComputedRef; /** naive-ui暗黑主题 */ naiveTheme: ComputedRef; + /** 重置状态 */ + resetThemeStore(): void; } export const useThemeStore = defineStore('theme-store', () => { @@ -148,6 +150,11 @@ export const useThemeStore = defineStore('theme-store', () => { ); const naiveTheme = computed(() => (darkMode.value ? darkTheme : undefined)); + /** 重置theme状态 */ + function resetThemeStore() { + setDarkMode(false); + } + /** 初始化css vars, 并添加至html */ function initThemeCssVars() { const updatedThemeVars = { ...naiveThemeOverrides.value.common }; @@ -214,7 +221,8 @@ export const useThemeStore = defineStore('theme-store', () => { setPageIsAnimate, setPageAnimateMode, naiveThemeOverrides, - naiveTheme + naiveTheme, + resetThemeStore }; return themeStore;