@@ -1,9 +1,10 @@
# 客源详情页 UI 设计文档
> **版本**： 1 · **日期**：
> **版本**： 2 · **日期**：
> **依赖规范**：
> **视觉参考**：
> **PRD 来源**：
> **PRD 来源**：
> **静态原型**：
---
@@ -15,11 +16,15 @@
- 桌面优先（`>=1280px` ），不做移动端适配。
- 技术栈固定：
### 1.2 本版关键改动（相对 v1.0 ）
### 1.2 本版关键改动（相对 v1.1 ）
- 左侧主内容区**取消 Tab 切换**，改为**全量 Section 连续展示** 。
- 顶部 Section 导航仅用于锚点跳转（`#section-*` ），不隐藏任何内容 。
- 页面布局、间距、层级、色彩、焦点环严格对齐 `UI_SYSTEM.md ` 与 `preview.html ` 。
- 修正 Topbar 配色：`bg-white border-b` → `bg-primary-800` ，与 UI_SYSTEM v1.2 对齐 。
- 修正主内容区 padding： `pt-14 py-4` → `pt-[72px] py-5` 。
- 修正 Section 锚点导航 sticky 位置：`top-20 ` → `top-16 ` 。
- 修正右侧面板 sticky： `top-20` → `top-16` ，并增加 `max-h-[calc(100vh-80px)] overflow-y-auto` 。
- 修正客源概览卡片顶部标识区：`bg-primary-600` （非 `bg-primary-800` ）。
- 补充客源解读 Section 实际字段和数据展示规范。
- 补充 Alpine.js `clientDetailPage()` 状态机完整定义。
### 1.3 URL 与入口
@@ -34,67 +39,71 @@
### 2.1 视觉与 Token
- 主色：`primary-600` ，禁用硬编码 Hex。
- Topbar 背景：`bg-primary-800` （深青绿，区别于内容区）。
- 页面底色：`bg-neutral-50` ，内容卡片：`bg-white border border-neutral-200 rounded-lg` 。
- 正文字号：`text-sm` ；辅助：`text-xs text-neutral-500` ；关键数字加 `tabular-nums` 。
- 圆角：卡片 `rounded-lg` ，输入/按钮 `rounded-md` ，标签 `rounded` 。
- 圆角：卡片 `rounded-lg` ，输入/按钮 `rounded-md` ，标签 `rounded` 或 `rounded-full` 。
- 焦点环统一：`focus-visible:ring-2 focus-visible:ring-primary-600/40` 。
### 2.2 组件与图标
- 图标库：
- 默认： （ `w-5 h-5` ）
- 强调： （ `w-5 h-5` ）
- 高密： （ `w-4 h-4` ）
- 禁止独立 CSS 文件；样式全部使用 Tailwind utility class。
### 2.3 页面骨架对齐 preview 模板
### 2.3 页面骨架
- Topbar： `h-14 sticky top-0 z-20 bg-white border-b border-neutral-200 `
- Sidebar： 展开 `w-60` ，内容区偏移 `ml-60 `
- 主内容区：`px-6 py-4 `
- 区块垂直节奏：`space-y-6`
- Topbar： `fixed top-0 left-0 right-0 h-14 z-20 bg-primary-800 flex items-center justify-between `
- Sidebar： `fixed left-0 top-14 h-[calc(100vh-56px)] w-60 z-20 border-r border-neutral-200 bg-white `
- 主内容区：`ml-60 pt-[72px] min-h-screen bg-neutral-50 px-6 py-5 `
- 区块垂直节奏：`space-y-4` （外层）、`space-y-6` （左侧 Section 间距）
---
## 3. 页面信息架构
## 3.1 整体结构
### 3.1 整体结构
```
56 )
-> Sidebar (240 )
-> Content Area (bg-neutral-50)
-> Breadcrumb + Header Actions
-> Main Grid (12 cols)
- Left Content: 8 cols
- Sticky Section Anchor Nav (非 Tab )
h-14, bg-primary-800 )
-> Sidebar (w-60, fixed left )
-> Content Area (ml-60, pt-[72px], bg-neutral-50, px-6 py-5 )
-> Breadcrumb + Page Title
-> Main Grid (12 cols, gap-6 )
- Left (col-span-8)
- Sticky Section Anchor Nav (top-16, z-30 )
- Section 1: 需求信息
- Section 2: 跟进记录
- Section 3: 带看记录
- Section 4: 客源解读（ ）
- Section 5: 二手配房（ ）
- Right Sidebar: 4 cols
- 客源信息概览
- Section 4: 客源解读
- Section 5: 二手配房
- Right Sidebar (col-span-4, sticky top-16)
- 客源信息概览（含快捷操作）
- 联系人
- 相关员工
- 其他操作
```
### 3.2 主体布局规范
### 3.2 主体布局骨架
``` html
< main class = "ml-60 min-h-[calc(100vh-56px)] bg-neutral-50 px-6 py-4 " >
< main class = "ml-60 pt-[72px] min-h-screen bg-neutral-50 px-6 py-5 " >
< div class = "mx-auto max-w-[1600px] space-y-4" >
<!-- 面包屑 + 页头 -->
< div class = "flex items-start justify-between" >
< div >
< nav class = "flex items-center gap-1 text-xs text-neutral-500 mb-1" aria-label = "面包屑" > ...< / nav >
< h1 class = "text-xl font-semibold text-neutral-800" > 客源详情< / h1 >
< p class = "text-xs text-neutral-500 mt-0.5" > 按 Section 连续展示，点击导航锚点快速定位< / p >
< / div >
< / div >
< div class = "grid grid-cols-12 gap-6 items-start" >
< section class = "col-span-8 min-w-0 space-y-6" id = "client-detail-main" >
<!-- Anchor Nav -->
<!-- All sections rendered below -->
< section class = "col-span-8 min-w-0 space-y-6" >
<!-- Anchor Nav + All Sections -->
< / section >
< aside class = "col-span-4 min-w-0 space-y-3 sticky top-20" id = "client-detail-side"
<!-- right panels -->
< aside class = "col-span-4 min-w-0 space-y-3 sticky top-16 max-h-[calc(100vh-80px)] overflow-y-auto" >
<!-- Right panels -- >
< / aside >
< / div >
< / div >
@@ -103,214 +112,356 @@ Topbar (56)
---
## 4. 左侧主内容区（全量 Section + 锚点导航）
## 4. Topbar
### 4.1 Section 导航（替代 Tab）
### 4.1.1 交互定义
- 导航仅用于锚点跳转，不切换内容，不销毁 DOM。
- 点击导航项：`href="#section-xxx"` ，平滑滚动到目标 Section。
- 当前高亮：通过 IntersectionObserver + Alpine 更新 `activeSection` 。
- 导航条 sticky： ，
### 4.1.2 导航样式
- 容器：`bg-white border border-neutral-200 rounded-lg px-3 py-2 sticky top-20 z-30`
- 项默认：`text-sm text-neutral-600 hover:text-neutral-800 hover:bg-neutral-100 rounded-md`
- 项激活：`bg-primary-50 text-primary-700 font-medium`
### 4.1.3 代码骨架
结构同 UI_SYSTEM §5.2，客源详情页激活「客源」导航项。
``` html
< div x-data = "sectionNav()" class = "bg-white border border-neutral-200 rounded-lg px-3 py-2 sticky top-20 z-30 ">
< header class = "fixed top-0 left-0 right-0 h-14 z-20 bg-primary-800 flex items-center justify-between ">
<!-- 左区： -->
< div class = "flex items-center gap-2 px-4 w-60 shrink-0" >
< div class = "w-7 h-7 rounded-md bg-primary-500 flex items-center justify-center text-white text-sm font-semibold" > F< / div >
< span class = "text-base font-semibold text-white" > Fonrey< / span >
< / div >
<!-- 中区： （ - 1， ） -->
< nav class = "flex items-center gap-1 flex-1 px-2" aria-label = "主导航" >
< a class = "px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700 hover:text-white" > 主页< / a >
< a class = "px-3 py-1.5 text-sm rounded-md bg-primary-600 text-white font-medium" > 客源< / a > <!-- 激活态 -->
<!-- …其余项 -->
< / nav >
<!-- 右区 -->
< div class = "flex items-center gap-1 px-4 shrink-0" >
< button class = "p-1.5 text-primary-200 hover:bg-primary-700 hover:text-white rounded-md" aria-label = "消息" > <!-- BellIcon --> < / button >
< div class = "flex items-center gap-2 pl-3 ml-1 border-l border-primary-700" >
< div class = "w-8 h-8 rounded-full bg-primary-600 text-white flex items-center justify-center text-sm font-semibold" > 魏< / div >
< span class = "text-sm font-medium text-primary-100" > 魏深< / span >
< / div >
< / div >
< / header >
```
> 注：详情页 Topbar 右区只有消息通知 + 头像姓名，省略设置按钮（与 preview.html 保持一致）。
---
## 5. 左侧主内容区（全量 Section + 锚点导航）
### 5.1 Section 导航（替代 Tab）
#### 5.1.1 交互定义
- 导航仅用于锚点跳转，不切换内容，不销毁 DOM。
- 点击导航项：`scrollToSection(id)` 平滑滚动到目标 Section。
- 当前高亮：`IntersectionObserver` （ `-140px 0px -55% 0px` ， `0.01` ）驱动 `activeSection` 。
- 导航条 sticky： `sticky top-16 z-30` ，滚动时固定在左栏顶部。
#### 5.1.2 导航样式
- 容器：`bg-white border border-neutral-200 rounded-lg px-3 py-2 sticky top-16 z-30 shadow-xs`
- 项默认：`px-3 py-1.5 text-sm rounded-md text-neutral-600 hover:bg-neutral-100 hover:text-neutral-800`
- 项激活：`bg-primary-50 text-primary-700 font-medium`
- 焦点：`focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40`
- `aria-current="true"` 标注当前激活项
#### 5.1.3 Alpine.js 数据结构
``` js
navItems : [
{ id : 'section-requirements' , label : '需求信息' } ,
{ id : 'section-follow' , label : '跟进记录' } ,
{ id : 'section-viewings' , label : '带看记录' } ,
{ id : 'section-insights' , label : '客源解读' } ,
{ id : 'section-matches' , label : '二手配房' }
] ,
activeSection : 'section-requirements'
```
#### 5.1.4 代码骨架
``` html
< div class = "bg-white border border-neutral-200 rounded-lg px-3 py-2 sticky top-16 z-30 shadow-xs" >
< nav class = "flex items-center gap-1 overflow-x-auto whitespace-nowrap" aria-label = "详情分区导航" >
< a href = "#section-requirements" @ click = "jump('section-requirements')"
:class = "active==='section-requirements' ? 'bg-primary-50 text-primary-700 font-medium' : 'text-neutral-600 hover:bg-neutral-100 hover:text-neutral-800' "
class = "px-3 py-1.5 text-sm rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40" > 需求信息< / a >
< a href = "#section-follow" @ click = "jump('section-follow')" class = "px-3 py-1.5 text-sm rounded-md" > 跟进记录< / a >
< a href = "#section-viewings" @ click = "jump('section-viewings')" class = "px-3 py-1.5 text-sm rounded-md" > 带看记录< / a >
< a href = "#section-insights" @ click = "jump('section-insights')" class = "px-3 py-1.5 text-sm rounded-md" > 客源解读< / a >
< a href = "#section-matches" @ click = "jump('section-matches')" class = "px-3 py-1.5 text-sm rounded-md" > 二手配房< / a >
< template x-for = "item in navItems" :key = "item.id" >
< a :href = "'#' + item.id "
@ click . prevent = "scrollToSection(item.id)"
:aria-current = "activeSection === item.id ? 'true' : 'false'"
:class = "activeSection === item.id
? 'bg-primary-50 text-primary-700 font-medium'
: 'text-neutral-600 hover:bg-neutral-100 hover:text-neutral-800'"
class = "px-3 py-1.5 text-sm rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40"
x-text = "item.label" > < / a >
< / template >
< / nav >
< / div >
```
---
### 4 .2 Section 1： （ ）
### 5 .2 Section 1： （ ）
- Section ID： `section-requirements`
- 卡片结构：标题行（含编辑按钮）+ 三列字段网格 + 备注跨列。
- ID： `section-requirements` ， `section-anchor scroll-mt-24`
- 容器：`bg-white rounded-lg border border-neutral-200 p-4 space-y-4`
- Header： `text-base font-semibold text-neutral-800` + 右侧文字链「编辑」`text-sm text-primary-600 hover:text-primary-700 hover:underline underline-offset-2`
- 字段网格：`grid grid-cols-3 gap-x-6 gap-y-4`
- 字段项：`<dt class="text-xs text-neutral-500">` + `<dd class="text-sm text-neutral-900">` ，数字型加 `tabular-nums`
- 备注字段：`col-span-3` （跨满三列）
- 空值：统一显示 `-`
字段：总价、面积、居室、装修、朝向、楼层、楼龄、意向商圈、意向小区、交通情况、备注。空值统一 `-` 。
字段列表 ：总价、面积、居室、装修、朝向、楼层、楼龄、意向商圈、意向小区、交通情况、备注（ ）
``` html
< section id = "section-requirements" class = "scroll-mt-24 bg-white rounded-lg border border-neutral-200 p-4 space-y-4" >
< header class = "flex items-center justify-between" >
< h2 class = "text-base font-semibold text-neutral-800" > 需求信息< / h2 >
< button class = "text-sm text-primary-600 hover:text-primary-700 hover:underline underline-offset-2" > 编辑< / button >
< / header >
< dl class = "grid grid-cols-3 gap-x-6 gap-y-4" >
<!-- field items -->
< / dl >
< / section >
---
### 5.3 Section 2： （ ）
- ID： `section-follow` ， `section-anchor scroll-mt-24`
- 容器：`bg-white rounded-lg border border-neutral-200 p-4 space-y-4`
- Header 右侧： `w-4 h-4` ，点击触发写跟进 Drawer（ `drawerOpen=true` ）
**类型筛选条 ** （ `flex items-center gap-2 flex-wrap` ） ：
- 激活项：`px-3 py-1 text-xs rounded-full bg-primary-600 text-white`
- 默认项：`px-3 py-1 text-xs rounded-full bg-neutral-100 text-neutral-600 hover:bg-neutral-200`
- 选项：全部 / 写入跟进 / 敏感信息跟进 / 修改跟进 / 其他跟进
**日期筛选栏 ** ： `border border-neutral-200 rounded-md p-3 bg-neutral-50 flex items-center gap-3 flex-wrap text-xs` ，含开始/结束日期输入框、有录音/有图片 checkbox。
**时间线 ** ： `relative border-l-2 border-neutral-200 ml-3 space-y-4 pl-5`
- 普通记录：圆点 `bg-primary-600` ，卡片 `rounded-md border border-neutral-200 p-3 bg-white space-y-1`
- 敏感记录：圆点 `bg-warning-600` ，卡片 `rounded-md border border-warning-600/20 bg-warning-50 p-3 space-y-1`
- 类型标签：`inline-flex items-center px-2 py-0.5 rounded-full bg-info-50 text-info-600 font-medium` （电话），`bg-warning-50 text-warning-600` （敏感查看）
**底部 ** ：「查看全部跟进」文字链，`text-sm text-primary-600 hover:underline underline-offset-2` 。
---
### 5.4 Section 3： （ ）
- ID： `section-viewings` ， `section-anchor scroll-mt-24`
- Header 右侧：两个 Secondary 按钮（`新增预约` / `新增带看` ）
- 筛选栏： ，
- 时间线结构同跟进记录，房源名称用 `text-primary-600 hover:underline` 链接
- 带看次数标签：`inline-flex items-center px-2 py-0.5 rounded-full bg-primary-50 text-primary-700 font-medium` （如「一看」）
---
### 5.5 Section 4： （ ）
- ID： `section-insights` ， `section-anchor scroll-mt-24`
- Header 右侧：更新时间文字 `text-xs text-neutral-500`
**行为指标行 ** （ `grid grid-cols-3 gap-3` ） ：
- 卡片：`border border-neutral-200 rounded-md p-3 bg-white`
- 标签 `text-xs text-neutral-500` ，值 `text-xl font-semibold text-neutral-900 tabular-nums`
- 字段：活跃行为 / 工作日活跃 / 周末活跃
**偏好占比行 ** （ `grid grid-cols-3 gap-3` ） ：
- 卡片：`border border-neutral-200 rounded-md p-3 text-center`
- 标签 `text-xs text-neutral-500` ，占比值 `text-2xl font-semibold text-primary-600 tabular-nums`
- 字段：价格偏好 / 户型偏好 / 面积偏好
---
### 5.6 Section 5： （ ）
- ID： `section-matches` ， `section-anchor scroll-mt-24`
- Header 右侧：
**分组标题 ** ： `text-sm font-semibold text-neutral-700` （如「优质户型」）
**房源卡片 ** （ `border border-neutral-200 rounded-md p-3` ） ：
- 缩略图：`w-20 h-14 rounded bg-neutral-100` （占位）
- 房源名：`text-sm font-medium text-primary-600 hover:underline`
- 描述：`text-xs text-neutral-500` （户型·面积·区域）
- 标签行：`inline-flex items-center px-1.5 py-0.5 text-[11px] rounded` ，朝向 `bg-warning-50 text-warning-600` ，私盘 `bg-info-50 text-info-600`
- 价格：`text-sm font-medium text-neutral-900 tabular-nums` ，降价说明 `text-xs font-normal text-neutral-500`
---
## 6. 右侧信息面板
右侧 `col-span-4` ， `sticky top-16 max-h-[calc(100vh-80px)] overflow-y-auto space-y-3` 。
### 6.1 客源信息概览（ ）
容器：`bg-white rounded-lg border border-neutral-200 overflow-hidden`
**顶部标识区 ** ： `bg-primary-600 px-4 py-3`
- 求购 Badge： `inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-white/20 text-white`
- 客户姓名：`text-sm font-semibold text-white truncate`
- 带看进度副文字：`text-xs text-white/80 mt-0.5`
**标签行 ** （ `flex items-center gap-1.5 flex-wrap` ） ：
- 私客：`bg-neutral-100 text-neutral-600`
- 带看进度（如「一看」）：`bg-primary-50 text-primary-700`
- 等级（ `bg-warning-50 text-warning-600`
- 统一尺寸：`inline-flex items-center px-1.5 py-0.5 text-xs rounded`
**字段列表 ** （ `dl space-y-1.5` ） ：
- 每行：`grid grid-cols-[72px_1fr] gap-2`
- `dt` ： `text-xs text-neutral-500` ； `dd` ： `text-xs text-right text-neutral-800`
- 数字/日期加 `tabular-nums` ，编号加 `font-mono`
- 字段：最近跟进 / 客户编号 / 委托日期 / 需求类型 / 房源用途 / 客户来源
### 6.2 快捷操作区（ ）
**三主按钮 ** （ `grid grid-cols-3 gap-2` ） ：
- 样式：`flex flex-col items-center gap-1 py-2 text-xs font-medium bg-primary-600 text-white rounded-md hover:bg-primary-700`
- 按钮：打电话 / 写跟进（触发 `drawerOpen=true` ）
**操作网格 ** （ `grid grid-cols-2 gap-1` ） ：
- 默认：`px-2 py-2 text-xs text-left rounded-md text-neutral-600 hover:bg-neutral-100`
- 危险项（转无效）：`text-danger-600 hover:bg-danger-50`
- 按钮：收藏 / 不置顶 / 改等级（`modal='grade'` ） `modal='status'` ） `modal='deal'` ） `modal='edit'` ）
### 6.3 联系人面板（ ）
容器：`bg-white rounded-lg border border-neutral-200 p-3`
- Header 操作：`查看号码` / `新增联系人` ， `text-xs text-primary-600 hover:underline space-x-2`
- 姓名：`text-sm font-medium text-neutral-900`
- 号码（脱敏）：`text-xs text-neutral-600 tabular-nums`
- 拨打统计：`text-xs text-neutral-500`
### 6.4 相关员工面板（ ）
容器：`bg-white rounded-lg border border-neutral-200 p-3`
- Header 操作：`编辑` ， `text-xs text-primary-600 hover:underline`
- 每个员工块（`space-y-3` ） ：
- 角色标签：`text-xs font-medium text-neutral-700` （如「【首录人】」）
- 姓名：`text-sm text-neutral-900`
- 参与时间：`text-xs text-neutral-500 tabular-nums`
---
## 7. 弹窗与抽屉
### 7.1 统一规范
- 遮罩：`fixed inset-0 z-50 bg-neutral-900/40` ，点击关闭
- 弹窗层：`z-60 fixed inset-0 flex items-center justify-center p-4 pointer-events-none`
- 弹窗体：`pointer-events-auto bg-white rounded-xl shadow-lg border border-neutral-200 flex flex-col`
- Header： `flex items-center justify-between px-5 py-4 border-b border-neutral-200` ，关闭按钮 `p-1 text-neutral-500 hover:bg-neutral-100 rounded-md`
- Footer： `flex items-center justify-end gap-2 px-5 py-3 border-t border-neutral-200 bg-neutral-50` ，取消 Secondary + 确认 Primary
### 7.2 弹窗清单
| 弹窗 | 触发 | 宽度 | 内容要点 |
|---|---|---|---|
| 改等级 | `modal='grade'` | `max-w-sm` | 原等级展示 + 下拉选择新等级 |
| 改状态 | `modal='status'` | `max-w-md` | 原状态展示 + 下拉新状态 + 理由 textarea |
| 转成交 | `modal='deal'` | `max-w-lg` | 状态/房源类型下拉 + 选择成交房源按钮 |
| 编辑基础信息 | `modal='edit'` | `max-w-2xl max-h-[85vh] overflow-y-auto` | 需求类型/来源/用途/付款方式/证件号码 |
### 7.3 写跟进 Drawer
- 触发：`drawerOpen=true`
- 宽度：`w-[480px]` ，从右侧滑入（`translate-x-full` → `translate-x-0` ）
- 字段： （ ） （ ， （ ） （ ） （ ， ）
---
## 8. Alpine.js 状态机
``` js
function clientDetailPage ( ) {
return {
modal : null , // 'grade' | 'status' | 'deal' | 'edit' | null
drawerOpen : false ,
navItems : [
{ id : 'section-requirements' , label : '需求信息' } ,
{ id : 'section-follow' , label : '跟进记录' } ,
{ id : 'section-viewings' , label : '带看记录' } ,
{ id : 'section-insights' , label : '客源解读' } ,
{ id : 'section-matches' , label : '二手配房' }
] ,
activeSection : 'section-requirements' ,
observer : null ,
scrollToSection ( id ) {
const el = document . getElementById ( id )
if ( el ) el . scrollIntoView ( { behavior : 'smooth' , block : 'start' } )
} ,
init ( ) {
const sections = Array . from ( document . querySelectorAll ( '.section-anchor' ) )
this . observer = new IntersectionObserver ( ( entries ) => {
entries . forEach ( ( entry ) => {
if ( entry . isIntersecting ) this . activeSection = entry . target . id
} )
} , { root : null , rootMargin : '-140px 0px -55% 0px' , threshold : 0.01 } )
sections . forEach ( ( s ) => this . observer . observe ( s ) )
}
}
}
```
---
### 4.3 Section 2： （ ）
## 9. HTMX 交互规范
- Section ID： `section-follow`
- 不再以 Tab 切页；在同一 Section 内使用筛选条 + 时间线。
- Header 右侧固定主操作：`写跟进` （ ）
### 9.1 原则
结构：
- 筛选工具栏（跟进类型、日期范围、有录音/有图片）
- 时间线列表（日期分组）
- 加载更多
- 页面首次渲染直接 SSR 输出完整 5 个 Section。
- 每个 Section 内部筛选/分页独立请求，仅刷新本 Section 容器。
- 弹窗/Drawer 提交后定向刷新对应 Section 或右侧面板。
样式要点：
- 条目卡片 `rounded-md border border-neutral-200 p-3`
- 敏感信息记录 `bg-warning-50 border-warning-600/20`
---
### 4.4 Section 3： （ ）
- Section ID： `section-viewings`
- Header 右侧操作：`新增带看` （ ） `新增预约` （ ）
- 筛选：日期范围、归属人带看、其他人带看。
- 内容：时间线卡片，显示带看情况、房源链接、带看次数标签、详情链接。
---
### 4.5 Section 4： （ ）
- Section ID： `section-insights`
- 默认展示占位/空态，接口就绪后替换数据。
- 布局：
---
### 4.6 Section 5： （ ）
- Section ID： `section-matches`
- Header： `批量分享` 。
- 内容：按分组展示房源卡片列表（优质户型/降价/热门/新上）。
- 卡片内操作：`分享房源` 、`反馈` 。
---
## 5. 右侧信息面板
### 5.1 客源信息概览（ ）
- 顶部标识区使用主色：`bg-primary-600 text-white rounded-t-lg` 。
- 标签行：私客、带看进度、等级。
- 字段列表：最近跟进、客户编号、委托日期、需求类型、用途、来源、购房目的、付款方式、名下房产、贷款记录、证件信息、意向学校、入学时间。
- 展开收起：默认展示 8 行，点击 `展开全部` 展示完整。
### 5.2 快捷操作区（ ）
- 三主按钮：打电话、写跟进、报备/常看。
- 两列操作网格：收藏、置顶、改等级、改状态、转公客、转成交、转无效、编辑客源。
- 禁用态统一：`disabled:opacity-50 disabled:cursor-not-allowed` 。
### 5.3 联系人面板（ ）
- Header 操作：`查看号码` 、`新增联系人` 。
- 手机号默认脱敏；点击查看明文需后端留痕并返回片段更新。
### 5.4 相关员工面板（ ）
- 展示首录人、归属人、参与时间。
- 店长/管理员显示 `编辑` 入口。
---
## 6. 弹窗与抽屉（与右侧操作对应）
### 6.1 统一规范
- Modal： `UI_SYSTEM.md` §3.6，默认 `max-w-sm/max-w-md/max-w-lg` 。
- Drawer： `w-[480px]` ，用于写跟进等字段较多场景。
- Footer： ， `取消` + `确认` 。
### 6.2 P0 弹窗清单
- 改等级（ `max-w-sm` ）
- 改状态（ `max-w-md` ）
- 转成交（ `max-w-lg` ）
- 选择成交房源（ `max-w-5xl` ，内含表格+分页）
- 写跟进（ `w-[480px]` ）
---
## 7. HTMX 交互规范（锚点版）
### 7.1 关键变化
- 删除「左侧 Tab 切换请求」。
- 详情页首次渲染直接返回完整 Sections。
- 每个 Section 内部独立筛选和分页请求，仅刷新本 Section 容器。
### 7.2 请求映射
### 9.2 请求映射
| 操作 | URL | Target | Swap |
|---|---|---|---|
| 跟进筛选 | `/clients/{id}/follow-logs/partial` | `#follow-section-body` | `innerHTML` |
| 跟进类型 筛选 | `/clients/{id}/follow-logs/partial` | `#follow-section-body` | `innerHTML` |
| 跟进加载更多 | `/clients/{id}/follow-logs/partial?page=N` | `#follow-timeline-list` | `beforeend` |
| 带看筛选 | `/clients/{id}/viewings/partial` | `#viewings-section-body` | `innerHTML` |
| 客源解读时段切换 | `/clients/{id}/insights/partial?period=7d ` | `#insights-section-body` | `innerHTML` |
| 客源解读刷新 | `/clients/{id}/insights/partial` | `#insights-section-body` | `innerHTML` |
| 配房筛选/分页 | `/clients/{id}/matches/partial` | `#matches-section-body` | `innerHTML` |
| 查看号码 | `/clients/{id}/contacts/{cid}/reveal-phone/` | `#phone-{cid}` | `innerHTML` |
---
## 8 . 状态与可用性规范
## 10 . 状态与可用性规范
### 8 .1 Loading
### 10 .1 Loading
- 每个 Section 内独立 `htmx-indicator` 骨架。
- 按钮提交中显示 Spinner + 进行时文案（如 `保存中...` ）。
### 8 .2 Empty
### 10 .2 Empty
- 跟进为空：`暂无跟进` 。
- 带看为空：`暂无带看记录` + `新增带看` 。
- 配房为空：`暂无匹配房源` 。
- 跟进为空：`暂无跟进`
- 带看为空：`暂无带看记录` + `新增带看` 按钮
- 配房为空：`暂无匹配房源`
### 8 .3 Error
### 10 .3 Error
- `htmx:responseError` 保留旧内容 + 右下角 Error Toast。
### 8 .4 A11y
### 10 .4 A11y
- 可点击项支持键盘 Tab 聚焦。
- 所有交互控件保留 `focus-visible` 样式。
- 锚点导航项增加 `aria-current="true"` （当前 Section） 。
- 锚点导航当前 项 `aria-current="true"` 。
- Modal 打开时 `role="dialog"` + `aria-modal="true"` 。
---
## 9 . 工程落地清单（给 AI Engineer）
## 11 . 工程落地清单
1. 以 `UI_SYSTEM.md` 页面框架替换客源详情页现有容器尺寸（ ）。
2. 删除左侧 Tab 状态机（`activeTab` ）及对应 `hx-get` Tab 切换逻辑 。
3. 新增 `Section Anchor Nav` ，实现锚点滚动与激活高亮 。
4. 将需求信息、跟进记录、带看记录、客源解读、二手配房改为同页连续 Sections 。
5. 每个 Section 设置独立 HTMX target， 。
6. 右侧信息面板保持 sticky（ `top-20` ）并拆分为 4 个卡片区块 。
7. 弹窗/抽屉入口统一走 HTMX 拉取片段，提交后定向刷新对应 Section 或右侧卡片 。
8. 全量检查 class 是否符合 token（ ） 。
1. `body` 挂载 `x-data="clientDetailPage()"` ，包含完整状态机（见第 8 节
2. Topbar 使用 `bg-primary-800` ，激活项 `bg-primary-600 text-white` 。
3. 主内容区：`ml-60 pt-[72px] min-h-screen bg-neutral-50 px-6 py-5` 。
4. Section 锚点导航 sticky `top-16 z-30` ；右侧面板 sticky `top-16 max-h-[calc(100vh-80px)] overflow-y-auto` 。
5. 所有 Section 添加 class `section-anchor scroll-mt-24` ，供 IntersectionObserver 监听 。
6. 右侧客源概览顶部标识区用 `bg-primary-600` （非 `bg-primary-800` ） 。
7. 每个 Section 设置独立 HTMX target， 。
8. Modal 遮罩 `z-50` ，弹窗体 `z-60` ； `z-50` ， `z-60` 。
9. 全量检查 class 是否符合 token（ ）
---
## 10 . 验收标准
## 12 . 验收标准
- Topbar 为深青绿色 `bg-primary-800` ，与内容区有明显层次区分。
- 左侧主区无 Tab 切换行为，所有内容可连续滚动查看。
- 点击 Section 导航仅发生锚点滚动，不触发内容隐藏/显示。
- 页面视觉与 `preview.html` 一致：层级、卡片密度、按钮和输入风格一致 。
- 锚点导航随滚动自动高亮当前 Section 。
- 页面视觉与 `客源详情_静态原型.html` 一致：层级、卡片密度、按钮和输入风格一致。
- 颜色、字号、圆角、焦点环全部使用系统 token 与规范类名。
- 关键路径（ ） （ ）
