duanshuwen/zn-ai
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: 登录验证码接口联调

Browse Source
This commit is contained in:
duanshuwen
2025-12-17 22:58:04 +08:00
parent d6578463e3
commit 9bfcc49411
68 changed files with 360 additions and 8090 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/renderer/views/login/index.vue
View File

@@ -15,33 +15,37 @@
<div class="text-[16px] text-gray-500 line-height-[24px]">24小时在岗，从不打烊的数字员工</div>
</div>
<div class="w-[392px] ml-auto mr-auto">
<div class="font-[14px] text-gray-700 mb-2">账号</div>
<div class="border rounded-[10px] flex items-center gap-2 box-border px-[12px] py-[10px]">
<RiUser3Fill size="20px" color="#99A0AE" />
<input class="flex-1 focus-visible:outline-none" type="text" v-model.trim="form.account" placeholder="请输入账号"
@keyup.enter="onSubmit" />
</div>
<p v-if="errors.account" class="mt-1 text-xs text-red-500">{{ errors.account }}</p>
<div class="font-[14px] text-gray-700 mb-[8px] mt-[12px]">密码</div>
<div class="flex items-center gap-2 border rounded-[10px] box-border px-[12px] py-[10px]">
<RiKey2Fill size="20px" color="#99A0AE" />
<input class="flex-1 focus-visible:outline-none" :type="showPwd ? 'text' : 'password'"
v-model.trim="form.password" placeholder="请输入密码" @keyup.enter="onSubmit" />
</div>
<p v-if="errors.password" class="mt-1 text-xs text-red-500">{{ errors.password }}</p>
<!-- 验证码 -->
<div class="font-[14px] text-gray-700 mb-[8px] mt-[12px]">验证码</div>
<div class="flex items-center gap-2 border rounded-[10px] box-border px-[12px] py-[10px]">
<input class="flex-1 focus-visible:outline-none" type="text" v-model.trim="form.code" placeholder="请输入验证码"
@keyup.enter="onSubmit" />
<img class="w-[80px] h-[40px]" src="" />
</div>
<p v-if="errors.code" class="mt-1 text-xs text-red-500">{{ errors.code }}</p>
<el-form class="w-[392px] ml-auto mr-auto" ref="formRef" :rules="rules" :model="form" label-position="top"
@keyup.enter="onSubmit">
<el-form-item prop="username">
<div class="text-[14px] text-gray-600">账号</div>
<el-input v-model.trim="form.username" placeholder="请输入账号" clearable autocomplete="off">
<template #prefix>
<RiUser3Fill size="20px" color="#99A0AE" />
</template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<div class="text-[14px] text-gray-600">密码</div>
<el-input v-model.trim="form.password" placeholder="请输入密码" clearable autocomplete="off">
<template #prefix>
<RiKey2Fill size="20px" color="#99A0AE" />
</template>
</el-input>
</el-form-item>
<el-form-item prop="code">
<span class="text-[14px] text-gray-600">验证码</span>
<el-input v-model.trim="form.code" placeholder="请输入验证码" clearable autocomplete="off">
<template #suffix>
<img class="w-[80px] h-[38px] cursor-pointer" :src="imgSrc" @click="getVerifyCode" />
</template>
</el-input>
</el-form-item>
<!-- 记住密码|忘记密码 -->
<div class="flex items-center justify-between mb-[24px] mt-[24px]">
<div class="flex items-center gap-2">
<div class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" v-model="showPwd" class="w-[14px] h-[14px] rounded-[4px]" />
<span class="text-[14px] text-gray-600">记住密码</span>
</div>
@@ -56,21 +60,21 @@
<!-- 同意协议 -->
<div class="flex items-center justify-center gap-2 mt-[24px]">
<input type="checkbox" v-model="form.agreement" class="w-[14px] h-[14px] rounded-[4px]" />
<input type="checkbox" v-model="isAgree" class="w-[14px] h-[14px] rounded-[4px]" />
<span class="text-[14px] text-gray-600">我已同意</span>
<span class="text-[14px] text-sky-600">《使用协议》</span>
<span class="text-[14px] text-gray-600">和</span>
<span class="text-[14px] text-sky-600">《隐私协议》</span>
</div>
</div>
</el-form>
<!-- Copy Right -->
<div class="text-[14px] text-gray-500 text-center mt-[24px] mt-auto">
<div class="text-[14px] text-gray-500 text-center mt-auto">
© 2025 贵州智念科技服务有限公司 版权所有
</div>
</div>
<!-- <img class="w-[570px]" src="@assets/images/login/logo.png" /> -->
<img class="w-[570px]" src="@assets/images/login/logo.png" />
</div>
</template>
@@ -79,44 +83,57 @@ import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { authOauth2TokenUsingPost } from "@renderer/api";
import { RiUser3Fill, RiKey2Fill } from '@remixicon/vue'
import { generateUUID } from "@utils/generateUUID";
import { rule } from '@utils/validate'
// form 表单数据类型声明
interface LoginForm {
account: string;
username: string;
password: string;
agreement: boolean;
randomStr: string;
code: string;
}
const router = useRouter();
const form = reactive<LoginForm>({ account: "", password: "", agreement: false, code: "" });
const errors = reactive<{ account?: string; password?: string; code?: string }>({});
const form = reactive<LoginForm>({ username: "", password: "", randomStr: '', code: "" });
const loading = ref(false);
const showPwd = ref(false);
const isAgree = ref(false);
const imgSrc = ref('');
const rules = reactive({
username: [{ validator: rule.overLength, trigger: 'blur' }, { required: true, trigger: 'blur', message: '请输入账号' }], // 用户名校验规则
password: [{ validator: rule.overLength, trigger: 'blur' }, { required: true, trigger: 'blur', message: '请输入密码' }], // 密码校验规则
code: [{ validator: rule.overLength, trigger: 'blur' }, { required: true, trigger: 'blur', message: '请输入验证码' }], // 验证码校验规则
})
const validate = () => {
errors.account = undefined;
errors.password = undefined;
if (!form.account) errors.account = "请输入账号";
else if (form.account.length < 4 || form.account.length > 32) errors.account = "账号长度需在 4-32 之间";
if (!form.password) errors.password = "请输入密码";
else if (form.password.length < 6) errors.password = "密码长度不少于 6 位";
return !errors.account && !errors.password;
};
//获取验证码图片
const { VITE_SERVICE_URL } = (import.meta as any).env
const getVerifyCode = async () => {
form.randomStr = generateUUID()
imgSrc.value = `${VITE_SERVICE_URL}/auth/code/image?randomStr=${form.randomStr}`
}
onMounted(() => getVerifyCode())
const formRef = ref()
const onSubmit = async () => {
// if (!validate() || loading.value) return;
// loading.value = true;
const valid = await formRef.value.validate().catch(() => { }); // 表单校验
if (!valid) return false;
loading.value = true;
try {
// localStorage.setItem("token", "dev-token");
const res: any = await authOauth2TokenUsingPost({ body: form });
// const res: any = await authOauth2TokenUsingPost({ body: form });
// const token = res && (res.token || res.data?.token || res.access_token);
// if (!token) throw new Error("登录失败");
// localStorage.setItem("token", token);
// await (window as any).api.app.setFrameless('/home')
router.push('/home');
} finally {
// loading.value = false;
getVerifyCode()
loading.value = false; // 登录结束
}
};
</script>