feat: apply senior-friendly portal theme and document UX guidelines

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

docs/design/portal/GLOBAL.md

@@ -1,144 +1,155 @@
-# Portal 全局设计准则 (Global Design Guidelines)
+# Portal 适老化 UI/UX 与配色落地规范（v1）
 
-> **适用范围**: PC 端 Portal 站点
-> **核心风格**: 内容型（浅灰背景 + 白色卡片），强调信息层级与阅读体验。
+> 适用范围：`frontend/portal`（PC 优先）
+> 
+> 目标：在保持简约风格的前提下，提升中老年用户（50+）的可读性、可操作性与安全感。
 
-## 1. 全局布局 (Layout & Container)
+## 1. 设计目标与原则
 
-采用经典的垂直分布布局，确保内容区域聚焦且具备良好的扩展性。
+### 1.1 设计目标
 
-### 1.1 页面结构 (DOM Structure)
-- **Root**: `min-h-screen flex flex-col bg-slate-50` (浅灰背景，hex: `#F8FAFC`)
-  - **Header**: `fixed top-0 w-full z-50` (固定顶部)
-  - **Main**: `flex-grow pt-16` (内容自适应填充，顶部留出 Header 高度)
-  - **Footer**: `mt-auto` (页脚沉底)
+1. **简约**：减少视觉噪音与无关装饰，突出主任务路径。
+2. **适老**：强化文字对比、按钮可见性、操作反馈。
+3. **可信**：降低“误触焦虑”，让界面更稳重、更可预期。
 
-### 1.2 核心容器 (Main Container)
-所有页面核心内容需包裹在标准容器内，以保证视觉统一。
-- **宽度限制**: `max-w-screen-xl` (Tailwind default: 1280px)
-- **对齐方式**: `mx-auto` (水平居中)
-- **内边距**: `px-4 sm:px-6 lg:px-8` (响应式呼吸感)
-- **示例代码**:
-  ```html
-  <main class="flex-grow pt-16">
-    <div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 py-8">
-      <!-- Page Content Here -->
-    </div>
-  </main>
-  ```
+### 1.2 设计原则
 
-### 1.3 基础色彩规范 (Basic Colors)
-- **背景色**: `bg-slate-50` (页面底色)
-- **卡片色**: `bg-white` (内容承载)
-- **边框色**: `border-slate-200` (轻微分割线)
-- **文字色**:
-  - 主要: `text-slate-900` (标题、正文)
-  - 次要: `text-slate-500` (描述、辅助信息)
-  - 链接: `text-primary-600 hover:text-primary-700`
+1. **一屏一主动作**：每屏突出 1 个主任务（查、填、确认）。
+2. **显性导航**：始终明确当前所在位置与可返回路径。
+3. **高对比优先**：关键文字和交互区优先保障可读性。
+4. **状态不靠颜色单独表达**：需配合图标与文案。
+5. **可切换高对比模式**：满足低视力/高敏感场景。
 
 ---
 
-## 2. 顶部导航栏 (TopNavbar)
+## 2. 颜色系统（Design Tokens）
 
-全局常驻入口，承载品牌认知与核心路径导航。
+实际实现文件：`frontend/portal/src/assets/main.css`
 
-### 2.1 外观 (Appearance)
-- **尺寸**: 高度 `h-16` (64px)
-- **背景**: `bg-white` (纯白背景)
-- **质感**: `border-b border-slate-200` 或 `shadow-sm` (轻微投影，提升层级)
+### 2.1 语义 Token（默认主题）
 
-### 2.2 布局 (Flex Grid)
-`flex items-center justify-between` + `Container`
+- `--color-bg-base`：页面底色
+- `--color-bg-surface`：卡片/容器底色
+- `--color-bg-surface-highlight`：弱强调底色
+- `--color-text-main`：主文字
+- `--color-text-muted`：次文字
+- `--color-text-inverted`：反白文字
+- `--color-border-base`：默认边框
+- `--color-border-highlight`：强调边框
+- `--color-primary-50...950`：品牌主色梯度
 
-| 区域 | 元素 | 交互/样式 |
-| --- | --- | --- |
-| **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** (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 |
+### 2.2 高对比主题
+
+切换选择器：`[data-theme='senior-high-contrast']`
+
+高对比主题目标：
+- 背景更纯净（白底）
+- 文本更深（黑字）
+- 重点更醒目（黄色强调）
+- 边框更明确（黑色边框）
+
+### 2.3 PrimeVue 语义映射
+
+已通过全局变量映射统一第三方组件视觉：
+
+- `--p-content-background`
+- `--p-content-color`
+- `--p-content-border-color`
+- `--p-primary-color`
+- `--p-primary-contrast-color`
+- `--p-inputtext-background`
+- `--p-inputtext-color`
+- `--p-inputtext-border-color`
 
 ---
 
-## 3. 页脚 (Footer)
+## 3. 组件与页面层应用规范
 
-全局底部信息区，采用深色风格以稳定视觉重心。
+### 3.1 全局布局（已落地）
 
-### 3.1 外观 (Appearance)
-- **背景**: `bg-slate-900` (深色)
-- **文字**: `text-slate-400` (灰色文本，避免纯白刺眼)
-- **链接**: Hover 时变亮 `hover:text-white`
+- 页面容器：`bg-base text-content`
+- 卡片容器：`bg-surface border border-line`
+- 弱强调区：`bg-surface-highlight`
 
-### 3.2 内容结构
-- **Upper Section (Links)**: `py-12`
-  - Grid 布局 (3-4 列)
-  - 栏目：关于我们、帮助中心、法律条款、关注我们 (Social Icons)
-- **Bottom Section (Copyright)**: `border-t border-slate-800 py-6`
-  - 版权声明 (© 2025 Quyun)
-  - ICP 备案号 / 公安网备
+### 3.2 导航栏（TopNavbar）
+
+- 背景：`bg-surface`
+- 边框：`border-line`
+- 主文案：`text-content`
+- 次级文案/图标：`text-muted`
+- 焦点反馈：`focus:ring` + 高对比 outline
+
+### 3.3 页脚（AppFooter）
+
+- 背景：`bg-surface-highlight`
+- 文案：`text-muted`
+- 标题：`text-content`
+- 交互 hover：`hover:text-primary-600`
+
+### 3.4 用户/创作者侧边栏
+
+- 容器：`bg-surface border border-line`
+- 非激活菜单：`text-muted`
+- hover：`hover:bg-surface-highlight hover:text-content`
+- 激活态：`bg-primary-600 text-white`
 
 ---
 
-## 4. 通用 UI 元素 (Common Components)
+## 4. 交互与文案建议（执行级）
 
-### 4.1 内容卡片 (Content Card)
-用于承载列表项、详情块等。
-- **样式**: `bg-white rounded-lg border border-slate-100 shadow-sm transition-shadow hover:shadow-md`
-- **内边距**: `p-4` 或 `p-6`
-
-### 4.2 按钮 (Buttons)
-*针对中老年用户优化：增大点击区域与文字标签*
-- **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)
-*针对中老年用户优化：提升基准字号与行高*
-- **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。
-
-### 4.5 交互反馈 (Interactive Feedback)
-- **鼠标手势**: 所有可点击元素（卡片、按钮、链接、自定义交互区）必须明确指定 `cursor: pointer`。
-- **视觉反馈**: 
-  - Hover 时应伴随背景色微调、阴影加深或缩放效果 (`transition-all`)。
-  - Active 时应有轻微的按下缩放效果 (`active:scale-[0.98]`)，增强操作确认感。
+1. 关键按钮文案使用动词开头：如“确认支付”“保存设置”。
+2. 失败文案避免术语：
+   - ❌ 参数错误
+   - ✅ 信息未填写完整，请检查后重试
+3. 重要状态展示采用“图标 + 颜色 + 文案”三重表达。
+4. 表单错误提示紧贴字段，不只在顶部汇总。
 
 ---
 
-## 5. 响应式与可访问性 (Responsive & Accessibility)
+## 5. 前端落地文件清单（本次）
 
-确保站点在移动端具备良好体验，并符合 WCAG 可访问性标准，**特别关注中老年用户体验**。
+- `frontend/portal/src/assets/main.css`
+- `frontend/portal/src/main.js`
+- `frontend/portal/src/layout/LayoutMain.vue`
+- `frontend/portal/src/layout/LayoutUser.vue`
+- `frontend/portal/src/layout/LayoutCreator.vue`
+- `frontend/portal/src/layout/LayoutAuth.vue`
+- `frontend/portal/src/components/TopNavbar.vue`
+- `frontend/portal/src/components/AppFooter.vue`
 
-### 5.1 TopNavbar 响应式策略 (Mobile Adaptation)
-当视口宽度小于 `md` (768px) 时，导航栏需进行自适应折叠。
+---
 
-- **导航链接**: 收纳至左侧或右侧的 **汉堡菜单 (Hamburger Menu)**。
-  - 菜单图标需显著，加文字标签 "菜单" 辅助识别。
-  - 抽屉内菜单项字号 `text-lg`，行高宽松。
-- **全局搜索**:
-  - **默认状态**: 仅展示搜索图标 (Magnifying Glass)。
-  - **交互状态**: 点击图标后，展开全宽搜索栏覆盖 Logo 或 弹出模态搜索框。
-- **用户区**:
-  - 若空间允许，保留头像/登录按钮；若空间不足，并入汉堡菜单底部。
+## 6. 验收标准（视觉评审）
 
-### 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)"。
+### 6.1 基础检查
 
-### 5.3 触控目标 (Touch Targets)
-- **最小点击面积**: 移动端交互元素的可点击区域必须 $\ge 48 \times 48$ px (Tailwind `min-h-[48px] min-w-[48px]`)。
-  - 按钮间距 `gap-4` 以上，防止误触。
+1. 首页、登录页、用户中心、创作者中心色彩风格一致。
+2. 主操作按钮在 3 秒内可被识别。
+3. 次级文字在普通显示器下可清晰阅读。
 
-### 5.4 ARIA 与语义化 (Semantics)
-- **表单标签**: 所有 `<input>` 必须有对应的可视 `<label>`。
-- **高对比度**: 文本与背景对比度至少 **4.5:1** (WCAG AA)，关键信息追求 **7:1** (WCAG AAA)。避免使用浅灰文字。
+### 6.2 无障碍检查
+
+1. 高对比模式可切换并立即生效。
+2. 聚焦态可视（键盘 Tab 导航清晰）。
+3. 状态提示不依赖单一颜色表达。
+
+### 6.3 快速切换方式（调试）
+
+```js
+document.documentElement.setAttribute('data-theme', 'senior-high-contrast')
+```
+
+恢复默认：
+
+```js
+document.documentElement.removeAttribute('data-theme')
+```
+
+---
+
+## 7. 后续优化建议（v2）
+
+1. 将高对比模式入口显式放到导航栏设置中（非仅调试）。
+2. 增加“标准/适老”主题切换并持久化到本地。
+3. 做 55+ 用户可用性走查（任务完成率、误触率、求助率）。
+4. 对支付/实名认证等高风险流程增加更明确的安全确认文案。