feat(rich): 备注/工单说明/知识正文支持 Markdown 与图片附件

写一件事的时候,光有纯文本不够:要贴截图、要分段、要标重点。
这次把「正文」这条路补全,思路是**存 Markdown 而不是 HTML**——
能导出、能全文检索、能直接喂给 LLM,也不必每次渲染都重新清洗一遍 HTML。

后端
- attachment 表 + RLS + 迁移 0005;本地磁盘存储,key 由内容 sha256 决定,
  换对象存储只改 services/storage.py 一个文件
- 上传在**读流时**卡 20MB,不先落盘再判断;磁盘名由服务端生成,用户文件名只进库和响应头
- 列表带 attachment_count、详情带 attachments,避免一屏 N 次请求
- raw 直链给 <img src> 用(图片带不了 Authorization 头),只允许本工作区成员,
  非成员一律 8001 不区分「不存在」与「没权限」
- 5 个用例:上传下载、超限、跨租户、删除确认与权限、raw 鉴权

前端
- 自研零依赖 Markdown 渲染器:先转义再上标签,链接协议白名单
- RichTextEditor:工具栏 + Ctrl+B/I + 预览,粘贴或拖入图片自动上传并插入引用
- AttachmentPanel:上传/下载/删除,下载走带 Authorization 的 fetch 转 blob
- 任务备注、工单说明与验收结论、知识正文、评论全部接入

顺手修的
- TaskDetail.hydrate 漏了 setAttachments,导致附件面板永远是空的(e2e 抓到的)

71 passed;web tsc 0 错、构建 255.07 kB │ gzip 80.85 kB;
e2e:richtext 9 项 + smoke 7 + tickets 8 + knowledge 7,全绿。
This commit is contained in:
dadao
2026-10-29 01:53:46 +08:00
parent 0a3b0f3ca0
commit a24a493403
24 changed files with 1843 additions and 25 deletions
+29 -8
View File
@@ -1,6 +1,8 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { useParams } from "react-router-dom";
import { AppShell } from "../components/AppShell";
import { AttachmentPanel } from "../components/AttachmentPanel";
import { RichTextEditor } from "../components/RichTextEditor";
import { Book, Link2, Plus, Search, Sparkle } from "../components/icons";
import {
Button,
@@ -12,7 +14,7 @@ import {
StatusPill,
} from "../components/ui";
import { ApiError, api } from "../lib/client";
import type { Knowledge, KnowledgeStatus } from "../lib/types";
import type { Attachment, Knowledge, KnowledgeStatus } from "../lib/types";
const TABS = [
{ key: "draft", label: "待核对", statuses: ["draft", "in_review"] },
@@ -299,6 +301,7 @@ function KnowledgeDrawer({
const [error, setError] = useState<string | null>(null);
const [title, setTitle] = useState("");
const [body, setBody] = useState("");
const [attachments, setAttachments] = useState<Attachment[]>([]);
const [busy, setBusy] = useState(false);
const load = useCallback(async () => {
@@ -307,6 +310,7 @@ function KnowledgeDrawer({
setDoc(data);
setTitle(data.title);
setBody(data.body_md);
setAttachments(data.attachments ?? []);
} catch (err) {
setError(err instanceof ApiError ? err.message : "加载失败");
}
@@ -447,13 +451,30 @@ function KnowledgeDrawer({
onChange={(e) => setTitle(e.target.value)}
aria-label="标题"
/>
<textarea
className="input min-h-[320px] resize-y font-mono text-xs leading-relaxed"
value={body}
disabled={!canEdit}
onChange={(e) => setBody(e.target.value)}
aria-label="正文"
/>
<div className="rounded-xl border border-line-200 bg-paper-50 px-3 py-2">
<RichTextEditor
ariaLabel="正文"
wsId={wsId}
itemId={doc.id}
value={body}
onChange={setBody}
onError={(message) => setError(message)}
rows={16}
disabled={!canEdit}
/>
</div>
<div className="rounded-xl border border-line-200 bg-paper-50 px-3 py-2.5">
<AttachmentPanel
wsId={wsId}
itemId={doc.id}
attachments={attachments}
onChange={setAttachments}
onError={(message) => setError(message)}
disabled={!canEdit}
/>
</div>
{error && <InlineAlert>{error}</InlineAlert>}
</div>