优化详情页和发布界面等

frontend/src/views/account/ProfileView.vue

@@ -1,5 +1,22 @@
 <script setup lang="ts">
-import { Camera, CircleCheckFilled, EditPen, Postcard, RefreshRight, User, WarningFilled } from '@element-plus/icons-vue'
+import {
+  Camera,
+  CircleCheckFilled,
+  CirclePlus,
+  Coin,
+  EditPen,
+  Finished,
+  Goods,
+  Postcard,
+  RefreshRight,
+  Shop,
+  Tickets,
+  User,
+  Van,
+  VideoPlay,
+  Wallet,
+  WarningFilled,
+} from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { computed, onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
@@ -17,6 +34,17 @@ const form = reactive({
   nickname: '',
   avatar_url: '',
 })
+const buyerServices = [
+  { label: '待支付', icon: Coin, tone: 'warning', to: { path: '/orders', query: { tab: 'pending_payment' } } },
+  { label: '待交接', icon: Van, tone: 'info', to: { path: '/orders', query: { tab: 'pending_handoff' } } },
+  { label: '使用中', icon: VideoPlay, tone: 'primary', to: { path: '/orders', query: { tab: 'renting' } } },
+  { label: '已完成', icon: Finished, tone: 'success', to: { path: '/orders', query: { tab: 'completed' } } },
+]
+const sellerServices = [
+  { label: '发布商品', icon: CirclePlus, tone: 'orange', to: '/seller/listings/create' },
+  { label: '我的商品', icon: Shop, tone: 'purple', to: '/seller/listings' },
+  { label: '提现/账单', icon: Wallet, tone: 'teal', to: '/wallet' },
+]
 
 const displayName = computed(() => session.displayName)
 const maskedPhone = computed(() => {
@@ -192,6 +220,44 @@ function readError(error: unknown, fallback: string) {
         </button>
       </aside>
     </div>
+
+    <div class="service-panels">
+      <section class="service-panel">
+        <div class="service-head">
+          <h2>买家服务</h2>
+          <RouterLink class="service-all" :to="{ path: '/orders', query: { tab: 'all' } }">
+            <span>全部订单</span>
+            <el-icon><Tickets /></el-icon>
+          </RouterLink>
+        </div>
+        <div class="service-grid buyer-grid">
+          <RouterLink v-for="item in buyerServices" :key="item.label" class="service-item" :to="item.to">
+            <span class="service-icon" :class="`is-${item.tone}`">
+              <el-icon><component :is="item.icon" /></el-icon>
+            </span>
+            <strong>{{ item.label }}</strong>
+          </RouterLink>
+        </div>
+      </section>
+
+      <section class="service-panel">
+        <div class="service-head">
+          <h2>卖家服务</h2>
+          <RouterLink class="service-all" to="/seller/listings">
+            <span>管理发布</span>
+            <el-icon><Goods /></el-icon>
+          </RouterLink>
+        </div>
+        <div class="service-grid seller-grid">
+          <RouterLink v-for="item in sellerServices" :key="item.label" class="service-item" :to="item.to">
+            <span class="service-icon" :class="`is-${item.tone}`">
+              <el-icon><component :is="item.icon" /></el-icon>
+            </span>
+            <strong>{{ item.label }}</strong>
+          </RouterLink>
+        </div>
+      </section>
+    </div>
   </section>
 </template>
 
@@ -504,9 +570,145 @@ function readError(error: unknown, fallback: string) {
   color: #ff6a00;
 }
 
+.service-panels {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 22px;
+  margin-top: 22px;
+}
+
+.service-panel {
+  padding: 24px;
+  border: 1px solid #eef1f5;
+  border-radius: 16px;
+  background: #ffffff;
+  box-shadow: 0 10px 28px rgba(23, 35, 61, 0.06);
+}
+
+.service-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+}
+
+.service-head h2 {
+  margin: 0;
+  color: #17233d;
+  font-size: 22px;
+}
+
+.service-all {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: #64748b;
+  font-size: 14px;
+  font-weight: 900;
+  text-decoration: none;
+}
+
+.service-all:hover {
+  color: #ff6a00;
+}
+
+.service-grid {
+  display: grid;
+  gap: 14px;
+  margin-top: 22px;
+}
+
+.buyer-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.seller-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.service-item {
+  display: grid;
+  min-width: 0;
+  min-height: 118px;
+  place-items: center;
+  gap: 10px;
+  padding: 16px 10px;
+  border: 1px solid #edf2f7;
+  border-radius: 14px;
+  background: #fbfdff;
+  color: #1f2937;
+  text-align: center;
+  text-decoration: none;
+  transition:
+    border-color 0.18s ease,
+    box-shadow 0.18s ease,
+    transform 0.18s ease;
+}
+
+.service-item:hover {
+  border-color: rgba(255, 106, 0, 0.35);
+  box-shadow: 0 12px 24px rgba(23, 35, 61, 0.08);
+  transform: translateY(-2px);
+}
+
+.service-item strong {
+  color: #334155;
+  font-size: 15px;
+  font-weight: 900;
+  line-height: 1.35;
+}
+
+.service-icon {
+  display: grid;
+  width: 58px;
+  height: 58px;
+  place-items: center;
+  border-radius: 14px;
+  font-size: 28px;
+}
+
+.service-icon.is-warning {
+  background: #fff7ed;
+  color: #f59e0b;
+}
+
+.service-icon.is-info {
+  background: #eff6ff;
+  color: #2563eb;
+}
+
+.service-icon.is-primary {
+  background: #eef2ff;
+  color: #4f46e5;
+}
+
+.service-icon.is-success {
+  background: #ecfdf3;
+  color: #10b981;
+}
+
+.service-icon.is-orange {
+  background: #fff1e8;
+  color: #ff6a00;
+}
+
+.service-icon.is-purple {
+  background: #f3e8ff;
+  color: #8b5cf6;
+}
+
+.service-icon.is-teal {
+  background: #e8f7f5;
+  color: #0f766e;
+}
+
 @media (max-width: 1100px) {
   .profile-layout {
     grid-template-columns: 1fr;
   }
+
+  .service-panels {
+    grid-template-columns: 1fr;
+  }
 }
 </style>