feat: 完成后台联调与通用列表组件

src/views/LoginView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ElMessage } from 'element-plus'
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
 import { ArrowRight, LockKeyhole, ShieldCheck, UserRound } from '@lucide/vue'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/api/http'
 import baiyueLogoWhite from '@/assets/brand/baiyue-logo-white.png'
@@ -16,18 +16,20 @@ const auth = useAuthStore()
 const access = useAccessPreviewStore()
 const loading = ref(false)
 const loginError = ref<ApiErrorDetails | null>(null)
+const formRef = ref<FormInstance>()
 const form = reactive({
   account: '',
   password: '',
 })
+const rules: FormRules<typeof form> = {
+  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
+  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+}
 
 async function submit() {
   loginError.value = null
-  if (!form.account || !form.password) {
-    loginError.value = { message: '请输入账号和密码' }
-    ElMessage.warning(loginError.value.message)
-    return
-  }
+  const isValid = await formRef.value?.validate().catch(() => false)
+  if (!isValid) return
   loading.value = true
   try {
     await auth.login(form.account, form.password)
@@ -66,14 +68,14 @@ async function submit() {
         <div class="login-card-icon"><LockKeyhole :size="24" /></div>
         <h2>登录管理后台</h2>
         <p>使用平台内部员工账号登录</p>
-        <el-form label-position="top" size="large" @submit.prevent="submit">
-          <el-form-item label="账号">
+        <el-form ref="formRef" :model="form" :rules="rules" label-position="top" size="large" @submit.prevent="submit">
+          <el-form-item label="账号" prop="account" required>
             <el-input v-model.trim="form.account" placeholder="请输入账号" :prefix-icon="UserRound" autocomplete="username" maxlength="100" />
           </el-form-item>
-          <el-form-item label="密码">
-            <el-input v-model="form.password" type="password" show-password placeholder="请输入密码" :prefix-icon="LockKeyhole" autocomplete="current-password" maxlength="128" @keyup.enter="submit" />
+          <el-form-item label="密码" prop="password" required>
+            <el-input v-model="form.password" type="password" show-password placeholder="请输入密码" :prefix-icon="LockKeyhole" autocomplete="current-password" maxlength="128" />
           </el-form-item>
-          <el-button class="login-submit" type="primary" :loading="loading" @click="submit">
+          <el-button class="login-submit" native-type="submit" type="primary" :loading="loading">
             登录 <ArrowRight :size="17" />
           </el-button>
         </el-form>