aldehyde 0.2.480 → 0.2.481

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

@@ -1,111 +1,111 @@
-import React, { useCallback, useMemo, useContext } from "react";
-import { Dropdown, Tabs } from 'antd';
-import { MenuItemType } from 'antd/es/menu/interface';
-import { KeepAliveTabContext } from '../../layout2/tabs/tabs-context';
-import { KeepAliveTab } from "../../hooks/use-tabs";
-import antdIcons from '@ant-design/icons';
-import { useNavigate } from 'react-router-dom';
-import QueueAnim from 'rc-queue-anim';
-import Units from '../../units';
-import { useLocale } from "../../locale/useLocale";
-import { MenuType } from "../../layout2/type/layout-type";
-import "../css/tabs-layout.less";
-
-const getIcon = (icon?: string): React.ReactElement | undefined => {
-  return icon && antdIcons[icon] && React.createElement(antdIcons[icon]);
-}
-
-interface Props {
-  menuList?: MenuType[];
-}
-
-
-const TabsLayout = (props: Props) => {
-  const { menuList } = props;
-  const { translate, getLocale } = useLocale();
-  const navigate = useNavigate();
-  const { activeTabRoutePath, closeTab, refreshTab, closeOtherTab, tabs = [] } = useContext(KeepAliveTabContext);
-
-  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, getLocale()]);
-
-  const tabItems = useMemo(() => {
-    if (!menuList.length) { // 无菜单不显示
-      return [];
-    }
-    return tabs.map(tab => ({
-      key: tab.routePath,
-      label: renderTabTitle(tab),
-      children: (
-        <div key={tab.key} className="overflow-y-auto tabs-children">
-          <QueueAnim type={["left", "right"]} duration={1000}>
-            <div key={tab.key}>
-              {tab.children}
-            </div>
-          </QueueAnim>
-        </div>
-      ),
-      closable: tabs.length > 1, // 剩最后一个就不能删除了
-    }))
-  }, [tabs, menuList, getLocale()]);
-
-  const onTabsChange = useCallback((tabKey: string) => {
-    const tab = tabs.find(r => r.routePath === tabKey);
-    if (tab) {
-      navigate(tab.pathname);
-    }
-  }, [tabs]);
-
-  return (
-    <Tabs
-      animated={true}
-      className="v3-tabs-layout"
-      activeKey={activeTabRoutePath}
-      items={tabItems}
-      type="editable-card"
-      onChange={onTabsChange}
-      hideAdd
-      onEdit={(e) => closeTab(e.toString())}
-      size="small"
-    // tabBarGutter={10}
-    />
-  )
-}
-
+import React, { useCallback, useMemo, useContext } from "react";
+import { Dropdown, Tabs } from 'antd';
+import { MenuItemType } from 'antd/es/menu/interface';
+import { KeepAliveTabContext } from '../../layout2/tabs/tabs-context';
+import { KeepAliveTab } from "../../hooks/use-tabs";
+import antdIcons from '@ant-design/icons';
+import { useNavigate } from 'react-router-dom';
+import QueueAnim from 'rc-queue-anim';
+import Units from '../../units';
+import { useLocale } from "../../locale/useLocale";
+import { MenuType } from "../../layout2/type/layout-type";
+import "../css/tabs-layout.less";
+
+const getIcon = (icon?: string): React.ReactElement | undefined => {
+  return icon && antdIcons[icon] && React.createElement(antdIcons[icon]);
+}
+
+interface Props {
+  menuList?: MenuType[];
+}
+
+
+const TabsLayout = (props: Props) => {
+  const { menuList } = props;
+  const { translate, getLocale } = useLocale();
+  const navigate = useNavigate();
+  const { activeTabRoutePath, closeTab, refreshTab, closeOtherTab, tabs = [] } = useContext(KeepAliveTabContext);
+
+  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, getLocale()]);
+
+  const tabItems = useMemo(() => {
+    if (!menuList.length) { // 无菜单不显示
+      return [];
+    }
+    return tabs.map(tab => ({
+      key: tab.routePath,
+      label: renderTabTitle(tab),
+      children: (
+        <div key={tab.key} className="overflow-y-auto tabs-children">
+          <QueueAnim type={["left", "right"]} duration={1000}>
+            <div key={tab.key}>
+              {tab.children}
+            </div>
+          </QueueAnim>
+        </div>
+      ),
+      closable: tabs.length > 1, // 剩最后一个就不能删除了
+    }))
+  }, [tabs, menuList, getLocale()]);
+
+  const onTabsChange = useCallback((tabKey: string) => {
+    const tab = tabs.find(r => r.routePath === tabKey);
+    if (tab) {
+      navigate(tab.pathname);
+    }
+  }, [tabs]);
+
+  return (
+    <Tabs
+      animated={true}
+      className="v3-tabs-layout"
+      activeKey={activeTabRoutePath}
+      items={tabItems}
+      type="editable-card"
+      onChange={onTabsChange}
+      hideAdd
+      onEdit={(e) => closeTab(e.toString())}
+      size="small"
+    // tabBarGutter={10}
+    />
+  )
+}
+
 export default TabsLayout;

package/src/aldehyde/layout3/components/time.tsx

@@ -1,25 +1,25 @@
-import React, { useEffect, useState } from "react";
-import dayjs from "dayjs";
-
-type Props = {
-    format?: string;
-};
-
-const Index = (props: Props) => {
-    const { format = "YYYY年MM月DD日" } = props;
-    const [time, setTime] = useState<string>();
-
-    useEffect(() => {
-        setTime(dayjs().format(format));
-        const timeInterval = setInterval(() => {
-            setTime(dayjs().format(format));
-        }, 1000);
-        return () => {
-            clearInterval(timeInterval);
-        }
-    }, []);
-
-    return (<span>{time}</span>);
-};
-
-export default Index;
+import React, { useEffect, useState } from "react";
+import dayjs from "dayjs";
+
+type Props = {
+    format?: string;
+};
+
+const Index = (props: Props) => {
+    const { format = "YYYY年MM月DD日" } = props;
+    const [time, setTime] = useState<string>();
+
+    useEffect(() => {
+        setTime(dayjs().format(format));
+        const timeInterval = setInterval(() => {
+            setTime(dayjs().format(format));
+        }, 1000);
+        return () => {
+            clearInterval(timeInterval);
+        }
+    }, []);
+
+    return (<span>{time}</span>);
+};
+
+export default Index;

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

@@ -1,196 +1,196 @@
-.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;
-    }
-  }
-
-  .header-right {
-    position: absolute;
-    right: 28px;
-    top: 52px;
-    line-height: normal;
-
-    .message-bar {
-      min-width: 0;
-
-      svg {
-        color: #009BFF
-      }
-    }
-
-    .message-bar:hover {
-      background: transparent;
-    }
-
-    .header-user {
-      button .ant-btn-icon {
-        margin-top: 4px;
-      }
-    }
-  }
-
-  .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;
-      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;
-      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;
-        width: 118px;
-        height: 40px;
-        border-radius: 120px 120px 120px 120px;
-        border: 1px solid;
-        background-clip: padding-box;
-        background: linear-gradient(180deg, #203c51, #02243e);
-        padding: 0 4px;
-      }
-
-      .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-border-sel>.ant-space,
-      .menu-item-border>.ant-space {
-        max-width: stretch;
-
-        .ant-space-item:nth-of-type(2) {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
-    }
-
-    .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;
-    }
-  }
+.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;
+    }
+  }
+
+  .header-right {
+    position: absolute;
+    right: 28px;
+    top: 52px;
+    line-height: normal;
+
+    .message-bar {
+      min-width: 0;
+
+      svg {
+        color: #009BFF
+      }
+    }
+
+    .message-bar:hover {
+      background: transparent;
+    }
+
+    .header-user {
+      button .ant-btn-icon {
+        margin-top: 4px;
+      }
+    }
+  }
+
+  .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;
+      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;
+      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;
+        width: 118px;
+        height: 40px;
+        border-radius: 120px 120px 120px 120px;
+        border: 1px solid;
+        background-clip: padding-box;
+        background: linear-gradient(180deg, #203c51, #02243e);
+        padding: 0 4px;
+      }
+
+      .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-border-sel>.ant-space,
+      .menu-item-border>.ant-space {
+        max-width: stretch;
+
+        .ant-space-item:nth-of-type(2) {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    .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;
+    }
+  }
 }