From 0797452ea411dc83f6382fb26fff3a047f53ee02 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Fri, 29 May 2026 20:17:24 +0800
Subject: [PATCH] =?UTF-8?q?pc=E7=89=88=E6=9C=AC=E5=A2=9E=E5=8A=A0=E4=B8=AA?=
 =?UTF-8?q?=E4=BA=BA=E8=B5=84=E6=96=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/layouts/AppLayout.vue          |  98 +++-
 frontend/src/router/accountRoutes.ts        |   6 +
 frontend/src/views/account/ProfileView.vue  | 512 +++++++++++++++++++
 frontend/src/views/account/RealnameView.vue | 526 +++++++++++++++++++-
 4 files changed, 1119 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/views/account/ProfileView.vue

diff --git a/frontend/src/layouts/AppLayout.vue b/frontend/src/layouts/AppLayout.vue
index cd3064f..761da2d 100644
--- a/frontend/src/layouts/AppLayout.vue
+++ b/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>
diff --git a/frontend/src/router/accountRoutes.ts b/frontend/src/router/accountRoutes.ts
index 15c1d73..674f5b2 100644
--- a/frontend/src/router/accountRoutes.ts
+++ b/frontend/src/router/accountRoutes.ts
@@ -12,6 +12,12 @@ export const accountRoutes: RouteRecordRaw[] = [
     component: () => import('@/views/account/OrderCreateView.vue'),
     meta: { requiresAuth: true },
   },
+  {
+    path: '/profile',
+    name: 'profile',
+    component: () => import('@/views/account/ProfileView.vue'),
+    meta: { requiresAuth: true },
+  },
   {
     path: '/orders',
     name: 'orders',
diff --git a/frontend/src/views/account/ProfileView.vue b/frontend/src/views/account/ProfileView.vue
new file mode 100644
index 0000000..307bddd
--- /dev/null
+++ b/frontend/src/views/account/ProfileView.vue
@@ -0,0 +1,512 @@
+<script setup lang="ts">
+import { Camera, CircleCheckFilled, EditPen, Postcard, RefreshRight, User, WarningFilled } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { uploadFile } from '@/api/files'
+import { useSessionStore } from '@/stores/session'
+import { realnameStatusLabel } from '@/utils/statusLabels'
+
+const session = useSessionStore()
+const router = useRouter()
+const saving = ref(false)
+const uploadingAvatar = ref(false)
+const avatarFileInput = ref<HTMLInputElement | null>(null)
+const form = reactive({
+  nickname: '',
+  avatar_url: '',
+})
+
+const displayName = computed(() => session.displayName)
+const maskedPhone = computed(() => {
+  if (!session.phone) return '未绑定手机号'
+  return `${session.phone.slice(0, 3)}****${session.phone.slice(-4)}`
+})
+const avatarText = computed(() => (form.nickname || displayName.value || 'U').slice(0, 1))
+const realnameTone = computed(() => {
+  if (session.realnameStatus === 'verified') return 'verified'
+  if (session.realnameStatus === 'pending') return 'pending'
+  if (session.realnameStatus === 'rejected') return 'rejected'
+  return 'unverified'
+})
+
+onMounted(async () => {
+  if (!session.phone) {
+    await session.loadMe()
+  }
+  resetForm()
+})
+
+function resetForm() {
+  form.nickname = session.nickname || session.displayName
+  form.avatar_url = session.avatarUrl || ''
+}
+
+function resolveAvatarURL(url: string | undefined | null) {
+  if (!url) return ''
+  if (url.includes('/api/files/object?key=avatar/')) {
+    return url.replace('/api/files/object', '/api/public/files/object')
+  }
+  return url
+}
+
+function triggerAvatarUpload() {
+  avatarFileInput.value?.click()
+}
+
+async function handleAvatarFileChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  input.value = ''
+  if (!file) return
+
+  uploadingAvatar.value = true
+  try {
+    const uploaded = await uploadFile(file, 'avatar')
+    form.avatar_url = uploaded.url
+    ElMessage.success('头像上传成功')
+  } catch (error) {
+    ElMessage.error(readError(error, '头像上传失败'))
+  } finally {
+    uploadingAvatar.value = false
+  }
+}
+
+async function saveProfile() {
+  const nickname = form.nickname.trim()
+  const avatarURL = form.avatar_url.trim()
+  if (!nickname) {
+    ElMessage.warning('请输入昵称')
+    return
+  }
+  if (nickname.length > 24) {
+    ElMessage.warning('昵称不能超过 24 个字符')
+    return
+  }
+
+  saving.value = true
+  try {
+    await session.updateProfile({ nickname, avatar_url: avatarURL })
+    resetForm()
+    ElMessage.success('个人资料已保存')
+  } catch (error) {
+    ElMessage.error(readError(error, '资料更新失败'))
+  } finally {
+    saving.value = false
+  }
+}
+
+function readError(error: unknown, fallback: string) {
+  if (typeof error === 'object' && error && 'response' in error) {
+    const response = (error as { response?: { data?: { message?: string } } }).response
+    return response?.data?.message || fallback
+  }
+  return fallback
+}
+</script>
+
+<template>
+  <section class="profile-page">
+    <div class="profile-hero">
+      <div class="hero-avatar">
+        <img v-if="session.avatarUrl" :src="resolveAvatarURL(session.avatarUrl)" alt="" />
+        <span v-else>{{ session.avatarText }}</span>
+      </div>
+      <div class="hero-copy">
+        <span class="eyebrow">Profile</span>
+        <h1>个人资料</h1>
+        <p>{{ displayName }} · {{ maskedPhone }}</p>
+      </div>
+      <button class="hero-realname" :class="`is-${realnameTone}`" type="button" @click="router.push('/realname')">
+        <el-icon><CircleCheckFilled v-if="session.realnameStatus === 'verified'" /><WarningFilled v-else /></el-icon>
+        <span>{{ realnameStatusLabel(session.realnameStatus) }}</span>
+      </button>
+    </div>
+
+    <div class="profile-layout">
+      <section class="edit-panel">
+        <div class="panel-head">
+          <div class="panel-icon">
+            <el-icon><EditPen /></el-icon>
+          </div>
+          <div>
+            <h2>资料编辑</h2>
+            <p>修改昵称和头像后会同步展示在顶部用户信息中。</p>
+          </div>
+        </div>
+
+        <div class="avatar-editor">
+          <button class="avatar-preview" type="button" @click="triggerAvatarUpload">
+            <img v-if="form.avatar_url" :src="resolveAvatarURL(form.avatar_url)" alt="" />
+            <span v-else>{{ avatarText }}</span>
+            <i><el-icon><Camera /></el-icon></i>
+          </button>
+          <div class="avatar-actions">
+            <strong>{{ form.nickname || displayName }}</strong>
+            <p>支持上传本地图片，也可以直接填写头像 URL。</p>
+            <el-button :icon="Camera" :loading="uploadingAvatar" @click="triggerAvatarUpload">上传头像</el-button>
+            <input ref="avatarFileInput" type="file" accept="image/*" hidden @change="handleAvatarFileChange" />
+          </div>
+        </div>
+
+        <el-form class="profile-form" label-position="top">
+          <el-form-item label="昵称">
+            <el-input v-model="form.nickname" :prefix-icon="User" maxlength="24" placeholder="请输入昵称" size="large" />
+          </el-form-item>
+          <el-form-item label="头像地址">
+            <el-input
+              v-model="form.avatar_url"
+              :prefix-icon="Postcard"
+              maxlength="512"
+              placeholder="可填写图片 URL，留空使用文字头像"
+              size="large"
+            />
+          </el-form-item>
+          <div class="form-actions">
+            <el-button size="large" :icon="RefreshRight" @click="resetForm">重置</el-button>
+            <el-button type="primary" size="large" :icon="EditPen" :loading="saving" @click="saveProfile">保存资料</el-button>
+          </div>
+        </el-form>
+      </section>
+
+      <aside class="account-card">
+        <span class="card-kicker">账号信息</span>
+        <dl>
+          <div>
+            <dt>用户 ID</dt>
+            <dd>{{ session.userId || '-' }}</dd>
+          </div>
+          <div>
+            <dt>手机号</dt>
+            <dd>{{ maskedPhone }}</dd>
+          </div>
+          <div>
+            <dt>实名状态</dt>
+            <dd :class="`is-${realnameTone}`">{{ realnameStatusLabel(session.realnameStatus) }}</dd>
+          </div>
+        </dl>
+        <button class="realname-shortcut" type="button" @click="router.push('/realname')">
+          <span>查看实名认证</span>
+          <el-icon><CircleCheckFilled /></el-icon>
+        </button>
+      </aside>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.profile-page {
+  width: min(1180px, 100%);
+  margin: 0 auto;
+  padding: 10px 0 40px;
+}
+
+.profile-hero {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 30px 34px;
+  border: 1px solid #eef1f5;
+  border-radius: 18px;
+  background:
+    linear-gradient(135deg, rgba(255, 106, 0, 0.12), rgba(37, 99, 235, 0.08)),
+    #ffffff;
+  box-shadow: 0 16px 36px rgba(23, 35, 61, 0.08);
+}
+
+.hero-avatar,
+.avatar-preview {
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #ff6a00;
+  color: #ffffff;
+  font-weight: 900;
+}
+
+.hero-avatar {
+  width: 74px;
+  height: 74px;
+  font-size: 28px;
+  flex-shrink: 0;
+}
+
+.hero-avatar img,
+.avatar-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.hero-copy {
+  min-width: 0;
+  flex: 1;
+}
+
+.eyebrow {
+  color: #ff6a00;
+  font-size: 13px;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.hero-copy h1 {
+  margin: 8px 0 0;
+  color: #17233d;
+  font-size: 34px;
+  line-height: 1.2;
+}
+
+.hero-copy p {
+  margin: 10px 0 0;
+  color: #64748b;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.hero-realname {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 40px;
+  padding: 0 14px;
+  border: none;
+  border-radius: 999px;
+  font-size: 14px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.hero-realname.is-verified,
+.account-card dd.is-verified {
+  background: #ecfdf3;
+  color: #16a34a;
+}
+
+.hero-realname.is-pending,
+.account-card dd.is-pending {
+  background: #fff7ed;
+  color: #f97316;
+}
+
+.hero-realname.is-rejected,
+.account-card dd.is-rejected {
+  background: #fff1f2;
+  color: #e11d48;
+}
+
+.hero-realname.is-unverified,
+.account-card dd.is-unverified {
+  background: #eff6ff;
+  color: #2563eb;
+}
+
+.profile-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 360px;
+  gap: 22px;
+  margin-top: 22px;
+}
+
+.edit-panel,
+.account-card {
+  border: 1px solid #eef1f5;
+  border-radius: 16px;
+  background: #ffffff;
+  box-shadow: 0 10px 28px rgba(23, 35, 61, 0.06);
+}
+
+.edit-panel {
+  padding: 28px;
+}
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 26px;
+}
+
+.panel-icon {
+  display: grid;
+  width: 48px;
+  height: 48px;
+  place-items: center;
+  border-radius: 12px;
+  background: #fff3e8;
+  color: #ff6a00;
+  font-size: 24px;
+}
+
+.panel-head h2 {
+  margin: 0;
+  color: #17233d;
+  font-size: 22px;
+}
+
+.panel-head p {
+  margin: 6px 0 0;
+  color: #64748b;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.avatar-editor {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  max-width: 640px;
+  padding: 20px;
+  border-radius: 14px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+}
+
+.avatar-preview {
+  position: relative;
+  width: 82px;
+  height: 82px;
+  border: none;
+  font-size: 30px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.avatar-preview i {
+  position: absolute;
+  right: 4px;
+  bottom: 4px;
+  display: grid;
+  width: 26px;
+  height: 26px;
+  place-items: center;
+  border-radius: 999px;
+  background: #ffffff;
+  color: #ff6a00;
+  box-shadow: 0 4px 12px rgba(23, 35, 61, 0.16);
+}
+
+.avatar-actions strong {
+  display: block;
+  color: #17233d;
+  font-size: 20px;
+}
+
+.avatar-actions p {
+  margin: 6px 0 12px;
+  color: #64748b;
+  font-size: 14px;
+}
+
+.profile-form {
+  display: grid;
+  gap: 6px;
+  max-width: 640px;
+  margin-top: 24px;
+}
+
+.profile-form :deep(.el-form-item__label) {
+  color: #475569;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.profile-form :deep(.el-input__wrapper) {
+  min-height: 48px;
+  border-radius: 10px;
+  box-shadow: 0 0 0 1px #dbe3ee inset;
+}
+
+.profile-form :deep(.el-input__wrapper.is-focus) {
+  box-shadow: 0 0 0 1px #ff6a00 inset, 0 0 0 4px rgba(255, 106, 0, 0.08);
+}
+
+.form-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.form-actions .el-button {
+  height: 46px;
+  border-radius: 10px;
+  font-weight: 900;
+}
+
+.form-actions .el-button--primary {
+  border: none;
+  background: #ff6a00;
+  box-shadow: 0 10px 20px rgba(255, 106, 0, 0.18);
+}
+
+.account-card {
+  padding: 24px;
+}
+
+.card-kicker {
+  color: #8b9cb5;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.account-card dl {
+  display: grid;
+  gap: 12px;
+  margin: 18px 0 0;
+}
+
+.account-card dl div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  min-height: 48px;
+  padding: 0 14px;
+  border-radius: 10px;
+  background: #f8fafc;
+}
+
+.account-card dt {
+  color: #8b9cb5;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.account-card dd {
+  margin: 0;
+  color: #334155;
+  font-size: 14px;
+  font-weight: 900;
+  text-align: right;
+}
+
+.realname-shortcut {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 44px;
+  margin-top: 18px;
+  padding: 0 14px;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: #ffffff;
+  color: #475569;
+  font-size: 14px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.realname-shortcut:hover {
+  border-color: #ff6a00;
+  color: #ff6a00;
+}
+
+@media (max-width: 1100px) {
+  .profile-layout {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/frontend/src/views/account/RealnameView.vue b/frontend/src/views/account/RealnameView.vue
index d80c33d..b199d1a 100644
--- a/frontend/src/views/account/RealnameView.vue
+++ b/frontend/src/views/account/RealnameView.vue
@@ -1,6 +1,16 @@
 <script setup lang="ts">
+import {
+  CircleCheckFilled,
+  CreditCard,
+  DocumentChecked,
+  Lock,
+  Postcard,
+  RefreshRight,
+  User,
+  WarningFilled,
+} from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
-import { onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import { getRealnameStatus, startRealname, type RealnameStatus } from '@/api/realname'
@@ -18,6 +28,42 @@ const form = reactive({
   idNo: '',
 })
 
+const currentStatus = computed(() => status.value?.status || 'unverified')
+const statusMeta = computed(() => {
+  switch (currentStatus.value) {
+    case 'verified':
+      return {
+        icon: CircleCheckFilled,
+        tone: 'verified',
+        title: '认证已完成',
+        summary: '可发布账号并参与需要实名的交易流程。',
+      }
+    case 'pending':
+      return {
+        icon: DocumentChecked,
+        tone: 'pending',
+        title: '认证处理中',
+        summary: '认证结果返回后会自动同步到账号状态。',
+      }
+    case 'rejected':
+      return {
+        icon: WarningFilled,
+        tone: 'rejected',
+        title: '认证未通过',
+        summary: status.value?.fail_reason || '请核对姓名与身份证号后重新提交。',
+      }
+    default:
+      return {
+        icon: Postcard,
+        tone: 'unverified',
+        title: '等待认证',
+        summary: '提交真实姓名与身份证号后即可完成核验。',
+      }
+  }
+})
+
+const canSubmit = computed(() => !!session.token && currentStatus.value !== 'verified')
+
 onMounted(loadStatus)
 
 function redirectAfterVerified() {
@@ -72,31 +118,467 @@ function readError(error: unknown, fallback: string) {
 </script>
 
 <template>
-  <section class="page">
-    <div class="page-header">
-      <p class="eyebrow">Realname</p>
-      <h1>实名认证</h1>
-      <p>号主发布前必须完成实名认证。当前是开发态 mock 认证，提交合法姓名和身份证号会直接通过。</p>
+  <section class="realname-page">
+    <div class="realname-hero">
+      <div class="hero-copy">
+        <span class="eyebrow">Realname</span>
+        <h1>实名认证</h1>
+        <p>完成实名后可发布账号、进入交易流程，并提升账号可信度。</p>
+      </div>
+      <div class="hero-status" :class="`is-${statusMeta.tone}`">
+        <el-icon><component :is="statusMeta.icon" /></el-icon>
+        <div>
+          <span>当前状态</span>
+          <strong>{{ realnameStatusLabel(currentStatus) }}</strong>
+        </div>
+      </div>
     </div>
 
-    <el-alert v-if="!session.token" class="notice" type="warning" :closable="false" title="请先登录后再实名认证" />
+    <el-alert
+      v-if="!session.token"
+      class="login-alert"
+      type="warning"
+      :closable="false"
+      title="请先登录后再实名认证"
+    />
 
-    <div v-if="status" class="status-panel">
-      <span>当前状态</span>
-      <strong>{{ realnameStatusLabel(status.status) }}</strong>
-      <p v-if="status.masked_name">姓名：{{ status.masked_name }}</p>
-      <p v-if="status.masked_id_no">证件号：{{ status.masked_id_no }}</p>
-      <p v-if="status.verified_at">通过时间：{{ formatDateTime(status.verified_at) }}</p>
+    <div class="realname-layout">
+      <section class="verify-panel">
+        <div class="panel-head">
+          <div class="panel-icon">
+            <el-icon><CreditCard /></el-icon>
+          </div>
+          <div>
+            <h2>{{ currentStatus === 'verified' ? '实名信息' : '提交认证' }}</h2>
+            <p>{{ currentStatus === 'verified' ? '实名信息已完成脱敏展示。' : '请使用本人真实身份信息完成核验。' }}</p>
+          </div>
+        </div>
+
+        <div v-if="currentStatus === 'verified'" class="verified-summary">
+          <div class="verified-mark">
+            <el-icon><CircleCheckFilled /></el-icon>
+          </div>
+          <div class="verified-copy">
+            <strong>认证通过</strong>
+            <span>{{ status?.verified_at ? formatDateTime(status.verified_at) : '已完成实名核验' }}</span>
+          </div>
+        </div>
+
+        <el-form v-else class="verify-form" label-position="top">
+          <el-form-item label="姓名">
+            <el-input v-model="form.name" :prefix-icon="User" placeholder="请输入真实姓名" size="large" />
+          </el-form-item>
+          <el-form-item label="身份证号">
+            <el-input
+              v-model="form.idNo"
+              :prefix-icon="Postcard"
+              maxlength="18"
+              placeholder="请输入 18 位身份证号"
+              size="large"
+            />
+          </el-form-item>
+          <el-button
+            type="primary"
+            size="large"
+            :icon="DocumentChecked"
+            :disabled="!canSubmit"
+            :loading="loading"
+            @click="handleSubmit"
+          >
+            提交认证
+          </el-button>
+        </el-form>
+      </section>
+
+      <aside class="status-card" :class="`is-${statusMeta.tone}`">
+        <div class="status-visual">
+          <el-icon><component :is="statusMeta.icon" /></el-icon>
+        </div>
+        <div class="status-content">
+          <span class="status-kicker">认证状态</span>
+          <h2>{{ statusMeta.title }}</h2>
+          <p>{{ statusMeta.summary }}</p>
+        </div>
+
+        <dl class="status-details">
+          <div>
+            <dt>姓名</dt>
+            <dd>{{ status?.masked_name || '待提交' }}</dd>
+          </div>
+          <div>
+            <dt>证件号</dt>
+            <dd>{{ status?.masked_id_no || '待提交' }}</dd>
+          </div>
+          <div>
+            <dt>通过时间</dt>
+            <dd>{{ status?.verified_at ? formatDateTime(status.verified_at) : '暂无' }}</dd>
+          </div>
+        </dl>
+
+        <div class="security-note">
+          <el-icon><Lock /></el-icon>
+          <span>身份信息仅用于实名核验，页面只展示脱敏结果。</span>
+        </div>
+      </aside>
     </div>
 
-    <el-form class="login-form" label-position="top">
-      <el-form-item label="姓名">
-        <el-input v-model="form.name" placeholder="请输入真实姓名" />
-      </el-form-item>
-      <el-form-item label="身份证号">
-        <el-input v-model="form.idNo" maxlength="18" placeholder="请输入 18 位身份证号" />
-      </el-form-item>
-      <el-button type="primary" :disabled="!session.token" :loading="loading" @click="handleSubmit">提交认证</el-button>
-    </el-form>
+    <div class="realname-actions">
+      <RouterLink class="secondary-action" to="/seller/listings/create">
+        <el-icon><RefreshRight /></el-icon>
+        <span>返回发布账号</span>
+      </RouterLink>
+    </div>
   </section>
 </template>
+
+<style scoped>
+.realname-page {
+  width: min(1180px, 100%);
+  margin: 0 auto;
+  padding: 10px 0 40px;
+}
+
+.realname-hero {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 24px;
+  min-height: 156px;
+  padding: 34px 36px;
+  border: 1px solid #eef1f5;
+  border-radius: 18px;
+  background:
+    linear-gradient(135deg, rgba(255, 106, 0, 0.12) 0%, rgba(22, 163, 74, 0.08) 52%, rgba(37, 99, 235, 0.08) 100%),
+    #ffffff;
+  box-shadow: 0 16px 36px rgba(23, 35, 61, 0.08);
+}
+
+.hero-copy {
+  max-width: 640px;
+}
+
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  margin-bottom: 12px;
+  color: #ff6a00;
+  font-size: 13px;
+  font-weight: 900;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.hero-copy h1 {
+  margin: 0;
+  color: #17233d;
+  font-size: 36px;
+  line-height: 1.2;
+}
+
+.hero-copy p {
+  margin: 14px 0 0;
+  color: #64748b;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.7;
+}
+
+.hero-status {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-width: 210px;
+  padding: 18px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.88);
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  box-shadow: 0 12px 28px rgba(23, 35, 61, 0.08);
+}
+
+.hero-status .el-icon {
+  display: grid;
+  width: 44px;
+  height: 44px;
+  place-items: center;
+  border-radius: 12px;
+  font-size: 24px;
+}
+
+.hero-status span,
+.status-kicker {
+  color: #8b9cb5;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.hero-status strong {
+  display: block;
+  margin-top: 4px;
+  color: #17233d;
+  font-size: 22px;
+  line-height: 1.2;
+}
+
+.hero-status.is-verified .el-icon,
+.status-card.is-verified .status-visual {
+  background: #ecfdf3;
+  color: #16a34a;
+}
+
+.hero-status.is-pending .el-icon,
+.status-card.is-pending .status-visual {
+  background: #fff7ed;
+  color: #f97316;
+}
+
+.hero-status.is-rejected .el-icon,
+.status-card.is-rejected .status-visual {
+  background: #fff1f2;
+  color: #e11d48;
+}
+
+.hero-status.is-unverified .el-icon,
+.status-card.is-unverified .status-visual {
+  background: #eff6ff;
+  color: #2563eb;
+}
+
+.login-alert {
+  margin-top: 18px;
+}
+
+.realname-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 380px;
+  gap: 22px;
+  margin-top: 22px;
+}
+
+.verify-panel,
+.status-card {
+  border: 1px solid #eef1f5;
+  border-radius: 16px;
+  background: #ffffff;
+  box-shadow: 0 10px 28px rgba(23, 35, 61, 0.06);
+}
+
+.verify-panel {
+  min-height: 430px;
+  padding: 28px;
+}
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 28px;
+}
+
+.panel-icon {
+  display: grid;
+  width: 48px;
+  height: 48px;
+  place-items: center;
+  border-radius: 12px;
+  background: #fff3e8;
+  color: #ff6a00;
+  font-size: 24px;
+}
+
+.panel-head h2,
+.status-content h2 {
+  margin: 0;
+  color: #17233d;
+  font-size: 22px;
+  line-height: 1.3;
+}
+
+.panel-head p,
+.status-content p {
+  margin: 6px 0 0;
+  color: #64748b;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.verify-form {
+  display: grid;
+  gap: 6px;
+  max-width: 620px;
+}
+
+.verify-form :deep(.el-form-item__label) {
+  color: #475569;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.verify-form :deep(.el-input__wrapper) {
+  min-height: 48px;
+  border-radius: 10px;
+  box-shadow: 0 0 0 1px #dbe3ee inset;
+}
+
+.verify-form :deep(.el-input__wrapper.is-focus) {
+  box-shadow: 0 0 0 1px #ff6a00 inset, 0 0 0 4px rgba(255, 106, 0, 0.08);
+}
+
+.verify-form .el-button {
+  width: 168px;
+  height: 46px;
+  margin-top: 8px;
+  border: none;
+  border-radius: 10px;
+  background: #ff6a00;
+  font-weight: 900;
+  box-shadow: 0 10px 20px rgba(255, 106, 0, 0.18);
+}
+
+.verified-summary {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  max-width: 620px;
+  padding: 24px;
+  border-radius: 14px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+}
+
+.verified-mark {
+  display: grid;
+  width: 58px;
+  height: 58px;
+  place-items: center;
+  border-radius: 16px;
+  background: #ecfdf3;
+  color: #16a34a;
+  font-size: 34px;
+}
+
+.verified-copy strong {
+  display: block;
+  color: #17233d;
+  font-size: 22px;
+}
+
+.verified-copy span {
+  display: block;
+  margin-top: 6px;
+  color: #64748b;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.status-card {
+  padding: 24px;
+}
+
+.status-visual {
+  display: grid;
+  width: 56px;
+  height: 56px;
+  place-items: center;
+  border-radius: 16px;
+  font-size: 30px;
+}
+
+.status-content {
+  margin-top: 18px;
+}
+
+.status-details {
+  display: grid;
+  gap: 12px;
+  margin: 24px 0 0;
+}
+
+.status-details div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  min-height: 46px;
+  padding: 0 14px;
+  border-radius: 10px;
+  background: #f8fafc;
+}
+
+.status-details dt {
+  color: #8b9cb5;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.status-details dd {
+  margin: 0;
+  color: #334155;
+  font-size: 14px;
+  font-weight: 800;
+  text-align: right;
+}
+
+.security-note {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  margin-top: 22px;
+  padding: 14px;
+  border-radius: 12px;
+  background: #f8fafc;
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.6;
+}
+
+.security-note .el-icon {
+  margin-top: 2px;
+  color: #2563eb;
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+.realname-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 18px;
+}
+
+.secondary-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 40px;
+  padding: 0 16px;
+  border-radius: 10px;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  color: #475569;
+  font-size: 14px;
+  font-weight: 800;
+  text-decoration: none;
+  transition: all 0.2s;
+}
+
+.secondary-action:hover {
+  border-color: #ff6a00;
+  color: #ff6a00;
+  box-shadow: 0 8px 18px rgba(255, 106, 0, 0.08);
+}
+
+@media (max-width: 1100px) {
+  .realname-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .realname-hero {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .hero-status {
+    width: 100%;
+  }
+}
+</style>