merge(main): 同步主站最新 UI 与审核优化代码并保持分销多租户隔离

frontend/src/features/orders/views/OrdersView.vue

@@ -301,43 +301,56 @@ function bizTypeLabel(bizType: BizType) {
 </script>
 
 <template>
-  <section class="page">
-    <div class="page-header">
-      <p class="eyebrow">{{ siteStore.isDistribution ? 'DISTRIBUTION ORDERS' : 'ORDERS' }}</p>
-      <div class="header-title-row">
-        <h1>我的订单</h1>
-        <span v-if="siteStore.isDistribution" class="site-order-tag">
-          {{ siteStore.siteName }} · 专属订单
-        </span>
-      </div>
-      <p v-if="siteStore.isDistribution">
-        当前为【{{ siteStore.siteName }}】专属分销商城，仅展示在此分销站产生的订单记录。
-      </p>
-      <p v-else>租赁与撞车订单统一展示，按创建时间倒序排列。</p>
-    </div>
-
-    <div class="orders-toolbar">
-      <el-input
-        v-model="searchKeyword"
-        placeholder="搜索订单号 / 商品 / 账号"
-        :prefix-icon="Search"
-        clearable
-        class="search-input"
-      />
-    </div>
-
-    <el-tabs v-model="activeTab" class="order-tabs" @tab-change="handleTabChange">
-      <el-tab-pane v-for="tab in statusTabs" :key="tab.key" :name="tab.key">
-        <template #label>
-          <span class="tab-label">
-            {{ tab.label }}
-            <span v-if="(tabCounts?.[tab.key] ?? 0) > 0" class="tab-count">{{
-              tabCounts?.[tab.key]
-            }}</span>
+  <section class="orders-page-redesign">
+    <!-- 头部横幅区 -->
+    <div class="orders-hero-header">
+      <div class="hero-header-left">
+        <div class="hero-title-row">
+          <h1 class="hero-title">我的订单</h1>
+          <span v-if="siteStore.isDistribution" class="site-order-tag">
+            {{ siteStore.siteName }} · 专属订单
           </span>
-        </template>
-      </el-tab-pane>
-    </el-tabs>
+          <span class="orders-total-badge">{{ unifiedOrders.length }} 笔订单</span>
+        </div>
+        <p v-if="siteStore.isDistribution" class="hero-subtitle">
+          当前为【{{ siteStore.siteName }}】专属分销商城，仅展示在此分销站产生的订单记录
+        </p>
+        <p v-else class="hero-subtitle">租赁与撞车订单统一管理 · 实时交接与进度追踪</p>
+      </div>
+
+      <div class="orders-search-box">
+        <el-input
+          v-model="searchKeyword"
+          placeholder="搜索订单号 / 商品名称 / 编号"
+          :prefix-icon="Search"
+          clearable
+          class="orders-search-input"
+        />
+      </div>
+    </div>
+
+    <!-- 状态筛选胶囊条 -->
+    <div class="orders-filter-strip">
+      <div class="orders-pill-tabs">
+        <button
+          v-for="tab in statusTabs"
+          :key="tab.key"
+          type="button"
+          class="orders-pill-tab"
+          :class="{ active: activeTab === tab.key }"
+          @click="handleTabChange(tab.key)"
+        >
+          <span class="tab-name">{{ tab.label }}</span>
+          <span
+            v-if="(tabCounts?.[tab.key] ?? 0) > 0"
+            class="tab-badge"
+            :class="{ 'is-active': activeTab === tab.key }"
+          >
+            {{ tabCounts?.[tab.key] }}
+          </span>
+        </button>
+      </div>
+    </div>
 
     <div v-if="displayOrders.length === 0 && !loading" class="empty-state">
       <el-empty :description="searchKeyword ? '没有找到匹配的订单' : '暂无订单'" />
@@ -400,7 +413,7 @@ function bizTypeLabel(bizType: BizType) {
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="押金 / 数量" width="110">
+        <el-table-column label="押金 / 数量" width="130">
           <template #default="{ row }">
             <div v-if="row.bizType === 'rental' && row.rental" class="amount-cell">
               <span class="amount-value"
@@ -417,17 +430,15 @@ function bizTypeLabel(bizType: BizType) {
             >
           </template>
         </el-table-column>
-        <el-table-column label="身份" width="80">
-          <template #default="{ row }">
-            <el-tag
+        <el-table-column label="身份" width="100" align="center">
+          <template #default="{ row }"
+            ><span
               v-if="row.bizType === 'rental' && row.rental"
-              :type="isRenter(row.rental) ? 'primary' : 'success'"
-              size="small"
-            >
-              {{ orderRole(row.rental) }}
-            </el-tag>
-            <span v-else class="muted">买家</span>
-          </template>
+              class="role-tag"
+              :class="isRenter(row.rental) ? 'renter' : 'owner'"
+              >{{ orderRole(row.rental) }}</span
+            ><span v-else class="role-tag buyer">买家</span></template
+          >
         </el-table-column>
         <el-table-column label="状态" width="140">
           <template #default="{ row }">
@@ -459,13 +470,14 @@ function bizTypeLabel(bizType: BizType) {
                 "
                 size="small"
                 type="primary"
+                round
                 :disabled="!isRenter(row.rental)"
                 :loading="payingOrderId === row.rental.id"
                 @click="handlePay(row.rental)"
               >
                 去支付
               </el-button>
-              <el-button size="small" @click="goDetail(row)">详情</el-button>
+              <el-button size="small" round @click="goDetail(row)">详情</el-button>
             </div>
           </template>
         </el-table-column>
@@ -488,13 +500,12 @@ function bizTypeLabel(bizType: BizType) {
                 <CopyDocument />
               </el-icon>
             </div>
-            <el-tag
+            <span
               v-if="item.bizType === 'rental' && item.rental"
-              :type="isRenter(item.rental) ? 'primary' : 'success'"
-              size="small"
+              class="role-tag"
+              :class="isRenter(item.rental) ? 'renter' : 'owner'"
+              >{{ orderRole(item.rental) }}</span
             >
-              {{ orderRole(item.rental) }}
-            </el-tag>
             <span v-else class="crash-status" :class="item.status">{{ statusText(item) }}</span>
           </div>