aldehyde 0.2.333 → 0.2.335

package/src/aldehyde/layout3/css/header.css

@@ -1,156 +1,184 @@
-.layout-header{
-    padding: 0;
-    color:#ffffff;
-    position: relative;
-    height: auto;
-    background:#041B3B ;
-    .header-top{
-      background-size: 100% 100%; 
-      background-repeat: no-repeat;
-      background-position: center; 
-      width: 100%;
-      height: 103px;
-      display: flex;
-      justify-content: center;
-      background-color: #041B3B;
-      border: none;
-      .header-title{
-        font-family: YouSheBiaoTiHei;
-        font-size: 48px;
-        line-height: 62px;
-        text-align: justify;
-        font-style: normal;
-        text-transform: none;
-        background-image: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);/* 可以调整方向和颜色 */
-        /* 2. 关键: 将背景裁剪到文字形状 */
-        -webkit-background-clip: text; /* 对于 Webkit 内核浏览器 (如 Safari, 老版Chrome) */
-        background-clip: text; /* 标准属性 */
-        /* 3. 关键: 将文字颜色设置为透明，以显示背景渐变 */
-        -webkit-text-fill-color: transparent; /* 对于 Webkit 内核浏览器 */
-        color: transparent; /* 标准属性，但注意某些环境下可能需 -webkit-text-fill-color 配合 */
-      }
-      .header-time{
-        font-size: 18px;
-        line-height: 24px;
-        letter-spacing: 1px;
-        text-align: left;
-        font-style: normal;
-        text-transform: none;
-        background-image: linear-gradient(180deg, #FFFFFF 36%, #008BFD 100%);
-        -webkit-background-clip: text; 
-        background-clip: text; 
-        -webkit-text-fill-color: transparent; 
-        color: transparent; 
-        position: absolute;
-        top: 46px;
-        left: 33px;
-        font-weight: 500;
-      }
+.layout-header {
+  padding: 0;
+  color: #ffffff;
+  position: relative;
+  height: auto;
+  background: #041B3B;
+
+  .header-top {
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 100%;
+    height: 103px;
+    display: flex;
+    justify-content: center;
+    background-color: #041B3B;
+    border: none;
+
+    .header-title {
+      font-family: YouSheBiaoTiHei;
+      font-size: 48px;
+      line-height: 62px;
+      text-align: justify;
+      font-style: normal;
+      text-transform: none;
+      background-image: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);
+      /* 可以调整方向和颜色 */
+      /* 2. 关键: 将背景裁剪到文字形状 */
+      -webkit-background-clip: text;
+      /* 对于 Webkit 内核浏览器 (如 Safari, 老版Chrome) */
+      background-clip: text;
+      /* 标准属性 */
+      /* 3. 关键: 将文字颜色设置为透明，以显示背景渐变 */
+      -webkit-text-fill-color: transparent;
+      /* 对于 Webkit 内核浏览器 */
+      color: transparent;
+      /* 标准属性，但注意某些环境下可能需 -webkit-text-fill-color 配合 */
     }
-    .header-right{
+
+    .header-time {
+      font-size: 18px;
+      line-height: 24px;
+      letter-spacing: 1px;
+      text-align: left;
+      font-style: normal;
+      text-transform: none;
+      background-image: linear-gradient(180deg, #FFFFFF 36%, #008BFD 100%);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      color: transparent;
       position: absolute;
-      right: 28px;
-      top: 52px;
-      line-height: normal;
-      .message-bar{
-        min-width: 0;
-        svg{
-           color:#009BFF
-        }
-      }
-      .message-bar:hover{
-        background: transparent;
+      top: 46px;
+      left: 33px;
+      font-weight: 500;
+    }
+  }
+
+  .header-right {
+    position: absolute;
+    right: 28px;
+    top: 52px;
+    line-height: normal;
+
+    .message-bar {
+      min-width: 0;
+
+      svg {
+        color: #009BFF
       }
-      .header-user{
-        button .ant-btn-icon{
-          margin-top: 4px;
-        }
+    }
+
+    .message-bar:hover {
+      background: transparent;
+    }
+
+    .header-user {
+      button .ant-btn-icon {
+        margin-top: 4px;
       }
     }
-    .header-nav{
-      margin: 0 0 16px 0;
+  }
+
+  .header-nav {
+    margin: 0 0 16px 0;
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    line-height: normal;
+
+    .header-home-page {
+      width: 220px;
       display: flex;
-      justify-content: start;
       align-items: center;
+      justify-content: flex-start;
+      padding: 4px 0 4px 24px;
+      margin-right: 12px;
+      cursor: pointer;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+
+    .header-menu {
+      width: calc(100% - 220px);
+    }
+
+    .home-page-icon {
+      color: #90DEFF;
+      font-size: 18px;
+    }
+
+    .home-page-title {
+      margin-left: 10px;
+      font-family: YouSheBiaoTiHei;
+      background: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      font-size: 20px;
+    }
+
+    .ant-menu-submenu-selected::after,
+    .ant-menu-submenu:hover::after,
+    .ant-menu-submenu-open::after,
+    .ant-menu-submenu::after {
+      border-bottom: none !important;
+    }
+
+    .menu-disabled {
+      cursor: not-allowed;
+    }
+
+    .menu-item {
+      position: relative;
+      width: 126px;
+      height: 42px;
       line-height: normal;
-      .header-home-page{
-        width: 220px;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        padding: 4px 0 4px 24px;
-        margin-right: 12px;
-        cursor: pointer;
-        background-size: 100% 100%; 
-        background-repeat: no-repeat;
-        background-position: center; 
-      }
-      .home-page-icon{
-        color: #90DEFF;
-        font-size: 18px;
-      }
-      .home-page-title{
-        margin-left: 10px;
-        font-family: YouSheBiaoTiHei;
-        background: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);
-        -webkit-background-clip: text; 
-        background-clip: text; 
-        -webkit-text-fill-color: transparent; 
-        font-size: 20px;
-      }
-      .ant-menu-submenu-selected::after,
-      .ant-menu-submenu:hover::after,
-      .ant-menu-submenu-open::after,
-      .ant-menu-submenu::after{
-        border-bottom: none !important;
-      }
-      .menu-disabled{
-        cursor: not-allowed;
-      } 
-      .menu-item {
-        position: relative;
-        width: 126px;
-        height: 42px;
-        line-height: normal;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: linear-gradient(180deg, rgba(124, 208, 255, 0.3) 0%, rgba(0, 41, 147, 0) 100%), linear-gradient(360deg, rgba(0, 133, 255, 0.5) 0%, rgba(0, 163, 255, 0.15) 22%, rgba(0, 163, 255, 0) 100%), rgba(0, 0, 0, 0.75);
+      border-radius: 120px 120px 120px 120px;
+      border: 1px solid;
+      background-clip: padding-box;
+      color: #009BFF;
+      font-weight: 500;
+      z-index: 1;
+
+      .menu-item-border,
+      .menu-item-border-sel {
         display: flex;
         align-items: center;
         justify-content: center;
-        background: linear-gradient( 180deg, rgba(124,208,255,0.3) 0%, rgba(0,41,147,0) 100%), linear-gradient( 360deg, rgba(0,133,255,0.5) 0%, rgba(0,163,255,0.15) 22%, rgba(0,163,255,0) 100%), rgba(0,0,0,0.75);
+        width: 118px;
+        height: 40px;
         border-radius: 120px 120px 120px 120px;
         border: 1px solid;
         background-clip: padding-box;
-        color: #009BFF;
-        font-weight: 500;
-        z-index: 1;
-        .menu-item-border,.menu-item-border-sel{
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 118px;
-          height: 40px;
-          border-radius: 120px 120px 120px 120px;
-          border: 1px solid;
-          background-clip: padding-box;
-          background: linear-gradient(180deg, #203c51, #02243e); 
-        }
-        .menu-item-border-sel{
-          background: rgba(0,142,255,0.56);
-          box-shadow: inset 0px 0px 20px 5px #000C27;
-          color:#C4E8FF !important;
-          font-weight: 700 !important;
-        }
+        background: linear-gradient(180deg, #203c51, #02243e);
       }
-      .menu-item::before {
-        content: '';
-        position: absolute;
-        top: 0; 
-        left: 0;
-        right: 0;
-        bottom: 0;
-        margin-bottom: -2px;
-        background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0, 102, 255, 0.3), rgba(0, 102, 255, 1), rgba(0, 102, 255, 0.3),rgba(0,0,0,0)); 
-        border-radius: inherit;
-        z-index: -1;
+
+      .menu-item-border-sel {
+        background: rgba(0, 142, 255, 0.56);
+        box-shadow: inset 0px 0px 20px 5px #000C27;
+        color: #C4E8FF !important;
+        font-weight: 700 !important;
       }
     }
+
+    .menu-item::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin-bottom: -2px;
+      background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 102, 255, 0.3), rgba(0, 102, 255, 1), rgba(0, 102, 255, 0.3), rgba(0, 0, 0, 0));
+      border-radius: inherit;
+      z-index: -1;
+    }
+  }
 }

package/src/aldehyde/layout3/css/main.css

@@ -20,9 +20,6 @@
 
   .ant-drawer,
   .ant-modal-content {
-    .ant-drawer-content {
-      border: none !important;
-    }
 
     .ant-card-head {
       background: transparent !important;
@@ -32,6 +29,47 @@
       background: #041B3B !important;
     }
   }
+
+  .ant-menu-overflow-item-rest .ant-menu-submenu-title {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ant-menu-submenu-popup {
+
+    .menu-item-selected {
+      background: transparent !important;
+    }
+
+    .ant-menu-submenu-title a {
+      color: #bec8d6
+    }
+
+    .ant-menu-submenu-selected a {
+      color: var(--ant-primary-color)
+    }
+  }
+
+  .ant-table-tbody,
+  .ant-table-summary {
+    .ant-table-cell:has(.xiaoji) {
+      background-color: var(--color-5) !important;
+    }
+
+    .ant-table-cell:has(.heji) {
+      background-color: var(--color-7) !important;
+    }
+
+    .xiaoji {
+      background-color: var(--color-5) !important;
+    }
+
+    .heji {
+      background-color: var(--color-7) !important;
+    }
+  }
 }
 
 .v3-antd-table {
@@ -45,7 +83,7 @@
   }
 
   .ant-table-tbody .ant-table-cell {
-    background: transparent;
+    background: var(--ant-layout-body-bg) !important;
   }
 }
 
@@ -54,4 +92,36 @@
   .ant-table-css-var {
     --ant-table-border-color: #05449a;
   }
+}
+
+.v3-antd-modal {
+  .ant-modal-content {
+    background: var(--ant-color-bg-base) !important;
+    border: 1px solid var(--ant-color-border-secondary) !important;
+  }
+
+  .ant-modal-header {
+    background: transparent;
+  }
+}
+
+.v3-antd-drawer {
+  background: var(--ant-color-bg-base) !important;
+  border: 2px solid var(--ant-color-border-secondary) !important;
+}
+
+.v3-antd-card {
+  background: transparent;
+
+  .ant-card-head {
+    background: var(--ant-color-bg-container) !important;
+  }
+
+  .ant-card-body {
+    background: transparent;
+  }
+}
+
+.v3-antd-card:hover {
+  border-color: var(--ant-color-border-secondary);
 }

package/src/aldehyde/layout3/css/sider.css

@@ -1,10 +1,11 @@
-.layout-sider{
+.v3-layout-sider {
     margin-bottom: 12px;
     overflow: auto;
-    background: linear-gradient( 180deg, rgba(7,27,67,0.1) 0%, rgba(13,46,89,0.2) 100%), radial-gradient( 188% 188% at -139% 100%, rgba(39,115,255,0.1) 0%, rgba(39,115,255,0) 100%), radial-gradient( 488% 488% at -439% 100%, rgba(39,115,255,0.2) 0%, rgba(39,115,255,0) 100%), radial-gradient( 716% 716% at -667% 100%, rgba(39,115,255,0.5) 0%, rgba(39,115,255,0) 100%);
+    background: linear-gradient(180deg, rgba(7, 27, 67, 0.1) 0%, rgba(13, 46, 89, 0.2) 100%), radial-gradient(188% 188% at -139% 100%, rgba(39, 115, 255, 0.1) 0%, rgba(39, 115, 255, 0) 100%), radial-gradient(488% 488% at -439% 100%, rgba(39, 115, 255, 0.2) 0%, rgba(39, 115, 255, 0) 100%), radial-gradient(716% 716% at -667% 100%, rgba(39, 115, 255, 0.5) 0%, rgba(39, 115, 255, 0) 100%);
     border: 1px solid #05449a;
     box-shadow: inset 0 0 8px #042c64, inset 0 0 8px #042c64;
-    .ant-menu-item-selected{
-        background: linear-gradient(90deg,#88EFFF00,rgba(163,194,255,0.2),#88EFFF00);
+
+    .ant-menu-item-selected {
+        background: linear-gradient(90deg, #88EFFF00, rgba(163, 194, 255, 0.2), #88EFFF00);
     }
 }

package/src/aldehyde/layout3/css/tabs-layout.css

@@ -1,4 +1,4 @@
-.tabs-layout {
+.v3-tabs-layout {
     height: 100%;
 
     .ant-tabs-nav {
@@ -28,9 +28,6 @@
     }
 
     /* 组件样式异常覆盖 */
-    .ant-card-head {
-        background: transparent !important;
-    }
 
     .actTable {
         .ant-card {

package/src/aldehyde/layout3/header.tsx

@@ -164,12 +164,14 @@ const Header: React.FC<HeaderPropsType> = ({ systemName, menuList }) => {
           <HomeFilled className="home-page-icon" />
           <div className="home-page-title">{translate("${首页}")}</div>
         </NavLink>
-        <Menu
-          mode="horizontal"
-          items={menu}
-          selectedKeys={selectedKeys}
-          style={{ background: "#041B3B", border: "none" }}
-        />
+        <div className="header-menu">
+          <Menu
+            mode="horizontal"
+            items={menu}
+            selectedKeys={selectedKeys}
+            style={{ background: "#041B3B", border: "none" }}
+          />
+        </div>
       </div>
     </Layout.Header>
   );

package/src/aldehyde/layout3/page.tsx

@@ -62,6 +62,7 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
           table={{ className: "v3-antd-table" }}
           drawer={{ className: "v3-antd-drawer" }}
           modal={{ className: "v3-antd-modal" }}
+          card={{ className: "v3-antd-card" }}
         >
           <Layout style={{ height: "100%" }}>
             <Header systemName={systemName ? systemName : Units.programName_NavLeft()} menuList={menu}></Header>

package/src/aldehyde/layout3/sider.tsx

@@ -139,7 +139,7 @@ const Sider: React.FC<SiderPropsType> = ({ menuList, collapsed }) => {
       collapsed={collapsed}
       collapsedWidth={0}
       width={200}
-      className="layout-sider"
+      className="v3-layout-sider"
     >
       <ConfigProvider
         theme={{

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

@@ -0,0 +1,106 @@
+import React, { useCallback, useMemo } from "react";
+import { Dropdown, Tabs } from 'antd';
+import { MenuItemType } from 'antd/es/menu/interface';
+import { KeepAliveTabContext } from '../../layout2/tabs/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 "../css/tabs-layout.css";
+
+const getIcon = (icon?: string): React.ReactElement | undefined => {
+  return icon && antdIcons[icon] && React.createElement(antdIcons[icon]);
+}
+
+const TabsLayout: React.FC = () => {
+  const { translate } = useLocale();
+  const navigate = useNavigate();
+  const { activeTabRoutePath, tabs = [], closeTab, refreshTab, closeOtherTab } = useTabs();
+
+  const menuItems: MenuItemType[] = useMemo(
+    () => tabs.length <= 1 ? [] : [
+      { label: translate("${关闭}"), key: "close" },
+      { label: translate("${关闭其他}"), key: "other" },
+    ],
+    [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 => open && navigate(tab.pathname)}
+      >
+        <div className='flex gap-[6px]'>
+          {getIcon(tab.icon)}
+          {label}
+        </div>
+      </Dropdown >
+    )
+  }, [menuItems]);
+
+  const tabItems = useMemo(() => {
+    return tabs.map(tab => ({
+      key: tab.routePath,
+      label: renderTabTitle(tab),
+      children: (
+        <div key={tab.key} className="overflow-y-auto tabs-children">
+          {tab.children}
+        </div>
+      ),
+      closable: tabs.length > 1, // 剩最后一个就不能删除了
+    }))
+  }, [tabs]);
+
+  const onTabsChange = useCallback((tabKey: string) => {
+    const tab = tabs.find(r => r.routePath === tabKey);
+    if (tab) {
+      navigate(tab.pathname);
+    }
+  }, [tabs]);
+
+  const keepAliveContextValue = useMemo(
+    () => ({
+      closeTab,
+      closeOtherTab,
+      refreshTab,
+    }),
+    [closeTab, closeOtherTab, refreshTab]
+  );
+
+  return (
+    <KeepAliveTabContext.Provider value={keepAliveContextValue}>
+      <Tabs
+        className="v4-tabs-layout"
+        activeKey={activeTabRoutePath}
+        items={tabItems}
+        type="editable-card"
+        onChange={onTabsChange}
+        hideAdd
+        onEdit={(e) => closeTab(e.toString())}
+        size="small"
+      // tabBarGutter={10}
+      />
+    </KeepAliveTabContext.Provider>
+  )
+}
+
+export default TabsLayout;