From b5f05128abcf2403181b7cc7800d9e6593844657 Mon Sep 17 00:00:00 2001 From: Soybean <2570172956@qq.com> Date: Tue, 12 Oct 2021 16:22:07 +0800 Subject: [PATCH] =?UTF-8?q?fix(projects):=20=E5=AE=8C=E5=96=84=E4=BE=A7?= =?UTF-8?q?=E8=BE=B9=E8=8F=9C=E5=8D=95=E5=B1=95=E5=BC=80=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 38 ++++++ .../components/DefaultSider/index.vue | 28 ++++- .../components/ThemeConfig/index.vue | 27 +++++ .../SettingDrawer/components/index.ts | 3 +- src/settings/index.ts | 4 +- src/settings/theme.json | 112 ++++++++++++++++++ src/settings/theme.ts | 11 +- src/store/modules/theme/index.ts | 6 +- windi.config.ts | 2 +- 10 files changed, 219 insertions(+), 13 deletions(-) create mode 100644 src/layouts/BasicLayout/components/SettingDrawer/components/ThemeConfig/index.vue create mode 100644 src/settings/theme.json diff --git a/package.json b/package.json index 7ce2434e..7240352e 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@vueuse/core": "^6.5.3", "axios": "^0.22.0", "chroma-js": "^2.1.2", + "clipboard": "^2.0.8", "dayjs": "^1.10.7", "form-data": "^4.0.0", "naive-ui": "^2.19.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d2c544d2..4cea63b3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,6 +24,7 @@ specifiers: '@vueuse/core': ^6.5.3 axios: ^0.22.0 chroma-js: ^2.1.2 + clipboard: ^2.0.8 commitizen: ^4.2.4 cz-conventional-changelog: ^3.3.0 cz-customizable: ^6.3.0 @@ -61,6 +62,7 @@ dependencies: '@vueuse/core': registry.npmmirror.com/@vueuse/core/6.5.3_vue@3.2.20 axios: registry.npmmirror.com/axios/0.22.0 chroma-js: registry.nlark.com/chroma-js/2.1.2 + clipboard: registry.nlark.com/clipboard/2.0.8 dayjs: registry.nlark.com/dayjs/1.10.7 form-data: 4.0.0 naive-ui: registry.npmmirror.com/naive-ui/2.19.3_vue@3.2.20 @@ -1631,6 +1633,16 @@ packages: string-width: registry.npmmirror.com/string-width/4.2.2 dev: true + registry.nlark.com/clipboard/2.0.8: + resolution: {integrity: sha1-/8bBA90pZ6gwBfP2GXaqRlWkzbo=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/clipboard/download/clipboard-2.0.8.tgz?cache=0&sync_timestamp=1631691938930&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fclipboard%2Fdownload%2Fclipboard-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.nlark.com/cliui/7.0.4: resolution: {integrity: sha1-oCZe5lVHb8gHrqnfPfjfd4OAi08=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/cliui/download/cliui-7.0.4.tgz} name: cliui @@ -1963,6 +1975,12 @@ packages: version: 0.1.3 dev: true + registry.nlark.com/delegate/3.2.0: + resolution: {integrity: sha1-tmtxwxWFIuirV0T3INjKDCr1kWY=, registry: https://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-indent/6.0.0: resolution: {integrity: sha1-Cr0PVJ9p/GZZolT+lnhhhrb1KP0=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/detect-indent/download/detect-indent-6.0.0.tgz} name: detect-indent @@ -2714,6 +2732,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: https://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/graceful-fs/4.2.8: resolution: {integrity: sha1-5BK40z9eAGWTy9PO5t+fLOu+gCo=, registry: http://registry.npm.taobao.org/, tarball: https://registry.nlark.com/graceful-fs/download/graceful-fs-4.2.8.tgz} name: graceful-fs @@ -4184,6 +4210,12 @@ packages: chokidar: registry.nlark.com/chokidar/3.5.2 dev: true + registry.nlark.com/select/1.1.2: + resolution: {integrity: sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=, registry: https://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-compare/1.0.0: resolution: {integrity: sha1-De4hahyUGrN+nvsXiPavxf9VN/w=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/semver-compare/download/semver-compare-1.0.0.tgz} name: semver-compare @@ -4462,6 +4494,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: https://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/to-fast-properties/2.0.0: resolution: {integrity: sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=, registry: https://registry.npm.taobao.org/, tarball: https://registry.nlark.com/to-fast-properties/download/to-fast-properties-2.0.0.tgz} name: to-fast-properties diff --git a/src/layouts/BasicLayout/components/GlobalSider/components/DefaultSider/index.vue b/src/layouts/BasicLayout/components/GlobalSider/components/DefaultSider/index.vue index 72e4afec..5195f171 100644 --- a/src/layouts/BasicLayout/components/GlobalSider/components/DefaultSider/index.vue +++ b/src/layouts/BasicLayout/components/GlobalSider/components/DefaultSider/index.vue @@ -18,7 +18,9 @@ :collapsed-width="theme.menuStyle.collapsedWidth" :collapsed-icon-size="22" :options="menus" + :expanded-keys="expandedKeys" @update:value="handleUpdateMenu" + @update:expanded-keys="handleUpdateExpandedKeys" /> @@ -26,7 +28,7 @@ diff --git a/src/layouts/BasicLayout/components/SettingDrawer/components/ThemeConfig/index.vue b/src/layouts/BasicLayout/components/SettingDrawer/components/ThemeConfig/index.vue new file mode 100644 index 00000000..48c43bdc --- /dev/null +++ b/src/layouts/BasicLayout/components/SettingDrawer/components/ThemeConfig/index.vue @@ -0,0 +1,27 @@ + + + + diff --git a/src/layouts/BasicLayout/components/SettingDrawer/components/index.ts b/src/layouts/BasicLayout/components/SettingDrawer/components/index.ts index 10868c7a..2b7d6b3a 100644 --- a/src/layouts/BasicLayout/components/SettingDrawer/components/index.ts +++ b/src/layouts/BasicLayout/components/SettingDrawer/components/index.ts @@ -3,5 +3,6 @@ import NavMode from './NavMode/index.vue'; import SystemTheme from './SystemTheme/index.vue'; import PageFunc from './PageFunc/index.vue'; import PageView from './PageView/index.vue'; +import ThemeConfig from './ThemeConfig/index.vue'; -export { DarkMode, NavMode, SystemTheme, PageFunc, PageView }; +export { DarkMode, NavMode, SystemTheme, PageFunc, PageView, ThemeConfig }; diff --git a/src/settings/index.ts b/src/settings/index.ts index cc700b0b..48d1bd98 100644 --- a/src/settings/index.ts +++ b/src/settings/index.ts @@ -1,3 +1,3 @@ -import themeSettings from './theme'; +import { themeSettings, defaultThemeSettings } from './theme'; -export { themeSettings }; +export { themeSettings, defaultThemeSettings }; diff --git a/src/settings/theme.json b/src/settings/theme.json new file mode 100644 index 00000000..40481ab0 --- /dev/null +++ b/src/settings/theme.json @@ -0,0 +1,112 @@ +{ + "darkMode": false, + "themeColor": "#409EFF", + "themeColorList": [ + "#409EFF", + "#2d8cf0", + "#0960bd", + "#009688", + "#536dfe", + "#ff5c93", + "#ee4f12", + "#0096c7", + "#9c27b0", + "#ff9800", + "#FF3D68", + "#00C1D4", + "#71EFA3", + "#171010", + "#78DEC7", + "#1768AC", + "#FB9300", + "#FC5404" + ], + "otherColor": { + "info": "#2080f0", + "success": "#67C23A", + "warning": "#E6A23C", + "error": "#F56C6C" + }, + "navStyle": { + "mode": "vertical", + "theme": "light" + }, + "menuStyle": { + "width": 200, + "collapsedWidth": 64, + "mixWidth": 80, + "mixCollapsedWidth": 48, + "splitMenu": false, + "horizontalPosition": "flex-start", + "horizontalPositionList": [ + { + "value": "flex-start", + "label": "居左" + }, + { + "value": "center", + "label": "居中" + }, + { + "value": "flex-end", + "label": "居右" + } + ] + }, + "headerStyle": { + "height": 56, + "bgColor": "#fff" + }, + "multiTabStyle": { + "height": 44, + "visible": true, + "bgColor": "#fff", + "mode": "chrome", + "modeList": [ + { + "value": "button", + "label": "按钮风格" + }, + { + "value": "chrome", + "label": "谷歌风格" + } + ] + }, + "crumbsStyle": { + "visible": true, + "showIcon": false + }, + "pageStyle": { + "animate": true, + "animateType": "fade-slide", + "animateTypeList": [ + { + "value": "zoom-fade", + "label": "渐变" + }, + { + "value": "zoom-out", + "label": "闪现" + }, + { + "value": "fade-slide", + "label": "滑动" + }, + { + "value": "fade", + "label": "消退" + }, + { + "value": "fade-bottom", + "label": "底部消退" + }, + { + "value": "fade-scale", + "label": "缩放消退" + } + ] + }, + "fixedHeaderAndTab": true, + "showReload": true +} diff --git a/src/settings/theme.ts b/src/settings/theme.ts index 1fe0d431..db3e578f 100644 --- a/src/settings/theme.ts +++ b/src/settings/theme.ts @@ -1,5 +1,6 @@ -import type { ThemeSettings } from '../interface'; -import { EnumAnimate, EnumMultiTabMode, EnumHorizontalMenuPosition } from '../enum'; +import type { ThemeSettings } from '@/interface'; +import { EnumAnimate, EnumMultiTabMode, EnumHorizontalMenuPosition } from '@/enum'; +import customThemeSettings from './theme.json'; const themeColorList = [ '#409EFF', @@ -22,7 +23,7 @@ const themeColorList = [ '#FC5404' ]; -const themeSettings: ThemeSettings = { +const defaultThemeSettings: ThemeSettings = { darkMode: false, themeColor: themeColorList[0], themeColorList, @@ -83,4 +84,6 @@ const themeSettings: ThemeSettings = { showReload: true }; -export default themeSettings; +export const themeSettings = (customThemeSettings as ThemeSettings) || defaultThemeSettings; + +export { defaultThemeSettings }; diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts index 919500c4..d89a9013 100644 --- a/src/store/modules/theme/index.ts +++ b/src/store/modules/theme/index.ts @@ -1,6 +1,6 @@ import { defineStore } from 'pinia'; import type { GlobalThemeOverrides } from 'naive-ui'; -import { themeSettings } from '@/settings'; +import { themeSettings, defaultThemeSettings } from '@/settings'; import { store } from '@/store'; import type { ThemeSettings, NavMode, MultiTabMode, AnimateType, HorizontalMenuPosition } from '@/interface'; import { getHoverAndPressedColor } from './helpers'; @@ -57,6 +57,10 @@ const themeStore = defineStore({ } }, actions: { + /** 设置默认配置 */ + setDefaultThemeStore() { + Object.assign(this, defaultThemeSettings); + }, /** 设置暗黑模式 */ handleDarkMode(isDark: boolean) { this.darkMode = isDark; diff --git a/windi.config.ts b/windi.config.ts index 47d23677..1058c7fd 100644 --- a/windi.config.ts +++ b/windi.config.ts @@ -1,5 +1,5 @@ import { defineConfig } from 'windicss/helpers'; -import { themeSettings } from './src/settings'; +import themeSettings from './src/settings/theme.json'; const { themeColor,