# 共同富裕项目 — 前端技术方案

> 依据：`doc/共同富裕/共同富裕项目/共同富裕项目技术方案.md`、`共同富裕项目功能需求.md`；页面布局对齐 `ruoyi-ui/src/views/breedingStandards/breedingManage/index.vue`；请求与表单字段统一 **小驼峰**。

---

## 1. 页面与路由

| 项 | 说明 |
| --- | --- |
| **Vue 路径** | `ruoyi-ui/src/views/commonProsperity/project/index.vue` |
| **组件名** | `CommonProsperityProject` |
| **菜单配置** | 若依「菜单管理」组件路径：`commonProsperity/project/index` |
| **权限前缀** | `commonProsperity:project:` |

---

## 2. API 模块

| 项 | 说明 |
| --- | --- |
| **文件** | `ruoyi-ui/src/api/commonProsperity/project.js` |
| **Base Path** | `/commonProsperity/project` |

封装方法：`listCommonProsperityProject`、`getCommonProsperityProject`、`addCommonProsperityProject`、`updateCommonProsperityProject`、`delCommonProsperityProject`、`publishCommonProsperityProject`、`offlineCommonProsperityProject`。

---

## 3. 列表与查询

- **分页**：`pageNum`、`pageSize`（默认 20）。
- **筛选**：`projectName`（项目名称模糊）；`projectType`（1～3 精确，可空）；`publishStatus`（0 未发布 / 1 已发布，可空）。
- **表格列**：项目名称、项目类型、简介、实施开始/结束、运营图片数量、封面缩略图、发布状态、发布日期、创建时间、操作列。

---

## 4. 表单与上传

| 字段 | 规则 |
| --- | --- |
| `projectName` | 必填，1～20 字 |
| `projectType` | 必填，1 合作共赢 / 2 农文旅融合 / 3 认养农业 |
| `introduction` | 必填，1～50 字 |
| `projectContent` | 必填，1～500 字 |
| 实施日期 `implDateRange` | 必填；`daterange` 选区间，提交拆为 `implStartDate`、`implEndDate` |
| `operationImages` | 必填，1～3 项；元素 `{ fileUrl, filePath, sortOrder }` |
| `videoFileUrl` / `videoFilePath` | 选填；mp4，≤100MB |
| `coverFileUrl` / `coverFilePath` | 选填；jpg/jpeg/png，≤10MB |

- **上传**：`POST /common/upload`；运营图 `picture-card` 限 3；视频单文件按钮上传；封面 `picture-card` 限 1。
- **编辑态**：仅 `publishStatus === 0` 时可保存与替换附件。

---

## 5. 操作按钮与状态机

| 按钮 | 显示条件 | 权限标识 |
| --- | --- | --- |
| 查看 | 有 query 权限 | `commonProsperity:project:query` |
| 编辑 | 未发布 | `commonProsperity:project:edit` |
| 删除 | 未发布 | `commonProsperity:project:remove` |
| 发布 | 未发布 | `commonProsperity:project:publish` |
| 下架 | 已发布 | `commonProsperity:project:offline` |

下架后可再次编辑、发布，**无须新建**记录。

---

## 6. 国际化

| 项 | 说明 |
| --- | --- |
| **语言包** | `src/lang/zh/commonProsperity.js`、`src/lang/bo/commonProsperity.js`（`common` / `status` / `project`） |
| **注册** | `zh-CN.js`、`bo.js` 中 `import commonProsperity` |
| **Mixin** | `src/mixins/commonProsperityLocaleMixin.js`（`cpT`、`cpCommon`、`publishStatusText`） |
| **组件** | `data.cpNs = 'project'`，页面文案键 `commonProsperity.project.*`，通用键 `commonProsperity.common.*` |

---

## 7. 联调说明

1. 确认后端 `CommonProsperityProjectController`（或等价实现）已部署，`VUE_APP_BASE_API` 代理正确。
2. 执行 `sql/biz_common_prosperity_project.sql`（若尚未建表）并配置菜单、按钮权限与技术方案 §4 一致。
3. 列表字段 `opImageCount`、`operationImages` 与后端子表约定一致。
4. App 端「共富项目」列表可复用同一接口并固定 `publishStatus=1`。

---

## 8. 修订记录

| 版本 | 说明 |
| --- | --- |
| 1.0 | 初版：双卡片布局；运营图 1～3、视频/封面选填；发布/下架状态矩阵 |
| 1.1 | 国际化独立为 `commonProsperity.js`，不再放入 `policy.js` |
| 1.2 | 实施日期改为 `daterange` 单控件（对齐 `doc/前端设计/前端设计.md` 日期范围规范） |