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-07 16:29:57 +08:00
parent 14d916187c
commit 84300791a0
19 changed files with 564 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,12 @@
<template>
<div
class="h-screen box-border p-[8px] login-bg flex items-center justify-center"
>
<div class="h-screen box-border p-[8px] login-bg flex items-center justify-center">
<div class="w-[836px] h-full bg-white rounded-2xl p-[32px] flex flex-col">
<div class="flex items-center">
<img class="w-[48px] h-[48px]" src="@assets/images/login/blue_logo.png" />
<span class="ml-auto text-[14px] text-gray-600">没有账号？</span>
<button class="bg-sky-50 rounded-[8px] text-[14px] text-sky-600 px-[12px] py-[6px] focus-visible:outline-none">注册</button>
<button
class="bg-sky-50 rounded-[8px] text-[14px] text-sky-600 px-[12px] py-[6px] focus-visible:outline-none">注册</button>
</div>
<div class="flex flex-col items-center justify-center mb-[24px] box-border pt-[108px]">
@@ -18,39 +17,24 @@
<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="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"
/>
<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"
/>
<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>
@@ -58,31 +42,21 @@
<!-- 记住密码|忘记密码 -->
<div class="flex items-center justify-between mb-[24px] mt-[24px]">
<div class="flex items-center gap-2">
<input
type="checkbox"
v-model="showPwd"
class="w-[14px] h-[14px] rounded-[4px]"
/>
<input type="checkbox" v-model="showPwd" class="w-[14px] h-[14px] rounded-[4px]" />
<span class="text-[14px] text-gray-600">记住密码</span>
</div>
<span class="text-[14px] text-sky-600">忘记密码？</span>
</div>
<!-- 登录按钮 -->
<button
class="w-full py-2 bg-blue-600 text-white rounded-[8px] hover:bg-blue-700 disabled:bg-blue-300"
@click="onSubmit"
>
<button class="w-full py-2 bg-blue-600 text-white rounded-[8px] hover:bg-blue-700 disabled:bg-blue-300"
@click="onSubmit">
{{ loading ? '登录中…' : '登录' }}
</button>
<!-- 同意协议 -->
<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="form.agreement" 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>
@@ -103,8 +77,8 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { login as apiLogin } from "@/renderer/api/login";
import { RiUser3Fill , RiKey2Fill} from '@remixicon/vue'
// import { login as apiLogin } from "@/renderer/api/login";
import { RiUser3Fill, RiKey2Fill } from '@remixicon/vue'
const router = useRouter();
const form = reactive({ account: "", password: "", agreement: "", code: "" });
@@ -131,7 +105,8 @@ const onSubmit = async () => {
// const token = res && (res.token || res.data?.token || res.access_token);
// if (!token) throw new Error("登录失败");
// localStorage.setItem("token", token);
await (window as any).ipcAPI.app.setFrameless('/home')
// await (window as any).ipcAPI.app.setFrameless('/home')
router.push('/home');
} finally {
// loading.value = false;
}