初始化

docs/specs/F1-认证与账户.md

@@ -0,0 +1,483 @@
+# F1 统一认证与账户中心
+
+> **涉及端**：用户端（`Case-Database-Frontend-user`）+ 后端（`Case-Database-Backend`）
+>
+> **关联文档**：
+> - API 契约：[api-contracts.md §2.1 用户端认证](../architecture/api-contracts.md)
+> - 数据模型：[data-model.md §4.1 用户与权限域](../architecture/data-model.md)
+> - UI 规范：[ui-specs-user.md](../guides/ui-specs-user.md)
+> - 参考原型：`docs/reference/登录页.html`
+
+---
+
+## 目标与边界
+
+- 在保持本系统独立账号体系前提下，实现与企业数字化平台便捷互通登录
+- 覆盖账号登录、短信登录、扫码登录、OAuth 登录、企业 SSO、注册、找回密码与个人中心
+- 完善验证码、风控、审计、会话安全与协议合规，不在前端和日志中存储敏感明文
+
+---
+
+## 开发状态说明
+
+> - 🟢 已完成 — 前后端均已联调可用
+> - 🟡 前端已完成 — 前端 UI 和交互已实现，待后端对接
+> - 🟠 前端部分完成 — 前端 UI 存在但逻辑为占位/模拟，需补全
+> - ⚪ 待开发 — 前后端均未开发
+
+## 功能清单
+
+| 编号 | 功能 | 优先级 | 状态 |
+|------|------|--------|------|
+| F1.1 | 多模式登录（账号 / 短信 / 扫码） | P0 | 🟠 部分完成 |
+| F1.2 | 第三方授权登录（微信 / QQ） | P1 | 🟠 仅入口 UI |
+| F1.3 | 账户辅助功能（自动登录 / 忘记密码） | P0 | 🟠 部分完成 |
+| F1.4 | 全局主题切换（深色 / 浅色） | P1 | 🟢 已完成 |
+| F1.5 | 简易个人中心 | P1 | 🟠 仅基础展示 |
+| F1.6 | 用户注册 | P0 | 🟠 仅 UI 框架 |
+| F1.7 | 安全管理后台 | P1 | ⚪ 待开发 |
+| F1.8 | 企业 SSO 集成 | P1 | ⚪ 待开发 |
+| F1.9 | 多端会话管理 | P2 | ⚪ 待开发 |
+
+---
+
+## F1.1 多模式登录（P0） — 🟠 部分完成
+
+### 开发现状
+
+| 子功能 | 前端 | 后端 | 说明 |
+|--------|------|------|------|
+| 左右分屏布局 | ✅ | — | `LoginView.vue` + `LoginBanner.vue` |
+| 账号密码登录 | ✅ | ✅ | `LoginTabPanel.vue` → `useLoginForms.handleLogin` → `authApi.login` 已联调 |
+| 短信登录表单 | ✅ | ❌ | UI 已实现（Headless UI TabPanel），但逻辑仅 Toast 提示"短信登录未实现" |
+| 密码明文切换 | ✅ | — | `AppInput.vue` 已支持 |
+| 账号/短信标签页切换 | ✅ | — | Headless UI `TabGroup` 实现 |
+| 扫码登录 | ❌ | ❌ | 未实现（无二维码图标入口、无二维码区域） |
+| 图形验证码 | ✅ | ✅ | 拼图滑块验证码已实现，登录/注册/发短信前触发 |
+| 登录成功跳转 redirect | ✅ | — | 路由守卫已携带 `redirect` 参数，登录后跳转已实现 |
+| Loading 态 | ✅ | — | 提交时按钮 Loading 态已实现 |
+| 错误提示统一 | ❌ | ❌ | 当前直接暴露后端原始错误，未做统一化处理 |
+
+### 用户故事
+
+作为用户，我希望通过账号、短信和扫码三种方式快速登录，并在异常场景下得到明确、可恢复的提示。
+
+### 功能描述
+
+- 登录页采用左右分屏：左侧品牌展示，右侧认证功能区
+- 账号登录与短信登录通过表单内顶部标签页切换（仅两个标签：账号登录 / 短信登录）
+- 账号登录：`username` 或手机号 + 密码，支持明文切换
+- 短信登录：手机号 + 短信验证码
+- 扫码登录：点击输入区右上角二维码图标切换到二维码区域（独立于标签页）
+
+### 交互细节
+
+- 账号/短信切换：两个标签页原地切换，共享底部区域（第三方登录入口、协议勾选）
+- 扫码切换：点击二维码图标后，整个表单区（含标签页）执行 `fade + slide` 过渡替换为二维码区；二维码区右上角提供"返回账号登录"图标，点击后恢复表单
+- 二维码区包含：二维码、刷新按钮、剩余有效时间（180 秒）和状态文本
+- 扫码状态流转：等待扫描 → 待用户确认 → 确认中 → 登录成功
+- 二维码过期自动刷新并提示"二维码已更新，请重新扫码"
+- "登录"与"发送短信"前，均需通过图形验证码挑战
+
+### 表单与校验规则
+
+- `username`：4-20 位，字母数字下划线
+- `phone`：符合中国大陆手机号格式
+- `password`：8-20 位，必须同时包含字母和数字，拒绝常见弱口令（后端维护弱口令黑名单，如 `12345678`、`password`、`qwerty123`）
+- `sms_code`：6 位数字，5 分钟有效
+- 密码强度指示（注册和修改密码场景显示）：弱 = 仅满足最低长度和字符要求；中 = 含大小写混合或特殊字符；强 = 12 位以上且含大小写 + 数字 + 特殊字符
+- 登录错误提示统一为"账号或密码错误"或"账号或校验信息不匹配"
+
+### 错误与加载态
+
+- 提交按钮进入 Loading 态，防重复点击
+- 网络超时：提示"网络异常，请稍后重试"
+- 验证码过期：提示并自动刷新验证码挑战
+- 风控限流：返回剩余重试时间，并提示稍后再试
+- 账号锁定：提示锁定时长和解锁路径（短信解锁或等待）
+
+### 登录成功跳转
+
+- 如果用户登录前访问了需认证的页面（被拦截跳转到登录页），登录成功后自动跳回该页面
+- 前端通过 URL query 参数 `redirect` 携带原始路径，登录成功后读取并跳转
+- `redirect` 值必须为站内相对路径，禁止跳转到外部 URL（防开放重定向攻击）
+- 无 `redirect` 参数时默认跳转首页
+
+### 验收标准
+
+- [x] 账号密码登录可认证并跳转首页
+- [x] 账号/短信标签页可正常切换，共享底部区域
+- [x] 登录成功后跳回 `redirect` 指定的站内页面
+- [x] 密码输入支持明文/密文切换
+- [x] 提交按钮有 Loading 态
+- [ ] 短信登录对接后端 API（当前为占位）
+- [ ] 扫码登录功能完整实现
+- [x] 登录/发送短信均经过图形验证码验证
+- [ ] 二维码支持倒计时与自动刷新
+- [ ] 错误提示统一化处理（不暴露后端原始错误）
+
+---
+
+## F1.2 第三方授权登录（P1） — 🟠 仅入口 UI
+
+### 开发现状
+
+| 子功能 | 前端 | 后端 | 说明 |
+|--------|------|------|------|
+| 微信/QQ 登录入口展示 | ✅ | — | `ThirdPartyLogin.vue` 已渲染图标 |
+| OAuth 跳转 | ❌ | ❌ | 按钮无点击事件 |
+| 回调处理 | ❌ | ❌ | 无回调页面和逻辑 |
+| 手机号绑定引导 | ❌ | ❌ | |
+
+### 用户故事
+
+作为用户，我希望使用微信或 QQ 一键登录，避免重复注册。
+
+### 功能描述
+
+- 登录区底部展示微信、QQ 登录入口
+- 首次授权自动创建账号并建立绑定，后续直接登录
+
+### 交互细节
+
+- OAuth 流程：跳转授权页 → 授权 → 回调 → 绑定或登录 → 跳转原页面
+- 未绑定用户引导补充手机号（若第三方未提供可靠手机号）
+- 已绑定用户直接签发本系统会话 Token
+
+### 数据约定
+
+- 首次 OAuth 创建账号时，`users.source` 设为对应 provider（`wechat` / `qq`）
+- 手机号冲突处理：若 OAuth 返回的手机号已被其他本地账号绑定，提示用户"该手机号已注册，请用该手机号登录后在个人中心绑定"，不自动合并
+
+### 验收标准
+
+- [x] 微信/QQ 登录入口 UI 已展示
+- [ ] 微信 OAuth 跳转和回调流程完整可用
+- [ ] QQ OAuth 跳转和回调流程完整可用
+- [ ] 已绑定用户直接登录，未绑定用户进入绑定流程
+
+---
+
+## F1.3 账户辅助功能（P0） — 🟠 部分完成
+
+### 开发现状
+
+| 子功能 | 前端 | 后端 | 说明 |
+|--------|------|------|------|
+| 自动登录勾选 UI | ✅ | ❌ | `LoginTabPanel.vue` 勾选框已实现，但未真正影响会话有效期 |
+| 忘记密码表单 UI | ✅ | ❌ | `ForgotPanel.vue` 表单已实现，含用户名/手机号/验证码/新密码字段 |
+| 忘记密码提交逻辑 | ❌ | ❌ | `useLoginForms.handleForgot` 为 `setTimeout` 模拟，无 API 调用 |
+| 验证码发送 | ❌ | ❌ | `sendCode` 仅 Toast 提示，无真实发送 |
+
+### 用户故事
+
+作为用户，我希望系统记住登录状态并在忘记密码时快速恢复访问。
+
+### 功能描述
+
+- 自动登录：勾选后延长会话有效期（30 天）
+- 忘记密码：账号/手机号 + 短信验证码 + 新密码重置
+
+### 找回密码流程
+
+1. 输入账号或手机号（至少填一项；OAuth 用户可能无 username，此时仅填手机号即可）
+2. 验证关联手机号并发送短信验证码
+3. 校验验证码后设置新密码并确认
+4. 重置成功后跳转登录页
+
+### 安全规则
+
+- 错误提示统一为"账号或校验信息不匹配"，避免账号枚举
+- 新密码不可与最近一次密码相同
+- 重置成功后主动使历史会话失效
+
+### 验收标准
+
+- [x] 自动登录勾选 UI 可用
+- [x] 忘记密码表单 UI 完整（含用户名、手机号、验证码、新密码字段）
+- [ ] 自动登录勾选后真正延长会话有效期
+- [ ] 忘记密码对接后端 API
+- [ ] 短信验证码发送对接后端 API
+- [ ] 重置密码后旧会话失效
+
+---
+
+## F1.4 全局主题切换（P1） — 🟢 已完成
+
+### 开发现状
+
+| 子功能 | 前端 | 后端 | 说明 |
+|--------|------|------|------|
+| 主题切换图标 | ✅ | — | 登录页已实现切换按钮 |
+| 深色/浅色双主题 | ✅ | — | 使用 `@vueuse/core` 的 `useDark` + `useToggle` |
+| 偏好持久化 | ✅ | — | `useDark` 自动持久化到 `localStorage` |
+| 系统偏好跟随 | ✅ | — | `useDark` 默认跟随 `prefers-color-scheme` |
+
+### 用户故事
+
+作为用户，我希望在深色模式和浅色模式间切换，以适配不同使用环境。
+
+### 功能描述
+
+- 顶部导航栏提供主题切换图标
+- 支持浅色/深色两套主题，并在本地持久化
+- 支持 `prefers-color-scheme` 初次自动跟随
+
+### 验收标准
+
+- [x] 切换后全局 UI 立即生效
+- [x] 刷新页面后主题偏好保持
+- [ ] 核心页面在深色模式下可读性正常（需全页面回归验证）
+
+---
+
+## F1.5 简易个人中心（P1） — 🟠 仅基础展示
+
+### 开发现状
+
+| 子功能 | 前端 | 后端 | 说明 |
+|--------|------|------|------|
+| 导航栏用户信息展示 | ✅ | ✅ | `AppNavbar.vue` 展示昵称或"用户"，已登录/未登录切换正常 |
+| 下拉菜单 | ❌ | — | 无下拉菜单组件，无个人信息/修改密码/绑定管理入口 |
+| 退出登录 | ❌ | ❌ | 导航栏无退出入口，`userStore.logout` 方法已存在但未绑定到 UI |
+| 账号注销 | ❌ | ❌ | |
+
+### 用户故事
+
+作为已登录用户，我希望查看自身信息并管理账户安全相关操作。
+
+### 功能描述
+
+- 顶部导航右侧展示头像、昵称、角色标签
+- 下拉菜单：个人信息、修改密码、绑定管理、退出登录
+- 支持账号注销入口（7 天冷静期，可撤销）
+
+### 验收标准
+
+- [x] 登录态展示用户昵称，未登录态展示"登录"链接
+- [ ] 导航栏增加下拉菜单（个人信息、修改密码、绑定管理、退出登录）
+- [ ] 退出登录功能可用
+- [ ] 账号注销流程含冷静期提示与撤销能力
+
+---
+
+## F1.6 用户注册（P0） — 🟠 仅 UI 框架
+
+### 开发现状
+
+| 子功能 | 前端 | 后端 | 说明 |
+|--------|------|------|------|
+| 注册表单 UI | ✅ | — | `RegisterPanel.vue` 已实现（用户名、手机号、验证码、密码、确认密码） |
+| 昵称字段 | ❌ | — | 当前注册表单缺少昵称输入项 |
+| 密码强度指示 | ❌ | — | 未实现 |
+| 协议勾选 | ❌ | — | 未实现 |
+| 注册提交逻辑 | ❌ | ❌ | `useLoginForms.handleRegister` 为 `setTimeout` 模拟，无 API 调用 |
+| 验证码发送 | ❌ | ❌ | 仅 Toast，无真实发送 |
+| `auth.ts` 注册 API | ❌ | ❌ | 未定义 `register` 方法 |
+
+### 用户故事
+
+作为新用户，我希望通过账号注册快速完成开户并进入系统。
+
+### 功能描述
+
+- 注册字段：账号（username）、昵称（nickname）、手机号、短信验证码、密码、确认密码
+- 昵称为选填，留空时系统自动生成默认昵称（如"用户\_" + 随机 6 位字符）
+- 页面实时显示密码强度（弱/中/强）
+- 注册前必须确认协议（默认未勾选）
+
+### 校验规则
+
+- 账号唯一，手机号唯一
+- 账号不允许使用系统保留词（`admin`、`system`、`root`、`test`、`api`、`null`、`undefined` 等），后端维护保留词列表
+- 账号须通过敏感词过滤，拒绝包含违规内容的用户名
+- 昵称长度限制 2-30 字符，同样需通过敏感词过滤
+- 密码复杂度：8-20 位，必须同时包含字母和数字，拒绝常见弱口令（如 `12345678`、`password`、`qwerty123`），后端维护弱口令黑名单
+- 短信验证码 5 分钟有效，错误次数达到阈值后触发风控
+
+### 数据约定
+
+- 注册创建账号时，`users.source` 设为 `local`
+- `users.user_type` 注册时固定为 `user`，管理员仅由后台创建
+
+### 验收标准
+
+- [x] 注册表单基础 UI 已实现（用户名、手机号、验证码、密码、确认密码）
+- [ ] 注册表单补充昵称字段
+- [ ] 密码强度实时指示
+- [ ] 协议勾选组件及拦截逻辑
+- [ ] 注册对接后端 API（`authApi.register`）
+- [ ] 短信验证码对接后端 API
+- [ ] 系统保留词和敏感词被拒绝并给出明确提示
+- [ ] 协议未同意时不可提交注册
+
+---
+
+## F1.7 安全管理后台（P1） — ⚪ 待开发
+
+### 功能描述
+
+- 黑名单管理：IP、设备指纹、账号维度封禁/解封
+- 登录日志：时间、IP、设备、登录类型、成功/失败、风控命中原因
+- 账号锁定记录：支持检索与手动解锁
+- 风控策略配置：阈值、封禁时长、白名单
+
+### 验收标准
+
+- [ ] 可查看和检索登录审计日志
+- [ ] 可配置限流和锁定策略
+- [ ] 支持手动解封和白名单管理
+
+---
+
+## F1.8 企业 SSO 集成（P1） — ⚪ 待开发
+
+### 用户故事
+
+作为企业内部用户，我希望从企业数字化平台无感知进入本系统。
+
+### 设计原则
+
+- 本系统保持独立账号池和会话体系
+- 企业平台作为外部 IdP，通过桥接流程完成认证
+- 协议优先级：OIDC/OAuth2（首选）> 自定义签名票据（兜底）
+
+### 账号映射策略
+
+1. 优先按 `enterprise_user_id` 绑定本地账号
+2. 未绑定时按手机号/邮箱进行二次确认绑定
+3. 仍无匹配账号则创建外部来源账号并标记来源
+
+### 直达登录要求
+
+- 支持企业平台深链：`state` + `nonce` + 回调白名单
+- 凭据短时效、一次性使用，防重放
+- SSO 登录失败可回退本地登录
+
+### 验收标准
+
+- [ ] 企业用户可从外部平台直达登录
+- [ ] 首次登录自动完成绑定或创建
+- [ ] 企业平台不可用时，本地登录路径不受影响
+
+---
+
+## F1.9 多端会话管理（P2） — ⚪ 待开发
+
+### 功能描述
+
+- 个人中心展示当前账号在线会话列表（设备、地区、最近活跃时间）
+- 支持手动踢出指定会话
+- 系统可配置是否允许多端同时在线（单点挤占）
+
+### 验收标准
+
+- [ ] 可查看在线会话并识别当前设备
+- [ ] 支持踢出其他设备并即时生效
+- [ ] 单点挤占模式下，新登录会使旧会话失效
+
+---
+
+## 图形验证码与协议合规 — ⚪ 待开发
+
+### 图形验证码规范
+
+- 挑战类型：拼图滑块（slider puzzle）
+- 触发点：登录提交、发送短信、注册提交、找回密码关键步骤
+- 交互流程：
+  1. 前端调用 `POST /api/auth/captcha/challenge`，后端生成随机 `target_x` 位置（60 ~ width-60），连同 `captcha_token`、`width`、`target_x` 一起返回
+  2. 前端展示拼图区域：上方为带有缺口（target gap）的背景图案，缺口位于 `target_x` 处；滑块控制一个拼图块在背景上水平移动
+  3. 用户拖动滑块将拼图块对齐缺口位置，松手后前端提交 `answer_x` 到 `POST /api/auth/captcha/verify`
+  4. 后端校验 `abs(answer_x - target_x) <= tolerance`（tolerance = 10px），通过后标记 `captcha_verified:{token}`
+  5. 验证通过后前端获得一次性 `captcha_token`（5 分钟有效），提交业务请求时携带，后端校验后立即销毁
+- 视觉反馈：拼图块接近缺口时（误差 ≤ 10px），缺口和拼图块同步变为绿色，提示用户已对齐
+- 校验数据存储于 Redis（非 MySQL），防止数据库压力
+
+### 协议同意规范
+
+- 登录和注册页展示"我已阅读并同意《用户协议》《隐私政策》"
+- 默认不勾选；未勾选提交时弹窗提醒并提供"一键同意并继续"
+- 服务端记录 `agree_at` 与 `agreement_version`
+
+---
+
+## 安全与风控策略 — ⚪ 待开发
+
+### 限流规则
+
+- 登录：同 IP 5 次/分钟；同账号 10 次/小时
+- 短信：同手机号 1 次/分钟，5 次/天
+- 注册：同 IP 3 次/小时
+- 密码重置：同账号 3 次/天
+
+### 分级响应
+
+- L1 轻度异常：提升验证码难度
+- L2 中度异常：账号/IP/设备短期限流
+- L3 重度异常：冻结高风险动作并触发人机复核
+- L4 确认恶意：自动拉黑并进入观察名单
+
+### 防攻击要求
+
+- 防撞库：统一错误提示，不暴露账号存在性
+- 防暴力破解：连续 5 次密码错误锁定 30 分钟
+- 防重放：SSO 一次性状态值 + 回调校验
+- 会话安全：Access Token 2h，Refresh Token 7d，支持轮换与吊销
+
+### Token 存储方案
+
+- Access Token 通过 `httpOnly`、`Secure`、`SameSite=Strict` Cookie 下发，前端不可通过 JS 读取，防止 XSS 窃取
+- Refresh Token 同样存储在 `httpOnly` Cookie 中，路径限制为 `/api/auth/refresh`
+- 禁止将 Token 存储在 `localStorage` 或 `sessionStorage`
+
+> **当前实现差异**：`userStore` 当前将 Token 存储在 `localStorage` 中，需在后端 Cookie 方案就绪后迁移。
+
+### 退出登录范围
+
+- 常规退出（F1.5 下拉菜单"退出登录"）：仅使当前设备的 Access Token 和 Refresh Token 失效
+- 全部退出（F1.9 会话管理"退出所有设备"）：使账号下所有会话 Token 失效
+- 密码重置（F1.3）和账号锁定触发时：自动使所有会话 Token 失效
+
+---
+
+## 已开发代码索引
+
+> 供研发快速定位已有实现，避免重复开发。
+
+| 文件路径 | 职责 |
+|----------|------|
+| `src/views/login/LoginView.vue` | 登录主页面：左右分屏、视图切换（login/register/forgot）、主题切换 |
+| `src/views/login/components/LoginTabPanel.vue` | 账号登录 + 短信登录标签页、自动登录勾选 |
+| `src/views/login/components/RegisterPanel.vue` | 注册表单 UI |
+| `src/views/login/components/ForgotPanel.vue` | 忘记密码表单 UI |
+| `src/views/login/components/ThirdPartyLogin.vue` | 微信/QQ 第三方登录入口 UI |
+| `src/views/login/components/LoginBanner.vue` | 左侧品牌展示区 |
+| `src/views/login/composables/useLoginForms.ts` | 表单状态和提交逻辑（账号登录已联调，其余为占位） |
+| `src/components/ui/AppInput.vue` | 通用输入框（含密码明文切换） |
+| `src/components/auth/useCaptchaSlider.ts` | 拼图滑块验证码核心逻辑（拖拽、对齐检测、验证提交） |
+| `src/api/auth.ts` | 认证 API（login / logout / refresh / getProfile / updateProfile / captcha） |
+| `src/stores/user.ts` | 用户状态管理（token / userInfo / login / logout） |
+| `src/router/index.ts` | 路由守卫（未登录 → /login?redirect=xxx） |
+| `src/components/layout/AppNavbar.vue` | 导航栏（登录态展示昵称，未登录展示登录链接） |
+
+---
+
+## 分阶段落地建议
+
+- Phase A（P0）：短信登录对接、注册对接、忘记密码对接、图形验证码、协议勾选、注册补昵称/密码强度
+- Phase B（P0）：企业 SSO 桥接、账号映射与直达登录
+- Phase C（P0/P1）：风控引擎、自动拉黑、安全后台、Token 存储迁移至 httpOnly Cookie
+- Phase D（P1）：个人中心下拉菜单、退出登录、OAuth 对接、多端会话管理、监控告警
+
+---
+
+## 验收指标
+
+- 正常用户登录成功率 ≥ 98%
+- 短信接口恶意触发量按周下降
+- 企业用户无感登录成功率持续提升且不影响外部用户路径
+- 协议同意和风控决策具备可审计追溯能力
+
+---
+
+*最后更新: 2026-03-04*

docs/specs/F2-首页.md

@@ -0,0 +1,303 @@
+# F2 首页
+
+> **涉及端**：用户端（`Case-Database-Frontend-user`）+ 后端（`Case-Database-Backend`）
+>
+> **关联文档**：
+> - API 契约：[api-contracts.md §2.2 用户端案例](../architecture/api-contracts.md) / [§2.4 用户端内容](../architecture/api-contracts.md)
+> - 数据模型：[data-model.md §4.2 案例核心域](../architecture/data-model.md) / [§4.4 运营内容域](../architecture/data-model.md)
+> - UI 规范：[ui-specs-user.md](../guides/ui-specs-user.md)
+> - 参考原型：`docs/reference/首页.html`
+
+---
+
+## 功能清单
+
+| 编号 | 功能 | 优先级 | 状态 |
+|------|------|--------|------|
+| F2.1 | 顶部导航与分类频道 | P0 | 🟢 已实现 |
+| F2.2 | 全局模糊搜索 | P0 | 🟡 部分实现 |
+| F2.3 | Hero 焦点推荐位 | P0 | 🟢 已实现 |
+| F2.4 | 多维条件过滤与收藏夹 | P0 | 🟡 部分实现 |
+| F2.5 | 富数据项目卡片 | P0 | 🟢 已实现 |
+| F2.6 | 底部全局模块 | P2 | ⚪ 待开发 |
+
+> **状态说明**：🟢 已实现 = 前端 UI 与核心交互已完成；🟡 部分实现 = UI 框架已有，部分子功能待开发；⚪ 待开发 = 尚未启动。
+
+---
+
+## F2.1 顶部导航与分类频道（P0 · 🟢 已实现）
+
+### 用户故事
+
+作为用户，我希望通过分类频道快速定位感兴趣的案例类型，并在右上角管理个人账户和主题偏好。
+
+### 功能描述
+
+- 顶部固定导航栏：Logo + 分类频道 + 搜索 + 用户区
+- 分类频道标签：全部 / 别墅 / 室内 / 民宿 / 景观 / 专题 / 设计师
+- 切换频道后内容区实时过滤更新
+- **用户区（右上角）**：
+  - 未登录：显示「登录」按钮
+  - 已登录：显示用户头像，点击展开下拉菜单（个人信息 / 我的收藏 / 退出登录）
+  - 主题切换按钮：暗色 ↔ 亮色模式切换，偏好持久化至 `localStorage`
+- 登录成功后默认跳转至首页
+
+### 交互细节
+
+- **导航栏滚动行为**：初始透明背景，页面滚动超过 80px 后过渡为实色背景（带阴影）
+- **频道切换过渡动效**：当前激活频道下方显示指示线，切换时指示线平滑滑动
+- **主题切换**：图标在 `SunIcon`（亮色）与 `MoonIcon`（暗色）之间切换，带旋转过渡动效
+
+### 验收标准
+
+- [x] 频道切换时内容区无刷新更新（SPA 路由）
+- [x] 当前激活频道高亮显示，带下方指示线
+- [x] 导航栏滚动时保持固定（sticky），透明 → 实色背景过渡
+- [x] 频道标签顺序：全部 / 别墅 / 室内 / 民宿 / 景观 / 专题 / 设计师
+- [x] 右上角未登录显示登录按钮，已登录显示头像及下拉菜单
+- [x] 暗色 / 亮色主题可切换，偏好持久化
+
+---
+
+## F2.2 全局模糊搜索（P0 · 🟡 部分实现）
+
+### 用户故事
+
+作为用户，我希望通过关键词快速找到目标案例，以便提高检索效率。
+
+### 功能描述
+
+- 全局搜索框，支持搜索：项目名称、项目编号、建筑师姓名
+- 搜索框位置：导航栏右侧（桌面端）
+- 搜索结果实时展示联想下拉，或回车跳转搜索结果页
+
+### 交互细节
+
+- **实时联想下拉**：输入关键词后 300ms 防抖触发搜索请求，下拉面板最多展示 8 条匹配结果，匹配关键词高亮
+- **搜索历史记录**：持久化至 `localStorage`，保留最近 10 条搜索词，支持一键清除全部历史
+- **搜索结果页**：回车后跳转至搜索结果页，结果按相关度排序，支持分页
+- **空结果**：展示友好的空状态插图 + 推荐搜索词
+
+### 验收标准
+
+- [x] 搜索框在导航栏中可见
+- [ ] 输入关键词后 300ms 防抖触发联想下拉
+- [ ] 联想下拉最多展示 8 条，匹配关键词高亮
+- [ ] 搜索历史持久化，支持清除
+- [ ] 空结果展示空状态插图与推荐词
+
+---
+
+## F2.3 Hero 焦点推荐位（P0 · 🟢 已实现）
+
+### 用户故事
+
+作为运营，我希望在管理端自定义首页大图的内容（图片、标题、描述等），以便灵活引导用户注意力。
+
+### 功能描述
+
+首页顶部全宽大图轮播区域，支持两种内容源（管理端创建轮播条目时选择）：
+
+- **`image`（单图模式）**：上传背景图 + 自定义标题 / 描述 / 标签文字 / 跳转链接
+- **`topic`（专题模式）**：选择已有专题，自动继承专题封面、标题、描述，点击跳转专题详情页
+
+#### 自定义字段（均由管理端配置，前端不硬编码）
+
+| 字段 | 说明 | 示例 |
+|------|------|------|
+| `label` | 左上角标签文字 | "精选项目" / "本周专题" |
+| `title` | 大标题 | "云端墅 — 现代都市别墅的极致诠释" |
+| `description` | 描述摘要 | "三层框架结构，340㎡ 全功能空间" |
+| `cta_text` | 行动按钮文字 | "阅读全文" / "查看专题" |
+| `link_url` | 点击跳转地址 | "/cases/88" / "/topics/3" |
+| `image` | 背景图片 URL | — |
+
+#### 轮播行为
+
+- 自动播放，间隔 5s，鼠标 hover 时暂停自动播放
+- 手动切换：左右箭头按钮 + 底部圆点指示器
+- 过渡动效：淡入淡出 + 轻微水平位移
+- 背景图片带灰度滤镜处理
+
+### 交互细节
+
+- **轮播指示器**：底部圆点，当前项高亮，点击可跳转到对应条目
+- **左右箭头**：默认隐藏，鼠标 hover 轮播区域时显示，点击切换上/下一条
+- **骨架屏**：轮播数据加载前显示骨架屏占位，避免布局抖动
+
+### 验收标准
+
+- [x] 轮播支持自动播放（5s 间隔）与手动切换
+- [x] 管理端配置的标题 / 描述 / 标签在前端实时呈现
+- [x] `image` 类型条目支持自定义跳转任意内链
+- [x] `topic` 类型条目点击后跳转专题详情页
+- [x] 热门标签点击后跳转至对应筛选结果
+
+---
+
+## F2.4 多维条件过滤与收藏夹（P0 · 🟡 部分实现）
+
+### 用户故事
+
+作为设计师，我希望通过多个维度交叉筛选案例，或快速查看我收藏的项目，以便精准定位参考案例。
+
+### 功能描述
+
+- **快捷风格 Tab**（🟢 已实现）：横向风格标签切换（全部风格 / 现代 / 中式 / 新中式 / 欧式 / 田园 / 其它）
+- **高级筛选器**（🟢 已实现）：下拉面板，支持多维度交叉筛选（面积范围、造价范围、层数、结构类型等）
+- **视图切换**（🟢 已实现）：网格视图（Grid）与列表视图（List）双模式切换
+- **收藏夹入口**（⚪ 待开发）：快捷筛选"我收藏的"案例
+
+### 收藏夹交互流程
+
+1. 点击筛选栏中的「收藏夹」按钮 → 卡片列表切换为仅展示当前用户已收藏的案例
+2. 再次点击「收藏夹」按钮或刷新页面 → 退出收藏夹模式，恢复全量列表
+3. 收藏夹模式激活时，按钮高亮显示以区分状态
+4. 未登录用户点击「收藏夹」 → 弹出登录引导弹窗
+5. 收藏夹模式下无收藏内容 → 显示空状态引导（"去发现喜欢的案例"）
+
+### 交互细节
+
+- **筛选条件 URL 同步**：所有筛选参数（`category`、`style`、`keyword`、`favorites` 等）写入 URL query string，支持浏览器前进/后退和分享链接
+- **已选条件展示**：以「标签胶囊」形式显示在筛选栏下方，支持单项点击清除或一键全部重置
+- **筛选面板动效**：展开/折叠使用从顶部向下滑入的过渡
+- **筛选变更后的刷新策略**：清空现有卡片，重新加载首屏数据（非追加）
+
+### 验收标准
+
+- [x] 风格 Tab 切换实时过滤卡片内容
+- [x] 高级筛选器支持多条件叠加且可一键重置
+- [x] 视图切换（网格 / 列表）保持筛选状态不丢失
+- [ ] 收藏夹按钮点击后切换到已收藏内容，再次点击或刷新退出
+- [ ] 收藏夹按钮激活时高亮区分
+- [ ] 未登录用户点击收藏夹弹出登录引导
+- [ ] 筛选参数同步至 URL query string
+
+---
+
+## F2.5 富数据项目卡片（P0 · 🟢 已实现）
+
+### 用户故事
+
+作为用户，我希望在卡片上一眼获取案例的核心参数，并通过悬浮操作快速收藏或点赞。
+
+### F2.5a 卡片结构与字段自定义
+
+- 卡片封面图（支持 Hover 缩放动效）
+- 基础信息：项目名称（`title`）、项目编号（`code`）
+- 业务标签：建筑类型角标（`category`，如别墅/民宿等）、特色标签（`tags`，如落地窗、工业风等）
+- 状态标识：精选徽章（金色角标，由 `is_featured` 字段驱动）
+- **核心参数网格（6 项外显）**：在管理端上传案例时，运营人员可自定义选择展示哪 6 项参数
+  - 字段选项池来自案例的 `dimensions` 数据（约 15+ 个维度字段：开间、进深、占地面积、建筑总面积、户型布局、预估造价、结构类型、设计师、层数等）
+  - 标题、标签、角标均读取案例对应字段，前端不硬编码
+
+### F2.5b 卡片加载策略（动态加载）
+
+- **首屏加载**：6 行 × 当前视图列数
+  - 网格模式（3 列）= 18 条
+  - 列表模式 = 6 条
+- **触底追加加载**：用户向下滚动触底时，每次追加 2 行
+  - 网格模式 = 追加 6 条
+  - 列表模式 = 追加 2 条
+- **加载中状态**：显示骨架屏（Skeleton UI）占位
+- **加载完毕**：全部数据加载完成后显示「已加载全部内容」底部提示
+- 不使用传统分页器，采用无限滚动 + 触底加载模式
+
+### F2.5c Hover 悬浮操作层
+
+- 鼠标移入卡片封面图区域 → 图片上方叠加半透明操作层，显示：
+  - **收藏按钮**（心形图标）：未收藏时空心，已收藏时实心红色
+  - **点赞按钮**（拇指图标）：显示当前点赞数
+- 鼠标移出 → 操作层淡出消失
+- **已收藏卡片的常驻标识**：封面右上角始终显示实心心形徽标（不依赖 hover 状态），方便用户一眼识别已收藏内容
+
+### F2.5d 登录拦截与跳转
+
+- 未登录用户点击收藏 / 点赞按钮 → 弹出登录引导弹窗
+- 登录成功后自动重定向回首页（通过 `redirect` 参数）
+- 点击卡片本体 → 跳转至户型详情页（无需登录）
+
+### 交互细节
+
+- **卡片 Hover**：封面图放大至 1.05 倍，卡片阴影加深，过渡时长 300ms
+- **骨架屏**：卡片加载时显示与真实卡片等尺寸的骨架占位，避免布局抖动
+- **图片懒加载**：封面图使用 `loading="lazy"` 属性，优先使用 WebP 格式
+- **视图一致性**：网格视图与列表视图展示相同的字段和操作按钮
+
+### 验收标准
+
+- [x] 卡片 Hover 时封面图平滑缩放
+- [x] 精选徽章仅对 `is_featured=true` 的案例显示
+- [x] 点击卡片跳转至户型详情页
+- [x] 支持网格视图（3 列）与列表视图
+- [x] 卡片底部 6 个参数字段由管理端自定义配置
+- [x] Hover 时显示收藏/点赞悬浮按钮，移出时消失
+- [x] 已收藏卡片封面右上角常驻心形徽标
+- [x] 首屏加载 6 行，触底追加 2 行，非一次全部加载
+- [ ] 未登录用户点击收藏/点赞弹出登录引导
+
+---
+
+## F2.6 底部全局模块（P2）
+
+### 用户故事
+
+作为用户，我希望在页面底部获取平台信息和快捷入口。
+
+### 功能描述
+
+- 订阅资讯模块：邮箱输入 + 订阅按钮
+- 分类快速链接：按建筑类型分组的快捷导航
+- 版权与协议说明
+
+### 交互细节
+
+<!-- TODO: 补充以下内容 -->
+<!-- - 订阅成功/失败的反馈提示 -->
+<!-- - 邮箱重复订阅的处理 -->
+
+### 验收标准
+
+- [ ] 邮箱格式校验通过后可提交订阅
+- [ ] 分类链接跳转至对应频道页
+
+---
+
+## 补充说明
+
+### 暗色模式持久化
+
+- 主题偏好存储至 `localStorage` key `theme`，值为 `light` 或 `dark`
+- 页面初始化时读取 `localStorage`，无记录则跟随系统偏好（`prefers-color-scheme`）
+- 切换后立即生效，无需刷新页面
+
+### 骨架屏（Skeleton UI）
+
+- **Hero 轮播区**：数据加载前显示与轮播等高的灰色骨架占位
+- **卡片列表区**：加载时显示与真实卡片等尺寸的骨架卡片（含图片区 + 文字行占位）
+- 骨架屏使用 `animate-pulse` 动画，视觉上提示加载中状态
+- 避免因数据加载导致的布局累积偏移（CLS）
+
+### 图片懒加载
+
+- 卡片封面图统一使用 `loading="lazy"` 原生懒加载
+- 图片优先使用 WebP 格式，对不支持的浏览器回退到 JPEG
+- Hero 轮播首屏图片不懒加载（`loading="eager"`），确保首屏加载速度
+
+### 筛选条件 URL 同步
+
+- 所有筛选参数（`category`、`style`、`keyword`、`favorites`、`view` 等）写入 URL query string
+- 用户可通过浏览器前进/后退还原筛选状态
+- 分享 URL 后，其他用户打开可直接看到相同的筛选结果
+
+### 空状态
+
+| 场景 | 展示内容 |
+|------|----------|
+| 搜索无结果 | 空状态插图 + "未找到相关案例，试试其他关键词" |
+| 收藏夹为空 | 空状态插图 + "还没有收藏，去发现喜欢的案例" + 跳转首页按钮 |
+| 筛选无结果 | 空状态插图 + "当前条件无匹配结果，试试调整筛选" + 重置筛选按钮 |
+
+---
+
+*最后更新: 2026-03-02*

docs/specs/F3-案例详情.md

@@ -0,0 +1,255 @@
+# F3 标准化案例资产详情引擎
+
+> **涉及端**：用户端（`Case-Database-Frontend-user`）+ 后端（`Case-Database-Backend`）
+>
+> **关联文档**：
+> - API 契约：[api-contracts.md §2.2 用户端案例](../architecture/api-contracts.md)（案例详情、评论、文件、相关推荐）
+> - 数据模型：[data-model.md §4.2 案例核心域](../architecture/data-model.md) / [§4.3 设计师域](../architecture/data-model.md) / [§4.5 用户互动域](../architecture/data-model.md)
+> - UI 规范：[ui-specs-user.md](../guides/ui-specs-user.md)
+> - 参考原型：`docs/reference/户型详情页.html`
+
+---
+
+## 功能清单
+
+| 编号 | 功能 | 优先级 | 状态 |
+|------|------|--------|------|
+| F3.1 | 面包屑导航 | P0 | ⚪ 待开发 |
+| F3.2 | 富媒体多维图库 | P0 | ⚪ 待开发 |
+| F3.3 | 专业级参数看板 | P0 | ⚪ 待开发 |
+| F3.4 | 侧边栏核心信息聚合 | P0 | ⚪ 待开发 |
+| F3.5 | 设计理念与主创团队 | P1 | ⚪ 待开发 |
+| F3.6 | 数字资产分发中心 | P0 | ⚪ 待开发 |
+| F3.7 | 互动与裂变闭环 | P1 | ⚪ 待开发 |
+| F3.8 | 智能推荐 | P2 | ⚪ 待开发 |
+
+---
+
+## F3.1 面包屑导航（P0）
+
+### 用户故事
+
+作为用户，我希望通过面包屑快速回到上一层级。
+
+### 功能描述
+
+- 页面顶部路径导航：首页 > 分类 > 当前项目名称
+- 支持点击任一层级跳转
+
+### 交互细节
+
+<!-- TODO: 补充以下内容 -->
+<!-- - 面包屑在不同来源页面的路径生成逻辑（从首页 vs 从搜索结果） -->
+<!-- - 长标题的截断处理 -->
+
+### 验收标准
+
+- [ ] 面包屑路径正确反映当前导航层级
+- [ ] 各层级链接可正常跳转
+
+---
+
+## F3.2 富媒体多维图库（P0）
+
+### 用户故事
+
+作为用户，我希望从多个视角浏览案例的视觉资料，以便全面了解设计方案。
+
+### 功能描述
+
+- 画廊式主图展示区，支持左右切换和页码指示
+- 底部缩略图列表轮播（可横向滚动选取）
+- 快捷视图分类切换按钮：主效果图 / 平面图 / 立面图
+- 主图支持点击放大全屏浏览
+
+### 交互细节
+
+<!-- TODO: 补充以下内容 -->
+<!-- - 图片预加载策略（当前 + 前后各 1 张） -->
+<!-- - 全屏模式的手势操作（滑动切换、捏合缩放） -->
+<!-- - 缩略图列表的滚动对齐逻辑 -->
+<!-- - 图片加载失败的降级显示 -->
+
+### 验收标准
+
+- [ ] 图片切换流畅无闪烁
+- [ ] 缩略图点击后主图同步更新
+- [ ] 视图分类切换后图库内容对应过滤
+- [ ] 大图模式支持键盘左右箭头切换
+
+---
+
+## F3.3 专业级参数看板（P0）
+
+### 用户故事
+
+作为设计师，我希望快速获取案例的详细技术参数，以便评估设计方案的可行性。
+
+### 功能描述
+
+5 大维度强结构化数据展示（4 列网格布局）：
+
+| 维度 | 参数项 |
+|------|--------|
+| 用地条件 | 面宽、进深、占地面积、采光限制、用地形状 |
+| 规模造价 | 建筑层数、造价预估、建筑总面积、卧室数量 |
+| 平面功能 | 楼梯类型、特色空间、卧室配置、休闲空间、厨卫配置 |
+| 外观风格 | 建筑风格、屋顶形式、外立面材料 |
+| 结构与性能 | 结构类型、基础类型、户型逻辑、墙体厚度、抗震设防、保温形式、屋面构造 |
+
+### 交互细节
+
+<!-- TODO: 补充以下内容 -->
+<!-- - 各维度的折叠/展开交互（默认全部展开 vs 逐个展开） -->
+<!-- - 参数值的格式化规则（面积带单位、造价带范围） -->
+<!-- - 响应式布局（4列 → 2列 → 1列） -->
+
+### 验收标准
+
+- [ ] 5 个维度分组清晰，每组参数完整展示
+- [ ] 参数值缺失时显示"-"占位而非空白
+- [ ] 4 列网格在不同分辨率下自适应调整
+
+---
+
+## F3.4 侧边栏核心信息聚合（P0）
+
+### 用户故事
+
+作为用户，我希望在页面右侧始终看到项目的核心摘要信息。
+
+### 功能描述
+
+- 固定宽度侧边栏（约 440px），滚动时保持可见
+- 项目信息卡片：项目名称、项目 ID（支持一键复制）、收藏按钮
+- 核心数据速览：户型布局、建筑面积、面宽进深、结构类型、层高、采光限制
+- 预估造价醒目展示（大字号突出）
+- 操作按钮：分享、下载
+
+### 交互细节
+
+<!-- TODO: 补充以下内容 -->
+<!-- - Sticky 定位的起止位置（跟随区域的上下边界） -->
+<!-- - 项目 ID 复制成功的 Toast 提示 -->
+<!-- - 分享弹窗的分享渠道和链接生成逻辑 -->
+
+### 验收标准
+
+- [ ] 侧边栏随页面滚动保持固定（sticky 定位）
+- [ ] 项目 ID 一键复制到剪贴板并提示成功
+- [ ] 造价数字使用醒目样式突出显示
+
+---
+
+## F3.5 设计理念与主创团队（P1）
+
+### 用户故事
+
+作为用户，我希望了解案例背后的设计思路和创作团队。
+
+### 功能描述
+
+- 设计理念区：富文本描述 + 核心提炼标签（风格、材质、受众）
+- 主创团队区：按专业分列（方案设计、结构设计、水电设计等）的设计师名单，支持点击跳转设计师主页
+
+### 交互细节
+
+<!-- TODO: 补充以下内容 -->
+<!-- - 富文本内容的最大高度和"展开/收起"逻辑 -->
+<!-- - 团队成员卡片的 Hover 效果和跳转行为 -->
+
+### 验收标准
+
+- [ ] 设计理念支持富文本渲染（段落、加粗、列表）
+- [ ] 设计师姓名可点击跳转至 F4 设计师主页
+
+---
+
+## F3.6 数字资产分发中心（P0）
+
+### 用户故事
+
+作为设计师，我希望按类别下载案例的专业源文件，以便用于实际项目参考。
+
+### 功能描述
+
+- 文件按类别归纳展示：
+  - 平面图 / CAD / PDF
+  - 外观图集 / JPG
+  - 施工图
+  - 其它
+- 每个文件显示：文件名、文件大小、下载按钮
+- 文件下载需登录认证
+
+### 交互细节
+
+<!-- TODO: 补充以下内容 -->
+<!-- - 文件分类的折叠面板交互 -->
+<!-- - 下载进度的反馈方式 -->
+<!-- - 未登录用户点击下载的弹窗引导逻辑 -->
+<!-- - 大文件下载的断点续传体验 -->
+
+### 验收标准
+
+- [ ] 文件列表按类别分组，每组可展开/折叠
+- [ ] 文件大小格式化显示（KB / MB）
+- [ ] 未登录用户点击下载引导登录
+- [ ] 下载操作记录日志（审计需要）
+
+---
+
+## F3.7 互动与裂变闭环（P1）
+
+### 用户故事
+
+作为用户，我希望对感兴趣的案例进行点赞、收藏和分享，并与其他用户交流。
+
+### 功能描述
+
+- 悬浮操作栏（右下角固定）：点赞、收藏、返回顶部
+- 分享功能：生成分享链接 / 复制到剪贴板
+- 用户评论区：发表评论、查看评论列表、回复评论
+
+### 交互细节
+
+<!-- TODO: 补充以下内容 -->
+<!-- - 悬浮操作栏的出现/隐藏时机（滚动方向判断） -->
+<!-- - 点赞/收藏的微动效（心跳、弹跳） -->
+<!-- - 评论的实时追加 vs 刷新策略 -->
+<!-- - 评论嵌套层级限制（最多 2 层） -->
+
+### 验收标准
+
+- [ ] 点赞 / 收藏状态实时切换并持久化
+- [ ] 评论支持分页加载
+- [ ] 评论发布后实时出现在列表顶部
+- [ ] 未登录用户操作时引导登录
+
+---
+
+## F3.8 智能推荐（P2）
+
+### 用户故事
+
+作为用户，我希望在浏览完一个案例后发现更多相似案例。
+
+### 功能描述
+
+- 详情页底部"相似推荐"卡片流（3 列网格）
+- 基于建筑类型、风格、面积等维度匹配推荐
+
+### 交互细节
+
+<!-- TODO: 补充以下内容 -->
+<!-- - 推荐算法的匹配维度和权重 -->
+<!-- - 推荐卡片的懒加载时机（滚动到底部触发） -->
+
+### 验收标准
+
+- [ ] 推荐卡片至少展示 3 个相关案例
+- [ ] 点击推荐卡片跳转至对应详情页
+- [ ] 当前案例不出现在推荐列表中
+
+---
+
+*最后更新: 2026-03-02*

docs/specs/F4-设计师档案.md

@@ -0,0 +1,131 @@
+# F4 设计师数字档案
+
+> **涉及端**：用户端（`Case-Database-Frontend-user`）+ 后端（`Case-Database-Backend`）
+>
+> **关联文档**：
+> - API 契约：[api-contracts.md §2.3 用户端设计师](../architecture/api-contracts.md)
+> - 数据模型：[data-model.md §4.3 设计师域](../architecture/data-model.md) / [§4.5 用户互动域（follows）](../architecture/data-model.md)
+> - UI 规范：[ui-specs-user.md](../guides/ui-specs-user.md)
+> - 参考原型：`docs/reference/个人主页.html`
+
+---
+
+## 功能清单
+
+| 编号 | 功能 | 优先级 | 状态 |
+|------|------|--------|------|
+| F4.1 | 设计师名片档案 | P0 | ⚪ 待开发 |
+| F4.2 | 背景与履历 | P1 | ⚪ 待开发 |
+| F4.3 | 商业互动通路 | P2 | ⚪ 待开发 |
+| F4.4 | 作品集矩阵 | P0 | ⚪ 待开发 |
+
+---
+
+## F4.1 设计师名片档案（P0）
+
+### 用户故事
+
+作为用户，我希望了解设计师的专业背景，以便评估其设计能力。
+
+### 功能描述
+
+- 个人信息区：
+  - 左侧：职位标签、中英文姓名、职位 / 所属机构 / 所在城市
+  - 右侧：设计师个人写真（Hover 去灰动效）
+- 资历统计：从业经验年限、完成项目数量
+- 专长标签库：如商业空间、参数化设计、现代简约、工业风等
+
+### 交互细节
+
+<!-- TODO: 补充以下内容 -->
+<!-- - 写真图片的灰度 → 彩色过渡效果参数 -->
+<!-- - 资历数字的计数动画（数字滚动效果） -->
+<!-- - 标签过多时的展开/折叠逻辑 -->
+
+### 验收标准
+
+- [ ] 中英文姓名完整显示
+- [ ] 资历数据使用醒目的数字展示（大字号 + 单位标注）
+- [ ] 标签支持多个平铺展示
+
+---
+
+## F4.2 背景与履历（P1）
+
+### 用户故事
+
+作为用户，我希望深入了解设计师的设计理念和荣誉资历。
+
+### 功能描述
+
+- 设计理念深度阐述区（富文本段落）
+- 荣誉奖项时间轴列表（年份 + 奖项名称，按时间倒序）
+
+### 交互细节
+
+<!-- TODO: 补充以下内容 -->
+<!-- - 时间轴的视觉样式（左侧年份 + 右侧内容卡片） -->
+<!-- - 奖项内容的展开/折叠逻辑 -->
+
+### 验收标准
+
+- [ ] 设计理念支持多段落富文本
+- [ ] 荣誉奖项按年份分组排列
+- [ ] 内容为空时展示优雅的空状态
+
+---
+
+## F4.3 商业互动通路（P2）
+
+### 用户故事
+
+作为业主，我希望关注心仪的设计师并发起商业咨询。
+
+### 功能描述
+
+- "关注"按钮：关注 / 取消关注状态切换
+- "联系设计师"按钮：展示联系方式或跳转咨询表单
+
+### 交互细节
+
+<!-- TODO: 补充以下内容 -->
+<!-- - 关注按钮的状态切换动效 -->
+<!-- - 联系方式的展示形式（弹窗 vs 侧面板） -->
+<!-- - 未登录用户的引导逻辑 -->
+
+### 验收标准
+
+- [ ] 关注状态持久化，再次访问保持
+- [ ] 联系入口需登录后可用
+- [ ] 关注数量在设计师档案中可见
+
+---
+
+## F4.4 作品集矩阵（P0）
+
+### 用户故事
+
+作为用户，我希望浏览设计师的所有精选作品。
+
+### 功能描述
+
+- 3 列网格展示设计师名下的项目卡片
+- 卡片信息：封面缩略图、项目标题、建筑类型角标、面积、年份
+- 底部"加载更多"按钮（分页）
+
+### 交互细节
+
+<!-- TODO: 补充以下内容 -->
+<!-- - 作品卡片与首页卡片的差异（简化版 vs 完整版） -->
+<!-- - 空作品集的展示逻辑 -->
+<!-- - 分页加载的骨架屏过渡 -->
+
+### 验收标准
+
+- [ ] 作品按发布时间倒序排列
+- [ ] 点击卡片跳转至 F3 详情页
+- [ ] "加载更多"追加卡片而非全页刷新
+
+---
+
+*最后更新: 2026-03-02*

docs/specs/F5-内容运营.md

@@ -0,0 +1,180 @@
+# F5 内容运营管理（F5.1 ~ F5.4）
+
+> **涉及端**：管理端（`Case-Database-Frontend-admin`）+ 后端（`Case-Database-Backend`）
+>
+> **关联文档**：
+> - API 契约：[api-contracts.md §2.6 案例管理](../architecture/api-contracts.md) / [§2.7 轮播管理](../architecture/api-contracts.md) / [§2.8 专题管理](../architecture/api-contracts.md) / [§2.9 分类标签](../architecture/api-contracts.md)
+> - 数据模型：[data-model.md §4.2 案例核心域](../architecture/data-model.md) / [§4.4 运营内容域](../architecture/data-model.md)
+> - UI 规范：[ui-specs-admin.md](../guides/ui-specs-admin.md)
+>
+> 管理端基于 Element Plus 标准后台布局，所有页面遵循**搜索栏 → 数据表格 → 分页 → 弹窗表单**的标准结构。
+
+---
+
+## 功能清单
+
+| 编号 | 功能 | 优先级 | 状态 |
+|------|------|--------|------|
+| F5.1 | 案例全生命周期管理 | P0 | ⚪ 待开发 |
+| F5.2 | 首页轮播管理 | P0 | ⚪ 待开发 |
+| F5.3 | 专题与精选管理 | P0 | ⚪ 待开发 |
+| F5.4 | 分类与标签字典 | P0 | ⚪ 待开发 |
+
+---
+
+## F5.1 案例全生命周期管理（P0）
+
+### 用户故事
+
+作为运营人员，我希望创建、编辑、发布和管理设计案例，以便持续丰富平台内容库。
+
+### 功能描述
+
+**案例 CRUD**:
+- 案例列表页：搜索（名称 / 编号 / 设计师）、按分类 / 风格 / 状态筛选、分页表格
+- 创建 / 编辑案例：多步表单或分区表单，包含基础信息、参数录入、文件上传、团队关联
+- 案例状态流转：草稿 → 待审核 → 已发布 → 已下架
+- 批量操作：批量发布、批量下架、批量删除（二次确认）
+
+**分阶段文件上传体系**:
+- 将案例的数字资产按设计阶段组织上传，阶段划分：
+
+| 阶段 | 典型文件 |
+|------|----------|
+| 平面阶段 | 平面图 CAD (.dwg)、平面布局 PDF、户型分析图 |
+| 外观阶段 | 效果图 (JPG/PNG)、外立面 CAD、鸟瞰图 |
+| 施工图阶段 | 施工图 CAD (.dwg)、施工说明 PDF |
+| 结构阶段 | 结构图 CAD、结构计算书 PDF、Revit 模型 (.rvt) |
+| 室内阶段 | 室内效果图、室内施工图、软装清单 |
+| 庭院阶段 | 庭院景观图、绿化方案、庭院施工图 |
+
+- 每个阶段支持上传多种文件类型：PDF、CAD (.dwg)、Revit (.rvt)、图片 (JPG/PNG)、压缩包 (ZIP/RAR)
+- 上传方式：批量上传 + 拖拽上传
+- 文件元数据自动提取与手动补充：文件名、大小、上传时间、上传者、阶段归属、文件类型标签
+- 单文件大小限制：图片 ≤ 20MB、文档 ≤ 100MB、模型 ≤ 500MB
+- 上传进度条 + 断点续传（大文件场景）
+
+**案例结构化参数录入**:
+- 与 F3.3 参数看板对应的 5 大维度表单（用地条件 / 规模造价 / 平面功能 / 外观风格 / 结构与性能）
+- 表单字段类型：数值输入（面宽 / 进深）、下拉选择（结构类型 / 风格）、多选标签（特色空间）、富文本（设计理念）
+- 封面图设置：从已上传图片中选取或单独上传
+
+### 交互细节
+
+<!-- TODO: 补充以下内容 -->
+<!-- - 案例状态流转状态机图（draft ↔ pending → published ↔ archived） -->
+<!-- - 多步表单的步骤导航和数据暂存逻辑 -->
+<!-- - 文件上传的并发数限制和队列管理 -->
+<!-- - 大文件上传的分片策略 -->
+<!-- - 批量操作的全选/部分选中逻辑 -->
+<!-- - 表单校验规则（必填项、数值范围、字符长度） -->
+
+### 验收标准
+
+- [ ] 案例创建表单包含所有 5 大维度参数字段
+- [ ] 分阶段上传区域按 Tab 或折叠面板组织，各阶段独立管理
+- [ ] 拖拽上传支持多文件同时拖入
+- [ ] 文件超出大小限制时前端即时提示
+- [ ] 案例状态流转有明确的操作按钮（发布 / 下架 / 删除）和状态标签
+- [ ] 草稿状态的案例不在用户端展示
+- [ ] 删除操作需二次确认，已发布案例需先下架才能删除
+
+---
+
+## F5.2 首页轮播管理（P0）
+
+### 用户故事
+
+作为运营人员，我希望管理首页 Hero 大图轮播内容，以便控制用户端的首屏焦点展示。
+
+### 功能描述
+
+- 轮播项 CRUD：上传背景图、设置标题、描述摘要、跳转链接（案例详情 / 专题页 / 外部链接）
+- 排序：拖拽排序调整轮播顺序
+- 启停控制：每个轮播项支持启用 / 停用开关
+- 预览：保存前可预览轮播效果（模拟用户端展示）
+- 轮播数量限制：建议最多 5 条，超出提示
+
+### 交互细节
+
+<!-- TODO: 补充以下内容 -->
+<!-- - 拖拽排序的交互实现（Sortable.js / Vue Draggable） -->
+<!-- - 背景图裁剪组件的交互（比例锁定、预览区域） -->
+<!-- - 链接类型切换时表单字段的联动变化 -->
+<!-- - 预览弹窗的模拟展示效果 -->
+
+### 验收标准
+
+- [ ] 拖拽排序后自动保存新顺序
+- [ ] 停用的轮播项不在用户端首页展示
+- [ ] 背景图上传支持裁剪（建议比例 16:9）
+- [ ] 跳转链接支持站内路由和外部 URL
+- [ ] 至少保留 1 条启用状态的轮播项
+
+---
+
+## F5.3 专题与精选管理（P0）
+
+### 用户故事
+
+作为运营人员，我希望创建专题合集并标记精选案例，以便策划内容运营活动。
+
+### 功能描述
+
+**专题管理**:
+- 专题 CRUD：标题、封面图、富文本描述、关联案例列表
+- 关联案例：从案例库中搜索并添加，支持拖拽排序
+- 专题状态：草稿 / 已发布
+
+**精选标记**:
+- 在案例列表中一键标记 / 取消精选徽章
+- 精选案例排序：拖拽调整精选展示顺序
+- 精选案例在用户端首页"精选"频道和卡片金色徽章中体现
+
+### 交互细节
+
+<!-- TODO: 补充以下内容 -->
+<!-- - 关联案例的搜索选择器交互（弹窗搜索 + 已选列表） -->
+<!-- - 精选排序的可视化拖拽面板 -->
+<!-- - 专题封面图的推荐尺寸和裁剪逻辑 -->
+
+### 验收标准
+
+- [ ] 专题可关联多个案例，案例可被多个专题引用
+- [ ] 精选标记后用户端卡片立即显示金色徽章
+- [ ] 精选排序支持拖拽且保存后即时生效
+
+---
+
+## F5.4 分类与标签字典（P0）
+
+### 用户故事
+
+作为运营人员，我希望统一管理分类和标签体系，以便保持平台内容的结构化一致性。
+
+### 功能描述
+
+- **建筑类型分类**: 别墅 / 民宿 / 室内 / 景观 / 农村自建房 / 庭院等，支持 CRUD + 排序
+- **风格标签**: 现代 / 中式 / 新中式 / 欧式 / 田园 / 工业风 / 极简等，支持 CRUD + 排序
+- **特色标签**: 自由标签（落地窗 / 大露台 / 双车库等），支持 CRUD
+- 标签去重校验：创建时检查是否已存在同名标签
+- 标签引用统计：显示每个标签被多少案例引用
+
+### 交互细节
+
+<!-- TODO: 补充以下内容 -->
+<!-- - 分类列表的拖拽排序交互 -->
+<!-- - 标签类型（style / feature / specialty）的分 Tab 管理 -->
+<!-- - 删除已引用标签的警告弹窗（显示关联案例数量） -->
+<!-- - 批量导入标签的功能（可选） -->
+
+### 验收标准
+
+- [ ] 分类和标签的增删改查操作正常
+- [ ] 被案例引用的标签删除时提示关联数量并要求确认
+- [ ] 排序支持拖拽且保存后用户端同步更新
+- [ ] 同名标签创建时提示重复
+
+---
+
+*最后更新: 2026-03-02*

docs/specs/F5-用户权限.md

@@ -0,0 +1,120 @@
+# F5 用户与权限管理（F5.5 ~ F5.7）
+
+> **涉及端**：管理端（`Case-Database-Frontend-admin`）+ 后端（`Case-Database-Backend`）
+>
+> **关联文档**：
+> - API 契约：[api-contracts.md §2.10 设计师管理](../architecture/api-contracts.md) / [§2.11 评论管理](../architecture/api-contracts.md) / [§2.12 用户与权限](../architecture/api-contracts.md)
+> - 数据模型：[data-model.md §4.1 用户与权限域](../architecture/data-model.md) / [§4.3 设计师域](../architecture/data-model.md) / [§4.5 用户互动域](../architecture/data-model.md)
+> - UI 规范：[ui-specs-admin.md](../guides/ui-specs-admin.md)
+>
+> 管理端基于 Element Plus 标准后台布局，所有页面遵循**搜索栏 → 数据表格 → 分页 → 弹窗表单**的标准结构。
+
+---
+
+## 功能清单
+
+| 编号 | 功能 | 优先级 | 状态 |
+|------|------|--------|------|
+| F5.5 | 设计师档案管理 | P1 | ⚪ 待开发 |
+| F5.6 | 评论审核 | P1 | ⚪ 待开发 |
+| F5.7 | 用户管理与权限分配 | P1 | ⚪ 待开发 |
+
+---
+
+## F5.5 设计师档案管理（P1）
+
+### 用户故事
+
+作为运营人员，我希望管理设计师的数字档案，以便维护平台设计师资源池。
+
+### 功能描述
+
+- 设计师档案 CRUD：
+  - 基础信息：中英文姓名、职位、机构、城市、个人写真
+  - 专业信息：从业年限、专长标签、设计理念（富文本）
+  - 荣誉奖项：年份 + 奖项名称，支持多条录入
+- 案例关联：将设计师绑定到案例的主创团队（方案 / 结构 / 水电等专业角色）
+- 公开展示控制：启用 / 停用设计师主页的前台可见性
+
+### 交互细节
+
+<!-- TODO: 补充以下内容 -->
+<!-- - 设计师表单的分步或分区布局 -->
+<!-- - 荣誉奖项的动态表单行（新增/删除行） -->
+<!-- - 专长标签的选择器交互（从标签字典中选取 vs 自由输入） -->
+<!-- - 设计师写真的上传和裁剪规格 -->
+<!-- - 案例关联的搜索选择器 -->
+
+### 验收标准
+
+- [ ] 设计师信息编辑后在用户端 F4 主页实时更新
+- [ ] 同一设计师可关联多个案例，同一案例可关联多个设计师
+- [ ] 停用后用户端无法访问该设计师主页，但案例中仍显示姓名
+
+---
+
+## F5.6 评论审核（P1）
+
+### 用户故事
+
+作为运营人员，我希望审核用户评论，以便维护平台内容质量和社区氛围。
+
+### 功能描述
+
+- 评论列表：支持按案例 / 用户 / 时间范围 / 审核状态筛选
+- 审核操作：通过（上线展示）/ 拒绝（不展示并通知用户）/ 删除
+- 举报处理：查看被举报评论，处理举报（标记违规 / 驳回举报）
+- 审核模式配置：先审后发 / 先发后审（系统配置项）
+
+### 交互细节
+
+<!-- TODO: 补充以下内容 -->
+<!-- - 评论列表的批量审核操作 -->
+<!-- - 审核通过/拒绝的快捷键操作 -->
+<!-- - 评论原文的上下文预览（关联案例信息） -->
+<!-- - 审核模式切换的影响说明弹窗 -->
+
+### 验收标准
+
+- [ ] 评论列表支持多维筛选和分页
+- [ ] 审核通过的评论在用户端 F3.7 评论区可见
+- [ ] 拒绝或删除评论后用户端实时移除
+- [ ] 先审后发模式下新评论默认不展示，待审核通过后上线
+
+---
+
+## F5.7 用户管理与权限分配（P1）
+
+### 用户故事
+
+作为管理员，我希望管理平台用户和管理员权限，以便保障平台安全运营。
+
+### 功能描述
+
+**前台用户管理**:
+- 用户列表：搜索（姓名 / 手机号）、按注册时间 / 状态筛选
+- 用户详情：注册信息、登录记录、收藏列表、下载记录、评论记录
+- 状态操作：启用 / 禁用用户账号
+
+**管理员权限管理**:
+- 管理员 CRUD：创建管理员账号、分配角色
+- RBAC 角色管理：预设角色（超级管理员 / 内容运营 / 审核员）
+- 权限粒度：按模块（案例 / 设计师 / 评论 / 用户 / 系统）分配读写权限
+
+### 交互细节
+
+<!-- TODO: 补充以下内容 -->
+<!-- - 用户详情页的 Tab 布局（基础信息 / 登录记录 / 收藏 / 下载 / 评论） -->
+<!-- - 禁用用户的二次确认和影响说明（Token 立即失效） -->
+<!-- - 角色权限分配的树形菜单勾选交互 -->
+<!-- - 角色变更时的即时生效机制说明 -->
+
+### 验收标准
+
+- [ ] 禁用用户后该用户无法登录，已登录 Token 立即失效
+- [ ] 非超级管理员无法访问用户管理和系统配置模块
+- [ ] 角色权限变更后立即生效，无需重新登录
+
+---
+
+*最后更新: 2026-03-02*

docs/specs/F5-系统运维.md

@@ -0,0 +1,116 @@
+# F5 系统配置与监控（F5.8 ~ F5.10）
+
+> **涉及端**：管理端（`Case-Database-Frontend-admin`）+ 后端（`Case-Database-Backend`）
+>
+> **关联文档**：
+> - API 契约：[api-contracts.md §2.13 系统配置](../architecture/api-contracts.md) / [§2.14 数据仪表盘](../architecture/api-contracts.md) / [§2.15 日志](../architecture/api-contracts.md)
+> - 数据模型：[data-model.md §4.6 日志与系统域](../architecture/data-model.md)
+> - UI 规范：[ui-specs-admin.md](../guides/ui-specs-admin.md)
+>
+> 管理端基于 Element Plus 标准后台布局，所有页面遵循**搜索栏 → 数据表格 → 分页 → 弹窗表单**的标准结构。
+
+---
+
+## 功能清单
+
+| 编号 | 功能 | 优先级 | 状态 |
+|------|------|--------|------|
+| F5.8 | 系统配置 | P1 | ⚪ 待开发 |
+| F5.9 | 数据仪表盘 | P2 | ⚪ 待开发 |
+| F5.10 | 操作日志与审计 | P2 | ⚪ 待开发 |
+
+---
+
+## F5.8 系统配置（P1）
+
+### 用户故事
+
+作为管理员，我希望配置平台的基础信息和运营参数。
+
+### 功能描述
+
+- 站点信息：平台名称、Logo、版权信息、备案号
+- SEO 配置：首页标题、描述、关键词
+- 文件上传配置：允许的文件类型、单文件大小限制
+- 评论配置：审核模式切换（先审后发 / 先发后审）
+- 水印配置：图片下载是否添加水印、水印文字 / 位置
+
+### 交互细节
+
+<!-- TODO: 补充以下内容 -->
+<!-- - 配置项的分组 Tab 布局（站点 / SEO / 上传 / 评论 / 水印） -->
+<!-- - 配置修改后的即时预览（Logo / 水印） -->
+<!-- - 配置保存的确认和生效机制 -->
+<!-- - 配置变更的操作日志自动记录 -->
+
+### 验收标准
+
+- [ ] 站点信息修改后用户端全局生效
+- [ ] 文件上传限制修改后在案例管理的上传组件中即时生效
+- [ ] 配置变更记录操作日志
+
+---
+
+## F5.9 数据仪表盘（P2）
+
+### 用户故事
+
+作为运营人员，我希望通过数据看板了解平台运营状况，以便制定运营策略。
+
+### 功能描述
+
+- 概览卡片：案例总数、设计师总数、注册用户总数、今日浏览量、今日下载量
+- 热门案例排行 Top 10（按浏览 / 收藏 / 下载量排序，支持切换维度）
+- 热门设计师排行 Top 10（按关注 / 主页浏览量排序）
+- 下载统计：按文件类型分布饼图、按设计阶段分布柱状图
+- 趋势图：近 7 天 / 30 天的浏览量、注册量、下载量折线图
+
+### 交互细节
+
+<!-- TODO: 补充以下内容 -->
+<!-- - 概览卡片的数据刷新策略（实时 vs 缓存） -->
+<!-- - 图表组件选型（ECharts / Chart.js） -->
+<!-- - 排行榜的时间范围选择器交互 -->
+<!-- - 趋势图的日期范围切换（7天/30天/自定义） -->
+<!-- - 仪表盘的响应式布局（2列 vs 1列） -->
+
+### 验收标准
+
+- [ ] 概览数据实时刷新（或 5 分钟缓存）
+- [ ] 排行榜支持时间范围切换（今日 / 本周 / 本月 / 全部）
+- [ ] 图表支持鼠标悬停查看具体数值
+- [ ] 大数据量下仪表盘加载时间 < 3s
+
+---
+
+## F5.10 操作日志与审计（P2）
+
+### 用户故事
+
+作为管理员，我希望查看所有管理员的操作记录，以便追溯问题和保障安全。
+
+### 功能描述
+
+- 自动记录所有管理端的写操作（创建 / 编辑 / 删除 / 状态变更）
+- 日志内容：操作时间、操作人、操作类型、操作对象、变更前后值
+- 日志列表支持按操作人 / 时间范围 / 操作类型筛选
+- 日志不可编辑、不可删除（只读）
+
+### 交互细节
+
+<!-- TODO: 补充以下内容 -->
+<!-- - 日志详情的变更对比展示（diff 视图） -->
+<!-- - 日志导出的格式和字段选择 -->
+<!-- - 日志分页的性能优化（游标分页 vs offset 分页） -->
+<!-- - 日志保留策略的配置入口 -->
+
+### 验收标准
+
+- [ ] 所有 CRUD 操作自动记录日志
+- [ ] 日志详情可展开查看变更前后对比
+- [ ] 日志数据保留至少 180 天
+- [ ] 支持按条件导出日志（CSV）
+
+---
+
+*最后更新: 2026-03-02*