@agile-team/wl-skills-kit 1.0.0

package/files/src/components/global/C_SvgIcon/svgicon.js

@@ -0,0 +1,10 @@
+import * as components from '@element-plus/icons-vue'
+
+export default {
+  install: (app) => {
+    for(const key in components) {
+      const componentConfig = components[key]
+      app.component(componentConfig.name, componentConfig)
+    }
+  },
+}

package/files/src/components/global/C_TagStatus/README.md

@@ -0,0 +1,264 @@
+# C_TagStatus 状态标签组件
+
+## 📖 简介
+
+`C_TagStatus` 是一个统一的状态标签组件，基于 Element Plus 的 `el-tag` 封装，用于在表格、表单等场景中展示各种状态信息。
+
+**特性**：
+
+- ✅ 开箱即用，预配置了棒线材模块所有状态
+- ✅ 视觉精致，圆角标签 + 语义化配色
+- ✅ 类型安全，完整的 TypeScript 支持
+- ✅ 易于扩展，支持自定义状态配置
+- ✅ 性能优秀，组件级复用
+
+---
+
+## 🎨 效果预览
+
+```
+[待下达]  [已下达]  [执行中]  [已完成]  [已取消]
+ 灰色      蓝色      橙色      绿色      红色
+```
+
+---
+
+## 🚀 快速开始
+
+### 1. 基础用法（在模板中使用）
+
+```vue
+<template>
+  <C_TagStatus :value="row.planStatus" type="plan" />
+  <C_TagStatus :value="row.prodStatus" type="product" />
+  <C_TagStatus :value="row.isHot" type="boolean" />
+</template>
+```
+
+### 2. 在表格列中使用（推荐）
+
+```typescript
+import { renderPlanStatus, renderProductStatus } from '@/util/status-render';
+
+// 方式1：使用预定义的渲染器
+{
+  label: "计划状态",
+  name: "planStatus",
+  minWidth: 120,
+  customRender: (row) => renderPlanStatus(row, 'planStatus')
+}
+
+// 方式2：使用通用渲染函数
+{
+  label: "产品状态",
+  name: "prodStatus",
+  minWidth: 120,
+  customRender: (row) => renderStatusTag(row, 'prodStatus', { type: 'product' })
+}
+
+// 方式3：自定义点击事件
+{
+  label: "材料状态",
+  name: "matStatus",
+  minWidth: 120,
+  customRender: (row) => renderStatusTag(row, 'matStatus', {
+    type: 'material',
+    onClick: (row, value, event) => {
+      console.log('点击了状态', row, value);
+    }
+  })
+}
+```
+
+---
+
+## 📝 组件属性
+
+| 属性          | 说明       | 类型                          | 可选值                                                     | 默认值  |
+| ------------- | ---------- | ----------------------------- | ---------------------------------------------------------- | ------- |
+| value         | 状态值     | `string \| number \| boolean` | -                                                          | -       |
+| type          | 状态类型   | `StatusType \| string`        | plan/product/material/process/sampling/sample/slab/boolean | -       |
+| size          | 尺寸       | `string`                      | large/default/small                                        | `small` |
+| round         | 是否圆角   | `boolean`                     | -                                                          | `true`  |
+| closable      | 是否可关闭 | `boolean`                     | -                                                          | `false` |
+| defaultEffect | 默认效果   | `TagEffect`                   | light/dark/plain                                           | `light` |
+
+---
+
+## 🎯 状态类型说明
+
+### 1. 计划状态 (plan)
+
+**字典**: `mmwrMillPlanStatus` / `mmwrFinishPlanStatus`
+
+| 状态值 | 显示文本 | 颜色 |
+| ------ | -------- | ---- |
+| 0      | 待下达   | 灰色 |
+| 1      | 已下达   | 蓝色 |
+| 2      | 执行中   | 橙色 |
+| 3      | 已完成   | 绿色 |
+| 4      | 已取消   | 红色 |
+| A      | 待入炉   | 灰色 |
+| B      | 已入炉   | 蓝色 |
+| C      | 待完轧   | 橙色 |
+| D      | 已完轧   | 绿色 |
+
+### 2. 产品状态 (product)
+
+**字典**: `mmwrProdStatus`
+
+| 状态值 | 显示文本 | 颜色 |
+| ------ | -------- | ---- |
+| 0      | 待加工   | 灰色 |
+| 1      | 加工中   | 蓝色 |
+| 2      | 已完成   | 绿色 |
+| 3      | 合格品   | 深绿 |
+| 4      | 不合格   | 红色 |
+| A      | 待产出   | 灰色 |
+| B      | 已产出   | 绿色 |
+| C      | 产出完毕 | 深绿 |
+
+### 3. 材料状态 (material)
+
+**字典**: `mmwrMatStatus`
+
+| 状态值 | 显示文本 | 颜色 |
+| ------ | -------- | ---- |
+| 0      | 在库     | 灰色 |
+| 1      | 在线     | 蓝色 |
+| 2      | 已使用   | 绿色 |
+| 3      | 待检     | 橙色 |
+| 4      | 异常     | 红色 |
+
+### 4. 进程状态 (process)
+
+**字典**: `mmwrProcessStatus`
+
+| 状态值 | 显示文本 | 颜色 |
+| ------ | -------- | ---- |
+| 0      | 待上料   | 灰色 |
+| 1      | 上料中   | 蓝色 |
+| 2      | 已产出   | 绿色 |
+| 3      | 已取消   | 红色 |
+| A      | 待处理   | 灰色 |
+| B      | 处理中   | 橙色 |
+| C      | 已完成   | 绿色 |
+
+### 5. 切取确认状态 (sampling)
+
+**字典**: `mmwrSampLingStus`
+
+| 状态值 | 显示文本 | 颜色 |
+| ------ | -------- | ---- |
+| 0      | 未确认   | 灰色 |
+| 1      | 已确认   | 绿色 |
+| 2      | 已取消   | 红色 |
+
+### 6. 试样状态 (sample)
+
+**字典**: `mmwrSampleStatus`
+
+| 状态值 | 显示文本 | 颜色 |
+| ------ | -------- | ---- |
+| 0      | 待检验   | 灰色 |
+| 1      | 检验中   | 橙色 |
+| 2      | 已完成   | 绿色 |
+| 3      | 不合格   | 红色 |
+
+### 7. 出炉状态 (slab)
+
+**字典**: `mmwrSlabStatus`
+
+| 状态值 | 显示文本 | 颜色 |
+| ------ | -------- | ---- |
+| 0      | 待出炉   | 灰色 |
+| 1      | 已出炉   | 绿色 |
+| 2      | 在线     | 蓝色 |
+
+### 8. 布尔状态 (boolean)
+
+**用于**: 是/否 类型字段
+
+| 状态值          | 显示文本 | 颜色 |
+| --------------- | -------- | ---- |
+| true/1/"1"/"Y"  | 是       | 绿色 |
+| false/0/"0"/"N" | 否       | 灰色 |
+
+---
+
+## 🔧 高级用法
+
+### 1. 扩展自定义状态
+
+```typescript
+import { registerStatusConfig } from "@/components/global/C_TagStatus/config";
+
+// 注册新的状态类型
+registerStatusConfig("custom", [
+  { value: "1", label: "自定义状态1", type: "success" },
+  { value: "2", label: "自定义状态2", type: "warning", color: "#FF6B6B" }
+]);
+```
+
+### 2. 创建自定义渲染器
+
+```typescript
+import { createStatusRenderer } from '@/util/status-render';
+
+// 创建自定义渲染器
+const renderMyStatus = createStatusRenderer('custom', {
+  size: 'small',
+  effect: 'dark'
+});
+
+// 在表格中使用
+{
+  label: "自定义状态",
+  name: "myStatus",
+  customRender: (row) => renderMyStatus(row, 'myStatus')
+}
+```
+
+---
+
+## 📦 文件结构
+
+```
+C_TagStatus/
+├── index.vue      # 组件主体
+├── config.ts      # 状态配置（颜色映射表）
+├── types.ts       # TypeScript 类型定义
+└── README.md      # 使用文档（本文件）
+```
+
+---
+
+## 💡 最佳实践
+
+1. **统一使用预定义渲染器**：优先使用 `renderPlanStatus`、`renderProductStatus` 等预定义函数
+2. **保持配置集中**：所有状态配置统一在 `config.ts` 中管理
+3. **类型安全**：充分利用 TypeScript 类型检查，避免配置错误
+4. **性能优化**：表格中大量使用时，组件会自动复用，无需担心性能问题
+
+---
+
+## 🐛 常见问题
+
+### Q: 状态显示为原始值，没有颜色？
+
+A: 检查 `type` 属性是否正确，以及状态值是否在配置表中。
+
+### Q: 如何添加新的状态值？
+
+A: 在 `config.ts` 中对应的状态类型数组中添加配置项。
+
+### Q: 可以使用自定义颜色吗？
+
+A: 可以，在配置中添加 `color` 属性，优先级高于 `type`。
+
+---
+
+## 📚 相关文档
+
+- [Element Plus Tag 组件](https://element-plus.org/zh-CN/component/tag.html)
+- 表格自定义渲染文档

package/files/src/components/global/C_TagStatus/config.ts

@@ -0,0 +1,192 @@
+/*
+ * @Author: ChenYu ycyplus@gmail.com
+ * @Date: 2026-02-14
+ * @LastEditors: ChenYu ycyplus@gmail.com
+ * @LastEditTime: 2026-02-14
+ * @FilePath: \cx-ui-produce\src\components\global\C_TagStatus\config.ts
+ * @Description: 状态标签组件 - 配置中心
+ * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.
+ */
+
+import type { StatusTypeConfig, StatusConfig } from "./types";
+import { StatusType } from "./types";
+
+/**
+ * 状态配置映射表
+ *
+ * 使用说明：
+ * 1. value: 后端返回的状态值（字符串/数字/布尔值）
+ * 2. label: 前端显示的文本
+ * 3. type: Element Plus Tag 类型（success/warning/danger/info/''）
+ * 4. color: 自定义颜色（可选，优先级高于 type）
+ * 5. effect: Tag 效果（light/dark/plain，默认 light）
+ *
+ * 颜色方案：
+ * - type='': 默认灰色 (#909399)
+ * - type='info': 信息蓝 (#909399)
+ * - type='success': 成功绿 (#67C23A)
+ * - type='warning': 警告橙 (#E6A23C)
+ * - type='danger': 危险红 (#F56C6C)
+ * - 自定义 color: 任意合法的 CSS 颜色值
+ */
+export const STATUS_CONFIG: StatusTypeConfig = {
+  /**
+   * 计划状态配置
+   * 字典: mmwrMillPlanStatus / mmwrFinishPlanStatus
+   */
+  [StatusType.PLAN]: [
+    { value: "0", label: "待下达", type: "info" },
+    { value: "1", label: "已下达", type: "", color: "#409EFF" },
+    { value: "2", label: "执行中", type: "warning" },
+    { value: "3", label: "已完成", type: "success" },
+    { value: "4", label: "已取消", type: "danger" },
+    { value: "A", label: "待入炉", type: "info" },
+    { value: "B", label: "已入炉", type: "", color: "#409EFF" },
+    { value: "C", label: "待完轧", type: "warning" },
+    { value: "D", label: "已完轧", type: "success" }
+  ],
+
+  /**
+   * 产品状态配置
+   * 字典: mmwrProdStatus
+   */
+  [StatusType.PRODUCT]: [
+    { value: "0", label: "待加工", type: "info" },
+    { value: "1", label: "加工中", type: "", color: "#409EFF" },
+    { value: "2", label: "已完成", type: "success" },
+    { value: "3", label: "合格品", type: "success", effect: "dark" },
+    { value: "4", label: "不合格", type: "danger" },
+    { value: "A", label: "待产出", type: "info" },
+    { value: "B", label: "已产出", type: "success" },
+    { value: "C", label: "产出完毕", type: "success", effect: "dark" }
+  ],
+
+  /**
+   * 材料状态配置
+   * 字典: mmwrMatStatus
+   */
+  [StatusType.MATERIAL]: [
+    { value: "0", label: "在库", type: "info" },
+    { value: "1", label: "在线", type: "", color: "#409EFF" },
+    { value: "2", label: "已使用", type: "success" },
+    { value: "3", label: "待检", type: "warning" },
+    { value: "4", label: "异常", type: "danger" }
+  ],
+
+  /**
+   * 进程状态配置
+   * 字典: mmwrProcessStatus
+   */
+  [StatusType.PROCESS]: [
+    { value: "0", label: "待上料", type: "info" },
+    { value: "1", label: "上料中", type: "", color: "#409EFF" },
+    { value: "2", label: "已产出", type: "success" },
+    { value: "3", label: "已取消", type: "danger" },
+    { value: "A", label: "待处理", type: "info" },
+    { value: "B", label: "处理中", type: "warning" },
+    { value: "C", label: "已完成", type: "success" }
+  ],
+
+  /**
+   * 切取确认状态配置
+   * 字典: mmwrSampLingStus
+   */
+  [StatusType.SAMPLING]: [
+    { value: "0", label: "未确认", type: "info" },
+    { value: "1", label: "已确认", type: "success" },
+    { value: "2", label: "已取消", type: "danger" }
+  ],
+
+  /**
+   * 试样状态配置
+   * 字典: mmwrSampleStatus
+   */
+  [StatusType.SAMPLE]: [
+    { value: "0", label: "待检验", type: "info" },
+    { value: "1", label: "检验中", type: "warning" },
+    { value: "2", label: "已完成", type: "success" },
+    { value: "3", label: "不合格", type: "danger" }
+  ],
+
+  /**
+   * 出炉状态配置
+   * 字典: mmwrSlabStatus
+   */
+  [StatusType.SLAB]: [
+    { value: "0", label: "待出炉", type: "info" },
+    { value: "1", label: "已出炉", type: "success" },
+    { value: "2", label: "在线", type: "", color: "#409EFF" }
+  ],
+
+  /**
+   * 布尔状态配置
+   * 用于 是/否 类型字段
+   */
+  [StatusType.BOOLEAN]: [
+    { value: true, label: "是", type: "success" },
+    { value: false, label: "否", type: "info" },
+    { value: 1, label: "是", type: "success" },
+    { value: 0, label: "否", type: "info" },
+    { value: "1", label: "是", type: "success" },
+    { value: "0", label: "否", type: "info" },
+    { value: "Y", label: "是", type: "success" },
+    { value: "N", label: "否", type: "info" }
+  ]
+};
+
+/**
+ * 获取状态配置
+ * @param statusType 状态类型
+ * @param value 状态值
+ * @returns 状态配置对象
+ */
+export function getStatusConfig(
+  statusType: StatusType | string,
+  value: string | number | boolean | null | undefined
+): StatusConfig | undefined {
+  if (value === null || value === undefined || value === "") {
+    return undefined;
+  }
+
+  const configs = STATUS_CONFIG[statusType as StatusType];
+  if (!configs) {
+    return undefined;
+  }
+
+  // 精确匹配
+  let config = configs.find((c) => c.value === value);
+
+  // 如果精确匹配失败，尝试字符串化后匹配
+  if (!config) {
+    const valueStr = String(value);
+    config = configs.find((c) => String(c.value) === valueStr);
+  }
+
+  return config;
+}
+
+/**
+ * 获取状态显示文本
+ * @param statusType 状态类型
+ * @param value 状态值
+ * @returns 显示文本
+ */
+export function getStatusLabel(
+  statusType: StatusType | string,
+  value: string | number | boolean | null | undefined
+): string {
+  const config = getStatusConfig(statusType, value);
+  return config?.label || String(value || "-");
+}
+
+/**
+ * 批量注册新的状态配置
+ * @param statusType 状态类型
+ * @param configs 状态配置数组
+ */
+export function registerStatusConfig(
+  statusType: string,
+  configs: StatusConfig[]
+): void {
+  STATUS_CONFIG[statusType as StatusType] = configs;
+}

package/files/src/components/global/C_TagStatus/index.vue

@@ -0,0 +1,127 @@
+<!--
+ * @Author: ChenYu ycyplus@gmail.com
+ * @Date: 2026-02-14
+ * @LastEditors: ChenYu ycyplus@gmail.com
+ * @LastEditTime: 2026-02-14
+ * @FilePath: \cx-ui-produce\src\components\global\C_TagStatus\index.vue
+ * @Description: 状态标签组件 - 统一的状态展示
+ * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.
+-->
+<template>
+  <el-tag
+    v-if="statusConfig"
+    :type="statusConfig.type"
+    :color="statusConfig.color"
+    :effect="statusConfig.effect || 'light'"
+    :size="size"
+    :round="round"
+    :closable="closable"
+    :disable-transitions="disableTransitions"
+    @click="handleClick"
+    @close="handleClose"
+  >
+    {{ statusConfig.label }}
+  </el-tag>
+  <span v-else class="status-fallback">{{ displayValue }}</span>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { getStatusConfig } from "./config";
+import type { StatusType, TagEffect } from "./types";
+
+/**
+ * 组件属性定义
+ */
+interface Props {
+  /** 状态值 */
+  value: string | number | boolean | null | undefined;
+  /** 状态类型（plan/product/material/process/sampling/sample/slab/boolean） */
+  type: StatusType | string;
+  /** Tag 尺寸 */
+  size?: "" | "large" | "default" | "small";
+  /** 是否圆角 */
+  round?: boolean;
+  /** 是否可关闭 */
+  closable?: boolean;
+  /** 是否禁用过渡动画 */
+  disableTransitions?: boolean;
+  /** 默认 Tag 效果（当配置中未指定时使用） */
+  defaultEffect?: TagEffect;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: "default",
+  round: true,
+  closable: false,
+  disableTransitions: false,
+  defaultEffect: "light"
+});
+
+/**
+ * 组件事件定义
+ */
+const emit = defineEmits<{
+  click: [event: MouseEvent];
+  close: [event: MouseEvent];
+}>();
+
+/**
+ * 获取状态配置
+ */
+const statusConfig = computed(() => {
+  const config = getStatusConfig(props.type, props.value);
+  if (config && !config.effect) {
+    // 如果配置中没有指定 effect，使用默认值
+    return { ...config, effect: props.defaultEffect };
+  }
+  return config;
+});
+
+/**
+ * 显示值（降级方案）
+ */
+const displayValue = computed(() => {
+  if (props.value === null || props.value === undefined || props.value === "") {
+    return "-";
+  }
+  return String(props.value);
+});
+
+/**
+ * 点击事件处理
+ */
+const handleClick = (event: MouseEvent) => {
+  emit("click", event);
+};
+
+/**
+ * 关闭事件处理
+ */
+const handleClose = (event: MouseEvent) => {
+  emit("close", event);
+};
+</script>
+
+<style scoped lang="scss">
+.status-fallback {
+  display: inline-block;
+  padding: 0 8px;
+  font-size: 12px;
+  color: #909399;
+  line-height: 22px;
+  white-space: nowrap;
+}
+
+// 增强 el-tag 的视觉效果
+:deep(.el-tag) {
+  font-weight: 500;
+  border: none;
+
+  // 为淡色效果添加边框
+  &.el-tag--light {
+    border: 1px solid currentColor;
+    border-color: var(--el-tag-border-color);
+  }
+}
+</style>

package/files/src/components/global/C_TagStatus/types.ts

@@ -0,0 +1,64 @@
+/*
+ * @Author: ChenYu ycyplus@gmail.com
+ * @Date: 2026-02-14
+ * @LastEditors: ChenYu ycyplus@gmail.com
+ * @LastEditTime: 2026-02-14
+ * @FilePath: \cx-ui-produce\src\components\global\C_TagStatus\types.ts
+ * @Description: 状态标签组件 - 类型定义
+ * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.
+ */
+
+/**
+ * Element Plus Tag 组件的类型
+ */
+export type TagType = "" | "success" | "warning" | "danger" | "info";
+
+/**
+ * Element Plus Tag 组件的效果
+ */
+export type TagEffect = "light" | "dark" | "plain";
+
+/**
+ * 状态类型枚举
+ */
+export enum StatusType {
+  /** 计划状态 */
+  PLAN = "plan",
+  /** 产品状态 */
+  PRODUCT = "product",
+  /** 材料状态 */
+  MATERIAL = "material",
+  /** 进程状态 */
+  PROCESS = "process",
+  /** 切取确认状态 */
+  SAMPLING = "sampling",
+  /** 试样状态 */
+  SAMPLE = "sample",
+  /** 出炉状态 */
+  SLAB = "slab",
+  /** 布尔状态 */
+  BOOLEAN = "boolean"
+}
+
+/**
+ * 状态配置项
+ */
+export interface StatusConfig {
+  /** 状态值（用于匹配） */
+  value: string | number | boolean;
+  /** 显示文本 */
+  label: string;
+  /** Element Plus Tag 类型 */
+  type?: TagType;
+  /** 自定义颜色（优先级高于 type） */
+  color?: string;
+  /** Tag 效果 */
+  effect?: TagEffect;
+}
+
+/**
+ * 状态类型配置映射
+ */
+export type StatusTypeConfig = {
+  [key in StatusType]?: StatusConfig[];
+};