修改为客源列表_UI设计
This commit is contained in:
@@ -215,10 +215,10 @@
|
||||
**[搜索区域]**
|
||||
|
||||
| 属性 | 说明 |
|
||||
|---|---|
|
||||
| ------- | -------------------------------------------------------------------------------------------------------------------------- |
|
||||
| 组件 | 搜索输入框 + 下拉范围选择 |
|
||||
| 容器 | `bg-white rounded-lg border border-neutral-200 px-4 py-3 mt-3` |
|
||||
| 搜索框左侧 | 下拉范围选择器「客户信息 ▾」（`select` 元素，`text-sm text-neutral-600`），选项：客户信息（默认）/ 客源编号 |
|
||||
| 搜索框左侧 | 下拉范围选择器「客户信息 ▾」（`select` 元素，`text-sm text-neutral-600`），选项：客户信息（默认）/ 小区 |
|
||||
| 搜索输入框 | `w-80 pl-3 pr-10 py-2 border border-neutral-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-600/40` |
|
||||
| 搜索触发 | 输入后 300ms debounce + Enter 键 + 搜索按钮点击；HTMX `hx-trigger="keyup changed delay:300ms, search"` |
|
||||
| 搜索图标按钮 | Heroicon `magnifying-glass`，`bg-primary-600 text-white w-9 h-9 rounded-lg` |
|
||||
@@ -379,14 +379,15 @@
|
||||
整体容器：`space-y-2`，每行：`flex items-center flex-wrap gap-x-3 gap-y-1.5 text-sm`
|
||||
|
||||
| 筛选组 | 标签宽 | 选项形式 | 特殊说明 |
|
||||
|---|---|---|---|
|
||||
| 状态 | `w-6 text-xs text-neutral-400` | 单选 Tag 按钮组 | Tab 决定显示哪些选项；激活为 `bg-primary-600 text-white`，默认为「不限」 |
|
||||
| --------- | ------------------------------ | ---------------------- | -------------------------------------------------------------------- |
|
||||
| 状态 | `w-6 text-xs text-neutral-400` | 单选 Tag 按钮组 | Tab 决定显示哪些选项；激活为 `bg-primary-600 text-white`，默认为「不限], 「求购]，「租购] |
|
||||
| 需求 | 同上 | 单选 Tag 按钮组 | 二手/新房（求购）；租房（求租） |
|
||||
| 等级 | 同上 | 单选/多选 Tag 按钮组 | A急迫/A/B较强/C一般/D较弱/E暂不关注/未填写 |
|
||||
| 位置 | 同上 | 多选 Tag 按钮组（可滚动） | 宝山/崇明/...共19个区 |
|
||||
| 等级 | 同上 | 单选 Tag 按钮组 | A急迫/B较强/C一般/D较弱/E暂不关注/未填写 |
|
||||
| 位置 | 同上 | 单选Tag 按钮组 | 宝山/崇明/...共19个区， |
|
||||
| 区域 | 同上 | 单选Tag按钮组 | 位置选择后出现二级区域选择 |
|
||||
| 购价（求购Tab） | 同上 | 单选 Tag + 自定义区间输入 | 预设区间 + 「最小值」「~」「最大值」万 |
|
||||
| 租价（求租Tab） | 同上 | 单选 Tag + 自定义区间输入 | 预设区间 + 「最小值」「~」「最大值」元 |
|
||||
| 房室 | 同上 | 单选 Tag + 「是大价值」复选框（求购） | 不限/1居/2居/3居/4居/5居及以上 |
|
||||
| 居室 | 同上 | 单选 Tag + 「是大价值」复选框（求购） | 不限/1居/2居/3居/4居/5居及以上 |
|
||||
| 筛选（展开） | 同上 | 各类下拉/DateRange | 含「展开 ∨」按钮；相关方/委托日期/来源/购房目的/带看进度/活跃情况/是否有效/面积/跟进时间/带看时间/审批中/审批驳回/收藏客源 |
|
||||
| 筛选（收起后隐藏） | 同上 | 各类 Checkbox/下拉 | 保护客/合作者/偏好新房/巧客力访客/置顶/用途/带看次数 |
|
||||
|
||||
@@ -432,7 +433,7 @@ HTMX 行为：所有筛选变更统一通过 `hx-get="/clients/private/" hx-trig
|
||||
**[工具栏区]**
|
||||
|
||||
| 属性 | 说明 |
|
||||
|---|---|
|
||||
| --- | ------------------------------------------------------------------------------------ |
|
||||
| 组件 | Toolbar（§4 Toolbar） |
|
||||
| 容器 | `flex items-center justify-between px-4 py-2.5 bg-white border-b border-neutral-100` |
|
||||
| 左侧 | 批量操作按钮组（勾选时激活）+ 总条数文字 |
|
||||
@@ -655,7 +656,7 @@ HTMX 行为：所有筛选变更统一通过 `hx-get="/clients/private/" hx-trig
|
||||
#### 2.1.4 使用的特殊组件
|
||||
|
||||
| 组件名 | 来源（§章节） | 用途 | 自定义说明 |
|
||||
|---|---|---|---|
|
||||
| ----------------------- | -------------------------- | -------------------- | ------------------------------------- |
|
||||
| Data Table | §1 Data Table | 客源数据主体展示 | 行高兼容双行（姓名+活跃度标签），允许 `min-h-14 h-auto` |
|
||||
| Pagination | §2 Pagination | 底部分页控件 | 新增跳页输入框，与标准实现一致 |
|
||||
| Column Visibility Panel | §3 Column Visibility Panel | 自定义列表字段选择 | 触发按钮为「自定义列表」文字 + 图标 |
|
||||
@@ -1090,7 +1091,7 @@ buy_or_rent（租购）→ public（公客）[不可逆]
|
||||
## 9. 开放问题（待决策）
|
||||
|
||||
| # | 问题 | 影响范围 | 待确认方 |
|
||||
|---|---|---|---|
|
||||
| --- | -------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ------------------- |
|
||||
| 1 | 「资料客」「营销客」Tab 在 MVP 阶段是否展示为灰色禁用 Tab，还是直接不显示？ | 一级 Tab 导航 §2.1.3 | 产品经理 |
|
||||
| 2 | 二级 Tab 上的客源数量 Badge（如「求购 913」）是否实时计数？若是，是否有性能开销？建议改为后端分 Tab 预聚合或缓存 | 二级 Tab §2.1.3 | 后端 + 产品 |
|
||||
| 3 | 「与我相关」和「我部门相关」的精确业务定义：经纪人同时是首录人和归属人时，「与我相关」指 `owner_id=me OR first_recorder_id=me`？还是仅 `owner_id=me`？ | 快捷筛选行 §2.1.3 | 产品经理 |
|
||||
Reference in New Issue
Block a user