feat: 优化产品信息展示组件，使用悬停弹窗替代对话框

refactor: 重构原材料信息组件，采用与产品信息一致的交互方式
fix: 移除酸连轧工序页面，该功能已迁移至其他模块
style: 调整元素阴影样式，移除不必要的样式属性
chore: 添加调试日志，便于追踪参数传递

klp-ui/src/components/KLPService/Renderer/ProductInfo.vue

@@ -1,71 +1,60 @@
 <template>
   <div>
-    <span class="product-name" @click.stop="clickHandle">
-      <slot name="default" :product="productFull">
-        {{ productFull.productName || '未知' }}[{{ productFull.specification || '无规格' }}] - (材质：{{ productFull.material || '无材质' }})
-      </slot>
-    </span>
-    <el-dialog 
-      :visible="showDetail" 
-      @close="showDetail = false" 
-      :title="productFull.productName || '--' " 
-      width="500px"
-      append-to-body
+    <el-popover
+      trigger="hover"
+      placement="top" 
+      width="400"  
+      :visible-arrow="true" 
+      append-to-body 
+      popper-class="product-info-popover"
     >
-      <el-descriptions :column="1" border>
+      <!-- popover 内容（原dialog中的描述列表） -->
+      <el-descriptions :column="2" class="popover-content">
         <el-descriptions-item label="产品名称">
-          {{ product.productName || '--' }}
+          {{ productFull.productName || '--' }}
         </el-descriptions-item>
         <el-descriptions-item label="产品编码">
-          {{ product.productCode || '--' }}
+          {{ productFull.productCode || '--' }}
         </el-descriptions-item>
         <el-descriptions-item label="规格">
-          {{ product.specification || '--' }}
+          {{ productFull.specification || '--' }}
         </el-descriptions-item>
         <el-descriptions-item label="材质">
-          {{ product.material || '--' }}
+          {{ productFull.material || '--' }}
         </el-descriptions-item>
         <el-descriptions-item label="表面处理">
-          {{ product.surfaceTreatment || '--' }}
+          {{ productFull.surfaceTreatment || '--' }}
         </el-descriptions-item>
-        <!-- 锌层 -->
         <el-descriptions-item label="锌层">
-          {{ product.zincLayer || '--' }}
+          {{ productFull.zincLayer || '--' }}
         </el-descriptions-item>
-        <!-- 厂家 -->
         <el-descriptions-item label="厂家">
-          {{ product.manufacturer || '--' }}
+          {{ productFull.manufacturer || '--' }}
         </el-descriptions-item>
-
       </el-descriptions>
-      <!-- <BomInfo :bomId="product.bomId" /> -->
-    </el-dialog>
+
+      <!-- 触发元素（原产品名称文本） -->
+      <span slot="reference" class="product-name">
+        <slot name="default" :product="productFull">
+          {{ productFull.productName || '未知' }}[{{ productFull.specification || '无规格' }}] - (材质：{{ productFull.material || '无材质' }})
+        </slot>
+      </span>
+    </el-popover>
   </div>
 </template>
 
 <script>
-// import { mapState } from 'vuex';
-// import BomInfo from './BomInfo.vue';
-
 export default {
   name: 'ProductInfo',
-  // components: {
-  //   BomInfo
-  // },
   props: {
     product: {
       type: Object,
-      // required: true,
       default: () => ({})
     },
   },
-  // mounted() {
-    // console.log(this.productId, this.productMap);
-  // },
   data() {
     return {
-      showDetail: false,
-      // product: {},
+      // 移除showDetail，无需弹窗控制
     };
   },
   computed: {
@@ -83,44 +72,12 @@ export default {
         surfaceTreatment: this.product.surfaceTreatment || '',
         zincLayer: this.product.zincLayer || '',
         manufacturer: this.product.manufacturer || '',
-      }
+      };
     }
   },
-  // computed: {
-  //   ...mapState({
-  //     productMap: state => state.category.productMap
-  //   }),
-  //   product() {
-  //     // 检查 productMap 是否已加载
-  //     if (!this.productMap || Object.keys(this.productMap).length === 0) {
-  //       return {};
-  //     }
-  //     if (!this.productId) {
-  //       return {};
-  //     }
-  //     return this.productMap[this.productId.toString()] || {};
-  //   },
-  //   loading() {
-  //     return !this.productMap || Object.keys(this.productMap).length === 0
-  //   }
-  // },
   methods: {
-    clickHandle() {
-      this.showDetail = true;
-    }
+    // 移除clickHandle方法，无需点击触发
   },
-  // watch: {
-  //   productId: {
-  //     handler(newVal) {
-  //       if (!newVal) {
-  //         this.product = {};
-  //       }
-  //       const res = this.productMap[newVal.toString()] ? this.productMap[newVal.toString()] : {};
-  //       this.product = res;
-  //     },
-  //     immediate: true
-  //   }
-  // }
 };
 </script>
 
@@ -129,10 +86,7 @@ export default {
   color: #1890ff;
   cursor: pointer;
   text-decoration: underline;
-}
-
-/* 可选：调整描述列表的外边距 */
-:deep(.el-descriptions) {
-  margin-top: -10px;
+  /* 增加内边距，优化悬停触发区域 */
+  padding: 2px 4px;
 }
 </style>