feat: 更新组件和API模型，优化用户体验

- 在api-models.ts中将goodsId字段更改为goods，以更好地表示商品信息
- 在多个组件中添加NEllipsis组件以优化文本显示
- 在AddressDisplay.vue中调整模板格式，提升可读性
- 在PointOrderCard.vue中更新订单信息的显示逻辑
- 在PointOrderManage.vue中添加批量更新订单状态的功能

src/components/manage/AddressDisplay.vue

@@ -15,33 +15,72 @@ const { height } = useElementSize(elementRef.value)
 </script>
 
 <template>
-  <NText v-if="!address" depth="3" italic> 未知 </NText>
-  <NFlex v-else ref="elementRef">
-    <NFlex vertical :size="5">
+  <NText
+    v-if="!address"
+    depth="3"
+    italic
+  >
+    未知
+  </NText>
+  <NFlex
+    v-else
+    ref="elementRef"
+  >
+    <NFlex
+      vertical
+      :size="5"
+    >
       <NText v-if="size != 'small'">
         {{ address.province }}
-        <NText depth="3"> 省 </NText>
+        <NText depth="3">
+          省
+        </NText>
         {{ address.city }}
-        <NText depth="3"> 市 </NText>
+        <NText depth="3">
+          市
+        </NText>
         {{ address.district }}
-        <NText depth="3"> 区 </NText>
+        <NText depth="3">
+          区
+        </NText>
         {{ address.street }}
       </NText>
       <NText depth="3">
         <NFlex align="center">
-          <NTag size="tiny" type="info" :bordered="false"> 详细地址 </NTag>
-          {{ address.address }}
+          <NTag
+            size="tiny"
+            type="info"
+            :bordered="false"
+          >
+            详细地址
+          </NTag>
+          <NEllipsis :style="{ maxWidth: size == 'small' ? '120px' : '1000px' }">
+            {{ address.address }}
+          </NEllipsis>
         </NFlex>
       </NText>
-      <NText v-if="size != 'small'" depth="3">
+      <NText
+        v-if="size != 'small'"
+        depth="3"
+      >
         <NFlex align="center">
-          <NTag size="tiny" type="info" :bordered="false"> 收货人 </NTag>
+          <NTag
+            size="tiny"
+            type="info"
+            :bordered="false"
+          >
+            收货人
+          </NTag>
           <span> {{ address.phone }} {{ address.name }} </span>
         </NFlex>
       </NText>
     </NFlex>
-    <NFlex style="flex: 1" justify="end" align="center">
-      <slot name="actions"></slot>
+    <NFlex
+      style="flex: 1"
+      justify="end"
+      align="center"
+    >
+      <slot name="actions" />
     </NFlex>
   </NFlex>
 </template>

src/components/manage/PointGoodsItem.vue

@@ -7,6 +7,7 @@ import { NCard, NEllipsis, NEmpty, NFlex, NIcon, NImage, NTag, NText } from 'nai
   const props = defineProps<{
     goods: ResponsePointGoodModel | undefined;
     contentStyle?: string | undefined;
+    size?: 'small' | 'default';
   }>();
 
   // 默认封面图片

src/components/manage/PointOrderCard.vue

@@ -2,9 +2,8 @@
 import {
   GoodsTypes,
   PointOrderStatus,
-  ResponsePointGoodModel,
   ResponsePointOrder2OwnerModel,
-  ResponsePointOrder2UserModel,
+  ResponsePointOrder2UserModel
 } from '@/api/api-models'
 import { QueryPostAPI } from '@/api/query'
 import { POINT_API_URL } from '@/data/constants'
@@ -12,10 +11,13 @@ import { Info24Filled } from '@vicons/fluent'
 import {
   DataTableColumns,
   DataTableRowKey,
+  NAlert,
   NAutoComplete,
   NButton,
+  NCard,
   NDataTable,
   NDivider,
+  NEllipsis,
   NEmpty,
   NFlex,
   NIcon,
@@ -24,6 +26,7 @@ import {
   NInputGroupLabel,
   NModal,
   NScrollbar,
+  NSpace,
   NStep,
   NSteps,
   NTag,
@@ -32,9 +35,6 @@ import {
   NTooltip,
   useDialog,
   useMessage,
-  NCard,
-  NSpace,
-  NAlert,
 } from 'naive-ui'
 import { computed, h, onMounted, ref, watch } from 'vue'
 import AddressDisplay from './AddressDisplay.vue'
@@ -45,10 +45,10 @@ type OrderType = ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel
 const props = defineProps<{
   order: ResponsePointOrder2UserModel[] | ResponsePointOrder2OwnerModel[]
   type: 'user' | 'owner'
-  goods?: ResponsePointGoodModel[]
   loading?: boolean
 }>()
 
+
 const message = useMessage()
 const dialog = useDialog()
 const emit = defineEmits(['selectedItem'])
@@ -71,11 +71,7 @@ const orderAsOwner = computed(() => props.order as ResponsePointOrder2OwnerModel
 const currentGoods = computed(() => {
   if (!orderDetail.value) return null
 
-  if (props.type === 'user') {
-    return (orderDetail.value as ResponsePointOrder2UserModel).goods
-  } else {
-    return props.goods?.find((g) => g.id === (orderDetail.value as ResponsePointOrder2OwnerModel).goodsId)
-  }
+  return orderDetail.value.goods
 })
 
 const expressOptions = computed(() => {
@@ -143,6 +139,7 @@ const orderColumn: DataTableColumns<OrderType> = [
   },
   {
     title: '订单号',
+    minWidth: 70,
     key: 'id',
   },
   {
@@ -173,11 +170,9 @@ const orderColumn: DataTableColumns<OrderType> = [
   {
     title: '礼物名',
     key: 'giftName',
+    minWidth: 150,
     render: (row: OrderType) => {
-      if (row.instanceOf === 'user') {
-        return (row as ResponsePointOrder2UserModel).goods.name
-      }
-      return props.goods?.find((g) => g.id === row.goodsId)?.name || '未知礼物'
+      return row.goods?.name
     },
   },
   {
@@ -249,9 +244,7 @@ const orderColumn: DataTableColumns<OrderType> = [
     key: 'address',
     minWidth: 250,
     render: (row: OrderType) => {
-      const goodsCollectUrl = row.instanceOf === 'user'
-        ? (row as ResponsePointOrder2UserModel).goods.collectUrl
-        : props.goods?.find((g) => g.id === row.goodsId)?.collectUrl
+      const goodsCollectUrl = row.goods.collectUrl
 
       if (row.type === GoodsTypes.Physical) {
         return goodsCollectUrl
@@ -262,7 +255,7 @@ const orderColumn: DataTableColumns<OrderType> = [
               text: true,
               type: 'info'
             }, () => h(NText, { italic: true }, () => '通过站外链接收集'))
-          : h(AddressDisplay, { address: row.address })
+          : h(AddressDisplay, { address: row.address, size: 'small' })
       } else {
         return h(NText, { depth: 3, italic: true }, () => '无需发货')
       }
@@ -277,7 +270,7 @@ const orderColumn: DataTableColumns<OrderType> = [
         if (row.trackingNumber) {
           return h(NFlex, { align: 'center', gap: 8 }, () => [
             h(NTag, { size: 'tiny', bordered: false }, () => row.expressCompany),
-            h(NText, { depth: 3 }, () => row.trackingNumber),
+            h(NEllipsis, { style: { maxWidth: '100px' } }, () => h(NText, { depth: 3 }, () => row.trackingNumber)),
           ])
         }
         return h(NText, { depth: 3, italic: true }, () => '尚未发货')
@@ -728,7 +721,10 @@ onMounted(() => {
                 size="small"
                 class="address-info-card"
               >
-                <AddressDisplay :address="orderDetail.address" />
+                <AddressDisplay
+                  :address="orderDetail.address"
+                  size="default"
+                />
               </NCard>
             </template>