feat(ui): 优化我的订单界面与顶部导航栏视觉体验，彻底修复表格省略号截断点

1. 顶部导航栏 (AppLayout.css):
   - 增强毛玻璃质感 (高通透 rgba(255, 255, 255, 0.76) + blur(20px))
   - 全面升级品牌标识、搜索框、客服按钮、发布账号与用户状态栏胶囊样式

2. 我的订单界面 (OrdersView.vue & OrdersView.css):
   - 全新横幅区 (Orders Hero Header) 与实时订单统计徽标
   - 全新药丸胶囊状态筛选标签栏 (Pill Tabs)
   - 解决身份列点号残留问题：扩宽列宽至 100px 并禁用单元格 ellipsis 伪截断

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

@@ -304,35 +304,50 @@ function bizTypeLabel(bizType: BizType) {
 </script>
 
 <template>
-  <section class="page">
-    <div class="page-header">
-      <p class="eyebrow">ORDERS</p>
-      <h1>我的订单</h1>
-      <p>租赁与撞车订单统一展示，按创建时间倒序排列。</p>
+  <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 class="orders-total-badge">{{ unifiedOrders.length }} 笔订单</span>
+        </div>
+        <p 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-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>
+    <!-- 状态筛选胶囊条 -->
+    <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>
-        </template>
-      </el-tab-pane>
-    </el-tabs>
+        </button>
+      </div>
+    </div>
 
     <div v-if="displayOrders.length === 0 && !loading" class="empty-state">
       <el-empty :description="searchKeyword ? '没有找到匹配的订单' : '暂无订单'" />
@@ -415,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 }">
@@ -457,13 +470,14 @@ function bizTypeLabel(bizType: BizType) {
                 "
                 size="small"
                 type="primary"
+                round
                 :disabled="row.rental.renter_id !== session.userId"
                 :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>
@@ -486,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>