# 枚举值中文显示修复指南

## 已完成的修复

✅ **订单列表** (`order/OrderListView.vue`)
✅ **售后订单** (`order/OrderAfterSaleView.vue`)
✅ **所有页面** - 已移除 `stripe` 隔行换色属性

## 枚举映射工具

已创建通用枚举映射工具：`frontend/src/utils/enumMappings.ts`

### 可用的转换函数

```typescript
// 订单相关
getOrderStatus(value)        // 订单状态
getShippingStatus(value)     // 发货状态
getPaymentStatus(value)      // 支付状态
getPriorityLabel(value)      // 优先级
getExceptionLabel(value)     // 异常标签

// 售后相关
getAuditStatus(value)        // 审核状态
getRefundStatus(value)       // 退款状态
getAfterSaleType(value)      // 售后类型

// 产品相关
getProductStatus(value)      // 产品状态

// 供应商相关
getSupplierStatus(value)     // 供应商状态
```

## 快速修复步骤

### 步骤 1: 在页面中导入工具

```vue
<script setup lang="ts">
import { getOrderStatus, getShippingStatus } from '@/utils/enumMappings';
</script>
```

### 步骤 2: 添加辅助函数

```vue
<script setup lang="ts">
// 方式1: 直接使用
const statusConfig = (s: string) => getOrderStatus(s);

// 方式2: 解构使用
const { label: statusLabel, type: statusType } = getOrderStatus(row.status);
</script>
```

### 步骤 3: 更新模板

**修改前（直接显示枚举值）：**
```vue
<el-table-column prop="status" label="状态" width="100">
  <template #default="{ row }">
    <el-tag :type="statusType(row.status)" size="small">
      {{ row.status }}
    </el-tag>
  </template>
</el-table-column>
```

**修改后（使用枚举映射）：**
```vue
<el-table-column prop="status" label="状态" width="100">
  <template #default="{ row }">
    <el-tag :type="statusConfig(row.status).type" size="small">
      {{ statusConfig(row.status).label }}
    </el-tag>
  </template>
</el-table-column>
```

## 需要修复的页面清单

根据搜索结果，以下页面可能包含枚举值显示问题：

### 高优先级（核心业务）
- [ ] `product/ProductListView.vue` - 产品状态
- [ ] `finance/PaymentView.vue` - 支付状态
- [ ] `finance/RefundView.vue` - 退款状态
- [ ] `warehouse/WarehouseView.vue` - 仓库状态
- [ ] `marketing/PromotionView.vue` - 活动状态

### 中优先级（管理功能）
- [ ] `crm/TicketView.vue` - 工单状态/优先级
- [ ] `crm/ServicePerformanceView.vue` - 服务状态
- [ ] `supplier/SupplierListView.vue` - 供应商状态
- [ ] `logistics/LogisticsProviderView.vue` - 物流商状态

### 低优先级（报表和配置）
- [ ] `report/*` - 各类报表页面
- [ ] `system/*` - 系统配置页面
- [ ] `inventory/*` - 库存页面

## 添加新的枚举映射

如果 `enumMappings.ts` 中没有你需要的枚举，按以下格式添加：

```typescript
// 在 enumMappings.ts 中添加
export const YOUR_ENUM: Record<string, { label: string; type: string }> = {
  key1: { label: '中文1', type: 'primary' },
  key2: { label: '中文2', type: 'success' },
  key3: { label: '中文3', type: 'warning' },
  key4: { label: '中文4', type: 'danger' },
  key5: { label: '中文5', type: 'info' },
};

// 添加快捷函数
export function getYourEnum(value: string) {
  return getEnumWithStyle(YOUR_ENUM, value);
}
```

## Tag 类型参考

```typescript
type: 'primary'    // 蓝色 - 主要信息
type: 'success'    // 绿色 - 成功/正常
type: 'warning'    // 橙色 - 警告/处理中
type: 'danger'     // 红色 - 危险/错误
type: 'info'       // 灰色 - 信息/禁用
```

## 常见问题

### Q: 后端返回的是中文，还需要映射吗？
A: 建议仍然使用枚举映射，这样可以：
1. 统一样式和类型
2. 防止后端返回值变化
3. 便于后期维护

### Q: 如何处理未知枚举值？
A: `getEnumWithStyle` 函数会自动返回原值和 `info` 类型，不会报错

### Q: 条件判断怎么处理？
A: 使用中文值进行判断：
```vue
<el-button v-if="row.status === '已完成'">查看</el-button>
```

## 验证修复

修复后请检查：
1. ✅ 所有状态显示中文
2. ✅ Tag 颜色符合语义
3. ✅ 筛选器选项使用中文
4. ✅ 没有直接显示英文枚举值

---

**注意**: 如果遇到问题或需要添加新的枚举映射，请参考 `OrderListView.vue` 和 `OrderAfterSaleView.vue` 的实现示例。