签入版本

RXThinkCMF_Laravel13_NaiveVue/zh/frontend/login.md

@@ -17,46 +17,90 @@
 ## 登录页面代码
 
 ```vue
-<!-- src/views/login/index.vue -->
+<!-- ui/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.code" placeholder="验证码" />
-      <img :src="captchaImage" @click="refreshCaptcha" style="cursor: pointer" />
-    </el-form-item>
-    <el-button type="primary" @click="handleLogin">登录</el-button>
-  </el-form>
+  <n-form
+    ref="formRef"
+    :model="formInline"
+    :rules="rules"
+    :show-label="false"
+    size="large"
+  >
+    <n-form-item path="username">
+      <n-input v-model:value="formInline.username" placeholder="请输入登录账号" />
+    </n-form-item>
+    <n-form-item path="password">
+      <n-input
+        v-model:value="formInline.password"
+        type="password"
+        show-password-on="mousedown"
+        placeholder="请输入登录密码"
+        @keyup.enter="handleSubmit"
+      />
+    </n-form-item>
+    <n-form-item path="code">
+      <div style="display: flex">
+        <n-input
+          v-model:value.trim="formInline.code"
+          placeholder="验证码"
+          @keyup.enter="handleSubmit"
+        />
+        <img
+          style="width: 108px; height: 40px; margin-left: 8px; cursor: pointer"
+          @click="getCaptcha"
+          v-if="captchaImg"
+          :src="captchaImg"
+        />
+      </div>
+    </n-form-item>
+
+    <n-form-item>
+      <n-button
+        class="w-full"
+        type="primary"
+        size="large"
+        :loading="loading"
+        @click="handleSubmit"
+      >
+        登录
+      </n-button>
+    </n-form-item>
+  </n-form>
 </template>
 
-<script setup>
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
 import { useUserStore } from '@/store/modules/user';
-import { getCaptcha } from '@/api/common/user';
+import { FormRules, useMessage } from 'naive-ui';
+import { getInfoCaptcha } from '@/api/common/user';
 
+const message = useMessage();
+const router = useRouter();
 const userStore = useUserStore();
-const loginForm = ref({ username: '', password: '', code: '', key: '' });
-const captchaImage = ref('');
+const formInline = reactive({ username: '', password: '', code: '', key: '' });
+const captchaImg = ref('');
 
 // 获取验证码
 // 响应字段：key = 验证码标识，captcha = Base64 图片
-const refreshCaptcha = async () => {
-  const res = await getCaptcha();
-  loginForm.value.key = res.key;
-  captchaImage.value = res.captcha;
+const getCaptcha = async () => {
+  const res = await getInfoCaptcha();
+  formInline.key = res.key;
+  captchaImg.value = res.captcha;
 };
 
-// 登录
-const handleLogin = async () => {
-  await userStore.login(loginForm.value);
-  router.push('/');
+// 登录（校验通过后提交，成功跳转首页）
+const handleSubmit = () => {
+  formRef.value?.validate().then(async () => {
+    loading.value = true;
+    try {
+      const { code } = await userStore.login(formInline);
+      if (code == 0) router.push('/');
+    } finally {
+      loading.value = false;
+    }
+  });
 };
-
-onMounted(() => refreshCaptcha());
 </script>
 ```
 
@@ -70,21 +114,26 @@ onMounted(() => refreshCaptcha());
 ## 完整登录示例（含失败处理）
 
 ```typescript
+import { useMessage } from 'naive-ui';
+
+const message = useMessage();
 const loading = ref(false);
 
-const handleLogin = async () => {
+const handleSubmit = async () => {
   await formRef.value.validate();
   loading.value = true;
 
   try {
-    await userStore.login(loginForm.value);
-    ElMessage.success('登录成功');
-    router.push('/');
+    const { code } = await userStore.login(formInline);
+    if (code == 0) {
+      message.success('登录成功');
+      router.push('/');
+    }
   } catch (e: any) {
     // 登录失败（验证码错误/密码错误等），刷新验证码
-    ElMessage.error(e.message || '登录失败');
-    refreshCaptcha();
-    loginForm.value.code = '';
+    message.error(e.message || '登录失败');
+    getCaptcha();
+    formInline.code = '';
   } finally {
     loading.value = false;
   }