perf: 优化 wiki 组件样式，重置开始章节

kqcoxn · kqcoxn · commit 4c87c5047f60 · 2026-05-31T01:05:33.000+08:00
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -7,7 +7,7 @@
 - 新功能若与现有功能有关，应尽可能复用现有函数，在合适时可以进行方法封装或提升
 - 在合适的时候自主调用相关 skill
 - 如果要撰写 prd、ttd、临时文档等需要放在 `\dev\design` 下
-- 使用中文与我交流
+- 始终使用中文与我交流
 
 ## 建议执行
 
@@ -35,3 +35,19 @@
 > 若需其他框架 API 且本地无文档，可联网检索。
 > 当文档细粒度不够时，可以自行检索 github 源码进行参考
 > 文档内的内容不要修改，相当于只读。
+
+# Project Context
+
+- 名称：MaaPipelineEditor (mpe)
+- 地址：https://github.com/kqcoxn/MaaPipelineEditor
+
+## 项目结构
+
+- **前端（editor）**：`/src`
+- **后端（localbridge / lb）**：`/LocalBridge`
+- **客户端（extremer）**：`/Extremer`
+- **页面嵌入测试（iframe）**：`/Iframe`
+- **文档站（docsite）**：`/docsite`
+- **展示页/主页（landing）**：`/Landing`
+
+> 默认开发需同时完善前后端；客户端由构建流程自动生成。
diff --git a/src/features/wiki/components/WikiBlock.module.less b/src/features/wiki/components/WikiBlock.module.less
@@ -0,0 +1,27 @@
+.markdown {
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  font-size: 16px;
+  line-height: 1.5;
+
+  :global {
+    p,
+    li,
+    td,
+    th,
+    span,
+    blockquote,
+    strong,
+    em,
+    a,
+    code {
+      font-size: 16px !important;
+      line-height: 1.5 !important;
+    }
+
+    ul,
+    ol {
+      padding-left: 1.5em;
+    }
+  }
+}
diff --git a/src/features/wiki/components/WikiBlock.tsx b/src/features/wiki/components/WikiBlock.tsx
@@ -3,14 +3,10 @@ import ReactMarkdown from "react-markdown";
 import { Alert, Typography } from "antd";
 import type { WikiCalloutType, WikiContentBlock } from "../../../wiki/types";
 import { WikiMediaBlock } from "./WikiMediaBlock";
+import style from "./WikiBlock.module.less";
 
 const { Paragraph } = Typography;
 
-const markdownStyle: CSSProperties = {
-  wordBreak: "break-word",
-  overflowWrap: "anywhere",
-};
-
 const codeBlockStyle: CSSProperties = {
   margin: 0,
   padding: 12,
@@ -23,10 +19,20 @@ const codeBlockStyle: CSSProperties = {
 export function WikiBlock({ block }: { block: WikiContentBlock }) {
   switch (block.type) {
     case "paragraph":
-      return <Paragraph style={{ margin: 0 }}>{block.text}</Paragraph>;
+      return (
+        <Paragraph
+          style={{
+            margin: 0,
+            fontSize: 16,
+            lineHeight: 1.5,
+          }}
+        >
+          {block.text}
+        </Paragraph>
+      );
     case "markdown":
       return (
-        <div style={markdownStyle}>
+        <div className={style.markdown}>
           <ReactMarkdown>{block.text}</ReactMarkdown>
         </div>
       );
diff --git a/src/features/wiki/components/WikiModal.tsx b/src/features/wiki/components/WikiModal.tsx
@@ -271,9 +271,9 @@ function WikiHome({
         </Paragraph>
       </div>
       <Space wrap size={8}>
-        <Button onClick={() => onSelectEntry(wikiEntries[0])}>认识 MPE</Button>
+        <Button onClick={() => onSelectEntry(wikiEntries[0])}>介绍</Button>
         <Button onClick={() => onSelectEntry(wikiEntries[1])}>
-          认识工作流编辑器
+          工作流编辑
         </Button>
       </Space>
       <div style={homeGridStyle}>
diff --git a/src/wiki/entries/start/aboutMpe.ts b/src/wiki/entries/start/aboutMpe.ts
@@ -3,60 +3,58 @@ import { createModuleSearchIndex } from "../../searchHelpers";
 
 const module: WikiModule = {
   id: "about-mpe",
-  title: "认识 MPE",
-  summary: "先理解 MPE 主要解决什么问题，再决定用它做编辑、调试还是迁移整理。",
+  title: "介绍",
+  summary: "了解 MPE 的定位、工作原理和核心特性。",
   searchText:
-    "认识 MPE MPE 是什么 Pipeline 编辑器 工作流编辑 调试 迁移 LocalBridge 在线版 MaaPipelineExtremer 特性 轻量 渐进 AI 兼容",
+    "介绍 MPE 是什么 MaaPipelineExtremer Pipeline 编辑器 工作流 可视化 审阅 编辑 MaaFramework React ReactFlow 编译器 解析器 特性",
   steps: [
     {
       id: "what-is-mpe",
-      title: "MPE 主要是做什么的",
-      summary: "MPE 的核心定位是图形化编辑、整理和调试 Maa Pipeline。",
-      keywords: ["MPE 是什么", "Pipeline 编辑器", "工作流编辑"],
+      title: "MPE 是什么",
+      summary: "MPE 的核心定位是图形化编辑、整理和调试 MaaFramework Pipeline。",
+      keywords: ["MPE 是什么", "Pipeline 编辑器", "MaaPipelineExtremer"],
       searchText:
-        "MPE 是什么 Pipeline 编辑器 工作流编辑 节点 字段 连接 调试 迁移 MaaPipelineExtremer React ReactFlow",
+        "MPE MaaPipelineExtremer Pipeline 编辑器 工作流 可视化 审阅 编辑 MaaFramework YAMaaPE 重构",
       blocks: [
         {
           type: "paragraph",
-          text: "MPE（MaaPipelineExtremer）是面向 MaaFramework Pipeline 的图形化审阅与编辑工具。它把节点、字段、连接、导入导出和调试入口集中到同一套工作台里，适合处理新建流程、整理旧文件和定位运行问题。",
+          text: "MaaPipelineExtremer (MPE) 是一款前后端完全分离架构的 MaaFramework Pipeline 工作流式可视化审阅与编辑工具，由 YAMaaPE 重构而来，经资源开发者充分实践与微调。",
         },
         {
           type: "paragraph",
-          text: "底层基于 React + React Flow 构建，采用前后端完全解耦架构：前端负责编辑与渲染，后端（LocalBridge）提供本地文件、设备交互和调试能力。",
+          text: "MPE 最初是为了辅助构建 MNMA 项目，在持续迭代与完善中逐渐解耦，重构后已经可以兼容所有 MaaFramework 项目使用。",
         },
       ],
     },
     {
-      id: "core-features",
-      title: "了解核心特性",
-      summary: "MPE 围绕轻量、渐进扩展、阅读体验、辅助工具、AI 和兼容性设计。",
-      keywords: ["特性", "轻量", "AI", "兼容"],
+      id: "how-it-works",
+      title: "它是如何工作的",
+      summary: "前端基于 React + React Flow，通过编译器和解析器完成格式转换。",
+      keywords: ["工作原理", "编译器", "解析器", "React Flow"],
       searchText:
-        "轻量 渐进扩展 阅读体验 辅助工具 AI 兼容 节点风格 路径高亮 模板 MCP 探索模式 v1 v2 协议",
+        "工作原理 React ReactFlow 编译器 解析器 Pipeline V1 V2 JSON 导入 导出 节点 边",
       blocks: [
         {
-          type: "markdown",
-          text: "- **轻量即用**：无需下载安装，打开在线版即可开始编辑\n- **渐进扩展**：一条命令启用本地服务，获得文件管理、截图和调试能力\n- **阅读体验**：多种节点风格、节点聚焦、关键路径高亮、便签与分组\n- **全面辅助**：内置识别工具、可视化调试、丰富节点模板与自定义模板\n- **AI 驱动**：智能节点搜索、节点级 AI 补全、MCP 集成、探索模式\n- **完整兼容**：一键导入旧项目、自动字段迁移、v1/v2 协议混用、配置持久化",
+          type: "paragraph",
+          text: "MPE 前端使用 React 与 React Flow 作为主要业务解决方案。编辑过程中，MPE 会将流程图节点与边实时保存，在预览或导出时使用内置编译器转换为 Pipeline V2 格式 JSON。",
+        },
+        {
+          type: "paragraph",
+          text: "导入时，MPE 根据 Pipeline V1/V2 协议读取 JSON，通过内置解析器转换为流程图的节点与边，以继续编辑。开发时您无需关注 MPE 做了什么，仅需关注如何构建业务逻辑即可。",
         },
       ],
     },
     {
-      id: "when-to-use-which-surface",
-      title: "先区分编辑、调试和本地能力",
-      summary: "纯编辑、调试和本地文件操作，依赖的能力并不相同。",
-      keywords: ["在线版", "LocalBridge", "本地能力", "MaaInspector", "YAMaaPE"],
+      id: "core-features",
+      title: "核心特性",
+      summary: "轻量即用、渐进扩展、阅读体验、全面辅助、AI 驱动、完整兼容。",
+      keywords: ["特性", "轻量", "渐进", "AI", "兼容"],
       searchText:
-        "在线版 LocalBridge 本地能力 调试 文件管理 字段快捷工具 设备截图 MaaInspector YAMaaPE 对比",
+        "特性 轻量 无需安装 渐进扩展 LocalBridge 阅读体验 节点风格 辅助工具 OCR 调试 AI 智能搜索 补全 MCP 兼容 迁移 v1 v2",
       blocks: [
         {
-          type: "paragraph",
-          text: "如果你只想改节点和字段，在线编辑能力通常已经够用；如果你需要本地文件管理、截图类工具或调试运行，就要继续看 LocalBridge 和调试模块。",
-        },
-        {
-          type: "callout",
-          calloutType: "info",
-          title: "与其他工具的关系",
-          text: "MaaInspector 侧重运行时调试与设备交互，YAMaaPE 是早期编辑器。MPE 在编辑体验和渐进式能力扩展上做了重新设计，同时保留了对旧项目的导入兼容。",
+          type: "markdown",
+          text: "- **轻量即用**：无需下载安装，打开在线编辑器即可开始可视化 Pipeline 编辑，真正意义跨平台\n- **渐进扩展**：一行命令即可增量启用本地服务，无缝接入文件管理、截图工具、流程调试等本地能力\n- **阅读体验**：多种节点样式、节点聚焦、关键路径高亮、可拖拽连接中点、便签与分组\n- **全面辅助**：内置识别小工具（OCR、截图裁剪、取色框选等）、流程化调试、丰富节点模板与自定义模板\n- **AI 驱动**：智能节点搜索、节点级 AI 补全、MCP 联动、探索模式\n- **完整兼容**：旧项目一键导入、自动字段迁移、v1/v2 协议混用、配置持久化",
         },
       ],
     },
diff --git a/src/wiki/entries/start/quickStart.ts b/src/wiki/entries/start/quickStart.ts
@@ -3,84 +3,104 @@ import { createModuleSearchIndex } from "../../searchHelpers";
 
 const module: WikiModule = {
   id: "quick-start",
-  title: "5 分钟上手",
-  summary: "用最短路径理解如何打开 MPE、创建节点、连接流程并跑通第一次编辑。",
+  title: "快速上手",
+  summary: "从零开始创建节点、连接流程、编辑字段并导出第一个 Pipeline。",
   searchText:
-    "5 分钟上手 快速上手 初次使用 创建节点 连接节点 字段编辑 在线版 本地一体包 LocalBridge 导出 导入 界面",
+    "快速上手 教程 打开 Editor 浏览器 VSCode LocalBridge 本地一体包 节点 创建 连接 字段 导出 导入",
   steps: [
     {
-      id: "choose-edition",
-      title: "先选择可用形态",
-      summary: "先决定你是只做编辑，还是需要本地能力和调试。",
-      keywords: ["在线版", "LocalBridge", "本地一体包", "VSCode"],
+      id: "open-editor",
+      title: "打开 Editor",
+      summary: "在浏览器或 IDE 中打开 MPE 开始编辑。",
+      keywords: ["打开", "浏览器", "VSCode", "在线版"],
       searchText:
-        "在线版 LocalBridge 本地一体包 只编辑 调试 文件管理 字段快捷工具 VSCode Simple Browser",
+        "打开 Editor 浏览器 在线网页 VSCode Simple Browser Cursor IDE 部署",
       blocks: [
         {
           type: "paragraph",
-          text: "如果你只想编辑 Pipeline，直接打开在线版即可开始；如果你需要本地文件管理、字段快捷工具或流程调试，再连接 LocalBridge 或使用本地一体包。",
+          text: "MPE 前端以 Web 页面形式部署，您可以在任意能打开网页的程序中使用。",
+        },
+        {
+          type: "markdown",
+          text: "- **浏览器**：直接访问在线编辑器 (stable / preview)，或自行部署\n- **类 VSCode IDE**：使用 Ctrl+Shift+P 打开指令框，输入 simple browser 回车，在网址框输入编辑器地址即可",
         },
         {
           type: "callout",
           calloutType: "info",
-          title: "IDE 内使用",
-          text: "VSCode 用户可通过 Simple Browser 打开在线版地址，在 IDE 内直接编辑，无需切换窗口。",
+          title: "本地服务（可选）",
+          text: "如需文件管理、截图工具或调试能力，可一行命令启动 LocalBridge；或使用本地一体包 (Extremer) 开箱即用。",
         },
       ],
     },
     {
-      id: "create-and-connect",
-      title: "创建节点并连成流程",
-      summary: "先把节点放进画布，再用连接形成最小可执行路径。",
-      keywords: ["创建节点", "节点模板", "连接", "端点"],
+      id: "create-nodes",
+      title: "添加节点",
+      summary: "通过模板面板或右键菜单创建节点。",
+      keywords: ["添加节点", "节点模板", "右键", "空节点"],
       searchText:
-        "创建节点 节点模板 连接 next on_error jump_back 画布 工作流编辑 端点 标签",
+        "添加节点 创建节点 节点模板 右键 空节点 OCR 文字识别 DirectHit DoNothing",
       blocks: [
         {
           type: "paragraph",
-          text: "从节点模板面板选择模板添加节点，或右键画布空白处新建空白节点。节点就位后，从源节点端点拖拽到目标节点建立连接。",
+          text: "右键画布空白处唤起模板与添加面板，点击或回车即可在右键位置添加节点。左侧节点工具模块也提供了常用节点的快捷按钮。",
         },
         {
-          type: "markdown",
-          text: "- **next**：正常后继，识别成功后执行\n- **on_error**：异常后继，超时或出错时跳转\n- **interrupt**：中断后继\n- **jump_back**：回跳，用于循环结构\n\n连接上可添加标签备注用途，拖拽中点可调整曲线走向。",
+          type: "paragraph",
+          text: "不同节点模板用于快速初始化不同字段组合，创建后可自行调整任意字段。已选中节点时再创建，新节点会生成在已选节点后方并自动添加连接。",
         },
       ],
     },
     {
-      id: "edit-core-fields",
-      title: "先改关键字段，不必一开始配完整",
-      summary: "优先确认节点名、识别/动作关键字段和基本连接是否正确。",
-      keywords: ["字段面板", "关键字段", "识别", "动作", "显示模式"],
+      id: "edit-fields",
+      title: "编辑节点字段",
+      summary: "在字段面板中配置识别、动作等关键字段。",
+      keywords: ["字段面板", "识别", "动作", "节点名"],
       searchText:
-        "字段面板 节点名 关键字段 recognition action ROI OCR 模板截图 固定 拖动 内嵌",
+        "字段面板 编辑字段 recognition action OCR Click Swipe expected 节点名 key 添加字段 删除字段",
       blocks: [
         {
           type: "paragraph",
-          text: "第一次上手时不用一口气填完所有字段。选中节点后在字段面板中编辑，优先确认节点名、识别类型（recognition）和动作类型（action）是否正确。涉及截图、OCR、ROI 等图像字段时，再借助工具箱补充。",
+          text: "选中节点后，右上角显示节点字段面板。优先确认节点名（key）、识别类型（recognition）和动作类型（action）是否正确。切换识别或动作值时，面板会自动筛选可配置的字段。",
         },
+        {
+          type: "markdown",
+          text: "- 修改 key 值即可修改节点名，编译器会将其编译为 Pipeline 的键值\n- 使用右侧下拉选项添加字段，使用删除按键移除字段\n- 鼠标悬停字段名可查看相关提示\n- 字段面板支持固定、拖动、内嵌三种显示模式",
+        },
+      ],
+    },
+    {
+      id: "connect-nodes",
+      title: "连接节点",
+      summary: "通过端点拖拽建立节点间的流程关系。",
+      keywords: ["连接", "端点", "next", "on_error", "jump_back"],
+      searchText:
+        "连接 端点 拖拽 next on_error jump_back target 标签 顺序 数组",
+      blocks: [
         {
           type: "paragraph",
-          text: "字段面板支持三种显示模式：固定在右侧、拖动浮窗、内嵌缩放，按习惯切换即可。",
+          text: "每个节点有四个端点：右侧为出口（next 和 on_error），左侧为入口（target 和 jump_back）。从出口端点拖拽到目标节点入口即可建立连接。",
+        },
+        {
+          type: "markdown",
+          text: "- **next**：正常后继，识别成功后执行\n- **on_error**：异常后继，超时或出错时跳转\n- **jump_back**：回跳，用于循环结构\n\n连接中间的数字标签表示编译后在数组中的顺序。",
         },
       ],
     },
     {
-      id: "export-and-verify",
-      title: "导出并验证结果",
-      summary: "编辑完成后导出 Pipeline，确认 JSON 结构正确。",
-      keywords: ["导出", "粘贴板", "文件", "本地保存"],
+      id: "export",
+      title: "导出与再次导入",
+      summary: "将编辑结果导出为 Pipeline JSON，支持多种导入导出方式。",
+      keywords: ["导出", "导入", "粘贴板", "文件", "本地保存"],
       searchText:
-        "导出 粘贴板 文件 本地保存 JSON 验证 Pipeline 面板 编译预览",
+        "导出 导入 粘贴板 文件 本地保存 JSON Pipeline 面板 预览 集成导出 分离导出 拖拽导入",
       blocks: [
         {
           type: "paragraph",
-          text: "编辑完成后，通过 Pipeline 面板预览编译结果，确认 JSON 结构无误。导出方式有三种：复制到粘贴板（适合快速粘贴到项目）、下载为文件、或通过 LocalBridge 直接保存到本地目录。",
+          text: "编辑完成后，通过右侧 Pipeline JSON 面板预览编译结果。导出支持复制到粘贴板、下载为文件，连接 LocalBridge 后还可直接保存到本地工作目录。",
         },
         {
-          type: "callout",
-          calloutType: "info",
-          title: "再次导入",
-          text: "导出的 JSON 可随时重新导入 MPE 继续编辑。支持从粘贴板粘贴、文件拖拽或按钮选择文件。",
+          type: "markdown",
+          text: "**导入方式：**\n- 从粘贴板导入：复制 Pipeline 代码后点击导入按钮\n- 从文件导入：拖拽 .json/.jsonc 文件到页面，或点击按钮选择文件\n- 本地服务导入：通过 LocalBridge 快捷导入\n\nMPE 自动兼容 v1 和 v2 协议格式，支持同一文件中混合使用两种协议。",
         },
       ],
     },
diff --git a/src/wiki/entries/start/versionChoice.ts b/src/wiki/entries/start/versionChoice.ts
diff --git a/src/wiki/registry.ts b/src/wiki/registry.ts
diff --git a/src/wiki/searchIndex.ts b/src/wiki/searchIndex.ts
