# 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*