aldehyde 0.2.420 → 0.2.422

package/lib/welcome/components/user-menus.less

@@ -0,0 +1,193 @@
+.user-menus {
+    position: relative;
+    overflow: hidden;
+    border-radius: 0.75rem;
+    padding: 1.25rem;
+    border: 1px solid;
+
+    .heard {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .title {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+
+            .line {
+                width: 0.25rem;
+                height: 1.25rem;
+                border-radius: 9999px;
+            }
+
+            .text {
+                font-weight: 600;
+                margin: 0;
+            }
+        }
+    }
+
+    .user-menu-item {
+        transition-property: all;
+        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+        transition-duration: .15s;
+        padding: 12px;
+        border-radius: 8px;
+        overflow: hidden;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-content: space-between;
+        flex-wrap: wrap;
+        position: relative;
+
+        .menu-title {
+            width: 100%;
+            text-align: center;
+            color: var(--ant-color-text-secondary);
+            margin-top: 8px;
+        }
+
+
+        .icon-wrapper {
+            position: relative;
+            display: flex;
+            height: 3rem;
+            width: 3rem;
+            align-items: center;
+            justify-content: center;
+            transition-property: all;
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            transition-duration: 0.3s;
+            animation-duration: 0.3s;
+            border-radius: 0.75rem;
+            opacity: 1;
+        }
+
+        .icon-animated {
+            font-size: 24px;
+            transition-property: all;
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            transition-duration: 300ms;
+        }
+
+        .user-menu-item-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            transition-property: opacity;
+            transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+            transition-duration: .3s;
+            opacity: 0;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .user-menu-item:hover {
+        transform: translateY(-1px);
+
+        .icon-animated {
+            transform: scale(1.1) rotate(6deg);
+        }
+
+        .user-menu-item-bg {
+            opacity: 1;
+        }
+
+        .menu-title {
+            font-weight: bolder;
+            color: var(--ant-color-text-base)
+        }
+    }
+
+    .user-menus-items-grid {
+        display: grid;
+        margin-top: 1rem;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 0.5rem;
+
+        @media (min-width: 740px) {
+            grid-template-columns: repeat(4, minmax(0, 1fr));
+        }
+
+        @media (min-width: 840px) {
+            grid-template-columns: repeat(5, minmax(0, 1fr));
+        }
+
+    }
+
+    .user-page-config {
+        margin-top: 1rem;
+
+        .page-config-item-card {
+            position: relative;
+            overflow: hidden;
+            border-radius: 0.75rem;
+            padding: 1.25rem;
+            transition-property: transform, box-shadow;
+            display: flex;
+            align-items: flex-start;
+            justify-content: space-between;
+            border: 1px solid;
+            cursor: pointer;
+            height: 100%;
+
+            .ant-row {
+                width: 100%;
+            }
+
+            .icon-wrapper {
+                position: relative;
+                display: flex;
+                height: 3rem;
+                width: 3rem;
+                align-items: center;
+                justify-content: center;
+                transition-property: all;
+                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+                transition-duration: 0.3s;
+                animation-duration: 0.3s;
+                border-radius: 0.75rem;
+                opacity: 1;
+            }
+
+            .item-title {
+                margin-bottom: 12px;
+                font-weight: 600;
+                font-size: 16px;
+            }
+
+            .tag {
+                padding: 4px 10px;
+                border-radius: 9999px;
+                font-size: 12px;
+                line-height: 16px;
+            }
+
+        }
+
+        .page-config-item-card:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+            .icon-wrapper {
+                transform: scale(1.1);
+                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
+            }
+
+            .item-title {
+                color: var(--ant-color-primary);
+            }
+        }
+
+        .icon-animated {
+            font-size: 24px;
+            transition-property: all;
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            transition-duration: 300ms;
+        }
+    }
+
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aldehyde",
-  "version": "0.2.420",
+  "version": "0.2.422",
   "author": "cosmicparticle",
   "main": "lib/index.js",
   "module": "src/aldehyde/index.txs",

package/src/aldehyde/controls/date-picker/index.tsx

@@ -17,6 +17,13 @@ dayjs.extend(localeData);
 
 const { RangePicker } = AntdDatePicker;
 
+// 默认显示预设时间范围
+const defShowPresets = {
+    "last1days": { label: "最近1天", value: [dayjs().subtract(1, 'day'), dayjs()] },
+    "yesterday": { label: "昨天", value: [dayjs().subtract(1, 'day').startOf('day'), dayjs().subtract(1, 'day').endOf('day')] },
+    "currentDay": { label: "今天", value: [dayjs().startOf('day'), dayjs().endOf('day')] },
+};
+
 // 预设时间范围
 const defPresets = {
     "currentYear": { label: "本年", value: [dayjs().startOf('year'), dayjs().endOf('year')] },
@@ -26,9 +33,7 @@ const defPresets = {
     "last30days": { label: "最近30天", value: [dayjs().subtract(30, 'day'), dayjs()] },
     "last15days": { label: "最近15天", value: [dayjs().subtract(15, 'day'), dayjs()] },
     "last7days": { label: "最近7天", value: [dayjs().subtract(7, 'day'), dayjs()] },
-    "last1days": { label: "最近1天", value: [dayjs().subtract(1, 'day'), dayjs()] },
-    "yesterday": { label: "昨天", value: [dayjs().subtract(1, 'day').startOf('day'), dayjs().subtract(1, 'day').endOf('day')] },
-    "currentDay": { label: "今天", value: [dayjs().startOf('day'), dayjs().endOf('day')] },
+    ...defShowPresets,
     "last12hours": { label: "最近12小时", value: [dayjs().subtract(12, 'hour'), dayjs()] },
     "last6hours": { label: "最近6小时", value: [dayjs().subtract(6, 'hour'), dayjs()] },
     "last1hour": { label: "最近1小时", value: [dayjs().subtract(1, 'hour'), dayjs()] },
@@ -67,7 +72,10 @@ const DatePicker: React.FC<DatePickerProps> = (props) => {
         return current && ((max && dayjs(current.format(format), format) > dayjs(max, format)) || (min && dayjs(current.format(format), format) < dayjs(min, format)));
     };
 
-    const presets = useMemo(() => dateControlShortcutKeys?.map(item => defPresets[item]) || [], [dateControlShortcutKeys]);
+    const presets = useMemo(() => {
+        const temArr = dateControlShortcutKeys?.map(item => defPresets[item]) || [];
+        return temArr?.length ? temArr : Object.values(defShowPresets);
+    }, [dateControlShortcutKeys]);
 
     let entryControl = undefined;
     let picker: "date" | "time" | "year" | "month" | "week" | "quarter" = "date";

package/src/aldehyde/controls/file-view/index.tsx

@@ -8,6 +8,8 @@ import Player from "griffith";
 // 不得已而为之
 const Player1: any = Player;
 
+// Image容错图片
+const fallback = "data:image/png;base64,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";
 
 export interface FileViewProps {
     fieldConfig: FieldConfig,
@@ -67,7 +69,7 @@ export default class FileView extends React.PureComponent<FileViewProps, FileVie
     packFile2Show = () => {
         const { urlData, filePath, playing } = this.state;
         const { downloadable, serverKey, fieldConfig } = this.props;
-        const { preview } = fieldConfig;
+        const { preview, isFallback } = fieldConfig;
 
         let path = undefined;
         let fileName = undefined;
@@ -83,6 +85,7 @@ export default class FileView extends React.PureComponent<FileViewProps, FileVie
                     width={90}
                     src={filePath.iconPath ? filePath.iconPath : filePath.path}
                     preview={preview || preview === false ? preview : { src: filePath.path }}
+                    fallback={isFallback ? fallback : undefined}
                 />
             } else if (urlData) {
                 // let urlValue = await HCService.loadFileTxt(jsonFile.base.path)
@@ -90,6 +93,7 @@ export default class FileView extends React.PureComponent<FileViewProps, FileVie
                     width={90}
                     src={urlData}
                     preview={preview || preview === false ? preview : { src: urlData }}
+                    fallback={isFallback ? fallback : undefined}
                 />
             } else if (['mp4', 'MP4', 'mov', 'MOV', 'avi', 'AVI', 'WMV', 'wmv', "wav", "WAV"].includes(filePath.contentType)) {
                 let sources = {

package/src/aldehyde/detail/button/view-button.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Button } from "antd";
-import {DtmplData, LtmplConfig, ShowViewParam} from "../../tmpl/interface";
+import { DtmplData, LtmplConfig, ShowViewParam } from "../../tmpl/interface";
 import { AlignCenterOutlined } from "@ant-design/icons";
 import ActionUtils from "../../controls/action/utils";
 
@@ -9,10 +9,11 @@ interface ViewButtonProps {
   showView: (showViewParam: ShowViewParam) => void;
   data: DtmplData;
   ltmplConfig: LtmplConfig;
+  buttonType?: "link" | "text" | "primary" | "default" | "dashed";
 }
 
 const ViewButton: React.FC<ViewButtonProps> = (props) => {
-  const { showView, data, ltmplConfig } = props;
+  const { showView, data, ltmplConfig, buttonType = "primary" } = props;
   let button = undefined;
   if (ltmplConfig.classViewConfigs) {
     ltmplConfig.classViewConfigs.forEach((classViewConfig) => {
@@ -23,10 +24,10 @@ const ViewButton: React.FC<ViewButtonProps> = (props) => {
         button = (
           <Button
             size="small"
-            type="primary"
+            type={buttonType}
             icon={<AlignCenterOutlined />}
             onClick={() =>
-                showView({
+              showView({
                 code: data.code,
                 dtmplSourceId: classViewConfig.id,
               })
@@ -49,9 +50,9 @@ const ViewButton: React.FC<ViewButtonProps> = (props) => {
     button = (
       <Button
         size="small"
-        type="primary"
+        type={buttonType}
         icon={<AlignCenterOutlined />}
-        onClick={() => showView({ code: data.code})}
+        onClick={() => showView({ code: data.code })}
       ></Button>
     );
   }

package/src/aldehyde/hooks/use-tabs/index.tsx

@@ -40,6 +40,9 @@ export function useTabs() {
         return;
       }
       const index = (keepAliveTabs || []).findIndex(o => o.routePath === routePath);
+      if (index === -1) {
+        return;
+      }
       if (keepAliveTabs[index].routePath === activeTabRoutePath && keepAliveTabs.length > 1) {
         if (index > 0) {
           navigate(keepAliveTabs[index - 1].pathname);

package/src/aldehyde/layout2/components/search-menu.tsx

@@ -64,7 +64,7 @@ const Index = (props: Props) => {
     />;
 
     return (
-        <Popover placement="bottom" content={renderMenu} styles={{ body: { padding: 2 } }} destroyOnHidden onOpenChange={(val) => val && setSelectInit(true)}>
+        <Popover placement="bottom" trigger="click" content={renderMenu} styles={{ body: { padding: 2 } }} destroyOnHidden onOpenChange={(val) => val && setSelectInit(true)}>
             <Button type="link" icon={<SearchOutlined />} shape="default" size="large"
                 style={{
                     width: "100%",

package/src/aldehyde/layout2/components/user-button.tsx

@@ -7,11 +7,11 @@ import {
   SettingOutlined,
   UnlockOutlined,
   UserOutlined,
-  CompressOutlined, GlobalOutlined
+  CompressOutlined, GlobalOutlined, DownloadOutlined
 } from "@ant-design/icons";
-import { Button, ButtonProps, Dropdown, GetProp, MenuProps } from "antd";
+import { Button, ButtonProps, Dropdown, GetProp, MenuProps, Popconfirm } from "antd";
 import HcserviceV3 from "../../tmpl/hcservice-v3";
-import { UserInfo } from "../../tmpl/interface";
+import { UserInfo, ThemeConfig } from "../../tmpl/interface";
 import UserInfoBar from "../../layout/menu/userinfo-bar";
 import { useLocale } from "../../locale/useLocale";
 import { NavLink, useNavigate } from "react-router-dom";
@@ -34,10 +34,12 @@ type DropDownMenuType = {
 interface Props extends ButtonProps {
   logoutUrl?: string;
   customRender?: ReactNode;
+  layoutRootPath?: string;
+  themeConfig?: ThemeConfig;
 }
 
 const UserButton: React.FC<Props> = (props) => {
-  const { logoutUrl = "/login2", customRender } = props;
+  const { logoutUrl = "/login2", customRender, layoutRootPath = "v2", themeConfig } = props;
   // translate
   const { translate, changeSiderCollapsed, getSiderCollapsed, compactTheme, changeCompactTheme } = useLocale();
   const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', {
@@ -51,11 +53,23 @@ const UserButton: React.FC<Props> = (props) => {
     id: undefined,
     name: undefined,
   });
+
   const initUserConfig = async () => {
     const userInfo: UserInfo = await Units.getUserInfo();
     setUserConfig(userInfo);
   };
-  useEffect(() => { }, [userConfig]);
+
+  // 初始化侧边栏菜单显隐
+  const initSiderCollapsed = (hideLeftMenuTheme: string) => {
+    if (!hideLeftMenuTheme || !layoutRootPath) {
+      return;
+    }
+    const temThemes = hideLeftMenuTheme.split(",");
+    const isCollapsed = getSiderCollapsed();
+    if ((temThemes.includes(layoutRootPath) && !isCollapsed) || (!temThemes.includes(layoutRootPath) && isCollapsed)) {
+      changeSiderCollapsed();
+    }
+  }
 
   // 上下文配置信息
   const [globalContext, setGlobalContext] = useState<any[]>();
@@ -65,8 +79,15 @@ const UserButton: React.FC<Props> = (props) => {
   };
   useEffect(() => {
     initContext();
+    initUserConfig();
   }, []);
 
+  useEffect(() => {
+    if (themeConfig) {
+      initSiderCollapsed(themeConfig.hideLeftMenuTheme);
+    }
+  }, [themeConfig]);
+
   // 用户是否登录
   const [isLogin, setIsLogin] = useState<boolean>(false);
   useEffect(() => {
@@ -74,9 +95,6 @@ const UserButton: React.FC<Props> = (props) => {
       setIsLogin(true);
     else setIsLogin(false);
   }, [userConfig]);
-  useEffect(() => {
-    initUserConfig();
-  }, []);
 
   // logout
   const logout = async () => {
@@ -145,6 +163,25 @@ const UserButton: React.FC<Props> = (props) => {
         return isLogin && userConfig.cleanCachable;
       },
     },
+    {
+      label: (
+        <Popconfirm
+          placement="rightBottom"
+          title={translate("${确定要[拉取]我的配置吗}?")}
+          onConfirm={() => Units.getPageConfigDefault()}
+          okText={translate("${确定}")}
+          cancelText={translate("${取消}")}
+          okType="danger"
+        >
+          <span onClick={(e) => e.stopPropagation()}>
+            {translate("${我的配置}")}
+          </span>
+        </Popconfirm>
+      ),
+      key: "userPageConfig",
+      icon: <DownloadOutlined />,
+      show: () => isLogin && themeConfig?.allowUserConfig,
+    },
     {
       label: <span onClick={() => changeCompactTheme()}>{translate(compactTheme ? "${默认主题}" : "${紧凑主题}")}</span>,
       key: "compactTheme",

package/src/aldehyde/layout2/header.tsx

@@ -25,6 +25,7 @@ import { useLayoutContext } from "./layout-context";
 import IconFont from "./components/icon-font";
 import SearchMenu from "./components/search-menu";
 import ScreenfullButton from "./components/screenfull-button";
+import { ThemeConfig } from "../tmpl/interface";
 
 const toolbarStyle: CSSProperties = {
   width: "100%",
@@ -41,6 +42,7 @@ type HeaderPropsType = {
   menuList: MenuType[];
   style?: any;
   logoImg: string;
+  themeConfig?: ThemeConfig;
 };
 
 type MenuItem = Required<MenuProps>["items"][number];
@@ -48,7 +50,7 @@ type MenuItem = Required<MenuProps>["items"][number];
 
 const { useToken } = theme;
 
-const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, style, logoImg }) => {
+const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, style, logoImg, themeConfig }) => {
   const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
 
   // token
@@ -65,7 +67,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, style, logoIm
         menuList,
         (menuItem, floor) => {
           const { disabled, label, children, icon } = menuItem;
-          const renderIcon = icon ? <IconFont type={icon} /> : "";
+          const renderIcon = (themeConfig?.showTopMenuIcon && icon) ? <IconFont type={icon} /> : "";
           if (disabled)
             return (
               <div
@@ -260,7 +262,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, style, logoIm
               type="link"
               style={toolbarStyle}
             /> */}
-            <UserButton style={{ padding: 0, marginRight: "15px", color: "#ffffff" }} />
+            <UserButton themeConfig={themeConfig} layoutRootPath="v2" style={{ padding: 0, marginRight: "15px", color: "#ffffff" }} />
           </Space>
         </div>
       </div>

package/src/aldehyde/layout2/page.tsx

@@ -9,7 +9,7 @@ import Sider from "./sider";
 import Main from "./main";
 import HcserviceV3 from "../tmpl/hcservice-v3";
 import { MenuType } from "./type/layout-type";
-import { BlockType, MenuConfigAPIType } from "../tmpl/interface";
+import { BlockType, MenuConfigAPIType, ThemeConfig } from "../tmpl/interface";
 import { useVarCssColor } from "../hooks/useVarCssColor";
 import { generate } from "@ant-design/colors";
 import { LayoutProvider, useLayoutContext } from "./layout-context";
@@ -204,16 +204,17 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
 
   const [systemName, setSystemName] = useState("");
   const [systemLogo, setSystemLogo] = useState("");
-
   const [menu, SetMenu] = useState<MenuType[]>([]);
+  const [themeConfig, setThemeConfig] = useState<ThemeConfig>();
 
   const getThemeConfigAndMenuConfig = async () => {
-    const themeConfig = await Units.getThemeConfig();
+    const tConfig = await Units.getThemeConfig();
     const menuConfig = await getMenuConfig();
-    setSystemName(themeConfig?.programName || menuConfig?.systemName);
-    setSystemLogo(themeConfig?.programIcon || homePng);
+    setSystemName(tConfig?.programName || menuConfig?.systemName);
+    setSystemLogo(tConfig?.programIcon || homePng);
     SetMenu(menuConfig?.menu);
     updateMenuItemIdToFirstFloorIdxMap(menuConfig?.menu);
+    setThemeConfig(tConfig);
   };
 
 
@@ -243,9 +244,9 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
             algorithm: compactTheme ? [theme.compactAlgorithm] : [],
           }}>
           <Layout style={{ height: "100%" }} className={compactTheme ? "layout-compactTheme" : undefined}>
-            <Header logoImg={logo || systemLogo} systemName={systemName ? systemName : Units.programName_NavLeft()} menuList={menu}></Header>
+            <Header themeConfig={themeConfig} logoImg={logo || systemLogo} systemName={systemName ? systemName : Units.programName_NavLeft()} menuList={menu}></Header>
             <Layout>
-              <Sider menuList={menu} collapsed={getSiderCollapsed()}></Sider>
+              <Sider themeConfig={themeConfig} menuList={menu} collapsed={getSiderCollapsed()}></Sider>
               <Main>{props.children}</Main>
             </Layout>
           </Layout>

package/src/aldehyde/layout2/sider.tsx

@@ -12,7 +12,7 @@ import { useLocale } from "../locale/useLocale";
 import { generate } from "@ant-design/colors";
 import { useLayoutContext } from "./layout-context";
 import IconFont from "./components/icon-font";
-import { UserInfo } from "../tmpl/interface";
+import { UserInfo, ThemeConfig } from "../tmpl/interface";
 import Units from "../units";
 import "./css/sider.less";
 
@@ -20,6 +20,7 @@ type SiderPropsType = {
   menuList: MenuType[];
   // style?: typeof Layout.Sider.defaultProps.style;
   collapsed: boolean;
+  themeConfig?: ThemeConfig;
 };
 
 type MenuItem = Required<MenuProps>["items"][number];
@@ -54,7 +55,7 @@ const getSecoundFloorMenuList = (
 
 const { useToken } = theme;
 
-const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed }) => {
+const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, themeConfig }) => {
   const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
   const [orgName, setOrgName] = useState<string>(""); // 组织名称
 
@@ -91,7 +92,7 @@ const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed }) => {
   ) => {
     return handlePropsMenuToAntdMenu(secoundFloorMenu, (menuItem, floor) => {
       const { disabled, label, children, icon } = menuItem;
-      const renderIcon = icon ? <IconFont type={icon} /> : "";
+      const renderIcon = (themeConfig?.showLeftMenuIcon && icon) ? <IconFont type={icon} /> : "";
 
       if (disabled)
         return (

package/src/aldehyde/layout3/header.tsx

@@ -17,6 +17,7 @@ import headerBgImg from "./imgs/header-bg.png";
 import homeBgImg from "./imgs/home-bg.png";
 import Time from "./components/time";
 import IconFont from "../layout2/components/icon-font";
+import { ThemeConfig } from "../tmpl/interface";
 import "./css/header.less";
 
 const toolbarStyle: CSSProperties = {
@@ -57,11 +58,12 @@ type HeaderPropsType = {
   systemName: string;
   menuList: MenuType[];
   style?: any;
+  themeConfig?: ThemeConfig;
 };
 
 type MenuItem = Required<MenuProps>["items"][number];
 
-const Header: React.FC<HeaderPropsType> = ({ systemName, menuList }) => {
+const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, themeConfig }) => {
   const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
   const { translate, getLocale } = useLocale();
   const [menu, setMenu] = useState<MenuItem[]>([]);
@@ -73,7 +75,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList }) => {
 
   const renderMenuItem = (menuItem) => {
     const { label, id, disabled, icon } = menuItem;
-    const renderIcon = icon ? <IconFont type={icon} /> : "";
+    const renderIcon = (themeConfig?.showTopMenuIcon && icon) ? <IconFont type={icon} /> : "";
     return <div className={`menu-item ${disabled ? "menu-disabled" : ""}`}><div className={selParentId === id ? "menu-item-border-sel" : "menu-item-border"}><Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space></div></div>;
   }
 
@@ -82,7 +84,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList }) => {
     if (disabled) {
       return renderMenuItem(menuItem);
     }
-    const renderIcon = icon ? <IconFont type={icon} /> : "";
+    const renderIcon = (themeConfig?.showTopMenuIcon && icon) ? <IconFont type={icon} /> : "";
     const { path, target } = getLeftMostRouteInfo(menuItem);
     if (floor === 0) {
       return path === null ? (
@@ -155,7 +157,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList }) => {
               type="link"
               style={toolbarStyle}
             /> */}
-            <div className="header-user"><UserButton logoutUrl="/login3" style={{ padding: 0, color: "#fff" }} /></div>
+            <div className="header-user"><UserButton themeConfig={themeConfig} layoutRootPath="v3" logoutUrl="/login3" style={{ padding: 0, color: "#fff" }} /></div>
           </Space>
         </div>
       </div>

package/src/aldehyde/layout3/page.tsx

@@ -13,6 +13,7 @@ import Units from '../units';
 import { useLocale } from "../locale/useLocale";
 import { KeepAliveTab } from "../hooks/use-tabs";
 import { getMenuConfig } from "../layout2/page";
+import { ThemeConfig } from "../tmpl/interface";
 import "./css/main.less";
 
 const { useToken } = theme;
@@ -24,6 +25,7 @@ type PagePropsType = {
 const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
   const [systemName, setSystemName] = useState("");
   const [menu, setMenu] = useState<MenuType[]>([]);
+  const [themeConfig, setThemeConfig] = useState<ThemeConfig>();
   const pageRef = useRef<HTMLDivElement>(undefined); // page ref
   //清空缓存
   const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', { defaultValue: [] });
@@ -32,11 +34,12 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
   const { token: { colorPrimary } } = useToken();
 
   const getThemeConfigAndMenuConfig = async () => {
-    const themeConfig = await Units.getThemeConfig();
+    const tConfig = await Units.getThemeConfig();
     const menuConfig = await getMenuConfig("v3");
-    setSystemName(themeConfig?.programName || menuConfig?.systemName);
+    setSystemName(tConfig?.programName || menuConfig?.systemName);
     setMenu(menuConfig?.menu);
     updateMenuItemIdToFirstFloorIdxMap(menuConfig?.menu);
+    setThemeConfig(tConfig);
   };
 
   useEffect(() => {
@@ -69,9 +72,9 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
           card={{ className: "v3-antd-card" }}
         >
           <Layout style={{ height: "100%" }} className={compactTheme ? "layout-compactTheme" : undefined}>
-            <Header systemName={systemName ? systemName : Units.programName_NavLeft()} menuList={menu}></Header>
+            <Header themeConfig={themeConfig} systemName={systemName ? systemName : Units.programName_NavLeft()} menuList={menu}></Header>
             <Layout>
-              <Sider menuList={menu} collapsed={getSiderCollapsed()}></Sider>
+              <Sider themeConfig={themeConfig} menuList={menu} collapsed={getSiderCollapsed()}></Sider>
               <Main>{props.children}</Main>
             </Layout>
           </Layout>