From 5d8a009935a779496316f1483a62025cdce8d4c2 Mon Sep 17 00:00:00 2001
From: yml <yml@yml.com>
Date: Mon, 25 May 2026 09:20:18 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83=E4=B8=8E=E8=AE=A2?=
 =?UTF-8?q?=E5=8D=95=E7=95=8C=E9=9D=A2=20UI=EF=BC=8C=E9=87=87=E7=94=A8?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80=E7=99=BD=E7=81=B0=E8=89=B2=E8=B0=83=E5=B9=B6?=
 =?UTF-8?q?=E5=8E=BB=E9=99=A4=E7=AA=81=E5=85=80=E8=89=B2=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components.d.ts                      |   2 +
 .../src/views/mobile/MobileOrdersView.vue     | 331 ++++++-----
 .../src/views/mobile/MobileProfileView.vue    | 552 ++++++++++++++----
 3 files changed, 644 insertions(+), 241 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 9e4c94c..7380d7f 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -52,6 +52,8 @@ declare module 'vue' {
     VanStepper: typeof import('vant/es')['Stepper']
     VanSwipe: typeof import('vant/es')['Swipe']
     VanSwipeItem: typeof import('vant/es')['SwipeItem']
+    VanTab: typeof import('vant/es')['Tab']
+    VanTabs: typeof import('vant/es')['Tabs']
     VanTag: typeof import('vant/es')['Tag']
   }
   export interface GlobalDirectives {
diff --git a/frontend/src/views/mobile/MobileOrdersView.vue b/frontend/src/views/mobile/MobileOrdersView.vue
index e943499..7a4ccc5 100644
--- a/frontend/src/views/mobile/MobileOrdersView.vue
+++ b/frontend/src/views/mobile/MobileOrdersView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref, computed } from "vue";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import { showToast } from "vant";
 import MobileBottomNav from "@/components/MobileBottomNav.vue";
 
@@ -9,13 +9,19 @@ import { useSessionStore } from "@/stores/session";
 import { formatDateMinute } from "@/utils/time";
 
 const router = useRouter();
+const route = useRoute();
 const session = useSessionStore();
 const loading = ref(false);
 const orders = ref<Order[]>([]);
 const activeTab = ref("all");
 const payingOrderId = ref<number | null>(null);
 
-onMounted(loadOrders);
+onMounted(() => {
+  loadOrders();
+  if (route.query.tab) {
+    activeTab.value = String(route.query.tab);
+  }
+});
 
 async function loadOrders() {
   loading.value = true;
@@ -43,26 +49,6 @@ const displayOrders = computed(() => {
   return orders.value.filter((o) => o.status === activeTab.value);
 });
 
-/* 状态颜色映射 */
-function statusColor(status: string) {
-  const map: Record<string, string> = {
-    pending_payment: "#ff6a00",
-    pending_handoff: "#ff9800",
-    renting: "#1477ff",
-    overdue: "#e91e63",
-    pending_return_confirm: "#e91e63",
-    pending_checkout_confirm: "#e91e63",
-    pending_checkout_accept: "#9c27b0",
-    checkout_disputing: "#f44336",
-    completed: "#4caf50",
-    cancelled: "#999",
-    disputing: "#f44336",
-    abnormal: "#f44336",
-    closed: "#666",
-  };
-  return map[status] || "#999";
-}
-
 function statusLabel(status: string) {
   const map: Record<string, string> = {
     pending_payment: "待支付",
@@ -70,8 +56,8 @@ function statusLabel(status: string) {
     renting: "使用中",
     overdue: "已逾期",
     pending_return_confirm: "待结账",
-    pending_checkout_confirm: "待号主确认结账",
-    pending_checkout_accept: "待租客确认修正",
+    pending_checkout_confirm: "待号主确认",
+    pending_checkout_accept: "待租客确认",
     checkout_disputing: "结账争议中",
     completed: "已完成",
     cancelled: "已取消",
@@ -120,18 +106,26 @@ function readError(error: unknown, fallback: string) {
       <span class="header-spacer"></span>
     </header>
 
-    <!-- 状态筛选条 -->
-    <div class="status-tabs">
-      <button
+    <!-- 状态筛选条 - Vant 滑动标签页 -->
+    <van-tabs
+      v-model:active="activeTab"
+      class="custom-tabs"
+      line-width="20px"
+      line-height="3px"
+      color="#1477ff"
+      title-active-color="#1477ff"
+      title-inactive-color="#6b7280"
+      :border="false"
+      swipeable
+      animated
+    >
+      <van-tab
         v-for="tab in statusTabs"
         :key="tab.key"
-        class="tab-btn"
-        :class="{ active: activeTab === tab.key }"
-        @click="activeTab = tab.key"
-      >
-        {{ tab.label }}
-      </button>
-    </div>
+        :title="tab.label"
+        :name="tab.key"
+      />
+    </van-tabs>
 
     <!-- 订单列表 -->
     <section class="order-list">
@@ -139,12 +133,12 @@ function readError(error: unknown, fallback: string) {
         加载中...
       </van-loading>
 
-      <div v-else-if="displayOrders.length === 0" class="empty-state">
-        <van-icon name="orders-o" :size="48" color="#ccc" />
-        <p>暂无订单</p>
+      <div v-else-if="displayOrders.length === 0" class="empty-state-wrap">
+        <van-empty description="暂无相关订单" image="search" />
       </div>
 
       <div
+        v-else
         v-for="order in displayOrders"
         :key="order.id"
         class="order-card"
@@ -152,11 +146,10 @@ function readError(error: unknown, fallback: string) {
       >
         <!-- 卡片头：订单号 + 状态 -->
         <div class="card-header">
-          <span class="order-no">{{ order.order_no }}</span>
-          <span
-            class="status-badge"
-            :style="{ background: statusColor(order.status) }"
-          >
+          <div class="header-left">
+            <span class="order-no">{{ order.order_no }}</span>
+          </div>
+          <span class="status-badge" :class="'badge-' + order.status">
             {{ statusLabel(order.status) }}
           </span>
         </div>
@@ -164,35 +157,45 @@ function readError(error: unknown, fallback: string) {
         <!-- 卡片体：关键信息 -->
         <div class="card-body">
           <h3 class="order-title">{{ order.title }}</h3>
-          <div class="info-grid">
-            <div class="info-item">
-              <span class="info-label">订单金额</span>
-              <span class="info-value price">¥{{ order.rent_amount }}</span>
+          <div class="tag-row">
+            <span class="info-tag">{{ order.server_region }}</span>
+            <span class="info-tag">{{ order.login_platform }}</span>
+          </div>
+          
+          <div class="price-row">
+            <div class="price-item">
+              <span class="price-label">买家实付租金</span>
+              <span class="price-val">¥{{ order.rent_amount }}</span>
             </div>
-            <div class="info-item">
-              <span class="info-label">押金</span>
-              <span class="info-value">¥{{ order.deposit_amount }}</span>
-            </div>
-            <div class="info-item">
-              <span class="info-label">区服</span>
-              <span class="info-value">{{ order.server_region }}</span>
+            <div class="price-item">
+              <span class="price-label">押金金额</span>
+              <span class="price-val deposit">¥{{ order.deposit_amount }}</span>
             </div>
           </div>
         </div>
 
         <!-- 卡片底：时间 + 操作 -->
         <div class="card-footer">
-          <span class="order-time">{{ formatDateMinute(order.created_at) }}</span>
-          <van-button
-            v-if="order.status === 'pending_payment' && order.renter_id === session.userId"
-            size="mini"
-            type="primary"
-            :loading="payingOrderId === order.id"
-            @click.stop="handlePay(order)"
-          >
-            支付
-          </van-button>
-          <span v-else class="detail-link">查看详情 ›</span>
+          <div class="time-box">
+            <van-icon name="clock-o" class="clock-icon" />
+            <span class="order-time">{{ formatDateMinute(order.created_at) }}</span>
+          </div>
+          <div class="footer-action">
+            <van-button
+              v-if="order.status === 'pending_payment' && order.renter_id === session.userId"
+              size="small"
+              type="warning"
+              round
+              class="pay-btn"
+              :loading="payingOrderId === order.id"
+              @click.stop="handlePay(order)"
+            >
+              去支付
+            </van-button>
+            <span v-else class="detail-link">
+              查看详情 <van-icon name="arrow" :size="10" />
+            </span>
+          </div>
         </div>
       </div>
     </section>
@@ -205,21 +208,22 @@ function readError(error: unknown, fallback: string) {
 <style scoped>
 .mobile-orders {
   min-height: 100dvh;
-  background: #f5f7fa;
-  padding-bottom: calc(56px + env(safe-area-inset-bottom));
+  background: #f6f8fa;
+  padding-bottom: calc(64px + env(safe-area-inset-bottom));
 }
 
 /* ========== 顶部导航 ========== */
 .page-header {
   position: sticky;
   top: 0;
-  z-index: 10;
+  z-index: 100;
   display: flex;
   align-items: center;
   height: 48px;
   padding: 0 12px;
-  background: #fff;
-  border-bottom: 1px solid #eee;
+  background: rgba(255, 255, 255, 0.94);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(243, 244, 246, 0.8);
 }
 
 .page-header h1 {
@@ -228,6 +232,7 @@ function readError(error: unknown, fallback: string) {
   font-size: 17px;
   font-weight: 700;
   text-align: center;
+  color: #111827;
 }
 
 .back-btn {
@@ -237,7 +242,7 @@ function readError(error: unknown, fallback: string) {
   place-items: center;
   border: none;
   background: none;
-  color: #333;
+  color: #374151;
   cursor: pointer;
 }
 
@@ -245,39 +250,29 @@ function readError(error: unknown, fallback: string) {
   width: 36px;
 }
 
-/* ========== 状态筛选条 ========== */
-.status-tabs {
-  display: flex;
-  gap: 6px;
-  padding: 12px 16px;
-  background: #fff;
-  border-bottom: 1px solid #f0f0f0;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
+/* ========== Vant Tabs 自定义样式 ========== */
+.custom-tabs {
+  position: sticky;
+  top: 48px;
+  z-index: 99;
+  background: rgba(255, 255, 255, 0.94);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(243, 244, 246, 0.6);
 }
 
-.tab-btn {
-  flex-shrink: 0;
-  padding: 6px 14px;
-  border-radius: 16px;
-  border: 1px solid #ddd;
-  background: #fff;
-  color: #666;
-  font-size: 12px;
+:deep(.van-tabs__nav) {
+  background: transparent;
+  padding-bottom: 4px;
+}
+
+:deep(.van-tab) {
+  font-size: 13px;
   font-weight: 600;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.tab-btn.active {
-  background: #1477ff;
-  color: #fff;
-  border-color: #1477ff;
 }
 
 /* ========== 订单列表 ========== */
 .order-list {
-  padding: 12px 16px;
+  padding: 14px 16px;
 }
 
 .center-loading {
@@ -286,108 +281,162 @@ function readError(error: unknown, fallback: string) {
   padding: 60px 0;
 }
 
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 80px 0;
-  color: #999;
-  font-size: 14px;
+.empty-state-wrap {
+  padding: 40px 0;
 }
 
 /* ========== 订单卡片 ========== */
 .order-card {
-  background: #fff;
-  border-radius: 12px;
-  margin-bottom: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-  overflow: hidden;
+  background: #ffffff;
+  border-radius: 16px;
+  margin-bottom: 14px;
+  padding: 16px;
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.02), 0 1px 4px rgba(0, 0, 0, 0.02);
+  transition: transform 0.1s ease, box-shadow 0.1s ease;
+  border: 1px solid rgba(243, 244, 246, 0.9);
   cursor: pointer;
-  transition: box-shadow 0.15s;
 }
 
 .order-card:active {
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  transform: scale(0.98);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }
 
 .card-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px 14px 0;
+  padding-bottom: 10px;
+  border-bottom: 1px dashed #f3f4f6;
 }
 
 .order-no {
   font-size: 11px;
-  color: #999;
+  color: #9ca3af;
   font-family: monospace;
 }
 
 .status-badge {
-  display: inline-block;
-  padding: 2px 8px;
+  padding: 4px 8px;
   border-radius: 8px;
-  color: #fff;
   font-size: 11px;
-  font-weight: 600;
+  font-weight: 700;
+  line-height: 1;
 }
 
+/* 状态徽章颜色 - 现代轻量化配色 */
+.badge-pending_payment { color: #ff6a00; background: rgba(255, 106, 0, 0.08); }
+.badge-pending_handoff { color: #d97706; background: rgba(217, 119, 6, 0.08); }
+.badge-renting { color: #1477ff; background: rgba(20, 119, 255, 0.08); }
+.badge-overdue { color: #ef4444; background: rgba(239, 68, 68, 0.08); }
+.badge-pending_return_confirm { color: #8b5cf6; background: rgba(139, 92, 246, 0.08); }
+.badge-pending_checkout_confirm { color: #8b5cf6; background: rgba(139, 92, 246, 0.08); }
+.badge-pending_checkout_accept { color: #a855f7; background: rgba(168, 85, 247, 0.08); }
+.badge-checkout_disputing { color: #ef4444; background: rgba(239, 68, 68, 0.08); }
+.badge-completed { color: #10b981; background: rgba(16, 185, 129, 0.08); }
+.badge-cancelled { color: #9ca3af; background: rgba(156, 163, 175, 0.08); }
+.badge-disputing { color: #ef4444; background: rgba(239, 68, 68, 0.08); }
+.badge-abnormal { color: #ef4444; background: rgba(239, 68, 68, 0.08); }
+.badge-closed { color: #6b7280; background: rgba(107, 114, 128, 0.08); }
+
 .card-body {
-  padding: 10px 14px;
+  padding: 12px 0 0;
 }
 
 .order-title {
   margin: 0 0 8px;
   font-size: 15px;
   font-weight: 700;
-  color: #1a1a1a;
-  line-height: 1.3;
+  color: #111827;
+  line-height: 1.4;
 }
 
-.info-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 6px 16px;
-}
-
-.info-item {
+.tag-row {
   display: flex;
-  justify-content: space-between;
-  font-size: 12px;
+  gap: 6px;
+  margin-bottom: 12px;
 }
 
-.info-label {
-  color: #999;
-}
-
-.info-value {
-  color: #333;
+.info-tag {
+  font-size: 11px;
+  color: #6b7280;
+  background: #f3f4f6;
+  padding: 3px 8px;
+  border-radius: 6px;
   font-weight: 500;
 }
 
-.info-value.price {
-  color: #ff5f00;
-  font-weight: 700;
+.price-row {
+  display: flex;
+  background: #f9fafb;
+  border-radius: 12px;
+  padding: 10px 14px;
+  justify-content: space-between;
+  gap: 12px;
 }
 
+.price-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.price-label {
+  font-size: 10px;
+  color: #9ca3af;
+}
+
+.price-val {
+  font-size: 15px;
+  font-weight: 800;
+  color: #ff5f00;
+}
+
+.price-val.deposit {
+  color: #374151;
+}
+
+/* ========== 卡片底部 ========== */
 .card-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 14px 10px;
-  border-top: 1px solid #f5f5f5;
+  margin-top: 14px;
+  padding-top: 12px;
+  border-top: 1px solid #f3f4f6;
+}
+
+.time-box {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: #9ca3af;
+}
+
+.clock-icon {
+  font-size: 13px;
 }
 
 .order-time {
   font-size: 11px;
-  color: #bbb;
 }
 
 .detail-link {
   font-size: 12px;
   color: #1477ff;
   font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 2px;
 }
 
+.pay-btn {
+  height: 28px !important;
+  padding: 0 16px !important;
+  font-size: 12px !important;
+  font-weight: 700 !important;
+  background: linear-gradient(135deg, #ff8c00, #ff5f00) !important;
+  border: none !important;
+  box-shadow: 0 4px 10px rgba(255, 95, 0, 0.2) !important;
+}
 </style>
diff --git a/frontend/src/views/mobile/MobileProfileView.vue b/frontend/src/views/mobile/MobileProfileView.vue
index f2b4b57..a09705a 100644
--- a/frontend/src/views/mobile/MobileProfileView.vue
+++ b/frontend/src/views/mobile/MobileProfileView.vue
@@ -5,11 +5,15 @@ import { useSessionStore } from "@/stores/session";
 import { showDialog, showToast } from "vant";
 import MobileBottomNav from "@/components/MobileBottomNav.vue";
 
+import { fetchWalletBalance, fetchWalletLedger, type WalletLedger } from "@/api/wallet";
+import { formatDateMinute } from "@/utils/time";
+
 const session = useSessionStore();
 const router = useRouter();
 const route = useRoute();
 
-/** 设置面板 */
+/** 数据项 */
+const balance = ref(0);
 const showSettings = ref(false);
 const showProfileEditor = ref(false);
 const savingProfile = ref(false);
@@ -18,6 +22,11 @@ const profileForm = reactive({
   avatar_url: "",
 });
 
+// 收支明细列表
+const showLedgers = ref(false);
+const loadingLedgers = ref(false);
+const ledgers = ref<WalletLedger[]>([]);
+
 const settingsGroups = [
   {
     title: "账号与安全",
@@ -36,6 +45,47 @@ const settingsGroups = [
   },
 ];
 
+onMounted(() => {
+  if (!isLoggedIn.value) {
+    router.replace({ path: "/m/login", query: { redirect: route.fullPath } });
+  } else {
+    loadBalance();
+  }
+});
+
+async function loadBalance() {
+  try {
+    const wallet = await fetchWalletBalance();
+    balance.value = wallet.available_balance;
+  } catch {
+    // 失败静默处理，显示为默认0
+  }
+}
+
+async function openLedgers() {
+  showLedgers.value = true;
+  loadingLedgers.value = true;
+  try {
+    const res = await fetchWalletLedger(1, 20);
+    ledgers.value = res.items;
+  } catch {
+    showToast({ message: "无法获取账单明细", icon: "cross" });
+  } finally {
+    loadingLedgers.value = false;
+  }
+}
+
+function handleWithdraw() {
+  showDialog({
+    title: "提现提示",
+    message: "为了您的资金安全，提现请前往电脑端网页版进行操作。",
+  });
+}
+
+function goOrders(tabKey: string) {
+  router.push({ path: "/m/orders", query: { tab: tabKey } });
+}
+
 function onSettingClick(action: string) {
   showSettings.value = false;
   switch (action) {
@@ -91,6 +141,7 @@ async function saveProfile() {
     await session.updateProfile({ nickname, avatar_url: avatarURL });
     showProfileEditor.value = false;
     showToast({ message: "资料已更新", icon: "passed" });
+    await loadBalance();
   } catch (error) {
     showToast({ message: readError(error, "资料更新失败"), icon: "cross" });
   } finally {
@@ -124,12 +175,8 @@ function confirmLogout() {
 }
 
 const isLoggedIn = computed(() => Boolean(session.token));
-
-onMounted(() => {
-  if (!isLoggedIn.value) {
-    router.replace({ path: "/m/login", query: { redirect: route.fullPath } });
-  }
-});
+const isRealnameVerified = computed(() => session.realnameStatus === "verified");
+const isRealnamePending = computed(() => session.realnameStatus === "pending");
 
 const defaultName = computed(() =>
   session.phone
@@ -152,7 +199,12 @@ const avatarText = computed(() => displayName.value.slice(0, 1));
     <template v-if="isLoggedIn">
       <!-- Hero 顶部蓝色横幅 -->
       <section class="profile-hero">
-        <div class="hero-bg"></div>
+        <div class="hero-top-row">
+          <span class="app-title">个人中心</span>
+          <button class="hero-setting-btn" @click="showSettings = true">
+            <van-icon name="setting-o" :size="20" color="#374151" />
+          </button>
+        </div>
         <div class="profile-hero-content">
           <div class="avatar-wrap">
             <div class="avatar-circle">
@@ -161,43 +213,134 @@ const avatarText = computed(() => displayName.value.slice(0, 1));
             </div>
           </div>
           <div class="hero-user">
-            <h1>{{ displayName }}</h1>
-            <p>ID: {{ displayId }} · {{ maskedPhone }}</p>
+            <div class="name-row">
+              <h1 class="user-nickname">{{ displayName }}</h1>
+              <van-tag v-if="isRealnameVerified" type="success" size="medium" round class="verified-tag">
+                <van-icon name="shield" /> 已实名
+              </van-tag>
+              <van-tag v-else-if="isRealnamePending" type="warning" size="medium" round class="verified-tag">
+                审核中
+              </van-tag>
+              <van-tag v-else type="danger" size="medium" round class="unverified-tag" @click="router.push('/m/realname')">
+                未实名
+              </van-tag>
+            </div>
+            <p class="user-meta">ID: {{ displayId }} · {{ maskedPhone }}</p>
           </div>
-          <button class="hero-setting-btn" @click="showSettings = true">
-            <van-icon
-              name="setting-o"
-              :size="22"
-              color="#64748b"
-            />
-          </button>
         </div>
       </section>
 
-      <!-- 余额卡片 - 白色浮层 -->
+      <!-- 余额卡片 - 银行卡质感暗色卡片 -->
       <div class="balance-card">
         <div class="balance-row">
           <div class="balance-info">
-            <span class="balance-label">账户余额(元)</span>
-            <strong class="balance-value">¥0.00</strong>
+            <span class="balance-label">账户可用余额(元)</span>
+            <strong class="balance-value">¥{{ balance.toFixed(2) }}</strong>
           </div>
-          <van-button type="primary" size="small" round class="withdraw-btn"
-            >提现</van-button
-          >
+          <button class="withdraw-btn" @click="handleWithdraw">提现</button>
         </div>
         <div class="balance-footer">
-          <van-button
-            size="mini"
-            plain
-            hairline
-            type="warning"
-            class="detail-btn"
-            >查看明细</van-button
-          >
+          <button class="detail-btn" @click="openLedgers">
+            查看收支明细 <van-icon name="arrow" :size="10" />
+          </button>
         </div>
       </div>
+
+      <!-- 买家服务面板 -->
+      <div class="menu-card">
+        <div class="card-header">
+          <h3>买家服务</h3>
+          <span class="see-all" @click="goOrders('all')">
+            全部订单 <van-icon name="arrow" :size="10" />
+          </span>
+        </div>
+        <div class="grid-menu col-4">
+          <div class="grid-item" @click="goOrders('pending_payment')">
+            <div class="icon-wrap warning"><van-icon name="bill-o" :size="22" /></div>
+            <span>待支付</span>
+          </div>
+          <div class="grid-item" @click="goOrders('pending_handoff')">
+            <div class="icon-wrap info"><van-icon name="logistics" :size="22" /></div>
+            <span>待交接</span>
+          </div>
+          <div class="grid-item" @click="goOrders('renting')">
+            <div class="icon-wrap primary"><van-icon name="play-circle-o" :size="22" /></div>
+            <span>使用中</span>
+          </div>
+          <div class="grid-item" @click="goOrders('completed')">
+            <div class="icon-wrap success"><van-icon name="smile-o" :size="22" /></div>
+            <span>已完成</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 卖家服务面板 -->
+      <div class="menu-card">
+        <div class="card-header">
+          <h3>卖家服务</h3>
+        </div>
+        <div class="grid-menu col-3">
+          <div class="grid-item" @click="router.push('/m/seller/listings/create')">
+            <div class="icon-wrap orange"><van-icon name="plus" :size="22" /></div>
+            <span>发布商品</span>
+          </div>
+          <div class="grid-item" @click="showToast('卖家商品管理开发中')">
+            <div class="icon-wrap purple"><van-icon name="shop-o" :size="22" /></div>
+            <span>我的商品</span>
+          </div>
+          <div class="grid-item" @click="openLedgers">
+            <div class="icon-wrap teal"><van-icon name="balance-o" :size="22" /></div>
+            <span>提现/账单</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 常用功能 Cell Group -->
+      <div class="menu-card cell-card">
+        <van-cell-group :border="false">
+          <van-cell title="消息中心" icon="chat-o" is-link to="/m/messages" />
+          <van-cell title="资料修改" icon="edit" is-link @click="openProfileEditor" />
+          <van-cell title="实名认证" icon="idcard" is-link to="/m/realname">
+            <template #value>
+              <span :class="isRealnameVerified ? 'verified-color' : 'unverified-color'">
+                {{ isRealnameVerified ? '已认证' : isRealnamePending ? '审核中' : '未认证' }}
+              </span>
+            </template>
+          </van-cell>
+          <van-cell title="系统设置" icon="setting-o" is-link @click="showSettings = true" />
+        </van-cell-group>
+      </div>
     </template>
 
+    <!-- 账单明细 Popup -->
+    <van-popup
+      v-model:show="showLedgers"
+      position="bottom"
+      round
+      class="ledgers-popup"
+      :style="{ height: '65%' }"
+    >
+      <header class="popup-header">
+        <h3>收支明细</h3>
+        <button class="popup-close" @click="showLedgers = false">✕</button>
+      </header>
+      <div class="popup-body">
+        <van-loading v-if="loadingLedgers" class="center-loading" vertical>加载中...</van-loading>
+        <van-empty v-else-if="ledgers.length === 0" description="暂无收支记录" />
+        <div v-else class="ledger-list">
+          <div v-for="item in ledgers" :key="item.id" class="ledger-item">
+            <div class="ledger-left">
+              <strong class="ledger-remark">{{ item.remark || item.biz_type }}</strong>
+              <span class="ledger-time">{{ formatDateMinute(item.created_at) }}</span>
+            </div>
+            <div class="ledger-right" :class="item.direction === 'in' ? 'in-color' : 'out-color'">
+              {{ item.direction === 'in' ? '+' : '-' }}¥{{ item.amount.toFixed(2) }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </van-popup>
+
     <!-- 设置面板 - Popup -->
     <van-popup
       v-model:show="showSettings"
@@ -238,6 +381,7 @@ const avatarText = computed(() => displayName.value.slice(0, 1));
       </div>
     </van-popup>
 
+    <!-- 个人资料编辑 Popup -->
     <van-popup
       v-model:show="showProfileEditor"
       position="bottom"
@@ -301,50 +445,67 @@ const avatarText = computed(() => displayName.value.slice(0, 1));
 
 <style scoped>
 .mobile-profile-shell {
-  min-height: 100vh;
-  background: #f5f6f8;
+  min-height: 100dvh;
+  background: #f6f8fa;
   color: #1a202c;
-  padding: 0 0 calc(60px + env(safe-area-inset-bottom));
+  padding: 0 0 calc(64px + env(safe-area-inset-bottom));
 }
 
-/* ========== 已登录区 - 个人信息卡 ========== */
+/* ========== Hero Header ========== */
 .profile-hero {
-  position: relative;
-  padding: 14px 12px 0;
+  background: #ffffff;
+  padding: 20px 16px 20px;
+  border-bottom: 1px solid rgba(243, 244, 246, 0.8);
 }
 
-.hero-bg {
-  display: none;
+.hero-top-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.app-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: #111827;
+  letter-spacing: 0.5px;
+}
+
+.hero-setting-btn {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border: none;
+  background: #f3f4f6;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.hero-setting-btn:active {
+  background: #e5e7eb;
 }
 
 .profile-hero-content {
-  position: relative;
-  z-index: 1;
   display: flex;
   align-items: center;
-  gap: 14px;
-  border: 1px solid #eef1f5;
-  border-radius: 18px;
-  background: #fff;
-  padding: 16px;
-  box-shadow: 0 8px 24px rgba(23, 35, 61, 0.06);
-}
-
-.avatar-wrap {
-  flex: 0 0 auto;
+  gap: 16px;
 }
 
 .avatar-circle {
   display: grid;
-  width: 54px;
-  height: 54px;
+  width: 60px;
+  height: 60px;
   place-items: center;
-  border-radius: 16px;
+  border-radius: 999px;
   overflow: hidden;
   background: #eaf2ff;
   color: #1477ff;
-  font-size: 22px;
+  font-size: 24px;
   font-weight: 900;
+  border: 1px solid #e5e7eb;
 }
 
 .avatar-circle img {
@@ -354,45 +515,46 @@ const avatarText = computed(() => displayName.value.slice(0, 1));
 }
 
 .hero-user {
-  min-width: 0;
   flex: 1;
+  min-width: 0;
 }
 
-.hero-user h1 {
-  overflow: hidden;
+.name-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.user-nickname {
   margin: 0;
   font-size: 18px;
   font-weight: 800;
-  color: #17233d;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  color: #111827;
 }
 
-.hero-user p {
+.verified-tag, .unverified-tag {
+  font-size: 10px !important;
+  height: 18px;
+  padding: 0 6px;
+  font-weight: 700;
+  border: none;
+}
+
+.user-meta {
   margin: 4px 0 0;
-  color: #7b8798;
+  color: #6b7280;
   font-size: 12px;
 }
 
-.hero-setting-btn {
-  display: grid;
-  width: 36px;
-  height: 36px;
-  place-items: center;
-  border: none;
-  background: #f4f6f8;
-  border-radius: 12px;
-  cursor: pointer;
-}
-
-/* ========== 余额卡片 - 白色浮层 ========== */
+/* ========== Balance Card ========== */
 .balance-card {
-  position: relative;
-  margin: 12px 12px 0;
-  padding: 18px 16px 14px;
+  margin: 12px 16px 14px;
+  padding: 16px;
   border-radius: 16px;
-  background: #fff;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+  background: #ffffff;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02), 0 1px 4px rgba(0, 0, 0, 0.02);
+  border: 1px solid rgba(243, 244, 246, 0.9);
 }
 
 .balance-row {
@@ -408,37 +570,227 @@ const avatarText = computed(() => displayName.value.slice(0, 1));
 }
 
 .balance-label {
-  color: #8b8f99;
-  font-size: 12px;
+  color: #9ca3af;
+  font-size: 11px;
   font-weight: 600;
 }
 
 .balance-value {
   font-size: 26px;
-  line-height: 1;
-  color: #1a202c;
-  font-weight: 900;
-}
-
-.balance-footer {
-  margin-top: 10px;
-  padding-top: 10px;
-  border-top: 1px solid #f0f0f0;
-}
-
-.detail-btn {
-  border-color: #ff8a42;
-  color: #ff5f00;
-  background: #fff5ee;
   font-weight: 800;
+  font-family: Inter, system-ui, sans-serif;
+  color: #111827;
 }
 
 .withdraw-btn {
+  background: transparent;
+  border: 1px solid #1477ff;
+  color: #1477ff;
+  font-weight: 700;
+  font-size: 12px;
+  height: 28px;
+  padding: 0 16px;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.withdraw-btn:active {
   background: #1477ff;
-  border-color: transparent;
+  color: #ffffff;
+}
+
+.balance-footer {
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px solid #f3f4f6;
+}
+
+.detail-btn {
+  background: transparent;
+  border: none;
+  color: #1477ff;
+  font-weight: 700;
+  font-size: 11px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  padding: 0;
+}
+
+/* ========== Menu Cards ========== */
+.menu-card {
+  margin: 0 16px 14px;
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 16px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02), 0 1px 4px rgba(0, 0, 0, 0.02);
+  border: 1px solid rgba(243, 244, 246, 0.9);
+}
+
+.menu-card.cell-card {
+  padding: 0;
+  overflow: hidden;
+}
+
+.menu-card .card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 14px;
+}
+
+.menu-card .card-header h3 {
+  margin: 0;
+  font-size: 14px;
   font-weight: 800;
-  height: 32px;
-  padding: 0 20px;
+  color: #111827;
+}
+
+.see-all {
+  font-size: 11px;
+  color: #6b7280;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  cursor: pointer;
+}
+
+/* Grid Menu Layout */
+.grid-menu {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.grid-menu.col-4 .grid-item {
+  flex: 0 0 25%;
+}
+
+.grid-menu.col-3 .grid-item {
+  flex: 0 0 33.33%;
+}
+
+.grid-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+}
+
+.grid-item:active .icon-wrap {
+  transform: scale(0.92);
+}
+
+.icon-wrap {
+  display: grid;
+  width: 44px;
+  height: 44px;
+  place-items: center;
+  border-radius: 12px;
+  transition: transform 0.15s ease;
+}
+
+/* Vibrant pastel colors for menu icon wraps */
+.icon-wrap.warning { color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
+.icon-wrap.info { color: #2563eb; background: rgba(37, 99, 235, 0.08); }
+.icon-wrap.primary { color: #1477ff; background: rgba(20, 119, 255, 0.08); }
+.icon-wrap.success { color: #10b981; background: rgba(16, 185, 129, 0.08); }
+.icon-wrap.orange { color: #ff5f00; background: rgba(255, 95, 0, 0.08); }
+.icon-wrap.purple { color: #8b5cf6; background: rgba(139, 92, 246, 0.08); }
+.icon-wrap.teal { color: #0d9488; background: rgba(13, 148, 136, 0.08); }
+
+.grid-item span {
+  font-size: 11px;
+  color: #374151;
+  font-weight: 600;
+}
+
+/* Vant Cell Adjustments */
+:deep(.van-cell-group) {
+  background: transparent;
+}
+:deep(.van-cell) {
+  padding: 14px 16px;
+  font-size: 14px;
+}
+.verified-color {
+  color: #10b981;
+  font-weight: 600;
+}
+.unverified-color {
+  color: #9ca3af;
+}
+
+/* 收支明细 Popup */
+.ledgers-popup {
+  display: flex;
+  flex-direction: column;
+}
+.popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid #f3f4f6;
+  flex-shrink: 0;
+}
+.popup-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 800;
+}
+.popup-close {
+  border: none;
+  background: transparent;
+  font-size: 16px;
+  color: #9ca3af;
+  cursor: pointer;
+}
+.popup-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 16px;
+}
+.ledger-list {
+  display: flex;
+  flex-direction: column;
+}
+.ledger-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 0;
+  border-bottom: 1px solid #f3f4f6;
+}
+.ledger-item:last-child {
+  border-bottom: none;
+}
+.ledger-left {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.ledger-remark {
+  font-size: 14px;
+  color: #1f2937;
+  font-weight: 600;
+}
+.ledger-time {
+  font-size: 11px;
+  color: #9ca3af;
+}
+.ledger-right {
+  font-size: 15px;
+  font-weight: 800;
+}
+.in-color {
+  color: #10b981;
+}
+.out-color {
+  color: #ef4444;
 }
 
 /* ========== 设置面板 ========== */