diff --git a/.env.development b/.env.development index 830e89d..f8e66ec 100644 --- a/.env.development +++ b/.env.development @@ -11,7 +11,7 @@ VITE_PUBLIC_PATH = / # 可以有多个，注意多个不能换行，否则代理将会失效 #VITE_PROXY = [["/api","http://localhost:3000"],["/upload","http://localhost:3300/upload"]] #VITE_PROXY=[["/api/workflow","http://10.0.0.2:8093/workflow/"],["/api","http://10.10.2.102:9500"]] -VITE_PROXY=[["/api/system/login","http://127.0.0.1:8092","/system/login"],["/api","http://10.10.2.102:9500"]] +VITE_PROXY=[["/api","http://10.10.2.102:9500"]] #VITE_PROXY=[["/api/approve/","http://127.0.0.1:8096","/approve/"],["/api","http://10.10.2.102:9500"]] #VITE_PROXY=[["/api/system/generator/","http://127.0.0.1:8091/system/generator/"],["/api/system/file/","http://127.0.0.1:8091/system/file/"],["/api/system/oss/","http://127.0.0.1:8091/system/oss/"],["/api/sales/","http://127.0.0.1:8096","/sales/"],["/api/mdm/","http://127.0.0.1:8096","/mdm/"],["/api","http://10.10.2.102:9500"]] #VITE_PROXY=[["/api/sales/","http://127.0.0.1:8096","/sales/"],["/api/mdm/","http://127.0.0.1:8096","/mdm/"],["/api","http://10.10.2.102:9500"]] diff --git a/src/assets/style/theme/imgs/15-1.png b/src/assets/style/theme/imgs/15-1.png deleted file mode 100644 index 97c756c..0000000 Binary files a/src/assets/style/theme/imgs/15-1.png and /dev/null differ diff --git a/src/assets/style/theme/imgs/15-2.png b/src/assets/style/theme/imgs/15-2.png deleted file mode 100644 index c580ede..0000000 Binary files a/src/assets/style/theme/imgs/15-2.png and /dev/null differ diff --git a/src/assets/style/theme/imgs/24-1.png b/src/assets/style/theme/imgs/24-1.png deleted file mode 100644 index 5d15909..0000000 Binary files a/src/assets/style/theme/imgs/24-1.png and /dev/null differ diff --git a/src/assets/style/theme/imgs/24-2.png b/src/assets/style/theme/imgs/24-2.png deleted file mode 100644 index 4478c7a..0000000 Binary files a/src/assets/style/theme/imgs/24-2.png and /dev/null differ diff --git a/src/assets/style/theme/imgs/9-1.png b/src/assets/style/theme/imgs/light-left.png similarity index 100% rename from src/assets/style/theme/imgs/9-1.png rename to src/assets/style/theme/imgs/light-left.png diff --git a/src/assets/style/theme/imgs/9-2.png b/src/assets/style/theme/imgs/light-top.png similarity index 100% rename from src/assets/style/theme/imgs/9-2.png rename to src/assets/style/theme/imgs/light-top.png diff --git a/src/assets/style/theme/imgs/4-1.png b/src/assets/style/theme/imgs/theme1-left.png similarity index 100% rename from src/assets/style/theme/imgs/4-1.png rename to src/assets/style/theme/imgs/theme1-left.png diff --git a/src/assets/style/theme/imgs/4-2.png b/src/assets/style/theme/imgs/theme1-top.png similarity index 100% rename from src/assets/style/theme/imgs/4-2.png rename to src/assets/style/theme/imgs/theme1-top.png diff --git a/src/assets/style/theme/imgs/3-1.png b/src/assets/style/theme/imgs/theme2-left.png similarity index 100% rename from src/assets/style/theme/imgs/3-1.png rename to src/assets/style/theme/imgs/theme2-left.png diff --git a/src/assets/style/theme/imgs/3-2.png b/src/assets/style/theme/imgs/theme2-top.png similarity index 100% rename from src/assets/style/theme/imgs/3-2.png rename to src/assets/style/theme/imgs/theme2-top.png diff --git a/src/assets/style/theme/imgs/5-1-1.png b/src/assets/style/theme/imgs/theme3-left.png similarity index 100% rename from src/assets/style/theme/imgs/5-1-1.png rename to src/assets/style/theme/imgs/theme3-left.png diff --git a/src/assets/style/theme/imgs/5-2-2.png b/src/assets/style/theme/imgs/theme3-top.png similarity index 100% rename from src/assets/style/theme/imgs/5-2-2.png rename to src/assets/style/theme/imgs/theme3-top.png diff --git a/src/assets/style/theme/imgs/theme4-left.png b/src/assets/style/theme/imgs/theme4-left.png new file mode 100644 index 0000000..5331b84 Binary files /dev/null and b/src/assets/style/theme/imgs/theme4-left.png differ diff --git a/src/assets/style/theme/imgs/theme4-top.png b/src/assets/style/theme/imgs/theme4-top.png new file mode 100644 index 0000000..5c8031a Binary files /dev/null and b/src/assets/style/theme/imgs/theme4-top.png differ diff --git a/src/assets/style/theme/imgs/18-1.png b/src/assets/style/theme/imgs/theme5-left.png similarity index 100% rename from src/assets/style/theme/imgs/18-1.png rename to src/assets/style/theme/imgs/theme5-left.png diff --git a/src/assets/style/theme/imgs/18-2.png b/src/assets/style/theme/imgs/theme5-top.png similarity index 100% rename from src/assets/style/theme/imgs/18-2.png rename to src/assets/style/theme/imgs/theme5-top.png diff --git a/src/assets/style/theme/imgs/21-1.png b/src/assets/style/theme/imgs/theme6-left.png similarity index 100% rename from src/assets/style/theme/imgs/21-1.png rename to src/assets/style/theme/imgs/theme6-left.png diff --git a/src/assets/style/theme/imgs/21-2.png b/src/assets/style/theme/imgs/theme6-top.png similarity index 100% rename from src/assets/style/theme/imgs/21-2.png rename to src/assets/style/theme/imgs/theme6-top.png diff --git a/src/assets/style/theme/imgs/theme7-left.png b/src/assets/style/theme/imgs/theme7-left.png new file mode 100644 index 0000000..2f9b217 Binary files /dev/null and b/src/assets/style/theme/imgs/theme7-left.png differ diff --git a/src/assets/style/theme/imgs/theme7-top.png b/src/assets/style/theme/imgs/theme7-top.png new file mode 100644 index 0000000..f095f07 Binary files /dev/null and b/src/assets/style/theme/imgs/theme7-top.png differ diff --git a/src/assets/style/theme/imgs/25-1.png b/src/assets/style/theme/imgs/theme8-left.png similarity index 100% rename from src/assets/style/theme/imgs/25-1.png rename to src/assets/style/theme/imgs/theme8-left.png diff --git a/src/assets/style/theme/imgs/25-2.png b/src/assets/style/theme/imgs/theme8-top.png similarity index 100% rename from src/assets/style/theme/imgs/25-2.png rename to src/assets/style/theme/imgs/theme8-top.png diff --git a/src/assets/style/theme/lng-theme.less b/src/assets/style/theme/lng-theme.less index 761773a..8b1798a 100644 --- a/src/assets/style/theme/lng-theme.less +++ b/src/assets/style/theme/lng-theme.less @@ -1,83 +1,350 @@ +:root { + --border-color: unset; + --back-color: unset; + --text-color: unset; + --hover-back-color: unset; + --hover-text-color: unset; + --active-back-color: unset; + --active-text-color: unset; + + --menu-top-color: #fff; + --menu-top-bg-color: unset; + +} -.lng-theme-primary { +.lng-theme { + /** + * 侧边栏主题 + */ + .vben-default-layout-main{ + margin-left: 0 !important; + } + + .vben-layout-header-left { + + .vben-layout-header-trigger{ + svg { + fill: var(--text-color) !important; + } + + &.light:hover { + background-color: var(--hover-back-color) !important; + + svg { + fill: var(--hover-text-color) !important; + color: var(--hover-text-color) !important; + } + } + } + } + + /** + * 左边菜单主题 + */ .lng-menu { .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu{ background: unset !important; .vben-menu-submenu-title-active:not(.vben-menu-submenu){ - color: #fff !important; - background-color: rgba(0, 0, 0, 0.4) !important; + color: #fff !important; + background-color: rgba(0, 0, 0, 0.4) !important; } } } - .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-active::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-active::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-open::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-open::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected::after { - border-bottom: 2px solid #fff; - right: 10px; - left: 10px; - bottom: 4px; + /** + * 顶部菜单主题 + */ + .ant-menu-horizontal > .ant-menu-item::after, .ant-menu-horizontal > .ant-menu-submenu::after { + bottom: 4px; + right: 10px; + left: 10px; + } - .ant-menu-title-content{ - color: #000 !important; + .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-active::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-active::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-open::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-open::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected::after { + border-bottom: 2px solid #fff; + right: 10px; + left: 10px; + bottom: 4px; + } + + .vben-menu-dark.vben-menu-vertical .vben-menu-item:hover, .vben-menu-dark.vben-menu-vertical .vben-menu-submenu-title:hover { + background-color: var(--hover-back-color) !important; + color: var(--hover-text-color) !important; + } + + .vben-layout-breadcrumb.ant-menu .ant-menu-item { + &.ant-menu-item-selected{ + background-color: rgba(0, 0, 0, 0.4) !important; + color: var(--active-text-color) !important; + } + + + &:hover{ + background-color: var(--hover-back-color) !important; + color: var(--hover-text-color) !important; } } + + .vben-layout-header-action { + svg { + fill: var(--text-color) !important; + color: var(--text-color) !important; + } + + .vben-layout-header-action__item:hover{ + background-color: var(--hover-back-color) !important; + + svg { + fill: var(--text-color) !important; + color: var(--text-color) !important; + } + } + } + + .vben-header-user-dropdown__name{ + color: var(--text-color) !important; + } + + .vben-header-user-dropdown--light:hover{ + background-color: var(--hover-back-color) !important; + } + + .ant-menu-title-content{ + color: #fff; + } + +} + +.lng-theme-primary { .vben-layout-sideBar { background: unset !important; background-image: url('/@/assets/style/theme/imgs/primary-left.png') !important; background-size: 100% 100% !important; } - - .vben-default-layout-main{ - margin-left: 0px !important; - } - .ant-layout-header{ - background: unset !important; - background-image: url('/@/assets/style/theme/imgs/primary-top.png') !important; - background-size: 100% 100% !important; - - .vben-layout-header-left { - - .vben-layout-header-trigger{ - svg { - fill: #fff !important; - } - - &.light:hover { - background-color: unset !important; - - svg { - fill: #5e95ff !important; - } - } - } - } - - .ant-menu-title-content{ - color: #fff !important; - } - - .vben-layout-header-action { - svg { - fill: #fff !important; - color: #fff !important; - } - - .vben-layout-header-action__item:hover{ - background-color: #0960bd !important; - } - } - - .vben-header-user-dropdown__name{ - color: #fff !important; - } - - .vben-header-user-dropdown--light:hover{ - background-color: #0960bd !important; - } + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/primary-top.png') !important; + background-size: 100% 100% !important; + } + +} + + +.lng-theme-light { + + .vben-layout-sideBar { + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/light-left.png') !important; + background-size: 100% 100% !important; + } + + .ant-layout-header{ + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/light-top.png') !important; + background-size: 100% 100% !important; + } + +} + +.lng-theme-theme1 { + + .vben-layout-sideBar { + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme1-left.png') !important; + background-size: 100% 100% !important; + } + + .ant-layout-header{ + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme1-top.png') !important; + background-size: 100% 100% !important; + } + +} +/** + * 主题2 + */ +.lng-theme-theme2 { + + .vben-layout-sideBar { + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme2-left.png') !important; + background-size: 100% 100% !important; + } + + .ant-layout-header{ + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme2-top.png') !important; + background-size: 100% 100% !important; + } + +} +/** + * 主题3 + */ +.lng-theme-theme3 { + + .vben-layout-sideBar { + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme3-left.png') !important; + background-size: 100% 100% !important; + } + + .ant-layout-header{ + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme3-top.png') !important; + background-size: 100% 100% !important; + } + +} +/** + * 主题4 + */ +.lng-theme-theme4 { + + .vben-layout-sideBar { + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme4-left.png') !important; + background-size: 100% 100% !important; + } + + /** + * 左边菜单主题 + */ + .lng-menu { + .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu,.vben-menu-item{ + background: unset !important; + color: #000 !important; + + .vben-menu-submenu-title-active:not(.vben-menu-submenu){ + color: #fff !important; + background-color: rgba(0, 0, 0, 0.4) !important; + } + } + } + + .ant-menu-title-content{ + color: var(--text-color) !important; + } + + .ant-layout-header{ + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme4-top.png') !important; + background-size: 100% 100% !important; + } + +} +/** + * 主题5 + */ +.lng-theme-theme5 { + + .vben-layout-sideBar { + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme5-left.png') !important; + background-size: 100% 100% !important; + } + + .ant-layout-header{ + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme5-top.png') !important; + background-size: 100% 100% !important; + } + +} +/** + * 主题6 + */ +.lng-theme-theme6 { + + .vben-layout-sideBar { + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme6-left.png') !important; + background-size: 100% 100% !important; + } + + .ant-layout-header{ + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme6-top.png') !important; + background-size: 100% 100% !important; + } + +} +/** + * 主题7 + */ +.lng-theme-theme7 { + + /** + * 左边菜单主题 + */ + .lng-menu { + .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu,.vben-menu-item{ + background: unset !important; + color: #000 !important; + + .vben-menu-submenu-title-active:not(.vben-menu-submenu){ + color: #fff !important; + background-color: rgba(0, 0, 0, 0.4) !important; + } + } + } + + .ant-menu-title-content{ + color: var(--text-color) !important; + } + + .vben-layout-sideBar { + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme7-left.png') !important; + background-size: 100% 100% !important; + } + + .ant-layout-header{ + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme7-top.png') !important; + background-size: 100% 100% !important; + } + +} +/** + * 主题8 + */ +.lng-theme-theme8 { + + /** + * 左边菜单主题 + */ + .lng-menu { + .vben-menu-submenu,.vben-menu-submenu-title,.vben-menu,.vben-menu-item{ + background: unset !important; + color: #000 !important; + + .vben-menu-submenu-title-active:not(.vben-menu-submenu){ + color: #fff !important; + background-color: rgba(0, 0, 0, 0.4) !important; + } + } + } + + .ant-menu-title-content{ + color: var(--text-color); + } + + .vben-layout-sideBar { + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme8-left.png') !important; + background-size: 100% 100% !important; + } + + .ant-layout-header{ + background: unset !important; + background-image: url('/@/assets/style/theme/imgs/theme8-top.png') !important; + background-size: 100% 100% !important; } } diff --git a/src/layouts/default/setting/SettingDrawer.tsx b/src/layouts/default/setting/SettingDrawer.tsx index 9800512..e464bb4 100644 --- a/src/layouts/default/setting/SettingDrawer.tsx +++ b/src/layouts/default/setting/SettingDrawer.tsx @@ -1,7 +1,7 @@ import { defineComponent, computed, unref } from 'vue'; import { BasicDrawer } from '/@/components/Drawer/index'; import { Divider } from 'ant-design-vue'; -import { TypePicker, ThemeColorPicker, SettingFooter, SwitchItem, SelectItem, InputNumberItem } from './components'; +import { TypePicker, ThemeColorPicker, SettingFooter, SwitchItem, SelectItem, InputNumberItem, LngThemeSetting } from './components'; // import { AppDarkModeToggle } from '/@/components/Application'; @@ -16,6 +16,7 @@ import { useI18n } from '/@/hooks/web/useI18n'; import { baseHandler } from './handler'; + import { HandlerEnum, contentModeOptions, topMenuAlignOptions, getMenuTriggerOptions, routerTransitionOptions, menuTypeList, mixSidebarTriggerOptions } from './enum'; import { HEADER_PRESET_BG_COLOR_LIST, SIDE_BAR_BG_COLOR_LIST, APP_PRESET_COLOR_LIST } from '/@/settings/designSetting'; @@ -102,6 +103,10 @@ export default defineComponent({ return ; } + function renderLngTheme() { + return ; + } + /** * @description: */ @@ -202,11 +207,11 @@ export default defineComponent({ { /*{() => t('导航栏模式')} {renderSidebar()} */} {() => t('系统主题')} - {renderMainTheme()} + {renderLngTheme()} {/* {() => t('顶栏主题')} {renderHeaderTheme()} */} - {() => t('菜单主题')} - {renderSiderTheme()} +{/* {() => t('菜单主题')} + {renderSiderTheme()} */} {() => t('界面功能')} {renderFeatures()} {() => t('界面显示')} diff --git a/src/layouts/default/setting/components/LngThemeSetting.vue b/src/layouts/default/setting/components/LngThemeSetting.vue new file mode 100644 index 0000000..b3c7943 --- /dev/null +++ b/src/layouts/default/setting/components/LngThemeSetting.vue @@ -0,0 +1,85 @@ + + + diff --git a/src/layouts/default/setting/components/index.ts b/src/layouts/default/setting/components/index.ts index bd24888..4c4bdb5 100644 --- a/src/layouts/default/setting/components/index.ts +++ b/src/layouts/default/setting/components/index.ts @@ -6,3 +6,4 @@ export const SettingFooter = createAsyncComponent(() => import('./SettingFooter. export const SwitchItem = createAsyncComponent(() => import('./SwitchItem.vue')); export const SelectItem = createAsyncComponent(() => import('./SelectItem.vue')); export const InputNumberItem = createAsyncComponent(() => import('./InputNumberItem.vue')); +export const LngThemeSetting = createAsyncComponent(() => import('./LngThemeSetting.vue')); diff --git a/src/utils/theme.ts b/src/utils/theme.ts index 9922040..1bc1347 100644 --- a/src/utils/theme.ts +++ b/src/utils/theme.ts @@ -1,15 +1,20 @@ +import { useAppStore } from '/@/store/modules/app'; +import { changeTheme } from '/@/logics/theme'; +import { colorIsDark, lighten, darken } from '/@/utils/color'; +import { ThemeEnum } from '/@/enums/appEnum'; + /** * 主题样式 */ export interface ThemeCss { - class?: string; - backColor: string; - textColor?: string; + class: string; borderColor: string; - hoverColor: string; - hoverTextColor?: string; - activeColor: string; - activeTextColor?: string; + backColor: string; + textColor: string; + hoverBackColor: string; + hoverTextColor: string; + activeBackColor: string; + activeTextColor: string; } /** @@ -26,12 +31,20 @@ export class ThemeInfo { }; export const ThemeType = { - PRIMARY: new ThemeInfo('PRIMARY', { class: 'lng-theme-primary', backColor: '', borderColor: '', hoverColor: '', activeColor: '', textColor: '' }), - LIGHT: new ThemeInfo('LIGHT', { class: 'lng-theme-light', backColor: '', borderColor: '', hoverColor: '', activeColor: '', textColor: '' }), + PRIMARY: new ThemeInfo('PRIMARY', { class: 'lng-theme-primary', borderColor: '#0960bd', backColor: '#0960bd', textColor: '#fff', hoverBackColor: '#0960bd',hoverTextColor: '#fff', activeBackColor: '#004496', activeTextColor: '#fff' }), + LIGHT: new ThemeInfo('LIGHT', { class: 'lng-theme-light', borderColor: '#01768C', backColor: '#01768C', textColor: '#fff', hoverBackColor: '#00889D',hoverTextColor: '#fff', activeBackColor: '#005B6E', activeTextColor: '#fff' }), + THEME1: new ThemeInfo('THEME1', { class: 'lng-theme-theme1', borderColor: '#2070B5', backColor: '#2070B5', textColor: '#fff', hoverBackColor: '#10A4C0',hoverTextColor: '#fff', activeBackColor: '#059ABA', activeTextColor: '#fff' }), + THEME2: new ThemeInfo('THEME2', { class: 'lng-theme-theme2', borderColor: '#6834D2', backColor: '#6834D2', textColor: '#fff', hoverBackColor: '#0487D1',hoverTextColor: '#fff', activeBackColor: '#7330CD', activeTextColor: '#fff' }), + THEME3: new ThemeInfo('THEME3', { class: 'lng-theme-theme3', borderColor: '#2451C3', backColor: '#2451C3', textColor: '#fff', hoverBackColor: '#0498DE',hoverTextColor: '#fff', activeBackColor: '#056CC4', activeTextColor: '#fff' }), + THEME4: new ThemeInfo('THEME4', { class: 'lng-theme-theme4', borderColor: '#6bb836', backColor: '#6bb836', textColor: '#000', hoverBackColor: '#A2DE79',hoverTextColor: '#000', activeBackColor: '#A2DE79', activeTextColor: '#000' }), + THEME5: new ThemeInfo('THEME5', { class: 'lng-theme-theme5', borderColor: '#0B0023', backColor: '#0B0023', textColor: '#fff', hoverBackColor: '#7A0589',hoverTextColor: '#fff', activeBackColor: '#4A0353', activeTextColor: '#fff' }), + THEME6: new ThemeInfo('THEME6', { class: 'lng-theme-theme6', borderColor: '#02311F', backColor: '#02311F', textColor: '#fff', hoverBackColor: '#007261',hoverTextColor: '#fff', activeBackColor: '#00553D', activeTextColor: '#fff' }), + THEME7: new ThemeInfo('THEME7', { class: 'lng-theme-theme7', borderColor: '#35b3a9', backColor: '#35b3a9', textColor: '#000', hoverBackColor: '#C8FCF7',hoverTextColor: '#000', activeBackColor: '#67CBC4', activeTextColor: '#000' }), + THEME8: new ThemeInfo('THEME8', { class: 'lng-theme-theme8', borderColor: '#53779B', backColor: '#53779B', textColor: '#000', hoverBackColor: '#86A2BA',hoverTextColor: '#000', activeBackColor: '#6084A8', activeTextColor: '#000' }), } -/*--menu-top-active-color*/ - +export const ThemeList = [ThemeType.PRIMARY, ThemeType.LIGHT,ThemeType.THEME1,ThemeType.THEME2, + ThemeType.THEME3,ThemeType.THEME5,ThemeType.THEME6,ThemeType.THEME4,ThemeType.THEME7,ThemeType.THEME8]; export class AppThemeType { @@ -39,7 +52,7 @@ export class AppThemeType { app: HTMLElement | undefined | null = undefined; setTheme(theme?: ThemeInfo):boolean { - let old = this.info!=undefined?this.info.name:null; + let old = this.info!=undefined?this.info.name:undefined; if(theme==undefined){ this.info = ThemeType.PRIMARY; }else{ @@ -48,6 +61,7 @@ export class AppThemeType { } this.info = theme; } + console.log("设置主题", this.info); localStorage.setItem('themeType', this.info.name); //删除旧的class if(old && old != undefined && old != null){ @@ -55,32 +69,36 @@ export class AppThemeType { } //添加新的主题样式 this.app?.classList.add(this.info.css.class); - //顶部菜单样式 - this.setCssVar('--menu-top-bg-color', this.info.css.backColor); + + this.setCssVar('--border-color', this.info.css.borderColor); + this.setCssVar('--back-color', this.info.css.backColor); + this.setCssVar('--text-color', this.info.css.textColor); + this.setCssVar('--hover-back-color', this.info.css.hoverBackColor); + this.setCssVar('--hover-text-color', this.info.css.hoverTextColor); + this.setCssVar('--active-back-color', this.info.css.activeBackColor); + this.setCssVar('--active-text-color', this.info.css.activeTextColor); + this.setCssVar('--menu-top-color', this.info.css.textColor); - this.setCssVar('--menu-top-active-bg-color', this.info.css.activeColor); - this.setCssVar('--menu-top-active-color', this.info.css.activeTextColor); - this.setCssVar('--menu-top-hover-bg-color', this.info.css.hoverColor); - this.setCssVar('--menu-top-hover-color', this.info.css.hoverTextColor); + //this.setCssVar('--menu-top-bg-color', this.info.css.backColor); //左边菜单主题样式 - this.setCssVar('--menu-left-bg-color', this.info.css.backColor); - this.setCssVar('--menu-left-color', this.info.css.textColor); - this.setCssVar('--menu-left-active-bg-color', this.info.css.activeColor); - this.setCssVar('--menu-left-active-color', this.info.css.activeTextColor); - this.setCssVar('--menu-left-hover-bg-color', this.info.css.hoverColor); - this.setCssVar('--menu-left-hover-color', this.info.css.hoverTextColor); - - //其他主题样式 - this.setCssVar('--other-theme-bg-color', this.info.css.backColor); - this.setCssVar('--other-theme-color', this.info.css.textColor); - this.setCssVar('--other-theme-active-bg-color', this.info.css.activeColor); - this.setCssVar('--other-theme-active-color', this.info.css.activeTextColor); - this.setCssVar('--other-theme-hover-bg-color', this.info.css.hoverColor); - this.setCssVar('--other-theme-hover-color', this.info.css.hoverTextColor); + this.setCssVar('--sider-dark-bg-color', this.info.css.backColor); + this.setCssVar('--sider-dark-darken-bg-color', this.info.css.backColor); + this.setCssVar('--sider-dark-lighten-bg-color', this.info.css.backColor); + this.changeAppTheme(); return true; } + changeAppTheme() { + if (this.info != undefined) { + const appStore = useAppStore(); + const color = this.info.css.backColor; + // 同步 Ant Design 主色调 + appStore.setProjectConfig({ themeColor: color }); + changeTheme(color); + } + } + getTheme() { return this.info; } @@ -91,7 +109,9 @@ export class AppThemeType { init() { this.app = document.getElementById('app'); + this.app?.classList.add("lng-theme"); let themeType = localStorage.getItem('themeType'); + console.log("初始化主题", themeType); if (!themeType){ this.setTheme(); }else{ @@ -99,46 +119,29 @@ export class AppThemeType { } } } + + - export const AppTheme = { + instance: undefined as AppThemeType | undefined, + getInstance(): AppThemeType { + if (this.instance) { + return this.instance; + } + this.instance = new AppThemeType(); + return this.instance; + }, + getTheme(): ThemeInfo | undefined { + return this.getInstance().info; + }, + setTheme(theme: ThemeInfo) { + this.getInstance().setTheme(theme); + }, + changeAppTheme() { + this.getInstance().changeAppTheme(); + }, + init() { + this.getInstance().init(); + }, +}; - /**@type {ThemeInfo | undefined} */ - info:undefined, - app:undefined, - - setTheme:function(theme: ThemeInfo) { - let old = this.info!=undefined?this.info.name:null; - if(old && old !== theme.name){ - this.app?.classList.remove(`lng-theme-${old}`); - } - this.info = theme; - localStorage.setItem('themeType', theme.name); - let classList = this.app?.classList; - if(classList){ - for(let i=0;i