aldehyde 0.2.445 → 0.2.446

package/src/aldehyde/layout4/components/tabs-layout.tsx

@@ -21,7 +21,7 @@ interface Props {
 
 const TabsLayout = (props: Props) => {
   const { menuList } = props;
-  const { translate } = useLocale();
+  const { translate, getLocale } = useLocale();
   const navigate = useNavigate();
   const { activeTabRoutePath, closeTab, refreshTab, closeOtherTab, tabs = [] } = useContext(KeepAliveTabContext);
 
@@ -62,7 +62,7 @@ const TabsLayout = (props: Props) => {
         </div>
       </Dropdown >
     )
-  }, [menuItems]);
+  }, [menuItems, getLocale()]);
 
   const tabItems = useMemo(() => {
     if (!menuList.length) { // 无菜单不显示
@@ -82,7 +82,7 @@ const TabsLayout = (props: Props) => {
       ),
       closable: tabs.length > 1, // 剩最后一个就不能删除了
     }))
-  }, [tabs, menuList]);
+  }, [tabs, menuList, getLocale()]);
 
   const onTabsChange = useCallback((tabKey: string) => {
     const tab = tabs.find(r => r.routePath === tabKey);

package/src/aldehyde/layout5/header.tsx

@@ -143,7 +143,7 @@ const Header: React.FC<HeaderPropsType> = ({ menuList, themeConfig }) => {
   const breadcrumbItems = useMemo(() => {
     const temData = handleBreadcrumbItems(menuList, []);
     return temData || [{ title: <NavLink to={pathname} target="_self">{translate("${首页}")}</NavLink> }];
-  }, [menuList, pathname]);
+  }, [menuList, pathname, getLocale()]);
 
   const toolbarStyle: CSSProperties = {
     width: "100%",

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

@@ -111,7 +111,7 @@ const Index = (props: Props) => {
                             <Space size="large">
                                 {temData["cardShowCols"].map((col, index) =>
                                     <div className="card-show-item" key={index}>
-                                        <div className="title">{col.title}：</div>
+                                        <div className="title">{translate("${" + col.title + "}")}：</div>
                                         <div className="element">{(col.value || col.value === 0) ? col.element : "-"}</div>
                                     </div>)}
                             </Space> :

package/src/aldehyde/locale/LocaleButton.tsx

@@ -31,7 +31,7 @@ const LocaleButton = (props: Props) => {
 
   items.unshift({
     label: (
-      <span style={getLocale() === "zh" ? { color: token.colorPrimary } : {}}>
+      <span style={(!getLocale() || getLocale() === "zh") ? { color: token.colorPrimary } : {}}>
         中文
       </span>
     ),

package/src/aldehyde/locale/LocaleProvider.tsx

@@ -70,13 +70,19 @@ const getLocaleWithServer = async (lang: string, serverKey?: string) => {
   return {};
 };
 
+interface Props {
+  serverKey?: string | string[];
+  children: ReactNode;
+  languages?: string[];
+  defaultLanguage?: LocaleType
+}
+
 export const LocaleProvider = ({
   serverKey = "",
   children,
-}: {
-  serverKey?: string | string[];
-  children: ReactNode;
-}) => {
+  languages = [],
+  defaultLanguage
+}: Props) => {
   const { navigatorLanguage } = useNavigatorLanguage();
   const localeStorageLang: LocaleType = window.localStorage.getItem(
     "locale"
@@ -85,9 +91,7 @@ export const LocaleProvider = ({
     window.localStorage.getItem("langPkg")
   );
 
-  const [locale, setLocale] = useState<LocaleType>(
-    localeStorageLang ? localeStorageLang : getLangWithLangMp(navigatorLanguage)
-  );
+  const [locale, setLocale] = useState<LocaleType>();
 
   const [siderCollapsed, setSiderCollapsed] = useState<boolean>(false);
 
@@ -140,17 +144,16 @@ export const LocaleProvider = ({
   };
 
   useEffect(() => {
-    if (!Array.isArray(serverKey)) serverKey = [...new Set(["", serverKey])];
-    getAllLocale([...new Set(["", ...serverKey])]);
-    // 获取所有可以配置的语言
-    HcserviceV3.getAllLang().then((res) => {
-      if (res.status === "success") {
-        setAvailableLang(
-          res.languages ? res.languages.map((i) => getLangWithLangMp(i)) : []
-        );
-      }
-    });
-  }, [locale]);
+    // 使用主题中配置支持语言(主题未配置，则默认返回的后端配置的语言)
+    if (languages?.length && locale) {
+      if (!Array.isArray(serverKey)) serverKey = [...new Set(["", serverKey])];
+      getAllLocale([...new Set(["", ...serverKey])]);
+      setAvailableLang(languages?.length ? languages?.filter(r => r !== "zh").map((i) => getLangWithLangMp(i)) : []);
+    } else if (!locale && languages?.length) {
+      // 默认使用缓存-主题配置默认-系统
+      setLocale(localeStorageLang || defaultLanguage || getLangWithLangMp(navigatorLanguage));
+    }
+  }, [locale, languages]);
 
   useEffect(() => {
     window.localStorage.setItem("langPkg", JSON.stringify(langPkg));

package/src/aldehyde/locale/langMp.ts

@@ -4,7 +4,7 @@ import enUS from "antd/locale/en_US";
 import ptPT from 'antd/locale/pt_PT';
 import ruRU from 'antd/locale/ru_RU';
 
-export type LocaleType = "zh" | "en" | "fr" | "pt" | "ru";
+export type LocaleType = "zh" | "en" | "fr" | "pt" | "ru" | string;
 
 export const langMp = {
   fr: ["fra", "fr-FR"],

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

@@ -50,8 +50,8 @@ const legends = {
     rightBottom: { right: 5, bottom: 0 },
 };
 
-// 处理数据格式
-const handleData = (data: { config: { [key: string]: string }, value: { [key: string]: any }[] }[]) => {
+// 处理数据格式 nullSetZero(是否空值置0)
+const handleData = (data: { config: { [key: string]: string }, value: { [key: string]: any }[] }[], nullSetZero?: boolean) => {
     if (!data?.length) {
         return [];
     }
@@ -63,10 +63,10 @@ const handleData = (data: { config: { [key: string]: string }, value: { [key: st
             name: config.d1,
             data: vNames.map((r) => ({
                 name: config[r],
-                data: value.map((v) => [v["d1"], v[r]]),
+                data: value.map((v) => [v["d1"], nullSetZero ? (v[r] || 0) : v[r]]),
             }))
         } : {
-            data: value.map((r, index) => ({ name: `数值${index || ""}`, data: vNames.map(v => [config[v], r[v]]) }))
+            data: value.map((r, index) => ({ name: `数值${index || ""}`, data: vNames.map(v => [config[v], nullSetZero ? (r[v] || 0) : r[v]]) }))
         };
     });
     return temData[0]?.data || [];
@@ -90,6 +90,8 @@ export interface ComponentStyle {
     renderer?: "canvas" | "svg";
     barMaxWidth?: number; //柱状图最大宽度
     dataZoom?: boolean;
+    connectNulls?: boolean; // 是否连接空值
+    nullSetZero?: boolean; // 空值是否置0
 }
 
 export interface ComponentProps {
@@ -129,11 +131,12 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     // 全局初始化请求数据处理
     const handleInitData = (val: DataConfigProps) => {
         if (val.sourceType === "sourceId" && val.isInit && val.initData) {
-            const { config, value } = val.initData;
-            const temData = handleData(value);
+            const { config: dataConfig, value } = val.initData;
+            const { nullSetZero } = config || {};
+            const temData = handleData(value, nullSetZero);
             setData(temData);
-            if (config?.requestMode === "polling") {
-                pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
+            if (dataConfig?.requestMode === "polling") {
+                pollingIntervalRef.current = setInterval(() => { getData() }, dataConfig?.pollingInterval || 60000);
             }
         }
     }
@@ -171,13 +174,13 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
 
     // 请求数据
     const getData = async (params?: object) => {
+        const { nullSetZero } = config || {};
         setLoading(true);
         const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
         setLoading(false);
-        const { config, value } = data || {};
-        const temData = handleData(value);
+        const temData = handleData(data?.value, nullSetZero);
         setData(temData);
-        return config;
+        return data?.config;
     };
 
     // 初始化请求数据
@@ -225,7 +228,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     }, [searchParams, initSearchParams]);
 
     const renderChart = () => {
-        const { grid, legend, tooltip, color, xAxis, yAxis, smooth, lineStyle, step, isArea, isGradient, areaStyle, barMaxWidth, symbol, dataZoom } = config;
+        const { grid, legend, tooltip, color, xAxis, yAxis, smooth, lineStyle, step, isArea, isGradient, areaStyle, barMaxWidth, symbol, dataZoom, connectNulls } = config;
         const option = _.cloneDeep(defOption);
         // 编辑态无数据显示默认数据
         const temData = isDesignMode && !data?.length ? option.series : data;
@@ -250,7 +253,8 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
                     { offset: 0, color: color[index] },
                     { offset: 1, color: 'rgba(0, 0, 0, 0)' }
                 ]) : color[index]
-            } : undefined
+            } : undefined,
+            connectNulls
         } : {
             type: "bar",
             ...r,

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

@@ -45,8 +45,8 @@ const legends = {
     rightBottom: { right: 5, bottom: 0 },
 };
 
-// 处理数据格式
-const handleData = (data: { config: { [key: string]: string }, value: { [key: string]: any }[] }[]) => {
+// 处理数据格式 nullSetZero(是否空值置0)
+const handleData = (data: { config: { [key: string]: string }, value: { [key: string]: any }[] }[], nullSetZero?: boolean) => {
     if (!data?.length) {
         return [];
     }
@@ -59,10 +59,10 @@ const handleData = (data: { config: { [key: string]: string }, value: { [key: st
             name: config.d1,
             data: vNames.map((r) => ({
                 name: config[r],
-                data: value.map((v) => [v["d1"], v[r]]),
+                data: value.map((v) => [v["d1"], nullSetZero ? (v[r] || 0) : v[r]]),
             }))
         } : {
-            data: value.map((r, index) => ({ name: `数值${index || ""}`, data: vNames.map(v => [config[v], r[v]]) }))
+            data: value.map((r, index) => ({ name: `数值${index || ""}`, data: vNames.map(v => [config[v], nullSetZero ? (r[v] || 0) : r[v]]) }))
         };
     });
     return temData[0]?.data || [];
@@ -85,6 +85,8 @@ export interface ComponentStyle {
     areaStyle?: { opacity: number }; // 面积图样式
     renderer?: "canvas" | "svg";
     dataZoom?: boolean;
+    connectNulls?: boolean; // 是否连接空值
+    nullSetZero?: boolean; // 空值是否置0
 }
 
 export interface ComponentProps {
@@ -124,11 +126,12 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     // 全局初始化请求数据处理
     const handleInitData = (val: DataConfigProps) => {
         if (val.sourceType === "sourceId" && val.isInit && val.initData) {
-            const { config, value } = val.initData;
-            const temData = handleData(value);
+            const { config: dataConfig, value } = val.initData;
+            const { nullSetZero } = config || {};
+            const temData = handleData(value, nullSetZero);
             setData(temData);
-            if (config?.requestMode === "polling") {
-                pollingIntervalRef.current = setInterval(() => { getData() }, config?.pollingInterval || 60000);
+            if (dataConfig?.requestMode === "polling") {
+                pollingIntervalRef.current = setInterval(() => { getData() }, dataConfig?.pollingInterval || 60000);
             }
         }
     }
@@ -166,13 +169,13 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
 
     // 请求数据
     const getData = async (params?: object) => {
+        const { nullSetZero } = config || {};
         setLoading(true);
         const { data } = await HydrocarbonService.requestChartData(null, dataConfig?.sourceId, params) || {};
         setLoading(false);
-        const { config, value } = data || {};
-        const temData = handleData(value);
+        const temData = handleData(data?.value, nullSetZero);
         setData(temData);
-        return config;
+        return data?.config;
     };
 
     // 初始化请求数据
@@ -220,7 +223,7 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
     }, [searchParams, initSearchParams]);
 
     const renderChart = () => {
-        const { grid, legend, tooltip, color, xAxis, yAxis, smooth, lineStyle, step, isArea, isGradient, areaStyle, dataZoom, symbol: { itemStyle, ...symbol } } = config;
+        const { grid, legend, tooltip, color, xAxis, yAxis, smooth, connectNulls, lineStyle, step, isArea, isGradient, areaStyle, dataZoom, symbol: { itemStyle, ...symbol } } = config;
         const option = _.cloneDeep(defOption);
         // 编辑态无数据显示默认数据
         const temData = isDesignMode && !data?.length ? option.series : data;
@@ -244,7 +247,8 @@ const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>
                     { offset: 0, color: color[index] || color[0] },
                     { offset: 1, color: 'rgba(0, 0, 0, 0)' }
                 ]) : color[index]
-            } : undefined
+            } : undefined,
+            connectNulls
         }));
         chart.current.setOption(option, true);
     };

package/src/aldehyde/module/ttmpl-tree.tsx

@@ -0,0 +1,48 @@
+import React, { useState, useEffect } from "react";
+import { RouterCompProps, TtmplConfig } from "../tmpl/interface";
+import HCDataSource from "../tmpl/hc-data-source";
+import ActTree from "../tree/act-tree";
+import { Card, message } from "antd";
+
+export interface TtmplTreeProps extends RouterCompProps {
+  treeTop?: number;
+  sourceId: string;
+}
+
+const TtmplTree: React.FC<TtmplTreeProps> = (props) => {
+  const { treeTop, sourceId } = props;
+  const [ttmplConfig, setTtmplConfig] = useState<TtmplConfig>();
+
+  const loadData = async () => {
+    try {
+      let config: TtmplConfig = await HCDataSource.requestTtmplConfig(null, sourceId);
+      if (config.type === "1M") {
+        message.error("不支持的配置树。请联系管理员！");
+      } else {
+        setTtmplConfig({ ...config });
+      }
+    } catch (error) {
+      console.error("Failed to load ttmpl config", error);
+    }
+  };
+
+  useEffect(() => {
+    if (sourceId) {
+      loadData();
+    }
+  }, [sourceId]);
+
+  if (!ttmplConfig) {
+    return <Card loading={true} />;
+  }
+
+  return (
+    <ActTree
+      key={ttmplConfig?.id}
+      top={treeTop}
+      ttmplConfig={ttmplConfig}
+    />
+  );
+};
+
+export default TtmplTree;

package/src/aldehyde/table/page-config-button.tsx

@@ -180,7 +180,7 @@ const Index = (props: Props) => {
         <Form.Item style={{ margin: 0, textAlign: "right" }}><Button type="primary" htmlType="submit">{translate("${提交}")}</Button></Form.Item>
     </Form>;
 
-    return <Dropdown trigger={["click"]} menu={{ items: [renderMenuItem({ key: "default", name: "默认" }), ...menus.map(r => renderMenuItem({ ...r, key: r.recordCode }))].filter(Boolean) }} popupRender={(menu) => (
+    return <Dropdown trigger={["click"]} menu={{ items: [renderMenuItem({ key: "default", name: translate("${默认}") }), ...menus.map(r => renderMenuItem({ ...r, key: r.recordCode }))].filter(Boolean) }} popupRender={(menu) => (
         <div style={contentStyle} ref={menuRef}>
             {React.cloneElement(menu as any, { style: { boxShadow: 'none' } },)}
             <Divider style={{ margin: 0 }} />

package/src/aldehyde/tmpl/interface.tsx

@@ -888,4 +888,6 @@ export interface ThemeConfig {
   styleTheme?: string;
   themeColor?: string;
   homeSourceId?: string; // 首页菜单
+  supportedLanguages?: string[]; // 支持语言
+  defaultLanguage?: string; // 默认语言
 }

package/src/aldehyde/welcome/components/menu-card.tsx

@@ -5,6 +5,7 @@ import { useNavigate } from "react-router-dom";
 import "antd/dist/reset.css";
 import { MenuType } from "../../layout2/type/layout-type";
 import IconFont from "../../icon/aliIcon";
+import { useLocale } from "../../locale/useLocale";
 import "./menu-card.less";
 
 const { useToken } = theme;
@@ -18,6 +19,7 @@ const Index = (props: Props) => {
     const navigate = useNavigate();
     const [menu, setMenu] = useState<MenuType[]>([]);
     const { token } = useToken();
+    const { translate } = useLocale();
 
     useEffect(() => {
         if (menus?.length) {
@@ -29,14 +31,14 @@ const Index = (props: Props) => {
         const renderIcon = item.icon ? <IconFont type={item.icon} /> : <RocketTwoTone />;
         const iconColor = item.themeColor || token.colorPrimary;
         const children = item.children?.filter(r => !r.disabled).slice(0, 3) || [];
-        const funcDescription = item.funcDescription || `${children.map(r => r.label).join("、")}等功能`;
+        const funcDescription = item.funcDescription ? translate("${" + item.funcDescription + "}") : `${children.map(r => translate("${" + r.label + "}")).join("、")}${translate("${等功能}")}`;
         return <div className="item-card" style={{ borderColor: `${token.colorBorder}CC`, backgroundColor: token.colorBgContainer }} onClick={() => navigate(`/${item.url}`)}>
             <Space size={16} align="start" style={{ marginBottom: "16px" }}>
                 <div className="icon-wrapper" style={{ color: iconColor, background: `${iconColor}1A` }}>
                     <div className="icon-animated">{renderIcon}</div>
                 </div>
                 <div>
-                    <h3 className="item-title">{item.label}</h3>
+                    <h3 className="item-title">{translate("${" + item.label + "}")}</h3>
                     <p style={{ color: token.colorTextSecondary }}>
                         {funcDescription}
                     </p>
@@ -48,7 +50,7 @@ const Index = (props: Props) => {
                                     navigate(`/${cItem.url}`);
                                 }}
                                 key={cItem.id} className="tag" style={{ color: iconColor, background: `${iconColor}1A` }}>
-                                {cItem.label}
+                                {translate("${" + cItem.label + "}")}
                             </span>
                         ))}
                     </Flex>

package/src/aldehyde/welcome/components/page-card.tsx

@@ -82,7 +82,7 @@ const Index = (props: Props) => {
         <div className="heard">
             <div className="title">
                 <div className="line" style={{ background: token.colorPrimary }} />
-                <h3 className="text">{l2Menu?.title || "-"}</h3>
+                <h3 className="text">{translate("${" + (l2Menu?.title || "-") + "}")}</h3>
             </div>
             <div style={{ color: token.colorPrimary, cursor: "pointer" }} onClick={() => l2Menu?.url && navigate(`/${l2Menu.url}`)}>
                 {translate("${查看更多}")} <RightOutlined />

package/src/aldehyde/welcome/components/quick-entrance.tsx

@@ -60,7 +60,7 @@ const Index = (props: Props) => {
       <div className={`icon-wrapper`} style={{ color: iconColor, background: ` ${iconColor}1A` }}>
         <div className="icon-animated">{renderIcon}</div>
       </div>
-      <span className="menu-title">{item.title}</span>
+      <span className="menu-title">{translate("${" + item.title + "}")}</span>
     </div>;
   }
 

package/src/aldehyde/welcome/components/user-menus.tsx

@@ -67,7 +67,7 @@ const RenderDrawer = (props: DrawerProps) => {
 
   const handleTreeData = (arr: MenuType[]) => {
     return arr.map(item => {
-      const newItem = { ...item, key: item.id };
+      const newItem = { ...item, key: item.id, title: translate("${" + item.title + "}") };
       if (newItem.children && Array.isArray(newItem.children)) {
         newItem.children = handleTreeData(newItem.children);
       }
@@ -185,7 +185,7 @@ const Index = (props: Props) => {
       <div className={`icon-wrapper`} style={{ color: iconColor, background: ` ${iconColor}1A` }}>
         <div className="icon-animated">{renderIcon}</div>
       </div>
-      <span className="menu-title">{item.title}</span>
+      <span className="menu-title">{translate("${" + item.title + "}")}</span>
     </div>;
   };
 
@@ -219,7 +219,7 @@ const Index = (props: Props) => {
           <div className="icon-animated">{renderIcon}</div>
         </div>
         <div>
-          <h3 className="item-title" onClick={() => navigate(`/${item.url}`)}>{item.title}</h3>
+          <h3 className="item-title" onClick={() => navigate(`/${item.url}`)}>{translate("${" + item.title + "}")}</h3>
           <Flex gap="small" align="center" wrap>
             {children.map((cItem) => (
               <span
@@ -228,7 +228,7 @@ const Index = (props: Props) => {
                   onClickPageConfig({ ...cItem, url: item.url });
                 }}
                 key={cItem.recordCode} className="tag" style={{ color: iconColor, background: `${iconColor}1A` }}>
-                {cItem.name}
+                {translate("${" + cItem.name + "}")}
               </span>
             ))}
           </Flex>

package/src/aldehyde/welcome/components/workbench.tsx

@@ -8,6 +8,7 @@ import HCDataSource from "../../tmpl/hc-data-source";
 import { Level2Menu } from "../../tmpl/interface";
 import IconFont from "../../icon/aliIcon";
 import { handleMenuItemUrl } from "../../layout2/page";
+import { useLocale } from "../../locale/useLocale";
 import "./workbench.less";
 
 const { useToken } = theme;
@@ -29,6 +30,7 @@ const Workbench = (props: WorkbenchProps) => {
   const rowRef = useRef(null);
   const navigate = useNavigate();
   const { token } = useToken();
+  const { translate } = useLocale();
 
   const getL2Menus = async () => {
     let temData: Level2Menu[] = await HCDataSource.fastMenu("QuickPanel");
@@ -102,7 +104,7 @@ const Workbench = (props: WorkbenchProps) => {
           <div className="stat-card" style={{ borderColor: `${token.colorBorder}CC`, backgroundColor: token.colorBgContainer }} onClick={() => navigate(`/${item.url}`)}>
             <div className="bg-gradient" style={{ background: `radial-gradient(circle, ${iconColor}1A 0%, transparent 70%)` }} />
             <div >
-              <p className="card-title">{l2Menu.title}</p>
+              <p className="card-title">{translate("${" + l2Menu.title + "}")}</p>
               <p className="card-count" style={{ color: iconColor }}>{l2Menu.count || 0}</p>
             </div>
             <div className="icon-wrapper" style={{ color: iconColor, background: `${iconColor}1A` }}>