aldehyde 0.2.332 → 0.2.334

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

@@ -1,29 +1,127 @@
-.v3-main{
+.v3-main {
   width: 100%;
   height: 100%;
   position: absolute;
   min-width: 1280px;
   overflow-x: auto;
-  .ant-layout{
+
+  .ant-layout {
     background: #041B3B !important;
   }
-  .act-table-title{
-        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;
+
+  .act-table-title {
+    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-drawer,.ant-modal-content {
-    .ant-drawer-content{
-        border: none !important;
+
+  .ant-drawer,
+  .ant-modal-content {
+
+    .ant-card-head {
+      background: transparent !important;
     }
-    .ant-card-head{
-        background: transparent !important;
+
+    .ant-layout {
+      background: #041B3B !important;
     }
-    .ant-layout{
-        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 {
+  .ant-table-css-var {
+    --ant-table-border-color: #15325b;
+  }
+
+  .ant-table {
+    background: transparent;
+    scrollbar-color: var(--ant-table-header-bg) transparent;
+  }
+
+  .ant-table-tbody .ant-table-cell {
+    background: var(--ant-layout-body-bg) !important;
+  }
+}
+
+.v3-antd-drawer,
+.v3-antd-modal {
+  .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%);
-    border: 1px solid;
-    border-image: linear-gradient(180deg, rgba(39, 95, 180, 0.3), rgba(68, 118, 235, 1)) 1 1;
-    .ant-menu-item-selected{
-        background: linear-gradient(90deg,#88EFFF00,rgba(163,194,255,0.2),#88EFFF00);
+    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);
     }
 }

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

@@ -1,8 +1,10 @@
-.tabs-layout {
+.v3-tabs-layout {
     height: 100%;
+
     .ant-tabs-nav {
         margin-bottom: 0;
     }
+
     .ant-tabs-tab {
         min-width: 110px;
         display: flex;
@@ -10,21 +12,28 @@
         align-items: center;
     }
 
-    .ant-tabs-content,.ant-tabs-tabpane {
+    .ant-tabs-content,
+    .ant-tabs-tabpane {
         height: 100%;
     }
 
     .tabs-children {
         height: 100%;
         overflow: auto;
-        border: 1px solid;
-        border-image: linear-gradient(180deg, rgba(39, 95, 180, 0.3), rgba(68, 118, 235, 1)) 1 1;
-        padding: 3px 12px 12px;
+        border: 1px solid #05449a;
+        box-shadow: inset 0 0 16px #042c64,
+            inset 0 0 16px #042c64;
+        padding: 8px 16px 16px;
         border-top: 0;
     }
 
     /* 组件样式异常覆盖 */
-    .ant-card-head{
-        background: transparent !important;
+
+    .actTable {
+        .ant-card {
+            background: transparent;
+            box-shadow: inset 0 0 12px #042c64,
+                inset 0 0 12px #042c64;
+        }
     }
-}
+}

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

@@ -58,7 +58,12 @@ const Page: React.FC<PagePropsType> = (props: PagePropsType) => {
                 cardPadding: "4px 12px"
               }
             }
-          }}>
+          }}
+          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>
             <Layout>

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;

package/src/aldehyde/layout4/css/header.css

@@ -0,0 +1,157 @@
+.v4-layout-header {
+  padding: 0;
+  color: #ffffff;
+  position: relative;
+  height: auto;
+  background: #001325;
+  margin-bottom: 12px;
+
+  .header-top {
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 100%;
+    height: 3.75vw;
+    padding: 0 0.73vw;
+    background-color: #001325;
+    border: none;
+    display: flex;
+    justify-content: space-between;
+
+    .header-title {
+      font-family: YouSheBiaoTiHei;
+      font-size: 36px;
+      line-height: 3.75vw;
+      width: 21vw;
+      min-width: 268px;
+      height: 100%;
+      text-align: justify;
+      font-style: normal;
+      text-transform: none;
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+
+      img {
+        height: 72%;
+        margin-right: 16px;
+      }
+    }
+
+    .header-right {
+      line-height: 3.75vw;
+      height: 95%;
+      width: 18vw;
+      min-width: 230px;
+      padding-right: 12px;
+      text-align: right;
+      overflow: hidden;
+
+      .ant-space {
+        height: 100%;
+      }
+
+      .message-bar {
+        min-width: 0;
+
+        svg {
+          color: var(--ant-color-primary);
+        }
+      }
+
+      .message-bar:hover {
+        background: transparent;
+      }
+
+      .header-user {
+        button .ant-btn-icon {
+          margin-top: 4px;
+        }
+
+        .userButton {
+          cursor: pointer;
+          width: 4vw;
+          min-width: 45px;
+        }
+      }
+    }
+  }
+
+  .header-nav {
+    display: flex;
+    justify-content: start;
+    width: 61vw;
+    min-width: 780px;
+    min-height: 50px;
+    padding-left: 1%;
+
+    .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;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      font-size: clamp(12px, 1.1vw, 100px);
+      font-family: YouSheBiaoTiHei;
+      color: #bec8d6;
+      padding: 0 1.5vw;
+      height: 3.28vw;
+      min-height: 42px;
+    }
+
+    .menu-icon {
+      font-size: clamp(10px, 0.9vw, 100px);
+      font-family: YouSheBiaoTiHei;
+      color: #bec8d6;
+    }
+
+    .ant-menu-overflow-item {
+      padding: 0;
+      position: relative;
+    }
+
+    .ant-menu-overflow-item:not(:nth-last-child(-n+2))::before {
+      position: absolute;
+      top: 0.3125vw;
+      right: 0;
+      width: 1px;
+      height: 2.55208vw;
+      min-height: 33px;
+      border-right: 0.10417vw solid;
+      border-width: max(1px, 0.10417vw);
+      border-image: linear-gradient(180deg, rgba(12, 14, 29, 0), #1e415e, #2a658c, #1c3c57, rgba(12, 14, 29, 0)) 2 2;
+      content: " ";
+    }
+
+    .menu-item-selected {
+      color: var(--ant-menu-item-selected-color);
+      background-size: 100% 100%;
+
+      .menu-icon {
+        color: var(--ant-menu-item-selected-color);
+      }
+    }
+
+    .anticon-ellipsis {
+      padding: 0 12px;
+    }
+
+    .ant-menu-overflow-item-rest {
+      height: 3.28vw;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}

package/src/aldehyde/layout4/css/main.css

@@ -0,0 +1,119 @@
+.v4-main {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  min-width: 1280px;
+  overflow-x: auto;
+
+  .ant-layout {
+    background: var(--ant-layout-body-bg) !important;
+  }
+
+  .act-table-title {
+    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-drawer,
+  .ant-modal-content {
+
+    .ant-card-head {
+      background: transparent !important;
+    }
+
+    .ant-layout {
+      background: #001325 !important;
+    }
+  }
+
+  .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-8) !important;
+    }
+
+    .xiaoji {
+      background-color: var(--color-5) !important;
+    }
+
+    .heji {
+      background-color: var(--color-8) !important;
+    }
+  }
+}
+
+.v4-antd-table {
+  .ant-table-css-var {
+    --ant-table-border-color: #15325b;
+  }
+
+  .ant-table {
+    background: transparent;
+    scrollbar-color: var(--ant-table-header-bg) transparent;
+  }
+
+  .ant-table-tbody .ant-table-cell {
+    background: var(--ant-layout-body-bg) !important;
+  }
+}
+
+.v4-antd-drawer,
+.v4-antd-modal {
+  .ant-table-css-var {
+    --ant-table-border-color: #05449a;
+  }
+}
+
+.v4-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;
+  }
+}
+
+.v4-antd-drawer {
+  background: var(--ant-color-bg-base) !important;
+  border: 2px solid var(--ant-color-border-secondary) !important;
+}
+
+.v4-antd-card {
+  background: transparent;
+
+  .ant-card-head {
+    background: var(--ant-color-bg-container) !important;
+  }
+
+  .ant-card-body {
+    background: transparent;
+  }
+}
+
+.v4-antd-card:hover {
+  border-color: var(--ant-color-border-secondary);
+}

package/src/aldehyde/layout4/css/sider.css

@@ -0,0 +1,11 @@
+.v4-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%);
+    border: 1px solid #17375e;
+    box-shadow: inset 0 0 8px #17375e, inset 0 0 8px #17375e;
+
+    .ant-menu-item-selected {
+        background: linear-gradient(90deg, #88EFFF00, rgba(163, 194, 255, 0.2), #88EFFF00);
+    }
+}

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

@@ -0,0 +1,43 @@
+.v4-tabs-layout {
+    height: 100%;
+
+    .ant-tabs-nav {
+        margin-bottom: 0;
+    }
+
+    .ant-tabs-tab {
+        min-width: 110px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .ant-tabs-content,
+    .ant-tabs-tabpane {
+        height: 100%;
+    }
+
+    .tabs-children {
+        height: 100%;
+        overflow: auto;
+        border: 1px solid #17375e;
+        box-shadow: inset 0 0 16px #17375e,
+            inset 0 0 16px #17375e;
+        padding: 8px 16px 16px;
+        border-top: 0;
+    }
+
+    /* 组件样式异常覆盖 */
+    .ant-card-head {
+        background: transparent !important;
+    }
+
+    .actTable {
+        .ant-card {
+            background: transparent;
+            box-shadow: inset 0 0 12px #17375e,
+                inset 0 0 12px #17375e;
+            border: none;
+        }
+    }
+}