From c432b040756bb2456a3b0af34c4868c55f2efc8f Mon Sep 17 00:00:00 2001 From: wkc <978997012@qq.com> Date: Sat, 28 Feb 2026 16:03:35 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=E7=89=B9=E8=89=B2?= =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E6=9F=A5=E7=9C=8B=E5=AE=A2=E6=88=B7=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=E5=AE=9E=E6=96=BD=E8=AE=A1=E5=88=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 详细的6个任务分解 - 每个步骤包含具体代码和验证方法 - 包含完整的测试流程 - 包含回滚方案 --- .../2026-02-28-featured-area-customer-view.md | 389 ++++++++++++++++++ 1 file changed, 389 insertions(+) create mode 100644 docs/plans/2026-02-28-featured-area-customer-view.md diff --git a/docs/plans/2026-02-28-featured-area-customer-view.md b/docs/plans/2026-02-28-featured-area-customer-view.md new file mode 100644 index 0000000..c0bc30d --- /dev/null +++ b/docs/plans/2026-02-28-featured-area-customer-view.md @@ -0,0 +1,389 @@ +# 特色区域查看客户功能实施计划 + +> **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 导入语句之后）添加： + +```javascript +import CustomerModal from "@/views/grid/map/draw-area/customer-modal.vue" +``` + +**步骤 2: 在 components 中注册组件** + +在第26-30行的 components 对象中添加 CustomerModal： + +```javascript +components: { + MenuEdit, + BMapPolygonEditor, + MenuEdit, + CustomerModal, // 新增 +}, +``` + +**步骤 3: 验证 import 路径正确** + +运行前端项目验证无报错： + +```bash +cd ruoyi-ui +npm run dev +``` + +预期: 浏览器控制台无 "Failed to mount component" 错误 + +**步骤 4: 提交代码** + +```bash +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行（`` 之后，`
` 之前）添加： + +```vue + + + +
+``` + +**步骤 2: 验证组件引用** + +在浏览器中打开特色区域页面，验证控制台无报错。 + +**步骤 3: 验证 props 传递** + +在 Vue DevTools 中检查 customer-modal 组件的 props： +- cardType 应该是 "featured" +- detailInfo 应该是 areaForm 对象 +- btnType 应该是 "2" + +**步骤 4: 提交代码** + +```bash +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 开始）之前插入： + +```vue + + + + + + + +``` + +**步骤 3: 验证图标样式** + +在浏览器中： +1. 打开特色区域页面 +2. 点击一个已绘制的区域 +3. 查看区域详情窗口底部的图标按钮区域 +4. 验证新添加的"用户图标"样式与其他图标一致 + +**步骤 4: 验证 tooltip 显示** + +1. 鼠标悬停在新添加的用户图标上 +2. 验证 tooltip 显示"查看客户" +3. 验证 tooltip 样式与其他 tooltip 一致 + +**步骤 5: 提交代码** + +```bash +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 对象中添加： + +```javascript + /** + * 调整边界 + */ + updateAreaShape() { + // ... 现有代码 + }, + /** + * 查看客户 + */ + previewCustomer() { + this.$refs.customerModal.onOpen() + } +``` + +**步骤 3: 验证方法调用** + +在浏览器控制台中测试： +1. 打开特色区域页面 +2. 点击一个区域，打开区域详情窗口 +3. 打开 Vue DevTools +4. 找到 BMapPolygonEditor 组件 +5. 在控制台执行：`$vm0.previewCustomer()` +6. 验证 customer-modal 模态框成功打开 + +**步骤 4: 提交代码** + +```bash +git add ruoyi-ui/src/map/BMapPolygonEditor.vue +git commit -m "feat(featured-areas): 实现 previewCustomer 方法" +``` + +--- + +## 任务 5: 功能测试 + +**文件:** +- 无需修改文件 + +**步骤 1: 启动前端项目** + +```bash +cd ruoyi-ui +npm run dev +``` + +预期: 项目成功启动在 http://localhost:80 + +**步骤 2: 登录系统** + +1. 访问 http://localhost:80 +2. 使用测试账号登录： + - 用户名: admin + - 密码: admin123 + +**步骤 3: 进入特色区域页面** + +1. 导航到"网格管理" > "区域绘制" +2. 点击"特色区域"标签（btnType=2） +3. 等待地图加载完成 + +**步骤 4: 测试查看客户按钮** + +1. 在左侧菜单中选择一个特色区域图层 +2. 在地图上点击一个已绘制的特色区域 +3. 验证右上角弹出区域详情窗口 +4. 查看窗口底部的图标按钮区域 +5. 验证显示"用户图标"（查看客户按钮） + +**步骤 5: 测试点击功能** + +1. 点击"查看客户"图标 +2. 验证： + - customer-modal 对话框成功打开 + - 对话框标题显示"查看客户" + - 顶部显示区域名称和规模信息 + - 客户列表成功加载 + - 显示三种客户类型标签（企业/个人/商户） + +**步骤 6: 测试客户类型切换** + +1. 点击"个人"标签 +2. 验证客户列表刷新，显示个人客户 +3. 点击"商户"标签 +4. 验证客户列表刷新，显示商户客户 +5. 点击"企业"标签 +6. 验证客户列表刷新，显示企业客户 + +**步骤 7: 测试分页功能** + +1. 如果客户数量超过10条，验证分页器显示 +2. 点击下一页 +3. 验证客户列表刷新，显示第二页数据 +4. 修改每页显示条数 +5. 验证列表重新加载 + +**步骤 8: 测试客户详情跳转** + +1. 点击表格中的客户名称（el-button） +2. 验证路由跳转到客户详情页面 +3. 验证详情页面显示正确的客户信息 + +**步骤 9: 测试现有功能兼容性** + +1. 关闭客户模态框 +2. 依次点击其他4个图标按钮： + - 重新申请 + - 修改信息 + - 删除区域 + - 调整边界 +3. 验证这些按钮功能正常，无报错 + +**步骤 10: 测试行政区域兼容性** + +1. 切换到"行政区域"标签（btnType=1） +2. 点击一个行政区域 +3. 验证行政区域的"查看客户"按钮功能正常 +4. 验证两个区域类型的查看客户功能互不影响 + +**步骤 11: 检查浏览器控制台** + +1. 打开浏览器开发者工具 +2. 切换到 Console 标签 +3. 执行所有测试步骤 +4. 验证控制台无 JavaScript 报错 +5. 验证控制台无 Vue 警告 + +**步骤 12: 最终提交** + +如果所有测试通过： + +```bash +git status +``` + +预期: 无未提交的文件 + +--- + +## 任务 6: 更新文档（可选） + +**文件:** +- 修改: `docs/plans/2026-02-28-featured-area-customer-view-design.md` + +**步骤 1: 更新验收标准** + +在验收标准的各项前打勾： + +```markdown +### 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: 提交文档更新** + +```bash +git add docs/plans/2026-02-28-featured-area-customer-view-design.md +git commit -m "docs: 更新特色区域查看客户功能验收状态" +``` + +--- + +## 完成检查清单 + +实施完成后，验证以下内容： + +- [ ] 所有6个任务已完成 +- [ ] 所有 git commits 已提交 +- [ ] 前端项目无编译错误 +- [ ] 浏览器控制台无 JavaScript 错误 +- [ ] 功能测试全部通过 +- [ ] 代码已推送到远程仓库（如需要） + +## 回滚方案 + +如果实施过程中遇到问题，可以回滚： + +```bash +# 查看提交历史 +git log --oneline + +# 回滚到指定提交（替换 为实际的 commit hash） +git reset --hard + +# 或者回滚所有提交（回到初始状态） +git reset --hard HEAD~4 +``` + +## 相关资源 + +- **设计文档**: `docs/plans/2026-02-28-featured-area-customer-view-design.md` +- **修改文件**: `ruoyi-ui/src/map/BMapPolygonEditor.vue` +- **复用组件**: `ruoyi-ui/src/views/grid/map/draw-area/customer-modal.vue` +- **参考实现**: `ruoyi-ui/src/views/grid/map/draw-area/components/menulist-modal.vue:413-416` +- **Element UI 文档**: https://element.eleme.cn/#/zh-CN/component/tooltip +- **Vue 2.x 文档**: https://v2.cn.vuejs.org/