chore: add several other theme-related color settings

vbenjs · Nov 9, 2023 · 2747ab7 · 2747ab7
1 parent 21a73a8
commit 2747ab7
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 19 deletions.
diff --git a/packages/constants/src/designSetting.ts b/packages/constants/src/designSetting.ts
@@ -8,7 +8,7 @@ export const APP_PRESET_COLOR_LIST: string[] = [
   '#0096c7',
   '#9c27b0',
   '#ff9800',
-];
+]
 
 // header preset color
 export const HEADER_PRESET_BG_COLOR_LIST: string[] = [
@@ -23,7 +23,7 @@ export const HEADER_PRESET_BG_COLOR_LIST: string[] = [
   '#394664',
   '#001529',
   '#383f45',
-];
+]
 
 // sider preset color
 export const SIDE_BAR_BG_COLOR_LIST: string[] = [
@@ -38,7 +38,7 @@ export const SIDE_BAR_BG_COLOR_LIST: string[] = [
   '#28333E',
   '#344058',
   '#383f45',
-];
+]
 
 export enum HandlerSettingEnum {
   CHANGE_LAYOUT,
@@ -87,3 +87,16 @@ export enum HandlerSettingEnum {
   OPEN_PAGE_LOADING,
   OPEN_ROUTE_TRANSITION,
 }
+
+export enum ThemeChangeEnum {
+  THEME_CHANGE,
+
+  THEME_PRIMARY_COLOR_CHANGE,
+  THEME_INFO_COLOR_CHANGE,
+  THEME_SUCCESS_COLOR_CHANGE,
+  THEME_WARNING_COLOR_CHANGE,
+  THEME_ERROR_COLOR_CHANGE,
+
+  THEME_HEADER_BG_COLOR_CHANGE,
+  THEME_SIDEBAR_BG_COLOR_CHANGE,
+}
diff --git a/packages/hooks/src/web/useTheme.ts b/packages/hooks/src/web/useTheme.ts
@@ -57,15 +57,26 @@ export const useAppTheme = () => {
     )
   }
 
-  //TODO remove it
-  const themeColor = computed(() => {
-    return ''
-  })
-
   const primaryColor = computed(() => {
     return getThemeConfig.value.primaryColor
   })
 
+  const infoColor = computed(() => {
+    return getThemeConfig.value.infoColor
+  })
+
+  const successColor = computed(() => {
+    return getThemeConfig.value.successColor
+  })
+
+  const warningColor = computed(() => {
+    return getThemeConfig.value.warningColor
+  })
+
+  const errorColor = computed(() => {
+    return getThemeConfig.value.errorColor
+  })
+
   const themeColors = computed(() => {
     let colors: ThemeColors = {}
     const themeConfig = getThemeConfig.value
@@ -151,8 +162,11 @@ export const useAppTheme = () => {
   return {
     isDark,
     toggleTheme,
-    themeColor,
     primaryColor,
+    infoColor,
+    successColor,
+    warningColor,
+    errorColor,
     themeColors,
     setThemeConfig,
   }

diff --git a/packages/layouts/src/components/setting/components/SettingDrawer.vue b/packages/layouts/src/components/setting/components/SettingDrawer.vue
@@ -11,6 +11,7 @@ import {
   HEADER_PRESET_BG_COLOR_LIST,
   SIDE_BAR_BG_COLOR_LIST,
   HandlerSettingEnum,
+  ThemeChangeEnum,
 } from '@vben/constants'
 import { context } from '../../../../bridge'
 import { navigationBarTypeList } from '../constant'
@@ -20,7 +21,8 @@ import { useAppTheme } from '@vben/hooks'
 const { useAppConfig } = context
 const { baseHandler } = useAppConfig()
 
-const { primaryColor } = useAppTheme()
+const { primaryColor, infoColor, successColor, warningColor, errorColor } =
+  useAppTheme()
 
 const { t } = useI18n()
 
@@ -67,27 +69,59 @@ const onVisible = (show: boolean) => {
         "
       />
       <VbenDivider title-placement="left">{{
-        t('layout.setting.sysTheme')
+        t('layout.setting.primaryColor')
       }}</VbenDivider>
       <ThemeColorPicker
         :def="primaryColor"
-        :event="HandlerSettingEnum.CHANGE_THEME_COLOR"
+        :event="ThemeChangeEnum.THEME_PRIMARY_COLOR_CHANGE"
+        :color-list="APP_PRESET_COLOR_LIST"
+      />
+      <VbenDivider title-placement="left">{{
+        t('layout.setting.infoColor')
+      }}</VbenDivider>
+      <ThemeColorPicker
+        :def="infoColor"
+        :event="ThemeChangeEnum.THEME_INFO_COLOR_CHANGE"
+        :color-list="APP_PRESET_COLOR_LIST"
+      />
+      <VbenDivider title-placement="left">{{
+        t('layout.setting.successColor')
+      }}</VbenDivider>
+      <ThemeColorPicker
+        :def="successColor"
+        :event="ThemeChangeEnum.THEME_SUCCESS_COLOR_CHANGE"
+        :color-list="APP_PRESET_COLOR_LIST"
+      />
+      <VbenDivider title-placement="left">{{
+        t('layout.setting.warningColor')
+      }}</VbenDivider>
+      <ThemeColorPicker
+        :def="warningColor"
+        :event="ThemeChangeEnum.THEME_WARNING_COLOR_CHANGE"
+        :color-list="APP_PRESET_COLOR_LIST"
+      />
+      <VbenDivider title-placement="left">{{
+        t('layout.setting.errorColor')
+      }}</VbenDivider>
+      <ThemeColorPicker
+        :def="errorColor"
+        :event="ThemeChangeEnum.THEME_ERROR_COLOR_CHANGE"
         :color-list="APP_PRESET_COLOR_LIST"
       />
       <VbenDivider title-placement="left">{{
         t('layout.setting.headerTheme')
       }}</VbenDivider>
       <ThemeColorPicker
         :def="getHeaderBgColor"
-        :event="HandlerSettingEnum.HEADER_THEME"
+        :event="ThemeChangeEnum.THEME_HEADER_BG_COLOR_CHANGE"
         :color-list="HEADER_PRESET_BG_COLOR_LIST"
       />
       <VbenDivider title-placement="left">{{
         t('layout.setting.sidebarTheme')
       }}</VbenDivider>
       <ThemeColorPicker
         :def="getMenuBgColor"
-        :event="HandlerSettingEnum.MENU_THEME"
+        :event="ThemeChangeEnum.THEME_SIDEBAR_BG_COLOR_CHANGE"
         :color-list="SIDE_BAR_BG_COLOR_LIST"
       />
       <VbenDivider title-placement="left"

diff --git a/packages/layouts/src/components/setting/components/ThemeColorPicker.vue b/packages/layouts/src/components/setting/components/ThemeColorPicker.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup name="ThemeColorPicker">
 import { PropType } from 'vue'
-import { HandlerSettingEnum } from '@vben/constants'
+import { ThemeChangeEnum } from '@vben/constants'
 import { useAppTheme } from '@vben/hooks'
+
 const { setThemeConfig } = useAppTheme()
 
 const props = defineProps({
@@ -10,7 +11,7 @@ const props = defineProps({
     default: () => [],
   },
   event: {
-    type: Number as PropType<HandlerSettingEnum>,
+    type: Number as PropType<ThemeChangeEnum>,
     required: true,
   },
   def: {
@@ -21,8 +22,21 @@ const props = defineProps({
 
 const handleClick = (color: string) => {
   switch (props.event) {
-    case HandlerSettingEnum.CHANGE_THEME_COLOR:
+    case ThemeChangeEnum.THEME_PRIMARY_COLOR_CHANGE:
       setThemeConfig({ primaryColor: color })
+      break
+    case ThemeChangeEnum.THEME_INFO_COLOR_CHANGE:
+      setThemeConfig({ infoColor: color })
+      break
+    case ThemeChangeEnum.THEME_SUCCESS_COLOR_CHANGE:
+      setThemeConfig({ successColor: color })
+      break
+    case ThemeChangeEnum.THEME_WARNING_COLOR_CHANGE:
+      setThemeConfig({ warningColor: color })
+      break
+    case ThemeChangeEnum.THEME_ERROR_COLOR_CHANGE:
+      setThemeConfig({ errorColor: color })
+      break
   }
 }
 </script>

diff --git a/packages/locale/src/lang/en/layout.ts b/packages/locale/src/lang/en/layout.ts
@@ -68,7 +68,11 @@ export default {
     splitMenu: 'Split menu',
     closeMixSidebarOnChange: 'Switch page to close menu',
 
-    sysTheme: 'System theme',
+    primaryColor: 'Primary color',
+    successColor: 'Success color',
+    warningColor: 'Warning color',
+    errorColor: 'Error color',
+    infoColor: 'Info color',
     headerTheme: 'Header theme',
     sidebarTheme: 'Menu theme',
 

diff --git a/packages/locale/src/lang/zh-CN/layout.ts b/packages/locale/src/lang/zh-CN/layout.ts
@@ -69,7 +69,11 @@ export default {
     splitMenu: '分割菜单',
     closeMixSidebarOnChange: '切换页面关闭菜单',
 
-    sysTheme: '系统主题',
+    primaryColor: '主题色',
+    successColor: '成功色',
+    warningColor: '警告色',
+    errorColor: '错误色',
+    infoColor: '信息色',
     headerTheme: '顶栏主题',
     sidebarTheme: '菜单主题',