# 反馈管理页面设计文档
## 1. 页面概述
反馈管理页面是管理员和主管处理用户提交的环境问题报告、建议或其他反馈的核心平台。此页面旨在提供一个高效的工作流程，用于审查、分类、回复和跟踪所有用户反馈，确保问题得到及时响应和解决。
## 2. 页面布局
### 2.1 布局结构
页面布局与任务管理页面类似，遵循标准的后台管理界面设计：
- **顶部**: 筛选区域，允许管理员按反馈状态（待处理、已处理）、反馈类型或提交时间进行过滤。
- **中部**: 反馈列表，以表格或卡片列表的形式展示反馈信息。
- **底部**: 分页控件。
### 2.2 响应式设计
- **桌面端**: 使用多列数据表格，清晰展示反馈的各项信息。
- **移动端**: 转换为卡片式列表，每张卡片突出显示反馈标题、提交人和状态，并提供点击查看详情的入口。
## 3. 组件结构
```vue
搜索
{{ row.status === 'PENDING' ? '待处理' : '已处理' }}
查看详情
```
## 4. 数据结构
```typescript
// 反馈筛选条件
interface FeedbackFilters {
status?: 'PENDING' | 'RESOLVED';
submitter?: string;
}
// 反馈列表项
interface FeedbackListItem {
id: number;
title: string;
submitterName: string;
createdAt: string;
status: 'PENDING' | 'RESOLVED';
}
// 反馈详情 (用于对话框)
interface FeedbackDetail extends FeedbackListItem {
content: string;
images: string[]; // 图片 URL 列表
location: string;
contact: string;
handlerNotes?: string; // 处理备注
}
```
## 5. 状态管理
```typescript
// 组件内状态
const filters = ref({});
const pagination = ref({ page: 1, pageSize: 10 });
const dialogVisible = ref(false);
const selectedFeedbackId = ref(null);
// 全局状态 (Pinia Store)
const feedbackStore = useFeedbackStore();
const { feedbackList, total, loading } = storeToRefs(feedbackStore);
```
## 6. 交互逻辑
### 6.1 数据获取与筛选
```typescript
const fetchFeedback = () => {
feedbackStore.fetchFeedbackList({ ...filters.value, ...pagination.value });
};
onMounted(fetchFeedback);
const handleSearch = () => {
pagination.value.page = 1;
fetchFeedback();
};
// 分页逻辑 (handleSizeChange, handleCurrentChange) 与任务管理页面类似
```
### 6.2 查看详情与处理
```typescript
const handleViewDetails = (feedback: FeedbackListItem) => {
selectedFeedbackId.value = feedback.id;
dialogVisible.value = true;
};
// 当详情对话框中完成处理后被调用
const handleProcessed = () => {
dialogVisible.value = false;
fetchFeedback(); // 刷新列表以更新状态
};
```
## 7. API 调用
### 7.1 反馈管理 API
```typescript
// api/feedback.ts
export const feedbackApi = {
getFeedbackList: (params) => apiClient.get('/management/feedback', { params }),
getFeedbackDetail: (id: number) => apiClient.get(`/management/feedback/${id}`),
processFeedback: (id: number, data: { notes: string }) => apiClient.post(`/management/feedback/${id}/process`, data),
};
```
### 7.2 Pinia Store
```typescript
// stores/feedback.ts
export const useFeedbackStore = defineStore('feedback', {
state: () => ({
feedbackList: [] as FeedbackListItem[],
total: 0,
loading: false,
currentFeedbackDetail: null as FeedbackDetail | null,
}),
actions: {
async fetchFeedbackList(params) {
this.loading = true;
try {
const { data } = await feedbackApi.getFeedbackList(params);
this.feedbackList = data.items;
this.total = data.total;
} finally {
this.loading = false;
}
},
async fetchFeedbackDetail(id: number) {
const { data } = await feedbackApi.getFeedbackDetail(id);
this.currentFeedbackDetail = data;
},
async processFeedback(payload: { id: number; notes: string }) {
await feedbackApi.processFeedback(payload.id, { notes: payload.notes });
}
}
});
```
## 8. 样式设计
```scss
.feedback-management-page {
padding: 24px;
.page-container {
margin-top: 24px;
padding: 24px;
border-radius: 8px;
border: none;
}
.filter-container {
margin-bottom: 20px;
}
.pagination-container {
margin-top: 24px;
display: flex;
justify-content: flex-end;
}
}
```
## 9. 关联组件
### `FeedbackDetailDialog.vue`
这是一个关键的子组件，用于显示反馈的完整信息，并提供处理功能。
- **Props**: `modelValue` (for v-model), `feedbackId`
- **功能**:
- 接收 `feedbackId`，在对话框打开时调用 store action 获取反馈详情。
- 展示反馈的文本内容、联系方式、地理位置和图片（图片可点击放大预览）。
- 提供一个文本域供管理员填写处理备注。
- 提供一个"标记为已处理"的按钮，点击后调用 store action 提交处理结果。
- 操作成功后，emit 一个 `processed` 事件通知父组件刷新列表。
## 10. 测试用例
1. **单元测试**:
- 测试 Pinia store 的各个 action 是否能正常工作。
- 测试 `FeedbackDetailDialog` 组件在接收到 `feedbackId` 后是否能正确加载和显示数据。
2. **集成测试**:
- 测试筛选功能是否能正确过滤反馈列表。
- 测试分页是否正常。
- 测试点击"查看详情"按钮是否能打开对话框并加载正确的反馈信息。
- 测试在详情对话框中提交处理意见后，列表中的反馈状态是否更新。