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

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

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

@@ -0,0 +1,36 @@
+<template>
+  <div class="section basic-info-section">
+    <div class="section-header">
+      <span class="section-icon">&#128176;</span>
+      <span class="section-title">成本信息</span>
+    </div>
+    <div class="section-body">
+      <el-descriptions :column="3" border size="small">
+        <el-descriptions-item label="囤积成本">
+          <span class="cost-value">{{ hoardingCost }}</span>
+          <span class="cost-unit">t&#183;天</span>
+        </el-descriptions-item>
+        <el-descriptions-item label="囤积天数">
+          <span>{{ hoardingDays }} 天</span>
+        </el-descriptions-item>
+        <el-descriptions-item label="钢卷净重">
+          <span>{{ coilInfo.netWeight || 0 }} t</span>
+        </el-descriptions-item>
+      </el-descriptions>
+    </div>
+  </div>
+</template>
+
+<script>
+import { formatTime } from '../statusUtils'
+
+export default {
+  name: 'CostInfoSection',
+  props: {
+    coilInfo: { type: Object, default: () => ({}) },
+    traceResult: { type: Object, default: null },
+    hoardingDays: { type: Number, default: 0 },
+    hoardingCost: { type: [String, Number], default: '0.00' }
+  }
+}
+</script>