blob: 4c58ed651d7f4b516d64799c050afd7276a13972 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
前端
====
页面职责
--------
.. list-table::
:header-rows: 1
:widths: 22 34 44
* - 路由
- 主要文件
- 职责
* - ``/``
- ``src/app/(main)/(home)/page.tsx``
- 首页，包含 Hero、最新文章和 Newsletter CTA。
* - ``/posts``
- ``src/app/(main)/(home)/posts/page.tsx``
- 已发布文章的分页列表。
* - ``/posts/[slug]``
- ``src/app/(main)/(home)/posts/[slug]/page.tsx``
- 文章详情、富文本、元数据、分享和评论。
* - ``/tags``
- ``src/app/(main)/(home)/tags/page.tsx``
- 标签索引与文章数量。
* - ``/tags/[tag]``
- ``src/app/(main)/(home)/tags/[...slug]/page.tsx``
- 按标签筛选的文章列表。
* - ``/login``
- ``src/app/(main)/(auth)/login/page.tsx``
- OAuth 登录入口。
UI 原则
-------
* 阅读优先：排版、行宽和对比度应服务长文阅读。
* 导航轻量：文章、标签、搜索、主题切换和账号入口应容易找到。
* 视觉一致：延续虚线边框、角标和克制动效。
* 跨端一致：移动端和桌面端保持相同信息层级。
组件约定
--------
新增组件前先检查 ``src/components/ui`` 和现有页面组件。共享组件应接收规范化 props，数据获取应放在 Server Component 或 ``src/lib`` helper 中。图标按钮必须有明确的可访问名称。
可访问性
--------
自定义控件要保留键盘焦点；图标按钮和链接需要可读名称；浅色和深色主题都要保持足够对比度；表单必须覆盖空、加载、成功和错误状态。
|
