aldehyde 0.2.236 → 0.2.238

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/login2/login.tsx

@@ -5,7 +5,8 @@ import { useLocale } from "../locale/useLocale";
 import { useParams } from "react-router-dom";
 import Units from "../units";
 import {SafetyCertificateOutlined} from "@ant-design/icons";
-
+import { useSessionStorageState } from 'ahooks';
+import {KeepAliveTab} from "../hooks/use-tabs";
 type LoginPropType = {
   onFinish?: (token: string) => void;
   title?: any;
@@ -22,6 +23,9 @@ type FormType = {
 const Login = (props: LoginPropType) => {
   // locale
   const { translate } = useLocale();
+  const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', {
+        defaultValue: [],
+    });
 
   useEffect(() => {
     localStorage.setItem("version", "v2");
@@ -40,6 +44,7 @@ const Login = (props: LoginPropType) => {
     // form
   const [form] = Form.useForm<FormType>();
   const submit = async () => {
+      setKeepAliveTabs([]);
     try {
       const { username, password,kaptchaText } = await form.validateFields();
 

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

@@ -30,17 +30,6 @@ class DtmplViewCard extends React.PureComponent<DtmplViewCardProps, DtmplViewCar
     static defaultProps={editable:true,
         showHeader:true}
 
-    // async componentDidMount() {
-    //     this.loadDtmplConfig();
-    // }
-    //
-    // async componentDidUpdate(prevProps) {
-    //     const { sourceId} = this.props;
-    //     if(!prevProps || prevProps.sourceId!=sourceId){
-    //         this.loadDtmplConfig();
-    //     }
-    // }
-
     goDtmpl=()=>{
         this.setState({
             showDtmplEdit:true,

package/src/aldehyde/module/ltmpl-table.tsx

@@ -31,6 +31,7 @@ export interface LtmplTableProps {
   collapsible?: boolean;
   initCollapse?: boolean;
   readOnly?: boolean;
+  rowOperatable?: boolean;
 }
 
 export interface LtmplTableState {
@@ -72,6 +73,7 @@ class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
     collapsible: false,
     initCollapse: false,
     readOnly: false,
+    rowOperatable:true,
   };
 
   async componentDidMount() {
@@ -237,20 +239,12 @@ class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
       addTmplId,dtmplSourceId,
     } = this.state;
     const {
-      sourceId,
-      mainCode,
-      showView,
-      doSearch,
-      doRAction,
-      funcMode,
-      tip,
-      title,
-      collapsible,
-      initCollapse,
-      doCustomEdit,
-      doCustomCreate,
-      serverKey,
-      readOnly,
+      sourceId, mainCode,
+      showView, doSearch,
+      doRAction, funcMode,
+      tip, title, collapsible,
+      initCollapse, doCustomEdit, doCustomCreate,
+      serverKey,rowOperatable, readOnly,
     } = this.props;
     const { translate } = this.context;
 
@@ -260,24 +254,16 @@ class LtmplTable extends React.PureComponent<LtmplTableProps, LtmplTableState> {
       const { buttons, customEditPagePath } = ltmplConfigRes.ltmplConfig;
       return (
         <>
-          <ActTable
-            readOnly={readOnly}
-            tip={tip}
-            serverKey={serverKey}
-            pageSize={pageSize}
-            pageNo={pageNo}
-            onChangePage={this.onChangePage}
-            collapsible={collapsible}
+          <ActTable operatable={rowOperatable} readOnly={readOnly} tip={tip}
+            serverKey={serverKey} pageSize={pageSize} pageNo={pageNo}
+            onChangePage={this.onChangePage} collapsible={collapsible}
             initCollapse={initCollapse && collapse}
-            title={title}
-            funcMode={funcMode}
-            mainCode={mainCode}
+            title={title} funcMode={funcMode} mainCode={mainCode}
             showView={showView ? showView : this.showView}
             doRAction={doRAction ? doRAction : this.doRAction}
             doSearch={doSearch ? doSearch : this.doSearch}
             doEdit={this.doEdit}
-            doCreate={this.doCreate}
-            sourceId={sourceId}
+            doCreate={this.doCreate} sourceId={sourceId}
             criteriaData={criteriaData}
             customEditable={doCustomEdit ? true : false}
             customCreatable={doCustomCreate ? true : false}