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

> **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行（`</transition>` 之后，`<div class="search-box">` 之前）添加：

```vue
    </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: 提交代码**

```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
            </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: 验证图标样式**

在浏览器中：
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> 为实际的 commit hash）
git reset --hard <commit-hash>

# 或者回滚所有提交（回到初始状态）
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/