182 lines
6.6 KiB
Markdown
182 lines
6.6 KiB
Markdown
# 区域管理 UI 设计文档
|
||
|
||
> **任务编号**：06（P0-B）
|
||
> **覆盖范围**：`US-COMPLEX-003`（管理员维护区域管理：城区/商圈）
|
||
> **输出文件**：`UI_DESIGN/区域管理_UI.html`
|
||
> **设计基线**：`UI_SYSTEM/UI_SYSTEM.md`（列表页模板、Top Bar + Sidebar 壳层、表格/分页规范）
|
||
> **竞品截图参考**：
|
||
> - `Project/fonrey/screenshots/楼盘管理/区域管理.png`
|
||
> - `Project/fonrey/screenshots/楼盘管理/商圈管理.png`
|
||
> - `Project/fonrey/screenshots/楼盘管理/编辑商圈.png`
|
||
> - `Project/fonrey/screenshots/楼盘管理/查看关联.png`
|
||
|
||
---
|
||
|
||
## 1. 目标与范围
|
||
|
||
### 1.1 页面目标
|
||
|
||
区域管理页用于运营/数据管理员统一维护“城区-商圈”两级地理字典，并支撑楼盘、房源、客源模块的区域筛选与统计。
|
||
|
||
核心目标：
|
||
|
||
1. 在同一业务页面支持“城区管理 / 商圈管理”双子模块切换
|
||
2. 支持关键词检索、区域过滤、有无坐标过滤
|
||
3. 支持批量操作（合并城区、合并商圈、转移商圈）
|
||
4. 支持新增/修改商圈弹窗维护
|
||
5. 支持查看商圈关联关系（标准区域映射）
|
||
|
||
### 1.2 本任务边界
|
||
|
||
- ✅ 包含：壳层、模块 Tab、子 Tab、筛选区、批量区、表格、分页、弹窗校验、关联关系弹窗
|
||
- ✅ 包含：竞品截图中的关键文案与字段结构（城区/商圈/关联关系）
|
||
- ⛔ 不包含：真实后端 CRUD、真实关联跳转、真实地图 API、真实权限鉴权
|
||
|
||
---
|
||
|
||
## 2. 信息架构
|
||
|
||
### 2.1 壳层结构（统一后台模板）
|
||
|
||
- **Top Bar（固定 56px）**：品牌 + 一级导航 + 用户区
|
||
- **Sidebar（固定 240px）**：房源管理二级导航
|
||
- **Main Content（`ml-60 pt-[72px]`）**：
|
||
1. 面包屑 + 页面标题
|
||
2. 模块 Tab（楼盘 / 区域管理 / 学校管理 / 应用标准数据）
|
||
3. 区域管理子 Tab（城区管理 / 商圈管理）
|
||
4. 筛选区 + 批量区 + 列表区 + 分页区
|
||
|
||
### 2.2 区域管理子模块
|
||
|
||
#### A. 城区管理
|
||
- 筛选：城区名称关键词 + 有无坐标（不限/有坐标/无坐标）
|
||
- 列表字段：城区名称 / 商圈数量 / 楼盘数量 / 坐标 / 操作
|
||
- 操作：修改、设置坐标、合并城区、新增城区
|
||
|
||
#### B. 商圈管理
|
||
- 筛选：商圈名称关键词 + 区域过滤（标签）+ 有无坐标
|
||
- 列表字段：城区名称 / 商圈名称（含“标准”标签）/ 楼盘数量 / 坐标 / 操作
|
||
- 操作：修改、查看关联关系、设置坐标、合并商圈、转移商圈、新增商圈
|
||
|
||
### 2.3 关联关系视图（弹窗承载）
|
||
|
||
- 触发：商圈列表行内「查看关联关系」
|
||
- 筛选：标准区域（下拉）、本地区域（下拉）
|
||
- 列表字段：标准城市 / 标准城区 / 标准商圈 / 关联本地商圈 / 本地商圈所属城区 / 操作（变更）
|
||
- 支持批量修改按钮（勾选后启用）
|
||
|
||
---
|
||
|
||
## 3. 关键交互设计
|
||
|
||
### 3.1 子 Tab 切换
|
||
|
||
- 点击「城区管理 / 商圈管理」切换内容区
|
||
- 切换后保留当前模块壳层和分页区风格一致
|
||
|
||
### 3.2 筛选与重置
|
||
|
||
- 点击「查询」执行前端过滤
|
||
- 点击「重置」清空关键词与标签筛选，恢复默认列表
|
||
- 坐标筛选支持：不限 / 有坐标 / 无坐标
|
||
|
||
### 3.3 批量操作启用规则
|
||
|
||
- 未勾选时：批量按钮禁用态
|
||
- 勾选 1 条及以上：批量按钮启用
|
||
- 提示区实时显示：`已选本页 N 条`
|
||
|
||
### 3.4 新增/编辑弹窗
|
||
|
||
#### 城区弹窗
|
||
- 标题：新增城区 / 修改城区
|
||
- 字段：
|
||
- 城区名称（必填）
|
||
- 城区简称（选填）
|
||
- 校验：城区名称为空时提示“请输入城区名称”
|
||
|
||
#### 商圈弹窗
|
||
- 标题：新增商圈 / 修改商圈
|
||
- 字段：
|
||
- 所属城区（必填，下拉）
|
||
- 商圈名称（必填，文本）
|
||
- 校验：
|
||
- 未选城区：`请选择所属城区`
|
||
- 未填商圈名称：`请输入商圈名称`
|
||
|
||
### 3.5 设置坐标弹窗
|
||
|
||
- 支持城区/商圈两种来源
|
||
- 字段：纬度、经度
|
||
- 校验：任一为空时提示“请完整填写经纬度”
|
||
|
||
### 3.6 查看关联关系弹窗
|
||
|
||
- 保持“查看关联情况”核心信息结构
|
||
- 支持顶部筛选 + 列表 + 批量修改占位
|
||
- 点击「变更」仅触发原型提示（无真实提交）
|
||
|
||
---
|
||
|
||
## 4. 状态矩阵
|
||
|
||
| 状态 | 触发 | 页面反馈 |
|
||
|---|---|---|
|
||
| 默认态 | 首次进入页面 | 默认显示“城区管理”，加载城区列表 |
|
||
| 子模块切换 | 点击子 Tab | 切换到对应列表和筛选区 |
|
||
| 查询态 | 输入关键词并查询 | 列表按条件过滤 |
|
||
| 空结果态 | 条件过严 | 表格显示“暂无匹配数据” |
|
||
| 勾选态 | 勾选行/全选 | 批量按钮启用，显示已选条数 |
|
||
| 弹窗校验失败 | 必填缺失提交 | 字段下方红字错误，弹窗保持打开 |
|
||
| 保存成功（原型） | 校验通过提交 | 关闭弹窗 + Toast 成功提示 |
|
||
| 主题策略 | 统一后台视觉 | 页面内不包含 Light/Dark/System 切换控件 |
|
||
|
||
---
|
||
|
||
## 5. 字段与数据模型映射（DATA_MODEL_COMPLEX）
|
||
|
||
| UI 字段 | 数据模型字段 |
|
||
|---|---|
|
||
| 城区名称 | `districts.name` |
|
||
| 城区简称 | `districts.short_name` |
|
||
| 所属城市 | `districts.city` |
|
||
| 商圈名称 | `business_areas.name` |
|
||
| 所属城区 | `business_areas.district_id -> districts.id` |
|
||
| 商圈坐标 | `business_areas.latitude` / `business_areas.longitude` |
|
||
| 城区坐标（原型占位） | `districts` 扩展坐标字段（PRD层业务占位） |
|
||
| 商圈数量 | `COUNT(business_areas.id)`（按城区聚合） |
|
||
| 楼盘数量 | `COUNT(complexes.id)`（按城区/商圈聚合） |
|
||
| 关联本地商圈 | `business_areas.name`（映射结果） |
|
||
| 标准城市/城区/商圈 | 标准区域字典（独立映射域，原型以 mock 展示） |
|
||
|
||
---
|
||
|
||
## 6. 可访问性与规范
|
||
|
||
- 表格列头使用 `<th scope="col">`
|
||
- 纯图标按钮补充 `aria-label`
|
||
- 弹窗支持 `Esc` 关闭
|
||
- 错误提示采用“字段下方红字文本”，不只依赖颜色
|
||
- 焦点样式统一 `focus-visible:ring-2 focus-visible:ring-primary-600/40`
|
||
- 页面保持浅色后台主题，不引入主题切换控件
|
||
|
||
---
|
||
|
||
## 7. 验收清单
|
||
|
||
- [x] 壳层结构：Top Bar + Sidebar + Main
|
||
- [x] 模块 Tab 与子 Tab 结构完整
|
||
- [x] 城区管理筛选/列表/批量/分页完整
|
||
- [x] 商圈管理筛选/列表/批量/分页完整
|
||
- [x] 商圈编辑弹窗字段与校验符合 PRD Story 10
|
||
- [x] 关联关系视图字段与交互符合 PRD Story 11
|
||
- [x] 页面内不包含 Light/Dark/System 主题切换控件
|
||
- [ ] 控制台 0 报错（待本地预览验证）
|
||
|
||
---
|
||
|
||
## 8. 后续衔接
|
||
|
||
- 本页评审通过后，进入任务07：组织人事（`US-ORG-001~003`）
|
||
- 区域字典（城区/商圈）将作为房源/客源筛选条件来源，需保持命名与状态一致
|