refactor(wms/coil): 重构钢卷详情页面，拆分组件并优化页面结构

1.  将原钢卷详情页面拆分为多个独立组件，按功能模块划分
2.  调整路由指向，将页面入口指向新的页面文件
3.  新增状态工具类，封装通用格式化和样式

klp-ui/src/views/wms/coil/info/components/CoilCardCompact.vue

@@ -0,0 +1,85 @@
+<template>
+  <div :class="['coil-card-hover', variant]" v-if="coil && coil.currentCoilNo !== '-'">
+    <div class="coil-mini-header">
+      <span class="coil-mini-no">{{ coil.currentCoilNo }}</span>
+      <span class="coil-mini-weight">{{ coil.netWeight ? coil.netWeight + 't' : '-' }}</span>
+    </div>
+    <div class="coil-mini-body">
+      <span class="coil-mini-spec">{{ coil.specification || '-' }}</span>
+      <span class="coil-mini-material">{{ coil.material || '-' }}</span>
+      <span :class="['coil-mini-status', statusClass(coil.qualityStatus)]">{{ coil.qualityStatus || '-' }}</span>
+    </div>
+    <div class="coil-detail-popup">
+      <div class="popup-header">
+        <span class="popup-title">钢卷详情</span>
+        <span class="popup-close">&#10005;</span>
+      </div>
+      <div class="popup-content">
+        <div class="popup-row">
+          <span class="popup-label">入场卷号</span>
+          <span class="popup-value">{{ coil.enterCoilNo || '-' }}</span>
+        </div>
+        <div class="popup-row">
+          <span class="popup-label">当前卷号</span>
+          <span class="popup-value">{{ coil.currentCoilNo || '-' }}</span>
+        </div>
+        <div class="popup-row">
+          <span class="popup-label">物料名称</span>
+          <span class="popup-value">{{ coil.itemName || '-' }}</span>
+        </div>
+        <div class="popup-row">
+          <span class="popup-label">规格</span>
+          <span class="popup-value">{{ coil.specification || '-' }}</span>
+        </div>
+        <div class="popup-row">
+          <span class="popup-label">材质</span>
+          <span class="popup-value">{{ coil.material || '-' }}</span>
+        </div>
+        <div class="popup-row">
+          <span class="popup-label">净重</span>
+          <span class="popup-value">{{ coil.netWeight || 0 }} t</span>
+        </div>
+        <div class="popup-row">
+          <span class="popup-label">生产厂家</span>
+          <span class="popup-value">{{ coil.manufacturer || '-' }}</span>
+        </div>
+        <div class="popup-row">
+          <span class="popup-label">镀层</span>
+          <span class="popup-value">{{ coil.zincLayer || '-' }}</span>
+        </div>
+        <div class="popup-row">
+          <span class="popup-label">质量状态</span>
+          <span class="popup-value">{{ coil.qualityStatus || '-' }}</span>
+        </div>
+        <div class="popup-row">
+          <span class="popup-label">逻辑库位</span>
+          <span class="popup-value">{{ coil.warehouseName || '-' }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getFuturisticStatusClass } from '../statusUtils'
+
+export default {
+  name: 'CoilCardCompact',
+  props: {
+    coil: { type: Object, default: () => ({}) },
+    variant: { type: String, default: '' }
+  },
+  methods: {
+    statusClass(status) {
+      const cls = getFuturisticStatusClass(status)
+      const map = {
+        'futuristic-status-success': 'status-success',
+        'futuristic-status-danger': 'status-danger',
+        'futuristic-status-warning': 'status-warning',
+        'futuristic-status-default': 'status-default'
+      }
+      return map[cls] || 'status-default'
+    }
+  }
+}
+</script>