ishenwei/nexus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sync: add test results analyzer notes

Browse Source
This commit is contained in:
weishen
2026-04-25 20:00:10 +08:00
parent ec3be78d36
commit a6a0d4435c
5 changed files with 405 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

527
Project/fonrey/UI_DESIGN/客源详情_UI设计.md
View File

@@ -1,9 +1,10 @@
# 客源详情页 UI 设计文档 # 客源详情页 UI 设计文档
> **版本**：v1.1 · **日期**：2026-04-25 > **版本**：v1.2 · **日期**：2026-04-25
> **依赖规范**：`Project/fonrey/UI_SYSTEM/UI_SYSTEM.md` v1.2、`Project/fonrey/UI_SYSTEM/组件规范设计.md` > **依赖规范**：`Project/fonrey/UI_SYSTEM/UI_SYSTEM.md` v1.2、`Project/fonrey/UI_SYSTEM/组件规范设计.md`
> **视觉参考**：`Project/fonrey/UI_SYSTEM/preview.html`（页面骨架、卡片层级、工具栏密度） > **视觉参考**：`Project/fonrey/UI_SYSTEM/preview.html`（页面骨架、卡片层级、工具栏密度）
> **PRD 来源**：`Project/fonrey/PRD/客源管理/客源管理模块PRD.md` §5.7 私客详情页 > **PRD 来源**：`Project/fonrey/PRD/客源管理/客源管理模块PRD.md` §5.7 私客详情页
> **静态原型**：`Project/fonrey/客源详情_静态原型.html`（以此为视觉真相来源）
--- ---
@@ -15,11 +16,15 @@
- 桌面优先（`>=1280px`），不做移动端适配。 - 桌面优先（`>=1280px`），不做移动端适配。
- 技术栈固定：Tailwind CSS + HTMX + Alpine.js + Django Template。 - 技术栈固定：Tailwind CSS + HTMX + Alpine.js + Django Template。
### 1.2 本版关键改动（相对 v1.0） ### 1.2 本版关键改动（相对 v1.1）
- 左侧主内容区**取消 Tab 切换**，改为**全量 Section 连续展示**。 - 修正 Topbar 配色：`bg-white border-b` → `bg-primary-800`，与 UI_SYSTEM v1.2 对齐。
- 顶部 Section 导航仅用于锚点跳转（`#section-*`），不隐藏任何内容。 - 修正主内容区 padding：`pt-14 py-4` → `pt-[72px] py-5`。
- 页面布局、间距、层级、色彩、焦点环严格对齐 `UI_SYSTEM.md` 与 `preview.html`。 - 修正 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 与入口 ### 1.3 URL 与入口
@@ -34,67 +39,71 @@
### 2.1 视觉与 Token ### 2.1 视觉与 Token
- 主色：`primary-600`，禁用硬编码 Hex。 - 主色：`primary-600`，禁用硬编码 Hex。
- Topbar 背景：`bg-primary-800`（深青绿，区别于内容区）。
- 页面底色：`bg-neutral-50`，内容卡片：`bg-white border border-neutral-200 rounded-lg`。 - 页面底色：`bg-neutral-50`，内容卡片：`bg-white border border-neutral-200 rounded-lg`。
- 正文字号：`text-sm`；辅助：`text-xs text-neutral-500`；关键数字加 `tabular-nums`。 - 正文字号：`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`。 - 焦点环统一：`focus-visible:ring-2 focus-visible:ring-primary-600/40`。
### 2.2 组件与图标 ### 2.2 组件与图标
- 图标库：Heroicons v2。 - 图标库：Heroicons v2。
- 默认：Outline 24px（`w-5 h-5`） - 默认：Outline 24px（`w-5 h-5`）
- 强调：Solid 20px（`w-5 h-5`）
- 高密：Mini 16px（`w-4 h-4`） - 高密：Mini 16px（`w-4 h-4`）
- 禁止独立 CSS 文件；样式全部使用 Tailwind utility class。 - 禁止独立 CSS 文件；样式全部使用 Tailwind utility class。
### 2.3 页面骨架对齐 preview 模板 ### 2.3 页面骨架
- Topbar：`h-14 sticky top-0 z-20 bg-white border-b border-neutral-200` - Topbar：`fixed top-0 left-0 right-0 h-14 z-20 bg-primary-800 flex items-center justify-between`
- Sidebar：展开 `w-60`，内容区偏移 `ml-60` - Sidebar：`fixed left-0 top-14 h-[calc(100vh-56px)] w-60 z-20 border-r border-neutral-200 bg-white`
- 主内容区：`px-6 py-4` - 主内容区：`ml-60 pt-[72px] min-h-screen bg-neutral-50 px-6 py-5`
- 区块垂直节奏：`space-y-6` - 区块垂直节奏：`space-y-4`（外层）、`space-y-6`（左侧 Section 间距）
--- ---
## 3. 页面信息架构 ## 3. 页面信息架构
## 3.1 整体结构 ### 3.1 整体结构
``` ```
Topbar (56) Topbar (h-14, bg-primary-800)
-> Sidebar (240) -> Sidebar (w-60, fixed left)
-> Content Area (bg-neutral-50) -> Content Area (ml-60, pt-[72px], bg-neutral-50, px-6 py-5)
-> Breadcrumb + Header Actions -> Breadcrumb + Page Title
-> Main Grid (12 cols) -> Main Grid (12 cols, gap-6)
- Left Content: 8 cols - Left (col-span-8)
- Sticky Section Anchor Nav (非 Tab) - Sticky Section Anchor Nav (top-16, z-30)
- Section 1: 需求信息 - Section 1: 需求信息
- Section 2: 跟进记录 - Section 2: 跟进记录
- Section 3: 带看记录 - Section 3: 带看记录
- Section 4: 客源解读（P1） - Section 4: 客源解读
- Section 5: 二手配房（P1） - Section 5: 二手配房
- Right Sidebar: 4 cols - Right Sidebar (col-span-4, sticky top-16)
- 客源信息概览 - 客源信息概览（含快捷操作）
- 联系人 - 联系人
- 相关员工 - 相关员工
- 其他操作
``` ```
### 3.2 主体布局规范 ### 3.2 主体布局骨架
```html ```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="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"> <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"> <section class="col-span-8 min-w-0 space-y-6">
<!-- Anchor Nav --> <!-- Anchor Nav + All Sections -->
<!-- All sections rendered below -->
</section> </section>
<aside class="col-span-4 min-w-0 space-y-3 sticky top-16 max-h-[calc(100vh-80px)] overflow-y-auto">
<aside class="col-span-4 min-w-0 space-y-3 sticky top-20" id="client-detail-side"> <!-- Right panels -->
<!-- right panels -->
</aside> </aside>
</div> </div>
</div> </div>
@@ -103,214 +112,356 @@ Topbar (56)
--- ---
## 4. 左侧主内容区（全量 Section + 锚点导航） ## 4. Topbar
### 4.1 Section 导航（替代 Tab） 结构同 UI_SYSTEM §5.2，客源详情页激活「客源」导航项。
### 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 代码骨架
```html ```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">
<!-- 左区：Logo -->
<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>
<!-- 中区：主导航（nav flex-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`（rootMargin `-140px 0px -55% 0px`，threshold `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="详情分区导航"> <nav class="flex items-center gap-1 overflow-x-auto whitespace-nowrap" aria-label="详情分区导航">
<a href="#section-requirements" @click="jump('section-requirements')" <template x-for="item in navItems" :key="item.id">
:class="active==='section-requirements' ? 'bg-primary-50 text-primary-700 font-medium' : 'text-neutral-600 hover:bg-neutral-100 hover:text-neutral-800'" <a :href="'#' + item.id"
class="px-3 py-1.5 text-sm rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40">需求信息</a> @click.prevent="scrollToSection(item.id)"
<a href="#section-follow" @click="jump('section-follow')" class="px-3 py-1.5 text-sm rounded-md">跟进记录</a> :aria-current="activeSection === item.id ? 'true' : 'false'"
<a href="#section-viewings" @click="jump('section-viewings')" class="px-3 py-1.5 text-sm rounded-md">带看记录</a> :class="activeSection === item.id
<a href="#section-insights" @click="jump('section-insights')" class="px-3 py-1.5 text-sm rounded-md">客源解读</a> ? 'bg-primary-50 text-primary-700 font-medium'
<a href="#section-matches" @click="jump('section-matches')" class="px-3 py-1.5 text-sm rounded-md">二手配房</a> : '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> </nav>
</div> </div>
``` ```
--- ---
### 4.2 Section 1：需求信息（P0） ### 5.2 Section 1：需求信息（P0）
- Section ID：`section-requirements` - ID：`section-requirements`，class 含 `section-anchor scroll-mt-24`
- 卡片结构：标题行（含编辑按钮）+ 三列字段网格 + 备注跨列。
- 容器：`bg-white rounded-lg border border-neutral-200 p-4 space-y-4` - 容器：`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`（跨满三列）
- 空值：统一显示 `-`
字段：总价、面积、居室、装修、朝向、楼层、楼龄、意向商圈、意向小区、交通情况、备注。空值统一 `-`。 字段列表：总价、面积、居室、装修、朝向、楼层、楼龄、意向商圈、意向小区、交通情况、备注（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"> ### 5.3 Section 2：跟进记录（P0）
<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> - ID：`section-follow`，class 含 `section-anchor scroll-mt-24`
</header> - 容器：`bg-white rounded-lg border border-neutral-200 p-4 space-y-4`
<dl class="grid grid-cols-3 gap-x-6 gap-y-4"> - Header 右侧：「写跟进」Primary 按钮，含铅笔图标 `w-4 h-4`，点击触发写跟进 Drawer（`drawerOpen=true`）
<!-- field items -->
</dl> **类型筛选条**（`flex items-center gap-2 flex-wrap`）：
</section> - 激活项：`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：带看记录（P0）
- ID：`section-viewings`，class 含 `section-anchor scroll-mt-24`
- Header 右侧：两个 Secondary 按钮（`新增预约` / `新增带看`）
- 筛选栏：同跟进记录日期筛选样式，含「归属人带看」「其他人带看」checkbox
- 时间线结构同跟进记录，房源名称用 `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：客源解读（P1）
- ID：`section-insights`，class 含 `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：二手配房（P1）
- ID：`section-matches`，class 含 `section-anchor scroll-mt-24`
- Header 右侧：「批量分享」Secondary 按钮
**分组标题**：`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 客源信息概览（P0）
容器：`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`
- 等级（如「C(一般)」）：`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 快捷操作区（P0）
**三主按钮**（`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 联系人面板（P0）
容器：`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 相关员工面板（P0）
容器：`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`）
- 字段：跟进方式（select）/ 跟进内容（textarea，至少 6 字）/ 跟进时间（input）/ 附件（file）/ 是否开放给同事查看（checkbox，默认勾选）
---
## 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：跟进记录（P0） ## 9. HTMX 交互规范
- Section ID：`section-follow` ### 9.1 原则
- 不再以 Tab 切页；在同一 Section 内使用筛选条 + 时间线。
- Header 右侧固定主操作：`写跟进`（Primary）。
结构： - 页面首次渲染直接 SSR 输出完整 5 个 Section。
- 筛选工具栏（跟进类型、日期范围、有录音/有图片） - 每个 Section 内部筛选/分页独立请求，仅刷新本 Section 容器。
- 时间线列表（日期分组） - 弹窗/Drawer 提交后定向刷新对应 Section 或右侧面板。
- 加载更多
样式要点： ### 9.2 请求映射
- 条目卡片 `rounded-md border border-neutral-200 p-3`
- 敏感信息记录 `bg-warning-50 border-warning-600/20`
---
### 4.4 Section 3：带看记录（P0）
- Section ID：`section-viewings`
- Header 右侧操作：`新增带看`（Secondary）+ `新增预约`（Secondary）。
- 筛选：日期范围、归属人带看、其他人带看。
- 内容：时间线卡片，显示带看情况、房源链接、带看次数标签、详情链接。
---
### 4.5 Section 4：客源解读（P1）
- Section ID：`section-insights`
- 默认展示占位/空态，接口就绪后替换数据。
- 布局：2 列卡片 + 偏好摘要 + 图表占位（可先文本百分比）。
---
### 4.6 Section 5：二手配房（P1）
- Section ID：`section-matches`
- Header：更新时间 + `批量分享`。
- 内容：按分组展示房源卡片列表（优质户型/降价/热门/新上）。
- 卡片内操作：`分享房源`、`反馈`。
---
## 5. 右侧信息面板
### 5.1 客源信息概览（P0）
- 顶部标识区使用主色：`bg-primary-600 text-white rounded-t-lg`。
- 标签行：私客、带看进度、等级。
- 字段列表：最近跟进、客户编号、委托日期、需求类型、用途、来源、购房目的、付款方式、名下房产、贷款记录、证件信息、意向学校、入学时间。
- 展开收起：默认展示 8 行，点击 `展开全部` 展示完整。
### 5.2 快捷操作区（P0）
- 三主按钮：打电话、写跟进、报备/常看。
- 两列操作网格：收藏、置顶、改等级、改状态、转公客、转成交、转无效、编辑客源。
- 禁用态统一：`disabled:opacity-50 disabled:cursor-not-allowed`。
### 5.3 联系人面板（P0）
- Header 操作：`查看号码`、`新增联系人`。
- 手机号默认脱敏；点击查看明文需后端留痕并返回片段更新。
### 5.4 相关员工面板（P0）
- 展示首录人、归属人、参与时间。
- 店长/管理员显示 `编辑` 入口。
---
## 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 弹窗清单
- 改等级（Modal, `max-w-sm`）
- 改状态（Modal, `max-w-md`）
- 转成交（Modal, `max-w-lg`）
- 选择成交房源（Modal, `max-w-5xl`，内含表格+分页）
- 写跟进（Drawer, `w-[480px]`）
---
## 7. HTMX 交互规范（锚点版）
### 7.1 关键变化
- 删除「左侧 Tab 切换请求」。
- 详情页首次渲染直接返回完整 Sections。
- 每个 Section 内部独立筛选和分页请求，仅刷新本 Section 容器。
### 7.2 请求映射
| 操作 | URL | Target | Swap | | 操作 | 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}/follow-logs/partial?page=N` | `#follow-timeline-list` | `beforeend` |
| 带看筛选 | `/clients/{id}/viewings/partial` | `#viewings-section-body` | `innerHTML` | | 带看筛选 | `/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}/matches/partial` | `#matches-section-body` | `innerHTML` |
| 查看号码 | `/clients/{id}/contacts/{cid}/reveal-phone/` | `#phone-{cid}` | `innerHTML` | | 查看号码 | `/clients/{id}/contacts/{cid}/reveal-phone/` | `#phone-{cid}` | `innerHTML` |
--- ---
## 8. 状态与可用性规范 ## 10. 状态与可用性规范
### 8.1 Loading ### 10.1 Loading
- 每个 Section 内独立 `htmx-indicator` 骨架。 - 每个 Section 内独立 `htmx-indicator` 骨架。
- 按钮提交中显示 Spinner + 进行时文案（如 `保存中...`）。 - 按钮提交中显示 Spinner + 进行时文案（如 `保存中...`）。
### 8.2 Empty ### 10.2 Empty
- 跟进为空：`暂无跟进`。 - 跟进为空：`暂无跟进`
- 带看为空：`暂无带看记录` + `新增带看`。 - 带看为空：`暂无带看记录` + `新增带看` 按钮
- 配房为空：`暂无匹配房源`。 - 配房为空：`暂无匹配房源`
### 8.3 Error ### 10.3 Error
- `htmx:responseError` 保留旧内容 + 右下角 Error Toast。 - `htmx:responseError` 保留旧内容 + 右下角 Error Toast。
### 8.4 A11y ### 10.4 A11y
- 可点击项支持键盘 Tab 聚焦。 - 可点击项支持键盘 Tab 聚焦。
- 所有交互控件保留 `focus-visible` 样式。 - 所有交互控件保留 `focus-visible` 样式。
- 锚点导航项增加 `aria-current="true"`（当前 Section）。 - 锚点导航当前项 `aria-current="true"`。
- Modal 打开时 `role="dialog"` + `aria-modal="true"`。
--- ---
## 9. 工程落地清单（给 AI Engineer） ## 11. 工程落地清单
1. 以 `UI_SYSTEM.md` 页面框架替换客源详情页现有容器尺寸（Topbar/Sidebar/Content offset）。 1. `body` 挂载 `x-data="clientDetailPage()"`，包含完整状态机（见第 8 节）。
2. 删除左侧 Tab 状态机（`activeTab`）及对应 `hx-get` Tab 切换逻辑。 2. Topbar 使用 `bg-primary-800`，激活项 `bg-primary-600 text-white`。
3. 新增 `Section Anchor Nav`，实现锚点滚动与激活高亮。 3. 主内容区：`ml-60 pt-[72px] min-h-screen bg-neutral-50 px-6 py-5`。
4. 将需求信息、跟进记录、带看记录、客源解读、二手配房改为同页连续 Sections。 4. Section 锚点导航 sticky `top-16 z-30`；右侧面板 sticky `top-16 max-h-[calc(100vh-80px)] overflow-y-auto`。
5. 每个 Section 设置独立 HTMX target，避免全页刷新。 5. 所有 Section 添加 class `section-anchor scroll-mt-24`，供 IntersectionObserver 监听。
6. 右侧信息面板保持 sticky（`top-20`）并拆分为 4 个卡片区块。 6. 右侧客源概览顶部标识区用 `bg-primary-600`（非 `bg-primary-800`）。
7. 弹窗/抽屉入口统一走 HTMX 拉取片段，提交后定向刷新对应 Section 或右侧卡片。 7. 每个 Section 设置独立 HTMX target，避免全页刷新。
8. 全量检查 class 是否符合 token（尤其颜色、圆角、焦点环、表格密度）。 8. Modal 遮罩 `z-50`，弹窗体 `z-60`；Drawer 遮罩 `z-50`，Drawer 面板 `z-60`。
9. 全量检查 class 是否符合 token（颜色、圆角、焦点环、表格密度）。
--- ---
## 10. 验收标准 ## 12. 验收标准
- Topbar 为深青绿色 `bg-primary-800`，与内容区有明显层次区分。
- 左侧主区无 Tab 切换行为，所有内容可连续滚动查看。 - 左侧主区无 Tab 切换行为，所有内容可连续滚动查看。
- 点击 Section 导航仅发生锚点滚动，不触发内容隐藏/显示。 - 点击 Section 导航仅发生锚点滚动，不触发内容隐藏/显示。
- 页面视觉与 `preview.html` 一致：层级、卡片密度、按钮和输入风格一致。 - 锚点导航随滚动自动高亮当前 Section。
- 页面视觉与 `客源详情_静态原型.html` 一致：层级、卡片密度、按钮和输入风格一致。
- 颜色、字号、圆角、焦点环全部使用系统 token 与规范类名。 - 颜色、字号、圆角、焦点环全部使用系统 token 与规范类名。
- 关键路径（写跟进、改状态、查看号码）可在单页完成并有明确反馈（loading/toast/error）。 - 关键路径（写跟进、改状态、查看号码）可在单页完成并有明确反馈（loading/toast/error）。

2
wiki/index.md
View File

@@ -4,6 +4,7 @@
- [Overview](overview.md) — living synthesis - [Overview](overview.md) — living synthesis
## Sources ## Sources
- [2026-04-25] [Test Results Analyzer Agent Personality](sources/testing-test-results-analyzer.md)
- [2026-04-25] [Performance Benchmarker Agent Personality](sources/testing-performance-benchmarker.md) - [2026-04-25] [Performance Benchmarker Agent Personality](sources/testing-performance-benchmarker.md)
- [2026-04-25] [Testing Reality Checker](sources/testing-reality-checker.md) - [2026-04-25] [Testing Reality Checker](sources/testing-reality-checker.md)
- [2026-04-25] [Workflow Optimizer Agent Personality](sources/testing-workflow-optimizer.md) - [2026-04-25] [Workflow Optimizer Agent Personality](sources/testing-workflow-optimizer.md)
@@ -418,7 +419,6 @@
- [2026-04-21] [testing-accessibility-auditor](sources/testing-accessibility-auditor.md) — (expected: wiki/sources/testing-accessibility-auditor.md — source missing) - [2026-04-21] [testing-accessibility-auditor](sources/testing-accessibility-auditor.md) — (expected: wiki/sources/testing-accessibility-auditor.md — source missing)
- [2026-04-21] [testing-tool-evaluator](sources/testing-tool-evaluator.md) — (expected: wiki/sources/testing-tool-evaluator.md — source missing) - [2026-04-21] [testing-tool-evaluator](sources/testing-tool-evaluator.md) — (expected: wiki/sources/testing-tool-evaluator.md — source missing)
- [2026-04-21] [testing-evidence-collector](sources/testing-evidence-collector.md) — (expected: wiki/sources/testing-evidence-collector.md — source missing) - [2026-04-21] [testing-evidence-collector](sources/testing-evidence-collector.md) — (expected: wiki/sources/testing-evidence-collector.md — source missing)
- [2026-04-21] [testing-test-results-analyzer](sources/testing-test-results-analyzer.md) — (expected: wiki/sources/testing-test-results-analyzer.md — source missing)
- [2026-04-20] [security](sources/security.md) — (expected: wiki/sources/security.md — source missing) - [2026-04-20] [security](sources/security.md) — (expected: wiki/sources/security.md — source missing)
- [2026-04-20] [llm-wiki](sources/llm-wiki.md) — (expected: wiki/sources/llm-wiki.md — source missing) - [2026-04-20] [llm-wiki](sources/llm-wiki.md) — (expected: wiki/sources/llm-wiki.md — source missing)
- [2026-04-20] [baoyu-skills](sources/baoyu-skills.md) — (expected: wiki/sources/baoyu-skills.md — source missing) - [2026-04-20] [baoyu-skills](sources/baoyu-skills.md) — (expected: wiki/sources/baoyu-skills.md — source missing)

9
wiki/log.md
View File

@@ -1,3 +1,12 @@
## [2026-05-05] ingest | Test Results Analyzer Agent Personality
- Source file: Agent/agency-agents/testing/testing-test-results-analyzer.md
- Status: ✅ 成功摄入
- Summary: Test Results Analyzer——The Agency Testing 部门的测试结果分析与质量情报专家 Agent，通过统计分析方法、机器学习预测模型和可视化报告将原始测试数据转化为战略决策依据。核心理念：数据驱动的质量决策，所有结论必须通过统计方法验证。核心能力：测试覆盖率分析、失败模式统计分类、基于 RandomForest 的缺陷易发性预测、发布就绪多维度评估、质量投资 ROI 分析。Python 框架：pandas + numpy + scipy.stats + sklearn RandomForestClassifier + matplotlib/seaborn。成功指标：质量风险预测准确率 95%+、24 小时内报告交付、干系人满意度 4.5/5。
- Concepts created: 无（Key Concepts 均为单来源特定方法论，不满足可独立复用阈值）
- Entities created: 无（Key Entities 均为单来源技术栈，不满足 ≥2 次创建阈值）
- Source page: wiki/sources/testing-test-results-analyzer.md
- Notes: 无内容冲突。index.md 已添加条目；overview.md Testing 部门新增 testing-test-results-analyzer 段落。与 testing-performance-benchmarker 的协同关系已在 Source Page 和 overview.md 中记录（Performance Benchmarker 提供性能维度数据，Test Results Analyzer 提供整体质量情报视图）。
## [2026-05-05] ingest | Performance Benchmarker Agent Personality ## [2026-05-05] ingest | Performance Benchmarker Agent Personality
- Source file: Agent/agency-agents/testing/testing-performance-benchmarker.md - Source file: Agent/agency-agents/testing/testing-performance-benchmarker.md
- Status: ✅ 成功摄入 - Status: ✅ 成功摄入

2
wiki/overview.md
View File

@@ -103,6 +103,8 @@ The wiki covers two major multi-agent frameworks: **The Agency** (agency-agents)
**[[testing-performance-benchmarker]]**（Performance Benchmarker）：性能测试与优化专家 Agent——The Agency Testing 部门的性能工程专家，通过系统性性能测试确保系统以 95% 置信度满足 SLA 要求。核心理念：**量化一切可量化的，用数据证明优化价值**。核心能力：负载/压力/耐力/可扩展性测试，Core Web Vitals 优化（LCP < 2.5s / FID < 100ms / CLS < 0.1），k6 性能测试框架，统计置信区间分析，容量规划与成本-性能权衡。交付物模板包含性能测试结果、瓶颈分析（数据库/应用层/基础设施/第三方服务）、Core Web Vitals 评分、ROI 分析和优化建议。成功指标：95% 系统持续满足性能 SLA，Core Web Vitals 达到"良好"评级（90th percentile），关键用户体验指标改善 25%，支持 10x 当前负载。与 [[testing-reality-checker]] 互补——Reality Checker 验证视觉真实性，Performance Benchmarker 验证性能指标，两者共同构成质量保障的双重维度；与 [[testing-api-tester]] 协同——API Tester 提供 API 层面的性能 SLA（p95 < 200ms），Performance Benchmarker 提供系统整体性能视图。 **[[testing-performance-benchmarker]]**（Performance Benchmarker）：性能测试与优化专家 Agent——The Agency Testing 部门的性能工程专家，通过系统性性能测试确保系统以 95% 置信度满足 SLA 要求。核心理念：**量化一切可量化的，用数据证明优化价值**。核心能力：负载/压力/耐力/可扩展性测试，Core Web Vitals 优化（LCP < 2.5s / FID < 100ms / CLS < 0.1），k6 性能测试框架，统计置信区间分析，容量规划与成本-性能权衡。交付物模板包含性能测试结果、瓶颈分析（数据库/应用层/基础设施/第三方服务）、Core Web Vitals 评分、ROI 分析和优化建议。成功指标：95% 系统持续满足性能 SLA，Core Web Vitals 达到"良好"评级（90th percentile），关键用户体验指标改善 25%，支持 10x 当前负载。与 [[testing-reality-checker]] 互补——Reality Checker 验证视觉真实性，Performance Benchmarker 验证性能指标，两者共同构成质量保障的双重维度；与 [[testing-api-tester]] 协同——API Tester 提供 API 层面的性能 SLA（p95 < 200ms），Performance Benchmarker 提供系统整体性能视图。
**[[testing-test-results-analyzer]]**（Test Results Analyzer）：测试结果分析与质量情报专家 Agent——The Agency Testing 部门的核心测试数据分析和洞察生成专家，通过统计分析方法、机器学习预测模型和可视化报告将原始测试数据转化为战略决策依据。核心理念：**数据驱动的质量决策**，所有结论必须通过统计方法验证，提供置信区间和显著性分析。核心能力：测试覆盖率分析（行/分支/函数/语句覆盖 + 差距识别）、失败模式统计分类（功能/性能/安全/集成）、基于 RandomForest 的缺陷易发性预测、发布就绪多维度评估（通过率 + 覆盖率阈值 + 性能 SLA + 安全合规 + 缺陷密度）、质量投资 ROI 分析。Python 框架：pandas + numpy + scipy.stats + sklearn RandomForestClassifier + matplotlib/seaborn 可视化。成功指标：质量风险预测准确率 95%+、90% 分析建议被开发团队采纳、85% 缺陷逃逸预防改善、24 小时内报告交付、干系人满意度 4.5/5。与 [[testing-performance-benchmarker]] 协同——Performance Benchmarker 提供性能维度的测试数据，Test Results Analyzer 提供整体质量情报视图；与 [[testing-api-tester]] 互补——API Tester 产生测试执行数据，Test Results Analyzer 负责解读和预测；与 [[testing-reality-checker]] 互补——Reality Checker 验证视觉真实性，Test Results Analyzer 量化质量指标趋势。与 [[Multi-Agent-System-Reliability]] 中的统计验证方法论共享数据驱动决策思想。
### The Agency — Paid Media 部门 ### The Agency — Paid Media 部门
The Agency 的 Paid Media 部门专注于企业级付费媒体策略与运营，涵盖 Google Ads、Microsoft Advertising、Amazon Ads 三大核心平台。 The Agency 的 Paid Media 部门专注于企业级付费媒体策略与运营，涵盖 Google Ads、Microsoft Advertising、Amazon Ads 三大核心平台。

53
wiki/sources/testing-test-results-analyzer.md Normal file
View File

@@ -0,0 +1,53 @@
---
title: "Test Results Analyzer Agent Personality"
type: source
tags: [agent-personality, testing, quality-assurance, statistical-analysis, machine-learning]
date: 2026-04-25
---
## Source File
- [[Agent/agency-agents/testing/testing-test-results-analyzer.md]]
## Summary（用中文描述）
- 核心主题：测试结果分析专家 Agent 的角色定义与行为规范，专注于全面的测试结果评估、质量指标分析和可操作洞察生成
- 问题域：软件测试质量保障、缺陷预测、发布就绪评估
- 方法/机制：统计分析方法 + 机器学习预测模型 + 质量指标仪表盘 + 多层级报告生成
- 结论/价值：通过数据驱动的测试分析，将原始测试数据转化为战略洞察，驱动质量决策和持续改进
## Key Claims（用中文描述）
- Test Results Analyzer Agent 通过统计分析方法验证结论，为所有质量声明提供置信区间和统计显著性
- 基于机器学习（RandomForestClassifier）的缺陷预测模型，预测缺陷易发区域，风险评分准确率目标 95%
- 发布就绪评估采用多维度质量指标（通过率、覆盖率、性能SLA、安全合规、缺陷密度），结合置信度计算给出 GO/NO-GO 建议
- 质量第一决策原则：优先考虑用户体验和产品质量，而非发布timeline
- 测试报告在测试完成后 24 小时内交付，干系人满意度目标 4.5/5
## Key Quotes
> "Reads test results like a detective reads evidence — nothing gets past." — Agent 个性描述
> "Test pass rate improved from 87.3% to 94.7% with 95% statistical confidence" — 精确沟通风格示例
> "Quality investment of $50K prevents estimated $300K in production defect costs" — 质量投资ROI分析示例
## Key Concepts
- [[TestCoverageAnalysis]]：通过覆盖率统计（行/分支/函数/语句覆盖）和差距分析识别未覆盖区域
- [[StatisticalAnalysis]]：使用统计方法验证结论，提供置信区间和统计显著性，支持跨数据源交叉验证
- [[DefectPrediction]]：基于历史缺陷数据训练 RandomForest 分类器，预测缺陷易发区域并给出置信分数
- [[ReleaseReadinessAssessment]]：综合通过率、覆盖率阈值、性能SLA、安全合规、缺陷密度等指标计算风险评分，给出 GO/NO-GO 建议
- [[QualityMetrics]]：代码覆盖率、功能覆盖率、测试有效性、缺陷密度等可量化的质量指标体系
- [[FailurePatternAnalysis]]：将测试失败按类型（功能/性能/安全/集成）分类，识别根因和趋势
- [[QualityROI]]：质量投资回报分析，量化预防缺陷的成本节约与质量改进的收益
- [[PredictiveModeling]]：使用 sklearn 集成方法对未来质量结果进行预测建模
## Key Entities
- [[TestResultsAnalyzer]]：本 Agent 本身，测试数据分析和质量情报专家，负责从测试结果中提取洞察
- [[RandomForestClassifier]]：scikit-learn 提供的随机森林分类器，用于缺陷易发性预测
- [[pandas / numpy / scipy.stats]]：统计分析依赖的核心 Python 库
- [[matplotlib / seaborn]]：测试结果可视化依赖的 Python 库
## Connections
- [[TestingPerformanceBenchmarker]] ← same_agent_family ← [[TestResultsAnalyzer]]
- [[TestingRealityChecker]] ← same_agent_family ← [[TestResultsAnalyzer]]
- [[TestingWorkflowOptimizer]] ← same_agent_family ← [[TestResultsAnalyzer]]
- [[APITester]] ← upstream_data_source ← [[TestResultsAnalyzer]]（API Tester 提供测试数据输入）
- [[TestResultsAnalyzer]] ← produces ← [[QualityMetrics]] / [[DefectPrediction]]
## Contradictions
- 暂无发现与其他 Wiki 页面的直接冲突