1440 的屏幕上 40rem 正文只有 640px,两边各空出半屏,用户直接发截图说"留白比内容都多"。 正文列 56rem(约 55 个汉字一行)、卡片 78rem,行宽到头但不用来回扫行。 e2e 的宽度断言跟着改成 720–920px,避免以后再窄回去没人拦。
This commit is contained in:
@@ -669,7 +669,7 @@
|
|||||||
### 11.1 决定
|
### 11.1 决定
|
||||||
|
|
||||||
- **阅读走整页**:`/w/:wsId/knowledge/:itemId`。抽屉在屏幕右侧,正文永远偏在右边,
|
- **阅读走整页**:`/w/:wsId/knowledge/:itemId`。抽屉在屏幕右侧,正文永远偏在右边,
|
||||||
长文读十几屏眼睛一直在右半边;整页可以把正文列限到 40rem 并居中,行宽回到四十来个汉字。
|
长文读十几屏眼睛一直在右半边;整页可以把正文列限宽居中,行宽回到五十来个汉字。
|
||||||
- **抽屉只留给编辑**:编辑是短时动作,改完就走,抽屉"压在当前列表上"反而合适,
|
- **抽屉只留给编辑**:编辑是短时动作,改完就走,抽屉"压在当前列表上"反而合适,
|
||||||
也省掉从编辑页退回列表时的滚动位置丢失。
|
也省掉从编辑页退回列表时的滚动位置丢失。
|
||||||
- 阅读页复用列表页那套文案常量,避免两处各写一份以后对不上(`lib/knowledge.ts`)。
|
- 阅读页复用列表页那套文案常量,避免两处各写一份以后对不上(`lib/knowledge.ts`)。
|
||||||
@@ -683,13 +683,15 @@
|
|||||||
| `pages/Knowledge.tsx` | 卡片与「打开原文」改成 `navigate("/w/<ws>/knowledge/<id>")`;删掉 `openId` 状态与抽屉渲染;`KnowledgeDrawer` 加 `initialEditing`(进来就是编辑器,保存或取消都直接关) |
|
| `pages/Knowledge.tsx` | 卡片与「打开原文」改成 `navigate("/w/<ws>/knowledge/<id>")`;删掉 `openId` 状态与抽屉渲染;`KnowledgeDrawer` 加 `initialEditing`(进来就是编辑器,保存或取消都直接关) |
|
||||||
| `App.tsx` | 新增 `/w/:wsId/knowledge/:itemId` 路由 |
|
| `App.tsx` | 新增 `/w/:wsId/knowledge/:itemId` 路由 |
|
||||||
|
|
||||||
正文列 `max-w-[40rem]` 居中、卡片 `max-w-[46rem]`;换一篇自动回顶。
|
卡片 `max-w-[78rem]`、正文列 `max-w-[56rem]`(约 55 个汉字一行)居中;换一篇自动回顶。
|
||||||
|
第一版按 40rem / 46rem 做的,1546 宽的屏幕上一量,留白比正文还宽——用户直接发了截图。
|
||||||
|
留给以后的界线:正文再宽眼睛就要来回扫行,56rem 是"宽屏不空、又不至于扫行"中间那条线。
|
||||||
编辑仍然是抽屉:`initialEditing` 时没有「看」这一态,点「取消」直接关掉,不留半截改动。
|
编辑仍然是抽屉:`initialEditing` 时没有「看」这一态,点「取消」直接关掉,不留半截改动。
|
||||||
|
|
||||||
### 11.3 验证
|
### 11.3 验证
|
||||||
|
|
||||||
- e2e `web/e2e/knowledge-read.mjs`(新,8 项):点卡片进独立页、`h1` 是标题、正文是渲染后的 `.prose-dadao`
|
- e2e `web/e2e/knowledge-read.mjs`(新,8 项):点卡片进独立页、`h1` 是标题、正文是渲染后的 `.prose-dadao`
|
||||||
且 `.vditor-ir` 计数为 0、正文列 ≤ 760px、正文列在 `main` 里左右留白差 < 40px、点「编辑」才出现编辑器、
|
且 `.vditor-ir` 计数为 0、正文列宽度落在 720–920px(宽屏不留大片空白)、正文列在 `main` 里左右留白差 < 40px、点「编辑」才出现编辑器、
|
||||||
取消后编辑器 detach、控制台零报错。
|
取消后编辑器 detach、控制台零报错。
|
||||||
- 回归:`knowledge-notebook.mjs`(17 项,含"侧栏分类按树排"与"抽屉默认渲染样式")、`knowledge.mjs`(9 项)、
|
- 回归:`knowledge-notebook.mjs`(17 项,含"侧栏分类按树排"与"抽屉默认渲染样式")、`knowledge.mjs`(9 项)、
|
||||||
`knowledge-paging.mjs`(5 项)全绿。
|
`knowledge-paging.mjs`(5 项)全绿。
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 113 KiB After Width: | Height: | Size: 106 KiB |
@@ -4,7 +4,7 @@
|
|||||||
* 断言的是用户提的那件事,而不是"有个 drawer":
|
* 断言的是用户提的那件事,而不是"有个 drawer":
|
||||||
* ① 点卡片后 URL 变成 /w/<ws>/knowledge/<id>,列表页的元素不在了
|
* ① 点卡片后 URL 变成 /w/<ws>/knowledge/<id>,列表页的元素不在了
|
||||||
* ② 正文渲染成样式(h2 存在),不是编辑器
|
* ② 正文渲染成样式(h2 存在),不是编辑器
|
||||||
* ③ 正文列的宽度 ≤ 46rem 且在内容区里居中(左右留白差不多)
|
* ③ 正文列限宽但别太窄(720–920px,约 50 来个汉字一行),且在内容区里居中
|
||||||
* ④ 点「编辑」才出现编辑器(抽屉),保存/取消都收回去
|
* ④ 点「编辑」才出现编辑器(抽屉),保存/取消都收回去
|
||||||
*/
|
*/
|
||||||
import { chromium } from "playwright-core";
|
import { chromium } from "playwright-core";
|
||||||
@@ -119,8 +119,8 @@ try {
|
|||||||
const rightGap = main.x + main.width - (box.x + box.width);
|
const rightGap = main.x + main.width - (box.x + box.width);
|
||||||
const width = box.width;
|
const width = box.width;
|
||||||
check(
|
check(
|
||||||
"正文列限宽到可读宽度(≤46rem≈736px)",
|
"正文列宽度适合长文(720–920px,宽屏不留大片空白)",
|
||||||
width <= 760,
|
width >= 720 && width <= 920,
|
||||||
`width=${Math.round(width)}`,
|
`width=${Math.round(width)}`,
|
||||||
);
|
);
|
||||||
check(
|
check(
|
||||||
|
|||||||
@@ -106,7 +106,9 @@ export function KnowledgeDocPage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<AppShell wsId={wsId} active="knowledge">
|
<AppShell wsId={wsId} active="knowledge">
|
||||||
<div className="mx-auto w-full max-w-[46rem]">
|
{/* 宽屏上别把正文挤成窄条:整块跟到 78rem,正文列限宽到 56rem(约 55 个汉字一行)。
|
||||||
|
再宽眼睛就要来回扫行了,留白比字长更难读。 */}
|
||||||
|
<div className="mx-auto w-full max-w-[78rem]">
|
||||||
<div className="mb-4 flex flex-wrap items-center gap-2">
|
<div className="mb-4 flex flex-wrap items-center gap-2">
|
||||||
<Link
|
<Link
|
||||||
to={`/w/${wsId}/knowledge`}
|
to={`/w/${wsId}/knowledge`}
|
||||||
@@ -142,7 +144,7 @@ export function KnowledgeDocPage() {
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<article className="card px-5 py-6 sm:px-8 sm:py-8">
|
<article className="card px-5 py-6 sm:px-8 sm:py-8">
|
||||||
<div className="mx-auto w-full max-w-[40rem]">
|
<div className="mx-auto w-full max-w-[56rem]">
|
||||||
<div className="flex flex-wrap items-center gap-1.5">
|
<div className="flex flex-wrap items-center gap-1.5">
|
||||||
<span className="chip bg-primary-50 text-primary-700">
|
<span className="chip bg-primary-50 text-primary-700">
|
||||||
{DOC_TYPE_LABEL[doc.knowledge.doc_type] ?? doc.knowledge.doc_type}
|
{DOC_TYPE_LABEL[doc.knowledge.doc_type] ?? doc.knowledge.doc_type}
|
||||||
|
|||||||
Reference in New Issue
Block a user