feat(web): 富文本编辑器换成 Vditor，不再自研轮子

上一版我自己写了 textarea + 正则工具栏，看着能用，一到粘贴图片、
中文输入法、撤销栈就露馅——这几样正是成熟组件积累的部分。按要求改成品。

- 编辑器开关 def: RichTextEditor = Vditor 4.0.1（MIT，ir 模式）
  * 运行时资源自托管：web/scripts/vendor-vditor.mjs 把 lute/i18n/icons
    同步到 public/vditor，predev/prebuild 自动执行，不走 unpkg CDN
    （内网会一直卡在加载）
- 只读渲染换 markdown-it + dompurify，删掉自写的正则渲染器
- 附件直链的令牌只在内存里存在：落库前 stripAttachmentTokens，
  渲染/装载前补回（<img> 带不了 Authorization 头，raw?token= 是必要折中）
- Vditor 不会替我们插入 upload.handler 的返回值（只当提示语 tip.show），
  所以上传完自己 insertMD

验证：pytest 70 passed；e2e richtext 13 项、smoke 7、tickets 8、
knowledge 7 全绿；tsc 0 错；主包 299 kB/gzip 75 kB，Vditor 独立
chunk 385 kB 按需加载。

web/e2e/richtext.mjs

@@ -1,8 +1,11 @@
 /**
- * 富文本与附件 e2e：备注能写 Markdown、贴图能上传并渲染、附件能传能列。
+ * 富文本与附件 e2e：备注用 Vditor 写 Markdown、贴图能上传并显示、附件能传能列。
  *
- * 这里刻意走真浏览器（不是只测接口）——因为要验的正是"编辑器把内容写回后，
- * 渲染出来是不是那个样子"，以及 <img src> 带 token 的那条路能不能真的取到图。
+ * 走真浏览器而不是只测接口，因为要验的正是四件"只有真渲染才看得见"的事：
+ *  1. 输 `**粗体**` 之后编辑器里真的变成了 <strong>（IR 模式的输入规则生效）；
+ *  2. 上传的图片在编辑器里能显示（说明 /raw 直链带对了令牌）；
+ *  3. 存进库的正文是**干净**的（不含 ?token=），否则几天后满篇红叉；
+ *  4. 重新打开抽屉，正文与附件都还在（证明落库而不是活在内存）。
  */
 import { chromium } from "playwright-core";
 
@@ -46,6 +49,8 @@ const browser = await chromium.launch({
 });
 
 const problems = [];
+/** 记录所有 /raw 请求的状态码，验证图片确实被取到 */
+const rawHits = [];
 const context = await browser.newContext({ viewport: { width: 1360, height: 940 } });
 const page = await context.newPage();
 page.on("console", (m) => {
@@ -53,14 +58,7 @@ page.on("console", (m) => {
 });
 page.on("response", (r) => {
   if (r.status() >= 400) problems.push(`${r.status()} ${r.url()}`);
-});
-
-/** 记录所有 /raw 请求的状态码，验证图片确实被取到 */
-const rawHits = [];
-page.on("response", (r) => {
-  if (r.url().includes("/attachments/") && r.url().includes("/raw")) {
-    rawHits.push(r.status());
-  }
+  if (r.url().includes("/attachments/") && r.url().includes("/raw")) rawHits.push(r.status());
 });
 
 try {
@@ -93,57 +91,74 @@ try {
   const drawer = page.getByRole("dialog");
   await drawer.waitFor();
 
-  // —— 1. Markdown 写作与预览 ——
+  // —— 1. 编辑器确实是成熟组件（Vditor），而不是自研 textarea ——
+  await page.waitForSelector(".vditor-ir", { timeout: 20000 });
+  await page.waitForFunction(() => Boolean(window.Lute), null, { timeout: 20000 });
+  check("编辑器加载为 Vditor（lute 已就绪，非 CDN 依赖）", true);
+
   const editor = drawer.getByLabel("备注");
   await editor.click();
-  await editor.fill("**必须** 一起寄出，参考 `财务口径 v3`。\n\n- 纸质发票\n- 快递单");
+  // 逐字输入，让 IR 模式的输入规则生效（`**` 收尾会转成粗体，先打字再回车）
+  await page.keyboard.type("**必须** 一起寄出，参考 ", { delay: 25 });
+  await page.keyboard.type("`财务口径 v3`", { delay: 25 });
+  await page.keyboard.type("。", { delay: 25 });
+  await page.keyboard.press("Enter");
+  await page.keyboard.type("- 纸质发票", { delay: 40 });
+  await page.keyboard.press("Enter");
+  // 列表里回车会自然续上新的一项，不需要再打一遍 "- "（打了会变成嵌套列表）
+  await page.keyboard.type("快递单", { delay: 40 });
+  await page.waitForTimeout(500);
+
+  const boldCount = await drawer.locator(".vditor-ir strong").count();
+  const codeCount = await drawer.locator(".vditor-ir code").count();
+  const listCount = await drawer.locator(".vditor-ir li").count();
+  check("输入 **粗体** 就地渲染成 strong", boldCount > 0, `strong=${boldCount}`);
+  check("输入 `行内代码` 就地渲染成 code", codeCount > 0, `code=${codeCount}`);
+  check("输入 - 列表就地渲染成 li（两条）", listCount === 2, `li=${listCount}`);
+
   await drawer.getByRole("button", { name: "保存备注" }).click();
-  await drawer.getByRole("button", { name: "预览" }).click();
+  await page.waitForTimeout(600);
 
-  check("预览渲染粗体", (await drawer.locator(".prose-dadao strong").count()) > 0);
-  check("预览渲染行内代码", (await drawer.locator(".prose-dadao code").count()) > 0);
-  check("预览渲染列表", (await drawer.locator(".prose-dadao li").count()) === 2);
+  // —— 2. 库里存的是干净正文：不能把令牌写进去 ——
+  const saved = await call("GET", `/workspaces/${ws.id}/items/${item.id}`, null, token);
+  const body = String(saved.body_md ?? "");
+  check("正文已落库", body.includes("必须") && body.includes("财务口径"), body.slice(0, 40));
+  check("落库正文不含令牌", !body.includes("token="), body.includes("token=") ? "含 token=" : "");
 
-  // —— 2. 编辑器插入图片（模拟选文件，走的是粘贴/拖拽同一段上传逻辑）——
-  await drawer.getByRole("button", { name: "继续编辑" }).click();
-  await drawer
-    .locator('input[type="file"][accept="image/*"]')
-    .setInputFiles({ name: "票据截图.png", mimeType: "image/png", buffer: PNG });
-  await drawer.getByText("![票据截图.png]").or(drawer.locator("textarea")).first().waitFor();
-  await page.waitForTimeout(1200); // 等上传返回并写回正文
+  // —— 3. 编辑器插入图片（走的是粘贴/拖拽同一段上传逻辑）——
+  const uploadInput = drawer.locator('.vditor input[type="file"]');
+  await uploadInput.setInputFiles({ name: "票据截图.png", mimeType: "image/png", buffer: PNG });
+  await page.waitForTimeout(1500);
 
-  await drawer.getByRole("button", { name: "预览" }).click();
-  const img = drawer.locator(".prose-dadao img").first();
-  await img.waitFor({ timeout: 8000 });
-  const src = await img.getAttribute("src");
-  check("正文出现图片", Boolean(src?.includes("/raw?token=")), String(src ?? "").slice(0, 48));
+  const img = drawer.locator(".vditor-ir img").first();
+  await img.waitFor({ timeout: 10000 });
+  const src = (await img.getAttribute("src")) ?? "";
+  check("上传后编辑器里出现图片", Boolean(src), src.slice(0, 60));
+  check("图片走带令牌的 /raw 直链", src.includes("/raw?token="), src.slice(0, 60));
   await page.waitForTimeout(800);
   check("图片资源能取到（/raw 返回 200）", rawHits.includes(200), rawHits.join(","));
 
-  // —— 3. 附件面板上传与列表 ——
+  // —— 4. 附件面板上传与列表 ——
   await drawer
-    .locator('input[type="file"]:not([accept="image/*"])')
+    .locator('input.hidden[type="file"]')
     .setInputFiles({
       name: "报销须知.txt",
       mimeType: "text/plain",
       buffer: Buffer.from("抬头必须是公司全称", "utf8"),
     });
-  await drawer.getByText("报销须知.txt").waitFor({ timeout: 8000 });
+  await drawer.getByText("报销须知.txt").waitFor({ timeout: 10000 });
   check("附件上传后出现在列表", true);
 
-  // —— 4. 落库后重新打开仍在（不是只活在内存里）——
+  // —— 5. 落库后重新打开仍在（不是只活在内存里）——
   await drawer.getByRole("button", { name: "关闭" }).click();
   await page.getByRole("button", { name: "整理发票原件", exact: true }).click();
   const drawer2 = page.getByRole("dialog");
   await drawer2.waitFor();
-  await drawer2.getByRole("button", { name: "预览" }).click();
-  check(
-    "重新打开后正文仍是渲染态",
-    (await drawer2.locator(".prose-dadao strong").count()) > 0,
-  );
+  await page.waitForSelector(".vditor-ir strong", { timeout: 20000 });
+  check("重新打开后正文仍是渲染态", (await drawer2.locator(".vditor-ir strong").count()) > 0);
   let stillThere = true;
   try {
-    await drawer2.getByText("报销须知.txt").waitFor({ timeout: 6000 });
+    await drawer2.getByText("报销须知.txt").waitFor({ timeout: 8000 });
   } catch {
     stillThere = false;
   }

web/e2e/shots-rich.mjs

@@ -1,5 +1,5 @@
 /**
- * 截图：详情抽屉里的 Markdown 编辑器（写作态 + 预览态）。
+ * 截图：详情抽屉里的富文本编辑器（Vditor，边写边看）。
  * 只用于留存界面现状，不做断言。
  */
 import { chromium } from "playwright-core";
@@ -91,13 +91,11 @@ await page.getByRole("button", { name: "全部", exact: true }).click();
 await page.getByRole("button", { name: "把十月报销单寄给财务", exact: true }).click();
 const drawer = page.getByRole("dialog");
 await drawer.waitFor();
-await page.waitForTimeout(600);
+// Vditor 是"边写边看"，没有单独的预览态：等它把 lute 与正文渲染出来再截图
+await page.waitForSelector(".vditor-ir strong", { timeout: 20000 });
+await page.waitForTimeout(1200);
 await page.screenshot({ path: "../2.Design/screens/web-editor-write.png" });
 
-await drawer.getByRole("button", { name: "预览" }).click();
-await page.waitForTimeout(900);
-await page.screenshot({ path: "../2.Design/screens/web-editor-preview.png" });
-
 await context.close();
 await browser.close();
 console.log("shots saved");