优化订单列表状态标签布局

apps/frontend/src/components/admin/AdminStatusTag.vue

@@ -65,6 +65,7 @@ function resolveType(status: string): ElTagType {
       'expired',
       'operator',
       'pending_binding',
+      'pending_config',
       'binding_exception',
       'not_started',
       'consumed',
@@ -124,6 +125,7 @@ function resolveLabel(status: string) {
     processing: '处理中',
     system_bound: '系统已绑定',
     pending_binding: '待系统绑定',
+    pending_config: '待配置',
     pending_binding_prepare: '待准备绑定',
     not_started: '未开始',
     waiting_binding: '待客户绑定',

apps/frontend/src/views/admin/orders/AdminOrdersView.vue

@@ -107,7 +107,7 @@ function resolveFollowUpText(item: AdminOrderListItem) {
     item.systemBindingStatus === "binding_exception"
   )
     return "绑定异常";
-  if (item.completedBindingTaskCount <= 0) return "等待完整绑定";
+  if (item.completedBindingTaskCount <= 0) return "待完整绑定";
   if (item.systemBoundTaskCount < item.taskCount) return "系统绑定未完成";
   return "链路正常";
 }
@@ -254,12 +254,14 @@ onMounted(() => {
                 >
                   {{ row.platformOrderId }}
                 </RouterLink>
-                <div class="cell-meta-row">
+                <div class="order-meta-block">
-                  <span class="compact-chip">{{ row.platform || "-" }}</span>
+                  <span class="source-badge">{{ row.platform || "-" }}</span>
-                  <span class="compact-chip">{{ resolveShopLabel(row) }}</span>
+                  <span class="order-meta-text" :title="resolveShopLabel(row)">
-                  <span class="compact-chip compact-chip--muted"
+                    店铺 {{ resolveShopLabel(row) }}
-                    >买家 {{ resolveBuyerLabel(row) }}</span
+                  </span>
-                  >
+                  <span class="order-meta-text" :title="resolveBuyerLabel(row)">
+                    买家 {{ resolveBuyerLabel(row) }}
+                  </span>
                 </div>
               </div>
             </template>
@@ -283,9 +285,13 @@ onMounted(() => {
           </el-table-column>
           <el-table-column label="支付/状态" min-width="140">
             <template #default="{ row }">
-              <div class="cell-stack">
+              <div class="status-line-stack">
-                <AdminStatusTag :status="row.payStatus" :show-raw="false" />
+                <div class="status-line">
-                <div class="status-stack">
+                  <span class="status-label">支付</span>
+                  <AdminStatusTag :status="row.payStatus" :show-raw="false" />
+                </div>
+                <div class="status-line">
+                  <span class="status-label">订单</span>
                   <AdminStatusTag :status="row.orderStatus" :show-raw="false" />
                 </div>
               </div>
@@ -293,16 +299,22 @@ onMounted(() => {
           </el-table-column>
           <el-table-column label="交付状态" min-width="230">
             <template #default="{ row }">
-              <div class="cell-stack">
+              <div class="delivery-status-panel">
-                <div class="status-stack">
+                <div class="delivery-status-grid">
-                  <AdminStatusTag
+                  <div class="status-line">
-                    :status="row.systemBindingStatus"
+                    <span class="status-label">系统</span>
-                    :show-raw="false"
+                    <AdminStatusTag
-                  />
+                      :status="row.systemBindingStatus"
-                  <AdminStatusTag
+                      :show-raw="false"
-                    :status="row.userBindingStatus"
+                    />
-                    :show-raw="false"
+                  </div>
-                  />
+                  <div class="status-line">
+                    <span class="status-label">完整</span>
+                    <AdminStatusTag
+                      :status="row.userBindingStatus"
+                      :show-raw="false"
+                    />
+                  </div>
                 </div>
                 <span
                   class="follow-up-chip"
@@ -319,7 +331,7 @@ onMounted(() => {
                       )
                     "
                   >
-                    完整 {{ row.completedBindingTaskCount }}/{{ row.taskCount }}
+                    完整 <strong>{{ row.completedBindingTaskCount }}/{{ row.taskCount }}</strong>
                   </span>
                   <span
                     class="progress-chip"
@@ -330,7 +342,7 @@ onMounted(() => {
                       )
                     "
                   >
-                    系统 {{ row.systemBoundTaskCount }}/{{ row.taskCount }}
+                    系统 <strong>{{ row.systemBoundTaskCount }}/{{ row.taskCount }}</strong>
                   </span>
                 </div>
               </div>
@@ -389,9 +401,91 @@ onMounted(() => {
   white-space: nowrap;
 }
 
+.order-meta-block {
+  display: grid;
+  grid-template-columns: minmax(72px, max-content) minmax(0, 1fr);
+  gap: var(--space-2);
+  align-items: center;
+}
+
+.source-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 24px;
+  padding: 0 10px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-full);
+  background: var(--bg-subtle);
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  font-weight: 700;
+}
+
+.order-meta-text {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.status-line-stack,
+.delivery-status-panel {
+  display: grid;
+  gap: var(--space-2);
+  align-content: start;
+}
+
+.delivery-status-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(112px, 1fr));
+  gap: var(--space-2);
+}
+
+.status-line {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr);
+  gap: var(--space-2);
+  align-items: center;
+  min-width: 0;
+}
+
+.status-label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 22px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-full);
+  background: #f7f9fc;
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.status-line :deep(.el-tag),
+.status-line :deep(.el-tag__content) {
+  width: 100%;
+  min-width: 0;
+}
+
+.status-line :deep(.el-tag) {
+  justify-content: center;
+}
+
+.status-line :deep(.el-tag__content) {
+  display: block;
+  overflow: hidden;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .progress-row-stack {
-  display: flex;
+  display: grid;
-  flex-wrap: wrap;
+  grid-template-columns: repeat(2, minmax(112px, 1fr));
   gap: var(--space-2);
   margin-top: 2px;
 }
@@ -400,6 +494,7 @@ onMounted(() => {
 .follow-up-chip {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   min-height: 26px;
   padding: 0 9px;
   border-radius: var(--radius-full);
@@ -408,6 +503,19 @@ onMounted(() => {
   border: 1px solid transparent;
   white-space: nowrap;
 }
+
+.progress-chip {
+  gap: 4px;
+}
+
+.follow-up-chip {
+  width: 100%;
+}
+
+.progress-chip strong {
+  color: inherit;
+  font-weight: 800;
+}
 .progress-chip[data-tone="success"] {
   color: #0f766e;
   background: var(--color-success-light);