feat: new menu and top bar color selection color matching

2025-08-27 16:15:19 +08:00 · 2020-11-11 22:13:59 +08:00
parent bda3e5da30
commit 7692ffb95b
22 changed files with 352 additions and 136 deletions
--- a/src/layouts/default/header/LayoutHeader.tsx
+++ b/src/layouts/default/header/LayoutHeader.tsx
@@ -79,9 +79,8 @@ export default defineComponent({
    });

    const showHeaderTrigger = computed(() => {
-      const { show, trigger, hidden } = unref(getProjectConfigRef).menuSetting;
-
-      if (!show || !hidden) return false;
+      const { show, trigger, hidden, type } = unref(getProjectConfigRef).menuSetting;
+      if (type === MenuTypeEnum.TOP_MENU || !show || !hidden) return false;
      return trigger === TriggerEnum.HEADER;
    });

--- a/src/layouts/default/index.less
+++ b/src/layouts/default/index.less
@@ -41,7 +41,7 @@
    background-size: 100% 100%;

    &.ant-layout-sider-dark {
-      background: @menu-item-dark-bg-color;
+      background: @sider-dark-bg-color;
    }

    &:not(.ant-layout-sider-dark) {
--- a/src/layouts/default/index.tsx
+++ b/src/layouts/default/index.tsx
@@ -25,13 +25,9 @@ export default defineComponent({

    const { getFullContent } = useFullContent();

-    const getProjectConfigRef = computed(() => {
-      return appStore.getProjectConfig;
-    });
+    const getProjectConfigRef = computed(() => appStore.getProjectConfig);

-    const getLockMainScrollStateRef = computed(() => {
-      return appStore.getLockMainScrollState;
-    });
+    const getLockMainScrollStateRef = computed(() => appStore.getLockMainScrollState);

    const showHeaderRef = computed(() => {
      const {
@@ -47,6 +43,12 @@ export default defineComponent({
      return type !== MenuTypeEnum.SIDEBAR && unref(showHeaderRef);
    });

+    const getIsLockRef = computed(() => {
+      const { getLockInfo } = appStore;
+      const { isLock } = getLockInfo;
+      return isLock;
+    });
+
    const showSideBarRef = computed(() => {
      const {
        menuSetting: { show, mode, split },
@@ -54,6 +56,38 @@ export default defineComponent({
      return split || (show && mode !== MenuModeEnum.HORIZONTAL && !unref(getFullContent));
    });

+    const showFullHeaderRef = computed(() => {
+      return !unref(getFullContent) && unref(isShowMixHeaderRef) && unref(showHeaderRef);
+    });
+
+    const showInsetHeaderRef = computed(() => {
+      return !unref(getFullContent) && !unref(isShowMixHeaderRef) && unref(showHeaderRef);
+    });
+
+    const fixedHeaderClsRef = computed(() => {
+      const {
+        headerSetting: { fixed },
+      } = unref(getProjectConfigRef);
+      const fixedHeaderCls = fixed
+        ? 'fixed' + (unref(getLockMainScrollStateRef) ? ' lock' : '')
+        : '';
+      return fixedHeaderCls;
+    });
+
+    const showTabsRef = computed(() => {
+      const {
+        multiTabsSetting: { show },
+      } = unref(getProjectConfigRef);
+      return show && !unref(getFullContent);
+    });
+
+    const showClassSideBarRef = computed(() => {
+      const {
+        menuSetting: { split, hidden },
+      } = unref(getProjectConfigRef);
+      return split ? hidden : true;
+    });
+
    function getTarget(): any {
      const {
        headerSetting: { fixed },
@@ -62,51 +96,34 @@ export default defineComponent({
    }

    return () => {
-      const { getLockInfo } = appStore;
-      const {
-        useOpenBackTop,
-        showSettingButton,
-        multiTabsSetting: { show: showTabs },
-        headerSetting: { fixed },
-        menuSetting: { split, hidden },
-      } = unref(getProjectConfigRef);
-
-      const fixedHeaderCls = fixed
-        ? 'fixed' + (unref(getLockMainScrollStateRef) ? ' lock' : '')
-        : '';
-
-      const { isLock } = getLockInfo;
-
-      const showSideBar = split ? hidden : true;
+      const { useOpenBackTop, showSettingButton } = unref(getProjectConfigRef);
      return (
        <Layout class="default-layout relative">
          {() => (
            <>
              {/* lock page */}
-              {isLock && <LockPage />}
+              {unref(getIsLockRef) && <LockPage />}
              {/* back top */}
              {useOpenBackTop && <BackTop target={getTarget} />}
              {/* open setting drawer */}
              {showSettingButton && <SettingBtn />}

-              {!unref(getFullContent) && unref(isShowMixHeaderRef) && unref(showHeaderRef) && (
-                <LayoutHeader />
-              )}
+              {unref(showFullHeaderRef) && <LayoutHeader />}

              <Layout>
                {() => (
                  <>
-                    {unref(showSideBarRef) && <LayoutSideBar class={showSideBar ? '' : 'hidden'} />}
-                    <Layout class={[`default-layout__content`, fixedHeaderCls]}>
+                    {unref(showSideBarRef) && (
+                      <LayoutSideBar class={unref(showClassSideBarRef) ? '' : 'hidden'} />
+                    )}
+                    <Layout class={[`default-layout__content`, unref(fixedHeaderClsRef)]}>
                      {() => (
                        <>
-                          {!unref(getFullContent) &&
-                            !unref(isShowMixHeaderRef) &&
-                            unref(showHeaderRef) && <LayoutHeader />}
+                          {unref(showInsetHeaderRef) && <LayoutHeader />}

-                          {showTabs && !unref(getFullContent) && <MultipleTabs />}
+                          {unref(showTabsRef) && <MultipleTabs />}

-                          <LayoutContent class={fixedHeaderCls} />
+                          <LayoutContent class={unref(fixedHeaderClsRef)} />
                        </>
                      )}
                    </Layout>
--- a/src/layouts/default/setting/SettingDrawer.tsx
+++ b/src/layouts/default/setting/SettingDrawer.tsx
@@ -20,12 +20,12 @@ import { updateColorWeak, updateGrayMode } from '/@/setup/theme';
 import { baseHandler } from './handler';
 import {
  HandlerEnum,
-  themeOptions,
  contentModeOptions,
  topMenuAlignOptions,
  menuTriggerOptions,
  routerTransitionOptions,
 } from './const';
+import { HEADER_PRESET_BG_COLOR_LIST, SIDE_BAR_BG_COLOR_LIST } from '/@/settings/colorSetting';

 interface SwitchOptions {
  config?: DeepPartial<ProjectConfig>;
@@ -41,6 +41,11 @@ interface SelectConfig {
  handler?: Fn;
 }

+interface ThemeOptions {
+  def?: string;
+  handler?: Fn;
+}
+
 export default defineComponent({
  name: 'SettingDrawer',
  setup(_, { attrs }) {
@@ -98,8 +103,7 @@ export default defineComponent({

    function renderSidebar() {
      const {
-        headerSetting: { theme: headerTheme },
-        menuSetting: { type, theme: menuTheme, split },
+        menuSetting: { type, split },
      } = unref(getProjectConfigRef);

      const typeList = ref([
@@ -154,22 +158,22 @@ export default defineComponent({
          def: split,
          disabled: !unref(getShowMenuRef) || type !== MenuTypeEnum.MIX,
        }),
-        renderSelectItem('顶栏主题', {
-          handler: (e) => {
-            baseHandler(HandlerEnum.HEADER_THEME, e);
-          },
-          def: headerTheme,
-          options: themeOptions,
-          disabled: !unref(getShowHeaderRef),
-        }),
-        renderSelectItem('菜单主题', {
-          handler: (e) => {
-            baseHandler(HandlerEnum.MENU_THEME, e);
-          },
-          def: menuTheme,
-          options: themeOptions,
-          disabled: !unref(getShowMenuRef),
-        }),
+        // renderSelectItem('顶栏主题', {
+        //   handler: (e) => {
+        //     baseHandler(HandlerEnum.HEADER_THEME, e);
+        //   },
+        //   def: headerTheme,
+        //   options: themeOptions,
+        //   disabled: !unref(getShowHeaderRef),
+        // }),
+        // renderSelectItem('菜单主题', {
+        //   handler: (e) => {
+        //     baseHandler(HandlerEnum.MENU_THEME, e);
+        //   },
+        //   def: menuTheme,
+        //   options: themeOptions,
+        //   disabled: !unref(getShowMenuRef),
+        // }),
      ];
    }
    /**
@@ -413,7 +417,6 @@ export default defineComponent({
      return (
        <div class={`setting-drawer__cell-item`}>
          <span>{text}</span>
-          {/* @ts-ignore */}
          <Select
            {...opt}
            disabled={disabled}
@@ -447,6 +450,50 @@ export default defineComponent({
      );
    }

+    function renderTheme() {
+      const { headerBgColor, menuBgColor } = unref(getProjectConfigRef);
+      return (
+        <>
+          <Divider>{() => '顶栏主题'}</Divider>
+          {renderThemeItem(HEADER_PRESET_BG_COLOR_LIST, {
+            def: headerBgColor,
+            handler: (e) => {
+              baseHandler(HandlerEnum.HEADER_THEME, e);
+            },
+          })}
+          <Divider>{() => '菜单主题'}</Divider>
+          {renderThemeItem(SIDE_BAR_BG_COLOR_LIST, {
+            def: menuBgColor,
+            handler: (e) => {
+              baseHandler(HandlerEnum.MENU_THEME, e);
+            },
+          })}
+        </>
+      );
+    }
+
+    function renderThemeItem(colorList: string[], opt: ThemeOptions) {
+      const { def, handler } = opt;
+      return (
+        <div class={`setting-drawer__theme-item`}>
+          {colorList.map((item) => {
+            return (
+              <span
+                onClick={() => handler && handler(item)}
+                key={item}
+                class={[def === item ? 'active' : '']}
+                style={{
+                  background: item,
+                }}
+              >
+                <CheckOutlined class="icon" />
+              </span>
+            );
+          })}
+        </div>
+      );
+    }
+
    return () => (
      <BasicDrawer {...attrs} title="项目配置" width={300} wrapClassName="setting-drawer">
        {{
@@ -454,6 +501,9 @@ export default defineComponent({
            <>
              <Divider>{() => '导航栏模式'}</Divider>
              {renderSidebar()}
+
+              {renderTheme()}
+
              <Divider>{() => '界面功能'}</Divider>
              {renderFeatures()}
              <Divider>{() => '界面显示'}</Divider>
--- a/src/layouts/default/setting/handler.ts
+++ b/src/layouts/default/setting/handler.ts
@@ -1,6 +1,11 @@
 import { HandlerEnum } from './const';
-import { MenuThemeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
-import { updateColorWeak, updateGrayMode } from '/@/setup/theme';
+// import { MenuThemeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
+import {
+  updateColorWeak,
+  updateGrayMode,
+  updateHeaderBgColor,
+  updateSidebarBgColor,
+} from '/@/setup/theme';
 import { appStore } from '/@/store/modules/app';
 import { ProjectConfig } from '/@/types/config';

@@ -14,12 +19,12 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
    case HandlerEnum.CHANGE_LAYOUT:
      const { mode, type, split } = value;
      const splitOpt = split === undefined ? { split } : {};
-      let headerSetting = {};
-      if (type === MenuTypeEnum.TOP_MENU) {
-        headerSetting = {
-          theme: MenuThemeEnum.DARK,
-        };
-      }
+      // let headerSetting = {};
+      // if (type === MenuTypeEnum.TOP_MENU) {
+      //   headerSetting = {
+      //     theme: MenuThemeEnum.DARK,
+      //   };
+      // }
      return {
        menuSetting: {
          mode,
@@ -28,7 +33,7 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
          show: true,
          ...splitOpt,
        },
-        headerSetting,
+        // headerSetting,
      };

    case HandlerEnum.MENU_HAS_DRAG:
@@ -81,10 +86,12 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
        },
      };
    case HandlerEnum.MENU_THEME:
+      updateSidebarBgColor(value);
      return {
-        menuSetting: {
-          theme: value,
-        },
+        menuBgColor: value,
+        // menuSetting: {
+        //   theme: value,
+        // },
      };
    case HandlerEnum.MENU_SPLIT:
      return {
@@ -150,7 +157,7 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
          showQuick: value,
        },
      };
-    case HandlerEnum.TABS_SHOW_QUICK:
+    case HandlerEnum.TABS_SHOW_ICON:
      return {
        multiTabsSetting: {
          showIcon: value,
@@ -163,10 +170,9 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
        },
      };
    case HandlerEnum.HEADER_THEME:
+      updateHeaderBgColor(value);
      return {
-        headerSetting: {
-          theme: value,
-        },
+        headerBgColor: value,
      };
    case HandlerEnum.HEADER_FIXED:
      return {
--- a/src/layouts/default/setting/index.less
+++ b/src/layouts/default/setting/index.less
@@ -20,25 +20,26 @@
    display: flex;
    flex-wrap: wrap;
    margin: 16px 0;
+    justify-content: space-around;

-    span {
-      display: inline-block;
+    > span {
      width: 20px;
      height: 20px;
-      margin-top: 10px;
-      margin-right: 10px;
      cursor: pointer;
-      border-radius: 4px;
+      border: 1px solid #ddd;
+      border-radius: 2px;

      svg {
        display: none;
      }

      &.active {
+        border: 1px solid lighten(@primary-color, 10%);
+
        svg {
          display: inline-block;
-          margin-left: 4px;
-          font-size: 0.8em;
+          margin: 0 0 3px 3px;
+          font-size: 12px;
          fill: @white;
        }
      }