第 5 阶段：纠纷、通知与后台-2

2026-05-22 16:50:33 +08:00
parent 99f9df7bcd
commit aee3455e9a
22 changed files with 519 additions and 36 deletions
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { useAdminSessionStore } from '@/stores/adminSession'
+
+const router = useRouter()
+const adminSession = useAdminSessionStore()
+const loading = ref(false)
+const form = reactive({
+  username: 'admin',
+  password: 'admin123456',
+})
+
+async function handleLogin() {
+  loading.value = true
+  try {
+    await adminSession.login(form.username, form.password)
+    ElMessage.success('后台登录成功')
+    await router.push('/admin/dashboard')
+  } 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">Admin Login</p>
+      <h1>后台登录</h1>
+      <p>开发态首次登录会初始化默认管理员，后续可接入角色权限和密码修改。</p>
+    </div>
+
+    <el-form class="login-form" label-position="top">
+      <el-form-item label="用户名">
+        <el-input v-model="form.username" placeholder="请输入管理员用户名" />
+      </el-form-item>
+      <el-form-item label="密码">
+        <el-input v-model="form.password" type="password" show-password placeholder="请输入管理员密码" />
+      </el-form-item>
+      <el-button type="primary" :loading="loading" @click="handleLogin">登录后台</el-button>
+    </el-form>
+  </section>
+</template>