style(shop): 优化商品和订单列表界面细节

- 添加商品列表表格横向滚动支持，避免列溢出
- 设置商品图片高度，保持缩略图统一尺寸
- 修改商品状态标签文案为“出售中”
- 调整订单商品明细列，支持展开与收起全部商品
- 在订单列表操作列中新增竖线分隔符，提升按钮分隔清晰度
- 统一订单操作按钮文本，去除图标依赖
- 注释掉商品列表中排序号列
- 微调表格中部分列宽及对齐方式提高视觉体验

.workbuddy/memory/2026-07-28.md

@@ -0,0 +1,6 @@
+# 2026-07-28
+
+## 订单列表操作列分隔线对齐 shopGoods
+- 文件：`src/views/shop/shopOrder/index.vue` 的 `column.key === 'action'` 操作列模板。
+- 改动：原本操作列按钮只用 `<a-space>` 包裹、无分隔线；现按 `shop/shopGoods` 的写法，在「详情」与各条件块之间、以及块内多个按钮之间加入 `<a-divider type="vertical" />`。
+- 分隔线放在各 `<template v-if>` 条件块内部，仅当对应操作出现时才渲染，避免多余竖线。

src/views/shop/shopGoods/index.vue

@@ -10,6 +10,7 @@
         :columns="columns"
         :datasource="datasource"
         :customRow="customRow"
+        :scroll="{ x: 1800 }"
         size="small"
         v-model:selection="selection"
         tool-class="ele-toolbar-form"
@@ -40,6 +41,7 @@
                 v-if="record.image"
                 :preview="false"
                 :width="50"
+                :height="50"
               />
               <div class="flex flex-col justify-center leading-tight">
                 <span class="text-gray-700 font-bold">{{ record.name }}</span>
@@ -52,7 +54,7 @@
             </a-space>
           </template>
           <template v-if="column.key === 'priceGroup'">
-            <div class="flex flex-col leading-tight gap-0.5">
+            <div class="flex flex-col leading-tight">
               <span class="text-gray-800 font-bold">￥{{ record.price }}</span>
               <span class="text-gray-400 text-xs"
                 >市场价：{{
@@ -91,7 +93,7 @@
             </a-space>
           </template>
           <template v-if="column.key === 'status'">
-            <a-tag v-if="record.status === 0" color="green">已上架</a-tag>
+            <a-tag v-if="record.status === 0" color="green">出售中</a-tag>
             <a-tag v-if="record.status === 1" color="orange">待上架</a-tag>
             <a-tag v-if="record.status === 2" color="purple">待审核</a-tag>
             <a-tag v-if="record.status === 3" color="red">审核不通过</a-tag>
@@ -271,8 +273,7 @@
       title: '置顶',
       dataIndex: 'isTop',
       key: 'isTop',
-      align: 'center',
-      sorter: true
+      align: 'center'
     },
     {
       title: '状态',
@@ -286,14 +287,14 @@
     //   key: 'comments',
     //   align: 'center',
     // },
-    {
-      title: '排序号',
-      dataIndex: 'sortNumber',
-      key: 'sortNumber',
-      align: 'center',
-      width: 120,
-      sorter: true
-    },
+    // {
+    //   title: '排序号',
+    //   dataIndex: 'sortNumber',
+    //   key: 'sortNumber',
+    //   align: 'center',
+    //   width: 120,
+    //   sorter: true
+    // },
     {
       title: '创建时间',
       dataIndex: 'createTime',
@@ -307,7 +308,7 @@
     {
       title: '操作',
       key: 'action',
-      width: 200,
+      width: 180,
       fixed: 'right',
       align: 'center',
       hideInSetting: true

src/views/shop/shopOrder/index.vue

@@ -50,6 +50,8 @@
         :columns="columns"
         :datasource="datasource"
         :customRow="customRow"
+        :scroll="{ x: 1800 }"
+        size="small"
         cache-key="proShopOrderTable"
         :toolbar="false"
         tool-class="ele-toolbar-form"
@@ -191,7 +193,12 @@
             </div>
           </template>
           <template v-if="column.key === 'orderGoods'">
-            <template v-for="(item, index) in record.orderGoods" :key="index">
+            <template
+              v-for="(item, index) in isOrderGoodsExpanded(record)
+                ? record.orderGoods
+                : (record.orderGoods || []).slice(0, collapsedGoodsCount)"
+              :key="index"
+            >
               <div class="item py-1">
                 <a-space :id="`g-${index}`">
                   <a-avatar :src="getCompressedImageUrl(item.image,{ width: 100 })" shape="square" :size="50" />
@@ -199,6 +206,15 @@
                 </a-space>
               </div>
             </template>
+            <div
+              v-if="record.orderGoods && record.orderGoods.length > collapsedGoodsCount"
+              class="mt-1"
+            >
+              <a @click.stop="toggleOrderGoodsExpanded(record)">
+                <template v-if="isOrderGoodsExpanded(record)">收起</template>
+                <template v-else>展开全部 {{ record.orderGoods.length }} 件</template>
+              </a>
+            </div>
           </template>
           <template v-if="column.key === 'payType'">
             <!-- 货到付款特殊标识 -->
@@ -252,35 +268,41 @@
           <template v-if="column.key === 'action'">
             <a-space>
               <!-- 查看详情 - 所有状态都可以查看 -->
-              <a @click.stop="openEdit(record)"> <EyeOutlined /> 详情 </a>
+              <a @click.stop="openEdit(record)"> 详情 </a>
 
               <!-- 未付款状态的操作（排除线下付款） -->
               <template v-if="!record.payStatus && record.orderStatus === 0 && record.payType !== 9">
+                <a-divider type="vertical" />
                 <a @click.stop="handleEditOrder(record)">
-                  <EditOutlined /> 修改
+                  修改
                 </a>
+                <a-divider type="vertical" />
                 <a @click.stop="handleCancelOrder(record)">
-                  <span class="ele-text-warning"> <CloseOutlined /> 关闭 </span>
+                  <span class="ele-text-warning"> 关闭 </span>
                 </a>
               </template>
 
               <!-- 线下付款·待确认收款状态的操作（支持先发货后结款） -->
               <template v-if="!record.payStatus && record.orderStatus === 0 && record.payType === 9 && record.deliveryStatus === 10">
+                <a-divider type="vertical" />
                 <a @click.stop="handleConfirmOfflinePayment(record)" class="ele-text-success">
-                  <CheckCircleOutlined /> 确认收款
+                  确认收款
                 </a>
+                <a-divider type="vertical" />
                 <a @click.stop="handleDelivery(record)" class="ele-text-primary">
-                  <SendOutlined /> 发货
+                  发货
                 </a>
+                <a-divider type="vertical" />
                 <a @click.stop="handleCancelOrder(record)">
-                  <span class="ele-text-warning"> <CloseOutlined /> 关闭 </span>
+                  <span class="ele-text-warning"> 关闭 </span>
                 </a>
               </template>
 
               <!-- 线下付款·已发货未收款状态的操作（先发货后结款） -->
               <template v-if="!record.payStatus && record.orderStatus === 0 && record.payType === 9 && record.deliveryStatus === 20">
+                <a-divider type="vertical" />
                 <a @click.stop="handleConfirmOfflinePayment(record)" class="ele-text-success">
-                  <CheckCircleOutlined /> 确认收款
+                  确认收款
                 </a>
               </template>
 
@@ -294,11 +316,13 @@
                 !isRefundStatus(record.orderStatus)
               "
               >
+                <a-divider type="vertical" />
                 <a @click.stop="handleDelivery(record)" class="ele-text-primary">
-                  <SendOutlined /> 发货
+                  发货
                 </a>
+                <a-divider type="vertical" />
                 <a v-permission="'shop:shopOrder:refund'" @click.stop="handleApplyRefund(record)">
-                  <UndoOutlined /> 退款
+                  退款
                 </a>
               </template>
 
@@ -310,14 +334,16 @@
                 record.orderStatus === 0
               "
               >
+                <a-divider type="vertical" />
                 <a
                   @click.stop="handleConfirmReceive(record)"
                   class="ele-text-primary"
                 >
-                  <CheckOutlined /> 确认收货
+                  确认收货
                 </a>
+                <a-divider type="vertical" />
                 <a v-permission="'shop:shopOrder:refund'" @click.stop="handleApplyRefund(record)">
-                  <UndoOutlined /> 退款
+                  退款
                 </a>
               </template>
 
@@ -326,42 +352,47 @@
                 <template
                   v-if="record.orderStatus === 4 || record.orderStatus === 7"
                 >
+                  <a-divider type="vertical" />
                   <a
                     @click.stop="handleApproveRefund(record)"
                     class="ele-text-success"
                   >
-                    <CheckCircleOutlined /> 同意退款
+                    同意退款
                   </a>
+                  <a-divider type="vertical" />
                   <a
                     @click.stop="handleRejectRefund(record)"
                     class="ele-text-danger"
                   >
-                    <CloseCircleOutlined /> 拒绝退款
+                    拒绝退款
                   </a>
                 </template>
 
                 <template v-if="record.orderStatus === 5">
+                  <a-divider type="vertical" />
                   <a @click.stop="handleRetryRefund(record)">
-                    <RedoOutlined /> 重新处理
+                    重新处理
                   </a>
                 </template>
               </template>
 
               <!-- 已完成状态的操作 -->
               <template v-if="record.orderStatus === 1">
+                <a-divider type="vertical" />
                 <a v-permission="'shop:shopOrder:refund'" @click.stop="handleApplyRefund(record)">
-                  <UndoOutlined /> 退款
+                  退款
                 </a>
               </template>
 
               <!-- 删除操作 - 已完成、已关闭、退款成功的订单可以删除 -->
               <template v-if="canDeleteOrder(record)">
+                <a-divider type="vertical" />
                 <a-popconfirm
                   title="确定要删除此订单吗？删除后无法恢复。"
                   @confirm="remove(record)"
                 >
                   <a class="ele-text-danger" @click.stop>
-                    <DeleteOutlined /> 删除
+                    删除
                   </a>
                 </a-popconfirm>
               </template>
@@ -400,16 +431,6 @@
   } from 'ele-admin-pro/es/ele-pro-table/types';
   import {
     ExclamationCircleOutlined,
-    EyeOutlined,
-    EditOutlined,
-    CloseOutlined,
-    SendOutlined,
-    UndoOutlined,
-    CheckOutlined,
-    CheckCircleOutlined,
-    CloseCircleOutlined,
-    RedoOutlined,
-    DeleteOutlined,
     InfoCircleOutlined
   } from '@ant-design/icons-vue';
   import Search from './components/search.vue';
@@ -457,6 +478,24 @@
     validTabs.includes(tabFromQuery) ? tabFromQuery : 'all'
   );
 
+  // 商品明细展开状态：记录已展开商品明细的订单 orderId
+  const expandedOrderIds = ref<Set<string>>(new Set());
+  // 商品明细默认折叠时显示的条数
+  const collapsedGoodsCount = 2;
+  // 当前订单的商品明细是否已展开
+  const isOrderGoodsExpanded = (record: ShopOrder) =>
+    expandedOrderIds.value.has(String(record.orderId));
+  // 切换订单商品明细的展开/收起
+  const toggleOrderGoodsExpanded = (record: ShopOrder) => {
+    const next = new Set(expandedOrderIds.value);
+    if (next.has(String(record.orderId))) {
+      next.delete(String(record.orderId));
+    } else {
+      next.add(String(record.orderId));
+    }
+    expandedOrderIds.value = next;
+  };
+
   // ============ 新订单提醒 ============
   const { enabled: notifyEnabled, toggle: onNotifyToggle, testNotify: onTestNotify, clearBadge } = useOrderNotify({
     onNewOrder: () => reload()
@@ -575,9 +614,8 @@
     {
       title: '操作',
       key: 'action',
-      width: 240,
+      width: 220,
       fixed: 'right',
-      align: 'center',
       hideInSetting: true
     }
   ]);