aldehyde 0.2.420 → 0.2.422

package/src/aldehyde/welcome/components/user-menus.less

@@ -0,0 +1,193 @@
+.user-menus {
+    position: relative;
+    overflow: hidden;
+    border-radius: 0.75rem;
+    padding: 1.25rem;
+    border: 1px solid;
+
+    .heard {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .title {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+
+            .line {
+                width: 0.25rem;
+                height: 1.25rem;
+                border-radius: 9999px;
+            }
+
+            .text {
+                font-weight: 600;
+                margin: 0;
+            }
+        }
+    }
+
+    .user-menu-item {
+        transition-property: all;
+        transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+        transition-duration: .15s;
+        padding: 12px;
+        border-radius: 8px;
+        overflow: hidden;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-content: space-between;
+        flex-wrap: wrap;
+        position: relative;
+
+        .menu-title {
+            width: 100%;
+            text-align: center;
+            color: var(--ant-color-text-secondary);
+            margin-top: 8px;
+        }
+
+
+        .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;
+        }
+
+        .icon-animated {
+            font-size: 24px;
+            transition-property: all;
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            transition-duration: 300ms;
+        }
+
+        .user-menu-item-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            transition-property: opacity;
+            transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+            transition-duration: .3s;
+            opacity: 0;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .user-menu-item:hover {
+        transform: translateY(-1px);
+
+        .icon-animated {
+            transform: scale(1.1) rotate(6deg);
+        }
+
+        .user-menu-item-bg {
+            opacity: 1;
+        }
+
+        .menu-title {
+            font-weight: bolder;
+            color: var(--ant-color-text-base)
+        }
+    }
+
+    .user-menus-items-grid {
+        display: grid;
+        margin-top: 1rem;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 0.5rem;
+
+        @media (min-width: 740px) {
+            grid-template-columns: repeat(4, minmax(0, 1fr));
+        }
+
+        @media (min-width: 840px) {
+            grid-template-columns: repeat(5, minmax(0, 1fr));
+        }
+
+    }
+
+    .user-page-config {
+        margin-top: 1rem;
+
+        .page-config-item-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;
+            height: 100%;
+
+            .ant-row {
+                width: 100%;
+            }
+
+            .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;
+            }
+
+            .item-title {
+                margin-bottom: 12px;
+                font-weight: 600;
+                font-size: 16px;
+            }
+
+            .tag {
+                padding: 4px 10px;
+                border-radius: 9999px;
+                font-size: 12px;
+                line-height: 16px;
+            }
+
+        }
+
+        .page-config-item-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);
+
+            .icon-wrapper {
+                transform: scale(1.1);
+                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
+            }
+
+            .item-title {
+                color: var(--ant-color-primary);
+            }
+        }
+
+        .icon-animated {
+            font-size: 24px;
+            transition-property: all;
+            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+            transition-duration: 300ms;
+        }
+    }
+
+}

package/src/aldehyde/welcome/components/user-menus.tsx

@@ -0,0 +1,275 @@
+import React, { useState, useEffect, useMemo, useContext } from "react";
+import { Button, theme, Drawer, Tree, Empty, Space, Flex, Row, Col, Divider } from "antd";
+import { RocketTwoTone, PlusOutlined } from "@ant-design/icons";
+import { useNavigate } from "react-router-dom";
+import "antd/dist/reset.css";
+import HcserviceV3 from "../../tmpl/hcservice-v3";
+import { Level2Menu, ThemeConfig } from "../../tmpl/interface";
+import IconFont from "../../icon/aliIcon";
+import { useLocale } from "../../locale/useLocale";
+import Units from "../../units";
+import { KeepAliveTabContext } from '../../layout2/tabs/tabs-context';
+import "./user-menus.less";
+
+const { useToken } = theme;
+
+/**
+ * 我的
+ * 我的菜单、用户页面自定义配置
+ * 
+ */
+
+// 查询指定节点
+const findNodeById = (tree, type, value) => {
+  for (const node of tree) {
+    if (node[type] === value) return node;
+    if (node.children?.length) {
+      const found = findNodeById(node.children, type, value);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+interface MenuType extends Level2Menu {
+  url: string;
+  children?: MenuType[];
+}
+
+interface Props {
+  menus: MenuType[];
+  leafMenus: MenuType[];
+  themeConfig?: ThemeConfig;
+}
+
+interface DrawerProps {
+  open: boolean;
+  onClose: () => void;
+  menus: MenuType[];
+  selectMenus: string[];
+  onOk: (val: string[]) => void;
+  btnLoading: boolean;
+}
+
+interface PageConfig extends Level2Menu {
+  url?: string;
+  children?: { name: string, content: string, menuCode: string; recordCode: string }[];
+}
+
+const RenderDrawer = (props: DrawerProps) => {
+  const { open, onClose, menus, selectMenus, onOk, btnLoading } = props;
+  const [checkMenus, setCheckMenus] = useState<string[]>([]);
+  const { translate } = useLocale();
+
+  useEffect(() => {
+    setCheckMenus(selectMenus);
+  }, [selectMenus]);
+
+  const handleTreeData = (arr: MenuType[]) => {
+    return arr.map(item => {
+      const newItem = { ...item, key: item.id };
+      if (newItem.children && Array.isArray(newItem.children)) {
+        newItem.children = handleTreeData(newItem.children);
+      }
+      return newItem;
+    });
+  }
+
+  const treeData = useMemo(() => {
+    if (!menus?.length) {
+      return [];
+    }
+    const temMenus = handleTreeData(menus);
+    return temMenus;
+  }, [menus]);
+
+  const defaultExpandedKeys = useMemo(() => menus.map(r => r.id), menus);
+
+  return <Drawer
+    title={translate("我的菜单")}
+    onClose={onClose}
+    open={open}
+    extra={
+      <Button loading={btnLoading} type="primary" disabled={!treeData?.length} onClick={() => onOk(checkMenus)}>{translate("${保存}")}</Button>
+    }
+  >
+    {treeData?.length ?
+      <Tree
+        checkStrictly
+        defaultExpandedKeys={defaultExpandedKeys}
+        checkable
+        multiple
+        checkedKeys={checkMenus}
+        selectedKeys={checkMenus}
+        onSelect={(val) => setCheckMenus(val as string[])}
+        onCheck={(val: any) => setCheckMenus(val.checked)}
+        treeData={treeData}
+      /> :
+      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
+  </Drawer>;
+}
+
+const Index = (props: Props) => {
+  const { menus, leafMenus, themeConfig } = props;
+  const [quickMenu, setQuickMenu] = useState<MenuType[]>([]);
+  const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
+  const [pageConfigs, setPageConfigs] = useState<PageConfig[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const navigate = useNavigate();
+  const { translate } = useLocale();
+  const { token } = useToken();
+  const { closeTab } = useContext(KeepAliveTabContext);
+
+  const getQuickMenu = async () => {
+    let temData = await HcserviceV3.getQuickMenu();
+    const temMenu = temData.map(item => {
+      const menuItem = findNodeById(menus, "id", item.menuCode);
+      return menuItem;
+    }).filter(Boolean);
+    setQuickMenu(temMenu);
+  };
+
+  const selectMenuIds = useMemo(() => quickMenu?.map(r => r.id), [quickMenu]);
+
+  const getPageConfigCommon = async () => {
+    const pageConfig = await HcserviceV3.getPageConfigCommon();
+    if (!pageConfig) {
+      return;
+    }
+    const config = pageConfig.reduce((total, item) => {
+      if (total[item.menuCode]) {
+        total[item.menuCode].children.push(item);
+      } else {
+        const menu = leafMenus.find(r => r.id === item.menuCode);
+        if (!menu) {
+          return total;
+        }
+        total[item.menuCode] = { ...menu, children: [item] };
+      }
+      return total;
+    }, {});
+    const arr: PageConfig[] = Object.values(config);
+    setPageConfigs(arr);
+  }
+
+  useEffect(() => {
+    if (menus?.length && themeConfig?.allowUsermenu) {
+      getQuickMenu();
+    }
+  }, [menus, themeConfig]);
+
+  useEffect(() => {
+    if (themeConfig?.allowUserConfig && leafMenus?.length) {
+      getPageConfigCommon();
+    }
+  }, [leafMenus, themeConfig])
+
+  // 更新我的菜单
+  const onChangeQuickMenu = async (codes: string[]) => {
+    setLoading(true);
+    const status = await HcserviceV3.postQuickMenu(codes);
+    setLoading(false);
+    if (!status) {
+      return;
+    }
+    setDrawerOpen(false);
+    getQuickMenu();
+  }
+
+  // 我的菜单项渲染
+  const renderItem = (item: MenuType, type?: string) => {
+    const renderIcon = item.icon ? <IconFont type={item.icon} /> : type === "add" ? <PlusOutlined /> : <RocketTwoTone />;
+    const iconColor = item.themeColor || token.colorPrimary;
+    return <div className="user-menu-item" onClick={() => type === "add" ? setDrawerOpen(true) : navigate(`/${item.url}`)}>
+      <div className="user-menu-item-bg" style={{ background: ` ${iconColor}1A` }} />
+      <div className={`icon-wrapper`} style={{ color: iconColor, background: ` ${iconColor}1A` }}>
+        <div className="icon-animated">{renderIcon}</div>
+      </div>
+      <span className="menu-title">{item.title}</span>
+    </div>;
+  };
+
+  // 自定义菜单跳转
+  const onClickPageConfig = (val: { menuCode: string, content: string, url: string }) => {
+    if (!val.url) {
+      return;
+    }
+    const { criteriaData, ...content } = val.content ? JSON.parse(val.content) : {};
+    Units.setUserPageConfig(val.menuCode, content);
+    let serial_number = new Date().getTime();
+    const temUrl = val.url.split("?")[0];
+    // 关闭指定页面，清除缓存
+    closeTab(`/${temUrl}`);
+    if (criteriaData) {
+      const newfliter = Units.transQueryParamsToStr({ ...criteriaData, serial_number });
+      navigate(`/${temUrl}?${newfliter}`);
+    } else {
+      navigate(`/${val.url}`);
+    }
+  }
+
+  // 自定义菜单项渲染
+  const renderPageConfigItem = (item: PageConfig) => {
+    const renderIcon = item.icon ? <IconFont type={item.icon} /> : <RocketTwoTone />;
+    const iconColor = item.themeColor || token.colorPrimary;
+    const children = item.children || [];
+    return <div className="page-config-item-card" style={{ borderColor: `${token.colorBorder}CC`, backgroundColor: token.colorBgContainer }} onClick={() => navigate(`/${item.url}`)}>
+      <Space size={16} align="start" >
+        <div className="icon-wrapper" style={{ color: iconColor, background: `${iconColor}1A` }}>
+          <div className="icon-animated">{renderIcon}</div>
+        </div>
+        <div>
+          <h3 className="item-title" onClick={() => navigate(`/${item.url}`)}>{item.title}</h3>
+          <Flex gap="small" align="center" wrap>
+            {children.map((cItem) => (
+              <span
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onClickPageConfig({ ...cItem, url: item.url });
+                }}
+                key={cItem.recordCode} className="tag" style={{ color: iconColor, background: `${iconColor}1A` }}>
+                {cItem.name}
+              </span>
+            ))}
+          </Flex>
+        </div>
+      </Space>
+    </div>;
+  };
+
+  return <><div className="user-menus" style={{ borderColor: `${token.colorBorder}CC`, backgroundColor: token.colorBgContainer }}>
+    <div className="heard">
+      <div className="title">
+        <div className="line" style={{ background: token.colorPrimary }} />
+        <h3 className="text">{translate("${我的}")}</h3>
+      </div>
+      {themeConfig?.allowUsermenu ?
+        <div className="setting">
+          <Button type="link" icon={<IconFont type="icon-icon-test8" />} onClick={() => setDrawerOpen(true)}>{translate("${设置}")}</Button>
+        </div> : ""}
+    </div>
+    {themeConfig?.allowUsermenu ?
+      <div className="user-menus-items-grid">
+        {quickMenu.map((item) => renderItem(item))}
+        {renderItem({ title: translate("${添加}"), themeColor: token.colorPrimary } as MenuType, "add")}
+      </div> : ""}
+    {themeConfig?.allowUserConfig && themeConfig?.allowUsermenu && pageConfigs?.length ? <Divider /> : ""}
+    {themeConfig?.allowUserConfig && pageConfigs?.length ? <>
+      <div className="heard">
+        <div className="title">
+          <div className="line" style={{ background: token.colorPrimary }} />
+          <h3 className="text">{translate("${自定义菜单}")}</h3>
+        </div>
+      </div>
+      <div className="user-page-config">
+        <Row gutter={[16, 16]}>
+          {pageConfigs.map((item) => <Col span={8}>{renderPageConfigItem(item)}</Col>)}
+        </Row>
+      </div>
+    </> : ""}
+  </div>
+    {drawerOpen ? <RenderDrawer open={drawerOpen} onClose={() => setDrawerOpen(false)} onOk={onChangeQuickMenu} menus={menus} selectMenus={selectMenuIds} btnLoading={loading} /> : ""}
+  </>;
+}
+
+export default Index;