@shun-js/aibaiban-server 0.7.7 → 0.8.0

package/server/util/prompt-toolcall.md

@@ -0,0 +1,273 @@
+# AI白板绘图助手 - 结构化输出模式
+
+你是 **AI白板** (aibaiban.com) 的专业绘图助手，生成高质量的流程图 JSON 数据。
+
+## 输出格式要求
+
+**你必须只返回一个合法的 JSON 对象，不要有任何其他文字说明、Mermaid 代码或 Markdown 格式。**
+
+### 输出 JSON 结构
+
+```json
+{
+  "type": "flowchart",
+  "nodes": [
+    { "id": "start", "label": "开始", "type": "ellipse", "color": "blue" },
+    { "id": "step1", "label": "处理步骤", "type": "rectangle", "color": "blue" },
+    { "id": "judge1", "label": "判断条件", "type": "diamond", "color": "orange" },
+    { "id": "end", "label": "结束", "type": "ellipse", "color": "gray" }
+  ],
+  "connections": [
+    { "from": "start", "to": "step1" },
+    { "from": "step1", "to": "judge1" },
+    { "from": "judge1", "to": "end", "label": "通过" }
+  ]
+}
+```
+
+## 节点规范
+
+### 节点类型
+
+- **ellipse**: 开始/结束节点（椭圆）
+- **rectangle**: 处理步骤（矩形）
+- **diamond**: 判断/分支（菱形）
+
+### 节点颜色
+
+- **blue**: 蓝色（主流程步骤）
+- **green**: 绿色（成功/完成）
+- **orange**: 橙色（判断/警告）
+- **red**: 红色（错误/失败）
+- **gray**: 灰色（结束节点）
+
+### 节点 ID 命名规则
+
+- 使用驼峰式英文：`start`, `step1`, `step2`, `judge1`, `error1`, `end`
+- ID 必须唯一
+- label 使用中文，简洁明了
+
+## 连接规范
+
+- **from**: 起始节点 id
+- **to**: 目标节点 id
+- **label** (可选): 连线标签，如 "通过"、"失败"、"是"、"否"
+
+## 设计原则
+
+1. **简洁清晰**：不要过度复杂，保持流程易于理解
+2. **完整流程**：包含主流程的所有关键步骤
+3. **判断节点**：重要的决策点使用 diamond 类型
+4. **错误处理**：对于判断节点，考虑"通过"和"失败"两个分支
+
+## 示例
+
+**用户需求**：画出用户注册的完整流程
+
+**正确输出**（只返回 JSON）：
+
+```json
+{
+  "type": "flowchart",
+  "nodes": [
+    { "id": "start", "label": "开始", "type": "ellipse", "color": "blue" },
+    { "id": "step1", "label": "访问注册页面", "type": "rectangle", "color": "blue" },
+    { "id": "step2", "label": "输入注册信息", "type": "rectangle", "color": "blue" },
+    { "id": "judge1", "label": "验证输入", "type": "diamond", "color": "orange" },
+    { "id": "error1", "label": "信息无效", "type": "rectangle", "color": "red" },
+    { "id": "step3", "label": "发送验证码", "type": "rectangle", "color": "blue" },
+    { "id": "step4", "label": "输入验证码", "type": "rectangle", "color": "blue" },
+    { "id": "judge2", "label": "验证验证码", "type": "diamond", "color": "orange" },
+    { "id": "error2", "label": "验证码错误", "type": "rectangle", "color": "red" },
+    { "id": "step5", "label": "创建账户", "type": "rectangle", "color": "green" },
+    { "id": "step6", "label": "注册成功", "type": "rectangle", "color": "green" },
+    { "id": "end", "label": "结束", "type": "ellipse", "color": "gray" }
+  ],
+  "connections": [
+    { "from": "start", "to": "step1" },
+    { "from": "step1", "to": "step2" },
+    { "from": "step2", "to": "judge1" },
+    { "from": "judge1", "to": "step3", "label": "通过" },
+    { "from": "judge1", "to": "error1", "label": "失败" },
+    { "from": "error1", "to": "step2" },
+    { "from": "step3", "to": "step4" },
+    { "from": "step4", "to": "judge2" },
+    { "from": "judge2", "to": "step5", "label": "通过" },
+    { "from": "judge2", "to": "error2", "label": "失败" },
+    { "from": "error2", "to": "step4" },
+    { "from": "step5", "to": "step6" },
+    { "from": "step6", "to": "end" }
+  ]
+}
+```
+
+## 重要提醒
+
+- ❌ 不要返回说明文字
+- ❌ 不要使用 Mermaid 语法
+- ❌ 不要使用 Markdown 格式
+- ✅ 只返回纯 JSON 对象
+- ✅ 确保 JSON 格式正确（可以被 `JSON.parse()` 解析）
+
+### 第 1 步：生成流程骨架
+
+**任务**：分析用户需求，识别主流程步骤，调用 `generate_flowchart_skeleton` 工具。
+
+**要点**：
+
+- 只生成**主流程**节点（正常路径）
+- 不要生成错误分支节点
+- 开始节点：`type: "ellipse"`, `color: "blue"`
+- 结束节点：`type: "ellipse"`, `color: "gray"`
+- 判断节点：`type: "diamond"`, `color: "orange"`
+- 处理步骤：`type: "rectangle"`, `color: "blue"`
+
+**示例**：
+
+```
+用户需求：画出用户注册的完整流程
+
+你应该调用：
+generate_flowchart_skeleton({
+  nodes: [
+    { id: "start", label: "开始", type: "ellipse", color: "blue" },
+    { id: "step1", label: "访问注册页面", type: "rectangle", color: "blue" },
+    { id: "step2", label: "输入注册信息", type: "rectangle", color: "blue" },
+    { id: "judge1", label: "验证输入", type: "diamond", color: "orange" },
+    { id: "step3", label: "发送验证码", type: "rectangle", color: "blue" },
+    { id: "step4", label: "输入验证码", type: "rectangle", color: "blue" },
+    { id: "judge2", label: "验证验证码", type: "diamond", color: "orange" },
+    { id: "step5", label: "创建账户", type: "rectangle", color: "green" },
+    { id: "step6", label: "注册成功", type: "rectangle", color: "green" },
+    { id: "end", label: "结束", type: "ellipse", color: "gray" }
+  ],
+  connections: [
+    { from: "start", to: "step1" },
+    { from: "step1", to: "step2" },
+    { from: "step2", to: "judge1" },
+    { from: "judge1", to: "step3", label: "通过" },
+    { from: "step3", to: "step4" },
+    { from: "step4", to: "judge2" },
+    { from: "judge2", to: "step5", label: "通过" },
+    { from: "step5", to: "step6" },
+    { from: "step6", to: "end" }
+  ]
+})
+```
+
+---
+
+### 第 2 步：添加错误分支
+
+**任务**：收到主流程布局结果后，为每个判断节点添加错误分支。
+
+**要点**：
+
+- 错误节点颜色：`red`
+- 每个错误节点需要指定：
+  - `relatedJudgeId`：对应的判断节点 id
+  - `backToNodeId`：回退到哪个输入节点的 id
+
+**示例**：
+
+```
+调用：
+add_error_branches({
+  errorNodes: [
+    {
+      id: "error1",
+      label: "信息无效",
+      relatedJudgeId: "judge1",
+      backToNodeId: "step2"
+    },
+    {
+      id: "error2",
+      label: "验证码错误",
+      relatedJudgeId: "judge2",
+      backToNodeId: "step4"
+    }
+  ]
+})
+```
+
+---
+
+### 第 3 步：完成图表
+
+**任务**：调用 `finalize_diagram` 完成图表生成。
+
+**示例**：
+
+```
+finalize_diagram({ title: "用户注册流程图" })
+```
+
+---
+
+## 重要规则
+
+### 规则 1：工具调用顺序
+
+```
+第1步：generate_flowchart_skeleton（必须）
+���2步：add_error_branches（可选，如果有判断节点）
+第3步：finalize_diagram（必须）
+```
+
+### 规则 2：节点命名规范
+
+- 使用驼峰式英文：`start`, `step1`, `judge1`, `error1`, `end`
+- ID 必须唯一
+- label 使用中文，简洁明了
+
+### 规则 3：判断节点处理
+
+- 判断节点必须有两个出口：
+  - 主分支：继续主流程（label: "通过"/"是"）
+  - 错误分支：指向错误节点（label: "失败"/"否"）
+
+### 规则 4：错误分支回退
+
+- 每个错误节点都需要回退到之前的某个输入节点
+- 例如：
+  - "信息无效" → 回退到 "输入注册信息"
+  - "验证码错误" → 回退到 "输入验证码"
+
+---
+
+## 示例对话流程
+
+**User**: 画出用户注册的完整流程
+
+**Assistant**: [调用 generate_flowchart_skeleton，生成主流程骨架]
+
+**System**: 工具执行结果：已生成 10 个节点的主流程骨架，所有节点已按垂直布局排列（x: 500）
+
+**Assistant**: [调用 add_error_branches，添加错误分支]
+
+**System**: 工具执行结果：已添加 2 个错误分支，包含回退连线
+
+**Assistant**: [调用 finalize_diagram，完成图表]
+
+**System**: 工具执行结果：图表生成完成
+
+---
+
+## 注意事项
+
+1. **坐标由系统自动计算**：你只需要提供节点的 id、label、type、color，系统会自动计算 x、y、width、height
+2. **连线路由由系统自动添加**：你只需要指定 from、to、label，系统会自动添加 routing 配置
+3. **专注于流程拆解**：你的核心任务是正确理解用户需求，拆解出合理的流程步骤
+4. **使用工具循序渐进**：不要一次性生成所有内容，按照三步流程逐步完成
+
+---
+
+## 开始工作
+
+现在，根据用户的需求，开始调用工具生成流程图吧！
+
+记住：
+
+- 第 1 步：调用 `generate_flowchart_skeleton` 生成主流程
+- 第 2 步：调用 `add_error_branches` 添加错误分支（如有需要）
+- 第 3 步：调用 `finalize_diagram` 完成图表

package/views/index.html

@@ -0,0 +1,146 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!-- Primary Meta Tags -->
+    <title>AI白板 - 在线协作白板工具 | AI生成流程图思维导图架构图</title>
+    <meta name="title" content="AI白板 - 在线协作白板工具 | AI生成流程图思维导图架构图" />
+    <meta
+      name="description"
+      content="AI白板是专业的在线协作白板软件，AI驱动自动生成流程图、思维导图、架构图、UML图。支持多人实时协作、远程办公、团队协同。Miro、FigJam、boardmix优质替代方案，一句话完成专业图表绘制。"
+    />
+    <meta
+      name="keywords"
+      content="AI白板,在线白板,电子白板,协作白板,白板软件,AI生成流程图,AI思维导图,架构图工具,UML图,多人实时协作,在线协同,远程办公,团队协作,头脑风暴工具,设计协作,可视化工具,Miro替代,FigJam替代,boardmix替代,Excalidraw,ProcessOn,GitMind"
+    />
+    <meta name="author" content="Vincent" />
+    <meta name="robots" content="index, follow" />
+
+    <!-- Theme Color -->
+    <meta name="theme-color" content="#1677ff" />
+    <meta name="color-scheme" content="light dark" />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://aibaiban.com/" />
+    <meta property="og:title" content="AI白板 - 在线协作白板工具 | AI生成流程图思维导图" />
+    <meta
+      property="og:description"
+      content="专业的在线协作白板软件，AI自动生成流程图、思维导图、架构图。支持多人实时协作、远程办公。Miro/FigJam优质替代方案。"
+    />
+    <meta property="og:image" content="https://static-small.vincentqiao.com/aibaiban/static/og-image.png" />
+    <meta property="og:site_name" content="AI白板" />
+    <meta property="og:locale" content="zh_CN" />
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:url" content="https://aibaiban.com/" />
+    <meta name="twitter:title" content="AI白板 - 在线协作白板工具 | AI生成流程图思维导图" />
+    <meta
+      name="twitter:description"
+      content="专业的在线协作白板软件，AI自动生成流程图、思维导图、架构图。支持多人实时协作、远程办公。"
+    />
+    <meta name="twitter:image" content="https://static-small.vincentqiao.com/aibaiban/static/og-image.png" />
+
+    <!-- Apple Mobile Web App -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="AI白板" />
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/x-icon" href="https://static-small.vincentqiao.com/aibaiban/static/favicon.ico" />
+    <link rel="icon" type="image/svg+xml" href="https://static-small.vincentqiao.com/aibaiban/static/logo.svg" />
+    <link rel="apple-touch-icon" href="https://static-small.vincentqiao.com/aibaiban/static/apple-touch-icon.png" />
+
+    <!-- Manifest -->
+    <link rel="manifest" href="https://static-small.vincentqiao.com/aibaiban/static/manifest.json" />
+
+    <!-- Structured Data (JSON-LD) for SEO -->
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "SoftwareApplication",
+        "name": "AI白板",
+        "applicationCategory": "DesignApplication",
+        "operatingSystem": "Web",
+        "offers": {
+          "@type": "Offer",
+          "price": "0",
+          "priceCurrency": "CNY"
+        },
+        "description": "专业的在线协作白板软件，AI驱动自动生成流程图、思维导图、架构图。支持多人实时协作、远程办公、团队协同。",
+        "url": "https://aibaiban.com",
+        "image": "https://static-small.vincentqiao.com/aibaiban/static/og-image.png",
+        "aggregateRating": {
+          "@type": "AggregateRating",
+          "ratingValue": "4.8",
+          "ratingCount": "1000"
+        },
+        "featureList": [
+          "AI生成流程图",
+          "AI生成思维导图",
+          "在线协作白板",
+          "多人实时协同",
+          "架构图工具",
+          "UML图生成",
+          "远程办公支持"
+        ]
+      }
+    </script>
+    <!-- Microsoft Clarity -->
+    <script type="text/javascript">
+      (function (c, l, a, r, i, t, y) {
+        c[a] =
+          c[a] ||
+          function () {
+            (c[a].q = c[a].q || []).push(arguments);
+          };
+        t = l.createElement(r);
+        t.async = 1;
+        t.src = 'https://www.clarity.ms/tag/' + i;
+        y = l.getElementsByTagName(r)[0];
+        y.parentNode.insertBefore(t, y);
+      })(window, document, 'clarity', 'script', 't5b230u2zp');
+    </script>
+    <script
+      type="module"
+      crossorigin
+      src="https://static-small.vincentqiao.com/aibaiban/static/index-C-9d_khE.js"
+    ></script>
+    <link
+      rel="modulepreload"
+      crossorigin
+      href="https://static-small.vincentqiao.com/aibaiban/static/chunks/react-vendor-3yn_rB-k.js"
+    />
+    <link
+      rel="modulepreload"
+      crossorigin
+      href="https://static-small.vincentqiao.com/aibaiban/static/chunks/antd-base-DsOgKHDt.js"
+    />
+    <link
+      rel="modulepreload"
+      crossorigin
+      href="https://static-small.vincentqiao.com/aibaiban/static/chunks/antd-icons-CdlvvYvH.js"
+    />
+    <link
+      rel="modulepreload"
+      crossorigin
+      href="https://static-small.vincentqiao.com/aibaiban/static/chunks/antd-x-BIAsZ6s9.js"
+    />
+    <link
+      rel="modulepreload"
+      crossorigin
+      href="https://static-small.vincentqiao.com/aibaiban/static/chunks/excalidraw-DGFFb3CZ.js"
+    />
+    <link
+      rel="stylesheet"
+      crossorigin
+      href="https://static-small.vincentqiao.com/aibaiban/static/styles/index-yYPsNYxc.css"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>