feat: add pages

docs/design/portal/GLOBAL.md

@@ -55,7 +55,7 @@
 | **Left** | **Logo** | 图片/SVG + 文字，点击回首页 (`/`)。高度控制在 32-40px。 |
 | **Center-Left** | **Nav Links** | 首页、分类、标签等。间距 `space-x-8`。<br>Default: `text-slate-600 font-medium`<br>Hover: `text-primary-600`<br>Active: `text-primary-600` |
 | **Center-Right** | **Global Search** | 圆角矩形输入框 `rounded-full` 或 `rounded-lg`。<br>`bg-slate-100 focus:bg-white focus:ring`。<br>宽度：默认 `w-64`，聚焦时可伸展。 |
-| **Right** | **User Actions** | **未登录**: <br>- [登录]: Ghost Button (`text-slate-600 hover:bg-slate-50`)<br>- [注册]: Primary Button (`bg-primary-600 text-white`)<br>**已登录**: <br>- [通知]: Bell Icon + Badge<br>- [头像]: Avatar + Dropdown Menu |
+| **Right** | **User Actions** | **未登录**: <br>- [登录]: Ghost Button (`text-slate-600 hover:bg-slate-50`)<br>- [注册]: Primary Button (`bg-primary-600 text-white`)<br>**已登录**: <br>- [通知]: **Bell Icon** (h-10 w-10 flex items-center justify-center rounded-full hover:bg-slate-100 relative)。<br>  - **Badge**: 右上角红色圆点或数字，表示未读。<br>  - **交互**: 点击直接跳转至 `/me/notifications`。<br>- [头像]: Avatar + Dropdown Menu |
 
 ---
 
@@ -86,11 +86,53 @@
 - **内边距**: `p-4` 或 `p-6`
 
 ### 4.2 按钮 (Buttons)
-- **Primary**: `bg-primary-600 text-white hover:bg-primary-700 rounded-lg px-4 py-2`
-- **Secondary/Outline**: `border border-slate-300 text-slate-700 hover:bg-slate-50 rounded-lg px-4 py-2`
-- **Ghost**: `text-slate-600 hover:bg-slate-100 rounded-lg px-4 py-2`
+*针对中老年用户优化：增大点击区域与文字标签*
+- **Primary**: `bg-primary-600 text-white hover:bg-primary-700 rounded-lg px-6 py-3 text-lg h-12 flex items-center justify-center`
+- **Secondary/Outline**: `border-2 border-slate-300 text-slate-800 hover:bg-slate-50 rounded-lg px-6 py-3 text-lg h-12 flex items-center justify-center`
+- **Ghost**: `text-slate-700 hover:bg-slate-100 rounded-lg px-4 py-3 text-lg h-12 flex items-center justify-center`
+- **说明**: 按钮高度至少 `48px` (`h-12`)，边框适当加粗以便识别。
 
-### 4.3 标题 (Typography)
-- **H1 (页面主标题)**: `text-2xl sm:text-3xl font-bold text-slate-900`
-- **H2 (区块标题)**: `text-xl font-semibold text-slate-900 mb-4`
-- **Section Header**: 标题 + 操作区 (如“查看更多”) 的组合。
+### 4.3 标题与文字 (Typography)
+*针对中老年用户优化：提升基准字号与行高*
+- **Root Font Size**: PC 端默认 `16px`，允许用户浏览器缩放。
+- **Body Text**: `text-base` (16px) 或 `text-lg` (18px)，行高 `leading-relaxed` (1.625)。
+- **H1 (页面主标题)**: `text-3xl sm:text-4xl font-bold text-slate-900 mb-6`
+- **H2 (区块标题)**: `text-2xl font-bold text-slate-900 mb-5`
+- **H3 (小标题)**: `text-xl font-semibold text-slate-900 mb-3`
+- **辅助文字**: 避免使用小于 `14px` 的文字。辅助色最低为 `text-slate-600` (保证 4.5:1 对比度)。
+
+### 4.4 输入框 (Inputs)
+- **尺寸**: 高度 `h-12` (48px) 或 `h-14` (56px)。
+- **样式**: `text-lg px-4 border-slate-300 focus:border-primary-600 focus:ring-2`。
+- **Label**: 必须显示 Label，字号 `text-base` 或 `text-lg`，不建议仅用 placeholder。
+
+---
+
+## 5. 响应式与可访问性 (Responsive & Accessibility)
+
+确保站点在移动端具备良好体验，并符合 WCAG 可访问性标准，**特别关注中老年用户体验**。
+
+### 5.1 TopNavbar 响应式策略 (Mobile Adaptation)
+当视口宽度小于 `md` (768px) 时，导航栏需进行自适应折叠。
+
+- **导航链接**: 收纳至左侧或右侧的 **汉堡菜单 (Hamburger Menu)**。
+  - 菜单图标需显著，加文字标签 "菜单" 辅助识别。
+  - 抽屉内菜单项字号 `text-lg`，行高宽松。
+- **全局搜索**:
+  - **默认状态**: 仅展示搜索图标 (Magnifying Glass)。
+  - **交互状态**: 点击图标后，展开全宽搜索栏覆盖 Logo 或 弹出模态搜索框。
+- **用户区**:
+  - 若空间允许，保留头像/登录按钮；若空间不足，并入汉堡菜单底部。
+
+### 5.2 键盘导航与焦点 (Keyboard & Focus)
+- **Focus Visible**: 所有交互元素（链接、按钮、输入框）在键盘聚焦时必须有清晰的可见轮廓。
+  - 推荐样式: `focus-visible:ring-4 focus-visible:ring-primary-400 focus-visible:outline-none` (加宽 Ring 宽度)。
+- **Skip Link**: 页面首个可聚焦元素应为 "跳转至主要内容 (Skip to main content)"。
+
+### 5.3 触控目标 (Touch Targets)
+- **最小点击面积**: 移动端交互元素的可点击区域必须 $\ge 48 \times 48$ px (Tailwind `min-h-[48px] min-w-[48px]`)。
+  - 按钮间距 `gap-4` 以上，防止误触。
+
+### 5.4 ARIA 与语义化 (Semantics)
+- **表单标签**: 所有 `<input>` 必须有对应的可视 `<label>`。
+- **高对比度**: 文本与背景对比度至少 **4.5:1** (WCAG AA)，关键信息追求 **7:1** (WCAG AAA)。避免使用浅灰文字。