浏览代码

fix: 修改流程图连接桩,ai提示词调整

liaojiaxing 2 周之前
父节点
当前提交
73722531e6

+ 17 - 2
apps/designer/src/components/ai/AIChat.tsx

@@ -52,6 +52,11 @@ const roles: GetProp<typeof Bubble.List, "roles"> = {
     messageRender: (content) => {
       return <div style={{ whiteSpace: "pre-wrap" }}>{content}</div>;
     },
+    styles: {
+      content: {
+        backgroundColor: "#d2e1fb",
+      },
+    },
   },
 };
 
@@ -75,7 +80,7 @@ export default function AIChat(props: { onClose?: () => void }) {
     };
   }, []);
 
-  const { loading, onRequest, cancel, messages, setMessages, addConversation } =
+  const { loading, onRequest, cancel, messages, setMessages, addConversation, conversationList } =
     useChat({
       app_name: "system_design",
       onSuccess: (msg) => {
@@ -149,6 +154,15 @@ export default function AIChat(props: { onClose?: () => void }) {
     cancel();
   };
 
+  const historyItems = useMemo(() => {
+    return (conversationList || []).map(item => {
+      return {
+        key: item.id,
+        label: item.label
+      }
+    })
+  }, [conversationList]);
+
   return (
     <div
       className="flex-1 h-full flex flex-col"
@@ -173,9 +187,10 @@ export default function AIChat(props: { onClose?: () => void }) {
             ></Button>
           </Tooltip>
           <Dropdown
-            menu={{ items: [] }}
+            menu={{ items: historyItems }}
             trigger={["click"]}
             placement="bottomLeft"
+            className="max-h-200px"
             arrow
           >
             <Tooltip title="历史记录">

+ 25 - 20
apps/designer/src/components/ai/AiCreator.tsx

@@ -3,7 +3,7 @@ import {
   CloseOutlined,
   SendOutlined,
   CaretDownOutlined,
-  LoadingOutlined
+  LoadingOutlined,
 } from "@ant-design/icons";
 import { Button, Tooltip, Input, Form, Dropdown, message } from "antd";
 import type { DropDownProps } from "antd";
@@ -99,7 +99,8 @@ export default function AICreator(props: {
   const onSubmit = () => {
     if (input.trim()) {
       onRequest(
-        `设计一个${graphType}, 返回图形json数据, 具体需求描述:${input}`,
+        `#角色:你是一个系统设计助手,根据需求部分的描述用流程图工具为用户生成${graphType}图形的json数据,不需要返回其他内容。
+#需求:${input}`,
         undefined,
         input
       );
@@ -199,10 +200,10 @@ export default function AICreator(props: {
         }
       }
       // 从边线中提取文本
-      if(cell.isEdge()) {
+      if (cell.isEdge()) {
         (cell.labels || []).forEach((label) => {
           const labelText = (label?.attrs?.label?.text as string)?.trim();
-          if(labelText) {
+          if (labelText) {
             if (!labelMap[labelText]) {
               labelMap[labelText] = [
                 { cell: cell.id, key: "label", cellType: cell.shape },
@@ -224,10 +225,10 @@ export default function AICreator(props: {
   // 替换节点文本内容
   const handleReplace = (labelMap: LabelMap, data: Record<string, string>) => {
     const keyMap: Record<string, string> = data;
-    if(Array.isArray(data)) {
-      data.forEach(item => {
-        keyMap[item.original] = item.value
-      })
+    if (Array.isArray(data)) {
+      data.forEach((item) => {
+        keyMap[item.original] = item.value;
+      });
     }
     Object.keys(keyMap).forEach((key) => {
       if (labelMap[key]) {
@@ -241,16 +242,20 @@ export default function AICreator(props: {
           } else if (cell?.isEdge()) {
             // 设置边线文本
             const labels = cell.getLabels();
-            cell.setLabels(labels.map(item => {
-              return {
-                ...item,
-                attrs: {
-                  label: {
-                    text: keyMap?.[(item.attrs?.label?.text as string)?.trim()] || item.attrs?.label?.text
-                  }
-                }
-              }
-            }))
+            cell.setLabels(
+              labels.map((item) => {
+                return {
+                  ...item,
+                  attrs: {
+                    label: {
+                      text:
+                        keyMap?.[(item.attrs?.label?.text as string)?.trim()] ||
+                        item.attrs?.label?.text,
+                    },
+                  },
+                };
+              })
+            );
           }
         });
       }
@@ -365,7 +370,7 @@ export default function AICreator(props: {
     const data = JSON.stringify(Object.keys(labelMap));
     let result = "";
     onRequest(
-      `翻译成${lang === 'en' ? '英文' : '中文'},需要翻译的数据:${data}`,
+      `翻译成${lang === "en" ? "英文" : "中文"},需要翻译的数据:${data}`,
       {
         onUpdate: (data) => {
           result += data.answer;
@@ -485,7 +490,7 @@ export default function AICreator(props: {
                   <Button
                     type="primary"
                     shape="circle"
-                    icon={<LoadingOutlined/>}
+                    icon={<LoadingOutlined />}
                     onClick={handleStop}
                   ></Button>
                 </Tooltip>

+ 1 - 3
apps/designer/src/config/data.ts

@@ -143,9 +143,7 @@ export const BaseEdge: Edge.Properties = {
       stroke: "#323232",
       strokeDasharray: LineType.solid,
       strokeWidth: 2,
-      sourceMarker: {
-        name: "",
-      },
+      sourceMarker: null,
       targetMarker: {
         name: "block",
       },

+ 1 - 0
apps/designer/src/models/flowchartModel.ts

@@ -217,6 +217,7 @@ export default function flowchartModel() {
         },
         ports: node?.ports || defaultDataByTheme.ports,
       });
+
       // 右键菜单
       n.addTools({
         name: "contextmenu",

+ 5 - 1
apps/designer/src/models/mindMapModel.ts

@@ -48,8 +48,11 @@ export default function mindMapModel() {
     // 初始化加载数据 清空画布
     if(init) {
       graph?.clearCells();
-      graph?.centerContent();
       historyRef.current = [];
+      graph?.centerContent();
+      setTimeout(() => {
+        graph?.centerContent();
+      }, 200);
     }
 
     if (!init && !isSetting) {
@@ -113,6 +116,7 @@ export default function mindMapModel() {
 
   const pageSettingRef = useRef<MindMapProjectInfo["pageSetting"]>();
 
+  // 画布配置更新
   useEffect(() => {
     if (mindProjectInfo?.pageSetting && graph) {
       if (isEqual(pageSettingRef.current, mindProjectInfo?.pageSetting)) {

+ 2 - 2
apps/designer/src/pages/flow/components/Content/index.tsx

@@ -90,8 +90,8 @@ export default function Content() {
         allowPort: true,
         allowMulti: true,
         highlight: false,
-        // anchor: "center",
-        // connectionPoint: "anchor",
+        anchor: "center",
+        connectionPoint: "anchor",
         snap: {
           radius: 20,
         },

+ 1 - 1
apps/designer/src/pages/flow/components/ToolBar/index.tsx

@@ -783,7 +783,7 @@ export default function ToolBar() {
                     key: "1",
                     label: (
                       <div>
-                        <i className="iconfont icon-duihua mr-8px" />
+                        <i className="iconfont icon-AIduihua text-[#2984fd] mr-8px" />
                         AI对话
                       </div>
                     ),

+ 4 - 3
apps/designer/src/pages/mindmap/components/Config/AiCreator.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from "react";
-import { CloseOutlined, SendOutlined } from "@ant-design/icons";
+import { CloseOutlined, LoadingOutlined, SendOutlined } from "@ant-design/icons";
 import { Button, Tooltip, Input, Form, message } from "antd";
 import { useChat } from "@/hooks/useChat";
 import { Cell } from "@antv/x6";
@@ -75,7 +75,8 @@ export default function AICreator(props: {
   // 处理提交
   const onSubmit = () => {
     if (input.trim()) {
-      onRequest(`设计思维导图, 具体需求描述:${input}`, undefined, input);
+      onRequest(`#角色:你是一个思维导图设计助手,根据需求部分的描述为用户使用设计思维导图工具生成对应的json数据
+        #需求:${input}`, undefined, input);
 
       messageApi.open({
         key: messageKey,
@@ -404,7 +405,7 @@ export default function AICreator(props: {
                   <Button
                     type="primary"
                     shape="circle"
-                    icon={<i className="iconfont icon-stopcircle" />}
+                    icon={<LoadingOutlined />}
                     onClick={handleStop}
                   ></Button>
                 </Tooltip>

+ 3 - 2
apps/designer/src/pages/mindmap/components/Config/index.tsx

@@ -13,6 +13,7 @@ import IconConfig from "./IconConfig";
 import Remark from "./Remark";
 import NodeAttrs from "@/components/NodeAttrs";
 import AICreator from "./AiCreator";
+import AIChat from "@/components/ai/AIChat";
 
 import { buildTopic } from "../../mindMap";
 import { TopicType } from "@/enum";
@@ -130,7 +131,7 @@ export default function index() {
         onMouseDown={handleMouseDown}
       ></div>
       <div
-        className="relative h-full flex-1"
+        className="relative h-full w-full"
         style={{ display: rightToobarActive ? "block" : "none" }}
       >
         {rightToobarActive &&
@@ -190,7 +191,7 @@ export default function index() {
         {/* 备注 */}
         {rightToobarActive === "remark" && <Remark />}
         {/* AI对话 */}
-        {/* {rightToobarActive === "ai-chat" && <AIChat onClose={handleCloseAI}/>} */}
+        {rightToobarActive === "ai-chat" && <AIChat onClose={handleCloseAI}/>}
         {/* AI创作 */}
         {rightToobarActive === "ai-creator" && (
           <AICreator

+ 2 - 2
apps/designer/src/pages/mindmap/components/RightToolbar/index.tsx

@@ -19,14 +19,14 @@ export default function index() {
   return (
     <div className="absolute top-8px right-8px">
       <div className="bg-white shadow-md m-b-20px rounded-4px flex flex-col p-8px">
-        {/* <Tooltip placement="bottom" title="AI助手">
+        <Tooltip placement="bottom" title="AI助手">
           <Button
             type="text"
             icon={<i className="iconfont icon-AIduihua text-[#2984fd]" />}
             className={rightToobarActive === "ai-chat" ? "active" : ""}
             onClick={() => rightToolbarActive("ai-chat")}
           />
-        </Tooltip> */}
+        </Tooltip>
         <Tooltip placement="bottom" title="AI创作">
           <Button
             type="text"

+ 5 - 1
apps/er-designer/src/pages/er/components/AICreator.tsx

@@ -295,7 +295,11 @@ export default (props: AICteatorProps) => {
             <Bubble.List autoScroll roles={roles} items={messages} />
           </div>
           <Sender
-            placeholder="如:创建一个用户表"
+            placeholder={
+              assistantType === "generate"
+                ? "如:创建一个用户表"
+                : "请输入咨询问题"
+            }
             prefix={
               <Dropdown
                 menu={{

apps/er-designer/src/pages/er/components/AITable.tsx → apps/er-designer/src/components/ai/AITable.tsx


+ 1 - 1
apps/er-designer/src/pages/detail/index.tsx

@@ -27,7 +27,7 @@ import LangInput from "@/components/LangInput";
 import LangInputTextarea from "@/components/LangInputTextarea";
 import { validateAliasName, validateTableCode } from "@/utils/validator";
 import SyncModal from "@/components/SyncModal";
-import AICreator from "@/pages/er/components/AICreator";
+import AICreator from "@/components/ai/AICreator";
 
 const { Content, Header } = Layout;
 export default function index() {

+ 1 - 1
apps/er-designer/src/pages/er/components/Toolbar.tsx

@@ -3,7 +3,7 @@ import { Tooltip, Dropdown, DropDownProps } from "antd";
 import { CheckOutlined, DownOutlined } from "@ant-design/icons";
 import { useModel } from "umi";
 import TodoDrawer from "./TodoDrawer";
-import AICreator from "./AICreator";
+import AICreator from "../../../components/ai/AICreator";
 import { useFullscreen, useLocalStorageState } from "ahooks";
 
 export default function Toolbar() {