aldehyde 0.2.421 → 0.2.422

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>

package/src/aldehyde/layout3/sider.tsx

@@ -10,13 +10,14 @@ import { useLayoutContext } from "../layout2/layout-context";
 import { MenuType } from "../layout2/type/layout-type";
 import { useLocale } from "../locale/useLocale";
 import IconFont from "../layout2/components/icon-font";
-import { UserInfo } from "../tmpl/interface";
+import { UserInfo, ThemeConfig } from "../tmpl/interface";
 import Units from "../units";
 import "./css/sider.less"
 
 type SiderPropsType = {
   menuList: MenuType[];
   collapsed: boolean;
+  themeConfig?: ThemeConfig;
 };
 
 type MenuItem = Required<MenuProps>["items"][number];
@@ -42,7 +43,7 @@ const getSecoundFloorMenuList = (
   return secoundFloorMenuList;
 };
 
-const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed }) => {
+const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, themeConfig }) => {
   const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
   const { translate, getLocale } = useLocale();
   const secoundFloorMenuList = useRef<SecoundFloorMenuList>([]);
@@ -75,7 +76,7 @@ const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed }) => {
   const getMenuWithSecoundFloor = (secoundFloorMenu: SecoundFloorMenuList[number]) => {
     return handlePropsMenuToAntdMenu(secoundFloorMenu, (menuItem) => {
       const { disabled, label, children, icon } = menuItem;
-      const renderIcon = icon ? <IconFont type={icon} /> : "";
+      const renderIcon = (themeConfig?.showLeftMenuIcon && icon) ? <IconFont type={icon} /> : "";
       if (disabled)
         return (
           <div

package/src/aldehyde/layout4/header.tsx

@@ -16,6 +16,7 @@ import headerBgImg from "./imgs/header-bg.png";
 import menuItemBgImg from "./imgs/menu-item-bg.png";
 import userImg from "./imgs/user.png";
 import IconFont from "../layout2/components/icon-font";
+import { ThemeConfig } from "../tmpl/interface";
 import "./css/header.less";
 
 // 查找当前选中菜单的顶层菜单id
@@ -49,11 +50,12 @@ type HeaderPropsType = {
   menuList: MenuType[];
   style?: any;
   logoImg?: string;
+  themeConfig?: ThemeConfig;
 };
 
 type MenuItem = Required<MenuProps>["items"][number];
 
-const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, logoImg }) => {
+const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, logoImg, themeConfig }) => {
   const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
   const { translate, getLocale } = useLocale();
   const [menu, setMenu] = useState<MenuItem[]>([]);
@@ -77,7 +79,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, logoImg }) =>
 
   const renderMenuItem = (menuItem) => {
     const { label, id, disabled, icon } = menuItem;
-    const renderIcon = icon ? <IconFont type={icon} className="menu-icon" /> : "";
+    const renderIcon = (themeConfig?.showTopMenuIcon && icon) ? <IconFont type={icon} className="menu-icon" /> : "";
     return <div className={`menu-item ${disabled ? "menu-disabled" : ""} ${selParentId === id ? "menu-item-selected" : ""}`} style={{ backgroundImage: selParentId === id ? `url(${menuItemBgImg})` : undefined }}><Space size={"small"}>{renderIcon}{translate("${" + label + "}")}</Space></div>;
   }
 
@@ -86,7 +88,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, logoImg }) =>
     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 ? (
@@ -171,7 +173,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, logoImg }) =>
               style={toolbarStyle}
             /> */}
             <div className="header-user">
-              <UserButton logoutUrl="/login4" style={{ padding: 0, color: "#fff" }} customRender={<img src={userImg} alt="" className="userButton" />} />
+              <UserButton themeConfig={themeConfig} layoutRootPath="v4" logoutUrl="/login4" style={{ padding: 0, color: "#fff" }} customRender={<img src={userImg} alt="" className="userButton" />} />
             </div>
           </Space>
         </div>

package/src/aldehyde/layout4/page.tsx

@@ -14,6 +14,7 @@ import { useLocale } from "../locale/useLocale";
 import { KeepAliveTab } from "../hooks/use-tabs";
 import { getMenuConfig } from "../layout2/page";
 import homePng from "./imgs/home.png";
+import { ThemeConfig } from "../tmpl/interface";
 import "./css/main.less";
 
 const { useToken } = theme;
@@ -27,6 +28,7 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
   const { logo } = props;
   const [systemName, setSystemName] = useState("");
   const [systemLogo, setSystemLogo] = useState("");
+  const [themeConfig, setThemeConfig] = useState<ThemeConfig>();
   const [menu, setMenu] = useState<MenuType[]>([]);
   const pageRef = useRef<HTMLDivElement>(undefined); // page ref
   //清空缓存
@@ -36,12 +38,13 @@ 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("v4");
-    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);
   };
 
   useEffect(() => {
@@ -84,9 +87,9 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
           card={{ className: "v4-antd-card" }}
         >
           <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/layout4/sider.tsx

@@ -10,13 +10,14 @@ import { useLayoutContext } from "../layout2/layout-context";
 import { MenuType } from "../layout2/type/layout-type";
 import { useLocale } from "../locale/useLocale";
 import IconFont from "../layout2/components/icon-font";
-import { UserInfo } from "../tmpl/interface";
+import { UserInfo, ThemeConfig } from "../tmpl/interface";
 import Units from "../units";
 import "./css/sider.less"
 
 type SiderPropsType = {
   menuList: MenuType[];
   collapsed: boolean;
+  themeConfig?: ThemeConfig;
 };
 
 type MenuItem = Required<MenuProps>["items"][number];
@@ -44,7 +45,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 { translate, getLocale } = useLocale();
   const secoundFloorMenuList = useRef<SecoundFloorMenuList>([]);
@@ -78,7 +79,7 @@ const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed }) => {
   const getMenuWithSecoundFloor = (secoundFloorMenu: SecoundFloorMenuList[number]) => {
     return handlePropsMenuToAntdMenu(secoundFloorMenu, (menuItem) => {
       const { disabled, label, children, icon } = menuItem;
-      const renderIcon = icon ? <IconFont type={icon} /> : "";
+      const renderIcon = (themeConfig?.showLeftMenuIcon && icon) ? <IconFont type={icon} /> : "";
       if (disabled)
         return (
           <div

package/src/aldehyde/layout5/header.tsx

@@ -13,6 +13,7 @@ import { MenuType } from "../layout2/type/layout-type";
 import { useLocale } from "../locale/useLocale";
 import { getLeftMostRouteInfo, handlePropsMenuToAntdMenu } from "../layout2/util/menu-util";
 import IconFont from "../layout2/components/icon-font";
+import { ThemeConfig } from "../tmpl/interface";
 import "./css/header.less";
 
 const { useToken } = theme;
@@ -43,10 +44,11 @@ const findPathToRoot = (menus, targetId) => {
 
 type HeaderPropsType = {
   menuList: MenuType[];
+  themeConfig?: ThemeConfig;
 };
 type MenuItem = Required<MenuProps>["items"][number];
 
-const Header: React.FC<HeaderPropsType> = ({ menuList }) => {
+const Header: React.FC<HeaderPropsType> = ({ menuList, themeConfig }) => {
   const { token: { colorPrimary } } = useToken();
   const { translate, getLocale } = useLocale();
   const { changeSiderCollapsed, getSiderCollapsed } = useLocale();
@@ -189,7 +191,7 @@ const Header: React.FC<HeaderPropsType> = ({ menuList }) => {
           type="link"
           style={toolbarStyle}
         /> */}
-        <UserButton logoutUrl="/login2" style={{ padding: 0, color: "#000" }} />
+        <UserButton themeConfig={themeConfig} layoutRootPath="v5" logoutUrl="/login2" style={{ padding: 0, color: "#000" }} />
       </Space>
     </Layout.Header>
   );

package/src/aldehyde/layout5/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 homePng from "./imgs/home.png";
 
 const { useToken } = theme;
@@ -26,6 +27,7 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
   const { logo } = props;
   const [systemName, setSystemName] = useState("");
   const [systemLogo, setSystemLogo] = useState("");
+  const [themeConfig, setThemeConfig] = useState<ThemeConfig>();
   const [menu, setMenu] = useState<MenuType[]>([]);
   const pageRef = useRef<HTMLDivElement>(undefined); // page ref
   //清空缓存
@@ -35,12 +37,13 @@ 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("v5");
-    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);
   };
 
   useEffect(() => {
@@ -65,9 +68,9 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
             algorithm: compactTheme ? [theme.compactAlgorithm] : [],
           }}>
           <Layout style={{ height: "100%" }} className={compactTheme ? "layout-compactTheme" : undefined}>
-            <Sider logoImg={logo || systemLogo} menuList={menu} collapsed={getSiderCollapsed()} systemName={systemName ? systemName : Units.programName_NavLeft()} />
+            <Sider themeConfig={themeConfig} logoImg={logo || systemLogo} menuList={menu} collapsed={getSiderCollapsed()} systemName={systemName ? systemName : Units.programName_NavLeft()} />
             <Layout>
-              <Header menuList={menu} />
+              <Header themeConfig={themeConfig} menuList={menu} />
               <Main>{props.children}</Main>
             </Layout>
           </Layout>

package/src/aldehyde/layout5/sider.tsx

@@ -11,7 +11,7 @@ import { useLayoutContext } from "../layout2/layout-context";
 import { MenuType } from "../layout2/type/layout-type";
 import { useLocale } from "../locale/useLocale";
 import IconFont from "../layout2/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 = {
   collapsed: boolean;
   systemName: string;
   logoImg?: string;
+  themeConfig?: ThemeConfig;
 };
 
 type MenuItem = Required<MenuProps>["items"][number];
@@ -47,7 +48,7 @@ const getSecoundFloorMenuList = (
 
 const { useToken } = theme;
 
-const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, systemName, logoImg }) => {
+const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, systemName, logoImg, themeConfig }) => {
   const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
   const { translate, getLocale } = useLocale();
   const secoundFloorMenuList = useRef<SecoundFloorMenuList>([]);
@@ -82,7 +83,7 @@ const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed, systemName, logo
   const getMenuWithSecoundFloor = (secoundFloorMenu: SecoundFloorMenuList[number]) => {
     return handlePropsMenuToAntdMenu(secoundFloorMenu, (menuItem) => {
       const { disabled, label, children, icon } = menuItem;
-      const renderIcon = icon ? <IconFont type={icon} /> : "";
+      const renderIcon = (themeConfig?.showLeftMenuIcon && icon) ? <IconFont type={icon} /> : "";
       if (disabled)
         return (
           <div

package/src/aldehyde/list/card-list/card-list-item.tsx

@@ -37,7 +37,7 @@ const Index = (props: Props) => {
             });
         }
         const value = item[itemConfig.id];
-        const element = <ViewControl serverKey={serverKey} holderType="table" value={value} fieldConfig={type === "mainPicture" ? { ...itemConfig, preview: false } : itemConfig} />;
+        const element = <ViewControl serverKey={serverKey} holderType="table" value={value} fieldConfig={type === "mainPicture" ? { ...itemConfig, isFallback: true, preview: false } : itemConfig} />;
         const title = itemConfig.title;
         return { element, value, title };
     }

package/src/aldehyde/lowcode-components/bar-chart/index.tsx

@@ -1,6 +1,7 @@
 import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
 import _ from 'lodash';
+import { Spin } from "antd";
 import HydrocarbonService from "../../tmpl/hcservice-v3";
 import { DataConfigProps } from "../data";
 
@@ -79,7 +80,7 @@ export interface ComponentStyle {
 
 export interface ComponentProps {
     style?: ComponentStyle;
-    base: { width: number, height: number },
+    base: { width: number, height: number };
     data?: DataConfigProps;
     isDesignMode?: boolean; // 是否编辑模式
     initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
@@ -99,6 +100,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const [data, setData] = useState<{ name: string, data: any }[]>([]);
     const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
     const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const [loading, setLoading] = useState<boolean>(false);
     const chartRef = useRef<HTMLDivElement>(null);
     const chart = useRef<any>(null);
     const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
@@ -155,7 +157,9 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
 
     // 请求数据
     const getData = async (params?: object) => {
+        setLoading(true);
         const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
+        setLoading(false);
         const { config, value } = data || {};
         const temData = handleData(value);
         setData(temData);
@@ -238,7 +242,13 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }, [size]);
 
-    return <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+    const renderChartDom = () => <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+
+    if (isDesignMode) {
+        return renderChartDom();
+    }
+
+    return <Spin spinning={loading}>{renderChartDom()}</Spin>;
 });
 
 export default Index;

package/src/aldehyde/lowcode-components/base-map/index.tsx

@@ -1,6 +1,7 @@
 import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
 import _ from 'lodash';
+import { Spin } from "antd";
 import ProgramConfig from "../../units";
 import chinaJson from "../assets/china.json";
 import HydrocarbonService from "../../tmpl/hcservice-v3";
@@ -87,7 +88,7 @@ export interface ComponentStyle {
 
 export interface ComponentProps {
     style?: ComponentStyle;
-    base: { width: number, height: number },
+    base: { width: number, height: number };
     data?: DataConfigProps;
     isDesignMode?: boolean; // 是否编辑模式
     initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
@@ -106,6 +107,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const [data, setData] = useState<{ name: string, value: number[] }[]>([]);
     const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
     const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const [loading, setLoading] = useState<boolean>(false);
     const chartRef = useRef<HTMLDivElement>(null);
     const chart = useRef<any>(null);
     const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
@@ -157,7 +159,9 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
 
     // 请求数据
     const getData = async (params?: object) => {
+        setLoading(true);
         const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
+        setLoading(false);
         const { config, value } = data || {};
         setData(handleData(value));
         return config;
@@ -267,7 +271,13 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }, [size]);
 
-    return <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+    const renderChartDom = () => <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+
+    if (isDesignMode) {
+        return renderChartDom();
+    }
+
+    return <Spin spinning={loading}>{renderChartDom()}</Spin>;
 });
 
 export default Index;

package/src/aldehyde/lowcode-components/capsule-bar-chart/index.tsx

@@ -1,6 +1,7 @@
 import * as echarts from 'echarts';
 import React, { useEffect, useRef, useState, ForwardedRef, forwardRef, useImperativeHandle } from 'react';
 import _ from 'lodash';
+import { Spin } from "antd";
 import HydrocarbonService from "../../tmpl/hcservice-v3";
 import { DataConfigProps } from "../data";
 
@@ -97,7 +98,7 @@ export interface ComponentStyle {
 
 export interface ComponentProps {
     style?: ComponentStyle;
-    base: { width: number, height: number },
+    base: { width: number, height: number };
     data?: DataConfigProps;
     isDesignMode?: boolean; // 是否编辑模式
     initSearchParams?: { [key: string]: any }; // 全局初始化外部参数，例：传参包含设备id，则在查询时带上设备id
@@ -117,6 +118,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     const [data, setData] = useState<{ name: string, data: any }[]>([]);
     const [searchParams, setSearchParams] = useState<{ [key: string]: any }>();
     const [initSearchParams, setInitSearchParams] = useState<{ [key: string]: any }>();
+    const [loading, setLoading] = useState<boolean>(false);
     const chartRef = useRef<HTMLDivElement>(null);
     const chart = useRef<any>(null);
     const pollingIntervalRef = useRef<number | NodeJS.Timeout>(null);
@@ -173,7 +175,9 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
 
     // 请求数据
     const getData = async (params?: object) => {
+        setLoading(true);
         const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
+        setLoading(false);
         const { config, value } = data || {};
         const temData = handleData(value);
         setData(temData);
@@ -260,7 +264,13 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
         }
     }, [size]);
 
-    return <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+    const renderChartDom = () => <div ref={chartRef} style={{ width: '100%', height: '100%' }} />;
+
+    if (isDesignMode) {
+        return renderChartDom();
+    }
+
+    return <Spin spinning={loading}>{renderChartDom()}</Spin>;
 });
 
 export default Index;