cavin/smart-crop-ui

Fork 0

Files

peng 28229ce795 生产管理系统前端 - 更新瓦力提交的产品原型到参考目录

2025-10-23 10:57:14 +08:00

14 KiB

Raw Blame History

问题管理状态中文化更新

📅 更新时间

2025-10-16

🎯 更新概述

将驾驶员任务管理-问题管理页面的状态显示统一为中文，解决了之前英文状态值（pending/processing/resolved）直接显示的问题。

✨ 主要改进

1. 新增状态转换函数

添加了 getStatusText() 函数，统一处理状态的中英文转换：

// 状态转换为中文
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. 应用场景

问题列表表格

<TableCell>
  <Badge variant="secondary" className={getStatusColor(issue.status)}>
    {getStatusText(issue.status)}  {/* 使用转换函数 */}
  </Badge>
</TableCell>

显示效果:

数据库值: "pending"    → 页面显示: "待处理" 🟠
数据库值: "processing" → 页面显示: "处理中" 🔵
数据库值: "resolved"   → 页面显示: "已解决" 🟢
数据库值: "待处理"     → 页面显示: "待处理" 🟠

问题详情对话框

<Badge variant="secondary" className={getStatusColor(selectedIssue.status)}>
  {getStatusText(selectedIssue.status)}  {/* 统一显示中文 */}
</Badge>

📊 修改前后对比

修改前 ❌

问题列表显示:
┌──────────────────────────────────────┐
│ 状态                                  │
├──────────────────────────────────────┤
│ pending      ← 直接显示英文           │
│ processing   ← 直接显示英文           │
│ resolved     ← 直接显示英文           │
│ 待处理       ← 中文状态正常           │
└──────────────────────────────────────┘

问题:
❌ 英文状态值直接显示，不友好
❌ 中英文混杂，不统一
❌ 用户体验差

修改后 ✅

问题列表显示:
┌──────────────────────────────────────┐
│ 状态                                  │
├──────────────────────────────────────┤
│ 待处理 🟠  ← 统一中文显示            │
│ 处理中 🔵  ← 统一中文显示            │
│ 已解决 🟢  ← 统一中文显示            │
│ 待处理 🟠  ← 中文状态保持            │
└──────────────────────────────────────┘

优势:
✅ 所有状态统一中文显示
✅ 界面清晰友好
✅ 用户体验优秀
✅ 兼容新旧数据

🎨 状态视觉设计

状态徽章样式

待处理（pending）

<Badge className="bg-orange-100 text-orange-800">
  待处理
</Badge>

颜色: 🟠 橙色（警告色）
含义: 需要关注和处理
图标: AlertCircle

处理中（processing）

<Badge className="bg-blue-100 text-blue-800">
  处理中
</Badge>

颜色: 🔵 蓝色（进行中）
含义: 正在处理
图标: Clock

已解决（resolved）

<Badge className="bg-green-100 text-green-800">
  已解决
</Badge>

颜色: 🟢 绿色（成功色）
含义: 问题已解决
图标: CheckCircle

📁 修改文件

核心文件

✅ /components/machinery/driver/IssueManagement.tsx

修改内容

1. 新增状态转换函数

// 位置: 第 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. 更新表格状态显示

// 位置: 第 342-346 行
<TableCell>
  <Badge variant="secondary" className={getStatusColor(issue.status)}>
    {getStatusText(issue.status)}  {/* 更新 */}
  </Badge>
</TableCell>

3. 更新详情对话框状态显示

// 位置: 第 435-437 行
<Badge variant="secondary" className={getStatusColor(selectedIssue.status)}>
  {getStatusText(selectedIssue.status)}  {/* 更新 */}
</Badge>

🔄 数据兼容性

兼容策略

新数据:

// 保存时使用英文值
issue.status = 'pending'     // 数据库存储
issue.status = 'processing'  // 数据库存储
issue.status = 'resolved'    // 数据库存储

// 显示时自动转换为中文
getStatusText('pending')     // → '待处理'
getStatusText('processing')  // → '处理中'
getStatusText('resolved')    // → '已解决'

旧数据:

// 如果已经是中文，直接返回
getStatusText('待处理')  // → '待处理'
getStatusText('处理中')  // → '处理中'
getStatusText('已解决')  // → '已解决'

混合场景:

// 筛选器仍然兼容两种格式
stats.pending = allIssues.filter(
  i => i.status === 'pending' || i.status === '待处理'
).length;

💡 使用示例

场景1: 显示问题列表

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: 问题详情

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: 统计信息

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. 数据存储

推荐做法 ✅:

// 使用英文值存储，便于国际化
const newIssue = {
  status: 'pending',     // 存储英文
  // ...
};

不推荐 ❌:

// 直接存储中文，不利于国际化
const newIssue = {
  status: '待处理',  // 不推荐
  // ...
};

2. 状态判断

推荐做法 ✅:

// 兼容两种格式
if (issue.status === 'pending' || issue.status === '待处理') {
  // 处理待处理状态
}

简化写法 ✅:

// 使用辅助函数
const isPending = (status) => 
  status === 'pending' || status === '待处理';

if (isPending(issue.status)) {
  // 处理待处理状态
}

3. 状态更新

推荐做法 ✅:

// 更新状态时使用英文
const handleResolve = () => {
  updateIssue({
    ...issue,
    status: 'resolved',  // 使用英文
  });
};

4. 筛选器

推荐做法 ✅:

<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() 函数已兼容中文状态：

getStatusText('待处理')  // → '待处理' (原样返回)
getStatusText('pending')  // → '待处理' (转换)

Q3: 筛选器为什么要同时支持中英文？

A: 为了兼容现有数据：

// 筛选器支持两种格式
filterStatus === 'pending' || filterStatus === '待处理'

// 数据库中可能同时存在两种格式
allIssues.filter(i => 
  i.status === 'pending' || i.status === '待处理'
)

Q4: 如何迁移旧数据？

A: 可以编写数据迁移脚本：

// 数据迁移示例
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 已经有类似的转换逻辑：

// DriverTask.tsx 中的状态显示
{issue.status === 'pending' ? '待处理' : 
 issue.status === 'processing' ? '处理中' :
 issue.status === 'resolved' ? '已解决' : issue.status}

两个组件的状态显示逻辑一致。

📊 组件间一致性

状态显示对比

组件	状态转换方式	是否统一
IssueManagement.tsx	`getStatusText()` 函数	✅
DriverTask.tsx	三元表达式	✅
两者显示结果	完全一致	✅

建议优化

可以将 getStatusText() 函数提取到共享工具文件：

// /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';
  }
};

然后在两个组件中导入使用：

import { getIssueStatusText, getIssueStatusColor } from '../../../lib/issueUtils';

✅ 验证清单

显示验证

问题列表表格中状态显示为中文
问题详情对话框中状态显示为中文
统计卡片中状态文字为中文
筛选器选项显示为中文

功能验证

pending 状态正确显示为"待处理"
processing 状态正确显示为"处理中"
resolved 状态正确显示为"已解决"
中文状态正常显示
状态筛选功能正常

兼容性验证

英文状态数据正常显示
中文状态数据正常显示
混合状态数据正常显示
状态统计正确
筛选功能兼容两种格式

视觉验证

待处理显示橙色
处理中显示蓝色
已解决显示绿色
徽章样式统一
颜色清晰易识别

🎉 总结

本次更新成功实现了问题管理页面状态的中文化显示：

核心改进

✅ 统一中文界面 - 所有状态徽章显示中文
✅ 数据兼容 - 支持英文和中文状态值
✅ 视觉清晰 - 颜色语义化，易于识别
✅ 用户友好 - 界面完全中文化

技术亮点

✅ 转换函数 - 统一的状态转换逻辑
✅ 兼容性好 - 支持新旧数据格式
✅ 易维护 - 集中的状态处理逻辑
✅ 可扩展 - 便于未来国际化

现在问题管理页面的状态显示完全中文化，用户体验更加友好！🎊

更新人: AI助手
更新日期: 2025-10-16
版本: v1.1
影响范围: 问题管理页面状态显示

14 KiB Raw Blame History Unescape Escape

问题管理状态中文化更新

📅 更新时间

🎯 更新概述

✨ 主要改进

1. 新增状态转换函数

2. 状态对照表

3. 应用场景

问题列表表格

问题详情对话框

📊 修改前后对比

修改前 ❌

修改后 ✅

🎨 状态视觉设计

状态徽章样式

待处理（pending）

处理中（processing）

已解决（resolved）

📁 修改文件

核心文件

修改内容

1. 新增状态转换函数

2. 更新表格状态显示

3. 更新详情对话框状态显示

🔄 数据兼容性

兼容策略

💡 使用示例

场景1: 显示问题列表

场景2: 问题详情

场景3: 统计信息

🎯 最佳实践

1. 数据存储

2. 状态判断

3. 状态更新

4. 筛选器

🐛 常见问题

Q1: 为什么使用英文值存储？

Q2: 如何处理旧数据中的中文状态？

Q3: 筛选器为什么要同时支持中英文？

Q4: 如何迁移旧数据？

Q5: DriverTask.tsx 中的状态显示是否一致？

📊 组件间一致性

状态显示对比

建议优化

✅ 验证清单

显示验证

功能验证

兼容性验证

视觉验证

🎉 总结

核心改进

技术亮点

14 KiB

Raw Blame History