第 1 阶段：用户与认证, mock登陆ok

frontend/src/api/auth.ts

@@ -0,0 +1,46 @@
+import { apiClient } from './client'
+
+export interface AuthUser {
+  id: number
+  phone: string
+  nickname: string
+  realname_status: string
+  risk_status: string
+  credit_score: number
+  status: string
+}
+
+export interface TokenPair {
+  access_token: string
+  refresh_token: string
+  token_type: string
+  expires_in: number
+}
+
+export interface LoginData {
+  user: AuthUser
+  tokens: TokenPair
+}
+
+interface ApiResponse<T> {
+  code: string
+  message: string
+  data: T
+}
+
+export async function sendSmsCode(phone: string) {
+  const { data } = await apiClient.post<ApiResponse<{ phone: string; expires_in: number }>>('/auth/sms/send', {
+    phone,
+  })
+  return data.data
+}
+
+export async function loginWithSms(phone: string, code: string) {
+  const { data } = await apiClient.post<ApiResponse<LoginData>>('/auth/sms/login', { phone, code })
+  return data.data
+}
+
+export async function fetchMe() {
+  const { data } = await apiClient.get<ApiResponse<AuthUser>>('/me')
+  return data.data
+}

frontend/src/api/client.ts

@@ -4,3 +4,11 @@ export const apiClient = axios.create({
   baseURL: '/api',
   timeout: 10000,
 })
+
+apiClient.interceptors.request.use((config) => {
+  const token = localStorage.getItem('access_token')
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`
+  }
+  return config
+})

frontend/src/layouts/AppLayout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Bell, House, Shop, Tickets, UserFilled, Wallet } from '@element-plus/icons-vue'
+import { Bell, House, Phone, Shop, Tickets, UserFilled, Wallet } from '@element-plus/icons-vue'
 
 const navItems = [
   { label: '首页', to: '/', icon: House },
@@ -8,6 +8,7 @@ const navItems = [
   { label: '钱包', to: '/wallet', icon: Wallet },
   { label: '通知', to: '/notifications', icon: Bell },
   { label: '实名', to: '/realname', icon: UserFilled },
+  { label: '登录', to: '/login', icon: Phone },
 ]
 </script>
 

frontend/src/router/index.ts

@@ -4,6 +4,7 @@ const router = createRouter({
   history: createWebHistory(),
   routes: [
     { path: '/', name: 'home', component: () => import('@/views/public/HomeView.vue') },
+    { path: '/login', name: 'login', component: () => import('@/views/account/LoginView.vue') },
     { path: '/listings', name: 'listings', component: () => import('@/views/public/ListingsView.vue') },
     { path: '/listings/:id', name: 'listing-detail', component: () => import('@/views/public/ListingDetailView.vue') },
     { path: '/orders/create', name: 'order-create', component: () => import('@/views/account/OrderCreateView.vue') },

frontend/src/stores/session.ts

@@ -1,9 +1,43 @@
 import { defineStore } from 'pinia'
 
+import { fetchMe, loginWithSms, type AuthUser } from '@/api/auth'
+
 export const useSessionStore = defineStore('session', {
   state: () => ({
-    token: '',
+    token: localStorage.getItem('access_token') || '',
+    refreshToken: localStorage.getItem('refresh_token') || '',
     phone: '',
     realnameStatus: 'unknown',
   }),
+  actions: {
+    async login(phone: string, code: string) {
+      const result = await loginWithSms(phone, code)
+      this.applySession(result.user, result.tokens.access_token, result.tokens.refresh_token)
+      return result
+    },
+    async loadMe() {
+      const user = await fetchMe()
+      this.applyUser(user)
+      return user
+    },
+    logout() {
+      this.token = ''
+      this.refreshToken = ''
+      this.phone = ''
+      this.realnameStatus = 'unknown'
+      localStorage.removeItem('access_token')
+      localStorage.removeItem('refresh_token')
+    },
+    applySession(user: AuthUser, accessToken: string, refreshToken: string) {
+      this.token = accessToken
+      this.refreshToken = refreshToken
+      localStorage.setItem('access_token', accessToken)
+      localStorage.setItem('refresh_token', refreshToken)
+      this.applyUser(user)
+    },
+    applyUser(user: AuthUser) {
+      this.phone = user.phone
+      this.realnameStatus = user.realname_status
+    },
+  },
 })

frontend/src/styles/base.css

@@ -135,6 +135,22 @@ h1 {
   font-size: 20px;
 }
 
+.login-form {
+  max-width: 420px;
+  margin-top: 28px;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  background: #ffffff;
+  padding: 20px;
+}
+
+.code-row {
+  display: grid;
+  grid-template-columns: 1fr 96px;
+  gap: 10px;
+  width: 100%;
+}
+
 @media (max-width: 760px) {
   .app-shell {
     grid-template-columns: 1fr;

frontend/src/views/account/LoginView.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { reactive, ref } from 'vue'
+
+import { sendSmsCode } from '@/api/auth'
+import { useSessionStore } from '@/stores/session'
+
+const session = useSessionStore()
+const loading = ref(false)
+const sending = ref(false)
+const form = reactive({
+  phone: '',
+  code: '',
+})
+
+async function handleSendCode() {
+  sending.value = true
+  try {
+    await sendSmsCode(form.phone)
+    ElMessage.success('验证码已生成，请查看后端日志')
+  } catch (error) {
+    ElMessage.error(readError(error, '验证码发送失败'))
+  } finally {
+    sending.value = false
+  }
+}
+
+async function handleLogin() {
+  loading.value = true
+  try {
+    await session.login(form.phone, form.code)
+    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">SMS Login</p>
+      <h1>手机号登录</h1>
+      <p>当前是开发态短信适配器，验证码会打印在后端日志里。</p>
+    </div>
+
+    <el-form class="login-form" label-position="top">
+      <el-form-item label="手机号">
+        <el-input v-model="form.phone" maxlength="11" placeholder="请输入手机号" />
+      </el-form-item>
+      <el-form-item label="验证码">
+        <div class="code-row">
+          <el-input v-model="form.code" maxlength="6" placeholder="6 位验证码" />
+          <el-button :loading="sending" @click="handleSendCode">发送</el-button>
+        </div>
+      </el-form-item>
+      <el-button type="primary" :loading="loading" @click="handleLogin">登录</el-button>
+    </el-form>
+  </section>
+</template>