签入版本

RXThinkCMF_ThinkPhp6_NaiveVue/zh/frontend/login.md

@@ -17,45 +17,98 @@
 ## 登录页面代码
 
 ```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>
+  <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>
+import { reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useMessage, type FormRules } from 'naive-ui';
 import { useUserStore } from '@/store/modules/user';
-import { getCaptcha } from '@/api/common/user';
+import { getInfoCaptcha } from '@/api/common/user';
 
+const router = useRouter();
+const message = useMessage();
 const userStore = useUserStore();
-const loginForm = ref({ username: '', password: '', captchaCode: '', captchaKey: '' });
-const captchaImage = ref('');
+
+const formInline = reactive({ username: '', password: '', code: '' });
+const rules: FormRules = {
+  username: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
+  password: [{ required: true, message: '请输入登录密码', trigger: 'blur' }],
+  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
+};
+
+const loading = ref(false);
+const captchaImg = ref('');
 
 // 获取验证码
-const refreshCaptcha = async () => {
-  const res = await getCaptcha();
-  loginForm.value.captchaKey = res.key;
-  captchaImage.value = res.image;
+const getCaptcha = async () => {
+  const res = await getInfoCaptcha();
+  captchaImg.value = res.image;
 };
 
 // 登录
-const handleLogin = async () => {
-  await userStore.login(loginForm.value);
-  router.push('/');
+const handleSubmit = async () => {
+  loading.value = true;
+  try {
+    await userStore.login(formInline);
+    router.push('/');
+  } catch (e) {
+    message.error(e.message || '登录失败');
+  } finally {
+    loading.value = false;
+  }
 };
 
-onMounted(() => refreshCaptcha());
+onMounted(() => getCaptcha());
 </script>
 ```