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

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>