refactor: 拆分后台登录页面职责

ai_knowledge_base_v2/apps/admin-web/src/App.vue

@@ -2,6 +2,7 @@
 import { ElMessage, ElMessageBox } from "element-plus";
 import { computed, onMounted, reactive, ref } from "vue";
 
+import AdminLoginView from "./components/AdminLoginView.vue";
 import { api, clearToken, getToken, saveToken } from "./services/api";
 import type {
   AdminProfile,
@@ -21,7 +22,6 @@ const admin = ref<AdminProfile | null>(null);
 const activeMenu = ref("dashboard");
 const loading = ref(false);
 
-const loginForm = reactive({ username: "", password: "" });
 const stats = ref<DashboardStats | null>(null);
 const dashboardFilters = reactive({
   start: "",
@@ -482,10 +482,10 @@ onMounted(async () => {
   }
 });
 
-async function login() {
+async function login(credentials: { username: string; password: string }) {
   loading.value = true;
   try {
-    const result = await api.login(loginForm.username, loginForm.password);
+    const result = await api.login(credentials.username, credentials.password);
     saveToken(result.token);
     admin.value = result.admin;
     await loadCurrentMenu();
@@ -1052,45 +1052,7 @@ function formatRecordDateTime(value: string, boundary: "start" | "end") {
 </script>
 
 <template>
-  <main v-if="!admin" class="login-page">
+  <AdminLoginView v-if="!admin" :loading="loading" @submit="login" />
-    <section class="login-hero">
-      <div class="login-hero-main">
-        <div class="login-brand">
-          <span>答</span>
-          <strong>大本营千问千答</strong>
-        </div>
-        <h1>把大本营答疑、知识库和学员运营放在同一个控制台里。</h1>
-        <p>统一维护学员名单、开放知识库、模型接入、Agent 调试、问答记录和系统运行参数，方便排查与交接。</p>
-        <div class="login-highlights">
-          <span>大本营知识库</span>
-          <span>答疑 Agent 调试</span>
-          <span>问答记录审计</span>
-        </div>
-      </div>
-      <section class="login-card">
-        <div class="login-card-head">
-          <h2>登录答疑后台</h2>
-          <p>请输入大本营答疑助手后台管理员账号和密码。</p>
-        </div>
-        <el-form label-position="top" autocomplete="off" @submit.prevent="login">
-          <el-form-item label="管理员账号">
-            <el-input v-model="loginForm.username" size="large" placeholder="请输入管理员账号" autocomplete="off" />
-          </el-form-item>
-          <el-form-item label="密码">
-            <el-input
-              v-model="loginForm.password"
-              size="large"
-              type="password"
-              placeholder="请输入密码"
-              autocomplete="new-password"
-              show-password
-            />
-          </el-form-item>
-          <el-button type="primary" :loading="loading" class="full-btn login-submit" @click="login">进入答疑后台</el-button>
-        </el-form>
-      </section>
-    </section>
-  </main>
 
   <main v-else class="admin-shell">
     <aside class="sidebar">

ai_knowledge_base_v2/apps/admin-web/src/components/AdminLoginView.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { reactive } from "vue";
+
+defineProps<{ loading: boolean }>();
+
+const emit = defineEmits<{
+  submit: [credentials: { username: string; password: string }];
+}>();
+
+const form = reactive({ username: "", password: "" });
+
+function submit() {
+  emit("submit", { username: form.username.trim(), password: form.password });
+}
+</script>
+
+<template>
+  <main class="login-page">
+    <section class="login-hero">
+      <div class="login-hero-main">
+        <div class="login-brand">
+          <span>答</span>
+          <strong>大本营千问千答</strong>
+        </div>
+        <h1>把大本营答疑、知识库和学员运营放在同一个控制台里。</h1>
+        <p>统一维护学员名单、开放知识库、模型接入、Agent 调试、问答记录和系统运行参数，方便排查与交接。</p>
+        <div class="login-highlights">
+          <span>大本营知识库</span>
+          <span>答疑 Agent 调试</span>
+          <span>问答记录审计</span>
+        </div>
+      </div>
+      <section class="login-card">
+        <div class="login-card-head">
+          <h2>登录答疑后台</h2>
+          <p>请输入大本营答疑助手后台管理员账号和密码。</p>
+        </div>
+        <el-form label-position="top" autocomplete="off" @submit.prevent="submit">
+          <el-form-item label="管理员账号">
+            <el-input v-model="form.username" size="large" placeholder="请输入管理员账号" autocomplete="off" />
+          </el-form-item>
+          <el-form-item label="密码">
+            <el-input
+              v-model="form.password"
+              size="large"
+              type="password"
+              placeholder="请输入密码"
+              autocomplete="new-password"
+              show-password
+            />
+          </el-form-item>
+          <el-button type="primary" native-type="submit" :loading="loading" class="full-btn login-submit">
+            进入答疑后台
+          </el-button>
+        </el-form>
+      </section>
+    </section>
+  </main>
+</template>