feat(rich): 安卓能编辑富文本了，图片直链换成短期签名，表格不再撑破抽屉

三件欠账一次清：

1. 图片直链签名化
   - 新增 `backend/app/services/signing.py`：HMAC-SHA256，密钥由 `JWT_SECRET` 域分离派生
     （`attachment-raw-v1`），载荷 `workspace_id:attachment_id:exp`，默认 30 分钟
   - `/raw` 支持 `?exp=&sig=`，不需要登录态；签名里绑了工作区，跨租户链接直接拒
   - 附件对象多一个 `raw_url`，前端每次渲染现签，正文里只存不带凭据的 `/raw`
   - 保留旧 `?token=` 通道，给未升级的客户端过渡

2. 安卓富文本编辑器
   - `ui/RichTextEditorScreen.kt`：Markdown 工具栏（粗体/斜体/标题/列表/引用/代码/链接/图片），
     选区包裹与行首前缀都按光标位置来；贴图走附件接口，插入签名直链
   - 预览用 Markwon，图片用 Coil；正文落在一张白纸卡片里，不再贴屏幕边
   - 从任务详情与知识点都能进，保存按 `body_md` 回写（PATCH 带 version）

3. 表格
   - 只读渲染走 markdown-it 的 GFM 表，`display:block + overflow-x:auto`：
     宽表横向滚动、窄表铺满，都不撑破抽屉

验证：pytest 74 passed；richtext 15 / smoke 7 / tickets 8 / knowledge 7 全绿；
tsc -b 0 错；vite build 通过（主包 299.42 kB / gzip 74.96 kB）；
安卓 assembleDebug 成功并在 API 35 模拟器走通编辑与预览。

仍欠：保存后回列表而非回详情抽屉、图片压缩与缩略图、HTML 片段按文本显示。

web/e2e/richtext.mjs

@@ -3,8 +3,8 @@
  *
  * 走真浏览器而不是只测接口，因为要验的正是四件"只有真渲染才看得见"的事：
  *  1. 输 `**粗体**` 之后编辑器里真的变成了 <strong>（IR 模式的输入规则生效）；
- *  2. 上传的图片在编辑器里能显示（说明 /raw 直链带对了令牌）；
- *  3. 存进库的正文是**干净**的（不含 ?token=），否则几天后满篇红叉；
+ *  2. 上传的图片在编辑器里能显示（说明 /raw 直链带对了签名）；
+ *  3. 存进库的正文是**干净**的（不含 ?exp=/?sig=），否则几天后满篇红叉；
  *  4. 重新打开抽屉，正文与附件都还在（证明落库而不是活在内存）。
  */
 import { chromium } from "playwright-core";
@@ -123,7 +123,8 @@ try {
   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=" : "");
+  const leaked = ["token=", "exp=", "sig="].filter((needle) => body.includes(needle));
+  check("落库正文不含凭据（token/exp/sig）", leaked.length === 0, leaked.join(","));
 
   // —— 3. 编辑器插入图片（走的是粘贴/拖拽同一段上传逻辑）——
   const uploadInput = drawer.locator('.vditor input[type="file"]');
@@ -134,7 +135,11 @@ try {
   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));
+  check(
+    "图片走带签名的 /raw 直链",
+    src.includes("/raw?") && (src.includes("sig=") || src.includes("token=")),
+    src.slice(0, 80),
+  );
   await page.waitForTimeout(800);
   check("图片资源能取到（/raw 返回 200）", rawHits.includes(200), rawHits.join(","));
 
@@ -164,6 +169,24 @@ try {
   }
   check("重新打开后附件仍在", stillThere);
 
+  // —— 6. 只读渲染里的表格：宽表能横向滚动，不被挤成一坨 ——
+  const tableMd = [
+    "| 项目 | 金额 | 说明 |",
+    "| --- | --- | --- |",
+    "| 打印费 | 12.00 | 电子发票 |",
+    "| 快递费 | 23.50 | 到付 |",
+  ].join("\n");
+  await call("POST", `/workspaces/${ws.id}/items/${item.id}/comments`, { body_md: tableMd }, token);
+  await drawer2.getByRole("button", { name: "关闭" }).click();
+  await page.getByRole("button", { name: "整理发票原件", exact: true }).click();
+  const drawer3 = page.getByRole("dialog");
+  await drawer3.waitFor();
+  const table = drawer3.locator(".prose-dadao table").first();
+  await table.waitFor({ timeout: 10000 });
+  check("评论区表格渲染出来了", (await drawer3.locator(".prose-dadao td").count()) >= 4);
+  const box = await table.boundingBox();
+  check("表格没有撑破抽屉宽度", box !== null && box.width <= 900, `${box?.width ?? "无"} px`);
+
   const realProblems = problems.filter((p) => !p.includes("favicon"));
   check("控制台与网络无报错", realProblems.length === 0, realProblems.slice(0, 3).join(" | "));
 } catch (err) {

web/src/components/Markdown.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
 
+import type { UrlResources } from "../lib/attachmentUrls";
 import { renderMarkdown } from "../lib/markdown";
 
 interface Props {
@@ -7,6 +8,8 @@ interface Props {
   /** 列表里只给个开头时用它压小字号 */
   compact?: boolean;
   className?: string;
+  /** 附件 id → 当前可访问地址（后端签发的 raw_url） */
+  resources?: UrlResources;
 }
 
 /**
@@ -15,8 +18,8 @@ interface Props {
  * renderMarkdown 内部已经把原文全部 HTML 转义过再套标签，
  * 这里放心用 dangerouslySetInnerHTML（这是本仓库唯一允许用的地方）。
  */
-export function Markdown({ source, compact = false, className = "" }: Props) {
-  const html = useMemo(() => renderMarkdown(source ?? ""), [source]);
+export function Markdown({ source, compact = false, className = "", resources }: Props) {
+  const html = useMemo(() => renderMarkdown(source ?? "", resources), [source, resources]);
 
   if (!source?.trim()) {
     return <p className={`text-sm text-ink-400 ${className}`}>还没有内容。</p>;

web/src/components/RichTextEditor.tsx

@@ -2,12 +2,14 @@ import { useEffect, useRef, useState } from "react";
 
 import type { IVditorInstance } from "vditor/dist/index.js";
 
-import { stripAttachmentTokens, tokenizeAttachmentUrls } from "../lib/attachmentUrls";
-import { attachmentUrl, uploadFile } from "../lib/client";
+import { applyAttachmentUrls, stripAttachmentTokens, type UrlResources } from "../lib/attachmentUrls";
+import { canonicalAttachmentPath, uploadFile } from "../lib/client";
 
 interface Attachment {
   id: string;
   filename: string;
+  /** 后端签发的直链（带短期签名），用来在编辑器里直接显示刚传的图 */
+  raw_url?: string;
 }
 
 interface Props {
@@ -23,6 +25,10 @@ interface Props {
   minHeight?: number;
   ariaLabel: string;
   onError?: (message: string) => void;
+  /** 附件 id → 可访问地址；编辑器渲染图片时优先用它（签名比令牌安全且会轮换） */
+  resources?: UrlResources;
+  /** 编辑器里贴图上传成功后通知外层，好让附件面板立刻多一条 */
+  onUploaded?: (attachment: Attachment) => void;
 }
 
 /**
@@ -44,6 +50,8 @@ export function RichTextEditor({
   minHeight = 240,
   ariaLabel,
   onError,
+  resources,
+  onUploaded,
 }: Props) {
   const hostRef = useRef<HTMLDivElement | null>(null);
   const instRef = useRef<IVditorInstance | null>(null);
@@ -51,12 +59,16 @@ export function RichTextEditor({
   const valueRef = useRef(value);
   const onChangeRef = useRef(onChange);
   const onErrorRef = useRef(onError);
+  const resourcesRef = useRef(resources);
+  const onUploadedRef = useRef(onUploaded);
   const [ready, setReady] = useState(false);
   const [uploading, setUploading] = useState(false);
 
   valueRef.current = value;
   onChangeRef.current = onChange;
   onErrorRef.current = onError;
+  resourcesRef.current = resources;
+  onUploadedRef.current = onUploaded;
   const disabledRef = useRef(disabled);
   disabledRef.current = disabled;
 
@@ -76,7 +88,7 @@ export function RichTextEditor({
       const instance = new Vditor(host, {
         cdn: "/vditor", // 本地托管 lute/i18n/icon，不走公网 CDN（见 web/public/vditor）
         mode: "ir",
-        value: tokenizeAttachmentUrls(valueRef.current),
+        value: applyAttachmentUrls(valueRef.current, resourcesRef.current),
         height: minHeight,
         placeholder,
         theme: "classic",
@@ -132,7 +144,10 @@ export function RichTextEditor({
                 );
                 // 自己插入，不用 Vditor 代劳：它对 handler 的返回值只会
                 // tip.show(字符串) 当成提示语显示，并不会把内容插进正文。
-                instRef.current?.insertMD(`\n![](${attachmentUrl(wsId, created.id)})\n`);
+                const src =
+                  created.raw_url ?? canonicalAttachmentPath(wsId, created.id);
+                instRef.current?.insertMD(`\n![](${src})\n`);
+                onUploadedRef.current?.(created);
               }
               return null;
             } catch (error) {
@@ -179,7 +194,7 @@ export function RichTextEditor({
     if (!inst) return;
     const current = stripAttachmentTokens(inst.getValue());
     if (current !== value) {
-      inst.setValue(tokenizeAttachmentUrls(value), true);
+      inst.setValue(applyAttachmentUrls(value, resourcesRef.current), true);
     }
   }, [value, ready]);
 

web/src/components/TaskDetail.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useAuth } from "../App";
 import { ApiError, api } from "../lib/client";
 import { PRIORITY_LABEL, STATUS_LABEL } from "../lib/parse";
@@ -88,6 +88,14 @@ export function TaskDetail({
   const [due, setDue] = useState("");
   const [comments, setComments] = useState<Comment[]>([]);
   const [attachments, setAttachments] = useState<Attachment[]>([]);
+  /** 附件 id → 带签名的直链：正文里的图片靠它显示，不需要把登录令牌写进内容 */
+  const resources = useMemo(() => {
+    const map: Record<string, string> = {};
+    for (const row of attachments) {
+      if (row.raw_url) map[row.id] = row.raw_url;
+    }
+    return map;
+  }, [attachments]);
   const [draft, setDraft] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [notice, setNotice] = useState<string | null>(null);
@@ -402,7 +410,7 @@ export function TaskDetail({
                 <div className="mt-3 rounded-lg border border-line-200 bg-white p-3">
                   <p className="text-2xs text-ink-400">验收结论</p>
                   <div className="mt-1">
-                    <Markdown source={ticket.resolution_md} compact />
+                    <Markdown source={ticket.resolution_md} resources={resources} compact />
                   </div>
                 </div>
               ) : null}
@@ -497,6 +505,12 @@ export function TaskDetail({
                 itemId={item.id}
                 value={body}
                 onChange={setBody}
+                resources={resources}
+                onUploaded={(created) =>
+                  setAttachments((prev) =>
+                    prev.some((row) => row.id === created.id) ? prev : [...prev, created as never],
+                  )
+                }
                 onError={(message) => setError(message)}
                 disabled={busy}
               />
@@ -605,7 +619,7 @@ export function TaskDetail({
                     )}
                   </span>
                   <div className="min-w-0 flex-1 rounded-xl rounded-tl-sm bg-paper-100 px-3 py-2">
-                    <Markdown source={c.body_md} />
+                    <Markdown source={c.body_md} resources={resources} />
                     <p className="mt-0.5 text-2xs text-ink-400">
                       {new Date(c.created_at).toLocaleString("zh-CN")}
                     </p>

web/src/index.css

@@ -261,16 +261,31 @@
   border: 1px solid theme("colors.line.100");
 }
 
+/* 表格：宽表横向滚动（不撑破抽屉），窄表铺满 */
 .prose-dadao table {
-  width: 100%;
+  display: block;
+  width: max-content;
+  min-width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
   border-collapse: collapse;
   font-size: 0.9em;
+  margin: 0.6rem 0;
 }
 .prose-dadao th,
 .prose-dadao td {
   border: 1px solid theme("colors.line.200");
-  padding: 0.35rem 0.5rem;
+  padding: 0.4rem 0.6rem;
   text-align: left;
+  white-space: nowrap;
+}
+.prose-dadao th {
+  background: theme("colors.paper.200");
+  font-weight: 600;
+  color: theme("colors.ink.800");
+}
+.prose-dadao tbody tr:nth-child(even) td {
+  background: theme("colors.paper.50");
 }
 
 .prose-compact {

web/src/lib/attachmentUrls.ts

@@ -1,39 +1,45 @@
 /**
- * 附件直链的令牌处理。
+ * 附件直链的地址处理。
  *
- * 库里存的 Markdown 必须是"干净"的：只记 `/api/v1/.../attachments/<id>/raw`。
- * 原因有两条——
- *  1. `<img>` 发不出 Authorization 头，图片只能靠 query 里的 token 鉴权；
- *  2. token 会过期。要是把它写进正文，几天后整篇文档的图片全变红叉，
- *     而且团队里每个人拿到的 token 还不一样，同一个字段没法共用。
+ * 库里存的 Markdown 必须是"干净"的：只记 `/api/v1/.../attachments/<id>/raw`，不带任何查询串。
+ * 原因有三条——
+ *  1. `<img>` 发不出 Authorization 头，图片只能靠 URL 自身携带凭据；
+ *  2. 凭据会过期（令牌 30 分钟、签名也是 30 分钟），写进正文就会几天后满篇红叉；
+ *  3. 同一个字段在团队里要能共用，而每个人的令牌不一样。
  *
- * 所以规则是：**存的时候剥掉，看的时候现加**。token 永远是当前会话的。
+ * 所以规则是：**存的时候剥干净，看的时候现配**。
+ * 优先用后端在附件列表里签好的 `raw_url`（短期签名，别人拿到也只能看这一张图的一小会儿），
+ * 没拿到签名时才退回令牌（兼容老链接，前端已不再主动生成）。
  */
 
 import { session } from "./client";
 
 const UUID = "[0-9a-fA-F-]{36}";
-/** 已经带上（或没带）token 的附件直链 */
-const RAW_URL = new RegExp(`(/api/v1/workspaces/${UUID}/attachments/${UUID}/raw)(?:\\?token=[^)\"'\\s]*)?`, "g");
+/** 附件直链：可能带 token 或 exp/sig，全部视为"要替换的查询串" */
+const RAW_URL = new RegExp(`(/api/v1/workspaces/${UUID}/attachments/(${UUID})/raw)(?:\\?[^)"'\\s]*)?`, "g");
+
+/** 附件 id → 可访问地址（后端签发的 raw_url） */
+export type UrlResources = Record<string, string>;
 
 function tokenSuffix(): string {
   const token = session.access;
   return token ? `?token=${encodeURIComponent(token)}` : "";
 }
 
-/** 保存前调用：把正文里所有 /raw?token=... 的令牌去掉。 */
+/** 保存前调用：把正文里所有直链的查询串去掉。 */
 export function stripAttachmentTokens(source: string): string {
   return (source ?? "").replace(RAW_URL, (_all, url: string) => url);
 }
 
-/** 渲染或加载进编辑器前调用：给所有 /raw 链接补上当前令牌。 */
-export function tokenizeAttachmentUrls(source: string): string {
-  const suffix = tokenSuffix();
-  if (!suffix) return stripAttachmentTokens(source);
-  return (source ?? "").replace(RAW_URL, (_all, url: string) => `${url}${suffix}`);
+/** 渲染 / 装载前调用：按附件 id 换成当前可用的地址。 */
+export function applyAttachmentUrls(source: string, resources?: UrlResources): string {
+  const fallback = tokenSuffix();
+  return (source ?? "").replace(RAW_URL, (_all, url: string, _ws: string, id: string) => {
+    const signed = resources?.[id];
+    if (signed) return signed;
+    return fallback ? `${url}${fallback}` : url;
+  });
 }
 
-/** 只处理 HTML 里的 img/src 与 a/href（已渲染的预览用）。 */
-export function tokenizeAttachmentHtml(html: string): string {
-  return tokenizeAttachmentUrls(html);
-}
+/** 兼容旧名字：只处理 HTML（已渲染的预览用），逻辑同 applyAttachmentUrls。 */
+export const tokenizeAttachmentHtml = applyAttachmentUrls;

web/src/lib/client.ts

@@ -145,7 +145,7 @@ export async function uploadFile<T>(path: string, file: File): Promise<T> {
  * 附件直链：`<img>` 带不了 Authorization 头，所以令牌走 query。
  * 只在渲染 Markdown 图片时用，不要拿它去做普通的下载链接（那样 token 会留在浏览器历史里）。
  */
-export function attachmentUrl(wsId: string, attachmentId: string): string {
-  const token = session.access ?? "";
-  return `${BASE}/workspaces/${wsId}/attachments/${attachmentId}/raw?token=${encodeURIComponent(token)}`;
+/** 入库用的规范地址：不带任何查询串，抬头签名由渲染层按附件列表现配。 */
+export function canonicalAttachmentPath(wsId: string, attachmentId: string): string {
+  return `${BASE}/workspaces/${wsId}/attachments/${attachmentId}/raw`;
 }

web/src/lib/markdown.ts

@@ -12,7 +12,7 @@
 import DOMPurify from "dompurify";
 import MarkdownIt from "markdown-it";
 
-import { tokenizeAttachmentHtml } from "./attachmentUrls";
+import { applyAttachmentUrls, type UrlResources } from "./attachmentUrls";
 
 const md = new MarkdownIt({
   html: false, // 不解析原始 HTML
@@ -55,13 +55,13 @@ md.renderer.rules.image = (tokens, idx, options, env, self) => {
 };
 
 /** 渲染成可直接塞进 innerHTML 的安全 HTML。 */
-export function renderMarkdown(source: string): string {
+export function renderMarkdown(source: string, resources?: UrlResources): string {
   const safe = DOMPurify.sanitize(md.render(source ?? ""), {
     // 图片走我们自己的 /raw 直链；data: 只放行图片，别的都去掉
     ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto):|\/|#|data:image\/)/i,
   });
-  // 库里存的是不带令牌的直链，渲染这一层再补上（见 lib/attachmentUrls.ts）
-  return tokenizeAttachmentHtml(safe);
+  // 库里存的是干净的直链，渲染这一层按附件列表换成带签名的地址（见 lib/attachmentUrls.ts）
+  return applyAttachmentUrls(safe, resources);
 }
 
 /** 纯文本摘要，用于列表里的一行预览（去掉标记符号，压缩空白）。 */

web/src/lib/types.ts

@@ -89,6 +89,8 @@ export interface Attachment {
   size: number;
   uploader_id: string;
   created_at: string;
+  /** 后端签发的短期直链（带 exp/sig），正文图片直接用它 */
+  raw_url?: string;
   can_delete: boolean;
 }
 

web/src/pages/Knowledge.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useParams } from "react-router-dom";
 import { AppShell } from "../components/AppShell";
 import { AttachmentPanel } from "../components/AttachmentPanel";
@@ -302,6 +302,14 @@ function KnowledgeDrawer({
   const [title, setTitle] = useState("");
   const [body, setBody] = useState("");
   const [attachments, setAttachments] = useState<Attachment[]>([]);
+  /** 附件 id → 带签名的直链（见 lib/attachmentUrls.ts） */
+  const resources = useMemo(() => {
+    const map: Record<string, string> = {};
+    for (const row of attachments) {
+      if (row.raw_url) map[row.id] = row.raw_url;
+    }
+    return map;
+  }, [attachments]);
   const [busy, setBusy] = useState(false);
 
   const load = useCallback(async () => {
@@ -459,6 +467,14 @@ function KnowledgeDrawer({
               itemId={doc.id}
               value={body}
               onChange={setBody}
+              resources={resources}
+              onUploaded={(created) =>
+                setAttachments((prev) =>
+                  prev.some((row) => row.id === created.id)
+                    ? prev
+                    : [...prev, created as unknown as Attachment],
+                )
+              }
               onError={(message) => setError(message)}
               disabled={!canEdit}
             />