From 0653fb144fe9d49f24ef4fe6e4a58de6de342b78 Mon Sep 17 00:00:00 2001 From: Soybean <2570172956@qq.com> Date: Fri, 7 Jan 2022 13:22:13 +0800 Subject: [PATCH] =?UTF-8?q?feat(projects):=20=E5=88=9B=E5=BB=BA=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=B8=83=E5=B1=80=E7=BB=84=E4=BB=B6SoybeanLa?= =?UTF-8?q?yout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.js | 5 + src/components/index.ts | 1 + src/layouts/Layout/components/BasicLayout.vue | 92 ---------- src/layouts/Layout/components/index.ts | 3 - src/layouts/Layout/index.vue | 75 +++++++- .../components/LayoutContent.vue | 41 +++++ .../SoybeanLayout/components/LayoutFooter.vue | 51 ++++++ .../SoybeanLayout/components/LayoutHeader.vue | 51 ++++++ .../SoybeanLayout/components/LayoutSider.vue | 44 +++++ .../SoybeanLayout/components/LayoutTab.vue | 53 ++++++ src/package/SoybeanLayout/components/index.ts | 7 + src/package/SoybeanLayout/hooks/index.ts | 53 ++++++ src/package/SoybeanLayout/index.vue | 173 ++++++++++++++++++ src/package/index.ts | 3 + src/store/modules/theme/helpers.ts | 58 ++++-- src/store/modules/theme/index.ts | 45 +---- src/views/dashboard/analysis/index.vue | 2 +- windi.config.ts | 1 + 18 files changed, 606 insertions(+), 152 deletions(-) delete mode 100644 src/layouts/Layout/components/BasicLayout.vue delete mode 100644 src/layouts/Layout/components/index.ts create mode 100644 src/package/SoybeanLayout/components/LayoutContent.vue create mode 100644 src/package/SoybeanLayout/components/LayoutFooter.vue create mode 100644 src/package/SoybeanLayout/components/LayoutHeader.vue create mode 100644 src/package/SoybeanLayout/components/LayoutSider.vue create mode 100644 src/package/SoybeanLayout/components/LayoutTab.vue create mode 100644 src/package/SoybeanLayout/components/index.ts create mode 100644 src/package/SoybeanLayout/hooks/index.ts create mode 100644 src/package/SoybeanLayout/index.vue create mode 100644 src/package/index.ts diff --git a/.eslintrc.js b/.eslintrc.js index 0569d3854..c3348e17c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -121,6 +121,11 @@ module.exports = { group: 'internal', position: 'before' }, + { + pattern: '@/**', + group: 'internal', + position: 'before' + }, { pattern: '@/interface', group: 'internal', diff --git a/src/components/index.ts b/src/components/index.ts index 76e372d76..10aaac665 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,4 +1,5 @@ export * from './custom'; export * from './svg'; +export * from './custom'; export * from './common'; export * from './business'; diff --git a/src/layouts/Layout/components/BasicLayout.vue b/src/layouts/Layout/components/BasicLayout.vue deleted file mode 100644 index 69456f220..000000000 --- a/src/layouts/Layout/components/BasicLayout.vue +++ /dev/null @@ -1,92 +0,0 @@ - - - - diff --git a/src/layouts/Layout/components/index.ts b/src/layouts/Layout/components/index.ts deleted file mode 100644 index 080b97e57..000000000 --- a/src/layouts/Layout/components/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import BasicLayout from './BasicLayout.vue'; - -export { BasicLayout }; diff --git a/src/layouts/Layout/index.vue b/src/layouts/Layout/index.vue index 73719a22f..afa11f4e2 100644 --- a/src/layouts/Layout/index.vue +++ b/src/layouts/Layout/index.vue @@ -1,11 +1,80 @@ diff --git a/src/package/SoybeanLayout/components/LayoutContent.vue b/src/package/SoybeanLayout/components/LayoutContent.vue new file mode 100644 index 000000000..1ef37a4c3 --- /dev/null +++ b/src/package/SoybeanLayout/components/LayoutContent.vue @@ -0,0 +1,41 @@ + + + + diff --git a/src/package/SoybeanLayout/components/LayoutFooter.vue b/src/package/SoybeanLayout/components/LayoutFooter.vue new file mode 100644 index 000000000..649db9cb0 --- /dev/null +++ b/src/package/SoybeanLayout/components/LayoutFooter.vue @@ -0,0 +1,51 @@ + + + + diff --git a/src/package/SoybeanLayout/components/LayoutHeader.vue b/src/package/SoybeanLayout/components/LayoutHeader.vue new file mode 100644 index 000000000..4a0dd1f91 --- /dev/null +++ b/src/package/SoybeanLayout/components/LayoutHeader.vue @@ -0,0 +1,51 @@ + + + + diff --git a/src/package/SoybeanLayout/components/LayoutSider.vue b/src/package/SoybeanLayout/components/LayoutSider.vue new file mode 100644 index 000000000..5a1b09c22 --- /dev/null +++ b/src/package/SoybeanLayout/components/LayoutSider.vue @@ -0,0 +1,44 @@ + + + + diff --git a/src/package/SoybeanLayout/components/LayoutTab.vue b/src/package/SoybeanLayout/components/LayoutTab.vue new file mode 100644 index 000000000..068ed344b --- /dev/null +++ b/src/package/SoybeanLayout/components/LayoutTab.vue @@ -0,0 +1,53 @@ + + + + diff --git a/src/package/SoybeanLayout/components/index.ts b/src/package/SoybeanLayout/components/index.ts new file mode 100644 index 000000000..64a271b8a --- /dev/null +++ b/src/package/SoybeanLayout/components/index.ts @@ -0,0 +1,7 @@ +import LayoutHeader from './LayoutHeader.vue'; +import LayoutTab from './LayoutTab.vue'; +import LayoutSider from './LayoutSider.vue'; +import LayoutContent from './LayoutContent.vue'; +import LayoutFooter from './LayoutFooter.vue'; + +export { LayoutSider, LayoutHeader, LayoutTab, LayoutContent, LayoutFooter }; diff --git a/src/package/SoybeanLayout/hooks/index.ts b/src/package/SoybeanLayout/hooks/index.ts new file mode 100644 index 000000000..3bf05005a --- /dev/null +++ b/src/package/SoybeanLayout/hooks/index.ts @@ -0,0 +1,53 @@ +import { ref, computed, watch, onUnmounted } from 'vue'; +import type { Ref, ComputedRef } from 'vue'; + +/** + * 使用了固定定位的布局元素添加translateX + * @param isFixed - 是否是fixed布局 + */ +export function useFixedTransformStyle(isFixed: Ref | ComputedRef) { + const scrollLeft = ref(0); + const transformStyle = computed(() => `transform: translateX(${-scrollLeft.value}px);`); + + function setScrollLeft(sLeft: number) { + scrollLeft.value = sLeft; + } + function scrollHandler() { + const sLeft = document.scrollingElement?.scrollLeft || 0; + setScrollLeft(sLeft); + } + function initScrollLeft() { + scrollHandler(); + } + + function addScrollEventListener() { + document.addEventListener('scroll', scrollHandler); + } + + function removeScrollEventListener() { + document.removeEventListener('scroll', scrollHandler); + } + + function init() { + initScrollLeft(); + addScrollEventListener(); + } + + watch( + isFixed, + newValue => { + if (newValue) { + init(); + } else { + removeScrollEventListener(); + } + }, + { immediate: true } + ); + + onUnmounted(() => { + removeScrollEventListener(); + }); + + return transformStyle; +} diff --git a/src/package/SoybeanLayout/index.vue b/src/package/SoybeanLayout/index.vue new file mode 100644 index 000000000..fd2a2608c --- /dev/null +++ b/src/package/SoybeanLayout/index.vue @@ -0,0 +1,173 @@ + + + + diff --git a/src/package/index.ts b/src/package/index.ts new file mode 100644 index 000000000..e6ef9650f --- /dev/null +++ b/src/package/index.ts @@ -0,0 +1,3 @@ +import SoybeanLayout from './SoybeanLayout/index.vue'; + +export { SoybeanLayout }; diff --git a/src/store/modules/theme/helpers.ts b/src/store/modules/theme/helpers.ts index 4369a6b21..87d7ed466 100644 --- a/src/store/modules/theme/helpers.ts +++ b/src/store/modules/theme/helpers.ts @@ -1,22 +1,20 @@ +import type { GlobalThemeOverrides } from 'naive-ui'; +import { kebabCase } from 'lodash-es'; import { getColorPalette, addColorAlpha } from '@/utils'; type ColorType = 'primary' | 'info' | 'success' | 'warning' | 'error'; - type ColorScene = '' | 'Suppl' | 'Hover' | 'Pressed' | 'Active'; - type ColorKey = `${ColorType}Color${ColorScene}`; - type ThemeColor = { [key in ColorKey]?: string; }; - interface ColorAction { scene: ColorScene; handler: (color: string) => string; } /** 获取主题颜色的各种场景对应的颜色 */ -export function getThemeColors(colors: [ColorType, string][]) { +function getThemeColors(colors: [ColorType, string][]) { const colorActions: ColorAction[] = [ { scene: '', handler: color => color }, { scene: 'Suppl', handler: color => color }, @@ -38,23 +36,51 @@ export function getThemeColors(colors: [ColorType, string][]) { return themeColor; } +/** 获取naive的主题颜色 */ +export function getNaiveThemeOverrides(colors: { [key in ColorType]: string }): GlobalThemeOverrides { + const { primary, info, success, warning, error } = colors; + const themeColors = getThemeColors([ + ['primary', primary], + ['info', info], + ['success', success], + ['warning', warning], + ['error', error] + ]); + + const colorLoading = primary; + + return { + common: { + ...themeColors + }, + LoadingBar: { + colorLoading + } + }; +} + +type ThemeVars = Exclude; +type ThemeVarsKeys = keyof ThemeVars; + +/** 添加css vars至html */ +export function addThemeCssVarsToHtml(themeVars: ThemeVars) { + const keys = Object.keys(themeVars) as ThemeVarsKeys[]; + const style: string[] = []; + keys.forEach(key => { + style.push(`--${kebabCase(key)}: ${themeVars[key]}`); + }); + const styleStr = style.join(';'); + document.documentElement.style.cssText = styleStr; +} + /** windicss 暗黑模式 */ export function handleWindicssDarkMode() { const DARK_CLASS = 'dark'; - function getHtmlElement() { - return document.querySelector('html'); - } function addDarkClass() { - const html = getHtmlElement(); - if (html) { - html.classList.add(DARK_CLASS); - } + document.documentElement.classList.add(DARK_CLASS); } function removeDarkClass() { - const html = getHtmlElement(); - if (html) { - html.classList.remove(DARK_CLASS); - } + document.documentElement.classList.remove(DARK_CLASS); } return { addDarkClass, diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts index 4e474463e..be31b11b8 100644 --- a/src/store/modules/theme/index.ts +++ b/src/store/modules/theme/index.ts @@ -3,10 +3,9 @@ import type { Ref, ComputedRef } from 'vue'; import { defineStore } from 'pinia'; import { useThemeVars, darkTheme, useOsTheme } from 'naive-ui'; import type { GlobalThemeOverrides, GlobalTheme } from 'naive-ui'; -import { kebabCase } from 'lodash-es'; import { useBoolean } from '@/hooks'; import { getColorPalette } from '@/utils'; -import { getThemeColors, handleWindicssDarkMode } from './helpers'; +import { getNaiveThemeOverrides, addThemeCssVarsToHtml, handleWindicssDarkMode } from './helpers'; interface OtherColor { /** 信息 */ @@ -38,8 +37,6 @@ interface ThemeStore { naiveTheme: ComputedRef; } -type ThemeVarsKeys = keyof Exclude; - export const useThemeStore = defineStore('theme-store', () => { const themeVars = useThemeVars(); const { bool: darkMode, setBool: setDarkMode, toggle: toggleDarkMode } = useBoolean(); @@ -53,27 +50,9 @@ export const useThemeStore = defineStore('theme-store', () => { error: '#f5222d' })); - const naiveThemeOverrides = computed(() => { - const { info, success, warning, error } = otherColor.value; - const themeColors = getThemeColors([ - ['primary', themeColor.value], - ['info', info], - ['success', success], - ['warning', warning], - ['error', error] - ]); - - const colorLoading = themeColor.value; - - return { - common: { - ...themeColors - }, - LoadingBar: { - colorLoading - } - }; - }); + const naiveThemeOverrides = computed(() => + getNaiveThemeOverrides({ primary: themeColor.value, ...otherColor.value }) + ); /** naive-ui暗黑主题 */ const naiveTheme = computed(() => (darkMode.value ? darkTheme : undefined)); @@ -81,22 +60,14 @@ export const useThemeStore = defineStore('theme-store', () => { /** 操作系统暗黑主题 */ const osTheme = useOsTheme(); - /** 添加css vars至html */ - function addThemeCssVarsToHtml() { - if (document.documentElement.style.cssText) return; - + /** 初始化css vars, 并添加至html */ + function initThemeCssVars() { const updatedThemeVars = { ...themeVars.value, ...naiveThemeOverrides.value.common }; - const keys = Object.keys(updatedThemeVars) as ThemeVarsKeys[]; - const style: string[] = []; - keys.forEach(key => { - style.push(`--${kebabCase(key)}: ${updatedThemeVars[key]}`); - }); - const styleStr = style.join(';'); - document.documentElement.style.cssText = styleStr; + addThemeCssVarsToHtml(updatedThemeVars); } function init() { - addThemeCssVarsToHtml(); + initThemeCssVars(); } init(); diff --git a/src/views/dashboard/analysis/index.vue b/src/views/dashboard/analysis/index.vue index d3c790d33..2da2dbf98 100644 --- a/src/views/dashboard/analysis/index.vue +++ b/src/views/dashboard/analysis/index.vue @@ -1,5 +1,5 @@