feat(rich): 安卓能编辑富文本了,图片直链换成短期签名,表格不再撑破抽屉
CI / backend (push) Canceled after 0s

三件欠账一次清:

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 片段按文本显示。
This commit is contained in:
dadao
2026-10-29 03:32:53 +08:00
parent fbdf54cb4c
commit 17be9d1d42
24 changed files with 923 additions and 99 deletions
+20 -5
View File
@@ -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]);