blob: b13a7476fe091de1ae0968f4d125845b5182b65b (
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``
- 文章詳情、富文字、metadata、分享和留言。
* - ``/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 中。圖示按鈕必須有明確的可存取名稱。
可存取性
--------
自訂控制項要保留鍵盤焦點;圖示按鈕和連結需要可讀名稱;淺色和深色主題都要保持足夠對比度;表單必須覆蓋空、載入、成功和錯誤狀態。
|