feat: P2阶段完成 - listings和auth模块迁移

## P2.1: 商品浏览模块（listings）✅ ### 完整迁移（23个文件） - API: listings.ts, listingOptions.ts, homeConfig.ts - Views: 5个页面（HomeView, ListingsView, ListingDetailView + 移动端2个） - Composables: 3个（useHomeFilters, useFilterOptions, useListingQuery） - Components: 9个（ListingCard, 各种过滤器组件） - Tests: 2个测试文件 **功能：** - 首页浏览、商品列表、详情查看 - 高级筛选（服务器、等级、哈夫币、皮肤等） - 排序和分区功能 - 横幅、公告、统计展示 **技术改进：** - 更新所有导入路径到 @/shared/ - 建立清晰的模块导出 --- ## P2.2: 用户认证模块（auth）✅ ### 完整迁移（12个文件） - API: auth.ts, realname.ts, notifications.ts - Views: 8个页面（登录、注册、个人资料、实名认证、通知 + 移动端） - 模块导出 **功能：** - 用户注册、登录、Token管理 - 实名认证、风险检查 - 个人资料编辑、头像上传 - 消息/通知中心 **技术改进：** - 统一 API 导入路径 - 类型安全增强 --- ## 里程碑 🎉 **P2 阶段完成！** **累计完成：** 6个模块 - ✅ P0: shared（基础设施）- 22个文件 - ✅ P1: wallet, chats, orders - 24个文件 - ✅ P2: listings, auth - 35个文件 **总计：** 81个文件已迁移 **剩余：** P3阶段（seller, disputes, admin）+ 清理工作 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-06-04 08:56:42 +08:00
parent f415832c19
commit 405abfa4f7
35 changed files with 9932 additions and 0 deletions
@@ -0,0 +1,584 @@
+<script setup lang="ts">
+import {
+  CircleCheckFilled,
+  CreditCard,
+  DocumentChecked,
+  Lock,
+  Postcard,
+  RefreshRight,
+  User,
+  WarningFilled,
+} from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { getRealnameStatus, startRealname, type RealnameStatus } from '@/api/realname'
+import { useSessionStore } from '@/stores/session'
+import { realnameStatusLabel } from '@/utils/statusLabels'
+import { formatDateTime } from '@/utils/time'
+
+const session = useSessionStore()
+const route = useRoute()
+const router = useRouter()
+const loading = ref(false)
+const status = ref<RealnameStatus | null>(null)
+const form = reactive({
+  name: '',
+  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() {
+  const redirect = typeof route.query.redirect === 'string' ? route.query.redirect : ''
+  if (redirect) {
+    router.replace(redirect)
+  }
+}
+
+async function loadStatus() {
+  if (!session.token) return
+  try {
+    status.value = await getRealnameStatus()
+    if (status.value.status === 'verified') {
+      await session.loadMe()
+      redirectAfterVerified()
+    }
+  } catch {
+    status.value = null
+  }
+}
+
+async function handleSubmit() {
+  if (!form.name.trim()) {
+    ElMessage.warning('请输入真实姓名')
+    return
+  }
+  if (!form.idNo.trim() || form.idNo.length < 15) {
+    ElMessage.warning('请输入有效的证件号')
+    return
+  }
+  loading.value = true
+  try {
+    status.value = await startRealname(form.name, form.idNo)
+    await session.loadMe()
+    ElMessage.success('实名认证已通过')
+    redirectAfterVerified()
+  } catch (error) {
+    ElMessage.error(readError(error, '实名认证失败'))
+  } finally {
+    loading.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="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="login-alert"
+      type="warning"
+      :closable="false"
+      title="请先登录后再实名认证"
+    />
+
+    <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>
+
+    <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>