From 579e07400e1b9a52934ed808a37c8579a41e8e74 Mon Sep 17 00:00:00 2001 From: Soybean Date: Tue, 18 Jan 2022 01:17:09 +0800 Subject: [PATCH] =?UTF-8?q?fix(projects):=20=E4=BF=AE=E5=A4=8Dvertical-mix?= =?UTF-8?q?=E5=B8=83=E5=B1=80=E3=80=81=E9=87=8D=E6=9E=84=E5=88=9D=E5=A7=8B?= =?UTF-8?q?=E5=8C=96=E7=9A=84loading?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 23 +- public/resource/loading.css | 91 ++++++ public/resource/loading.js | 44 +++ src/App.vue | 27 +- src/AppProvider.vue | 22 -- src/composables/common/index.ts | 1 - src/composables/common/theme.ts | 37 --- src/enum/common/storage.ts | 2 + src/interface/expose.ts | 3 + src/interface/index.ts | 1 + .../components/GlobalBreadcrumb.vue | 6 +- .../components/MixMenuCollapse.vue | 14 + .../components/MixMenuDetail.vue | 45 +++ .../components/MixMenuDrawer.vue | 83 ++++++ .../VerticalMixSider/components/index.ts | 5 + .../components/VerticalMixSider/index.vue | 107 +++++++ .../components/VerticalMenu.vue} | 24 +- .../VerticalSider/components/index.ts | 3 + .../components/VerticalSider/index.vue | 21 ++ .../common/GlobalSider/components/index.ts | 5 +- src/layouts/common/GlobalSider/index.vue | 16 +- src/main.ts | 13 +- src/store/modules/app/index.ts | 4 + src/store/modules/theme-old/helpers.ts | 102 ------- src/store/modules/theme-old/hooks.ts | 266 ------------------ src/store/modules/theme-old/index.ts | 229 --------------- src/store/subscribe/app.ts | 14 +- src/store/subscribe/index.ts | 2 + src/store/subscribe/theme.ts | 57 +++- src/utils/router/menu.ts | 21 ++ tsconfig.json | 6 +- windi.config.ts | 4 +- 32 files changed, 562 insertions(+), 736 deletions(-) create mode 100644 public/resource/loading.css create mode 100644 public/resource/loading.js delete mode 100644 src/AppProvider.vue delete mode 100644 src/composables/common/theme.ts create mode 100644 src/interface/expose.ts create mode 100644 src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuCollapse.vue create mode 100644 src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDetail.vue create mode 100644 src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue create mode 100644 src/layouts/common/GlobalSider/components/VerticalMixSider/components/index.ts create mode 100644 src/layouts/common/GlobalSider/components/VerticalMixSider/index.vue rename src/layouts/common/GlobalSider/components/{SiderMenu.vue => VerticalSider/components/VerticalMenu.vue} (68%) create mode 100644 src/layouts/common/GlobalSider/components/VerticalSider/components/index.ts create mode 100644 src/layouts/common/GlobalSider/components/VerticalSider/index.vue delete mode 100644 src/store/modules/theme-old/helpers.ts delete mode 100644 src/store/modules/theme-old/hooks.ts delete mode 100644 src/store/modules/theme-old/index.ts diff --git a/index.html b/index.html index 3f9903e89..531ffe5d5 100644 --- a/index.html +++ b/index.html @@ -7,20 +7,23 @@ <%= appName %> -
-
- -
-
-
-
-
-
+
+ +
+
+
+
+
+
-

<%= appTitle %>

+

<%= appTitle %>

+ +
diff --git a/public/resource/loading.css b/public/resource/loading.css new file mode 100644 index 000000000..4f2a1bdb1 --- /dev/null +++ b/public/resource/loading.css @@ -0,0 +1,91 @@ +.loading-container { + position: fixed; + left: 0; + top: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} + +.loading-svg { + width: 128px; + height: 128px; + color: var(--primary-color); +} + +.loading-spin__container { + width: 56px; + height: 56px; + margin: 36px 0; +} + +.loading-spin { + position: relative; + height: 100%; + animation: loadingSpin 1s linear infinite; +} + +.left-0 { + left: 0; +} +.right-0 { + right: 0; +} +.top-0 { + top: 0; +} +.bottom-0 { + bottom: 0; +} + +.loading-spin-item { + position: absolute; + height: 16px; + width: 16px; + background-color: var(--primary-color); + border-radius: 8px; + -webkit-animation: loadingPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + animation: loadingPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + +@keyframes loadingSpin { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes loadingPulse { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: .5; + } +} + +.loading-delay-500 { + -webkit-animation-delay: 500ms; + animation-delay: 500ms; +} +.loading-delay-1000 { + -webkit-animation-delay: 1000ms; + animation-delay: 1000ms; +} +.loading-delay-1500 { + -webkit-animation-delay: 1500ms; + animation-delay: 1500ms; +} + +.loading-title { + font-size: 28px; + font-weight: 500; + color: #646464; +} diff --git a/public/resource/loading.js b/public/resource/loading.js new file mode 100644 index 000000000..6530ba415 --- /dev/null +++ b/public/resource/loading.js @@ -0,0 +1,44 @@ +/** + * 初始化加载效果的svg格式logo + * @param { string }id - 元素id + */ +function initSvgLogo(id) { + const svgStr = ` + + + + + + +`; + const appEl = document.querySelector(id); + const div = document.createElement('div'); + div.innerHTML = svgStr; + if (appEl) { + appEl.appendChild(div); + } +} + +function addThemeColorCssVars() { + const key = '__THEME_COLOR__'; + const themeColor = '#1890ff'; + const cssVars = window.localStorage.getItem(key) || `--primary-color: ${themeColor}`; + document.documentElement.style.cssText = cssVars; +} + +initSvgLogo('#loadingLogo'); + +addThemeColorCssVars(); diff --git a/src/App.vue b/src/App.vue index 3675bcbd8..609060c32 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,19 +1,24 @@ diff --git a/src/AppProvider.vue b/src/AppProvider.vue deleted file mode 100644 index 8acec2bc2..000000000 --- a/src/AppProvider.vue +++ /dev/null @@ -1,22 +0,0 @@ - - - - diff --git a/src/composables/common/index.ts b/src/composables/common/index.ts index ad404928b..2d2a11c3c 100644 --- a/src/composables/common/index.ts +++ b/src/composables/common/index.ts @@ -1,4 +1,3 @@ export * from './system'; export * from './router'; -export * from './theme'; export * from './layout'; diff --git a/src/composables/common/theme.ts b/src/composables/common/theme.ts deleted file mode 100644 index ef23e6460..000000000 --- a/src/composables/common/theme.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { watch, onUnmounted } from 'vue'; -import { useOsTheme } from 'naive-ui'; -import { useElementSize } from '@vueuse/core'; -import { useThemeStore } from '@/store'; - -export function useTheme() { - const osTheme = useOsTheme(); - const theme = useThemeStore(); - const { width } = useElementSize(document.documentElement); - - /** 监听操作系统主题模式 */ - const stopHandle = watch( - osTheme, - newValue => { - const isDark = newValue === 'dark'; - theme.setDarkMode(isDark); - }, - { immediate: true } - ); - - /** - * 禁用横向滚动 - * @description 页面切换时,过渡动画会产生水平方向的滚动条, 小于最小宽度时，不禁止 - */ - const anotherStopHandle = watch(width, newValue => { - if (newValue < theme.layout.minWidth) { - document.documentElement.style.overflowX = 'auto'; - } else { - document.documentElement.style.overflowX = 'hidden'; - } - }); - - onUnmounted(() => { - stopHandle(); - anotherStopHandle(); - }); -} diff --git a/src/enum/common/storage.ts b/src/enum/common/storage.ts index 05c1be833..8e5bfb28b 100644 --- a/src/enum/common/storage.ts +++ b/src/enum/common/storage.ts @@ -1,4 +1,6 @@ export enum EnumStorageKey { + /** 主题颜色 */ + 'theme-color' = '__THEME_COLOR__', /** 用户token */ 'token' = '__TOKEN__', /** 用户刷新token */ diff --git a/src/interface/expose.ts b/src/interface/expose.ts new file mode 100644 index 000000000..0dcabf0ef --- /dev/null +++ b/src/interface/expose.ts @@ -0,0 +1,3 @@ +export interface ExposeLayoutMixMenu { + resetFirstDegreeMenus(): void; +} diff --git a/src/interface/index.ts b/src/interface/index.ts index f947ba8ac..c1c16a68c 100644 --- a/src/interface/index.ts +++ b/src/interface/index.ts @@ -1,4 +1,5 @@ export * from './enum'; export * from './theme'; export * from './system'; +export * from './expose'; export * from './layout'; diff --git a/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue b/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue index 7d45fe04a..7fca88e87 100644 --- a/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue +++ b/src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue @@ -4,7 +4,11 @@ - + {{ breadcrumb.label }} diff --git a/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuCollapse.vue b/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuCollapse.vue new file mode 100644 index 000000000..808a93526 --- /dev/null +++ b/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuCollapse.vue @@ -0,0 +1,14 @@ + + + + diff --git a/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDetail.vue b/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDetail.vue new file mode 100644 index 000000000..07961bd7e --- /dev/null +++ b/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDetail.vue @@ -0,0 +1,45 @@ + + + + diff --git a/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue b/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue new file mode 100644 index 000000000..665554e27 --- /dev/null +++ b/src/layouts/common/GlobalSider/components/VerticalMixSider/components/MixMenuDrawer.vue @@ -0,0 +1,83 @@ + + + + diff --git a/src/layouts/common/GlobalSider/components/VerticalMixSider/components/index.ts b/src/layouts/common/GlobalSider/components/VerticalMixSider/components/index.ts new file mode 100644 index 000000000..75ae054eb --- /dev/null +++ b/src/layouts/common/GlobalSider/components/VerticalMixSider/components/index.ts @@ -0,0 +1,5 @@ +import MixMenuDetail from './MixMenuDetail.vue'; +import MixMenuDrawer from './MixMenuDrawer.vue'; +import MixMenuCollapse from './MixMenuCollapse.vue'; + +export { MixMenuDetail, MixMenuDrawer, MixMenuCollapse }; diff --git a/src/layouts/common/GlobalSider/components/VerticalMixSider/index.vue b/src/layouts/common/GlobalSider/components/VerticalMixSider/index.vue new file mode 100644 index 000000000..f74b93a46 --- /dev/null +++ b/src/layouts/common/GlobalSider/components/VerticalMixSider/index.vue @@ -0,0 +1,107 @@ + + + + diff --git a/src/layouts/common/GlobalSider/components/SiderMenu.vue b/src/layouts/common/GlobalSider/components/VerticalSider/components/VerticalMenu.vue similarity index 68% rename from src/layouts/common/GlobalSider/components/SiderMenu.vue rename to src/layouts/common/GlobalSider/components/VerticalSider/components/VerticalMenu.vue index 0f203de7d..5b49943ee 100644 --- a/src/layouts/common/GlobalSider/components/SiderMenu.vue +++ b/src/layouts/common/GlobalSider/components/VerticalSider/components/VerticalMenu.vue @@ -1,11 +1,11 @@