feat: 添加项目卡片

apps/designer/.umirc.ts

@@ -33,6 +33,7 @@ export default defineConfig({
   icons: {
     autoInstall: {}
   },
+  history: { type: 'hash' },
   routes: [
     { path: "/", component: "home" },
     { path: "/flow/:id", component: "flow" },

apps/designer/src/components/FlowExtra.tsx

@@ -6,7 +6,6 @@ import { CorrelationType } from "@/enum";
 export default function FlowExtra({ node }: { node: Node }) {
   const { attrs } = node.getData();
 
-  const enterpriseCode = localStorage.getItem("enterpriseCode");
   const token = localStorage.getItem("token");
 
   function objectToUrlParams(obj: Record<string, any>) {
@@ -21,12 +20,12 @@ export default function FlowExtra({ node }: { node: Node }) {
     [CorrelationType.scene]: {
       name: "场景",
       url: linkConfig.scene,
-      param: `enterpriseCode=${enterpriseCode}#/${attrs?.linkValue?.value}`
+      param: `#/${attrs?.linkValue?.value}`
     },
     [CorrelationType.flow]: {
       name: "流程",
       url: linkConfig.flow,
-      param: `enterpriseCode=${enterpriseCode}#/${attrs?.linkValue?.value}`
+      param: `#/${attrs?.linkValue?.value}`
     },
     [CorrelationType.page]: {
       name: "页面",
@@ -40,7 +39,6 @@ export default function FlowExtra({ node }: { node: Node }) {
       name: "数据表",
       url: linkConfig.table,
       param: objectToUrlParams({
-        enterpriseCode,
         id: attrs?.linkValue?.value,
         isSvg: true,
         type: 16
@@ -50,7 +48,6 @@ export default function FlowExtra({ node }: { node: Node }) {
       name: "视图",
       url: linkConfig.view,
       param: objectToUrlParams({
-        enterpriseCode,
         id: attrs?.linkValue?.value,
         isSvg: true,
         type: 16

apps/designer/src/layouts/index.tsx

@@ -8,14 +8,10 @@ export default function Layout() {
 
   useEffect(() => {
     const token = searchParams.get('token');
-    const enterpriseCode = searchParams.get('enterpriseCode');
     
     if(token) {
       localStorage.setItem('token', token);
     }
-    if(enterpriseCode) {
-      localStorage.setItem('enterpriseCode', enterpriseCode);
-    }
   }, [searchParams]);
   return (
     <Outlet />

apps/designer/src/pages/home/All.tsx

@@ -10,26 +10,17 @@ import {
   Empty,
   Pagination,
 } from "antd";
-import { history, useRequest } from "umi";
+import { useRequest } from "umi";
 import { AppstoreOutlined, MenuOutlined } from "@ant-design/icons";
 import { FlowchartMindMapList } from "@/api/systemDesigner";
-import { GraphType } from "@/enum";
+import ProjectCard from "./ProjectCard";
 
-import defaultFlowImg from "@/assets/image/flow.png";
-import defaultMindImg from "@/assets/image/mindmap.png";
 export default function All() {
   const [display, setDisplay] = useState("card");
   const [dataSource, setDataSource] = useState<any[]>([]);
   const [total, setTotal] = useState(0);
-  const handleToEdit = (record: any) => {
-    if (record.type === GraphType.mindmap) {
-      history.push(`/mindmap/${record.id}`);
-    } else {
-      history.push(`/flow/${record.id}`);
-    }
-  };
 
-  const { loading, run } = useRequest(FlowchartMindMapList, {
+  const { loading, run, refresh } = useRequest(FlowchartMindMapList, {
     defaultParams: [
       {
         currentPage: 1,
@@ -72,13 +63,13 @@ export default function All() {
         }
         footer={[]}
       >
-        <ProCard
+        {/* <ProCard
           style={{
             height: "calc(100vh - 140px)",
             minHeight: 800,
             overflow: "auto",
           }}
-        >
+        > */}
           <Breadcrumb
             items={[
               {
@@ -129,40 +120,7 @@ export default function All() {
                       xxl={6}
                       key={index}
                     >
-                      <Card
-                        hoverable
-                        bordered
-                        cover={
-                          <img
-                            style={{ height: 200, objectFit: "cover" }}
-                            src={
-                              item?.coverImage ||
-                              (item.type === GraphType.mindmap
-                                ? defaultMindImg
-                                : defaultFlowImg)
-                            }
-                          />
-                        }
-                        onClick={() => handleToEdit(item)}
-                      >
-                        <Card.Meta
-                          title={
-                            <span>
-                              {item.type === GraphType.mindmap ? (
-                                <i
-                                  className={`iconfont icon-siweidaotu_huaban1 color-#3bc9c1 mr-8px`}
-                                />
-                              ) : (
-                                <i
-                                  className={`iconfont icon-liuchengtu color-#067bef mr-8px`}
-                                />
-                              )}
-                              {item.name}
-                            </span>
-                          }
-                          description={`更新于: ${item.updatedTime}`}
-                        />
-                      </Card>
+                      <ProjectCard record={item} onFresh={refresh} onDelete={refresh}/>
                     </Col>
                   );
                 })}
@@ -219,7 +177,7 @@ export default function All() {
               }}
             />
           )}
-        </ProCard>
+        {/* </ProCard> */}
       </PageContainer>
     </>
   );

apps/designer/src/pages/home/ProjectCard.tsx

@@ -0,0 +1,143 @@
+import React, { useState } from "react";
+import { Card, Dropdown, Modal, Input, message } from "antd";
+import { GraphType } from "@/enum";
+import defaultFlowImg from "@/assets/image/flow.png";
+import defaultMindImg from "@/assets/image/mindmap.png";
+import { DeleteGraph, EditGraph } from "@/api/systemDesigner";
+
+export default function ProjectCard({
+  record,
+  onFresh,
+  onDelete,
+}: {
+  record: any;
+  onFresh: () => void;
+  onDelete: () => void;
+}) {
+  const [showMenu, setShowMenu] = useState(false);
+  const handleToEdit = () => {
+    const { origin, pathname } = window.location;
+    if (record.type === GraphType.mindmap) {
+      window.open(`${origin}${pathname}#/mindmap/${record.id}`);
+    } else {
+      window.open(`${origin}${pathname}#/flow/${record.id}`);
+    }
+  };
+
+  const { confirm } = Modal;
+
+  return (
+    <Card
+      hoverable
+      cover={
+        <img
+          style={{
+            height: 120,
+            objectFit: "cover",
+            border: "solid 1px #f5f5f5",
+          }}
+          src={
+            record?.coverImage ||
+            (record.type === GraphType.mindmap
+              ? defaultMindImg
+              : defaultFlowImg)
+          }
+        />
+      }
+      onClick={() => handleToEdit()}
+      onMouseOver={() => setShowMenu(true)}
+      onMouseOut={() => setShowMenu(false)}
+    >
+      {showMenu && (
+        <Dropdown
+          menu={{
+            items: [
+              {
+                key: "1",
+                label: "重命名",
+                onClick: () => {
+                  let name = record.name;
+                  confirm({
+                    title: "重命名",
+                    content: (
+                      <Input
+                        defaultValue={name}
+                        onChange={(e) => {
+                          name = e.target.value;
+                        }}
+                      />
+                    ),
+                    onOk: async () => {
+                      await EditGraph({
+                        id: record.id,
+                        langNameList: [
+                          {
+                            name: "zh-CN",
+                            value: name,
+                          },
+                        ],
+                      });
+                      onFresh?.();
+                      message.success("重命名成功");
+                    },
+                  });
+                },
+              },
+              {
+                key: "2",
+                label: "移动或复制",
+                onClick: () => {},
+              },
+              {
+                key: "3",
+                label: "删除",
+                danger: true,
+                onClick: () => {
+                  confirm({
+                    title: "删除",
+                    content: "确定删除该图形？",
+                    onOk: async () => {
+                      await DeleteGraph({
+                        id: record.id,
+                      });
+                      onDelete?.();
+                      message.success("删除成功");
+                    },
+                  });
+                },
+              },
+            ],
+            onClick: (e) => {
+              e.domEvent.stopPropagation();
+            },
+          }}
+        >
+          <div
+            className="absolute right-8px top-8px cursor-pointer bg-#adadad99 px-12px rounded-4px text-12px line-height-16px color-#fff"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            <i className="iconfont icon-a-zu10687" />
+          </div>
+        </Dropdown>
+      )}
+      <Card.Meta
+        title={
+          <span>
+            {record.type === GraphType.mindmap ? (
+              <i
+                className={`iconfont icon-siweidaotu_huaban1 mr-8px`}
+                style={{color: '#9ae396'}}
+              />
+            ) : (
+              <i className={`iconfont icon-liuchengtu color-#067bef mr-8px`} />
+            )}
+            {record.name}
+          </span>
+        }
+        description={`更新于: ${record.updatedTime}`}
+      />
+    </Card>
+  );
+}

apps/designer/src/utils/index.ts

@@ -1,5 +1,6 @@
 export * from './hander';
 import { AddGraph } from "@/api/systemDesigner";
+import { GraphType } from '@/enum';
 
 /**
  * 打印图片
@@ -45,11 +46,12 @@ export const createNew = async (type: string) => {
   const res = await AddGraph({ type });
   const id = res?.result?.graph?.id;
   if(!id) return false;
+  const { origin, pathname } = window.location;
   // todo创建图形
-  if(type === '1') {
-    window.open("/mindmap/" + id);
+  if(type === GraphType.mindmap) {
+    window.open(`${origin}${pathname}#/mindmap/${id}`);
   } else {
-    window.open("/flow/" + id);
+    window.open(`${origin}${pathname}#/flow/${id}`);
   }
   return id;
 };