优化详情页和发布界面等

frontend/src/layouts/AppLayout.vue

@@ -6,14 +6,19 @@ import {
   ArrowDown,
   ChatDotRound,
   CirclePlus,
+  Coin,
   DocumentChecked,
   EditPen,
+  Finished,
   House,
   Search,
   Service,
+  Shop,
   SwitchButton,
   Tickets,
   UserFilled,
+  Van,
+  VideoPlay,
   Wallet,
 } from "@element-plus/icons-vue";
 import { ensureSupportChat } from "@/api/chats";
@@ -28,6 +33,17 @@ const navItems = [
   { label: "消息", to: "/messages", icon: ChatDotRound },
   { label: "钱包", to: "/wallet", icon: Wallet },
 ];
+const buyerServiceItems = [
+  { label: "待支付", icon: Coin, to: { path: "/orders", query: { tab: "pending_payment" } } },
+  { label: "待交接", icon: Van, to: { path: "/orders", query: { tab: "pending_handoff" } } },
+  { label: "使用中", icon: VideoPlay, to: { path: "/orders", query: { tab: "renting" } } },
+  { label: "已完成", icon: Finished, to: { path: "/orders", query: { tab: "completed" } } },
+];
+const sellerServiceItems = [
+  { label: "发布商品", icon: CirclePlus, to: "/seller/listings/create" },
+  { label: "我的商品", icon: Shop, to: "/seller/listings" },
+  { label: "提现/账单", icon: Wallet, to: "/wallet" },
+];
 
 const showUserDropdown = ref(false);
 const supportLoading = ref(false);
@@ -187,6 +203,51 @@ async function handleSupportClick() {
                       {{ realnameBadge.text }}
                     </span>
                   </RouterLink>
+
+                  <div class="dropdown-divider"></div>
+                  <section class="dropdown-service-group">
+                    <div class="dropdown-service-head">
+                      <span>买家服务</span>
+                      <RouterLink
+                        class="dropdown-service-more"
+                        :to="{ path: '/orders', query: { tab: 'all' } }"
+                        @click="showUserDropdown = false"
+                      >
+                        全部订单
+                      </RouterLink>
+                    </div>
+                    <div class="dropdown-service-grid">
+                      <RouterLink
+                        v-for="item in buyerServiceItems"
+                        :key="item.label"
+                        class="dropdown-service-card"
+                        :to="item.to"
+                        @click="showUserDropdown = false"
+                      >
+                        <el-icon><component :is="item.icon" /></el-icon>
+                        <span>{{ item.label }}</span>
+                      </RouterLink>
+                    </div>
+                  </section>
+
+                  <section class="dropdown-service-group">
+                    <div class="dropdown-service-head">
+                      <span>卖家服务</span>
+                    </div>
+                    <div class="dropdown-seller-list">
+                      <RouterLink
+                        v-for="item in sellerServiceItems"
+                        :key="item.label"
+                        class="dropdown-seller-item"
+                        :to="item.to"
+                        @click="showUserDropdown = false"
+                      >
+                        <el-icon><component :is="item.icon" /></el-icon>
+                        <span>{{ item.label }}</span>
+                      </RouterLink>
+                    </div>
+                  </section>
+
                   <div class="dropdown-divider"></div>
                   <button class="dropdown-item logout" @click="handleLogout">
                     <el-icon><SwitchButton /></el-icon>
@@ -564,8 +625,8 @@ async function handleSupportClick() {
 }
 
 .pc-user-dropdown {
-  min-width: 200px;
-  padding: 8px;
+  width: 324px;
+  padding: 10px;
   border-radius: 14px;
   background: #fff;
   border: 1px solid #eef1f5;
@@ -638,6 +699,101 @@ async function handleSupportClick() {
   background: #f1f5f9;
 }
 
+.dropdown-service-group {
+  padding: 6px 4px 4px;
+}
+
+.dropdown-service-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px 8px;
+  color: #17233d;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.dropdown-service-more {
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 800;
+  text-decoration: none;
+}
+
+.dropdown-service-more:hover {
+  color: #ff6a00;
+}
+
+.dropdown-service-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.dropdown-service-card,
+.dropdown-seller-item {
+  text-decoration: none;
+  transition: all 0.2s;
+}
+
+.dropdown-service-card {
+  display: grid;
+  min-width: 0;
+  min-height: 68px;
+  place-items: center;
+  gap: 6px;
+  padding: 8px 4px;
+  border-radius: 10px;
+  background: #f8fafc;
+  color: #475569;
+  font-size: 12px;
+  font-weight: 800;
+  text-align: center;
+}
+
+.dropdown-service-card .el-icon {
+  color: #ff6a00;
+  font-size: 18px;
+}
+
+.dropdown-service-card:hover {
+  background: #fff3e8;
+  color: #ff6a00;
+  transform: translateY(-1px);
+}
+
+.dropdown-seller-list {
+  display: grid;
+  gap: 6px;
+}
+
+.dropdown-seller-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 36px;
+  padding: 0 10px;
+  border-radius: 10px;
+  background: #f8fafc;
+  color: #475569;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.dropdown-seller-item .el-icon {
+  color: #94a3b8;
+  font-size: 16px;
+}
+
+.dropdown-seller-item:hover {
+  background: #fff3e8;
+  color: #ff6a00;
+}
+
+.dropdown-seller-item:hover .el-icon {
+  color: #ff6a00;
+}
+
 /* 下拉动画 */
 .dropdown-enter-active,
 .dropdown-leave-active {