# 商品分类 — 前端技术方案

> **依据：** 《商品分类功能需求.md》v1.4、《商品分类技术方案.md》v1.2  
> **前端规范：** `doc/前端设计/前端设计.md`  
> **范围：** 仅 **ruoyi-ui 平台管理端** 全平台分类 CRUD（`shop_id IS NULL`）；商家端 `agri/seller/category` **不在本期 ruoyi-ui 实现**。  
> **实现状态：** 页面与 API 封装已落地，待后端 `/agri/category` 联调。

---

## 1. 技术栈与写法约定

| 项 | 说明 |
|----|------|
| 框架 | Vue 2 + Element UI |
| 请求 | `@/utils/request` |
| 参考页面 | `ruoyi-ui/src/views/agri/goods/goodsService/index.vue` |
| 列表形态 | **扁平分页表**（非树组件）；二级行缩进展示 |
| 层级 | 仅一级 + 二级（C1） |

---

## 2. 文件清单

| 类型 | 路径 | 说明 |
|------|------|------|
| 页面 | `ruoyi-ui/src/views/agri/goods/category/index.vue` | 平台分类列表 + 弹窗 |
| API | `ruoyi-ui/src/api/agri/category.js` | 平台 `/agri/category` |

**组件 name：** `AgriCategory`

> 技术方案原文写 `agri/category/index`；本仓库实际路径为 `agri/goods/category/index`，**菜单组件路径须与文件一致**。

---

## 3. 菜单与路由

| 菜单名称 | 组件路径 | 路由 path（建议） | 权限标识 |
|----------|----------|-------------------|----------|
| 商品分类（平台） | `agri/goods/category/index` | `category` | `agri:category:list` |

**上级菜单：** 农资管理 → **商品管理**

| 按钮权限 | 标识 |
|----------|------|
| 添加 | `agri:category:add` |
| 编辑 | `agri:category:edit` |
| 删除 | `agri:category:remove` |

---

## 4. 页面结构

```text
平台商品分类
├── 说明条：平台分类与店铺分类数据隔离
├── 检索：keyword（分类名称）
├── 工具栏：添加一级分类、批量删除
├── 表格：名称（层级标识）、上级、图片、显示、热门、排序
│   └── 一级行操作含「添加子分类」
└── 弹窗：层级只读、上级（二级）、名称、图片、排序、显示、热门
```

---

## 5. 复用组件

| 组件 | 用途 |
|------|------|
| `ImageUpload` / `ImagePreview` | 分类图片 |
| `Pagination` / `RightToolbar` | 分页 |

---

## 6. API 对接

**基路径：** `/agri/category`（平台，`shop_id IS NULL`）

| 前端方法 | HTTP | 路径 |
|----------|------|------|
| `listCategory` | GET | `/list` |
| `level1Options` | GET | `/level1Options` |
| `treeCategory` | GET | `/tree`（预留） |
| `addCategory` | POST | `/` |
| `updateCategory` | PUT | `/` |
| `delCategory` | DELETE | `/{categoryIds}` |

### 6.1 新增一级 Body

```json
{
  "categoryLevel": "1",
  "parentId": 0,
  "categoryName": "肥料",
  "categoryPic": "/profile/upload/c1.jpg",
  "sortNo": 0,
  "showFlag": "1",
  "hotFlag": "0"
}
```

### 6.2 新增二级 Body

`categoryLevel: "2"` + `parentId` 为平台一级 ID。

---

## 7. 交互要点

| 场景 | 行为 |
|------|------|
| 添加子分类 | 行内按钮，parentId 预填 |
| 删一级 | confirm「将同时删除其下全部二级分类」 |
| 批量删除 | 整批失败时展示后端 reasons |
| 编辑一级 | parentId 固定 0，不可改层级 |

---

## 8. 与关联模块边界

| 模块 | 关系 |
|------|------|
| 商品管理 | 商品仅挂 **店铺** 二级类；平台分类本期不与商品关联 |
| 店铺 | 商家端维护本店分类，路径 `/agri/seller/category` |

---

## 9. 联调检查清单

- [ ] 同级名称唯一  
- [ ] 删二级有商品时阻断  
- [ ] 删一级级联二级  
- [ ] 列表 canAddChild 仅一级为 true  

---

## 10. 非本期（前端）

商家端 `agri/seller/category/index`、树形拖拽、三级分类。

---

## 11. 修订记录

| 版本 | 日期 | 说明 |
|------|------|------|
| v1.0 | 2026-05 | 首版：平台扁平分页列表 |

---

*文档版本：v1.0 · ruoyi-ui · 关联《商品分类功能需求.md》v1.4*
