Files

wkc c432b04075 docs: 添加特色区域查看客户功能实施计划

- 详细的6个任务分解
- 每个步骤包含具体代码和验证方法
- 包含完整的测试流程
- 包含回滚方案

2026-02-28 16:03:35 +08:00

9.7 KiB

Raw Permalink Blame History

特色区域查看客户功能实施计划

For Claude: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

目标: 在特色区域详情窗口添加"查看客户"图标按钮，复用现有的 customer-modal 组件，实现客户列表查看功能。

架构: 组件复用架构 - BMapPolygonEditor.vue 引入 CustomerModal.vue，通过 refs 调用模态框的 onOpen() 方法。

技术栈: Vue 2.x, Element UI, 若依框架

设计文档: docs/plans/2026-02-28-featured-area-customer-view-design.md

任务 1: 引入 CustomerModal 组件

文件:

修改: ruoyi-ui/src/map/BMapPolygonEditor.vue:20-30（import 区域）

步骤 1: 在 script 标签内添加 import 语句

在第22行（MenuEdit 导入语句之后）添加：

import CustomerModal from "@/views/grid/map/draw-area/customer-modal.vue"

步骤 2: 在 components 中注册组件

在第26-30行的 components 对象中添加 CustomerModal：

components: {
  MenuEdit,
  BMapPolygonEditor,
  MenuEdit,
  CustomerModal,  // 新增
},

步骤 3: 验证 import 路径正确

运行前端项目验证无报错：

cd ruoyi-ui
npm run dev

预期: 浏览器控制台无 "Failed to mount component" 错误

步骤 4: 提交代码

git add ruoyi-ui/src/map/BMapPolygonEditor.vue
git commit -m "feat(featured-areas): 引入 CustomerModal 组件"

任务 2: 在 template 中添加组件引用

文件:

修改: ruoyi-ui/src/map/BMapPolygonEditor.vue:270-275（template 末尾）

步骤 1: 在 template 末尾添加组件标签

在第273行（</transition> 之后，<div class="search-box"> 之前）添加：

    </transition>
    <!-- 查看客户模态框 -->
    <customer-modal
      ref="customerModal"
      cardType="featured"
      :detailInfo="areaForm"
      :btnType="'2'"
    />
    <div class="search-box">

步骤 2: 验证组件引用

在浏览器中打开特色区域页面，验证控制台无报错。

步骤 3: 验证 props 传递

在 Vue DevTools 中检查 customer-modal 组件的 props：

cardType 应该是 "featured"
detailInfo 应该是 areaForm 对象
btnType 应该是 "2"

步骤 4: 提交代码

git add ruoyi-ui/src/map/BMapPolygonEditor.vue
git commit -m "feat(featured-areas): 添加 CustomerModal 组件引用"

任务 3: 在区域详情窗口添加查看客户图标按钮

文件:

修改: ruoyi-ui/src/map/BMapPolygonEditor.vue:221-240（edit-operate 按钮区域）

步骤 1: 定位按钮插入位置

找到第221-240行的代码区域，这是 infoType === 'SHOW' 的按钮区域：

第229行：修改信息按钮结束
第240行：删除区域按钮开始

我们需要在修改信息按钮之后插入查看客户按钮。

步骤 2: 添加查看客户图标按钮

在第239行（修改信息 tooltip 结束）之后，第240行（删除区域 tooltip 开始）之前插入：

            </el-tooltip>
            <!-- 查看客户 -->
            <el-tooltip placement="top" effect="light" content="查看客户">
              <i
                class="el-icon-user icon-area"
                @click.stop="previewCustomer"
              />
            </el-tooltip>
            <!-- 删除区域 -->
            <el-tooltip placement="top" effect="light" content="删除区域">

步骤 3: 验证图标样式

在浏览器中：

打开特色区域页面
点击一个已绘制的区域
查看区域详情窗口底部的图标按钮区域
验证新添加的"用户图标"样式与其他图标一致

步骤 4: 验证 tooltip 显示

鼠标悬停在新添加的用户图标上
验证 tooltip 显示"查看客户"
验证 tooltip 样式与其他 tooltip 一致

步骤 5: 提交代码

git add ruoyi-ui/src/map/BMapPolygonEditor.vue
git commit -m "feat(featured-areas): 添加查看客户图标按钮"

任务 4: 实现 previewCustomer 方法

文件:

修改: ruoyi-ui/src/map/BMapPolygonEditor.vue:900-1000（methods 区域）

步骤 1: 定位 methods 区域

找到 methods 对象的最后，准备添加新方法。建议添加在 updateAreaShape() 方法之后。

步骤 2: 添加 previewCustomer 方法

在 methods 对象中添加：

    /**
     * 调整边界
     */
    updateAreaShape() {
      // ... 现有代码
    },
    /**
     * 查看客户
     */
    previewCustomer() {
      this.$refs.customerModal.onOpen()
    }

步骤 3: 验证方法调用

在浏览器控制台中测试：

打开特色区域页面
点击一个区域，打开区域详情窗口
打开 Vue DevTools
找到 BMapPolygonEditor 组件
在控制台执行：$vm0.previewCustomer()
验证 customer-modal 模态框成功打开

步骤 4: 提交代码

git add ruoyi-ui/src/map/BMapPolygonEditor.vue
git commit -m "feat(featured-areas): 实现 previewCustomer 方法"

任务 5: 功能测试

文件:

无需修改文件

步骤 1: 启动前端项目

cd ruoyi-ui
npm run dev

预期: 项目成功启动在 http://localhost:80

步骤 2: 登录系统

访问 http://localhost:80
使用测试账号登录：
- 用户名: admin
- 密码: admin123

步骤 3: 进入特色区域页面

导航到"网格管理" > "区域绘制"
点击"特色区域"标签（btnType=2）
等待地图加载完成

步骤 4: 测试查看客户按钮

在左侧菜单中选择一个特色区域图层
在地图上点击一个已绘制的特色区域
验证右上角弹出区域详情窗口
查看窗口底部的图标按钮区域
验证显示"用户图标"（查看客户按钮）

步骤 5: 测试点击功能

点击"查看客户"图标
验证：
- customer-modal 对话框成功打开
- 对话框标题显示"查看客户"
- 顶部显示区域名称和规模信息
- 客户列表成功加载
- 显示三种客户类型标签（企业/个人/商户）

步骤 6: 测试客户类型切换

点击"个人"标签
验证客户列表刷新，显示个人客户
点击"商户"标签
验证客户列表刷新，显示商户客户
点击"企业"标签
验证客户列表刷新，显示企业客户

步骤 7: 测试分页功能

如果客户数量超过10条，验证分页器显示
点击下一页
验证客户列表刷新，显示第二页数据
修改每页显示条数
验证列表重新加载

步骤 8: 测试客户详情跳转

点击表格中的客户名称（el-button）
验证路由跳转到客户详情页面
验证详情页面显示正确的客户信息

步骤 9: 测试现有功能兼容性

关闭客户模态框
依次点击其他4个图标按钮：
- 重新申请
- 修改信息
- 删除区域
- 调整边界
验证这些按钮功能正常，无报错

步骤 10: 测试行政区域兼容性

切换到"行政区域"标签（btnType=1）
点击一个行政区域
验证行政区域的"查看客户"按钮功能正常
验证两个区域类型的查看客户功能互不影响

步骤 11: 检查浏览器控制台

打开浏览器开发者工具
切换到 Console 标签
执行所有测试步骤
验证控制台无 JavaScript 报错
验证控制台无 Vue 警告

步骤 12: 最终提交

如果所有测试通过：

git status

预期: 无未提交的文件

任务 6: 更新文档（可选）

文件:

修改: docs/plans/2026-02-28-featured-area-customer-view-design.md

步骤 1: 更新验收标准

在验收标准的各项前打勾：

### 6.1 功能验收

- [x] 区域详情窗口中显示"查看客户"图标按钮
- [x] 点击按钮后成功打开客户查看模态框
- [x] 模态框顶部显示正确的区域名称和规模
- [x] 客户列表正确加载（企业/个人/商户三种类型）
- [x] 客户类型切换功能正常
- [x] 分页功能正常
- [x] 点击客户名称可跳转到客户详情页

### 6.2 UI验收

- [x] 图标样式与现有图标按钮一致
- [x] 图标大小、颜色、间距合理
- [x] Tooltip 正确显示"查看客户"
- [x] 图标位置合理，不拥挤

### 6.3 性能验收

- [x] 页面加载速度无明显变化
- [x] 模态框打开速度正常（<1秒）
- [x] 客户列表加载速度正常（<2秒）

### 6.4 兼容性验收

- [x] 现有4个图标按钮功能正常
- [x] 行政区域的查看客户功能正常
- [x] 浏览器控制台无报错

步骤 2: 提交文档更新

git add docs/plans/2026-02-28-featured-area-customer-view-design.md
git commit -m "docs: 更新特色区域查看客户功能验收状态"

完成检查清单

实施完成后，验证以下内容：

所有6个任务已完成
所有 git commits 已提交
前端项目无编译错误
浏览器控制台无 JavaScript 错误
功能测试全部通过
代码已推送到远程仓库（如需要）

回滚方案

如果实施过程中遇到问题，可以回滚：

# 查看提交历史
git log --oneline

# 回滚到指定提交（替换 <commit-hash> 为实际的 commit hash）
git reset --hard <commit-hash>

# 或者回滚所有提交（回到初始状态）
git reset --hard HEAD~4

9.7 KiB Raw Permalink Blame History Unescape Escape

特色区域查看客户功能实施计划

任务 1: 引入 CustomerModal 组件

任务 2: 在 template 中添加组件引用

任务 3: 在区域详情窗口添加查看客户图标按钮

任务 4: 实现 previewCustomer 方法

任务 5: 功能测试

任务 6: 更新文档（可选）

完成检查清单

回滚方案

相关资源

9.7 KiB

Raw Permalink Blame History