From a87593f58a1185d6360b8e49ffe1c9fff768770e Mon Sep 17 00:00:00 2001 From: Soybean <2570172956@qq.com> Date: Wed, 1 Sep 2021 17:43:25 +0800 Subject: [PATCH] =?UTF-8?q?feat(components):=20=E6=B7=BB=E5=8A=A0=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E9=85=8D=E7=BD=AE=E6=8A=BD=E5=B1=89=EF=BC=8C=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E6=9A=97=E9=BB=91=E4=B8=BB=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 4 +- index.html | 4 +- public/favicon.ico | Bin 4286 -> 16958 bytes src/assets/img/common/logo.png | Bin 0 -> 11341 bytes src/enum/animate.ts | 9 +++ src/enum/common.ts | 2 +- src/enum/index.ts | 2 + src/enum/theme.ts | 13 ++++ src/interface/app.ts | 73 ++++++++++++++++++ .../components/HeaderItemContainer.vue | 8 ++ .../GlobalHeader/components/index.ts | 3 + .../components/GlobalHeader/index.vue | 20 +++++ .../components/GlobalLogo/index.vue | 16 ++++ .../components/GlobalMenu/index.vue | 6 ++ .../SettingDrawer/components/DarkMode.vue | 25 ++++++ .../SettingDrawer/components/ThemeStyle.vue | 0 .../SettingDrawer/components/index.ts | 3 + .../components/SettingDrawer/index.vue | 16 ++++ src/layouts/BasicLayout/components/index.ts | 6 ++ src/layouts/BasicLayout/index.vue | 66 ++++++++++++++-- src/main.ts | 17 ++-- src/plugins/dark-mode.ts | 31 ++++++++ src/plugins/index.ts | 3 +- src/settings/theme/index.ts | 34 +++++++- src/store/modules/app/index.ts | 32 ++++++-- src/views/home/index.vue | 2 +- src/views/system/index.vue | 5 +- 27 files changed, 364 insertions(+), 36 deletions(-) create mode 100644 src/assets/img/common/logo.png create mode 100644 src/enum/animate.ts create mode 100644 src/enum/theme.ts create mode 100644 src/layouts/BasicLayout/components/GlobalHeader/components/HeaderItemContainer.vue create mode 100644 src/layouts/BasicLayout/components/GlobalHeader/components/index.ts create mode 100644 src/layouts/BasicLayout/components/GlobalHeader/index.vue create mode 100644 src/layouts/BasicLayout/components/GlobalLogo/index.vue create mode 100644 src/layouts/BasicLayout/components/GlobalMenu/index.vue create mode 100644 src/layouts/BasicLayout/components/SettingDrawer/components/DarkMode.vue create mode 100644 src/layouts/BasicLayout/components/SettingDrawer/components/ThemeStyle.vue create mode 100644 src/layouts/BasicLayout/components/SettingDrawer/components/index.ts create mode 100644 src/layouts/BasicLayout/components/SettingDrawer/index.vue create mode 100644 src/layouts/BasicLayout/components/index.ts create mode 100644 src/plugins/dark-mode.ts diff --git a/.env b/.env index fa204ea2..ce6d12fc 100644 --- a/.env +++ b/.env @@ -1,5 +1,5 @@ # 变量需要以VITE开头 -VITE_APP_TITLE=web-cli -VITE_APP_TITLE_LABEL=web脚手架 +VITE_APP_TITLE=SoybeanAdmin +VITE_APP_TITLE_LABEL=Soybean后台管理系统 VITE_BASE_URL=/ diff --git a/index.html b/index.html index c7c16fc4..5a9c3245 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,10 @@ - Vite App + <%= title %> - +
diff --git a/public/favicon.ico b/public/favicon.ico index df36fcfb72584e00488330b560ebcf34a41c64c2..2b47ca6e980c026368b61d73b28cc993f659c382 100644 GIT binary patch literal 16958 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 diff --git a/src/assets/img/common/logo.png b/src/assets/img/common/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..6641c8273c22557208827ac4c1e8c60dd6314920 GIT binary patch literal 11341 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 +
+ +
+ + + + diff --git a/src/layouts/BasicLayout/components/GlobalHeader/components/index.ts b/src/layouts/BasicLayout/components/GlobalHeader/components/index.ts new file mode 100644 index 00000000..c4911d8e --- /dev/null +++ b/src/layouts/BasicLayout/components/GlobalHeader/components/index.ts @@ -0,0 +1,3 @@ +import HeaderItemContainer from './HeaderItemContainer.vue'; + +export { HeaderItemContainer }; diff --git a/src/layouts/BasicLayout/components/GlobalHeader/index.vue b/src/layouts/BasicLayout/components/GlobalHeader/index.vue new file mode 100644 index 00000000..abd51f5a --- /dev/null +++ b/src/layouts/BasicLayout/components/GlobalHeader/index.vue @@ -0,0 +1,20 @@ + + + + diff --git a/src/layouts/BasicLayout/components/GlobalLogo/index.vue b/src/layouts/BasicLayout/components/GlobalLogo/index.vue new file mode 100644 index 00000000..157b6c60 --- /dev/null +++ b/src/layouts/BasicLayout/components/GlobalLogo/index.vue @@ -0,0 +1,16 @@ + + + + diff --git a/src/layouts/BasicLayout/components/GlobalMenu/index.vue b/src/layouts/BasicLayout/components/GlobalMenu/index.vue new file mode 100644 index 00000000..c5c27b65 --- /dev/null +++ b/src/layouts/BasicLayout/components/GlobalMenu/index.vue @@ -0,0 +1,6 @@ + + + + diff --git a/src/layouts/BasicLayout/components/SettingDrawer/components/DarkMode.vue b/src/layouts/BasicLayout/components/SettingDrawer/components/DarkMode.vue new file mode 100644 index 00000000..2becea9e --- /dev/null +++ b/src/layouts/BasicLayout/components/SettingDrawer/components/DarkMode.vue @@ -0,0 +1,25 @@ + + + + diff --git a/src/layouts/BasicLayout/components/SettingDrawer/components/ThemeStyle.vue b/src/layouts/BasicLayout/components/SettingDrawer/components/ThemeStyle.vue new file mode 100644 index 00000000..e69de29b diff --git a/src/layouts/BasicLayout/components/SettingDrawer/components/index.ts b/src/layouts/BasicLayout/components/SettingDrawer/components/index.ts new file mode 100644 index 00000000..e49edc04 --- /dev/null +++ b/src/layouts/BasicLayout/components/SettingDrawer/components/index.ts @@ -0,0 +1,3 @@ +import DarkMode from './DarkMode.vue'; + +export { DarkMode }; diff --git a/src/layouts/BasicLayout/components/SettingDrawer/index.vue b/src/layouts/BasicLayout/components/SettingDrawer/index.vue new file mode 100644 index 00000000..012c3467 --- /dev/null +++ b/src/layouts/BasicLayout/components/SettingDrawer/index.vue @@ -0,0 +1,16 @@ + + + + diff --git a/src/layouts/BasicLayout/components/index.ts b/src/layouts/BasicLayout/components/index.ts new file mode 100644 index 00000000..a4180a4c --- /dev/null +++ b/src/layouts/BasicLayout/components/index.ts @@ -0,0 +1,6 @@ +import GlobalHeader from './GlobalHeader/index.vue'; +import GlobalLogo from './GlobalLogo/index.vue'; +import GlobalMenu from './GlobalMenu/index.vue'; +import SettingDrawer from './SettingDrawer/index.vue'; + +export { GlobalHeader, GlobalLogo, GlobalMenu, SettingDrawer }; diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue index b480b910..edc58f96 100644 --- a/src/layouts/BasicLayout/index.vue +++ b/src/layouts/BasicLayout/index.vue @@ -1,15 +1,67 @@ - - + + diff --git a/src/main.ts b/src/main.ts index ab02d46d..23e10a9e 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,30 +3,29 @@ import App from './App.vue'; import AppProvider from './AppProvider.vue'; import { setupStore } from './store'; import { router, setupRouter } from './router'; -import { setupSmoothScroll, setupNaive } from './plugins'; +import { setupSmoothScroll, setupWindicssDarkMode } from './plugins'; import 'virtual:windi.css'; import './styles/css/global.css'; async function setupApp() { - const naiveApp = createApp(AppProvider); + const appProvider = createApp(AppProvider); const app = createApp(App); - /** 注册naive UI组件 */ - setupNaive(app); - - /** 挂载全局状态 */ + // 挂载全局状态 setupStore(app); - // 优先挂载一下 naiveApp 解决路由守卫，Axios中可使用，LoadingBar，Dialog，Message 等之类组件 - naiveApp.mount('#naiveApp', true); + // 优先挂载一下 appProvider 解决路由守卫，Axios中可使用，LoadingBar，Dialog，Message 等之类组件 + appProvider.mount('#appProvider', true); // 挂载路由 - await setupRouter(app); + setupRouter(app); // 路由准备就绪后挂载APP实例 await router.isReady(); app.mount('#app', true); + + setupWindicssDarkMode(); } setupSmoothScroll(); diff --git a/src/plugins/dark-mode.ts b/src/plugins/dark-mode.ts new file mode 100644 index 00000000..ff35c7fd --- /dev/null +++ b/src/plugins/dark-mode.ts @@ -0,0 +1,31 @@ +import { watch } from 'vue'; +import { useAppStore } from '@/store'; + +export default function setupWindicssDarkMode() { + const app = useAppStore(); + + const DARK_CLASS = 'dark'; + function getHtmlElement() { + return document.querySelector('html')!; + } + + function addDarkClass() { + const html = getHtmlElement(); + html.classList.add(DARK_CLASS); + } + function removeDarkClass() { + const html = getHtmlElement(); + html.classList.remove(DARK_CLASS); + } + + watch( + () => app.themeSettings.darkMode, + newValue => { + if (newValue) { + addDarkClass(); + } else { + removeDarkClass(); + } + } + ); +} diff --git a/src/plugins/index.ts b/src/plugins/index.ts index e0557b2e..ba9de06c 100644 --- a/src/plugins/index.ts +++ b/src/plugins/index.ts @@ -1,4 +1,5 @@ import setupSmoothScroll from './smooth-scroll'; import setupNaive from './naive'; +import setupWindicssDarkMode from './dark-mode'; -export { setupSmoothScroll, setupNaive }; +export { setupSmoothScroll, setupNaive, setupWindicssDarkMode }; diff --git a/src/settings/theme/index.ts b/src/settings/theme/index.ts index 5523b0c2..001694ca 100644 --- a/src/settings/theme/index.ts +++ b/src/settings/theme/index.ts @@ -23,18 +23,44 @@ const themeColorList = [ ]; const themeSettings: ThemeSettings = { - /** 深色主题 */ darkMode: false, - /** 系统主题色 */ themeColor: themeColorList[0], - /** 系统内置主题色列表 */ themeColorList, - /** 其他颜色 */ otherColor: { info: '#2080f0', success: '#67C23A', warning: '#E6A23C', error: '#F56C6C' + }, + navStyle: { + mode: 'vertical', + theme: 'light' + }, + headerStyle: { + height: 64, + bgColor: '#fff', + fixed: true, + showReload: true + }, + menuStyle: { + collapsed: false, + width: 200, + collapsedWidth: 64, + fixed: true, + splitMenu: false + }, + multiTabStyle: { + visible: true, + bgColor: '#fff', + fixed: true + }, + crumbsStyle: { + visible: true, + showIcon: false + }, + pageStyle: { + animate: true, + animateType: 'zoom-fade' } }; diff --git a/src/store/modules/app/index.ts b/src/store/modules/app/index.ts index b91e7e91..cab27621 100644 --- a/src/store/modules/app/index.ts +++ b/src/store/modules/app/index.ts @@ -1,22 +1,28 @@ import { defineStore } from 'pinia'; import type { GlobalThemeOverrides } from 'naive-ui'; -import { store } from '../../index'; import { themeSettings } from '@/settings'; import type { ThemeSettings } from '@/interface'; +import { store } from '../../index'; import { getHoverAndPressedColor } from './helpers'; interface AppState { /** 主题配置 */ themeSettings: ThemeSettings; - /** 侧边栏折叠 */ - asideCollapse: boolean; + /** 主题配置抽屉 */ + settingDrawer: SettingDrawer; +} + +interface SettingDrawer { + visible: boolean; } const appStore = defineStore({ id: 'app-store', state: (): AppState => ({ themeSettings, - asideCollapse: false + settingDrawer: { + visible: false + } }), getters: { /** naive UI主题配置 */ @@ -59,11 +65,21 @@ const appStore = defineStore({ } }, actions: { - handleAsideCollapse(collapse: boolean) { - this.asideCollapse = collapse; + /** 折叠/展开菜单 */ + handleMenuCollapse(collapsed: boolean) { + this.themeSettings.menuStyle.collapsed = collapsed; }, - toggleAside() { - this.asideCollapse = !this.asideCollapse; + /** 切换折叠/展开菜单 */ + toggleMenu() { + this.themeSettings.menuStyle.collapsed = !this.themeSettings.menuStyle.collapsed; + }, + /** 打开配置抽屉 */ + openSettingDrawer() { + this.settingDrawer.visible = true; + }, + /** 关闭配置抽屉 */ + closeSettingDrawer() { + this.settingDrawer.visible = false; } } }); diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 5a5dd101..ae2718e8 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -25,7 +25,7 @@ +