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

feat: 问题修复

Browse Source
This commit is contained in:
duanshuwen
2025-09-24 18:05:39 +08:00
parent bf83e95b7b
commit ceab08825a
6 changed files with 108 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/renderer/src/assets/base.css
View File

@@ -1,67 +0,0 @@
:root {
--ev-c-white: #ffffff;
--ev-c-white-soft: #f8f8f8;
--ev-c-white-mute: #f2f2f2;
--ev-c-black: #1b1b1f;
--ev-c-black-soft: #222222;
--ev-c-black-mute: #282828;
--ev-c-gray-1: #515c67;
--ev-c-gray-2: #414853;
--ev-c-gray-3: #32363f;
--ev-c-text-1: rgba(255, 255, 245, 0.86);
--ev-c-text-2: rgba(235, 235, 245, 0.6);
--ev-c-text-3: rgba(235, 235, 245, 0.38);
--ev-button-alt-border: transparent;
--ev-button-alt-text: var(--ev-c-text-1);
--ev-button-alt-bg: var(--ev-c-gray-3);
--ev-button-alt-hover-border: transparent;
--ev-button-alt-hover-text: var(--ev-c-text-1);
--ev-button-alt-hover-bg: var(--ev-c-gray-2);
}
:root {
--color-background: var(--ev-c-black);
--color-background-soft: var(--ev-c-black-soft);
--color-background-mute: var(--ev-c-black-mute);
--color-text: var(--ev-c-text-1);
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
font-weight: normal;
}
ul {
list-style: none;
}
body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
line-height: 1.6;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

19
src/renderer/src/assets/main.css
View File

@@ -1,12 +1,11 @@
@import './base.css';
body {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-image: url('./wavy-lines.svg');
background-size: cover;
background-color: #fff;
/* background-image: url('./wavy-lines.svg');
background-size: cover; */
user-select: none;
}
@@ -169,3 +168,15 @@ code {
display: none;
}
}
.fz-14 {
font-size: 14px;
}
.fz-22 {
font-size: 22px;
}
.mb-20 {
margin-bottom: 20px;
}

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

@@ -1,13 +1,13 @@
<template>
<div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
<div
class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4"
>
<div class="w-full max-w-md">
<!-- 登录卡片 -->
<div class="bg-white rounded-lg shadow-xl p-8">
<!-- Logo和标题 -->
<div class="text-center mb-8">
<h1 class="text-2xl font-bold text-gray-900 mb-2">
China Fellou Plus
</h1>
<h1 class="text-2xl font-bold text-gray-900 mb-2">China Fellou Plus</h1>
<div class="text-sm text-gray-600">
您的隐私对我们很重要，我们确保您的数据是安全和保密的
</div>
@@ -17,7 +17,7 @@
<!-- 二维码登录 -->
<div class="left text-center">
<div class="bg-gray-100 rounded-lg p-8 mb-4">
<div class="fz-22">手机扫码登录</div>
<div class="fz-22 mb-20">手机扫码登录</div>
<div class="w-48 h-48 bg-white rounded-lg mx-auto flex items-center justify-center">
<div class="qr text-center mt-20">
<vue-qrcode value="https://www.1stg.me" width="195" margin="3" />
@@ -30,19 +30,28 @@
</div>
</div>
</div>
<p class="fz-14">
打开<el-text type="success">微信</el-text>扫一扫登录
</p>
<p class="fz-14">打开<el-text type="success">微信</el-text>扫一扫登录</p>
</div>
<!-- 账号密码登录 -->
<div class="right text-center">
<div class="fz-22">密码登录</div>
<div class="fz-22 mb-20">密码登录</div>
<el-form class="mt-20" ref="loginFormRef" :model="loginForm" :rules="loginRules" @keyup.enter="handleLogin">
<el-form
class="mt-20"
ref="loginFormRef"
:model="loginForm"
:rules="loginRules"
@keyup.enter="handleLogin"
>
<!-- 用户名/邮箱/手机号 -->
<el-form-item prop="username">
<el-input v-model="loginForm.username" placeholder="请输入手机号" size="large" clearable>
<el-input
v-model="loginForm.username"
placeholder="请输入手机号"
size="large"
clearable
>
<template #prefix>
<el-icon>
<User />
@@ -53,8 +62,14 @@
<!-- 密码 -->
<el-form-item prop="password">
<el-input v-model="loginForm.password" type="password" placeholder="请输入密码" size="large" show-password
clearable>
<el-input
v-model="loginForm.password"
type="password"
placeholder="请输入密码"
size="large"
show-password
clearable
>
<template #prefix>
<el-icon>
<Lock />
@@ -66,15 +81,22 @@
<!-- 图形验证码 -->
<el-form-item v-if="showCaptcha" prop="captcha">
<div class="flex space-x-2">
<el-input v-model="loginForm.captcha" placeholder="请输入验证码" size="large" clearable>
<el-input
v-model="loginForm.captcha"
placeholder="请输入验证码"
size="large"
clearable
>
<template #prefix>
<el-icon>
<Key />
</el-icon>
</template>
</el-input>
<div class="w-24 h-10 bg-gray-200 rounded flex items-center justify-center cursor-pointer"
@click="refreshCaptcha">
<div
class="w-24 h-10 bg-gray-200 rounded flex items-center justify-center cursor-pointer"
@click="refreshCaptcha"
>
<span class="text-sm font-mono">{{ captchaCode }}</span>
</div>
</div>
@@ -90,7 +112,13 @@
<!-- 登录按钮 -->
<el-form-item>
<el-button type="primary" size="large" class="w-full" :loading="loading" @click="handleLogin">
<el-button
type="primary"
size="large"
class="w-full"
:loading="loading"
@click="handleLogin"
>
登录
</el-button>
</el-form-item>
@@ -113,93 +141,89 @@
</template>
<script setup ts>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { User, Lock, Key } from "@element-plus/icons-vue";
import VueQrcode from "vue-qrcode";
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { User, Lock, Key } from '@element-plus/icons-vue'
import VueQrcode from 'vue-qrcode'
// 登录表单
const loginFormRef = ref();
const loginFormRef = ref()
const loginForm = reactive({
username: "",
password: "",
captcha: "",
remember: false,
});
username: '',
password: '',
captcha: '',
remember: false
})
// 登录规则（必填验证）
const loginRules = {
username: [
{ required: true, message: "请输入用户名/邮箱/手机号", trigger: "blur" },
],
username: [{ required: true, message: '请输入用户名/邮箱/手机号', trigger: 'blur' }],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 6, message: "密码长度不能少于6位", trigger: "blur" },
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
],
captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }],
};
captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
}
// 加载状态
const loading = ref(false);
const loading = ref(false)
// 验证码相关
const showCaptcha = ref(false);
const captchaCode = ref("8K9M");
const loginAttempts = ref(0);
const showCaptcha = ref(false)
const captchaCode = ref('8K9M')
const loginAttempts = ref(0)
// 生成二维码
const qrCodeUrl = ref("");
const qrCodeUrl = ref('')
// 刷新验证码
const refreshCaptcha = () => {
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
let code = "";
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
let code = ''
for (let i = 0; i < 4; i++) {
code += chars.charAt(Math.floor(Math.random() * chars.length));
code += chars.charAt(Math.floor(Math.random() * chars.length))
}
captchaCode.value = code;
};
captchaCode.value = code
}
// 处理登录
const handleLogin = async () => {
try {
await loginFormRef.value.validate();
await loginFormRef.value.validate()
loading.value = true;
loading.value = true
// 模拟登录请求
setTimeout(() => {
loading.value = false;
loginAttempts.value++;
loading.value = false
loginAttempts.value++
// 模拟登录失败，显示验证码
if (loginAttempts.value >= 1) {
showCaptcha.value = true;
ElMessage.error("用户名或密码错误");
refreshCaptcha();
showCaptcha.value = true
ElMessage.error('用户名或密码错误')
refreshCaptcha()
} else {
ElMessage.success("登录成功");
ElMessage.success('登录成功')
}
}, 1500);
}, 1500)
} catch (error) {
console.error("验证失败:", error);
console.error('验证失败:', error)
}
};
}
// 处理忘记密码
const handleForgotPassword = () => {
ElMessage.info("忘记密码功能开发中...");
};
ElMessage.info('忘记密码功能开发中...')
}
// 页面加载时聚焦到用户名输入框
onMounted(() => {
const usernameInput = document.querySelector(
'input[placeholder="请输入用户名/邮箱/手机号"]'
);
const usernameInput = document.querySelector('input[placeholder="请输入用户名/邮箱/手机号"]')
if (usernameInput) {
usernameInput.focus();
usernameInput.focus()
}
});
})
</script>
<style scoped lang="scss">
@@ -224,6 +248,7 @@ onMounted(() => {
box-shadow: none;
background-color: #fff;
position: relative;
overflow: hidden;
}
.qrcode-error {