第 2 阶段：实名认证,mock测试ok

frontend/src/api/realname.ts

@@ -0,0 +1,30 @@
+import { apiClient } from './client'
+
+export interface RealnameStatus {
+  status: string
+  provider?: string
+  provider_order_no?: string
+  masked_name?: string
+  masked_id_no?: string
+  verified_at?: string
+  fail_reason?: string
+}
+
+interface ApiResponse<T> {
+  code: string
+  message: string
+  data: T
+}
+
+export async function startRealname(name: string, idNo: string) {
+  const { data } = await apiClient.post<ApiResponse<RealnameStatus>>('/realname/start', {
+    name,
+    id_no: idNo,
+  })
+  return data.data
+}
+
+export async function getRealnameStatus() {
+  const { data } = await apiClient.get<ApiResponse<RealnameStatus>>('/realname/status')
+  return data.data
+}

frontend/src/styles/base.css

@@ -151,6 +151,37 @@ h1 {
   width: 100%;
 }
 
+.notice {
+  max-width: 520px;
+  margin-top: 24px;
+}
+
+.status-panel {
+  max-width: 520px;
+  margin-top: 24px;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  background: #ffffff;
+  padding: 18px;
+}
+
+.status-panel span {
+  color: #6b7785;
+  font-size: 13px;
+}
+
+.status-panel strong {
+  display: block;
+  margin-top: 6px;
+  color: #0f766e;
+  font-size: 22px;
+}
+
+.status-panel p {
+  margin: 8px 0 0;
+  color: #52616f;
+}
+
 @media (max-width: 760px) {
   .app-shell {
     grid-template-columns: 1fr;

frontend/src/views/account/RealnameView.vue

@@ -1,9 +1,77 @@
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { onMounted, reactive, ref } from 'vue'
+
+import { getRealnameStatus, startRealname, type RealnameStatus } from '@/api/realname'
+import { useSessionStore } from '@/stores/session'
+
+const session = useSessionStore()
+const loading = ref(false)
+const status = ref<RealnameStatus | null>(null)
+const form = reactive({
+  name: '',
+  idNo: '',
+})
+
+onMounted(loadStatus)
+
+async function loadStatus() {
+  if (!session.token) return
+  try {
+    status.value = await getRealnameStatus()
+  } catch {
+    status.value = null
+  }
+}
+
+async function handleSubmit() {
+  loading.value = true
+  try {
+    status.value = await startRealname(form.name, form.idNo)
+    await session.loadMe()
+    ElMessage.success('实名认证已通过')
+  } 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="page">
     <div class="page-header">
       <p class="eyebrow">Realname</p>
       <h1>实名认证</h1>
-      <p>号主发布前必须完成实名认证。</p>
+      <p>号主发布前必须完成实名认证。当前是开发态 mock 认证，提交合法姓名和身份证号会直接通过。</p>
     </div>
+
+    <el-alert v-if="!session.token" class="notice" type="warning" :closable="false" title="请先登录后再实名认证" />
+
+    <div v-if="status" class="status-panel">
+      <span>当前状态</span>
+      <strong>{{ 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">通过时间：{{ status.verified_at }}</p>
+    </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>
   </section>
 </template>