pc版本增加个人资料

frontend/src/layouts/AppLayout.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
 import {
   ArrowDown,
   ChatDotRound,
   CirclePlus,
+  DocumentChecked,
+  EditPen,
   House,
   Search,
   Service,
@@ -30,6 +32,19 @@ const navItems = [
 const showUserDropdown = ref(false);
 const supportLoading = ref(false);
 
+const realnameBadge = computed(() => {
+  switch (session.realnameStatus) {
+    case "verified":
+      return { text: "已实名", tone: "verified" };
+    case "pending":
+      return { text: "认证中", tone: "pending" };
+    case "rejected":
+      return { text: "认证失败", tone: "rejected" };
+    default:
+      return { text: "未实名", tone: "unverified" };
+  }
+});
+
 function handleLogout() {
   session.logout();
   showUserDropdown.value = false;
@@ -120,12 +135,23 @@ async function handleSupportClick() {
                 <span v-else class="pc-avatar-text">{{ session.avatarText }}</span>
               </span>
               <span class="pc-user-name">{{ session.displayName }}</span>
+              <span class="pc-realname-badge" :class="`is-${realnameBadge.tone}`">
+                {{ realnameBadge.text }}
+              </span>
               <el-icon class="arrow-icon" :class="{ rotated: showUserDropdown }"><ArrowDown /></el-icon>
             </button>
 
             <Transition name="dropdown">
               <div v-if="showUserDropdown" class="pc-user-dropdown-container">
                 <div class="pc-user-dropdown">
+                  <RouterLink
+                    class="dropdown-item"
+                    to="/profile"
+                    @click="showUserDropdown = false"
+                  >
+                    <el-icon><EditPen /></el-icon>
+                    <span>个人资料</span>
+                  </RouterLink>
                   <RouterLink
                     class="dropdown-item"
                     to="/orders"
@@ -150,6 +176,17 @@ async function handleSupportClick() {
                     <el-icon><CirclePlus /></el-icon>
                     <span>发布账号</span>
                   </RouterLink>
+                  <RouterLink
+                    class="dropdown-item"
+                    to="/realname"
+                    @click="showUserDropdown = false"
+                  >
+                    <el-icon><DocumentChecked /></el-icon>
+                    <span>实名认证</span>
+                    <span class="dropdown-status" :class="`is-${realnameBadge.tone}`">
+                      {{ realnameBadge.text }}
+                    </span>
+                  </RouterLink>
                   <div class="dropdown-divider"></div>
                   <button class="dropdown-item logout" @click="handleLogout">
                     <el-icon><SwitchButton /></el-icon>
@@ -469,6 +506,44 @@ async function handleSupportClick() {
   white-space: nowrap;
 }
 
+.pc-realname-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  height: 22px;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.pc-realname-badge.is-verified,
+.dropdown-status.is-verified {
+  background: #ecfdf3;
+  color: #16a34a;
+}
+
+.pc-realname-badge.is-pending,
+.dropdown-status.is-pending {
+  background: #fff7ed;
+  color: #f97316;
+}
+
+.pc-realname-badge.is-rejected,
+.dropdown-status.is-rejected {
+  background: #fff1f2;
+  color: #e11d48;
+}
+
+.pc-realname-badge.is-unverified,
+.dropdown-status.is-unverified {
+  background: #f1f5f9;
+  color: #64748b;
+}
+
 .arrow-icon {
   font-size: 12px;
   color: #8b9cb5;
@@ -514,6 +589,21 @@ async function handleSupportClick() {
   transition: all 0.2s;
 }
 
+.dropdown-status {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 54px;
+  height: 22px;
+  margin-left: auto;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1;
+  white-space: nowrap;
+}
+
 .dropdown-item:hover {
   background: #fff3e8;
   color: #ff6a00;
@@ -569,4 +659,10 @@ async function handleSupportClick() {
   padding: 20px 24px;
   overflow-x: clip;
 }
+
+@media (max-width: 1280px) {
+  .pc-realname-badge {
+    display: none;
+  }
+}
 </style>