aldehyde 0.2.480 → 0.2.481

package/src/aldehyde/welcome/components/workbench.less

@@ -1,119 +1,119 @@
-.workbench {
-    width: 100%;
-
-    .card-row {
-        padding-bottom: 16px;
-        padding-top: 1px;
-        scroll-behavior: smooth;
-        overflow-x: auto;
-
-        &::-webkit-scrollbar {
-            display: none;
-            /* 隐藏滚动条 */
-        }
-
-        scrollbar-width: none;
-        -ms-overflow-style: none;
-    }
-
-    .stat-card {
-        position: relative;
-        overflow: hidden;
-        border-radius: 0.75rem;
-        padding: 1.25rem;
-        transition-property: transform, box-shadow;
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-        border: 1px solid;
-        cursor: pointer;
-
-        .card-title {
-            color: var(--ant-color-text-secondary);
-        }
-
-        .card-count {
-            margin-top: 0.5rem;
-            font-size: 1.875rem;
-            line-height: 2.25rem;
-            font-weight: 700;
-        }
-
-        .icon-wrapper {
-            position: relative;
-            display: flex;
-            height: 3rem;
-            width: 3rem;
-            align-items: center;
-            justify-content: center;
-            transition-property: all;
-            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-            transition-duration: 0.3s;
-            animation-duration: 0.3s;
-            border-radius: 0.75rem;
-            opacity: 1;
-        }
-
-        .bg-gradient {
-            content: '';
-            position: absolute;
-            right: -5rem;
-            top: -5rem;
-            height: 12rem;
-            width: 12rem;
-            border-radius: 50%;
-            opacity: 1;
-            transition-property: opacity, transform;
-            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-            transition-duration: 500ms;
-        }
-    }
-
-    .left-button {
-        position: absolute;
-        left: 0;
-        top: calc(50% - 8px);
-        transform: translateY(-50%);
-        z-index: 2;
-        border-radius: 50%;
-        display: none;
-    }
-
-    .right-button {
-        position: absolute;
-        right: 0;
-        top: calc(50% - 8px);
-        transform: translateY(-50%);
-        z-index: 2;
-        border-radius: 50%;
-        display: none;
-    }
-
-    .stat-card:hover {
-        transform: translateY(-1px);
-        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-
-        .bg-gradient {
-            transform: scale(1.5);
-        }
-    }
-
-    .icon-animated {
-        font-size: 24px;
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 300ms;
-    }
-
-    .stat-card:hover .icon-animated {
-        transform: scale(1.1) rotate(6deg);
-    }
-}
-
-.workbench:hover {
-
-    .left-button,
-    .right-button {
-        display: block;
-    }
+.workbench {
+    width: 100%;
+
+    .card-row {
+        padding-bottom: 16px;
+        padding-top: 1px;
+        scroll-behavior: smooth;
+        overflow-x: auto;
+
+        &::-webkit-scrollbar {
+            display: none;
+            /* 隐藏滚动条 */
+        }
+
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+    }
+
+    .stat-card {
+        position: relative;
+        overflow: hidden;
+        border-radius: 0.75rem;
+        padding: 1.25rem;
+        transition-property: transform, box-shadow;
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        border: 1px solid;
+        cursor: pointer;
+
+        .card-title {
+            color: var(--ant-color-text-secondary);
+        }
+
+        .card-count {
+            margin-top: 0.5rem;
+            font-size: 1.875rem;
+            line-height: 2.25rem;
+            font-weight: 700;
+        }
+
+        .icon-wrapper {
+            position: relative;
+            display: flex;
+            height: 3rem;
+            width: 3rem;
+            align-items: center;
+            justify-content: center;
+            transition-property: all;
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            transition-duration: 0.3s;
+            animation-duration: 0.3s;
+            border-radius: 0.75rem;
+            opacity: 1;
+        }
+
+        .bg-gradient {
+            content: '';
+            position: absolute;
+            right: -5rem;
+            top: -5rem;
+            height: 12rem;
+            width: 12rem;
+            border-radius: 50%;
+            opacity: 1;
+            transition-property: opacity, transform;
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            transition-duration: 500ms;
+        }
+    }
+
+    .left-button {
+        position: absolute;
+        left: 0;
+        top: calc(50% - 8px);
+        transform: translateY(-50%);
+        z-index: 2;
+        border-radius: 50%;
+        display: none;
+    }
+
+    .right-button {
+        position: absolute;
+        right: 0;
+        top: calc(50% - 8px);
+        transform: translateY(-50%);
+        z-index: 2;
+        border-radius: 50%;
+        display: none;
+    }
+
+    .stat-card:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+        .bg-gradient {
+            transform: scale(1.5);
+        }
+    }
+
+    .icon-animated {
+        font-size: 24px;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 300ms;
+    }
+
+    .stat-card:hover .icon-animated {
+        transform: scale(1.1) rotate(6deg);
+    }
+}
+
+.workbench:hover {
+
+    .left-button,
+    .right-button {
+        display: block;
+    }
 }

package/src/aldehyde/welcome/components/workbench.tsx

@@ -1,146 +1,146 @@
-import React, { useState, useRef, useEffect } from "react";
-import { Row, Col, theme, Button } from "antd";
-import { RocketTwoTone, LeftOutlined, RightOutlined } from "@ant-design/icons";
-import { useNavigate } from "react-router-dom";
-import "antd/dist/reset.css";
-import HcserviceV3 from "../../tmpl/hcservice-v3";
-import HCDataSource from "../../tmpl/hc-data-source";
-import { Level2Menu } from "../../tmpl/interface";
-import IconFont from "../../icon/aliIcon";
-import { handleMenuItemUrl } from "../../layout2/page";
-import { useLocale } from "../../locale/useLocale";
-import "./workbench.less";
-
-const { useToken } = theme;
-
-interface MenuType extends Level2Menu {
-  url: string;
-}
-
-interface WorkbenchProps {
-  layoutRootPath?: string;
-  menus: MenuType[];
-}
-
-const Workbench = (props: WorkbenchProps) => {
-  const { layoutRootPath, menus } = props;
-  const [l2Menus, setL2Menus] = useState<{ [key: string]: MenuType }>({});
-  const [l2MenusArr, setL2MenusArr] = useState<MenuType[]>([]);
-  const IntervalRef = useRef([]);
-  const rowRef = useRef(null);
-  const navigate = useNavigate();
-  const { token } = useToken();
-  const { translate } = useLocale();
-
-  const getL2Menus = async () => {
-    let temData: Level2Menu[] = await HCDataSource.fastMenu("QuickPanel");
-    let temMenu: MenuType[] = [];
-    if (!temData?.length) {
-      temMenu = menus.filter(r => !r.dragDropPageId && !r.customPath)?.slice(0, 4) || []
-    } else {
-      temData.forEach(item => {
-        const { id, pageType, defaultCriteriaValue, customPath, dragDropPageId, fullScreen } = item;
-        if (!item.disabled) {
-          const url = handleMenuItemUrl(id, pageType, defaultCriteriaValue, customPath, dragDropPageId, fullScreen, layoutRootPath);
-          temMenu.push({ ...item, url });
-        }
-      });
-    }
-    setL2MenusArr(temMenu);
-    const temL2Menus = {};
-    if (temMenu) {
-      for (const item of temMenu) {
-        if (item.disabled) {
-          continue;
-        }
-        let i = setInterval(async () => {
-          let count = await HcserviceV3.requestLtmplCount(null, item.id);
-          setL2Menus(val => ({ ...val, [item.id]: { ...item, count: count || 0 } }))
-        }, 180000);
-        IntervalRef.current.push(i);
-        let count = await HcserviceV3.requestLtmplCount(null, item.id);
-        temL2Menus[item.id] = { ...item, count: count || 0 };
-      }
-      setL2Menus(temL2Menus);
-    }
-  };
-
-
-  useEffect(() => {
-    if (menus?.length) {
-      getL2Menus();
-    }
-    return () => {
-      IntervalRef.current.forEach(i => clearInterval(i));
-    }
-  }, [menus]);
-
-  // 轮播滚动
-  const scrollToIndex = (direction) => {
-    const container = rowRef.current;
-    if (!container) return;
-    // 获取第一个卡片元素及其计算样式（包括margin）
-    const firstCard = container.querySelector('.ant-col');
-    if (!firstCard) return;
-    // 计算单个卡片的宽度 + gutter
-    const cardStyle = window.getComputedStyle(firstCard);
-    const cardWidth = firstCard.offsetWidth + parseInt(cardStyle.marginRight);
-    // 计算本次滚动的距离（向前或向后一个卡片）
-    const scrollAmount = cardWidth * direction;
-    // 执行滚动
-    container.scrollBy({
-      left: scrollAmount,
-      behavior: 'smooth' // 平滑滚动
-    });
-  };
-
-  const renderCard = () => {
-    return l2MenusArr.map((item) => {
-      const l2Menu = l2Menus[item.id] || item;
-      const renderIcon = l2Menu.icon ? <IconFont type={l2Menu.icon} /> : <RocketTwoTone />;
-      const iconColor = l2Menu.themeColor || token.colorPrimary;
-      let comp = (
-        <Col className="gutter-row" sm={24} md={12} lg={6} span={6}>
-          <div className="stat-card" style={{ borderColor: `${token.colorBorder}CC`, backgroundColor: token.colorBgContainer }} onClick={() => navigate(`/${item.url}`)}>
-            <div className="bg-gradient" style={{ background: `radial-gradient(circle, ${iconColor}1A 0%, transparent 70%)` }} />
-            <div >
-              <p className="card-title">{translate("${" + l2Menu.title + "}")}</p>
-              <p className="card-count" style={{ color: iconColor }}>{l2Menu.count || 0}</p>
-            </div>
-            <div className="icon-wrapper" style={{ color: iconColor, background: `${iconColor}1A` }}>
-              <div className="icon-animated">{renderIcon}</div>
-            </div>
-          </div>
-        </Col>
-      );
-      return comp;
-    });
-  }
-
-  return <div className="workbench">
-    <Row ref={rowRef} gutter={16} wrap={false} className="card-row" >
-      {renderCard()}
-    </Row>
-    {l2MenusArr.length > 4 ?
-      <>
-        <Button
-          type="primary"
-          ghost
-          onClick={() => scrollToIndex(-1)}
-          shape="circle"
-          icon={<LeftOutlined />}
-          className="left-button"
-        />
-        <Button
-          type="primary"
-          ghost
-          shape="circle"
-          onClick={() => scrollToIndex(1)}
-          icon={<RightOutlined />}
-          className="right-button"
-        />
-      </> : ""}
-  </div>;
-}
-
-export default Workbench;
+import React, { useState, useRef, useEffect } from "react";
+import { Row, Col, theme, Button } from "antd";
+import { RocketTwoTone, LeftOutlined, RightOutlined } from "@ant-design/icons";
+import { useNavigate } from "react-router-dom";
+import "antd/dist/reset.css";
+import HcserviceV3 from "../../tmpl/hcservice-v3";
+import HCDataSource from "../../tmpl/hc-data-source";
+import { Level2Menu } from "../../tmpl/interface";
+import IconFont from "../../icon/aliIcon";
+import { handleMenuItemUrl } from "../../layout2/page";
+import { useLocale } from "../../locale/useLocale";
+import "./workbench.less";
+
+const { useToken } = theme;
+
+interface MenuType extends Level2Menu {
+  url: string;
+}
+
+interface WorkbenchProps {
+  layoutRootPath?: string;
+  menus: MenuType[];
+}
+
+const Workbench = (props: WorkbenchProps) => {
+  const { layoutRootPath, menus } = props;
+  const [l2Menus, setL2Menus] = useState<{ [key: string]: MenuType }>({});
+  const [l2MenusArr, setL2MenusArr] = useState<MenuType[]>([]);
+  const IntervalRef = useRef([]);
+  const rowRef = useRef(null);
+  const navigate = useNavigate();
+  const { token } = useToken();
+  const { translate } = useLocale();
+
+  const getL2Menus = async () => {
+    let temData: Level2Menu[] = await HCDataSource.fastMenu("QuickPanel");
+    let temMenu: MenuType[] = [];
+    if (!temData?.length) {
+      temMenu = menus.filter(r => !r.dragDropPageId && !r.customPath)?.slice(0, 4) || []
+    } else {
+      temData.forEach(item => {
+        const { id, pageType, defaultCriteriaValue, customPath, dragDropPageId, fullScreen } = item;
+        if (!item.disabled) {
+          const url = handleMenuItemUrl(id, pageType, defaultCriteriaValue, customPath, dragDropPageId, fullScreen, layoutRootPath);
+          temMenu.push({ ...item, url });
+        }
+      });
+    }
+    setL2MenusArr(temMenu);
+    const temL2Menus = {};
+    if (temMenu) {
+      for (const item of temMenu) {
+        if (item.disabled) {
+          continue;
+        }
+        let i = setInterval(async () => {
+          let count = await HcserviceV3.requestLtmplCount(null, item.id);
+          setL2Menus(val => ({ ...val, [item.id]: { ...item, count: count || 0 } }))
+        }, 180000);
+        IntervalRef.current.push(i);
+        let count = await HcserviceV3.requestLtmplCount(null, item.id);
+        temL2Menus[item.id] = { ...item, count: count || 0 };
+      }
+      setL2Menus(temL2Menus);
+    }
+  };
+
+
+  useEffect(() => {
+    if (menus?.length) {
+      getL2Menus();
+    }
+    return () => {
+      IntervalRef.current.forEach(i => clearInterval(i));
+    }
+  }, [menus]);
+
+  // 轮播滚动
+  const scrollToIndex = (direction) => {
+    const container = rowRef.current;
+    if (!container) return;
+    // 获取第一个卡片元素及其计算样式（包括margin）
+    const firstCard = container.querySelector('.ant-col');
+    if (!firstCard) return;
+    // 计算单个卡片的宽度 + gutter
+    const cardStyle = window.getComputedStyle(firstCard);
+    const cardWidth = firstCard.offsetWidth + parseInt(cardStyle.marginRight);
+    // 计算本次滚动的距离（向前或向后一个卡片）
+    const scrollAmount = cardWidth * direction;
+    // 执行滚动
+    container.scrollBy({
+      left: scrollAmount,
+      behavior: 'smooth' // 平滑滚动
+    });
+  };
+
+  const renderCard = () => {
+    return l2MenusArr.map((item) => {
+      const l2Menu = l2Menus[item.id] || item;
+      const renderIcon = l2Menu.icon ? <IconFont type={l2Menu.icon} /> : <RocketTwoTone />;
+      const iconColor = l2Menu.themeColor || token.colorPrimary;
+      let comp = (
+        <Col className="gutter-row" sm={24} md={12} lg={6} span={6}>
+          <div className="stat-card" style={{ borderColor: `${token.colorBorder}CC`, backgroundColor: token.colorBgContainer }} onClick={() => navigate(`/${item.url}`)}>
+            <div className="bg-gradient" style={{ background: `radial-gradient(circle, ${iconColor}1A 0%, transparent 70%)` }} />
+            <div >
+              <p className="card-title">{translate("${" + l2Menu.title + "}")}</p>
+              <p className="card-count" style={{ color: iconColor }}>{l2Menu.count || 0}</p>
+            </div>
+            <div className="icon-wrapper" style={{ color: iconColor, background: `${iconColor}1A` }}>
+              <div className="icon-animated">{renderIcon}</div>
+            </div>
+          </div>
+        </Col>
+      );
+      return comp;
+    });
+  }
+
+  return <div className="workbench">
+    <Row ref={rowRef} gutter={16} wrap={false} className="card-row" >
+      {renderCard()}
+    </Row>
+    {l2MenusArr.length > 4 ?
+      <>
+        <Button
+          type="primary"
+          ghost
+          onClick={() => scrollToIndex(-1)}
+          shape="circle"
+          icon={<LeftOutlined />}
+          className="left-button"
+        />
+        <Button
+          type="primary"
+          ghost
+          shape="circle"
+          onClick={() => scrollToIndex(1)}
+          icon={<RightOutlined />}
+          className="right-button"
+        />
+      </> : ""}
+  </div>;
+}
+
+export default Workbench;

package/src/aldehyde/welcome/index.css

@@ -1,13 +1,13 @@
-.home{
-    height:calc(70vh);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 20px;
-    background: #fff;
-}
-
-.home-page{
-    padding-top: 24px;
-    background: #f0f5ff;
-}
+.home{
+    height:calc(70vh);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    background: #fff;
+}
+
+.home-page{
+    padding-top: 24px;
+    background: #f0f5ff;
+}