diff --git a/2.Design/ROADMAP-M0-M1.md b/2.Design/ROADMAP-M0-M1.md index ddbdc84..1032403 100644 --- a/2.Design/ROADMAP-M0-M1.md +++ b/2.Design/ROADMAP-M0-M1.md @@ -669,7 +669,7 @@ ### 11.1 决定 - **阅读走整页**:`/w/:wsId/knowledge/:itemId`。抽屉在屏幕右侧,正文永远偏在右边, - 长文读十几屏眼睛一直在右半边;整页可以把正文列限到 40rem 并居中,行宽回到四十来个汉字。 + 长文读十几屏眼睛一直在右半边;整页可以把正文列限宽居中,行宽回到五十来个汉字。 - **抽屉只留给编辑**:编辑是短时动作,改完就走,抽屉"压在当前列表上"反而合适, 也省掉从编辑页退回列表时的滚动位置丢失。 - 阅读页复用列表页那套文案常量,避免两处各写一份以后对不上(`lib/knowledge.ts`)。 @@ -683,13 +683,15 @@ | `pages/Knowledge.tsx` | 卡片与「打开原文」改成 `navigate("/w//knowledge/")`;删掉 `openId` 状态与抽屉渲染;`KnowledgeDrawer` 加 `initialEditing`(进来就是编辑器,保存或取消都直接关) | | `App.tsx` | 新增 `/w/:wsId/knowledge/:itemId` 路由 | -正文列 `max-w-[40rem]` 居中、卡片 `max-w-[46rem]`;换一篇自动回顶。 +卡片 `max-w-[78rem]`、正文列 `max-w-[56rem]`(约 55 个汉字一行)居中;换一篇自动回顶。 +第一版按 40rem / 46rem 做的,1546 宽的屏幕上一量,留白比正文还宽——用户直接发了截图。 +留给以后的界线:正文再宽眼睛就要来回扫行,56rem 是"宽屏不空、又不至于扫行"中间那条线。 编辑仍然是抽屉:`initialEditing` 时没有「看」这一态,点「取消」直接关掉,不留半截改动。 ### 11.3 验证 - e2e `web/e2e/knowledge-read.mjs`(新,8 项):点卡片进独立页、`h1` 是标题、正文是渲染后的 `.prose-dadao` - 且 `.vditor-ir` 计数为 0、正文列 ≤ 760px、正文列在 `main` 里左右留白差 < 40px、点「编辑」才出现编辑器、 + 且 `.vditor-ir` 计数为 0、正文列宽度落在 720–920px(宽屏不留大片空白)、正文列在 `main` 里左右留白差 < 40px、点「编辑」才出现编辑器、 取消后编辑器 detach、控制台零报错。 - 回归:`knowledge-notebook.mjs`(17 项,含"侧栏分类按树排"与"抽屉默认渲染样式")、`knowledge.mjs`(9 项)、 `knowledge-paging.mjs`(5 项)全绿。 diff --git a/2.Design/screens/knowledge-read-page.png b/2.Design/screens/knowledge-read-page.png index da8e6b8..17edf24 100644 Binary files a/2.Design/screens/knowledge-read-page.png and b/2.Design/screens/knowledge-read-page.png differ diff --git a/web/e2e/knowledge-read.mjs b/web/e2e/knowledge-read.mjs index 7de3af9..079320b 100644 --- a/web/e2e/knowledge-read.mjs +++ b/web/e2e/knowledge-read.mjs @@ -4,7 +4,7 @@ * 断言的是用户提的那件事,而不是"有个 drawer": * ① 点卡片后 URL 变成 /w//knowledge/,列表页的元素不在了 * ② 正文渲染成样式(h2 存在),不是编辑器 - * ③ 正文列的宽度 ≤ 46rem 且在内容区里居中(左右留白差不多) + * ③ 正文列限宽但别太窄(720–920px,约 50 来个汉字一行),且在内容区里居中 * ④ 点「编辑」才出现编辑器(抽屉),保存/取消都收回去 */ import { chromium } from "playwright-core"; @@ -119,8 +119,8 @@ try { const rightGap = main.x + main.width - (box.x + box.width); const width = box.width; check( - "正文列限宽到可读宽度(≤46rem≈736px)", - width <= 760, + "正文列宽度适合长文(720–920px,宽屏不留大片空白)", + width >= 720 && width <= 920, `width=${Math.round(width)}`, ); check( diff --git a/web/src/pages/KnowledgeDoc.tsx b/web/src/pages/KnowledgeDoc.tsx index 004c1be..395af22 100644 --- a/web/src/pages/KnowledgeDoc.tsx +++ b/web/src/pages/KnowledgeDoc.tsx @@ -106,7 +106,9 @@ export function KnowledgeDocPage() { return ( -
+ {/* 宽屏上别把正文挤成窄条:整块跟到 78rem,正文列限宽到 56rem(约 55 个汉字一行)。 + 再宽眼睛就要来回扫行了,留白比字长更难读。 */} +
) : (
-
+
{DOC_TYPE_LABEL[doc.knowledge.doc_type] ?? doc.knowledge.doc_type}