签入版本

2026-10-10 19:17:02 +08:00
parent 3423dea03f
commit 32f941b631
232 changed files with 4264 additions and 6251 deletions
@@ -16,46 +16,122 @@

 ## 登录页面代码

+来自 `ui/src/views/login/LoginForm.vue`（简化）：
+
 ```vue
-<!-- src/views/login/index.vue -->
+<!-- src/views/login/LoginForm.vue -->
 <template>
-  <el-form :model="loginForm" @submit.prevent="handleLogin">
-    <el-form-item>
-      <el-input v-model="loginForm.username" placeholder="用户名" />
-    </el-form-item>
-    <el-form-item>
-      <el-input v-model="loginForm.password" type="password" placeholder="密码" />
-    </el-form-item>
-    <el-form-item>
-      <el-input v-model="loginForm.captchaCode" placeholder="验证码" />
-      <img :src="captchaImage" @click="refreshCaptcha" />
-    </el-form-item>
-    <el-button type="primary" @click="handleLogin">登录</el-button>
-  </el-form>
+  <a-form
+    ref="formRef"
+    :show-label="false"
+    size="large"
+    :model="formInline"
+    :rules="rules"
+  >
+    <a-form-item name="username">
+      <a-input v-model:value="formInline.username" placeholder="请输入登录账号">
+        <template #prefix>
+          <UserOutlined style="color: #808695; font-size: 18px" />
+        </template>
+      </a-input>
+    </a-form-item>
+    <a-form-item name="password">
+      <a-input-password
+        v-model:value="formInline.password"
+        placeholder="请输入登录密码"
+        @keyup.enter="handleSubmit"
+      >
+        <template #prefix>
+          <LockOutlined style="color: #808695; font-size: 18px" />
+        </template>
+      </a-input-password>
+    </a-form-item>
+    <a-form-item name="code">
+      <div style="display: flex">
+        <a-input
+          @keyup.enter="handleSubmit"
+          v-model:value.trim="formInline.code"
+          placeholder="验证码"
+        >
+          <template #prefix>
+            <SafetyCertificateOutlined style="color: #808695; font-size: 18px" />
+          </template>
+        </a-input>
+        <img
+          style="width: 108px; height: 40px; border-radius: 4px; margin-left: 8px; cursor: pointer"
+          @click="getCaptcha"
+          v-if="captchaImg"
+          :src="captchaImg"
+        />
+      </div>
+    </a-form-item>
+
+    <a-form-item>
+      <a-button class="w-full" type="primary" size="large" :loading="loading" @click="handleSubmit">
+        登录
+      </a-button>
+    </a-form-item>
+  </a-form>
 </template>

 <script setup>
+import { reactive, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { useUserStore } from '@/store/modules/user';
-import { getCaptcha } from '@/api/common/user';
+import { message } from 'ant-design-vue';
+import { getInfoCaptcha } from '@/api/common/user';
+import { UserOutlined, LockOutlined, SafetyCertificateOutlined } from '@ant-design/icons-vue';

+const router = useRouter();
+const route = useRoute();
 const userStore = useUserStore();
-const loginForm = ref({ username: '', password: '', captchaCode: '', captchaKey: '' });
-const captchaImage = ref('');
+
+const formRef = ref();
+const loading = ref(false);
+const captchaImg = ref('');
+
+const formInline = reactive({
+  username: '',
+  password: '',
+  code: '',
+  key: '',
+});
+
+const rules = {
+  username: { required: true, message: '请输入登录账号', trigger: 'blur' },
+  password: { required: true, message: '请输入登录密码', trigger: 'blur' },
+  code: { required: true, message: '请输入验证码', trigger: 'blur' },
+};

 // 获取验证码
-const refreshCaptcha = async () => {
-  const res = await getCaptcha();
-  loginForm.value.captchaKey = res.key;
-  captchaImage.value = res.image;
+const getCaptcha = async () => {
+  const res = await getInfoCaptcha();
+  formInline.key = res.key;
+  captchaImg.value = res.captcha; // 返回字段是 captcha
 };

 // 登录
-const handleLogin = async () => {
-  await userStore.login(loginForm.value);
-  router.push('/');
+const handleSubmit = () => {
+  if (!formRef.value) return;
+  formRef.value.validate().then(async () => {
+    loading.value = true;
+    try {
+      const { code, msg } = await userStore.login(formInline);
+      if (code === 0) {
+        message.success('登录成功，即将进入系统');
+        const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
+        router.replace(toPath);
+      } else {
+        getCaptcha();
+        message.error(msg || '登录失败');
+      }
+    } finally {
+      loading.value = false;
+    }
+  });
 };

-onMounted(() => refreshCaptcha());
+onMounted(() => getCaptcha());
 </script>
 ```

@@ -72,4 +148,4 @@ config.headers['Authorization'] = `Bearer ${token}`;
 if (response.data.code === 401) {
    router.push('/login');
 }
-```
+```