aldehyde 0.2.235 → 0.2.237

package/src/aldehyde/layout2/header.tsx

@@ -1,6 +1,5 @@
 import {
   ConfigProvider,
-  Flex,
   Layout,
   Menu,
   MenuProps,
@@ -23,7 +22,7 @@ import {
 import { useLocale } from "../locale/useLocale";
 import { generate } from "@ant-design/colors";
 import { useLayoutContext } from "./LayoutContext";
-import ThemeColorGetter from "../table/column/theme-color-getter";
+import { useSessionStorageState } from 'ahooks';
 
 type HeaderPropsType = {
   systemName: string;
@@ -33,69 +32,6 @@ type HeaderPropsType = {
 
 type MenuItem = Required<MenuProps>["items"][number];
 
-// const items: MenuItem[] = [
-//   {
-//     label: "Navigation One",
-//     key: "mail",
-//     icon: <img src={png1} alt="1" width={16} height={16}></img>,
-//   },
-//   {
-//     label: "Navigation Two",
-//     key: "app",
-//     disabled: false,
-//     icon: <img src={png2} alt="2" width={16} height={16}></img>,
-//   },
-//   {
-//     label: "Navigation Two",
-//     key: "app2",
-//     disabled: false,
-//     icon: <img src={png3} alt="2" width={16} height={16}></img>,
-//   },
-//   {
-//     label: "Navigation Two",
-//     key: "app3",
-//     disabled: false,
-//     icon: <img src={png4} alt="2" width={16} height={16}></img>,
-//   },
-//   {
-//     label: "Navigation Two",
-//     key: "app4",
-//     disabled: true,
-//     icon: <img src={png5} alt="2" width={16} height={16}></img>,
-//   },
-//   {
-//     label: "Navigation Three - Submenu",
-//     key: "SubMenu",
-//     icon: <img src={png6} alt="2" width={16} height={16}></img>,
-//     children: [
-//       {
-//         type: "group",
-//         label: "Item 1",
-//         children: [
-//           { label: "Option 1", key: "setting:1" },
-//           { label: "Option 2", key: "setting:2" },
-//         ],
-//       },
-//       {
-//         type: "group",
-//         label: "Item 2",
-//         children: [
-//           { label: "Option 3", key: "setting:3" },
-//           { label: "Option 4", key: "setting:4" },
-//         ],
-//       },
-//     ],
-//   },
-//   {
-//     key: "alipay",
-//     label: (
-//       <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
-//         Navigation Four - Link
-//       </a>
-//     ),
-//     icon: <img src={png6} alt="2" width={16} height={16}></img>,
-//   },
-// ];
 
 const { useToken } = theme;
 
@@ -210,7 +146,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, style }) => {
       setDocumentTitle(translate("${" + documentTitle + "}"));
     }
   }, [menuList, sourceId]);
-
+  let systemLabel= translate("${"+systemName+"}");
   return (
     <Layout.Header
       style={{
@@ -234,7 +170,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, style }) => {
           userSelect: "none",
           color: "inherit",
         }}
-        to={"/v2"}
+        to={"/v2/home"}
       >
         <img
           src={homePng}
@@ -245,7 +181,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, style }) => {
             marginRight: 5,
           }}
         />
-        <Tooltip title={systemName}>
+        <Tooltip title={systemLabel}>
           <span
             style={{
               width: "100%",
@@ -255,7 +191,7 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList, style }) => {
               whiteSpace: "nowrap",
             }}
           >
-            {systemName}
+            {translate(systemLabel)}
           </span>
         </Tooltip>
       </NavLink>

package/src/aldehyde/layout2/main.tsx

@@ -1,6 +1,7 @@
+import React from "react";
 import { Layout } from "antd";
-import React, { useState } from "react";
-import { Outlet } from "react-router-dom";
+import TabsLayout from "./tabs/tabs-layout";
+
 
 type MainPropsType = {
   style?: typeof Layout.Content.defaultProps.style;
@@ -18,7 +19,7 @@ const Main: React.FC<MainPropsType> = ({ style, children }) => {
           padding: 10,
         }}
       >
-        {children ? children : <Outlet />}
+        {children ? children :<TabsLayout/>}
       </div>
     </Layout.Content>
   );

package/src/aldehyde/layout2/page.tsx

@@ -1,6 +1,5 @@
 import { Layout, theme } from "antd";
 import React, {
-  HTMLAttributeAnchorTarget,
   useEffect,
   useRef,
   useState,
@@ -15,6 +14,8 @@ import { useVarCssColor } from "../hooks/useVarCssColor";
 import { generate } from "@ant-design/colors";
 import { LayoutProvider, useLayoutContext } from "./LayoutContext";
 import DocumentTitle from "react-document-title";
+import Units from '../units';
+import {useLocale} from "../locale/useLocale";
 
 type PagePropsType = {
   children?: React.ReactNode;
@@ -112,13 +113,21 @@ const handleMenuRes = (menuList: MenuConfigAPIType["blocks"]): MenuType[] => {
   return retList;
 };
 
+
+
 const getMenuConfig = async (): Promise<{
   systemName: string;
   menu: MenuType[];
 }> => {
+
   const res = await HcserviceV3.requestBlocks("", "");
 
   const menuList: MenuType[] = handleMenuRes(res.blocks);
+  let tmp={};
+  menuList.forEach((menu: MenuType) => {
+    getMenuMap(menu,tmp);
+  })
+  Units.setMenuMap(tmp);
 
   return {
     menu: menuList,
@@ -126,6 +135,16 @@ const getMenuConfig = async (): Promise<{
   };
 };
 
+const getMenuMap=(menu:MenuType,menuMap:object={})=>{
+  if(menu){
+    menuMap[menu.id]=menu.label;
+    // eslint-disable-next-line no-unused-expressions
+    menu.children?.forEach((m: MenuType) => {
+      getMenuMap(m,menuMap);
+    })
+  }
+}
+
 const { useToken } = theme;
 
 const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
@@ -133,6 +152,7 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
     documentTitle,
     updateMenuItemIdToFirstFloorIdxMap,
   } = useLayoutContext();
+  const { getSiderCollapsed } = useLocale();
   const {
     token: { colorPrimary },
   } = useToken();
@@ -145,6 +165,8 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
 
   const [menu, SetMenu] = useState<MenuType[]>([]);
 
+
+
   useEffect(() => {
     getMenuConfig().then(({ menu, systemName: name }) => {
       setSystemName(name);
@@ -170,9 +192,9 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
         }}
       >
         <Layout style={{ height: "100%" }}>
-          <Header systemName={systemName} menuList={menu}></Header>
+          <Header systemName={systemName?systemName:Units.programName_NavLeft()} menuList={menu}></Header>
           <Layout>
-            <Sider menuList={menu}></Sider>
+            <Sider menuList={menu} collapsed={getSiderCollapsed()}></Sider>
             <Main>{props.children}</Main>
           </Layout>
         </Layout>

package/src/aldehyde/layout2/sider.tsx

@@ -1,5 +1,6 @@
 import { ConfigProvider, Layout, Menu, MenuProps, theme, Tooltip } from "antd";
 import React, { useEffect, useRef, useState } from "react";
+
 import { MenuType } from "./type/layout.type";
 import { NavLink, useParams, useSearchParams } from "react-router-dom";
 import {
@@ -10,146 +11,19 @@ import {
 import { useLocale } from "../locale/useLocale";
 import { generate } from "@ant-design/colors";
 import {
-  MenuItemIdToFirstFloorIdxMapType,
   useLayoutContext,
 } from "./LayoutContext";
 
 type SiderPropsType = {
   menuList: MenuType[];
-  style?: typeof Layout.Sider.defaultProps.style;
+ // style?: typeof Layout.Sider.defaultProps.style;
+  collapsed:boolean;
 };
 
 type MenuItem = Required<MenuProps>["items"][number];
 
 type SecoundFloorMenuList = MenuType[][];
 
-const items: MenuItem[] = [
-  {
-    label: "Navigation One",
-    key: "mail",
-  },
-  {
-    label: "Navigation Two",
-    key: "app",
-    disabled: false,
-  },
-  {
-    label: "Navigation Two",
-    key: "app2",
-    disabled: false,
-  },
-  {
-    label: "Navigation Two",
-    key: "app3",
-    disabled: false,
-  },
-  {
-    label: "Navigation Two",
-    key: "app4",
-    disabled: true,
-  },
-  {
-    label: "Navigation Two",
-    key: "app5",
-    disabled: true,
-  },
-  {
-    label: "Navigation Two",
-    key: "app6",
-    disabled: true,
-  },
-  {
-    label: "Navigation Two",
-    key: "app7",
-    disabled: true,
-  },
-  {
-    label: "Navigation Two",
-    key: "app8",
-    disabled: true,
-  },
-  {
-    label: "Navigation Two",
-    key: "app9",
-    disabled: true,
-  },
-  {
-    label: "Navigation Two",
-    key: "app10",
-    disabled: true,
-  },
-  {
-    label: "Navigation Two",
-    key: "app11",
-    disabled: true,
-  },
-  {
-    label: "Navigation Two",
-    key: "app12",
-    disabled: false,
-  },
-  {
-    label: "Navigation Two",
-    key: "app13",
-    disabled: false,
-  },
-  {
-    label: "Navigation Two",
-    key: "app14",
-    disabled: false,
-  },
-  {
-    label: "Navigation Two",
-    key: "app15",
-    disabled: false,
-  },
-  {
-    label: "Navigation Two",
-    key: "app16",
-    disabled: false,
-  },
-  {
-    label: "Navigation Two",
-    key: "app17",
-    disabled: false,
-  },
-  {
-    label: "Navigation Two",
-    key: "app18",
-    disabled: false,
-  },
-  {
-    label: "Navigation Three - Submenu",
-    key: "SubMenu",
-    children: [
-      {
-        type: "group",
-        label: "Item 1",
-        children: [
-          { label: "Option 1", key: "setting:1" },
-          { label: "Option 2", key: "setting:2" },
-        ],
-      },
-      {
-        type: "group",
-        label: "Item 2",
-        children: [
-          { label: "Option 3", key: "setting:3" },
-          { label: "Option 4", key: "setting:4" },
-        ],
-      },
-    ],
-  },
-  {
-    key: "alipay",
-    label: (
-      <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
-        Navigation Four - Link
-      </a>
-    ),
-  },
-];
-
 /**
  * @param menuList 自定义的menu
  * @returns 下标为 n 对应第 n 个根节点对应的第二层级menu
@@ -178,7 +52,7 @@ const getSecoundFloorMenuList = (
 
 const { useToken } = theme;
 
-const Sider: React.FC<SiderPropsType> = ({ menuList, style }) => {
+const Sider: React.FC<SiderPropsType> = ({ menuList,collapsed }) => {
   const { setDocumentTitle, menuItemIdToFirstFloorIdxMap } = useLayoutContext();
 
   // token
@@ -286,15 +160,13 @@ const Sider: React.FC<SiderPropsType> = ({ menuList, style }) => {
   const menuClick = (openKeys) => {
     setSelectedKeys([...openKeys]);
   };
-
   return (
-    <Layout.Sider
+    <Layout.Sider  collapsed={collapsed}  collapsedWidth={0}
       style={{
         background: colors[0],
         // color: "#FFFFFF",
         borderInlineEnd: "1px solid rgba(5, 5, 5, 0.06)",
         overflowY: "auto",
-        ...style,
       }}
     >
       <ConfigProvider

package/src/aldehyde/layout2/tabs/tabs-context.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+
+import { createContext } from 'react';
+
+interface KeepAliveTabContextType {
+  /**
+   * 刷新tab
+   * @param path tab path 可以为空，为空则刷新当前tab
+   */
+  refreshTab: (path?: string) => void;
+  /**
+   * 关闭tab
+   * @param path tab path 可以为空，为空则关闭当前tab
+   */
+  closeTab: (path?: string) => void;
+  /**
+   * 关闭其他tab
+   * @param path tab path 可以为空，为空则关闭其他tab
+   */
+  closeOtherTab: (path?: string) => void;
+}
+
+const defaultValue = {
+  refreshTab: () => { },
+  closeTab: () => { },
+  closeOtherTab: () => { },
+}
+
+
+export const KeepAliveTabContext = createContext<KeepAliveTabContextType>(defaultValue);

package/src/aldehyde/layout2/tabs/tabs-layout.tsx

@@ -0,0 +1,152 @@
+import React, { useCallback, useMemo } from "react";
+import {Dropdown, Tabs} from 'antd';
+import { MenuItemType } from 'antd/es/menu/interface';
+import { KeepAliveTabContext } from './tabs-context';
+import {KeepAliveTab, useTabs} from "../../hooks/use-tabs";
+import antdIcons from '@ant-design/icons';
+import { useNavigate} from 'react-router-dom';
+import Units from '../../units';
+import {useLocale} from "../../locale/useLocale";
+// import {arrayMove} from "react-sortable-hoc";
+
+
+const TabsLayout: React.FC = (props) => {
+
+  const { translate } = useLocale();
+  const {
+    activeTabRoutePath,
+    tabs = [],
+    closeTab,
+    refreshTab,
+    closeOtherTab,
+    setTabs,
+  } = useTabs();
+
+  const getIcon = (icon?: string): React.ReactElement | undefined => {
+    return icon && antdIcons[icon] && React.createElement(antdIcons[icon]);
+  }
+
+  const menuItems: MenuItemType[] = useMemo(
+    () => [
+      tabs.length <= 1 ? null : {
+        label: translate("${关闭}"),
+        key: "close",
+      },
+      tabs.length <= 1 ? null : {
+        label: translate("${关闭其他}"),
+        key:"other",
+      },
+    ].filter(o => o !== null) ,
+    [tabs]);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const menuClick = useCallback(({ key, domEvent }: any, tab: KeepAliveTab) => {
+    domEvent.stopPropagation();
+
+    if (key === 'refresh') {
+      refreshTab(tab.routePath);
+    } else if (key ==="close") {
+      closeTab(tab.routePath);
+    } else if (key === "other") {
+      closeOtherTab(tab.routePath);
+    }
+  }, [closeOtherTab, closeTab, refreshTab]);
+
+  const renderTabTitle = useCallback((tab: KeepAliveTab) => {
+    let label=Units.mapMenu(tab.title)?Units.mapMenu(tab.title):tab.title;
+    label=translate("${"+label+"}");
+    return (
+      <Dropdown
+        menu={{
+          items: menuItems,
+          onClick: (e) => menuClick(e, tab),
+        }}
+        trigger={['contextMenu']}
+        onOpenChange={open => {
+          if (open) {
+           navigate(tab.pathname);
+          }
+        }}
+      >
+        <div className='flex gap-[6px]' style={{ margin: '-12px 0', padding: '12px 0' }}>
+          {getIcon(tab.icon)}
+          {label}
+        </div>
+      </Dropdown>
+    )
+  }, [menuItems]);
+
+  const tabItems = useMemo(() => {
+    return tabs.map(tab => {
+      return {
+        key: tab.routePath,
+        label: renderTabTitle(tab),
+        children: (
+          <div
+            key={tab.key}
+            className='overflow-y-auto'
+            // style={{
+            //   height: `calc(100vh - ${defaultSetting.headerHeight + 36}px)`,
+            // }}
+          >
+            {/*<Watermark type='content'>*/}
+              {tab.children}
+            {/*</Watermark>*/}
+          </div>
+        ),
+        closable: tabs.length > 1, // 剩最后一个就不能删除了
+      }
+    })
+  },[tabs]);
+  //let tabItems=tabItemsf();
+
+  let navigate = useNavigate();
+
+  const onTabsChange =useCallback( (tabKey: string) => {
+    tabs.forEach(tab=>{
+      if(tab.routePath == tabKey){
+        navigate(tab.pathname);
+      }
+    })
+  },[tabs]);
+
+  const onTabEdit = (
+    targetKey:  string,
+    action: 'add' | 'remove',
+  ) => {
+    if (action === 'remove') {
+      closeTab(targetKey);
+    }
+  };
+
+  const keepAliveContextValue = useMemo(
+    () => ({
+      closeTab,
+      closeOtherTab,
+      refreshTab,
+    }),
+    [closeTab, closeOtherTab, refreshTab]
+  );
+
+  return (
+    <KeepAliveTabContext.Provider value={keepAliveContextValue}>
+      <Tabs
+          tabBarStyle={{marginBottom:'4px'}}
+        activeKey={activeTabRoutePath}
+        items={tabItems}
+        type="editable-card"
+        onChange={onTabsChange}
+        hideAdd
+        onEdit={(e,a)=>{onTabEdit(e.toString(),a)}}
+        size="small"
+        // onDragEnd={({ activeIndex, overIndex }) => {
+        //   setTabs(
+        //     arrayMove(tabs, activeIndex, overIndex)
+        //   );
+        // }}
+      />
+    </KeepAliveTabContext.Provider>
+  )
+}
+
+export default TabsLayout;

package/src/aldehyde/locale/LocaleProvider.tsx

@@ -1,7 +1,7 @@
 
 import React, { ReactNode, createContext, useEffect, useState } from "react";
 import { useNavigatorLanguage } from "./useLocale";
-import { antdLangMp, getLangWithLangApiMp, getLangWithLangMp } from "./langMp";
+import {getLangWithLangApiMp, getLangWithLangMp } from "./langMp";
 import { LocaleType } from "./langMp";
 import HcserviceV3 from "../tmpl/hcservice-v3";
 
@@ -10,6 +10,8 @@ export const LocaleContext = createContext<{
   langPkg: any;
   availableLang: string[];
   changeLocale: (locale: LocaleType) => void;
+  siderCollapsed:boolean;
+  changeSiderCollapsed:()=>void;
   t: (...strs: string[]) => string;
   translate: (...strs: string[]) => string;
   getServiceLangStr?: ()=>string;
@@ -18,6 +20,8 @@ export const LocaleContext = createContext<{
   availableLang: [],
   langPkg: {},
   changeLocale: () => {},
+  siderCollapsed:false,
+  changeSiderCollapsed:()=>{},
   t: (...str) => str.join(""),
   translate: (str) => {
     let res = [],
@@ -76,6 +80,9 @@ export const LocaleProvider = ({
   const [locale, setLocale] = useState<LocaleType>(
     localeStorageLang ? localeStorageLang : getLangWithLangMp(navigatorLanguage)
   );
+
+  const [siderCollapsed, setSiderCollapsed] = useState<boolean>(false);
+
   const [langPkg, setLangPkg] = useState(
     localeStorageLangPkg ? localeStorageLangPkg : {}
   );
@@ -85,6 +92,10 @@ export const LocaleProvider = ({
     setLocale(locale);
   };
 
+  const changeSiderCollapsed =  () => {
+    setSiderCollapsed(!siderCollapsed);
+  };
+
   const getServiceLangStr =  () => {
     const langStr = getLangWithLangApiMp(locale);
     return langStr;
@@ -196,7 +207,7 @@ export const LocaleProvider = ({
 
   return (
     <LocaleContext.Provider
-      value={{ locale, availableLang, langPkg, changeLocale, t, translate ,getServiceLangStr}}
+      value={{ locale, availableLang, langPkg, changeLocale,siderCollapsed,changeSiderCollapsed, t, translate ,getServiceLangStr}}
     >
       {children}
     </LocaleContext.Provider>

package/src/aldehyde/locale/useLocale.ts

@@ -35,8 +35,9 @@ export const useNavigatorLanguage = (): Readonly<NavigatorLanguageState> => {
 export const useLocale = () => {
   const {
     locale,
-    langPkg,
     changeLocale,
+    siderCollapsed,
+    changeSiderCollapsed,
     t,
     translate,
     availableLang,
@@ -50,8 +51,15 @@ export const useLocale = () => {
     setLocale: (loacle: LocaleType) => {
       changeLocale(loacle);
     },
+    getSiderCollapsed: () => {
+      return siderCollapsed;
+    },
+    changeSiderCollapsed: () => {
+      changeSiderCollapsed();
+    },
     t,
     translate,
-    availableLang,getServiceLangStr
+    availableLang,getServiceLangStr,
+
   };
 };

package/src/aldehyde/login2/login-page.tsx

@@ -66,7 +66,7 @@ const LoginPage = (props:LoginPageProps) => {
         <Login
           onFinish={(token) => {
             HCDataSource.clear();
-            window.location.hash = "/v2";
+            window.location.hash = "/v2/home";
               ProgramConfig.setHydrocarbonToken(token);
           }}
         ></Login>

package/src/aldehyde/module/dtmpl-edit-card.tsx

@@ -66,7 +66,6 @@ export default class DtmplEditCard extends React.PureComponent<
         await this.loadConfigData();
       } else if(prevProps.sourceId != this.props.sourceId || queryingCode!=code || !dtmplData ){
         //防止反复请求 code
-        debugger
         if(code){
           await this.loadCodeData(dtmplConfig,code);
         }else{