生产管理系统前端 - 更新瓦力提交的产品原型到参考目录
This commit is contained in:
563
src/ISSUE_STATUS_LOCALIZATION.md
Normal file
563
src/ISSUE_STATUS_LOCALIZATION.md
Normal file
@@ -0,0 +1,563 @@
|
||||
# 问题管理状态中文化更新
|
||||
|
||||
## 📅 更新时间
|
||||
2025-10-16
|
||||
|
||||
## 🎯 更新概述
|
||||
|
||||
将驾驶员任务管理-问题管理页面的状态显示统一为中文，解决了之前英文状态值（pending/processing/resolved）直接显示的问题。
|
||||
|
||||
## ✨ 主要改进
|
||||
|
||||
### 1. 新增状态转换函数
|
||||
|
||||
添加了 `getStatusText()` 函数，统一处理状态的中英文转换：
|
||||
|
||||
```typescript
|
||||
// 状态转换为中文
|
||||
const getStatusText = (status: string) => {
|
||||
switch (status) {
|
||||
case 'pending':
|
||||
return '待处理';
|
||||
case 'processing':
|
||||
return '处理中';
|
||||
case 'resolved':
|
||||
return '已解决';
|
||||
case '待处理':
|
||||
case '处理中':
|
||||
case '已解决':
|
||||
return status;
|
||||
default:
|
||||
return status;
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
**特点**:
|
||||
- ✅ 兼容英文状态值（pending/processing/resolved）
|
||||
- ✅ 兼容中文状态值（待处理/处理中/已解决）
|
||||
- ✅ 统一返回中文显示
|
||||
- ✅ 未知状态原样返回
|
||||
|
||||
### 2. 状态对照表
|
||||
|
||||
| 英文值 | 中文显示 | 颜色 | 图标 |
|
||||
|--------|---------|------|------|
|
||||
| pending | 待处理 | 🟠 橙色 | AlertCircle |
|
||||
| processing | 处理中 | 🔵 蓝色 | Clock |
|
||||
| resolved | 已解决 | 🟢 绿色 | CheckCircle |
|
||||
|
||||
### 3. 应用场景
|
||||
|
||||
#### 问题列表表格
|
||||
```tsx
|
||||
<TableCell>
|
||||
<Badge variant="secondary" className={getStatusColor(issue.status)}>
|
||||
{getStatusText(issue.status)} {/* 使用转换函数 */}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
```
|
||||
|
||||
**显示效果**:
|
||||
```
|
||||
数据库值: "pending" → 页面显示: "待处理" 🟠
|
||||
数据库值: "processing" → 页面显示: "处理中" 🔵
|
||||
数据库值: "resolved" → 页面显示: "已解决" 🟢
|
||||
数据库值: "待处理" → 页面显示: "待处理" 🟠
|
||||
```
|
||||
|
||||
#### 问题详情对话框
|
||||
```tsx
|
||||
<Badge variant="secondary" className={getStatusColor(selectedIssue.status)}>
|
||||
{getStatusText(selectedIssue.status)} {/* 统一显示中文 */}
|
||||
</Badge>
|
||||
```
|
||||
|
||||
## 📊 修改前后对比
|
||||
|
||||
### 修改前 ❌
|
||||
|
||||
```
|
||||
问题列表显示:
|
||||
┌──────────────────────────────────────┐
|
||||
│ 状态 │
|
||||
├──────────────────────────────────────┤
|
||||
│ pending ← 直接显示英文 │
|
||||
│ processing ← 直接显示英文 │
|
||||
│ resolved ← 直接显示英文 │
|
||||
│ 待处理 ← 中文状态正常 │
|
||||
└──────────────────────────────────────┘
|
||||
|
||||
问题:
|
||||
❌ 英文状态值直接显示，不友好
|
||||
❌ 中英文混杂，不统一
|
||||
❌ 用户体验差
|
||||
```
|
||||
|
||||
### 修改后 ✅
|
||||
|
||||
```
|
||||
问题列表显示:
|
||||
┌──────────────────────────────────────┐
|
||||
│ 状态 │
|
||||
├──────────────────────────────────────┤
|
||||
│ 待处理 🟠 ← 统一中文显示 │
|
||||
│ 处理中 🔵 ← 统一中文显示 │
|
||||
│ 已解决 🟢 ← 统一中文显示 │
|
||||
│ 待处理 🟠 ← 中文状态保持 │
|
||||
└──────────────────────────────────────┘
|
||||
|
||||
优势:
|
||||
✅ 所有状态统一中文显示
|
||||
✅ 界面清晰友好
|
||||
✅ 用户体验优秀
|
||||
✅ 兼容新旧数据
|
||||
```
|
||||
|
||||
## 🎨 状态视觉设计
|
||||
|
||||
### 状态徽章样式
|
||||
|
||||
#### 待处理（pending）
|
||||
```tsx
|
||||
<Badge className="bg-orange-100 text-orange-800">
|
||||
待处理
|
||||
</Badge>
|
||||
```
|
||||
- **颜色**: 🟠 橙色（警告色）
|
||||
- **含义**: 需要关注和处理
|
||||
- **图标**: AlertCircle
|
||||
|
||||
#### 处理中（processing）
|
||||
```tsx
|
||||
<Badge className="bg-blue-100 text-blue-800">
|
||||
处理中
|
||||
</Badge>
|
||||
```
|
||||
- **颜色**: 🔵 蓝色（进行中）
|
||||
- **含义**: 正在处理
|
||||
- **图标**: Clock
|
||||
|
||||
#### 已解决（resolved）
|
||||
```tsx
|
||||
<Badge className="bg-green-100 text-green-800">
|
||||
已解决
|
||||
</Badge>
|
||||
```
|
||||
- **颜色**: 🟢 绿色（成功色）
|
||||
- **含义**: 问题已解决
|
||||
- **图标**: CheckCircle
|
||||
|
||||
## 📁 修改文件
|
||||
|
||||
### 核心文件
|
||||
1. ✅ `/components/machinery/driver/IssueManagement.tsx`
|
||||
|
||||
### 修改内容
|
||||
|
||||
#### 1. 新增状态转换函数
|
||||
```typescript
|
||||
// 位置: 第 142 行
|
||||
const getStatusText = (status: string) => {
|
||||
switch (status) {
|
||||
case 'pending':
|
||||
return '待处理';
|
||||
case 'processing':
|
||||
return '处理中';
|
||||
case 'resolved':
|
||||
return '已解决';
|
||||
case '待处理':
|
||||
case '处理中':
|
||||
case '已解决':
|
||||
return status;
|
||||
default:
|
||||
return status;
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### 2. 更新表格状态显示
|
||||
```typescript
|
||||
// 位置: 第 342-346 行
|
||||
<TableCell>
|
||||
<Badge variant="secondary" className={getStatusColor(issue.status)}>
|
||||
{getStatusText(issue.status)} {/* 更新 */}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
```
|
||||
|
||||
#### 3. 更新详情对话框状态显示
|
||||
```typescript
|
||||
// 位置: 第 435-437 行
|
||||
<Badge variant="secondary" className={getStatusColor(selectedIssue.status)}>
|
||||
{getStatusText(selectedIssue.status)} {/* 更新 */}
|
||||
</Badge>
|
||||
```
|
||||
|
||||
## 🔄 数据兼容性
|
||||
|
||||
### 兼容策略
|
||||
|
||||
**新数据**:
|
||||
```typescript
|
||||
// 保存时使用英文值
|
||||
issue.status = 'pending' // 数据库存储
|
||||
issue.status = 'processing' // 数据库存储
|
||||
issue.status = 'resolved' // 数据库存储
|
||||
|
||||
// 显示时自动转换为中文
|
||||
getStatusText('pending') // → '待处理'
|
||||
getStatusText('processing') // → '处理中'
|
||||
getStatusText('resolved') // → '已解决'
|
||||
```
|
||||
|
||||
**旧数据**:
|
||||
```typescript
|
||||
// 如果已经是中文，直接返回
|
||||
getStatusText('待处理') // → '待处理'
|
||||
getStatusText('处理中') // → '处理中'
|
||||
getStatusText('已解决') // → '已解决'
|
||||
```
|
||||
|
||||
**混合场景**:
|
||||
```typescript
|
||||
// 筛选器仍然兼容两种格式
|
||||
stats.pending = allIssues.filter(
|
||||
i => i.status === 'pending' || i.status === '待处理'
|
||||
).length;
|
||||
```
|
||||
|
||||
## 💡 使用示例
|
||||
|
||||
### 场景1: 显示问题列表
|
||||
|
||||
```tsx
|
||||
function IssueList({ issues }) {
|
||||
return (
|
||||
<Table>
|
||||
<TableBody>
|
||||
{issues.map(issue => (
|
||||
<TableRow key={issue.id}>
|
||||
<TableCell>
|
||||
{/* 自动转换为中文 */}
|
||||
<Badge className={getStatusColor(issue.status)}>
|
||||
{getStatusText(issue.status)}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
|
||||
// 示例数据
|
||||
const issues = [
|
||||
{ id: 1, status: 'pending' }, // 显示: 待处理 🟠
|
||||
{ id: 2, status: 'processing' }, // 显示: 处理中 🔵
|
||||
{ id: 3, status: 'resolved' }, // 显示: 已解决 🟢
|
||||
{ id: 4, status: '待处理' }, // 显示: 待处理 🟠
|
||||
];
|
||||
```
|
||||
|
||||
### 场景2: 问题详情
|
||||
|
||||
```tsx
|
||||
function IssueDetail({ issue }) {
|
||||
return (
|
||||
<div>
|
||||
<h3>问题状态</h3>
|
||||
{/* 统一中文显示 */}
|
||||
<Badge className={getStatusColor(issue.status)}>
|
||||
{getStatusText(issue.status)}
|
||||
</Badge>
|
||||
|
||||
{/* 根据状态显示不同操作 */}
|
||||
{(issue.status === 'pending' || issue.status === '待处理') && (
|
||||
<Button>立即处理</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 场景3: 统计信息
|
||||
|
||||
```tsx
|
||||
const stats = {
|
||||
pending: allIssues.filter(
|
||||
i => i.status === 'pending' || i.status === '待处理'
|
||||
).length,
|
||||
processing: allIssues.filter(
|
||||
i => i.status === 'processing' || i.status === '处理中'
|
||||
).length,
|
||||
resolved: allIssues.filter(
|
||||
i => i.status === 'resolved' || i.status === '已解决'
|
||||
).length,
|
||||
};
|
||||
|
||||
// 显示统计
|
||||
<Card>
|
||||
<div>待处理: {stats.pending}</div>
|
||||
<div>处理中: {stats.processing}</div>
|
||||
<div>已解决: {stats.resolved}</div>
|
||||
</Card>
|
||||
```
|
||||
|
||||
## 🎯 最佳实践
|
||||
|
||||
### 1. 数据存储
|
||||
|
||||
**推荐做法** ✅:
|
||||
```typescript
|
||||
// 使用英文值存储，便于国际化
|
||||
const newIssue = {
|
||||
status: 'pending', // 存储英文
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
**不推荐** ❌:
|
||||
```typescript
|
||||
// 直接存储中文，不利于国际化
|
||||
const newIssue = {
|
||||
status: '待处理', // 不推荐
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
### 2. 状态判断
|
||||
|
||||
**推荐做法** ✅:
|
||||
```typescript
|
||||
// 兼容两种格式
|
||||
if (issue.status === 'pending' || issue.status === '待处理') {
|
||||
// 处理待处理状态
|
||||
}
|
||||
```
|
||||
|
||||
**简化写法** ✅:
|
||||
```typescript
|
||||
// 使用辅助函数
|
||||
const isPending = (status) =>
|
||||
status === 'pending' || status === '待处理';
|
||||
|
||||
if (isPending(issue.status)) {
|
||||
// 处理待处理状态
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 状态更新
|
||||
|
||||
**推荐做法** ✅:
|
||||
```typescript
|
||||
// 更新状态时使用英文
|
||||
const handleResolve = () => {
|
||||
updateIssue({
|
||||
...issue,
|
||||
status: 'resolved', // 使用英文
|
||||
});
|
||||
};
|
||||
```
|
||||
|
||||
### 4. 筛选器
|
||||
|
||||
**推荐做法** ✅:
|
||||
```tsx
|
||||
<Select value={filterStatus} onValueChange={setFilterStatus}>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部状态</SelectItem>
|
||||
<SelectItem value="待处理">待处理</SelectItem>
|
||||
<SelectItem value="pending">待处理</SelectItem> {/* 兼容 */}
|
||||
<SelectItem value="处理中">处理中</SelectItem>
|
||||
<SelectItem value="processing">处理中</SelectItem> {/* 兼容 */}
|
||||
<SelectItem value="已解决">已解决</SelectItem>
|
||||
<SelectItem value="resolved">已解决</SelectItem> {/* 兼容 */}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
```
|
||||
|
||||
## 🐛 常见问题
|
||||
|
||||
### Q1: 为什么使用英文值存储？
|
||||
|
||||
**A**: 出于以下考虑：
|
||||
- ✅ **国际化支持**: 便于后续多语言扩展
|
||||
- ✅ **数据标准**: 英文值更标准，不受编码影响
|
||||
- ✅ **兼容性**: 避免中文编码问题
|
||||
- ✅ **可维护性**: 状态值不随语言变化
|
||||
|
||||
### Q2: 如何处理旧数据中的中文状态？
|
||||
|
||||
**A**: `getStatusText()` 函数已兼容中文状态：
|
||||
|
||||
```typescript
|
||||
getStatusText('待处理') // → '待处理' (原样返回)
|
||||
getStatusText('pending') // → '待处理' (转换)
|
||||
```
|
||||
|
||||
### Q3: 筛选器为什么要同时支持中英文？
|
||||
|
||||
**A**: 为了兼容现有数据：
|
||||
|
||||
```typescript
|
||||
// 筛选器支持两种格式
|
||||
filterStatus === 'pending' || filterStatus === '待处理'
|
||||
|
||||
// 数据库中可能同时存在两种格式
|
||||
allIssues.filter(i =>
|
||||
i.status === 'pending' || i.status === '待处理'
|
||||
)
|
||||
```
|
||||
|
||||
### Q4: 如何迁移旧数据？
|
||||
|
||||
**A**: 可以编写数据迁移脚本：
|
||||
|
||||
```typescript
|
||||
// 数据迁移示例
|
||||
const migrateIssueStatus = () => {
|
||||
const tasks = JSON.parse(
|
||||
localStorage.getItem('smart_agriculture_driver_tasks') || '[]'
|
||||
);
|
||||
|
||||
const migratedTasks = tasks.map(task => ({
|
||||
...task,
|
||||
issues: task.issues.map(issue => ({
|
||||
...issue,
|
||||
status: issue.status === '待处理' ? 'pending' :
|
||||
issue.status === '处理中' ? 'processing' :
|
||||
issue.status === '已解决' ? 'resolved' :
|
||||
issue.status
|
||||
}))
|
||||
}));
|
||||
|
||||
localStorage.setItem(
|
||||
'smart_agriculture_driver_tasks',
|
||||
JSON.stringify(migratedTasks)
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Q5: DriverTask.tsx 中的状态显示是否一致？
|
||||
|
||||
**A**: 是的，DriverTask.tsx 已经有类似的转换逻辑：
|
||||
|
||||
```tsx
|
||||
// DriverTask.tsx 中的状态显示
|
||||
{issue.status === 'pending' ? '待处理' :
|
||||
issue.status === 'processing' ? '处理中' :
|
||||
issue.status === 'resolved' ? '已解决' : issue.status}
|
||||
```
|
||||
|
||||
两个组件的状态显示逻辑一致。
|
||||
|
||||
## 📊 组件间一致性
|
||||
|
||||
### 状态显示对比
|
||||
|
||||
| 组件 | 状态转换方式 | 是否统一 |
|
||||
|------|-------------|---------|
|
||||
| IssueManagement.tsx | `getStatusText()` 函数 | ✅ |
|
||||
| DriverTask.tsx | 三元表达式 | ✅ |
|
||||
| 两者显示结果 | 完全一致 | ✅ |
|
||||
|
||||
### 建议优化
|
||||
|
||||
可以将 `getStatusText()` 函数提取到共享工具文件：
|
||||
|
||||
```typescript
|
||||
// /lib/issueUtils.ts
|
||||
export const getIssueStatusText = (status: string): string => {
|
||||
switch (status) {
|
||||
case 'pending':
|
||||
return '待处理';
|
||||
case 'processing':
|
||||
return '处理中';
|
||||
case 'resolved':
|
||||
return '已解决';
|
||||
case '待处理':
|
||||
case '处理中':
|
||||
case '已解决':
|
||||
return status;
|
||||
default:
|
||||
return status;
|
||||
}
|
||||
};
|
||||
|
||||
export const getIssueStatusColor = (status: string): string => {
|
||||
switch (status) {
|
||||
case 'pending':
|
||||
case '待处理':
|
||||
return 'bg-orange-100 text-orange-800';
|
||||
case 'processing':
|
||||
case '处理中':
|
||||
return 'bg-blue-100 text-blue-800';
|
||||
case 'resolved':
|
||||
case '已解决':
|
||||
return 'bg-green-100 text-green-800';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-800';
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
然后在两个组件中导入使用：
|
||||
|
||||
```typescript
|
||||
import { getIssueStatusText, getIssueStatusColor } from '../../../lib/issueUtils';
|
||||
```
|
||||
|
||||
## ✅ 验证清单
|
||||
|
||||
### 显示验证
|
||||
- [x] 问题列表表格中状态显示为中文
|
||||
- [x] 问题详情对话框中状态显示为中文
|
||||
- [x] 统计卡片中状态文字为中文
|
||||
- [x] 筛选器选项显示为中文
|
||||
|
||||
### 功能验证
|
||||
- [x] pending 状态正确显示为"待处理"
|
||||
- [x] processing 状态正确显示为"处理中"
|
||||
- [x] resolved 状态正确显示为"已解决"
|
||||
- [x] 中文状态正常显示
|
||||
- [x] 状态筛选功能正常
|
||||
|
||||
### 兼容性验证
|
||||
- [x] 英文状态数据正常显示
|
||||
- [x] 中文状态数据正常显示
|
||||
- [x] 混合状态数据正常显示
|
||||
- [x] 状态统计正确
|
||||
- [x] 筛选功能兼容两种格式
|
||||
|
||||
### 视觉验证
|
||||
- [x] 待处理显示橙色
|
||||
- [x] 处理中显示蓝色
|
||||
- [x] 已解决显示绿色
|
||||
- [x] 徽章样式统一
|
||||
- [x] 颜色清晰易识别
|
||||
|
||||
## 🎉 总结
|
||||
|
||||
本次更新成功实现了问题管理页面状态的中文化显示：
|
||||
|
||||
### 核心改进
|
||||
✅ **统一中文界面** - 所有状态徽章显示中文
|
||||
✅ **数据兼容** - 支持英文和中文状态值
|
||||
✅ **视觉清晰** - 颜色语义化，易于识别
|
||||
✅ **用户友好** - 界面完全中文化
|
||||
|
||||
### 技术亮点
|
||||
✅ **转换函数** - 统一的状态转换逻辑
|
||||
✅ **兼容性好** - 支持新旧数据格式
|
||||
✅ **易维护** - 集中的状态处理逻辑
|
||||
✅ **可扩展** - 便于未来国际化
|
||||
|
||||
现在问题管理页面的状态显示完全中文化，用户体验更加友好！🎊
|
||||
|
||||
---
|
||||
|
||||
**更新人**: AI助手
|
||||
**更新日期**: 2025-10-16
|
||||
**版本**: v1.1
|
||||
**影响范围**: 问题管理页面状态显示
|
||||
Reference in New Issue
Block a user