优化pc端 --初步优化

frontend/src/layouts/AppLayout.vue

@@ -1,14 +1,21 @@
 <script setup lang="ts">
+import { ref } from "vue";
+import { useRouter } from "vue-router";
 import {
   Bell,
   CirclePlus,
   House,
   Search,
   Shop,
+  SwitchButton,
   Tickets,
   UserFilled,
   Wallet,
 } from "@element-plus/icons-vue";
+import { useSessionStore } from "@/stores/session";
+
+const session = useSessionStore();
+const router = useRouter();
 
 const navItems = [
   { label: "首页", to: "/", icon: House },
@@ -16,6 +23,14 @@ const navItems = [
   { label: "我的订单", to: "/orders", icon: Tickets },
   { label: "钱包", to: "/wallet", icon: Wallet },
 ];
+
+const showUserDropdown = ref(false);
+
+function handleLogout() {
+  session.logout();
+  showUserDropdown.value = false;
+  router.replace("/");
+}
 </script>
 
 <template>
@@ -44,14 +59,79 @@ const navItems = [
       </div>
 
       <div class="pc-user-actions">
-        <RouterLink class="pc-icon-link" to="/notifications" aria-label="通知">
+        <!-- 未登录：显示登录/注册按钮 -->
-          <el-icon><Bell /></el-icon>
+        <template v-if="!session.isLoggedIn">
-        </RouterLink>
+          <RouterLink class="pc-icon-link" to="/notifications" aria-label="通知">
-        <RouterLink class="pc-login-link" to="/login">
+            <el-icon><Bell /></el-icon>
-          <el-icon><UserFilled /></el-icon>
+          </RouterLink>
-          <span>登录/注册</span>
+          <RouterLink class="pc-login-link" to="/login">
-        </RouterLink>
+            <el-icon><UserFilled /></el-icon>
-        <RouterLink class="pc-post-link" to="/seller/listings/create">
+            <span>登录/注册</span>
+          </RouterLink>
+        </template>
+
+        <!-- 已登录：显示用户头像+昵称 + 下拉菜单 -->
+        <template v-else>
+          <RouterLink class="pc-icon-link" to="/notifications" aria-label="通知">
+            <el-icon><Bell /></el-icon>
+          </RouterLink>
+
+          <div class="pc-user-block" @mouseleave="showUserDropdown = false">
+            <button
+              class="pc-user-trigger"
+              @mouseenter="showUserDropdown = true"
+              @click="showUserDropdown = !showUserDropdown"
+            >
+              <span class="pc-avatar-chip">
+                <img
+                  v-if="session.avatarUrl"
+                  :src="session.avatarUrl"
+                  alt=""
+                  class="pc-avatar-img"
+                />
+                <span v-else class="pc-avatar-text">{{ session.avatarText }}</span>
+              </span>
+              <span class="pc-user-name">{{ session.displayName }}</span>
+            </button>
+
+            <Transition name="dropdown">
+              <div v-if="showUserDropdown" class="pc-user-dropdown">
+                <RouterLink
+                  class="dropdown-item"
+                  to="/orders"
+                  @click="showUserDropdown = false"
+                >
+                  <el-icon><Tickets /></el-icon>
+                  <span>我的订单</span>
+                </RouterLink>
+                <RouterLink
+                  class="dropdown-item"
+                  to="/wallet"
+                  @click="showUserDropdown = false"
+                >
+                  <el-icon><Wallet /></el-icon>
+                  <span>钱包</span>
+                </RouterLink>
+                <RouterLink
+                  class="dropdown-item"
+                  to="/seller/listings/create"
+                  @click="showUserDropdown = false"
+                >
+                  <el-icon><CirclePlus /></el-icon>
+                  <span>发布账号</span>
+                </RouterLink>
+                <div class="dropdown-divider"></div>
+                <button class="dropdown-item logout" @click="handleLogout">
+                  <el-icon><SwitchButton /></el-icon>
+                  <span>退出登录</span>
+                </button>
+              </div>
+            </Transition>
+          </div>
+        </template>
+
+        <!-- 未登录时发布按钮放在外面 -->
+        <RouterLink v-if="!session.isLoggedIn" class="pc-post-link" to="/login">
           <el-icon><CirclePlus /></el-icon>
           <span>发布账号</span>
         </RouterLink>
@@ -63,3 +143,310 @@ const navItems = [
     </main>
   </div>
 </template>
+
+<style scoped>
+/* ========== 顶部栏 ========== */
+.pc-app-shell {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: #f5f6f8;
+}
+
+.pc-topbar {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  height: 56px;
+  padding: 0 24px;
+  background: #fff;
+  border-bottom: 1px solid #eef1f5;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+}
+
+/* ========== 品牌 ========== */
+.pc-brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none;
+  flex-shrink: 0;
+}
+
+.pc-brand-mark {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  border-radius: 8px;
+  background: #1477ff;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 900;
+}
+
+.pc-brand-text {
+  font-size: 16px;
+  font-weight: 800;
+  color: #17233d;
+  white-space: nowrap;
+}
+
+/* ========== 导航 ========== */
+.pc-nav {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 16px;
+}
+
+.pc-nav-link {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 12px;
+  border-radius: 8px;
+  color: #5a6577;
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: background 0.15s, color 0.15s;
+}
+
+.pc-nav-link:hover,
+.pc-nav-link.router-link-active {
+  background: #f0f5ff;
+  color: #1477ff;
+}
+
+/* ========== 搜索 ========== */
+.pc-search {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+  padding: 0 12px;
+  height: 36px;
+  border-radius: 10px;
+  background: #f4f6f8;
+  max-width: 280px;
+  flex: 0 1 280px;
+}
+
+.pc-search input {
+  border: none;
+  outline: none;
+  background: transparent;
+  color: #17233d;
+  font-size: 13px;
+  width: 100%;
+}
+
+.pc-search input::placeholder {
+  color: #a0aab6;
+}
+
+.pc-search .el-icon {
+  color: #a0aab6;
+  flex-shrink: 0;
+}
+
+/* ========== 用户操作区 ========== */
+.pc-user-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 12px;
+  flex-shrink: 0;
+}
+
+.pc-icon-link {
+  display: grid;
+  width: 36px;
+  height: 36px;
+  place-items: center;
+  border-radius: 10px;
+  color: #6b7a90;
+  text-decoration: none;
+  transition: background 0.15s;
+}
+
+.pc-icon-link:hover {
+  background: #f0f5ff;
+  color: #1477ff;
+}
+
+.pc-login-link {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 14px;
+  border-radius: 10px;
+  background: #1477ff;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 700;
+  text-decoration: none;
+  transition: background 0.15s;
+}
+
+.pc-login-link:hover {
+  background: #0d5fd4;
+}
+
+.pc-post-link {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 14px;
+  border-radius: 10px;
+  background: #ff6a00;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 700;
+  text-decoration: none;
+  transition: background 0.15s;
+}
+
+.pc-post-link:hover {
+  background: #e55d00;
+}
+
+/* ========== 已登录 - 用户块 ========== */
+.pc-user-block {
+  position: relative;
+}
+
+.pc-user-trigger {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 10px 4px 4px;
+  border: none;
+  border-radius: 10px;
+  background: #f4f6f8;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.pc-user-trigger:hover {
+  background: #eaeff5;
+}
+
+.pc-avatar-chip {
+  display: grid;
+  width: 30px;
+  height: 30px;
+  place-items: center;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #1477ff;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 800;
+  flex-shrink: 0;
+}
+
+.pc-avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.pc-avatar-text {
+  line-height: 1;
+}
+
+.pc-user-name {
+  max-width: 100px;
+  overflow: hidden;
+  color: #17233d;
+  font-size: 13px;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ========== 下拉菜单 ========== */
+.pc-user-dropdown {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 200;
+  min-width: 180px;
+  padding: 6px;
+  border-radius: 12px;
+  background: #fff;
+  border: 1px solid #eef1f5;
+  box-shadow: 0 8px 24px rgba(23, 35, 61, 0.12);
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 9px 12px;
+  border: none;
+  border-radius: 8px;
+  background: none;
+  color: #3d4e63;
+  font-size: 14px;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.12s;
+}
+
+.dropdown-item:hover {
+  background: #f0f5ff;
+  color: #1477ff;
+}
+
+.dropdown-item .el-icon {
+  color: #8b9cb5;
+  flex-shrink: 0;
+}
+
+.dropdown-item:hover .el-icon {
+  color: #1477ff;
+}
+
+.dropdown-item.logout {
+  color: #e74c3c;
+}
+
+.dropdown-item.logout .el-icon {
+  color: #e74c3c;
+}
+
+.dropdown-item.logout:hover {
+  background: #fef0ef;
+}
+
+.dropdown-divider {
+  height: 1px;
+  margin: 4px 8px;
+  background: #eef1f5;
+}
+
+/* 下拉动画 */
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+/* ========== 主体 ---------- */
+.pc-main {
+  flex: 1;
+  padding: 20px 24px;
+}
+</style>

frontend/src/stores/session.ts

@@ -1,67 +1,80 @@
-import { defineStore } from 'pinia'
+import { defineStore } from "pinia";
 
-import { fetchMe, loginWithSms, updateMe, type AuthUser } from '@/api/auth'
+import { fetchMe, loginWithSms, updateMe, type AuthUser } from "@/api/auth";
 
-export const useSessionStore = defineStore('session', {
+export const useSessionStore = defineStore("session", {
   state: () => ({
-    token: localStorage.getItem('access_token') || '',
+    token: localStorage.getItem("access_token") || "",
-    refreshToken: localStorage.getItem('refresh_token') || '',
+    refreshToken: localStorage.getItem("refresh_token") || "",
-    userId: Number(localStorage.getItem('user_id') || 0),
+    userId: Number(localStorage.getItem("user_id") || 0),
-    phone: localStorage.getItem('phone') || '',
+    phone: localStorage.getItem("phone") || "",
-    nickname: localStorage.getItem('nickname') || '',
+    nickname: localStorage.getItem("nickname") || "",
-    avatarUrl: localStorage.getItem('avatar_url') || '',
+    avatarUrl: localStorage.getItem("avatar_url") || "",
-    realnameStatus: localStorage.getItem('realname_status') || 'unknown',
+    realnameStatus: localStorage.getItem("realname_status") || "unknown",
   }),
+  getters: {
+    isLoggedIn: (state) => Boolean(state.token),
+    displayName: (state) =>
+      state.nickname ||
+      (state.phone
+        ? `用户${state.phone.slice(-6)}`
+        : `用户${state.userId || 0}`),
+    avatarText: (state) => (state.nickname || state.phone || "U").slice(0, 1),
+  },
   actions: {
     async login(phone: string, code: string) {
-      const result = await loginWithSms(phone, code)
+      const result = await loginWithSms(phone, code);
-      this.applySession(result.user, result.tokens.access_token, result.tokens.refresh_token)
+      this.applySession(
-      return result
+        result.user,
+        result.tokens.access_token,
+        result.tokens.refresh_token
+      );
+      return result;
     },
     async loadMe() {
-      const user = await fetchMe()
+      const user = await fetchMe();
-      this.applyUser(user)
+      this.applyUser(user);
-      return user
+      return user;
     },
     async updateProfile(payload: { nickname: string; avatar_url: string }) {
-      const user = await updateMe(payload)
+      const user = await updateMe(payload);
-      this.applyUser(user)
+      this.applyUser(user);
-      return user
+      return user;
     },
     logout() {
-      this.token = ''
+      this.token = "";
-      this.refreshToken = ''
+      this.refreshToken = "";
-      this.userId = 0
+      this.userId = 0;
-      this.phone = ''
+      this.phone = "";
-      this.realnameStatus = 'unknown'
+      this.realnameStatus = "unknown";
-      localStorage.removeItem('access_token')
+      localStorage.removeItem("access_token");
-      localStorage.removeItem('refresh_token')
+      localStorage.removeItem("refresh_token");
-      localStorage.removeItem('user_id')
+      localStorage.removeItem("user_id");
-      localStorage.removeItem('phone')
+      localStorage.removeItem("phone");
-      localStorage.removeItem('nickname')
+      localStorage.removeItem("nickname");
-      localStorage.removeItem('avatar_url')
+      localStorage.removeItem("avatar_url");
-      localStorage.removeItem('realname_status')
+      localStorage.removeItem("realname_status");
     },
     applySession(user: AuthUser, accessToken: string, refreshToken: string) {
-      this.token = accessToken
+      this.token = accessToken;
-      this.refreshToken = refreshToken
+      this.refreshToken = refreshToken;
-      this.userId = user.id
+      this.userId = user.id;
-      localStorage.setItem('access_token', accessToken)
+      localStorage.setItem("access_token", accessToken);
-      localStorage.setItem('refresh_token', refreshToken)
+      localStorage.setItem("refresh_token", refreshToken);
-      localStorage.setItem('user_id', String(user.id))
+      localStorage.setItem("user_id", String(user.id));
-      this.applyUser(user)
+      this.applyUser(user);
     },
     applyUser(user: AuthUser) {
-      this.userId = user.id
+      this.userId = user.id;
-      localStorage.setItem('user_id', String(user.id))
+      localStorage.setItem("user_id", String(user.id));
-      this.phone = user.phone
+      this.phone = user.phone;
-      localStorage.setItem('phone', user.phone)
+      localStorage.setItem("phone", user.phone);
-      this.nickname = user.nickname
+      this.nickname = user.nickname;
-      localStorage.setItem('nickname', user.nickname)
+      localStorage.setItem("nickname", user.nickname);
-      this.avatarUrl = user.avatar_url
+      this.avatarUrl = user.avatar_url;
-      localStorage.setItem('avatar_url', user.avatar_url)
+      localStorage.setItem("avatar_url", user.avatar_url);
-      this.realnameStatus = user.realname_status
+      this.realnameStatus = user.realname_status;
-      localStorage.setItem('realname_status', user.realname_status)
+      localStorage.setItem("realname_status", user.realname_status);
     },
   },
-})
+});

frontend/vite.config.ts

@@ -26,7 +26,8 @@ export default defineConfig({
       '221329.cc.cd',
       "d4aa-77-93-89-84.ngrok-free.app",
       "frp-bus.com",
-      "www.u499731.nyat.app"
+      "www.u499731.nyat.app",
+      "fn.221329.xyz"
     ],
   },
 });