Sync: add design and process improvement notes

This commit is contained in:
2026-04-25 19:38:47 +08:00
parent 2613a74c73
commit 8c909c9c08
21 changed files with 1553 additions and 107 deletions

BIN
.DS_Store vendored

Binary file not shown.

3
.gitignore vendored
View File

@@ -1 +1,4 @@
.obsidian/
.DS_Store
**/.DS_Store

View File

@@ -0,0 +1,316 @@
# 客源详情页 UI 设计文档
> **版本**v1.1 · **日期**2026-04-25
> **依赖规范**`Project/fonrey/UI_SYSTEM/UI_SYSTEM.md` v1.2、`Project/fonrey/UI_SYSTEM/组件规范设计.md`
> **视觉参考**`Project/fonrey/UI_SYSTEM/preview.html`(页面骨架、卡片层级、工具栏密度)
> **PRD 来源**`Project/fonrey/PRD/客源管理/客源管理模块PRD.md` §5.7 私客详情页
---
## 1. 模块概述
### 1.1 页面目标
- 在一个页面内完成私客详情查看、跟进、带看、状态流转、联系人管理、相关员工查看。
- 桌面优先(`>=1280px`),不做移动端适配。
- 技术栈固定Tailwind CSS + HTMX + Alpine.js + Django Template。
### 1.2 本版关键改动(相对 v1.0
- 左侧主内容区**取消 Tab 切换**,改为**全量 Section 连续展示**。
- 顶部 Section 导航仅用于锚点跳转(`#section-*`),不隐藏任何内容。
- 页面布局、间距、层级、色彩、焦点环严格对齐 `UI_SYSTEM.md``preview.html`
### 1.3 URL 与入口
- 详情页主路由:`/clients/<client_id>/`
- 入口:客源列表点击姓名或详情操作。
- 所有左侧 Section 默认随页面 SSR 输出,首屏即可看到首个 Section向下滚动查看其余 Section。
---
## 2. 设计基线(必须遵守)
### 2.1 视觉与 Token
- 主色:`primary-600`,禁用硬编码 Hex。
- 页面底色:`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`
- 焦点环统一:`focus-visible:ring-2 focus-visible:ring-primary-600/40`
### 2.2 组件与图标
- 图标库Heroicons v2。
- 默认Outline 24px`w-5 h-5`
- 强调Solid 20px`w-5 h-5`
- 高密Mini 16px`w-4 h-4`
- 禁止独立 CSS 文件;样式全部使用 Tailwind utility class。
### 2.3 页面骨架对齐 preview 模板
- 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`
---
## 3. 页面信息架构
## 3.1 整体结构
```
Topbar (56)
-> Sidebar (240)
-> Content Area (bg-neutral-50)
-> Breadcrumb + Header Actions
-> Main Grid (12 cols)
- Left Content: 8 cols
- Sticky Section Anchor Nav (非 Tab)
- Section 1: 需求信息
- Section 2: 跟进记录
- Section 3: 带看记录
- Section 4: 客源解读P1
- Section 5: 二手配房P1
- Right Sidebar: 4 cols
- 客源信息概览
- 联系人
- 相关员工
- 其他操作
```
### 3.2 主体布局规范
```html
<main class="ml-60 min-h-[calc(100vh-56px)] bg-neutral-50 px-6 py-4">
<div class="mx-auto max-w-[1600px] space-y-4">
<!-- 面包屑 + 页头 -->
<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>
<aside class="col-span-4 min-w-0 space-y-3 sticky top-20" id="client-detail-side">
<!-- right panels -->
</aside>
</div>
</div>
</main>
```
---
## 4. 左侧主内容区(全量 Section + 锚点导航)
### 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 代码骨架
```html
<div x-data="sectionNav()" class="bg-white border border-neutral-200 rounded-lg px-3 py-2 sticky top-20 z-30">
<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>
</nav>
</div>
```
---
### 4.2 Section 1需求信息P0
- Section ID`section-requirements`
- 卡片结构:标题行(含编辑按钮)+ 三列字段网格 + 备注跨列。
- 容器:`bg-white rounded-lg border border-neutral-200 p-4 space-y-4`
字段:总价、面积、居室、装修、朝向、楼层、楼龄、意向商圈、意向小区、交通情况、备注。空值统一 `-`
```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>
```
---
### 4.3 Section 2跟进记录P0
- Section ID`section-follow`
- 不再以 Tab 切页;在同一 Section 内使用筛选条 + 时间线。
- Header 右侧固定主操作:`写跟进`Primary
结构:
- 筛选工具栏(跟进类型、日期范围、有录音/有图片)
- 时间线列表(日期分组)
- 加载更多
样式要点:
- 条目卡片 `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 |
|---|---|---|---|
| 跟进筛选 | `/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}/matches/partial` | `#matches-section-body` | `innerHTML` |
| 查看号码 | `/clients/{id}/contacts/{cid}/reveal-phone/` | `#phone-{cid}` | `innerHTML` |
---
## 8. 状态与可用性规范
### 8.1 Loading
- 每个 Section 内独立 `htmx-indicator` 骨架。
- 按钮提交中显示 Spinner + 进行时文案(如 `保存中...`)。
### 8.2 Empty
- 跟进为空:`暂无跟进`
- 带看为空:`暂无带看记录` + `新增带看`
- 配房为空:`暂无匹配房源`
### 8.3 Error
- `htmx:responseError` 保留旧内容 + 右下角 Error Toast。
### 8.4 A11y
- 可点击项支持键盘 Tab 聚焦。
- 所有交互控件保留 `focus-visible` 样式。
- 锚点导航项增加 `aria-current="true"`(当前 Section
---
## 9. 工程落地清单(给 AI Engineer
1.`UI_SYSTEM.md` 页面框架替换客源详情页现有容器尺寸Topbar/Sidebar/Content offset
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尤其颜色、圆角、焦点环、表格密度
---
## 10. 验收标准
- 左侧主区无 Tab 切换行为,所有内容可连续滚动查看。
- 点击 Section 导航仅发生锚点滚动,不触发内容隐藏/显示。
- 页面视觉与 `preview.html` 一致:层级、卡片密度、按钮和输入风格一致。
- 颜色、字号、圆角、焦点环全部使用系统 token 与规范类名。
- 关键路径写跟进、改状态、查看号码可在单页完成并有明确反馈loading/toast/error

View File

@@ -1012,7 +1012,7 @@ Topbar 分三区左区Logo、中区主导航、右区工具区
| 区域 | 内容 | 样式 |
|---|---|---|
| 左区150px | Logo 图 + 产品名"Fonrey" | `flex items-center gap-2 px-4 text-base font-semibold text-neutral-900` |
| 左区150px | Logo 图 + 产品名"Fonrey" | `flex items-center gap-2 px-4 text-base font-semibold text-white` |
| 中区flex-1 | 主分类导航 Tab | 见 5.2.2 |
| 右区auto | 全局搜索图标 / 消息 / 帮助 / 头像菜单 | `flex items-center gap-1 px-4` |
@@ -1020,9 +1020,9 @@ Topbar 分三区左区Logo、中区主导航、右区工具区
主分类8项**主页 / 房源 / 客源 / 营销 / 交易 / 数据 / 人事 / 系统**
- 每项:`px-3 py-1 text-sm font-medium rounded-md`
- 默认态:`text-neutral-600 hover:bg-neutral-100 hover:text-neutral-800`
- 激活态:`bg-primary-50 text-primary-700`
- 每项:`px-3 py-1.5 text-sm font-medium rounded-md`
- 默认态:`text-primary-100 hover:bg-primary-700 hover:text-white`
- 激活态:`bg-primary-600 text-white`
- 点击切换主分类 → Sidebar 同步切换为该分类的子菜单
#### 5.2.3 右区工具
@@ -1034,16 +1034,18 @@ Topbar 分三区左区Logo、中区主导航、右区工具区
| 帮助 | `QuestionMarkCircleIcon` 20px | 链接到帮助中心或触发 Tour |
| 头像菜单 | 头像(`w-8 h-8 rounded-full`+ 姓名缩写 | 下拉菜单:个人设置 / 切换角色 / 退出 |
> **配色说明**Topbar 背景使用 `bg-primary-800``#134E4A`,深青绿),与下方白色 Sidebar 和 `bg-neutral-50` 内容区形成明确层次区分,同时保持品牌色系一致性。
#### 5.2.4 Topbar HTML 片段
```html
<header class="fixed top-0 left-0 right-0 h-14 z-20
bg-white border-b border-neutral-200
bg-primary-800
flex items-center justify-between">
<!-- 左区Logo -->
<div class="flex items-center gap-2 px-4 w-60 shrink-0">
<img src="/static/img/logo.svg" class="w-7 h-7" alt="Fonrey">
<span class="text-base font-semibold text-neutral-900">Fonrey</span>
<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>
<!-- 中区:主导航 -->
@@ -1051,8 +1053,8 @@ Topbar 分三区左区Logo、中区主导航、右区工具区
{% for item in nav_items %}
<a href="{{ item.url }}"
class="px-3 py-1.5 text-sm font-medium rounded-md
{% if item.active %}bg-primary-50 text-primary-700
{% else %}text-neutral-600 hover:bg-neutral-100 hover:text-neutral-800{% endif %}">
{% if item.active %}bg-primary-600 text-white
{% else %}text-primary-100 hover:bg-primary-700 hover:text-white{% endif %}">
{{ item.label }}
</a>
{% endfor %}
@@ -1061,13 +1063,13 @@ Topbar 分三区左区Logo、中区主导航、右区工具区
<!-- 右区:工具 -->
<div class="flex items-center gap-1 px-4 shrink-0">
<!-- 全局搜索 -->
<button class="p-1.5 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700 rounded-md"
<button class="p-1.5 text-primary-200 hover:bg-primary-700 hover:text-white rounded-md"
aria-label="搜索">
<svg class="w-5 h-5"><!-- MagnifyingGlassIcon --></svg>
</button>
<!-- 消息通知 -->
<button class="relative p-1.5 text-neutral-500 hover:bg-neutral-100 rounded-md"
<button class="relative p-1.5 text-primary-200 hover:bg-primary-700 hover:text-white rounded-md"
aria-label="消息通知">
<svg class="w-5 h-5"><!-- BellIcon --></svg>
<span class="absolute top-1 right-1 min-w-[16px] h-4 px-1 text-[10px] font-bold
@@ -1076,20 +1078,20 @@ Topbar 分三区左区Logo、中区主导航、右区工具区
</button>
<!-- 帮助 -->
<button class="p-1.5 text-neutral-500 hover:bg-neutral-100 rounded-md" aria-label="帮助">
<button class="p-1.5 text-primary-200 hover:bg-primary-700 hover:text-white rounded-md" aria-label="帮助">
<svg class="w-5 h-5"><!-- QuestionMarkCircleIcon --></svg>
</button>
<!-- 头像菜单 -->
<div x-data="{ open: false }" @click.away="open=false" class="relative ml-1">
<div x-data="{ open: false }" @click.away="open=false" class="relative ml-1 pl-3 border-l border-primary-700">
<button @click="open=!open"
class="flex items-center gap-2 p-1 rounded-md hover:bg-neutral-100">
<span class="w-8 h-8 rounded-full bg-primary-100 text-primary-700
class="flex items-center gap-2 p-1 rounded-md hover:bg-primary-700">
<span class="w-8 h-8 rounded-full bg-primary-600 text-white
flex items-center justify-center text-sm font-semibold">
</span>
<span class="text-sm text-neutral-700 font-medium">王顺</span>
<svg class="w-4 h-4 text-neutral-400"><!-- ChevronDownIcon --></svg>
<span class="text-sm text-primary-100 font-medium">王顺</span>
<svg class="w-4 h-4 text-primary-300"><!-- ChevronDownIcon --></svg>
</button>
<div x-show="open" x-transition
class="absolute right-0 mt-1 w-44 bg-white rounded-md shadow-md

View File

@@ -48,43 +48,42 @@
<body class="bg-neutral-50 text-neutral-700 text-sm antialiased">
<!-- ============ 顶部导航 ============ -->
<header class="sticky top-0 z-20 bg-white border-b border-neutral-200">
<div class="flex items-center h-14 px-6 gap-6">
<!-- Logo -->
<div class="flex items-center gap-2">
<div class="w-7 h-7 rounded-md bg-primary-600 flex items-center justify-center text-white font-semibold">F</div>
<span class="font-semibold text-neutral-800 text-base">Fonrey · 房睿</span>
<header class="sticky top-0 z-20 bg-primary-800">
<div class="flex items-center h-14 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 font-semibold">F</div>
<span class="font-semibold text-white text-base">Fonrey · 房睿</span>
</div>
<!-- 主导航 -->
<nav class="flex items-center gap-1 text-sm">
<a class="px-3 py-1.5 rounded-md text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900">工作台</a>
<a class="px-3 py-1.5 rounded-md bg-primary-50 text-primary-700 font-medium">房源</a>
<a class="px-3 py-1.5 rounded-md text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900"></a>
<a class="px-3 py-1.5 rounded-md text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900">楼盘</a>
<a class="px-3 py-1.5 rounded-md text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900">组织人事</a>
<a class="px-3 py-1.5 rounded-md text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900">设置</a>
</nav>
<!-- 全局搜索 -->
<div class="flex-1 max-w-md relative">
<svg class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-4.3-4.3M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z"/></svg>
<input type="text" placeholder="搜索房源 / 客户 / 楼盘 ⌘K"
class="w-full pl-9 pr-3 py-1.5 text-sm rounded-md bg-neutral-100 border border-transparent hover:bg-neutral-50 hover:border-neutral-300 focus:bg-white focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20 focus:outline-none placeholder:text-neutral-400">
<!-- 中区:主导航 + 搜索 -->
<div class="flex items-center gap-4 flex-1 px-2">
<nav class="flex items-center gap-1 text-sm">
<a class="px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">工作台</a>
<a class="px-3 py-1.5 rounded-md bg-primary-600 text-white font-medium"></a>
<a class="px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">客源</a>
<a class="px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">楼盘</a>
<a class="px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">组织人事</a>
<a class="px-3 py-1.5 rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">设置</a>
</nav>
<!-- 全局搜索 -->
<div class="max-w-xs w-full relative">
<svg class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-primary-300" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-4.3-4.3M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z"/></svg>
<input type="text" placeholder="搜索房源 / 客户 / 楼盘 ⌘K"
class="w-full pl-9 pr-3 py-1.5 text-sm rounded-md bg-primary-700/60 border border-transparent text-white placeholder:text-primary-300 hover:bg-primary-700 focus:bg-white focus:text-neutral-700 focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20 focus:outline-none focus:placeholder:text-neutral-400">
</div>
</div>
<!--侧操作 -->
<div class="flex items-center gap-1">
<button class="relative p-1.5 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700 rounded-md">
<!--区:工具 -->
<div class="flex items-center gap-1 px-4 shrink-0">
<button class="relative p-1.5 text-primary-200 hover:bg-primary-700 hover:text-white rounded-md">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022 23.848 23.848 0 0 0 5.454 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"/></svg>
<span class="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-danger-600"></span>
</button>
<button class="p-1.5 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700 rounded-md">
<button class="p-1.5 text-primary-200 hover:bg-primary-700 hover:text-white rounded-md">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>
</button>
<div class="flex items-center gap-2 pl-3 ml-1 border-l border-neutral-200">
<div class="flex items-center gap-2 pl-3 ml-1 border-l border-primary-700">
<div class="w-7 h-7 rounded-full bg-primary-600 text-white flex items-center justify-center text-xs font-semibold">WS</div>
<div class="text-xs leading-tight">
<div class="font-medium text-neutral-800">魏深</div>
<div class="text-neutral-500">朝阳大区·大望路店</div>
</div>
<span class="text-sm font-medium text-primary-100">魏深</span>
</div>
</div>
</div>

View File

@@ -0,0 +1,488 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280">
<title>Fonrey 客源详情页 · 静态原型</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
50: '#F0FDFA',
100: '#CCFBF1',
200: '#99F6E4',
500: '#14B8A6',
600: '#0F766E',
700: '#115E59',
800: '#134E4A'
},
neutral: {
50: '#F8FAFC',
100: '#F1F5F9',
200: '#E2E8F0',
300: '#CBD5E1',
400: '#94A3B8',
500: '#64748B',
600: '#475569',
700: '#334155',
800: '#1E293B',
900: '#0F172A'
},
success: { 50: '#F0FDF4', 600: '#16A34A' },
warning: { 50: '#FFFBEB', 600: '#D97706' },
danger: { 50: '#FEF2F2', 600: '#DC2626' },
info: { 50: '#EFF6FF', 600: '#2563EB' }
},
boxShadow: {
xs: '0 1px 2px rgba(15,23,42,0.04)'
},
fontFamily: {
sans: ['Inter', 'PingFang SC', 'Microsoft YaHei', 'sans-serif'],
mono: ['JetBrains Mono', 'SFMono-Regular', 'Menlo', 'monospace']
}
}
}
}
</script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
html { scroll-behavior: smooth; }
.tabular-nums { font-variant-numeric: tabular-nums; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
</style>
</head>
<body class="bg-neutral-50 text-sm text-neutral-700 antialiased" x-data="clientDetailPage()">
<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>
<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 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>
<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 text-primary-100 hover:bg-primary-700 hover:text-white">交易</a>
<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 text-primary-100 hover:bg-primary-700 hover:text-white">人事</a>
<a class="px-3 py-1.5 text-sm rounded-md text-primary-100 hover:bg-primary-700 hover:text-white">系统</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="消息">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022 23.848 23.848 0 0 0 5.454 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"/></svg>
</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>
<aside class="fixed left-0 top-14 h-[calc(100vh-56px)] w-60 z-20 border-r border-neutral-200 bg-white">
<nav class="p-3 space-y-0.5">
<div class="px-2 pt-2 pb-1 text-xs font-medium text-neutral-500 uppercase tracking-wide">客源管理</div>
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md bg-primary-50 text-primary-700 font-medium">
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/></svg>
私客列表
</a>
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">公客池</a>
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">成交客</a>
<a class="flex items-center gap-2 px-2 py-1.5 rounded-md text-neutral-700 hover:bg-neutral-100">已删客源</a>
</nav>
</aside>
<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="面包屑">
<a class="hover:text-neutral-700">客源</a>
<svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
<a class="hover:text-neutral-700">私客管理</a>
<svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
<span class="text-neutral-700">姚叔叔置换电梯两房(上门)</span>
</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">
<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="详情分区导航">
<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>
<section id="section-requirements" class="scroll-mt-24 bg-white rounded-lg border border-neutral-200 p-4 space-y-4 section-anchor">
<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">
<div class="space-y-1"><dt class="text-xs text-neutral-500">总价</dt><dd class="text-sm text-neutral-900 tabular-nums">550-600万元</dd></div>
<div class="space-y-1"><dt class="text-xs text-neutral-500">面积</dt><dd class="text-sm text-neutral-900 tabular-nums">100-110m2</dd></div>
<div class="space-y-1"><dt class="text-xs text-neutral-500">居室</dt><dd class="text-sm text-neutral-900">2居</dd></div>
<div class="space-y-1"><dt class="text-xs text-neutral-500">装修</dt><dd class="text-sm text-neutral-900">-</dd></div>
<div class="space-y-1"><dt class="text-xs text-neutral-500">朝向</dt><dd class="text-sm text-neutral-900">-</dd></div>
<div class="space-y-1"><dt class="text-xs text-neutral-500">楼层</dt><dd class="text-sm text-neutral-900">中楼层、低楼层</dd></div>
<div class="space-y-1"><dt class="text-xs text-neutral-500">楼龄</dt><dd class="text-sm text-neutral-900">-</dd></div>
<div class="space-y-1"><dt class="text-xs text-neutral-500">意向商圈</dt><dd class="text-sm text-neutral-900">-</dd></div>
<div class="space-y-1"><dt class="text-xs text-neutral-500">意向小区</dt><dd class="text-sm text-neutral-900">-</dd></div>
<div class="space-y-1"><dt class="text-xs text-neutral-500">交通情况</dt><dd class="text-sm text-neutral-900">-</dd></div>
<div class="space-y-1 col-span-3"><dt class="text-xs text-neutral-500">备注</dt><dd class="text-sm text-neutral-900">-</dd></div>
</dl>
</section>
<section id="section-follow" class="scroll-mt-24 bg-white rounded-lg border border-neutral-200 p-4 space-y-4 section-anchor">
<header class="flex items-center justify-between">
<h2 class="text-base font-semibold text-neutral-800">跟进记录</h2>
<button @click="drawerOpen=true" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium bg-primary-600 text-white rounded-md hover:bg-primary-700 active:bg-primary-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40">
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Z"/></svg>
写跟进
</button>
</header>
<div class="flex items-center gap-2 flex-wrap">
<button class="px-3 py-1 text-xs rounded-full bg-primary-600 text-white">全部</button>
<button class="px-3 py-1 text-xs rounded-full bg-neutral-100 text-neutral-600 hover:bg-neutral-200">写入跟进</button>
<button class="px-3 py-1 text-xs rounded-full bg-neutral-100 text-neutral-600 hover:bg-neutral-200">敏感信息跟进</button>
<button class="px-3 py-1 text-xs rounded-full bg-neutral-100 text-neutral-600 hover:bg-neutral-200">修改跟进</button>
<button class="px-3 py-1 text-xs rounded-full bg-neutral-100 text-neutral-600 hover:bg-neutral-200">其他跟进</button>
</div>
<div class="border border-neutral-200 rounded-md p-3 bg-neutral-50 flex items-center gap-3 flex-wrap text-xs text-neutral-600">
<span class="text-neutral-500">筛选</span>
<input class="px-2 py-1 rounded border border-neutral-300 bg-white text-xs" placeholder="开始日期">
<span></span>
<input class="px-2 py-1 rounded border border-neutral-300 bg-white text-xs" placeholder="结束日期">
<label class="inline-flex items-center gap-1"><input type="checkbox" class="rounded border-neutral-300">有录音</label>
<label class="inline-flex items-center gap-1"><input type="checkbox" class="rounded border-neutral-300">有图片</label>
</div>
<ol class="relative border-l-2 border-neutral-200 ml-3 space-y-4 pl-5">
<li class="relative">
<span class="absolute -left-[27px] top-1 w-3 h-3 rounded-full bg-primary-600 ring-4 ring-white"></span>
<div class="rounded-md border border-neutral-200 p-3 bg-white space-y-1">
<div class="flex items-center gap-2 text-xs text-neutral-500">
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-info-50 text-info-600 font-medium">电话</span>
<time class="tabular-nums">11:25</time>
</div>
<p class="text-sm text-neutral-700">433弄5楼65.85平想置换丽晶苑2/3号楼楼层不要太高自己房子还没有挂牌。</p>
<p class="text-xs text-neutral-500">都市港湾店一组 雷威 · 2026-04-19</p>
</div>
</li>
<li class="relative">
<span class="absolute -left-[27px] top-1 w-3 h-3 rounded-full bg-warning-600 ring-4 ring-white"></span>
<div class="rounded-md border border-warning-600/20 bg-warning-50 p-3 space-y-1">
<div class="flex items-center gap-2 text-xs text-neutral-500">
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-warning-50 text-warning-600 font-medium">敏感查看</span>
<time class="tabular-nums">11:23</time>
</div>
<p class="text-sm text-neutral-700">查看联系人完整号码,系统自动留痕。</p>
<p class="text-xs text-neutral-500">系统记录 · 2026-04-19</p>
</div>
</li>
</ol>
<div class="text-center pt-1">
<button class="text-sm text-primary-600 hover:text-primary-700 hover:underline underline-offset-2">查看全部跟进</button>
</div>
</section>
<section id="section-viewings" class="scroll-mt-24 bg-white rounded-lg border border-neutral-200 p-4 space-y-4 section-anchor">
<header class="flex items-center justify-between">
<h2 class="text-base font-semibold text-neutral-800">带看记录</h2>
<div class="flex items-center gap-2">
<button class="px-3 py-1.5 text-sm font-medium bg-white border border-neutral-300 text-neutral-700 rounded-md hover:bg-neutral-50 hover:border-neutral-400">新增预约</button>
<button class="px-3 py-1.5 text-sm font-medium bg-white border border-neutral-300 text-neutral-700 rounded-md hover:bg-neutral-50 hover:border-neutral-400">新增带看</button>
</div>
</header>
<div class="border border-neutral-200 rounded-md p-3 bg-neutral-50 flex items-center gap-3 flex-wrap text-xs text-neutral-600">
<label class="inline-flex items-center gap-1"><input type="checkbox" class="rounded border-neutral-300">归属人带看</label>
<label class="inline-flex items-center gap-1"><input type="checkbox" class="rounded border-neutral-300">其他人带看</label>
<input class="px-2 py-1 rounded border border-neutral-300 bg-white text-xs" placeholder="开始日期">
<span></span>
<input class="px-2 py-1 rounded border border-neutral-300 bg-white text-xs" placeholder="结束日期">
</div>
<ol class="relative border-l-2 border-neutral-200 ml-3 space-y-4 pl-5">
<li class="relative">
<span class="absolute -left-[27px] top-1 w-3 h-3 rounded-full bg-primary-600 ring-4 ring-white"></span>
<div class="rounded-md border border-neutral-200 p-3 bg-white space-y-1">
<p class="text-xs text-neutral-500 tabular-nums">2026-04-17 20:30</p>
<p class="text-sm text-neutral-700">带看情况:客户继续维护</p>
<p class="text-sm"><a class="text-primary-600 hover:underline" href="#">金沙丽晶苑一期-001-1201</a></p>
<p class="text-xs text-neutral-500"><span class="inline-flex items-center px-2 py-0.5 rounded-full bg-primary-50 text-primary-700 font-medium">一看</span> 带看:雷威 · <a class="text-primary-600 hover:underline" href="#">详情 ></a></p>
</div>
</li>
</ol>
</section>
<section id="section-insights" class="scroll-mt-24 bg-white rounded-lg border border-neutral-200 p-4 space-y-4 section-anchor">
<header class="flex items-center justify-between">
<h2 class="text-base font-semibold text-neutral-800">客源解读</h2>
<span class="text-xs text-neutral-500">更新时间2026-04-25 09:12</span>
</header>
<div class="grid grid-cols-3 gap-3">
<div class="border border-neutral-200 rounded-md p-3 bg-white">
<p class="text-xs text-neutral-500">活跃行为</p>
<p class="mt-1 text-xl font-semibold text-neutral-900 tabular-nums">7 天内</p>
</div>
<div class="border border-neutral-200 rounded-md p-3 bg-white">
<p class="text-xs text-neutral-500">工作日活跃</p>
<p class="mt-1 text-xl font-semibold text-neutral-900 tabular-nums">-</p>
</div>
<div class="border border-neutral-200 rounded-md p-3 bg-white">
<p class="text-xs text-neutral-500">周末活跃</p>
<p class="mt-1 text-xl font-semibold text-neutral-900 tabular-nums">-</p>
</div>
</div>
<div class="grid grid-cols-3 gap-3">
<div class="border border-neutral-200 rounded-md p-3 text-center">
<p class="text-xs text-neutral-500">价格偏好</p>
<p class="mt-2 text-2xl font-semibold text-primary-600 tabular-nums">64%</p>
</div>
<div class="border border-neutral-200 rounded-md p-3 text-center">
<p class="text-xs text-neutral-500">户型偏好</p>
<p class="mt-2 text-2xl font-semibold text-primary-600 tabular-nums">22%</p>
</div>
<div class="border border-neutral-200 rounded-md p-3 text-center">
<p class="text-xs text-neutral-500">面积偏好</p>
<p class="mt-2 text-2xl font-semibold text-primary-600 tabular-nums">14%</p>
</div>
</div>
</section>
<section id="section-matches" class="scroll-mt-24 bg-white rounded-lg border border-neutral-200 p-4 space-y-4 section-anchor">
<header class="flex items-center justify-between">
<h2 class="text-base font-semibold text-neutral-800">二手配房</h2>
<button class="px-3 py-1.5 text-sm font-medium bg-white border border-neutral-300 text-neutral-700 rounded-md hover:bg-neutral-50 hover:border-neutral-400">批量分享</button>
</header>
<div class="space-y-3">
<h3 class="text-sm font-semibold text-neutral-700">优质户型</h3>
<article class="border border-neutral-200 rounded-md p-3">
<div class="flex gap-3">
<div class="w-20 h-14 rounded bg-neutral-100"></div>
<div class="min-w-0 flex-1">
<p class="text-sm font-medium text-primary-600 hover:underline cursor-pointer">都市港湾</p>
<p class="text-xs text-neutral-500">2/2/1 · 101.17m2 · 嘉定 丰庄</p>
<div class="mt-1 flex items-center gap-1">
<span class="inline-flex items-center px-1.5 py-0.5 text-[11px] rounded bg-warning-50 text-warning-600">朝南户型采光好</span>
<span class="inline-flex items-center px-1.5 py-0.5 text-[11px] rounded bg-info-50 text-info-600">私盘</span>
</div>
<p class="mt-1 text-sm font-medium text-neutral-900 tabular-nums">620万 <span class="text-xs font-normal text-neutral-500">已跌20万 · 61283元/m2</span></p>
</div>
</div>
</article>
</div>
</section>
</section>
<aside class="col-span-4 min-w-0 space-y-3 sticky top-16 max-h-[calc(100vh-80px)] overflow-y-auto">
<section class="bg-white rounded-lg border border-neutral-200 overflow-hidden">
<div class="bg-primary-600 px-4 py-3">
<div class="flex items-start gap-2">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-white/20 text-white">求购</span>
<div class="min-w-0">
<h2 class="text-sm font-semibold text-white truncate">姚叔叔置换电梯两房(上门)先生</h2>
<p class="text-xs text-white/80 mt-0.5">带看进度:一看</p>
</div>
</div>
</div>
<div class="p-3 space-y-3">
<div class="flex items-center gap-1.5 flex-wrap">
<span class="inline-flex items-center px-1.5 py-0.5 text-xs rounded bg-neutral-100 text-neutral-600">私客</span>
<span class="inline-flex items-center px-1.5 py-0.5 text-xs rounded bg-primary-50 text-primary-700">一看</span>
<span class="inline-flex items-center px-1.5 py-0.5 text-xs rounded bg-warning-50 text-warning-600">C(一般)</span>
</div>
<dl class="space-y-1.5">
<div class="grid grid-cols-[72px_1fr] gap-2"><dt class="text-xs text-neutral-500">最近跟进</dt><dd class="text-xs text-right text-neutral-800 tabular-nums">2026-04-19</dd></div>
<div class="grid grid-cols-[72px_1fr] gap-2"><dt class="text-xs text-neutral-500">客户编号</dt><dd class="text-xs text-right text-neutral-800 font-mono">60419C03182A3</dd></div>
<div class="grid grid-cols-[72px_1fr] gap-2"><dt class="text-xs text-neutral-500">委托日期</dt><dd class="text-xs text-right text-neutral-800 tabular-nums">2026-04-19</dd></div>
<div class="grid grid-cols-[72px_1fr] gap-2"><dt class="text-xs text-neutral-500">需求类型</dt><dd class="text-xs text-right text-neutral-800">二手</dd></div>
<div class="grid grid-cols-[72px_1fr] gap-2"><dt class="text-xs text-neutral-500">房源用途</dt><dd class="text-xs text-right text-neutral-800">住宅</dd></div>
<div class="grid grid-cols-[72px_1fr] gap-2"><dt class="text-xs text-neutral-500">客户来源</dt><dd class="text-xs text-right text-neutral-800">线下丨门店接待</dd></div>
</dl>
<div class="grid grid-cols-3 gap-2">
<button class="flex flex-col items-center gap-1 py-2 text-xs font-medium bg-primary-600 text-white rounded-md hover:bg-primary-700">打电话</button>
<button @click="drawerOpen=true" class="flex flex-col items-center gap-1 py-2 text-xs font-medium bg-primary-600 text-white rounded-md hover:bg-primary-700">写跟进</button>
<button class="flex flex-col items-center gap-1 py-2 text-xs font-medium bg-primary-600 text-white rounded-md hover:bg-primary-700">报备/常看</button>
</div>
<div class="grid grid-cols-2 gap-1">
<button class="px-2 py-2 text-xs text-left rounded-md text-neutral-600 hover:bg-neutral-100">收藏</button>
<button class="px-2 py-2 text-xs text-left rounded-md text-neutral-600 hover:bg-neutral-100">不置顶</button>
<button @click="modal='grade'" class="px-2 py-2 text-xs text-left rounded-md text-neutral-600 hover:bg-neutral-100">改等级</button>
<button @click="modal='status'" class="px-2 py-2 text-xs text-left rounded-md text-neutral-600 hover:bg-neutral-100">改状态</button>
<button class="px-2 py-2 text-xs text-left rounded-md text-neutral-600 hover:bg-neutral-100">转公客</button>
<button @click="modal='deal'" class="px-2 py-2 text-xs text-left rounded-md text-neutral-600 hover:bg-neutral-100">转成交</button>
<button class="px-2 py-2 text-xs text-left rounded-md text-danger-600 hover:bg-danger-50">转无效</button>
<button @click="modal='edit'" class="px-2 py-2 text-xs text-left rounded-md text-neutral-600 hover:bg-neutral-100">编辑客源</button>
</div>
</div>
</section>
<section class="bg-white rounded-lg border border-neutral-200 p-3">
<header class="flex items-center justify-between mb-2">
<h3 class="text-sm font-semibold text-neutral-800">联系人</h3>
<div class="text-xs text-primary-600 space-x-2">
<button class="hover:underline">查看号码</button>
<button class="hover:underline">新增联系人</button>
</div>
</header>
<div class="space-y-1">
<p class="text-sm font-medium text-neutral-900">姚叔叔置换电梯两房(上门)先生</p>
<p class="text-xs text-neutral-600 tabular-nums">电话1+86 137****8888</p>
<p class="text-xs text-neutral-500">默认拨打 · 接通0次 · 拨打0次</p>
</div>
</section>
<section class="bg-white rounded-lg border border-neutral-200 p-3">
<header class="flex items-center justify-between mb-2">
<h3 class="text-sm font-semibold text-neutral-800">相关员工</h3>
<button class="text-xs text-primary-600 hover:underline">编辑</button>
</header>
<div class="space-y-3">
<div>
<p class="text-xs font-medium text-neutral-700">【首录人】</p>
<p class="text-sm text-neutral-900">都市港湾店一组 雷威</p>
<p class="text-xs text-neutral-500 tabular-nums">参与时间2026-04-17 19:21</p>
</div>
<div>
<p class="text-xs font-medium text-neutral-700">【归属人】</p>
<p class="text-sm text-neutral-900">都市港湾店一组 雷威</p>
<p class="text-xs text-neutral-500 tabular-nums">参与时间2026-04-17 19:21</p>
</div>
</div>
</section>
</aside>
</div>
</div>
</main>
<div x-show="modal" x-transition.opacity class="fixed inset-0 z-50 bg-neutral-900/40" @click="modal = null"></div>
<div x-show="modal === 'grade'" x-transition class="fixed inset-0 z-60 flex items-center justify-center p-4 pointer-events-none">
<div class="w-full max-w-sm bg-white rounded-xl shadow-lg border border-neutral-200 pointer-events-auto flex flex-col">
<div class="flex items-center justify-between px-5 py-4 border-b border-neutral-200"><h2 class="text-base font-semibold text-neutral-800">改等级</h2><button @click="modal = null" class="p-1 text-neutral-500 hover:bg-neutral-100 rounded-md">x</button></div>
<div class="px-5 py-4 space-y-3"><p class="text-sm text-neutral-500">原等级C(一般)</p><select class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300 focus:outline-none focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20"><option>请选择新等级</option><option>A_urgent</option><option>A</option><option>B</option><option>C</option><option>D</option><option>E</option></select></div>
<div class="flex items-center justify-end gap-2 px-5 py-3 border-t border-neutral-200 bg-neutral-50"><button @click="modal = null" class="px-3 py-1.5 text-sm border border-neutral-300 rounded-md hover:bg-white">取消</button><button class="px-3 py-1.5 text-sm bg-primary-600 text-white rounded-md hover:bg-primary-700">保存</button></div>
</div>
</div>
<div x-show="modal === 'status'" x-transition class="fixed inset-0 z-60 flex items-center justify-center p-4 pointer-events-none">
<div class="w-full max-w-md bg-white rounded-xl shadow-lg border border-neutral-200 pointer-events-auto flex flex-col">
<div class="flex items-center justify-between px-5 py-4 border-b border-neutral-200"><h2 class="text-base font-semibold text-neutral-800">改状态</h2><button @click="modal = null" class="p-1 text-neutral-500 hover:bg-neutral-100 rounded-md">x</button></div>
<div class="px-5 py-4 space-y-3">
<p class="text-sm text-neutral-500">原状态:求购</p>
<select class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300"><option>请选择新状态</option><option>暂缓</option><option>转公</option><option>成交</option><option>无效</option></select>
<textarea rows="3" class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300" placeholder="请输入更改理由"></textarea>
</div>
<div class="flex items-center justify-end gap-2 px-5 py-3 border-t border-neutral-200 bg-neutral-50"><button @click="modal = null" class="px-3 py-1.5 text-sm border border-neutral-300 rounded-md hover:bg-white">取消</button><button class="px-3 py-1.5 text-sm bg-primary-600 text-white rounded-md hover:bg-primary-700">保存</button></div>
</div>
</div>
<div x-show="modal === 'deal'" x-transition class="fixed inset-0 z-60 flex items-center justify-center p-4 pointer-events-none">
<div class="w-full max-w-lg bg-white rounded-xl shadow-lg border border-neutral-200 pointer-events-auto flex flex-col">
<div class="flex items-center justify-between px-5 py-4 border-b border-neutral-200"><h2 class="text-base font-semibold text-neutral-800">转成交</h2><button @click="modal = null" class="p-1 text-neutral-500 hover:bg-neutral-100 rounded-md">x</button></div>
<div class="px-5 py-4 space-y-3">
<div class="grid grid-cols-2 gap-3">
<div><label class="block text-xs text-neutral-500 mb-1">状态</label><select class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300"><option>我购</option><option>我租</option></select></div>
<div><label class="block text-xs text-neutral-500 mb-1">房源类型</label><select class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300"><option>二手</option><option>新房</option></select></div>
<div class="col-span-2"><label class="block text-xs text-neutral-500 mb-1">成交房源</label><button class="w-full px-3 py-2 text-sm border border-neutral-300 rounded-md text-left text-primary-600 hover:bg-neutral-50">+ 选择成交房源</button></div>
</div>
</div>
<div class="flex items-center justify-end gap-2 px-5 py-3 border-t border-neutral-200 bg-neutral-50"><button @click="modal = null" class="px-3 py-1.5 text-sm border border-neutral-300 rounded-md hover:bg-white">取消</button><button class="px-3 py-1.5 text-sm bg-primary-600 text-white rounded-md hover:bg-primary-700">确认转成交</button></div>
</div>
</div>
<div x-show="modal === 'edit'" x-transition class="fixed inset-0 z-60 flex items-center justify-center p-4 pointer-events-none">
<div class="w-full max-w-2xl bg-white rounded-xl shadow-lg border border-neutral-200 pointer-events-auto flex flex-col max-h-[85vh]">
<div class="flex items-center justify-between px-5 py-4 border-b border-neutral-200"><h2 class="text-base font-semibold text-neutral-800">编辑基础信息</h2><button @click="modal = null" class="p-1 text-neutral-500 hover:bg-neutral-100 rounded-md">x</button></div>
<div class="flex-1 overflow-y-auto px-5 py-4">
<div class="grid grid-cols-2 gap-3">
<div><label class="block text-xs text-neutral-500 mb-1">需求类型</label><select class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300"><option>二手</option><option>新房</option></select></div>
<div><label class="block text-xs text-neutral-500 mb-1">来源</label><select class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300"><option>线下丨门店接待</option></select></div>
<div><label class="block text-xs text-neutral-500 mb-1">用途</label><select class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300"><option>住宅</option></select></div>
<div><label class="block text-xs text-neutral-500 mb-1">付款方式</label><select class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300"><option>请选择</option></select></div>
<div class="col-span-2"><label class="block text-xs text-neutral-500 mb-1">证件号码</label><input class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300" placeholder="请输入证件号码"></div>
</div>
</div>
<div class="flex items-center justify-end gap-2 px-5 py-3 border-t border-neutral-200 bg-neutral-50"><button @click="modal = null" class="px-3 py-1.5 text-sm border border-neutral-300 rounded-md hover:bg-white">取消</button><button class="px-3 py-1.5 text-sm bg-primary-600 text-white rounded-md hover:bg-primary-700">保存</button></div>
</div>
</div>
<div x-show="drawerOpen" x-transition.opacity class="fixed inset-0 z-50 bg-neutral-900/40" @click="drawerOpen = false"></div>
<aside x-show="drawerOpen" x-transition:enter="ease-out duration-200" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="ease-in duration-150" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="fixed right-0 top-0 h-full w-[480px] z-60 bg-white shadow-lg flex flex-col border-l border-neutral-200">
<div class="flex items-center justify-between px-5 py-4 border-b border-neutral-200"><h2 class="text-base font-semibold text-neutral-800">写入跟进</h2><button @click="drawerOpen=false" class="p-1 text-neutral-500 hover:bg-neutral-100 rounded-md">x</button></div>
<div class="flex-1 overflow-y-auto px-5 py-4 space-y-3">
<div><label class="block text-xs text-neutral-500 mb-1">跟进方式</label><select class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300"><option>电话</option><option>上门</option><option>微信</option><option>短信</option><option>其他</option></select></div>
<div><label class="block text-xs text-neutral-500 mb-1">跟进内容</label><textarea rows="4" class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300" placeholder="至少6字"></textarea></div>
<div><label class="block text-xs text-neutral-500 mb-1">跟进时间</label><input class="w-full px-3 py-2 text-sm rounded-md border border-neutral-300" value="2026-04-25 10:30"></div>
<div><label class="block text-xs text-neutral-500 mb-1">附件</label><input type="file" class="w-full text-sm"></div>
<label class="inline-flex items-center gap-2 text-sm text-neutral-700"><input type="checkbox" checked class="rounded border-neutral-300">是否开放给同事查看</label>
</div>
<div class="flex items-center justify-end gap-2 px-5 py-3 border-t border-neutral-200 bg-neutral-50"><button @click="drawerOpen=false" class="px-3 py-1.5 text-sm border border-neutral-300 rounded-md hover:bg-white">取消</button><button class="px-3 py-1.5 text-sm bg-primary-600 text-white rounded-md hover:bg-primary-700">提交</button></div>
</aside>
<script>
function clientDetailPage() {
return {
modal: 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((section) => this.observer.observe(section))
}
}
}
</script>
</body>
</html>

View File

@@ -1,69 +1,59 @@
---
title: "Change Management"
title: "Change-Management"
type: concept
tags: [itsm, devops, operations]
date: 2025-03-01
tags: [Organizational-Change, Process-Improvement, ITSM]
sources: [testing-workflow-optimizer, understanding-complete-itsm]
last_updated: 2026-04-21
---
## Definition
# Change-Management
变更管理Change Management是[[ITSM]]的核心流程之一,通过**结构化的方法评估、审批和实施IT变更**,在保持服务稳定性的同时实现业务所需的灵活性
变更管理——在组织中系统性地规划、实施和控制人员、流程和技术变更的管理学科。核心目标是降低变更风险、提高采纳率、确保变革产生预期业务价值,同时最小化对现有服务运营的干扰
## Change Management Process
## Aliases
- 变革管理
- 组织变革管理
- IT Change ManagementITSM 语境)
```
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Change │ → │ Impact │ → │ CAB │
│ Request │ │ Assessment │ │ Approval │
└──────────────┘ └──────────────┘ └──────────────┘
┌──────────────┐ ┌──────────────┐ ┌──────────────┘
│ Build & │ ← │ Change │ ← │ Schedule │
│ Test │ │ Build │ │ & Prepare │
└──────────────┘ └──────────────┘ └──────────────┘
```
## Core Frameworks
## Change Types
### Kotter's 8-Step Change Model
1. **Create Urgency**(创造紧迫感)——让利益相关者认识到变革必要性
2. **Build Guiding Coalition**(组建指导联盟)——建立变革领导团队
3. **Form Strategic Vision**(形成战略愿景)——清晰描述变革后的未来状态
4. **Enlist a Volunteer Army**(动员志愿者)——让尽可能多的人参与
5. **Enable Action by Removing Barriers**(消除障碍)——移除阻碍变革的结构性和文化性壁垒
6. **Generate Short-Term Wins**(创造短期胜利)——通过快速成果建立信心
7. **Sustain Acceleration**(持续加速)——保持势头,不给反对派喘息空间
8. **Institute Change**(固化变革)——将变革融入组织文化
| 类型 | 描述 | 审批级别 |
|------|------|---------|
| Emergency | 紧急变更如P1事故响应 | 快速审批 |
| Standard | 标准变更(例行维护) | 自动审批 |
| Normal | 常规变更(新功能部署) | CAB审批 |
### ADKAR ModelProsci
- **A**wareness认知——了解为什么需要变革
- **D**esire渴望——愿意参与和支持变革
- **K**nowledge知识——知道如何变革
- **A**bility能力——能够实施新行为
- **R**einforcement强化——巩固变革成果
## Modern Change Management (ITSM 2.0)
## In ITSM ContextITIL Change Management
在 ITSM 框架中,变更管理分为:
- **标准变更Standard Change**:预批准的低风险例行变更
- **正常变更Normal Change**:需经 CAB变更顾问委员会评估和批准
- **紧急变更Emergency Change**:突发事件驱动的快速变更,事后评估
在[[ITSM 2.0]]中变更管理由AI和[[IaC]]驱动:
## In Workflow Optimization
[[testing-workflow-optimizer]] 在实施流程优化时必须考虑变更管理:
- **测量基线**前先建立利益相关者共识
- **设计优化方案**需要获得关键干系人认同
- **实施规划**必须包含培训和沟通计划
- **自动化落地**需要克服员工的恐惧和阻力
### AI-Driven Risk Assessment
- **Automated Impact Analysis** — 自动评估变更影响
- **Failure Probability Prediction** — AI预测变更失败概率
- **Rollback Planning** — 自动生成回滚计划
## Common Pitfalls
- **变革疲劳Change Fatigue**:频繁变更导致员工抵触
- **忽略人因素**:只关注流程和技术,忽视人的情感
- **缺乏可见成果**:没有短期胜利导致失去支持
- **变革太快或太慢**:节奏失控
### CI/CD Pipeline Governance
```
Code Commit → Automated Testing → IaC Validation → Risk Score → Approval
↓ ↓ ↓ ↓ ↓
Git hooks Unit/Int Tests Terraform Plan ML Model Auto/CAB
```
## Key Metrics
| 指标 | 描述 |
|------|------|
| Change Success Rate | 变更成功率 |
| Failed Change Rate | 失败变更率 |
| Rollback Rate | 回滚率 |
| Emergency Change Ratio | 紧急变更比例 |
## Related Concepts
- [[ITSM]] — 父框架
- [[Change-Failure-Rate]] — 变更失败率
- [[IaC]] — 基础设施即代码
- [[CI/CD-Pipeline]] — CI/CD流水线
- [[Rollback]] — 回滚机制
## Sources
- [[understanding-complete-itsm]] — AI-driven Change Management
## Connections
- [[testing-workflow-optimizer]] — 流程优化落地的必要保障机制
- [[ITSM]] — ITSM 框架中的三大核心流程之一
- [[Kaizen]] — 持续改进需要有效的变更管理支撑

View File

@@ -0,0 +1,46 @@
---
title: "Design-Thinking"
type: concept
tags: [UX, Human-Centered, Innovation, Process-Improvement]
sources: [testing-workflow-optimizer, Human-Centered-Design]
last_updated: 2026-04-21
---
# Design-Thinking
设计思维——一种以人为中心的创新方法论通过共情Empathize、定义Define、构思Ideate、原型Prototype和测试Test五个阶段的迭代循环解决复杂问题并创造有意义的解决方案。
## Aliases
- 设计思维
- Design Thinking Process
- 以人为本的创新方法
## Five Stages
1. **Empathize共情**——深入理解用户的需求、感受、动机和行为。通过观察、访谈和沉浸式体验获取洞察。
2. **Define定义**——综合共情阶段的洞察明确要解决的核心问题Point of View / How Might We
3. **Ideate构思**——头脑风暴,生成大量创意和可能的解决方案,不评判,鼓励疯狂的点子。
4. **Prototype原型**——用低成本、快速的方式制作解决方案的物理或数字原型。
5. **Test测试**——用真实用户验证原型,收集反馈,迭代改进。
## Core Principles
- **以人为中心**:始终从人的真实需求出发,而非从技术可能出发
- **迭代而非线性**:允许反复回到前面的阶段
- **跨职能协作**:打破 silos融合不同背景的视角
- **快速失败、快速学习**:通过小规模实验快速获取认知
## Connection to Human-Centered-Design
Design Thinking 是 [[Human-Centered-Design]] 的系统性方法论框架——HCD 提供哲学和价值观Design Thinking 提供可操作的流程。
## Connection to Workflow Optimization
[[testing-workflow-optimizer]] 将 Design Thinking 应用于流程改进:
- **Empathize** → 理解员工(流程执行者)的真实痛点
- **Define** → 明确效率瓶颈和优化目标
- **Ideate** → 构思多种可能的优化方案
- **Prototype** → 小规模试点验证优化方案
- **Test** → 收集反馈,迭代改进
## Connections
- [[Human-Centered-Design]] — 哲学基础
- [[Lean]] — 互补Design Thinking 侧重创新发现Lean 侧重效率优化
- [[testing-workflow-optimizer]] — 应用于流程改进的方法论工具

View File

@@ -0,0 +1,60 @@
---
title: "Human-Centered-Design"
type: concept
tags: [UX, Process-Design, Employee-Experience, Design-Thinking]
sources: [testing-workflow-optimizer]
last_updated: 2026-04-21
---
# Human-Centered-Design
人本设计——一种以最终用户和员工为核心的设计哲学,在设计产品、服务、流程和系统时,优先考虑人类的需求、能力、限制和情感,而非仅关注技术可行性或效率指标。
## Aliases
- HCD
- 以人为本的设计
- 人本设计
## Core Principles
1. **User Needs First**(用户需求优先)——在技术或流程约束之前,首先理解和满足人的需求
2. **Empathy**(同理心)——深入理解用户的真实感受、痛点和心智模型
3. **Iterative Design**(迭代设计)——通过快速原型→测试→改进的循环持续优化
4. **Inclusion & Accessibility**(包容性与可访问性)——确保设计服务于所有用户,包括残障人士和边缘群体
5. **Cognitive Load Management**(认知负荷管理)——减少用户在完成任务时的思考和记忆负担
## In Workflow/Process Design
在流程和工作流设计中,人本设计意味着:
- **员工满意度优先于单纯效率**:好的流程设计不仅高效,还让执行者感到有价值和满足
- **减少认知负荷**:将复杂的决策规则可视化,提供清晰的指引
- **保留人类判断空间**:在自动化无法处理的灰色地带保留人工决策节点
- **可访问性**:确保流程对所有能力水平的员工都可用
## Connection to Workflow Optimization
[[testing-workflow-optimizer]] 将人本设计作为核心约束:
> "Prioritize user experience and employee satisfaction in process design"
> "Consider change management and adoption challenges in all recommendations"
> "Balance automation efficiency with human judgment and creativity"
这意味着:
- 自动化不应完全消除人的参与感
- 流程设计应减少而非增加员工认知压力
- 变革建议需要考虑员工的接受度和适应成本
## Design Thinking Process
1. **Empathize**(共情)——观察、访谈,理解用户
2. **Define**(定义)——综合洞察,定义核心问题
3. **Ideate**(构思)——头脑风暴,生成大量创意
4. **Prototype**(原型)——快速低成本制作解决方案原型
5. **Test**(测试)——用真实用户验证原型
## Connection to Lean/Six-Sigma
人本设计补充了 [[Lean]] 和 [[Six-Sigma]] 的量化视角:
- Lean/Six-Sigma 提供数据驱动的优化框架
- Human-Centered-Design 提供人本视角的优化方向
- 两者结合:优化的指标必须与人的真实需求对齐
## Connections
- [[testing-workflow-optimizer]] — 流程优化中的人本设计约束
- [[Cognitive-Load-Reduction]] — 人本设计的核心子维度
- [[Lean]] — 互补:量化优化 + 人本方向
- [[Design-Thinking]] — 人本设计的系统性方法论框架

55
wiki/concepts/Kaizen.md Normal file
View File

@@ -0,0 +1,55 @@
---
title: "Kaizen"
type: concept
tags: [Continuous-Improvement, Lean, Process-Improvement]
sources: [testing-workflow-optimizer, devops-culture-and-transformation-fostering-collaboration-agile-practices-and-innovation-linkedin, AgilePractices]
last_updated: 2026-04-21
---
# Kaizen
改善Kaizen——日语"継続的改善"(持续改进)的音译,是一种以员工为核心、小步快跑、渐进式的持续改进哲学。核心理念:所有流程都有改进空间,每次改进即使微小,累积效果也十分显著。
## Aliases
- 改善
- 持续改进Continuous Improvement
- 渐进式改进
## Origin
源自丰田生产系统TPS由日本管理大师今井正明Masaaki Imai在 1986 年《Kaizen》一书中向西方推广。
## Core Principles
1. **Process Focus**(过程导向)——好的结果来自好的过程,聚焦过程改进而非单纯追求结果
2. **Everyone Involved**(全员参与)——从 CEO 到一线员工,每个人都是改进的推动者
3. **Small Improvements**(小步改进)——大幅改进往往由无数小改进累积而成
4. **Discipline**(纪律性)——坚持不懈,持续执行
5. **Eliminate Waste**(消除浪费)——持续识别和消除 Mudas浪费
## Key Practices
- **改善活动Kaizen Event**短周期1-5天跨职能团队聚焦单一流程的密集改进
- **PDCA Cycle**(戴明环):
- **Plan**:计划改进
- **Do**:执行改进
- **Check**:检查结果
- **Act**:标准化或重新改进
- **5S**整理Sort/整顿Set in Order/清扫Shine/清洁Standardize/素养Sustain
- **无责归因No-Blame Culture**——改进系统而非惩罚个人
- **Gemba Walk**(现场走动)——管理者到实际工作现场观察和改进
## Kaizen vs Six-Sigma
| 维度 | Kaizen | Six-Sigma |
|------|--------|-----------|
| 节奏 | 渐进式,持续小改 | 阶段性DMAIC 大改 |
| 方法 | 定性为主,全员参与 | 定量为主,专家主导 |
| 目标 | 消除浪费,流动改善 | 减少变异,接近目标值 |
| 适用场景 | 文化变革,持续改进 | 复杂问题,系统优化 |
两者互补Kaizen 营造持续改进文化Six-Sigma 解决深层复杂问题。
## In DevOps Context
DevOps 文化的四大支柱之一Continuous Improvement (Kaizen)。实现方式无责复盘blameless post-mortems、metrics驱动的瓶颈识别、混沌工程。
## Connections
- [[Lean]] — 共享消除浪费的核心价值观
- [[Six-Sigma]] — 互补:渐进 vs 阶段
- [[DevOpsCulture]] — DevOps 文化四大支柱之一

51
wiki/concepts/Lean.md Normal file
View File

@@ -0,0 +1,51 @@
---
title: "Lean"
type: concept
tags: [Process-Improvement, Six-Sigma, Workflow-Optimization]
sources: [testing-workflow-optimizer]
last_updated: 2026-04-21
---
# Lean
精益制造/精益管理方法论源于丰田生产系统TPS核心目标是通过消除一切形式的浪费Muda最大化客户价值。
## Aliases
- Lean Manufacturing
- 精益生产
- 丰田生产系统TPS
## Definition
Lean 通过识别和消除非增值活动NVA将价值流中的等待时间、搬运浪费、过度加工、库存过剩、不必要的移动、缺陷返工和过度生产降至最低。
## Key Principles
1. **价值Value**:从客户视角定义——客户愿意付费的转化活动
2. **价值流Value Stream**识别从原材料到交付的所有步骤区分增值VA/价值赋能VEA/浪费NVA
3. **流动Flow**:使增值步骤持续、不中断地运行
4. **拉动Pull**:按客户实际需求而非预测来生产
5. **完美Perfection**:持续追求零浪费状态
## Three Types of Activities
| 类别 | 说明 | 示例 |
|------|------|------|
| 增值活动VA | 客户愿意付费的转化 | 加工零件、填写表格 |
| 价值赋能活动VEA | 不直接增值但必需的支撑活动 | 质量检查、设备维护 |
| 浪费NVA/Muda | 消耗资源但不创造客户价值的活动 | 等待、搬运、返工 |
## Seven Types of Waste (TIMWOODS)
- **T**ransport搬运
- **I**nventory库存
- **M**otion动作
- **W**aiting等待
- **O**verproduction过量生产
- **O**ver-processing过度加工
- **S**kills underutilization技能浪费
- **D**efects缺陷/返工)
## Connection to Six-Sigma
Lean 关注速度消除浪费Six-Sigma 关注质量(减少变异)。两者的融合称为 **Lean Six-Sigma**,同时优化速度和精度。
## Connections
- [[Six-Sigma]] — 融合伙伴,速度+质量双优化
- [[Kaizen]] — 互补Kaizen 小步快跑Lean 系统重构
- [[Value-Stream-Mapping]] — 识别浪费的可视化工具

View File

@@ -0,0 +1,61 @@
---
title: "Six-Sigma"
type: concept
tags: [Process-Improvement, Statistical-Quality-Control, Lean]
sources: [testing-workflow-optimizer]
last_updated: 2026-04-21
---
# Six-Sigma
六西格玛方法论,由摩托罗拉在 1986 年创立通过统计分析减少流程变异和缺陷目标将每百万机会的缺陷数DPMO降低至 3.4 以下(即六西格玛水平)。
## Aliases
- Six Sigma
- 6σ
## Core Goal
**3.4 DPMO**Defects Per Million Opportunities——在考虑 1.5σ 漂移的情况下,六西格玛水平对应 99.99966% 的无缺陷率。
## Two Core Methodologies
### DMAIC用于改进现有流程
1. **Define**(定义)——识别问题,确定项目范围和目标
2. **Measure**(测量)——收集当前状态数据,建立基准
3. **Analyze**(分析)——识别变异根本原因
4. **Improve**(改进)——设计并实施解决方案
5. **Control**(控制)——建立控制机制维持改进成果
### DMADV / DFSS用于设计新流程
1. **Define**(定义)——识别需求和项目目标
2. **Measure**(测量)——测量 CTQ关键质量特性和风险
3. **Analyze**(分析)——设计方案评估
4. **Design**(设计)——详细设计
5. **Verify**(验证)——验证设计满足需求
## Belt System人员资格体系
| 等级 | 职责 |
|------|------|
| White Belt | 基础概念理解,参与改进项目 |
| Yellow Belt | 团队成员,理解 DMAIC能使用基本工具 |
| Green Belt | 项目领导者60%+ 时间投入改进项目,精通统计分析 |
| Black Belt | 专家领导者100% 投入,精通高级统计分析,培训 Green Belt |
| Master Black Belt | 战略级,培训和指导 Black Belt组织方法论推广 |
## Key Metrics
- **DPMO**Defects Per Million Opportunities每百万机会中的缺陷数
- **Sigma Level**流程能力等级1σ ≈ 690,000 DPMO → 6σ ≈ 3.4 DPMO
- **Process Capability (Cp/Cpk)**:衡量流程满足规格的能力
- **Cost of Poor Quality (COPQ)**:质量不良成本
## Connection to Lean
- Lean 关注消除浪费速度Six-Sigma 关注减少变异(质量)
- **Lean Six-Sigma**:两者融合,同时优化速度和精度,是 [[testing-workflow-optimizer]] 的核心方法论之一
## Relationship to Statistical-Process-Control
Six-Sigma 的 Analyze 和 Control 阶段大量依赖统计过程控制SPC工具控制图、过程能力分析、假设检验
## Connections
- [[Lean]] — 融合伙伴,速度+质量双优化
- [[Statistical-Process-Control]] — Six-Sigma 的统计分析基础
- [[Kaizen]] — 互补DMAIC 系统性改进 + Kaizen 渐进式持续改进

View File

@@ -0,0 +1,58 @@
---
title: "Statistical-Process-Control"
type: concept
tags: [Six-Sigma, Quality-Control, Data-Driven-Decision]
sources: [testing-workflow-optimizer]
last_updated: 2026-04-21
---
# Statistical-Process-Control
统计过程控制SPC——使用统计方法主要是控制图监控过程稳定性区分常见原因变异和特殊原因变异使过程可控、可预测并支持基于数据的持续改进决策。
## Aliases
- SPC
- 统计过程控制
- Statistical Quality Control (SQC)
## Core Concept: Variation
所有过程都存在变异SPC 的核心是区分两类变异来源:
| 变异类型 | 英文 | 来源 | 特征 | 处置 |
|----------|------|------|------|------|
| 常见原因变异 | Common Cause | 过程内在的正常随机波动 | 稳定、可预测 | 通过过程改进系统性减少 |
| 特殊原因变异 | Special Cause | 特定外部因素导致 | 不稳定、不可预测 | 识别并消除根本原因 |
**Gerald M. Weinberg 第一定律**:即使是最简单的系统,只要测量足够精确,就能观察到随机涨落;因此,变异永远存在,区分其来源是关键。
## Control Charts控制图
SPC 的核心工具通过建立控制上限UCL和控制下限LCL监控过程是否处于统计控制状态。
### Common Types
- **X̄-R Chart**(均值-极差图):监控连续数据的均值和变异
- **X̄-S Chart**(均值-标准差图大样本n>10场景
- **p Chart**(比率图):监控不合格率等比例数据
- **c Chart**(计数图):监控缺陷数
### Interpretation RulesWestern Electric Rules
- 1 点超出 UCL/LCL → 特殊原因,可能失控
- 连续 9 点在中心线同一侧 → 过程漂移
- 连续 6 点递增或递减 → 趋势
- 连续 14 点交替上下 → 系统性周期变异
## SPC in Six-Sigma
SPC 是 [[Six-Sigma]] DMAIC 中 Analyze 和 Control 阶段的核心工具:
- **Measure**:建立过程基线和控制图
- **Analyze**:识别特殊原因变异
- **Control**:维持改进后的稳定过程
## In Workflow Optimization
[[testing-workflow-optimizer]] 将 SPC 整合到四阶段工作流:
- **现状分析**:使用控制图建立基线性能
- **优化验证**:改进后通过 SPC 确认过程稳定性
- **持续监控**:自动化监控异常信号
## Connections
- [[Six-Sigma]] — SPC 是 Six-Sigma 的核心工具
- [[Lean]] — SPC 支撑 Lean 的数据驱动决策
- [[Kaizen]] — SPC 发现的问题通过 Kaizen 活动改进

View File

@@ -0,0 +1,52 @@
---
title: "Value-Stream-Mapping"
type: concept
tags: [Lean, Process-Improvement, Workflow-Optimization]
sources: [testing-workflow-optimizer, AgilePractices, devops-culture-and-transformation-fostering-collaboration-agile-practices-and-innovation-linkedin]
last_updated: 2026-04-21
---
# Value-Stream-Mapping
价值流映射VSM——一种精益可视化工具用于绘制和分析产品或服务从原材料到交付客户的全流程中的所有步骤区分增值时间与非增值等待时间从而识别改进机会。
## Aliases
- VSM
- Value Stream Map
- 价值流图
## Purpose
将流程中的每个步骤按两大类时间进行量化:
- **增值时间Value-Adding Time, VA Time**:客户愿意付费的实际转化时间
- **非增值时间Non-Value-Adding Time, NVA Time**:等待、移动、搬运、检查等不创造客户价值的时间
## Standard VSM Symbols
| 符号 | 含义 |
|------|------|
| 矩形Process Box | 工序/步骤 |
| 三角形Triangle Inventory | 库存/在制品 |
| 推Push Arrow | 推式生产信号 |
| 客户/供应商框 | 流程的输入和输出 |
| 看板Kaizen Burst | 改进机会点 |
| 看板Kaizen Event | 改善活动标识 |
## Time Line时间线
VSM 底部时间线计算:
- **总生产时间Total Lead Time, L/T**:从开始到完成的日历时间
- **增值时间Value-Added Time, VA**:实际加工时间
- **增值比VA Ratio**VA / L/T × 100%,典型值 5-10%,说明大量时间在等待
## In DevOps Context
价值流映射用于 DevOps 工作流优化:
- **运营价值流OVS, Operational Value Stream**:面向客户的持续交付
- **开发价值流DVS, Development Value Stream**:内部产品开发过程
典型 DevOps VSM 分析结果:发现问题等待时间占 90%+,实际编码/构建/测试仅占 10%
## Connection to Lean
价值流映射是 [[Lean]] 的核心工具,用于识别 TIMWOODS 七类浪费的具体位置。
## Connections
- [[Lean]] — 核心分析工具
- [[AgilePractices]] — Agile/DevOps 流程优化的核心工具
- [[Kaizen]] — VSM 发现的问题通过 Kaizen 活动改进

View File

@@ -4,6 +4,10 @@
- [Overview](overview.md) — living synthesis
## Sources
- [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] [Workflow Optimizer Agent Personality](sources/testing-workflow-optimizer.md)
- [2026-04-25] [API Tester Agent Personality](sources/testing-api-tester.md)
- [2026-04-25] [OpenCode Integration](sources/readme.md)
- [2026-04-25] [OpenCode Integration](sources/readme.md)
- [2026-04-25] [OpenCode Integration](sources/readme.md)
@@ -415,10 +419,6 @@
- [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-test-results-analyzer](sources/testing-test-results-analyzer.md) — (expected: wiki/sources/testing-test-results-analyzer.md — source missing)
- [2026-04-21] [testing-performance-benchmarker](sources/testing-performance-benchmarker.md) — (expected: wiki/sources/testing-performance-benchmarker.md — source missing)
- [2026-04-21] [testing-reality-checker](sources/testing-reality-checker.md) — (expected: wiki/sources/testing-reality-checker.md — source missing)
- [2026-04-21] [testing-workflow-optimizer](sources/testing-workflow-optimizer.md) — (expected: wiki/sources/testing-workflow-optimizer.md — source missing)
- [2026-04-21] [testing-api-tester](sources/testing-api-tester.md) — (expected: wiki/sources/testing-api-tester.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] [baoyu-skills](sources/baoyu-skills.md) — (expected: wiki/sources/baoyu-skills.md — source missing)
@@ -988,6 +988,7 @@
- [Dependency-Management](concepts/Dependency-Management.md)
- [Deployment-Automation](concepts/Deployment-Automation.md)
- [Deployment-vs-Release](concepts/Deployment-vs-Release.md)
- [Design-Thinking](concepts/Design-Thinking.md)
- [Design-to-Code-Workflow](concepts/Design-to-Code-Workflow.md)
- [DevOps-Maturity](concepts/DevOps-Maturity.md)
- [DevOpsCulture](concepts/DevOpsCulture.md)
@@ -1083,6 +1084,7 @@
- [Hosmer-Lemeshow-Test](concepts/Hosmer-Lemeshow-Test.md)
- [HouseholdInventoryTracking](concepts/HouseholdInventoryTracking.md)
- [HTTPS自动化证书](concepts/HTTPS自动化证书.md)
- [Human-Centered-Design](concepts/Human-Centered-Design.md)
- [Human-Handoff](concepts/Human-Handoff.md)
- [Hybrid-Cloud](concepts/Hybrid-Cloud.md)
- [Hybrid-Search](concepts/Hybrid-Search.md)
@@ -1118,6 +1120,7 @@
- [JFFS双清](concepts/JFFS双清.md)
- [Jira-Gate](concepts/Jira-Gate.md)
- [Jira-Git-Traceability](concepts/Jira-Git-Traceability.md)
- [Kaizen](concepts/Kaizen.md)
- [Kanban](concepts/Kanban.md)
- [Karpman-Drama-Triangle](concepts/Karpman-Drama-Triangle.md)
- [Keyword-Based-Monitoring](concepts/Keyword-Based-Monitoring.md)
@@ -1137,6 +1140,7 @@
- [launchd](concepts/launchd.md)
- [Layered-Configuration](concepts/Layered-Configuration.md)
- [Lead-Time](concepts/Lead-Time.md)
- [Lean](concepts/Lean.md)
- [Learn-By-Building](concepts/Learn-By-Building.md)
- [Left-over-Principle](concepts/Left-over-Principle.md)
- [Link-Proposer](concepts/Link-Proposer.md)
@@ -1319,6 +1323,7 @@
- [Shift-Right-Security](concepts/Shift-Right-Security.md)
- [Signal-Based-Selling-Framework](concepts/Signal-Based-Selling-Framework.md)
- [Single-Control-Plane](concepts/Single-Control-Plane.md)
- [Six-Sigma](concepts/Six-Sigma.md)
- [SKAdNetwork](concepts/SKAdNetwork.md)
- [SLS](concepts/SLS.md)
- [SmartBidding](concepts/SmartBidding.md)
@@ -1341,6 +1346,7 @@
- [Standard-Change](concepts/Standard-Change.md)
- [STARFramework](concepts/STARFramework.md)
- [Startup-MVP-Pipeline](concepts/Startup-MVP-Pipeline.md)
- [Statistical-Process-Control](concepts/Statistical-Process-Control.md)
- [Strategic-Portfolio-Management](concepts/Strategic-Portfolio-Management.md)
- [Streak-Tracking](concepts/Streak-Tracking.md)
- [Stretched-Cluster](concepts/Stretched-Cluster.md)
@@ -1391,6 +1397,7 @@
- [ULS](concepts/ULS.md)
- [Unified-Inbox](concepts/Unified-Inbox.md)
- [USER.md](concepts/USER.md.md)
- [Value-Stream-Mapping](concepts/Value-Stream-Mapping.md)
- [Variables-YAML](concepts/Variables-YAML.md)
- [Vector-Embedding](concepts/Vector-Embedding.md)
- [Vendor-Lock-In](concepts/Vendor-Lock-In.md)

View File

@@ -1,4 +1,38 @@
## [2026-05-05] ingest | OpenCode Integration
## [2026-05-05] ingest | Performance Benchmarker Agent Personality
- Source file: Agent/agency-agents/testing/testing-performance-benchmarker.md
- Status: ✅ 成功摄入
- Summary: Performance Benchmarker——The Agency Testing 部门的性能测试与优化专家 Agent通过系统性性能测试确保系统以 95% 置信度满足 SLA 要求。核心理念:量化一切可量化的,用数据证明优化价值。核心能力:负载/压力/耐力/可扩展性测试Core Web Vitals 优化LCP < 2.5s / FID < 100ms / CLS < 0.1k6 性能测试框架,统计置信区间分析,容量规划与成本-性能权衡。成功指标95% 系统持续满足性能 SLACore Web Vitals 达到"良好"评级90th percentile关键用户体验指标改善 25%,支持 10x 当前负载。
- Concepts created: 无(所有 Key Concepts 均为单来源特定概念,不满足独立复用阈值)
- Entities created: 无(所有 Key Entities 均为单来源 Agent不满足 ≥2 次创建阈值)
- Source page: wiki/sources/testing-performance-benchmarker.md
- Notes: 无内容冲突。index.md 原占位条目已替换为完整摘要overview.md Testing 部门已新增 testing-performance-benchmarker 段落。与 testing-reality-checker 的互补张力(指标量化 vs 用户感受)已在 Source Page Contradictions 节记录。
## [2026-05-05] ingest | Testing Reality Checker Agent Personality
- Source file: Agent/agency-agents/testing/testing-reality-checker.md
- Status: ✅ 成功摄入
- Summary: Testing Reality Checker——The Agency Testing 部门的最后一道防线 Agent通过自动化截图证据截断"幻想型认证",要求压倒性视觉证明才授予生产就绪状态。默认"NEEDS WORK"强制三步验证流程Reality Check 命令 → QA 交叉验证 → 端到端截图分析。C+/B- 评级属正常;第一次实现通常需要 2-3 轮修订。
- Concepts created: 无(所有 Key Concepts 均为单来源特定概念,不满足独立复用阈值)
- Entities created: 无(所有 Key Entities 均为单来源 Agent不满足 ≥2 次创建阈值)
- Source page: wiki/sources/testing-reality-checker.md
- Notes: 无内容冲突。index.md 原占位条目已替换为完整摘要overview.md Testing 部门已新增 testing-reality-checker 段落。与 testing-workflow-optimizer 的潜在张力(效率 vs 真实性)和与 testing-api-tester 的互补关系(截图 vs 接口)已在 Source Page Contradictions 节记录。
## [2026-05-05] ingest | Workflow Optimizer Agent Personality
- Source file: Agent/agency-agents/testing/testing-workflow-optimizer.md
- Status: ✅ 成功摄入
- Summary: Workflow Optimizer——The Agency Testing 部门的流程优化与工作流自动化专家 Agent基于系统思维方法论分析、优化和自动化跨业务功能的工作流。核心理念找到瓶颈修复流程其余自动化。四阶段工作流现状分析→优化设计→实施规划→自动化执行融合 Lean/Six Sigma/Kaizen/统计过程控制/变更管理/人本设计六大方法论体系。核心交付物WorkflowOptimizer Python 框架。成功指标40% 周期时间改善、60% 常规任务自动化率、75% 流程错误减少、90% 优化流程 6 个月内成功采纳、30% 员工满意度提升。
- Concepts created: [[Lean]], [[Six-Sigma]], [[Kaizen]], [[Value-Stream-Mapping]], [[Statistical-Process-Control]], [[Human-Centered-Design]], [[Design-Thinking]](共 7 个,其中 Change-Management 已存在)
- Entities created: 无The Agency 已在 entities/ 中存在;各工具仅出现 1 次,不满足 ≥2 次创建阈值)
- Source page: wiki/sources/testing-workflow-optimizer.md
- Notes: 无内容冲突。index.md 原占位条目已替换为完整摘要overview.md Testing 部门已新增 testing-workflow-optimizer 段落7 个新 Concept 页面已创建并添加到 index.md。与 specialized-workflow-architect设计与执行的分层关系和 product-behavioral-nudge-engine自动化 vs 人机交互互补张力)已在 Source Page Contradictions 节记录。
## [2026-05-05] ingest | API Tester Agent Personality
- Source file: Agent/agency-agents/testing/testing-api-tester.md
- Status: ✅ 成功摄入
- Summary: API Tester Agent——The Agency Testing 部门的 API 测试专家智能体人格定义,涵盖功能、性能、安全三大维度的全面 API 质量保障方法论与自动化实现框架。核心理念"Breaks your API before your users do",通过 Playwright/REST Assured/k6 框架实现 95%+ API 端点覆盖率CI/CD 流水线集成,性能 SLA95p < 200ms、10x 负载、< 0.1% 错误率OWASP API Security Top 10 安全验证。
- Concepts created: 无API Testing、Performance Testing、Security Testing、Contract Testing、CI/CD Integration、OWASP API Security Top 10 等概念均已在本文档出现,未达独立创建阈值)
- Entities created: 无Playwright、REST Assured、k6、perf_hooks 等工具均仅在本文档出现,未达创建阈值)
- Source page: wiki/sources/testing-api-tester.md
- Notes: 无内容冲突。index.md 和 overview.md 已更新。新增 Testing 部门 section 到 overview.md。
- Source file: Agent/agency-agents/integrations/opencode/README.md
- Status: ✅ 成功摄入
- Summary: OpenCode Integration——The Agency Agent roster 与 OpenCode 编辑器的子 Agent 集成方案,通过 `./scripts/install.sh --tool opencode` 安装,将 .md 格式 Agent 转换为 OpenCode 的 `.opencode/agents/` 格式。核心机制:`mode: subagent` 使 Agent 仅在 `@agent-name` 触发时出现,不在 Tab 循环中占位;命名颜色自动映射为十六进制颜色代码。支持项目级和全局级两种安装范围。与 [[readme|Cursor Integration]].mdc、[[github-copilot|GitHub Copilot Integration]]、[[windsurf-integration|Windsurf Integration]] 同属 The Agency 多 IDE 集成生态。

View File

@@ -92,6 +92,17 @@ The wiki covers two major multi-agent frameworks: **The Agency** (agency-agents)
**[[Project-Management-Experiment-Tracker]]**Experiment Tracker实验追踪与数据驱动决策专家 Agent——The Agency 项目管理部门的实验管理专家 Agent专注于 A/B 测试、功能实验和假设验证的科学化管理。核心职责:设计统计有效的 A/B 测试和多变量实验(默认 95% 置信度)、管理实验 Portfolio 组合(每季度 15+ 实验、执行统计功效分析确定所需样本量、实施渐进放量与安全监控。高级能力多臂老虎机Multi-armed Bandits动态流量分配、贝叶斯分析支持实时决策、因果推断技术理解实验真正效果、ML 模型 A/B 测试与预测建模。典型交付物:实验设计文档模板(假设/设计/风险评估/实施计划)、实验结果报告模板(统计结果/置信区间/业务影响/决策建议。成功指标95% 实验达统计显著性、70% 实验成功率、80% 成功实验实现落地。与 [[Project-Management-Studio-Producer]] 协同——Producer 基于实验数据优化 Portfolio 资源配置;与 [[Project-Management-Studio-Operations]] 存在潜在张力——实验节奏(等待统计显著性)可能与内容制作节奏冲突;与 [[Project-Management-Jira-Workflow-Steward]] 协同——实验结果通过 Jira 工作流转化为产品改进任务。属 Agency 项目管理体系中的实验验证层级,补充了从战略规划→任务分解→实验验证→流程治理的完整闭环。
### The Agency — Testing 部门
|The Agency 的 Testing 部门涵盖 API 测试、可访问性审计、工具评估、证据收集、结果分析、性能基准、真实性检验、工作流优化等专业测试 Agent覆盖从功能到安全到性能的全方位质量保障。|
**[[testing-api-tester]]**API TesterAPI 测试与验证专家 Agent——The Agency Testing 部门的核心 API 质量保障专家,专注于全面的 API 功能验证、性能测试和安全审计。核心理念:**Breaks your API before your users do**——防御性测试哲学主动发现潜在问题。核心能力Playwright/REST Assured/k6 自动化测试框架、95%+ API 端点覆盖率目标、CI/CD 流水线集成。性能 SLA95 百分位响应时间 < 200ms、10x 正常负载验证、错误率 < 0.1%。安全测试覆盖 OWASP API Security Top 10认证绕过/SQL 注入/XSS/速率限制等)。与 [[specialized-model-qa]] 互补——后者测试 ML 模型质量,前者测试 API 端点行为;与 [[multi-agent-system-reliability]] 协同——系统可靠性依赖 API 质量验证。
**[[testing-workflow-optimizer]]**Workflow Optimizer流程优化与工作流自动化专家 Agent——The Agency Testing 部门的核心流程改进专家,基于系统思维方法论分析、优化和自动化跨业务功能的工作流。核心理念:**找到瓶颈,修复流程,其余自动化**。核心方法:四阶段工作流(现状分析与文档化→优化设计与未来状态规划→实施规划与变更管理→自动化实现与监控)+ 数据驱动决策框架测量→验证→文档化。方法论融合Lean消除浪费/Six SigmaDMAIC 减少变异)/Kaizen持续改进/统计过程控制。人本设计原则在追求效率的同时平衡员工满意度与认知负荷在自动化效率与人类判断创造力之间取得平衡。核心交付物WorkflowOptimizer Python 框架(含瓶颈识别/自动化潜力评估/ROI 计算/实施路线图生成。成功指标40% 平均周期时间改善、60% 常规任务自动化率、75% 流程相关错误减少、90% 优化流程 6 个月内成功采纳、30% 员工满意度提升。与 [[specialized-workflow-architect]] 互补——后者负责工作流设计建模(穷举路径/状态树),前者负责工作流实施改进(量化效率收益/自动化 ROI属于设计与执行的分层关系。与 [[product-behavioral-nudge-engine]] 在自动化 vs 人机交互上存在互补张力Workflow Optimizer 追求最大化自动化Nudge Engine 追求最大化员工参与,两者共同构成效率与人本的双轮驱动。
**[[testing-reality-checker]]**Reality Checker截图驱动型生产就绪认证 Agent——The Agency Testing 部门的最后一道防线 Agent通过自动化截图证据截断"幻想型认证",要求压倒性视觉证明才授予生产就绪状态。核心理念:**默认"NEEDS WORK",以截图证据截断虚假乐观评估**。核心方法三步强制流程Reality Check 命令验证实际构建 → QA 交叉验证自动化证据 → 端到端截图分析用户旅程)+ 硬性失败触发器(完美评分/无证据声明/声称奢华但实为基础实现/规格未落地。默认状态NEEDS WORKC+/B- 评级属正常;第一次实现通常需要 2-3 轮修订。与 [[testing-workflow-optimizer]] 存在张力Optimizer 追求效率(目标 60% 自动化率Reality Checker 追求真实性(要求每轮修订充分证据),在修订周期数量上可能存在分歧;与 [[testing-api-tester]] 互补——API Tester 提供后端接口测试证据Reality Checker 要求端到端截图,两者共同构成前后端双重质量门控。与 [[Agents-Orchestrator]] 协同——作为多智能体流水线的最终质量门控。
**[[testing-performance-benchmarker]]**Performance Benchmarker性能测试与优化专家 Agent——The Agency Testing 部门的性能工程专家,通过系统性性能测试确保系统以 95% 置信度满足 SLA 要求。核心理念:**量化一切可量化的,用数据证明优化价值**。核心能力:负载/压力/耐力/可扩展性测试Core Web Vitals 优化LCP < 2.5s / FID < 100ms / CLS < 0.1k6 性能测试框架,统计置信区间分析,容量规划与成本-性能权衡。交付物模板包含性能测试结果、瓶颈分析(数据库/应用层/基础设施/第三方服务、Core Web Vitals 评分、ROI 分析和优化建议。成功指标95% 系统持续满足性能 SLACore Web Vitals 达到"良好"评级90th percentile关键用户体验指标改善 25%,支持 10x 当前负载。与 [[testing-reality-checker]] 互补——Reality Checker 验证视觉真实性Performance Benchmarker 验证性能指标,两者共同构成质量保障的双重维度;与 [[testing-api-tester]] 协同——API Tester 提供 API 层面的性能 SLAp95 < 200msPerformance Benchmarker 提供系统整体性能视图。
### The Agency — Paid Media 部门
The Agency 的 Paid Media 部门专注于企业级付费媒体策略与运营,涵盖 Google Ads、Microsoft Advertising、Amazon Ads 三大核心平台。

View File

@@ -0,0 +1,52 @@
---
title: "API Tester Agent Personality"
type: source
tags: ["the-agency", "testing", "api", "automation", "qa", "performance", "security"]
date: 2026-04-25
---
## Source File
- [[Agent/agency-agents/testing/testing-api-tester.md]]
## Summary用中文描述
- 核心主题The Agency Testing 部门的 API 测试专家智能体人格定义,涵盖功能、性能、安全三大维度的全面 API 质量保障方法论与自动化实现框架
- 问题域API 质量保障缺乏系统性方法论、测试覆盖不足、安全漏洞遗漏、性能 SLA 不达标等现实问题
- 方法/机制Playwright 测试框架 + perf_hooks 性能监控 + OWASP API Security Top 10 安全验证 + CI/CD 流水线集成 + 95%+ 覆盖率目标驱动
- 结论/价值:为 The Agency 提供标准化的 API 测试智能体规范,通过自动化测试套件实现功能验证、性能基准、安全审计的三位一体质量保障
## Key Claims用中文描述
- API Tester Agent 通过 Playwright/REST Assured/k6 框架构建自动化测试套件,目标实现 95%+ API 端点覆盖率
- API 性能 SLA 要求95 百分位响应时间低于 200ms正常负载下错误率低于 0.1%
- 负载测试必须验证 10 倍正常流量容量,确保系统可扩展性
- 安全测试覆盖 OWASP API Security Top 10包含认证绕过、SQL 注入、XSS、速率限制等关键威胁
- API 测试必须集成到 CI/CD 流水线,实现持续验证而非手动测试
## Key Quotes
> "Breaks your API before your users do." — API Tester Agent 的核心理念,防御性测试哲学
> "API response times must be under 200ms for 95th percentile" — 明确的性能 SLA 标准
> "Always test authentication and authorization mechanisms thoroughly" — 安全优先原则
> "Load testing must validate 10x normal traffic capacity" — 规模化验证要求
## Key Concepts
- [[API Testing]]:覆盖功能、性能、安全三维度,通过自动化测试框架验证 API 端点行为与 SLA 合规性
- [[Performance Testing]]:通过 perf_hooks 监控响应时间,验证 95 百分位 < 200ms、10x 负载、< 0.1% 错误率三大指标
- [[Security Testing]]OWASP API Security Top 10 安全测试框架,包含认证/授权/输入验证/速率限制等核心检查项
- [[Contract Testing]]API 版本间契约合规性与向后兼容性验证,确保服务间接口稳定性
- [[CI/CD Integration]]:测试自动化嵌入持续集成/持续部署流水线,实现每次代码变更的自动质量验证
- [[OWASP API Security Top 10]]API 安全测试的行业标准清单,覆盖 BOLA/ BFLA/ Broken Auth 等关键 API 威胁
## Key Entities
- [[Playwright]]Node.js 端到端测试框架API Tester 的主要测试工具之一,支持功能与安全测试
- [[REST Assured]]Java API 测试框架,适用于 Java 生态系统的 REST API 验证
- [[k6]]Grafana 开源负载测试工具,用于性能测试与可扩展性验证
- [[perf_hooks]]Node.js 内置性能监测 API用于精确的 API 响应时间测量
## Connections
- [[specialized-model-qa]] ← 测试范围互补 ← [[testing-api-tester]](模型质量测试 vs API 端点测试)
- [[testing-accessibility-auditor]] ← 质量保障并行 ← [[testing-api-tester]](可访问性测试 vs API 功能/性能/安全测试)
- [[testing-tool-evaluator]] ← 工具推荐上游 ← [[testing-api-tester]](工具评估为测试实施提供框架选择)
- [[specialized-mcp-builder]] ← 技术栈关联 ← [[testing-api-tester]]MCP 服务器构建需要 API 测试能力保障)
- [[multi-agent-system-reliability]] ← 质量保障基础 ← [[testing-api-tester]](系统可靠性依赖 API 质量验证)
## Contradictions
- 暂无冲突内容

View File

@@ -0,0 +1,53 @@
---
title: "Performance Benchmarker Agent Personality"
type: source
tags: []
date: 2026-04-21
---
## Source File
- [[Agent/agency-agents/testing/testing-performance-benchmarker.md]]
## Summary用中文描述
- 核心主题:性能测试与优化专家 Agent专注于测量、分析和改进跨应用程序和基础设施的系统性能
- 问题域:性能基线建立、负载/压力测试、Web Vitals 优化、容量规划、可扩展性评估
- 方法/机制:使用 k6 编写综合性能测试套件统计置信区间分析Core Web Vitals 监控,性能回归测试
- 结论/价值:数据驱动的方法论,通过量化指标证明性能改进,确保系统满足 SLA 要求
## Key Claims用中文描述
- Performance Benchmarker Agent 通过系统性性能测试确保所有系统以 95% 置信度满足性能 SLA
- 通过 Core Web Vitals 优化LLC < 2.5s、FID < 100ms、CLS < 0.1)提升用户体验
- 通过查询优化可将第95百分位响应时间从 850ms 降至 180ms
- 通过性能监控可预防 90% 的性能相关事故
## Key Quotes
> "95th percentile response time improved from 850ms to 180ms through query optimization" — 数据驱动的优化效果量化
> "Page load time reduction of 2.3 seconds increases conversion rate by 15%" — 性能与业务影响关联
> "Always establish baseline performance before optimization attempts" — 性能优化的首要原则
## Key Concepts
- [[LoadTesting]]:模拟正常和峰值负载,验证系统在预期条件下的性能表现
- [[StressTesting]]:逐步增加负载直到系统崩溃,找出性能临界点和恢复行为
- [[CoreWebVitals]]Google 定义的页面用户体验核心指标LCP、FID、CLS
- [[RealUserMonitoring]]:基于真实用户数据的性能监控,对抗合成测试的局限性
- [[CapacityPlanning]]:基于增长预测和使用模式预测资源需求
- [[ConfidenceIntervals]]:统计置信区间用于可靠的性能测量
## Key Entities
- [[TestingRealityChecker]]:测试现实核查 Agent与 Performance Benchmarker 协同工作
- [[TestingApiTester]]API 测试专家 Agent共同构成全面测试体系
- [[WorkflowOptimizerAgent]]:工作流优化 Agent通过性能优化提升工作流效率
## Connections
- [[TestingRealityChecker]] ← complements ← [[TestingPerformanceBenchmarker]]
- [[TestingApiTester]] ← extends ← [[TestingPerformanceBenchmarker]]
- [[WorkflowOptimizerAgent]] ← depends_on ← [[TestingPerformanceBenchmarker]]
## Contradictions
- 与 [[TestingRealityChecker]] 的视角差异:
- 冲突点Reality Checker 强调"真实用户感受"Performance Benchmarker 强调"量化指标"
- 当前观点量化指标p95 < 500ms是性能优化的客观标准
- 对方观点:用户主观感受比指标更重要,指标可能具有欺骗性
- 调和:两者互补——指标指导优化方向,用户体验验证优化效果

View File

@@ -0,0 +1,52 @@
---
title: "Testing Reality Checker"
type: source
tags: []
date: 2026-04-21
---
## Source File
- [[Agent/agency-agents/testing/testing-reality-checker.md]]
## Summary用中文描述
- 核心主题The Agency Testing 部门的 Reality Checker Agent——通过自动化截图证据截断"幻想型认证",要求压倒性视觉证明才授予生产就绪状态。
- 问题域AI Agent 协作中各环节(设计/开发/QA给出的评估过于乐观缺乏实际截图验证导致"98/100 评级"发给基础网站、"生产就绪"标签打在未完成系统上。
- 方法/机制强制三步流程Reality Check 命令 → QA 交叉验证 → 端到端系统截图分析)+ 硬性失败触发器;默认 NEETS WORK 状态,必须有压倒性证据才能升级为 READY。
- 结论/价值:第一次实现通常需要 2-3 轮修订C+/B- 评级属正常;只有真实截图证据才能支撑"生产就绪"声明。
## Key Claims用中文描述
- Testing Reality Checker Agent 作为最后一道防线,通过截图证据截断"幻想型认证",要求压倒性视觉证明。
- 所有系统声明需要视觉证明(自动化截图),规格说明需要对照实际实现进行交叉验证。
- 完整的用户旅程测试需要截图证据;性能数据(加载时间、错误率)必须来自 test-results.json。
- 默认"NEEDS WORK"状态,除非有压倒性证据支持"READY"。
## Key Quotes
> "You're the last line of defense against unrealistic assessments" — Testing Reality Checker Agent 自我定位
> "Default to 'NEEDS WORK' status unless proven otherwise" — 核心认证原则
> "First implementations typically need 2-3 revision cycles, C+/B- ratings are normal" — 现实质量预期
> "Trust evidence over claims" — 质量认证核心方法论
## Key Concepts
- [[End-to-End Testing]]:完整用户旅程截图分析(桌面/平板/手机 × 交互前/后对比)
- [[Evidence-Based Certification]]:以自动化截图 + test-results.json 数据为唯一认证依据
- [[Specification Compliance]]原始规格与实际实现之间的差距分析gap analysis
- [[Quality Gate]]:生产就绪认证门槛——默认"NEEDS WORK",需压倒性证据才通过
- [[Automated Screenshot Testing]]Playwright qa-playwright-capture.sh 自动化截图捕获
## Key Entities
- Testing Reality Checker AgentThe Agency Testing 部门角色——截图驱动的生产就绪认证 Agent
- QA Agent前序 QA 测试环节,提供自动化测试发现和证据
- Integration AgentRealityIntegration——Reality Checker 的执行主体
- [[testing-workflow-optimizer]]:工作流优化 Agent为 Reality Checker 提供优化流程建议
- [[testing-api-tester]]API 测试 Agent提供后端接口层面的测试证据
## Connections
- [[testing-workflow-optimizer]] ← workflow integration ← [[testing-reality-checker]]
- [[testing-api-tester]] ← evidence source ← [[testing-reality-checker]]
- [[testing-accessibility-auditor]] ← cross-validation ← [[testing-reality-checker]]
- [[testing-evidence-collector]] ← provides screenshots ← [[testing-reality-checker]]
- [[testing-reality-checker]] ← final gate ← [[agents-orchestrator]]
## Contradictions
- 与 [[testing-workflow-optimizer]] 潜在张力Workflow Optimizer 追求流程效率目标75% 流程错误减少Reality Checker 追求真实性(默认"需要工作"两者在修订周期数量上可能存在分歧——Optimizer 希望快速迭代Checker 要求充分证据
- 与 [[testing-api-tester]] 的互补关系API Tester 提供后端接口测试证据Reality Checker 要求端到端截图;两者共同构成前后端双重质量门控

View File

@@ -0,0 +1,56 @@
---
title: "Workflow Optimizer Agent Personality"
type: source
tags: []
date: 2026-04-21
---
## Source File
- [[Agent/agency-agents/testing/testing-workflow-optimizer.md]]
## Summary用中文描述
- 核心主题The Agency Testing 部门的流程优化与工作流自动化专家 Agent基于系统思维方法论专注于端到端业务流程的分析、重设计、自动化与持续改进。
- 问题域:工作流效率瓶颈识别、跨部门流程孤岛、人工重复性任务、流程质量与员工满意度的平衡。
- 方法/机制:四阶段工作流(现状分析→优化设计→实施规划→自动化执行)+ Lean/Six Sigma/Kaizen 持续改进方法论 + 人本设计原则 + 数据驱动决策框架。核心工具WorkflowOptimizer Python 框架含瓶颈识别、优化机会评分、ROI 计算、实施路线图生成)。
- 结论/价值40% 平均周期时间改善、60% 常规任务自动化率、75% 流程错误减少、90% 优化流程 6 个月内成功采纳、30% 员工满意度提升。
## Key Claims用中文描述
- Workflow Optimizer Agent 通过系统分析消除效率瓶颈、流线化流程、实施智能化自动化解决方案,提升生产力、质量和员工满意度。
- 每个流程优化必须包含自动化机会和可量化改进指标。
- 在实施变更前必须测量当前状态性能,并使用统计分析验证改进有效性。
- 优先考虑用户/员工体验和满意度,同时在自动化效率与人类判断和创造力之间取得平衡。
## Key Quotes
> "Finds the bottleneck, fixes the process, automates the rest." — Workflow Optimizer Agent personality description
> "Process optimization reduces cycle time from 4.2 days to 1.8 days (57% improvement)" — communication style example
> "Automation eliminates 15 hours/week of manual work, saving $39K annually" — communication style example
## Key Concepts
- [[Lean]]:精益方法论,识别三类活动(增值活动/价值赋能活动/浪费),追求消除一切不增值环节。
- [[Six-Sigma]]:六西格玛方法论,通过 DMAICDefine/Measure/Analyze/Improve/Control流程减少流程变异和缺陷目标 3.4 DPMO。
- [[Kaizen]]:持续改进哲学,小步快跑、员工驱动的渐进式流程优化,与六西格玛形成互补。
- [[Value-Stream-Mapping]]:价值流映射,识别流程中的增值时间 vs 非增值等待时间。
- [[Statistical-Process-Control]]:统计过程控制,通过数据监控过程稳定性并预测性能。
- [[Change-Management]]:变更管理,确保流程改进被团队接受并成功落地的策略框架。
- [[Human-Centered-Design]]:人本设计,优先考虑用户/员工体验、认知负荷和可访问性。
## Key Entities
- [[The-Agency]]Testing 部门的 Workflow Optimizer Agent 所属组织。
## Connections
- [[testing-api-tester]] ← 协同质量保障 ← [[testing-workflow-optimizer]](流程优化后需要 API 测试验证自动化后的系统行为)
- [[specialized-workflow-architect]] ← 共享方法论 ← [[testing-workflow-optimizer]](两者均关注工作流设计与优化,但前者侧重设计建模,后者侧重实施改进)
- [[product-sprint-prioritizer]] ← 协同优先级排序 ← [[testing-workflow-optimizer]](流程优化实施需要与 Sprint 规划对齐)
- [[specialized-model-qa]] ← 协同数据验证 ← [[testing-workflow-optimizer]](六西格玛等统计方法与 Model QA 的量化验证方法相互补充)
## Contradictions
- 与 [[specialized-workflow-architect]] 存在职责边界张力:
- 冲突点:两者均涉及工作流分析,但 Workflow Architect 强调设计规范(穷举所有路径/状态树Workflow Optimizer 强调实施改进(量化效率收益/自动化 ROI
- 当前观点Workflow Architect 负责"如何设计"设计层Workflow Optimizer 负责"如何改进"(执行层),属于工作流生命周期的不同阶段。
- 对方观点:部分场景下两者可互换使用,职责边界模糊。
- 与 [[product-behavioral-nudge-engine]] 在自动化 vs 人机交互上存在理念张力:
- 冲突点Workflow Optimizer 追求最大化自动化减少人工干预Nudge Engine 追求最大化人类参与(微任务/游戏化驱动)。
- 当前观点:两者互补——工作流层面追求自动化,用户/员工层面保留适度的人机交互以维护满意度。
- 对方观点:过度自动化可能降低员工参与感和学习机会。