47 lines
4.9 KiB
Markdown
47 lines
4.9 KiB
Markdown
# 织页 SaaS 界面重构
|
|
|
|
用户明确要求以正式 SaaS 产品为标准，重做当前视觉；保留独立指导文档、条件链接、固定版本与邮箱账户的功能。本次本地开发测试获用户在“重构 Studio 设计与无限画布”chat 的直接授权，最终清理自建临时产物，不删除用户原有文件。所有 main 合并仍由用户完成。
|
|
|
|
## 设计参考与取舍
|
|
|
|
- https://github.com/bergside/awesome-design-skills ：阅读 professional、shadcn、clean 与 minimal 的说明，采用语义令牌、明确状态、统一间距和键盘可达性。professional 当前示例的商店品牌与黄色不适合知识工作台，不直接复制其品牌色。
|
|
- https://ui.shadcn.com/docs/components/sidebar ：参考侧栏的导航分组、账户区与移动端抽屉结构，使用现有 React/CSS Modules 实现，不引入新的组件库依赖。
|
|
- https://linear.app/features ：参考工作型产品的信息层级和克制的工具界面，而非复制营销首页。
|
|
- 原 SkillHub、Hugging Face、GitHub 研究继续用于文档发现、单篇读取、来源与版本的组织。集合不会变成强制加载单位。
|
|
|
|
## 视觉基础
|
|
|
|
背景 #F8F9FC，面板 #FFFFFF，正文 #182230，次级文字 #667085，分隔线 #EAECF0，主色 #4F46E5。错误/成功颜色只表达真实反馈。间距 4/8/12/16/24/32，常规正文 14px，阅读正文 15–16px，页面标题 28px。按钮圆角 8px，面板圆角 12px；不使用装饰性渐变、低对比文字、虚假图表或无行为控件。
|
|
|
|
## 页面与实现
|
|
|
|
1. 应用外壳：左侧工作区、文档导航、资源和真实账户状态；顶部面包屑与创建入口；移动端可关闭、可键盘操作的导航。
|
|
2. 目录：首页与社区/我的文档复用搜索、类型/来源筛选、排序、URL 恢复、按作者查询的我的文档（在数据库限制最近 100 篇前筛选作者）、加载/错误/空状态与文档行；数量来自实际内容。
|
|
3. 阅读页：摘要、适用条件、正文、步骤、检查项、条件链接、固定版本和 XML；读取地址可复制，作者操作具有明确反馈。
|
|
4. 发布页：按内容分组的表单，易读的条件链接编辑，结构化/XML 模式、真实校验预览与版本发布状态；普通用户不用手动拼接账户 UUID。
|
|
5. 账户页：统一表单、注册/登录/重发验证、验证码链接状态、已验证会话和退出反馈；不展示不存在的重置密码、OAuth 或计费入口。
|
|
6. 协议页：与产品一致的文档阅读布局，保留协议的实验状态与权限边界。
|
|
|
|
## 验证
|
|
|
|
在独立工作区本地运行类型、相关单测与构建，真实数据行为沿用现有隔离集成检查。通过可用的浏览器入口查看桌面与窄屏页面，检查导航、搜索/重置、表单、长 ID/链接、键盘焦点和错误反馈。最终提交完整改版 PR，等待用户手动合并后才触发 ces-control 部署；不以开发预览代替正式部署。
|
|
|
|
## 本次检查结果
|
|
|
|
- Node 24：类型检查、51 项单元测试、生产构建与 standalone smoke 通过。构建保留 preview.ts 动态文件跟踪的既有警告。
|
|
- 项目 UI 回归使用隔离 API 夹具，覆盖作者筛选、筛选 URL 恢复、空状态、键盘标签、阅读/XML/版本、账户模式、密码显示、发布门槛、错误保留输入、预览、规范化发布和结构化/XML 往返。
|
|
- 已检查 1440px 桌面与 390px 手机截图；新版真实 PostgreSQL/S3 集成尚待用户手动合并后的 main CI。此前已部署应用的真实邮件、账户、版本与权限证据见 ../linked-guidance/acceptance.md，不能替代新改版的部署验收。
|
|
- 可在运行独立预览后执行：`WORKSPACE_TEST_URL=http://127.0.0.1:3217 CHROMIUM_PATH=<chromium可执行文件> node --import tsx --test tests/guidance-workspace.test.ts`。设置 WORKSPACE_SCREENSHOT_DIR 可生成截图。该用例也随原有集成测试在 CI 隔离栈运行，未添加 PR 或手动 CI 触发器。
|
|
- 目录仅展示最近 100 篇社区文档；我的文档先在数据库筛选作者，再应用此上限。搜索与类型筛选作用于当前已加载目录，不声称全站无限搜索。
|
|
|
|
## 可审阅截图
|
|
|
|
以下为最终生产模式预览截图。社区条目、作者邮箱和编辑器内容均为明确的回归测试夹具，不是生产用户数据；它们只证明 UI 状态，不证明真实邮件投递或持久化发布。
|
|
|
|
- [桌面目录](http://8.211.154.134:18131/api/media/ff134051-5c10-5ccf-a7a1-67c8e7adec04)
|
|
- [桌面阅读](http://8.211.154.134:18131/api/media/c1f67e06-7fe0-520e-9ff6-4a7344163fa1)
|
|
- [账户注册](http://8.211.154.134:18131/api/media/7c0b8374-1f8f-512f-90bc-97cef33c1891)
|
|
- [结构化编辑器](http://8.211.154.134:18131/api/media/63718bd4-3a25-595e-bd45-59f9fbfff1f1)
|
|
- [手机目录](http://8.211.154.134:18131/api/media/3952da7d-5b22-5d03-b3d3-849edcf06fcb)
|
|
- [手机阅读](http://8.211.154.134:18131/api/media/34f6036f-3d5d-5b1b-950b-3fdeac278eb9)
|