fix(settingDrawer): 修复页脚无法动态显隐

Author: lingting

src/components/SettingDrawer/RegionalChange.tsx

@@ -11,8 +11,6 @@ const RegionalSetting: React.FC<{
   const formatMessage = getFormatMessage();
   const regionalSetting = ['header', 'footer', 'menu', 'menuHeader'];
 
-  // 目前版本 settingDrawer 脚本配置 footer 有问题. 关了无法展示. 移除
-  regionalSetting.splice(regionalSetting.indexOf('footer'), 1);
   // 默认自己绑定在顶栏, 关闭了自己就没了
   regionalSetting.splice(regionalSetting.indexOf('header'), 1);
 

src/components/SettingDrawer/index.tsx

@@ -16,6 +16,7 @@ import { useModel } from 'umi';
 import ConfigUtils from '@/utils/ConfigUtils';
 import type { BodyProps, MergerSettingsType, SettingDrawerProps } from './typings';
 import { LayoutSetting as LayoutSettingUtils } from '@/utils/Ballcat';
+import type { Settings as LayoutSettings } from '@ant-design/pro-layout';
 
 export const getFormatMessage = (): ((data: { id: string; defaultMessage?: string }) => string) => {
   const formatMessage = ({ id }: { id: string; defaultMessage?: string }): string => {
@@ -97,7 +98,7 @@ const SettingDrawer: React.FC<SettingDrawerProps> = (props) => {
   const { hideColors, hideHintAlert, hideCopyButton, getContainer, prefixCls = 'ant-pro' } = props;
 
   const { initialState, setInitialState } = useModel('@@initialState');
-  const layoutSetting = initialState?.settings || ConfigUtils.settings;
+  const layoutSetting: Partial<LayoutSettings> = initialState?.settings || ConfigUtils.settings;
 
   const [show, setShow] = useMergedState(false, {
     value: props.collapse,
@@ -134,8 +135,10 @@ const SettingDrawer: React.FC<SettingDrawerProps> = (props) => {
     const nextState = { ...layoutSetting };
     nextState[key] = value;
 
-    if (key === 'navTheme') {
-      nextState.primaryColor = 'daybreak';
+    if (value === undefined) {
+      delete nextState[key];
+    } else {
+      nextState[key] = value;
     }
 
     if (key === 'layout') {

src/layouts/BasicLayout.tsx

@@ -78,6 +78,8 @@ const renderMenuItem = (collapsed: boolean, title: string, hasSub: boolean, icon
   );
 };
 
+const footerRender = () => <Footer />;
+
 const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
   const {
     children,
@@ -157,7 +159,8 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
 
       setInitialState({
         ...initialState,
-        settings: { ...settings, ...initialState.settings },
+        // @ts-ignore
+        settings: { footerRender, ...settings, ...initialState.settings },
         routerLoad: true,
         menuFirst: getFirstUrl(initialState.menuArray),
       });
@@ -170,19 +173,18 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
 
   return (
     <ProLayout
+      footerRender={footerRender}
+      {...(initialState?.settings || settings)}
       logo={settings.logo}
-      {...settings}
-      {...initialState?.settings}
       formatMessage={I18n.getIntl().formatMessage}
-      footerRender={() => <Footer />}
       {...props}
       route={route}
       collapsedButtonRender={false}
       collapsed={collapsed}
       onCollapse={setCollapsed}
-      contentStyle={{ marginTop: initialState?.settings.multiTab ? '56px' : undefined }}
+      contentStyle={{ marginTop: initialState?.settings?.multiTab ? '56px' : undefined }}
       headerRender={(headerProps, defaultDom) => {
-        if (initialState?.settings.multiTab) {
+        if (initialState?.settings?.multiTab) {
           return (
             <>
               {defaultDom}

src/typings.d.ts

@@ -1,5 +1,6 @@
 import type { MenuDataItem } from '@ant-design/pro-layout';
 import type { SysDictData, SysDictDataHash } from './services/ballcat/system';
+import type { ProjectSetting } from 'config/settings';
 
 declare module 'slash2';
 declare module '*.css';
@@ -70,7 +71,7 @@ export type TreeNode<T> = {
 
 declare namespace GLOBAL {
   type Is = {
-    settings?: Partial<LayoutSettings>;
+    settings?: Partial<ProjectSetting>;
     menuArray?: MenuDataItem[];
     menuFirst: string;
     routerLoad?: boolean;

src/utils/Ballcat.ts

@@ -111,7 +111,7 @@ export const LayoutSetting = {
     }
     return { ...settings };
   },
-  set: (ps: ProjectSetting) => {
+  set: (ps: Partial<ProjectSetting>) => {
     set(layout_setting_key, JSON.stringify(ps));
   },
 };