修复溯源模块大量问题

vue2/apps/web-antd/src/views/traceability/consumer.vue

@@ -1,15 +1,25 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue';
-
-import { useQRCode } from '@vueuse/integrations/useQRCode';
-import { Page } from '@vben/common-ui';
-
-import { Button, Card, Col, Empty, Input, message, Row, Tag } from 'ant-design-vue';
-
-import { getTraceabilityBatches, getTraceabilityPublicDetail } from '#/api';
 import type { TraceabilityApi } from '#/api';
 
-import { formatFieldValue } from './shared';
+import { computed, onMounted, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { useQRCode } from '@vueuse/integrations/useQRCode';
+import {
+  Button,
+  Card,
+  Col,
+  Empty,
+  Input,
+  message,
+  Row,
+  Tag,
+} from 'ant-design-vue';
+
+import { getTraceabilityBatches, getTraceabilityPreviewDetail } from '#/api';
+
+import { formatFieldValue, getFieldDisplayStyle, getImagePreviewSrc } from './shared';
 
 const loading = ref(false);
 const batches = ref<TraceabilityApi.BatchSummary[]>([]);
@@ -38,7 +48,7 @@ async function search() {
   }
   loading.value = true;
   try {
-    detail.value = await getTraceabilityPublicDetail(queryCode.value.trim());
+    detail.value = await getTraceabilityPreviewDetail(queryCode.value.trim());
   } finally {
     loading.value = false;
   }
@@ -52,10 +62,7 @@ function getStatusLabel(status: string) {
   return status || '进行中';
 }
 
-function getFieldLabel(
-  fields: TraceabilityApi.FieldDefinition[],
-  key: string,
-) {
+function getFieldLabel(fields: TraceabilityApi.FieldDefinition[], key: string) {
   return fields.find((field) => field.key === key)?.label || key;
 }
 
@@ -64,6 +71,7 @@ function getDisplayEntries(step: TraceabilityApi.BatchStep) {
     key,
     label: getFieldLabel(step.fields, key),
     type: step.fields.find((field) => field.key === key)?.type || 'string',
+    field: step.fields.find((field) => field.key === key),
     value,
   }));
 }
@@ -145,7 +153,12 @@ onMounted(loadBatches);
                     <span>消费者访问地址</span>
                     <strong>{{ publicLink }}</strong>
                   </div>
-                  <p>{{ detail.batch.summary || '该批次已完成发布，可直接用于消费者扫码访问。' }}</p>
+                  <p>
+                    {{
+                      detail.batch.summary ||
+                      '该批次已完成发布，可直接用于消费者扫码访问。'
+                    }}
+                  </p>
                 </div>
                 <div class="access-meta">
                   <div class="access-card">
@@ -154,7 +167,9 @@ onMounted(loadBatches);
                   </div>
                   <div class="access-card">
                     <span>产品名称</span>
-                    <strong>{{ detail.batch.productName || '未设置产品名称' }}</strong>
+                    <strong>{{
+                      detail.batch.productName || '未设置产品名称'
+                    }}</strong>
                   </div>
                   <div class="access-card">
                     <span>所属模板</span>
@@ -162,7 +177,9 @@ onMounted(loadBatches);
                   </div>
                   <div class="access-card">
                     <span>标签</span>
-                    <strong>{{ detail.batch.tags.join('、') || '暂无标签' }}</strong>
+                    <strong>{{
+                      detail.batch.tags.join('、') || '暂无标签'
+                    }}</strong>
                   </div>
                 </div>
               </div>
@@ -193,11 +210,13 @@ onMounted(loadBatches);
                       <span>{{ entry.label }}</span>
                       <img
                         v-if="entry.type === 'image' && entry.value"
-                        :src="String(entry.value)"
+                        :src="getImagePreviewSrc(entry.value, item.valuePreviewUrls?.[entry.key])"
                         :alt="entry.label"
                         class="consumer-image"
                       />
-                      <strong v-else>{{ formatFieldValue(entry.value) }}</strong>
+                      <strong v-else :style="getFieldDisplayStyle(entry.field)">
+                        {{ formatFieldValue(entry.value) }}
+                      </strong>
                     </div>
                   </div>
                 </div>
@@ -237,11 +256,16 @@ onMounted(loadBatches);
                         <span>{{ entry.label }}</span>
                         <img
                           v-if="entry.type === 'image' && entry.value"
-                          :src="String(entry.value)"
+                          :src="getImagePreviewSrc(entry.value, item.valuePreviewUrls?.[entry.key])"
                           :alt="entry.label"
                           class="consumer-image"
                         />
-                        <strong v-else>{{ formatFieldValue(entry.value) }}</strong>
+                        <strong
+                          v-else
+                          :style="getFieldDisplayStyle(entry.field)"
+                        >
+                          {{ formatFieldValue(entry.value) }}
+                        </strong>
                       </div>
                     </div>
                   </div>