3.3 KiB
3.3 KiB
3-12 [done] Rust Web 3000 Stitch UI Parity Checklist v1
更新时间：2026-04-29
迁入 done：本清单所有输入、约束、实施项与验收项均已完成，并已通过 Rust 单测与 task119/task120/task121/task122 smoke 复核。
目标：以
design/design/stitch/260429的 Stitch 产物为视觉基准，把 3000 的 Rust Web 页面推进到更接近目标 UI，同时保留真实页面树、文件树、页面新建和leptos-tiptapruntime。
输入基准
- 读取 Stitch 设计系统：
DESIGN.md - 读取 Stitch 静态结构：
code.html - 查看目标截图：
screen.png - 对比当前 3000 截图：
/mnt/Data1T/mnote/tmp/image copy 33.png
约束
- 不直接整包复制 Stitch HTML，避免绕开 Rust projection / tree shell / editor island。
- 不恢复 Next.js 为主入口，3000 继续由
mnote-web承载。 - 页面树、文件树、新建页面、正文编辑继续使用当前已接入的运行链路。
- 不引入 Tailwind CDN、Google Fonts、远程图片作为运行依赖。
实施项
- 侧栏外壳对齐 Stitch：240px 左栏、浅灰无硬边框、工作区头像/标题、快捷操作区、底部入口。
- 侧栏内容对齐 Stitch：星标置顶、我的页面、Explorer tab 同屏呈现，并保留真实页面树和文件树 DOM/testid。
- 页面树/文件树行样式对齐 Stitch：12px 层级缩进、14px 文本、soft-bleed hover、当前页选中态。
- 顶栏对齐 Stitch：44px 高度、左侧面包屑、右侧 Public/收藏/历史/AI/搜索/更多工具。
- 文档画布对齐 Stitch：居中 880px 内容列、80px 顶部留白、页面图标、标题、元信息、分割线。
leptos-tiptap外壳对齐 Stitch：编辑器跟随文档列宽、正文 16px/1.6、空态提示不遮挡真实编辑器。- 浮动按钮对齐 Stitch：右下帮助按钮 + 绿色 AI 圆形按钮。
- 首页 active page 链路不退化：根页仍能看到真实 sidebar，并可打开当前页。
- 验证 Rust 单测和关键 smoke，确保树与编辑器 runtime 未断开。
验收
cargo test -p mnote-web通过。- 至少一个文档 shell smoke 通过，确认
wolai-sidebar、页面树、文件树、leptos_tiptap_island仍存在。 - 如 3000 服务可用，使用浏览器截图或 DOM 检查确认首屏侧栏、顶栏、文档画布接近 Stitch 目标。
验证记录
cargo test -p mnote-web：126 个单测通过，doc tests 4 个 ignored。node scripts/task119-rust-web-wolai-visual-regression-smoke.js：通过，截图test-results/task119-rust-web-wolai-visual-regression-root.png。node scripts/task120-rust-web-tree-integration-smoke.js：通过。node scripts/task121-rust-web-editor-island-hydration-smoke.js：通过，确认 hydrate、输入、保存、reload 读回。node scripts/task122-rust-web-create-page-ui-smoke.js：通过，确认侧栏+新建页面并进入文档页。- 手动 Playwright 截图：
test-results/task123-stitch-document-parity.png，确认文档页头、真实页面树/文件树、编辑器正文列对齐。 - 修复
我的页面 / Explorer切换：文件树不再作为第二个独立 Explorer section 渲染，点击 Explorer tab 后切换到文件树 panel。