feat: 增加根据纯文本生成网状结构的菜单栏按钮

Littlefean · Littlefean · commit 44412679adf0 · 2025-09-21T02:59:40.000+08:00
diff --git a/app/src/core/service/GlobalMenu.tsx b/app/src/core/service/GlobalMenu.tsx
@@ -1,4 +1,3 @@
-import { Button } from "@/components/ui/button";
 import { Dialog } from "@/components/ui/dialog";
 import {
   Menubar,
@@ -12,15 +11,14 @@ import {
   MenubarTrigger,
 } from "@/components/ui/menubar";
 
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
 import { loadAllServicesAfterInit, loadAllServicesBeforeInit } from "@/core/loadAllServices";
 import { Project } from "@/core/Project";
 import { activeProjectAtom, isClassroomModeAtom, projectsAtom, store } from "@/state";
 import AIWindow from "@/sub/AIWindow";
 import AttachmentsWindow from "@/sub/AttachmentsWindow";
 import ExportPngWindow from "@/sub/ExportPngWindow";
 import FindWindow from "@/sub/FindWindow";
+import GenerateNodeTree, { GenerateNodeGraph } from "@/sub/GenerateNodeWindow";
 import LoginWindow from "@/sub/LoginWindow";
 import NodeDetailsWindow from "@/sub/NodeDetailsWindow";
 import RecentFilesWindow from "@/sub/RecentFilesWindow";
@@ -29,9 +27,8 @@ import TestWindow from "@/sub/TestWindow";
 import UserWindow from "@/sub/UserWindow";
 import { getDeviceId } from "@/utils/otherApi";
 import { PathString } from "@/utils/pathString";
-import { Color, Vector } from "@graphif/data-structures";
+import { Color } from "@graphif/data-structures";
 import { deserialize, serialize } from "@graphif/serializer";
-import { Rectangle } from "@graphif/shapes";
 import { Decoder } from "@msgpack/msgpack";
 import { getVersion } from "@tauri-apps/api/app";
 import { appCacheDir, dataDir, join } from "@tauri-apps/api/path";
@@ -59,23 +56,26 @@ import {
   FileOutput,
   FilePlus,
   Folder,
-  Images,
   FolderClock,
   FolderCog,
   FolderOpen,
   FolderTree,
   Frown,
   Fullscreen,
+  GitCompareArrows,
+  Images,
   Keyboard,
   LayoutGrid,
   Loader,
   MapPin,
   MessageCircleWarning,
   MousePointer2,
+  Network,
   Palette,
   Paperclip,
   PersonStanding,
   PictureInPicture2,
+  Plus,
   Rabbit,
   Radiation,
   Redo,
@@ -101,11 +101,10 @@ import { ProjectUpgrader } from "../stage/ProjectUpgrader";
 import { LineEdge } from "../stage/stageObject/association/LineEdge";
 import { TextNode } from "../stage/stageObject/entity/TextNode";
 import { RecentFileManager } from "./dataFileService/RecentFileManager";
+import { DragFileIntoStageEngine } from "./dataManageService/dragFileIntoStageEngine/dragFileIntoStageEngine";
 import { FeatureFlags } from "./FeatureFlags";
 import { Settings } from "./Settings";
-import { SubWindow } from "./SubWindow";
 import { Telemetry } from "./Telemetry";
-import { DragFileIntoStageEngine } from "./dataManageService/dragFileIntoStageEngine/dragFileIntoStageEngine";
 
 const Content = MenubarContent;
 const Item = MenubarItem;
@@ -579,90 +578,26 @@ export function GlobalMenu() {
           {/* 生成子菜单 */}
           <Sub>
             <SubTrigger>
-              <RefreshCcwDot />
+              <Plus />
               {t("actions.generate.title")}
             </SubTrigger>
             <SubContent>
               <Item
                 onClick={async () => {
-                  // 创建自定义对话框
-                  const result = await new Promise<{ text: string; indention: number } | undefined>((resolve) => {
-                    function CustomDialog({ winId }: { winId?: string }) {
-                      const [text, setText] = useState("");
-                      const [indention, setIndention] = useState("4");
-
-                      return (
-                        <div className="space-y-4 p-6">
-                          <div>
-                            <h3 className="mb-2 text-xl font-semibold">
-                              {t("actions.generate.generateNodeTreeByText")}
-                            </h3>
-                            <p className="text-muted-foreground mb-4">
-                              {t("actions.generate.generateNodeTreeByTextDescription")}
-                            </p>
-                          </div>
-                          <Textarea
-                            value={text}
-                            onChange={(e) => setText(e.target.value)}
-                            placeholder={t("actions.generate.generateNodeTreeByTextPlaceholder")}
-                            className="min-h-[200px]"
-                          />
-                          <div className="flex items-center gap-2">
-                            <label htmlFor="indention">{t("actions.generate.indention")}:</label>
-                            <Input
-                              id="indention"
-                              type="number"
-                              value={indention}
-                              onChange={(e) => setIndention(e.target.value)}
-                              min="1"
-                              max="10"
-                              className="w-20"
-                            />
-                          </div>
-                          <div className="flex justify-end gap-2">
-                            <Button
-                              variant="outline"
-                              onClick={() => {
-                                resolve(undefined);
-                                setTimeout(() => {
-                                  SubWindow.close(winId!);
-                                }, 100);
-                              }}
-                            >
-                              {t("actions.cancel")}
-                            </Button>
-                            <Button
-                              onClick={() => {
-                                resolve({ text, indention: parseInt(indention) || 4 });
-                                setTimeout(() => {
-                                  SubWindow.close(winId!);
-                                }, 100);
-                              }}
-                            >
-                              {t("actions.confirm")}
-                            </Button>
-                          </div>
-                        </div>
-                      );
-                    }
-
-                    SubWindow.create({
-                      title: t("actions.generate.generateNodeTreeByText"),
-                      titleBarOverlay: true,
-                      closable: true,
-                      rect: new Rectangle(Vector.same(100), new Vector(600, 450)),
-                      children: <CustomDialog />,
-                    });
-                  });
-
-                  if (result) {
-                    activeProject?.stageManager.generateNodeTreeByText(result.text, result.indention);
-                  }
+                  GenerateNodeTree.open();
                 }}
               >
-                <RefreshCcwDot />
+                <Network className="-rotate-90" />
                 {t("actions.generate.generateNodeTreeByText")}
               </Item>
+              <Item
+                onClick={async () => {
+                  GenerateNodeGraph.open();
+                }}
+              >
+                <GitCompareArrows />
+                {t("actions.generate.generateNodeGraphByText")}
+              </Item>
             </SubContent>
           </Sub>
           {/* 清空舞台最不常用，放在最后一个 */}
diff --git a/app/src/core/stage/stageManager/StageManager.tsx b/app/src/core/stage/stageManager/StageManager.tsx
@@ -574,8 +574,12 @@ export class StageManager {
   }
 
   generateNodeGraphByText(text: string, location = this.project.camera.location) {
-    this.project.nodeAdder.addNodeGraphByText(text, location);
-    this.project.historyManager.recordStep();
+    try {
+      this.project.nodeAdder.addNodeGraphByText(text, location);
+      this.project.historyManager.recordStep();
+    } catch (e: any) {
+      toast.error(e.message);
+    }
   }
 
   generateNodeByMarkdown(text: string, location = this.project.camera.location) {
diff --git a/app/src/core/stage/stageManager/concreteMethods/StageNodeAdder.tsx b/app/src/core/stage/stageManager/concreteMethods/StageNodeAdder.tsx
@@ -179,7 +179,7 @@ export class NodeAdder {
   }
   /**
    * 通过纯文本生成网状结构
-   *
+   * 这个函数不稳定，可能会随时throw错误
    * @param text 网状结构的格式文本
    * @param diffLocation
    */
@@ -256,7 +256,15 @@ export class NodeAdder {
           }
           const leftContentList = leftContent.split("-");
           if (leftContentList.length !== 2) {
-            throw new Error(`解析时出现错误: "${line}"，左侧内容应该只有两个名称`);
+            if (leftContentList.length === 1) {
+              throw new Error(
+                `解析时出现错误: "${line}"，此行被识别为连线上有文字的行，中间的连接线应该是 "-->"，而不是 "->"`,
+              );
+            } else {
+              throw new Error(
+                `解析时出现错误: "${line}"，此行被识别为连线上有文字的行，短横线 “-” 左侧内容应该确保只有两个名称`,
+              );
+            }
           }
           const startName = leftContentList[0].trim();
           const edgeText = leftContentList[1].trim();
diff --git a/app/src/locales/zh_CN.yml b/app/src/locales/zh_CN.yml
@@ -60,6 +60,15 @@ globalMenu:
       generateNodeTreeByTextDescription: 请输入树状结构文本，每行代表一个节点，缩进表示层级关系
       generateNodeTreeByTextPlaceholder: 输入树状结构文本...
       indention: 缩进字符数
+      generateNodeGraphByText: 根据纯文本生成网状结构
+      generateNodeGraphByTextDescription: 请输入网状结构文本，每行代表一个关系，每一行的格式为 `XXX --> XXX` 
+      generateNodeGraphByTextPlaceholder: | 
+        张三 -喜欢-> 李四
+        李四 -讨厌-> 王五
+        王五 -欣赏-> 张三
+        A --> B
+        B --> C
+        C --> D
   settings:
     title: 设置
     appearance: 个性化
diff --git a/app/src/sub/GenerateNodeWindow.tsx b/app/src/sub/GenerateNodeWindow.tsx
@@ -0,0 +1,106 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { SubWindow } from "@/core/service/SubWindow";
+import { activeProjectAtom } from "@/state";
+import { Vector } from "@graphif/data-structures";
+import { Rectangle } from "@graphif/shapes";
+import { useAtom } from "jotai";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export default function GenerateNodeTree() {
+  const [text, setText] = useState("");
+  const [indention, setIndention] = useState("4");
+  const { t } = useTranslation("globalMenu");
+
+  const [activeProject] = useAtom(activeProjectAtom);
+
+  return (
+    <div className="space-y-4 p-6">
+      <div>
+        <h3 className="mb-2 text-xl font-semibold">{t("actions.generate.generateNodeTreeByText")}</h3>
+        <p className="text-muted-foreground mb-4">{t("actions.generate.generateNodeTreeByTextDescription")}</p>
+        <p className="text-xs opacity-50">
+          注意：2.0.20+版本，生成树形结构后，先框选所有节点，再按ctrl键+框选所有节点，变成选中所有连线，将所有树内的连线改为从右侧发出，左侧接收，然后再alt
+          shift f
+          格式化，即可自动布局向右的树状结构（若感到疑惑可进群提问管理员或群主，后期此功能将会继续完善和提高新手友好性）
+        </p>
+      </div>
+      <Textarea
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        placeholder={t("actions.generate.generateNodeTreeByTextPlaceholder")}
+        className="min-h-[200px]"
+      />
+      <div className="flex items-center gap-2">
+        <label htmlFor="indention">{t("actions.generate.indention")}:</label>
+        <Input
+          id="indention"
+          type="number"
+          value={indention}
+          onChange={(e) => setIndention(e.target.value)}
+          min="1"
+          max="10"
+          className="w-20"
+        />
+      </div>
+      <div className="flex justify-end gap-2">
+        <Button
+          onClick={() => {
+            activeProject?.stageManager.generateNodeTreeByText(text, parseInt(indention) || 4);
+          }}
+        >
+          {t("actions.confirm")}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+GenerateNodeTree.open = () => {
+  SubWindow.create({
+    title: "生成节点群",
+    children: <GenerateNodeTree />,
+    rect: new Rectangle(new Vector(100, 100), new Vector(500, 600)),
+  });
+};
+
+export function GenerateNodeGraph() {
+  const [text, setText] = useState("");
+  const { t } = useTranslation("globalMenu");
+
+  const [activeProject] = useAtom(activeProjectAtom);
+
+  return (
+    <div>
+      <div>
+        <h3 className="mb-2 text-xl font-semibold">{t("actions.generate.generateNodeGraphByText")}</h3>
+        <p className="text-muted-foreground mb-4">{t("actions.generate.generateNodeGraphByTextDescription")}</p>
+      </div>
+      <Textarea
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        placeholder={t("actions.generate.generateNodeGraphByTextPlaceholder")}
+        className="min-h-[200px]"
+      />
+      <div className="flex justify-end gap-2">
+        <Button
+          onClick={() => {
+            activeProject?.stageManager.generateNodeGraphByText(text);
+          }}
+        >
+          {t("actions.confirm")}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+GenerateNodeGraph.open = () => {
+  SubWindow.create({
+    title: "生成节点网",
+    children: <GenerateNodeGraph />,
+    rect: new Rectangle(new Vector(100, 100), new Vector(600, 600)),
+  });
+};

Original file line number	Diff line number	Diff line change
`@@ -574,8 +574,12 @@ export class StageManager {`
`574`	`574`	`}`
`575`	`575`
`576`	`576`	`generateNodeGraphByText(text: string, location = this.project.camera.location) {`
`577`		`- this.project.nodeAdder.addNodeGraphByText(text, location);`
`578`		`- this.project.historyManager.recordStep();`
	`577`	`+ try {`
	`578`	`+ this.project.nodeAdder.addNodeGraphByText(text, location);`
	`579`	`+ this.project.historyManager.recordStep();`
	`580`	`+ } catch (e: any) {`
	`581`	`+ toast.error(e.message);`
	`582`	`+ }`
`579`	`583`	`}`
`580`	`584`
`581`	`585`	`generateNodeByMarkdown(text: string, location = this.project.camera.location) {`