Browse Source

fix: 删除冗余代码

Gaokun Wang 1 month ago
parent
commit
93bbae9536

+ 1 - 8
src/App.vue

@@ -3,12 +3,5 @@
     <router-view />
   </el-config-provider>
 </template>
-<script setup lang="ts">
-import { useTheme } from '@/hooks'
-import en from 'element-plus/es/locale/lang/en'
-import zhCn from 'element-plus/es/locale/lang/zh-cn'
-
-const { initTheme } = useTheme()
-initTheme()
-</script>
+<script setup lang="ts"></script>
 <style scoped></style>

+ 0 - 16
src/assets/styles/theme/aside.ts

@@ -1,16 +0,0 @@
-import type { ThemeType } from '@/hooks/types'
-
-export const asideTheme: Record<ThemeType, { [key: string]: string }> = {
-  light: {
-    '--el-aside-logo-text-color': '#303133',
-    '--el-aside-border-color': '#e4e7ed'
-  },
-  inverted: {
-    '--el-aside-logo-text-color': '#dadada',
-    '--el-aside-border-color': '#414243'
-  },
-  dark: {
-    '--el-aside-logo-text-color': '#dadada',
-    '--el-aside-border-color': '#414243'
-  }
-}

+ 0 - 25
src/assets/styles/theme/header.ts

@@ -1,25 +0,0 @@
-import type { ThemeType } from '@/hooks/types'
-
-export const headerTheme: Record<ThemeType, { [key: string]: string }> = {
-  light: {
-    '--el-header-logo-text-color': '#303133',
-    '--el-header-bg-color': '#ffffff',
-    '--el-header-text-color': '#303133',
-    '--el-header-text-color-regular': '#606266',
-    '--el-header-border-color': '#e4e7ed'
-  },
-  inverted: {
-    '--el-header-logo-text-color': '#dadada',
-    '--el-header-bg-color': '#191a20',
-    '--el-header-text-color': '#e5eaf3',
-    '--el-header-text-color-regular': '#cfd3dc',
-    '--el-header-border-color': '#414243'
-  },
-  dark: {
-    '--el-header-logo-text-color': '#dadada',
-    '--el-header-bg-color': '#141414',
-    '--el-header-text-color': '#e5eaf3',
-    '--el-header-text-color-regular': '#cfd3dc',
-    '--el-header-border-color': '#414243'
-  }
-}

+ 0 - 31
src/assets/styles/theme/menu.ts

@@ -1,31 +0,0 @@
-import type { ThemeType } from '@/hooks/types'
-
-export const menuTheme: Record<ThemeType, { [key: string]: string }> = {
-  light: {
-    '--el-menu-bg-color': '#ffffff',
-    '--el-menu-hover-bg-color': '#cccccc',
-    '--el-menu-active-bg-color': 'var(--el-color-primary-light-9)',
-    '--el-menu-text-color': '#333333',
-    '--el-menu-active-color': 'var(--el-color-primary)',
-    '--el-menu-hover-text-color': '#333333',
-    '--el-menu-horizontal-sub-item-height': '50px'
-  },
-  inverted: {
-    '--el-menu-bg-color': '#191a20',
-    '--el-menu-hover-bg-color': '#000000',
-    '--el-menu-active-bg-color': '#000000',
-    '--el-menu-text-color': '#bdbdc0',
-    '--el-menu-active-color': '#ffffff',
-    '--el-menu-hover-text-color': '#ffffff',
-    '--el-menu-horizontal-sub-item-height': '50px'
-  },
-  dark: {
-    '--el-menu-bg-color': '#141414',
-    '--el-menu-hover-bg-color': '#000000',
-    '--el-menu-active-bg-color': '#000000',
-    '--el-menu-text-color': '#bdbdc0',
-    '--el-menu-active-color': '#ffffff',
-    '--el-menu-hover-text-color': '#ffffff',
-    '--el-menu-horizontal-sub-item-height': '50px'
-  }
-}

+ 0 - 1
src/hooks/index.ts

@@ -1 +0,0 @@
-export * from './useTheme'

+ 0 - 3
src/hooks/interface/index.ts

@@ -1,3 +0,0 @@
-export namespace Theme {
-  export type ThemeType = 'light' | 'inverted' | 'dark'
-}

+ 0 - 74
src/hooks/useTheme.ts

@@ -1,74 +0,0 @@
-import { DEFAULT_SETTING } from '@/constants'
-import { useSettingStore } from '@/stores'
-import { Theme } from './interface'
-import { getLightColor, getDarkColor } from '@/utils/color'
-import { menuTheme } from '@/assets/styles/theme/menu'
-import { asideTheme } from '@/assets/styles/theme/aside'
-import { headerTheme } from '@/assets/styles/theme/header'
-import { ElMessage } from 'element-plus'
-export const useTheme = () => {
-  const settingStore = useSettingStore()
-  const { primary, isDark, layout, asideInverted, headerInverted } = storeToRefs(settingStore)
-  // init theme
-  const initTheme = () => {
-    switchDark()
-  }
-  const switchDark = () => {
-    const html = document.documentElement as HTMLElement
-    if (unref(isDark)) html.setAttribute('class', 'dark')
-    else html.setAttribute('class', '')
-    primaryPicker(unref(primary))
-    setAsideTheme()
-    setHeaderTheme()
-  }
-  const primaryPicker = (color: string) => {
-    if (!color) {
-      color = DEFAULT_SETTING.PRIMARY
-      ElMessage({ type: 'success', message: `主题颜色已重置为 ${DEFAULT_SETTING.PRIMARY}` })
-    }
-    document.documentElement.style.setProperty('--el-color-primary', color)
-    document.documentElement.style.setProperty(
-      '--el-color-primary-dark-2',
-      unref(isDark) ? `${getLightColor(color, 0.2)}` : `${getDarkColor(color, 0.3)}`
-    )
-    for (let i = 1; i <= 9; i++) {
-      const primaryColor = unref(isDark) ? `${getDarkColor(color, i / 10)}` : `${getLightColor(color, i / 10)}`
-      document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, primaryColor)
-    }
-    settingStore.setGlobalState('primary', color)
-  }
-  // 设置菜单样式
-  const setMenuTheme = () => {
-    let type: Theme.ThemeType = 'light'
-    if (asideInverted.value) type = 'inverted'
-    if (isDark.value) type = 'dark'
-    const theme = menuTheme[type!]
-    for (const [key, value] of Object.entries(theme)) {
-      document.documentElement.style.setProperty(key, value)
-    }
-  }
-  // 设置侧边栏样式
-  const setAsideTheme = () => {
-    let type: Theme.ThemeType = 'light'
-    if (asideInverted.value) type = 'inverted'
-    if (isDark.value) type = 'dark'
-    const theme = asideTheme[type!]
-    for (const [key, value] of Object.entries(theme)) {
-      document.documentElement.style.setProperty(key, value)
-    }
-    setMenuTheme()
-  }
-
-  // 设置头部样式
-  const setHeaderTheme = () => {
-    let type: Theme.ThemeType = 'light'
-    if (headerInverted.value) type = 'inverted'
-    if (isDark.value) type = 'dark'
-    const theme = headerTheme[type!]
-    for (const [key, value] of Object.entries(theme)) {
-      document.documentElement.style.setProperty(key, value)
-    }
-    setMenuTheme()
-  }
-  return { primaryPicker, initTheme, switchDark }
-}