feat: 登录联调

src/views/LoginView.vue

@@ -26,24 +26,19 @@
       </div>
 
       <el-form ref="formRef" :model="form" :rules="rules" size="large" @keyup.enter="handleLogin">
-        <el-form-item prop="username">
-          <el-input v-model="form.username" :prefix-icon="User" placeholder="请输入账号" />
+        <el-form-item prop="account">
+          <el-input v-model="form.account" :prefix-icon="User" placeholder="请输入账号" />
         </el-form-item>
         <el-form-item prop="password">
           <el-input v-model="form.password" :prefix-icon="Lock" placeholder="请输入密码" show-password type="password" />
         </el-form-item>
-        <div class="login-options">
-          <el-checkbox v-model="form.remember">记住我</el-checkbox>
-          <el-button link type="primary">忘记密码？</el-button>
-        </div>
+        <el-form-item prop="role">
+          <el-select v-model="form.role" class="login-role-select" :prefix-icon="UserFilled" placeholder="请选择角色">
+            <el-option v-for="item in loginRoleOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
         <el-button :loading="loading" class="login-submit" type="primary" @click="handleLogin">登录</el-button>
       </el-form>
-
-      <div class="login-divider"><span>其他登录方式</span></div>
-      <div class="login-methods">
-        <el-button :icon="Iphone">扫码登录</el-button>
-        <el-button :icon="Key">SSO登录</el-button>
-      </div>
     </section>
   </div>
 </template>
@@ -51,8 +46,11 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
 import type { FormInstance, FormRules } from 'element-plus'
-import { Collection, DataAnalysis, FirstAidKit, Iphone, Key, Lock, OfficeBuilding, User } from '@element-plus/icons-vue'
+import { Collection, DataAnalysis, FirstAidKit, Lock, OfficeBuilding, User, UserFilled } from '@element-plus/icons-vue'
+import { login, type LoginRole } from '@/api/auth'
+import { getFirstPage, getPagePath } from '@/mock/navigation'
 import { useAppStore } from '@/stores/app'
 
 const route = useRoute()
@@ -62,16 +60,22 @@ const formRef = ref<FormInstance>()
 const loading = ref(false)
 
 const form = reactive({
-  username: 'admin',
-  password: 'admin123',
-  remember: true
+  account: 'admin',
+  password: '',
+  role: 'super_admin' as LoginRole
 })
 
 const rules: FormRules = {
-  username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
-  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
+  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+  role: [{ required: true, message: '请选择角色', trigger: 'change' }]
 }
 
+const loginRoleOptions: Array<{ label: string; value: LoginRole }> = [
+  { label: '超级管理员', value: 'super_admin' },
+  { label: '医生', value: 'doctor' }
+]
+
 const features = [
   { title: '智能病例训练', desc: 'AI驱动的沉浸式病例问诊训练', icon: FirstAidKit },
   { title: '数据驱动决策', desc: '全方位数据分析与能力评估', icon: DataAnalysis },
@@ -80,13 +84,21 @@ const features = [
 ]
 
 async function handleLogin() {
-  await formRef.value?.validate()
-  loading.value = true
-
-  window.setTimeout(() => {
-    appStore.login(form.username)
+  try {
+    await formRef.value?.validate()
+    loading.value = true
+    const result = await login({
+      account: form.account,
+      password: form.password,
+      role: form.role
+    })
+    appStore.login(form.account, form.role, result.token)
     loading.value = false
-    router.push((route.query.redirect as string) || '/')
-  }, 420)
+    const defaultPath = getPagePath(getFirstPage(appStore.getRoleByLoginRole(form.role)))
+    router.push((route.query.redirect as string) || defaultPath)
+  } catch (error) {
+    loading.value = false
+    ElMessage.error(error instanceof Error ? error.message : '登录失败，请稍后重试')
+  }
 }
 </script>