aldehyde 0.2.236 → 0.2.238

package/src/aldehyde/hooks/use-match-route/index.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+import {useLocation, useMatches, useOutlet, useParams, useSearchParams} from 'react-router-dom';
+
+interface MatchRouteType {
+  // 菜单名称
+  title: string;
+  // tab对应的url
+  pathname: string;
+  // 要渲染的组件
+  children: any;
+  // 路由，和pathname区别是，详情页 pathname是 /:id，routePath是 /1
+  routePath: string;
+  // 图标
+  icon?: string;
+ // searchParmStr:string;
+  //key:string;
+}
+
+export function useMatchRoute(): MatchRouteType | undefined {
+  // 获取路由组件实例
+  const children = useOutlet();
+  // 获取所有路由
+  const matches = useMatches();
+  // 获取当前url
+  const { pathname,search } = useLocation();
+
+  const { sourceId } = useParams();
+
+   // //const lastRoute = matches[matches.length - 1];
+   // const [searchParams, setSearchParams] = useSearchParams();
+   // console.log(searchParams.toString());
+   //  let searchParmStr=searchParams.toString();
+   //  if(searchParmStr){
+   //  searchParmStr="?"+searchParmStr;
+   //  }
+  let urlName=pathname+search;
+  //let urlName=pathname;
+  const [matchRoute, setMatchRoute] = useState<MatchRouteType | undefined>();
+
+  // 监听pathname变了，说明路由有变化，重新匹配，返回新路由信息
+  useEffect(() => {
+    // 获取当前匹配的路由
+    //const lastRoute = matches[matches.length - 1];
+
+   // if (!lastRoute?.handle) return;
+    //let sourceId=lastRoute?.params['sourceId'];
+    let sourceId_=sourceId;
+    if(pathname.indexOf("/home")>0){
+      sourceId_="home";
+    }
+    setMatchRoute({
+      title:sourceId_||'其他',
+      pathname:urlName,
+      children,
+      routePath: pathname,
+      //icon: (lastRoute?.handle as any)?.icon,
+    });
+
+  },[urlName])
+
+
+  return matchRoute;
+}

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

@@ -0,0 +1,130 @@
+import { useMatchRoute } from '../use-match-route';
+// import { router } from '@/router';
+import { useSessionStorageState } from 'ahooks';
+import { omit } from 'lodash-es';
+import React, { useCallback, useEffect, useState } from 'react';
+import {useNavigate} from "react-router-dom";
+
+export interface KeepAliveTab {
+  title: string;
+  routePath: string;
+  key: string;
+  pathname: string;
+  // searchParmStr:string;
+  icon?: string;
+  children: React.ReactNode;
+}
+
+function getKey() {
+  return new Date().getTime().toString();
+}
+
+export function useTabs() {
+  // 存放页面记录
+  const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', {
+    defaultValue: [],
+    serializer: value => {
+      // 把 children 剔除掉，不然会报错
+      return JSON.stringify(value.map(item => omit(item, ['children'])))
+    },
+   });
+  // 当前激活的tab
+  const [activeTabRoutePath, setActiveTabRoutePath] = useState<string>('');
+
+  const matchRoute = useMatchRoute();
+  let navigate = useNavigate();
+  // 关闭tab
+  const closeTab = useCallback(
+    (routePath: string = activeTabRoutePath || '') => {
+      if (!keepAliveTabs?.length) {
+        return;
+      }
+      const index = (keepAliveTabs || []).findIndex(o => o.routePath === routePath);
+      if (keepAliveTabs[index].routePath === activeTabRoutePath && keepAliveTabs.length > 1) {
+        if (index > 0) {
+          navigate(keepAliveTabs[index - 1].pathname);
+        } else {
+          navigate(keepAliveTabs[index + 1].pathname);
+        }
+      }
+      keepAliveTabs.splice(index, 1);
+      setKeepAliveTabs([...keepAliveTabs]);
+    },
+    [activeTabRoutePath],
+  );
+
+  // 关闭除了自己其它tab
+  const closeOtherTab = useCallback((routePath: string = activeTabRoutePath || '') => {
+    if (!keepAliveTabs?.length) {
+      return;
+    }
+    const tab = keepAliveTabs.find(o => o.routePath === routePath);
+    setKeepAliveTabs(keepAliveTabs.filter(o => o.routePath === routePath));
+    //router.navigate(tab?.pathname || routePath);
+  }, [activeTabRoutePath]);
+
+  // 刷新tab
+  const refreshTab = useCallback((routePath: string = activeTabRoutePath || '') => {
+
+    // setKeepAliveTabs(prev => {
+    //   const index = (prev || []).findIndex(tab => tab.pathname === routePath);
+    //
+    //   if (index >= 0 && prev) {
+    //     // 这个是react的特性，key变了，组件会卸载重新渲染
+    //     prev[index].key = getKey();
+    //   }
+    //   return [...prev || []];
+    // });
+  }, [activeTabRoutePath]);
+
+  useEffect(() => {
+    if (!matchRoute) return;
+
+    const existKeepAliveTab = (keepAliveTabs || []).find(o => o.routePath === matchRoute?.routePath);
+
+    // 如果不存在则需要插入
+    if (!existKeepAliveTab) {
+      setKeepAliveTabs([...(keepAliveTabs || []), {
+        title: matchRoute.title,
+        key: getKey(),
+        routePath: matchRoute.routePath,
+        pathname: matchRoute.pathname,
+        children: matchRoute.children,
+        icon: matchRoute.icon
+        // searchParmStr:matchRoute.searchParmStr||""
+      }]);
+    } else if (existKeepAliveTab.pathname !== matchRoute.pathname) {
+      // 如果是同一个路由，但是参数不同，我们只需要刷新当前页签并且把pathname设置为新的pathname， children设置为新的children
+      setKeepAliveTabs(prev => {
+        const index = (prev || []).findIndex(tab => tab.routePath === matchRoute.routePath);
+        if (index >= 0 && prev) {
+          prev[index].key = getKey();
+          prev[index].pathname = matchRoute.pathname;
+          prev[index].children = matchRoute.children;
+          // prev[index].searchParmStr=matchRoute.searchParmStr ||""
+        }
+        return [...(prev || [])];
+      });
+    } else if (!existKeepAliveTab.children) {
+      // 如果pathname相同，但是children为空，说明重缓存中加载的数据，我们只需要刷新当前页签并且把children设置为新的children
+      setKeepAliveTabs(prev => {
+        const index = (prev || []).findIndex(tab => tab.routePath === matchRoute.routePath);
+        if (index >= 0 && prev) {
+          prev[index].key = getKey();
+          prev[index].children = matchRoute.children;
+        }
+        return [...(prev || [])];
+      });
+    }
+    setActiveTabRoutePath(matchRoute.routePath);
+  }, [matchRoute])
+
+  return {
+    tabs: keepAliveTabs,
+    activeTabRoutePath,
+    closeTab,
+    closeOtherTab,
+    refreshTab,
+    setTabs: setKeepAliveTabs,
+  }
+}

package/src/aldehyde/layout/MainPage.tsx

@@ -292,7 +292,7 @@ class MainPage extends React.PureComponent<MainPageProps, MainPageState> {
               <SideBar
                 header={leftHeader}
                 collapsedHeader={leftCollapsedHeader}
-                title={translate("${" + sideBartitle + "}")}
+                title={sideBartitle}
                 logo={sideBarLogo}
                 blockMenu={this.findCurrentBlock()}
                 currentL2MenuId={currentL2MenuId}

package/src/aldehyde/layout/coverstyle.css

@@ -17,7 +17,7 @@
 	font-size: 20px;
 }
 .ant-message{
-	z-index: 1090;
+	z-index: 2090;
 }
 .ant-tabs-bar{
 	z-index: 99;

package/src/aldehyde/layout/sidebar/index.tsx

@@ -20,7 +20,9 @@ const SideBar: React.FC<SideBarProps> = (props) => {
   const { translate } = useLocale();
   const { token } = useToken();
   let syyy = { "--logo-blue-background": token.colorPrimary } as CSSProperties;
-  let { collapsed,header,collapsedHeader } = props;
+  let { collapsed,header,collapsedHeader ,title} = props;
+  let programLabel= title ? title : Units.programName_NavLeft();
+  programLabel=translate("${"+ programLabel +"}");
   return (
     <div>
       <Scrollbars
@@ -67,9 +69,7 @@ const SideBar: React.FC<SideBarProps> = (props) => {
                           ) : (
                               <></>
                           )}
-                          {translate(
-                              props.title ? props.title : Units.programName_NavLeft()
-                          )}
+                          {programLabel}
                         </>
                       </h1>
                     </>

package/src/aldehyde/layout2/components/userButton.tsx

@@ -3,7 +3,7 @@ import {
   CaretDownOutlined,
   ClearOutlined,
   LoginOutlined,
-  LogoutOutlined,
+  LogoutOutlined, MenuFoldOutlined, MenuUnfoldOutlined,
   SettingOutlined,
   UnlockOutlined,
   UserOutlined,
@@ -16,6 +16,8 @@ import { useLocale } from "../../locale/useLocale";
 import { NavLink, useNavigate } from "react-router-dom";
 import ResetPassword from "../../layout/menu/reset-password";
 import HCDataSource from "../../tmpl/hc-data-source";
+import { useSessionStorageState } from 'ahooks';
+import {KeepAliveTab} from "../../hooks/use-tabs";
 
 type DropDownMenuType = {
   label: string | number | ReactNode;
@@ -26,8 +28,10 @@ type DropDownMenuType = {
 
 const UserButton: React.FC<ButtonProps> = (props) => {
   // translate
-  const { translate } = useLocale();
-
+  const { translate,changeSiderCollapsed,getSiderCollapsed } = useLocale();
+  const [keepAliveTabs, setKeepAliveTabs] = useSessionStorageState<KeepAliveTab[]>('keepAliveTabs', {
+    defaultValue: [],
+  });
   // navigation
   const navigate = useNavigate();
 
@@ -65,6 +69,7 @@ const UserButton: React.FC<ButtonProps> = (props) => {
 
   // logout
   const logout = async () => {
+    setKeepAliveTabs([]);
     await HcserviceV3.logout2();
     navigate("/login2");
   };
@@ -123,6 +128,17 @@ const UserButton: React.FC<ButtonProps> = (props) => {
       show: () => {
         return isLogin && userConfig.cleanCachable;
       },
+    },{
+      label: (
+          <span onClick={() => changeSiderCollapsed()}>
+          {getSiderCollapsed()?translate("${显示侧边栏}"):translate("${隐藏侧边栏}")}
+        </span>
+      ),
+      key: "collapseSider",
+      icon: <span>{getSiderCollapsed()? <MenuUnfoldOutlined /> :<MenuFoldOutlined /> }</span>,
+      show: () => {
+        return isLogin ;
+      },
     },
     {
       label: <span onClick={logout}>{translate("${退出}")}</span>,
@@ -132,6 +148,7 @@ const UserButton: React.FC<ButtonProps> = (props) => {
         return isLogin;
       },
     },
+
   ];
   const cleanDropdownMenuList: GetProp<MenuProps, "items"> = dropdownMenuList
     .filter((item) => {

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>