geg-gas/geg-gas-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

----修改主题功能

Browse Source
This commit is contained in:
张福财
2026-02-02 18:06:45 +08:00
parent dc9ceb7e32
commit a8fd4aa172
12 changed files with 220 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/layouts/default/footer/index.vue
View File

@ -1,13 +1,13 @@
<template>
<AFooter :class="prefixCls" v-if="getShowLayoutFooter" ref="footerRef">
<div :class="`${prefixCls}__links`">
<!-- <div :class="`${prefixCls}__links`">
<a @click="openWindow(SITE_URL)">{{ t('官网地址') }}</a>
<GithubFilled @click="openWindow(GITHUB_URL)" :class="`${prefixCls}__github`" />
<a @click="openWindow(DOC_URL)">{{ t('文档地址') }}</a>
</div>
<div>Copyright &copy;2024 ITC-FRAMEWORK</div>
<div>Copyright &copy;2024 ITC-FRAMEWORK</div> -->
</AFooter>
</template>

26
src/layouts/default/setting/SettingDrawer.tsx
View File

@ -5,7 +5,7 @@ import { TypePicker, ThemeColorPicker, SettingFooter, SwitchItem, SelectItem, In
// import { AppDarkModeToggle } from '/@/components/Application';
import { MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum';
import { MenuTypeEnum, TriggerEnum, MenuThemeEnum } from '/@/enums/menuEnum';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
@ -22,6 +22,8 @@ import { HEADER_PRESET_BG_COLOR_LIST, SIDE_BAR_BG_COLOR_LIST, APP_PRESET_COLOR_L
const { t } = useI18n();
const THEME_COLOR = Object.keys(MenuThemeEnum).map((item) => MenuThemeEnum[item].background);
export default defineComponent({
name: 'SettingDrawer',
setup(_, { attrs }) {
@ -93,7 +95,7 @@ export default defineComponent({
}
function renderSiderTheme() {
return <ThemeColorPicker colorList={SIDE_BAR_BG_COLOR_LIST} def={unref(getMenuBgColor)} event={HandlerEnum.MENU_THEME} />;
return <ThemeColorPicker colorList={THEME_COLOR} def={unref(getMenuBgColor)} event={HandlerEnum.MENU_THEME} />;
}
function renderMainTheme() {
@ -114,17 +116,17 @@ export default defineComponent({
return (
<>
<SwitchItem title={t('分割菜单')} event={HandlerEnum.MENU_SPLIT} def={unref(getSplit)} disabled={!unref(getShowMenuRef) || unref(getMenuType) !== MenuTypeEnum.MIX} />
{/* <SwitchItem title={t('分割菜单')} event={HandlerEnum.MENU_SPLIT} def={unref(getSplit)} disabled={!unref(getShowMenuRef) || unref(getMenuType) !== MenuTypeEnum.MIX} />
<SwitchItem title={t('固定展开菜单')} event={HandlerEnum.MENU_FIXED_MIX_SIDEBAR} def={unref(getMixSideFixed)} disabled={!unref(getIsMixSidebar)} />
<SwitchItem title={t('切换页面关闭菜单')} event={HandlerEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE} def={unref(getCloseMixSidebarOnChange)} disabled={!unref(getIsMixSidebar)} />
<SwitchItem title={t('切换页面关闭菜单')} event={HandlerEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE} def={unref(getCloseMixSidebarOnChange)} disabled={!unref(getIsMixSidebar)} /> */}
<SwitchItem title={t('折叠菜单')} event={HandlerEnum.MENU_COLLAPSED} def={unref(getCollapsed)} disabled={!unref(getShowMenuRef)} />
<SwitchItem title={t('侧边菜单拖拽')} event={HandlerEnum.MENU_HAS_DRAG} def={unref(getCanDrag)} disabled={!unref(getShowMenuRef)} />
<SwitchItem title={t('菜单搜索')} event={HandlerEnum.HEADER_SEARCH} def={unref(getShowSearch)} disabled={!unref(getShowHeader)} />
{/* <SwitchItem title={t('菜单搜索')} event={HandlerEnum.HEADER_SEARCH} def={unref(getShowSearch)} disabled={!unref(getShowHeader)} /> */}
<SwitchItem title={t('侧边菜单手风琴模式')} event={HandlerEnum.MENU_ACCORDION} def={unref(getAccordion)} disabled={!unref(getShowMenuRef)} />
<SwitchItem title={t('折叠菜单显示名称')} event={HandlerEnum.MENU_COLLAPSED_SHOW_TITLE} def={unref(getCollapsedShowTitle)} disabled={!unref(getShowMenuRef) || !unref(getCollapsed) || unref(getIsMixSidebar)} />
{/* <SwitchItem title={t('折叠菜单显示名称')} event={HandlerEnum.MENU_COLLAPSED_SHOW_TITLE} def={unref(getCollapsedShowTitle)} disabled={!unref(getShowMenuRef) || !unref(getCollapsed) || unref(getIsMixSidebar)} /> */}
<SwitchItem title={t('固定header')} event={HandlerEnum.HEADER_FIXED} def={unref(getHeaderFixed)} disabled={!unref(getShowHeader)} />
<SwitchItem title={t('固定Sidebar')} event={HandlerEnum.MENU_FIXED} def={unref(getMenuFixed)} disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)} />
@ -170,8 +172,8 @@ export default defineComponent({
<SwitchItem title={t('顶栏')} event={HandlerEnum.HEADER_SHOW} def={unref(getShowHeader)} />
<SwitchItem title="Logo" event={HandlerEnum.SHOW_LOGO} def={unref(getShowLogo)} disabled={unref(getIsMixSidebar)} />
<SwitchItem title={t('页脚')} event={HandlerEnum.SHOW_FOOTER} def={unref(getShowFooter)} />
<SwitchItem title={t('全屏内容')} event={HandlerEnum.FULL_CONTENT} def={unref(getFullContent)} />
{/* <SwitchItem title={t('页脚')} event={HandlerEnum.SHOW_FOOTER} def={unref(getShowFooter)} />
<SwitchItem title={t('全屏内容')} event={HandlerEnum.FULL_CONTENT} def={unref(getFullContent)} /> */}
<SwitchItem title={t('灰色模式')} event={HandlerEnum.GRAY_MODE} def={unref(getGrayMode)} />
@ -197,12 +199,12 @@ export default defineComponent({
<BasicDrawer {...attrs} title={t('项目配置')} width={330} class="setting-drawer">
{/* {unref(getShowDarkModeToggle) && <Divider>{() => t('layout.setting.darkMode')}</Divider>}
{unref(getShowDarkModeToggle) && <AppDarkModeToggle class="mx-auto" />} */}
<Divider>{() => t('导航栏模式')}</Divider>
{renderSidebar()}
{ /*<Divider>{() => t('导航栏模式')}</Divider>
{renderSidebar()} */}
<Divider>{() => t('系统主题')}</Divider>
{renderMainTheme()}
<Divider>{() => t('顶栏主题')}</Divider>
{renderHeaderTheme()}
{/* <Divider>{() => t('顶栏主题')}</Divider>
{renderHeaderTheme()} */}
<Divider>{() => t('菜单主题')}</Divider>
{renderSiderTheme()}
<Divider>{() => t('界面功能')}</Divider>

9
src/layouts/default/setting/components/ThemeColorPicker.vue
View File

@ -1,8 +1,8 @@
<template>
<div :class="prefixCls">
<template v-for="color in colorList || []" :key="color">
<template v-for="(color,$index) in colorList || []" :key="color">
<span
@click="handleClick(color)"
@click="handleClick(color,$index)"
:class="[
`${prefixCls}__item`,
{
@ -43,8 +43,9 @@
setup(props) {
const { prefixCls } = useDesign('setting-theme-picker');
function handleClick(color: string) {
props.event && baseHandler(props.event, color);
function handleClick(color: string,i:number) {
console.log(i);
props.event && baseHandler(props.event, color,i);
}
return {
prefixCls,

27
src/layouts/default/setting/handler.ts
View File

@ -1,5 +1,5 @@
import { HandlerEnum } from './enum';
import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
import { updateHeaderBgColor, updateSidebarBgColor,updateMenuTheme} from '/@/logics/theme/updateBackground';
import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
@ -8,10 +8,22 @@ import { ProjectConfig } from '/#/config';
import { changeTheme } from '/@/logics/theme';
import { updateDarkTheme } from '/@/logics/theme/dark';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { info } from 'console';
import { MenuThemeEnum,MenuThemeInfo } from '/@/enums/menuEnum';
export function baseHandler(event: HandlerEnum, value: any) {
const MENU_THEME:{[key:string]:MenuThemeInfo}= (()=>{
let keys = Object.keys(MenuThemeEnum);
let res = {};
for(let i = 0; i < keys.length; i++){
let item = MenuThemeEnum[keys[i]];
res[item.background] = item;
}
return res;
})();
export function baseHandler(event: HandlerEnum, value: any, index?: number) {
const appStore = useAppStore();
const config = handler(event, value);
const config = handler(event,value,index);
appStore.setProjectConfig(config);
if (event === HandlerEnum.CHANGE_THEME) {
updateHeaderBgColor();
@ -19,7 +31,7 @@ export function baseHandler(event: HandlerEnum, value: any) {
}
}
export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConfig> {
export function handler(event: HandlerEnum, value: any, index?: number): DeepPartial<ProjectConfig> {
const appStore = useAppStore();
const { getThemeColor, getDarkMode } = useRootSetting();
@ -80,7 +92,12 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
return { menuSetting: { collapsedShowTitle: value } };
case HandlerEnum.MENU_THEME:
updateSidebarBgColor(value);
let info = MENU_THEME[value];
// updateSidebarBgColor(value);
// updateSidebarBgColor(value);
// updateHeaderBgColor(value);
updateMenuTheme(info);
return { menuSetting: { bgColor: value } };
case HandlerEnum.MENU_SPLIT:

19
src/layouts/default/setting/index.vue
View File

@ -26,3 +26,22 @@
}
});
</script>
<style lang="less">
.ant-layout-header {
.ant-menu-item {
color: var(--menu-top-color);
background: var(--menu-top-bg-color);
&:hover {
background: var(--menu-top-hover-bg-color);
}
&.ant-menu-item-selected {
color: var(--menu-top-active-color);
background: var(--menu-top-active-bg-color);
}
}
}
</style>