This commit is contained in:
aaron 2025-05-09 15:51:52 +08:00
parent e9cda08c48
commit b7197f1744
4 changed files with 594 additions and 32 deletions

View File

@ -5,7 +5,7 @@ services:
build:
context: .
dockerfile: Dockerfile
image: tradus-web:1.0.16
image: tradus-web:1.0.17
container_name: tradus-web
ports:
- '6000:80'

View File

@ -2,12 +2,179 @@
import { RouterView } from 'vue-router'
import { computed, ref, onMounted, onUnmounted } from 'vue'
import { useUserStore } from './stores/user'
import { authApi } from './services/api'
const userStore = useUserStore()
const isAuthenticated = computed(() => userStore.isAuthenticated)
const userInfo = computed(() => userStore.userInfo)
const showMobileMenu = ref(false)
const showUserMenu = ref(false)
const showLoginModal = ref(false)
const loginMode = ref('login') // 'login' 'register'
//
const formData = ref({
email: '',
password: '',
confirmPassword: '',
nickname: '',
verificationCode: '',
})
//
const formErrors = ref({
email: '',
password: '',
confirmPassword: '',
nickname: '',
verificationCode: '',
})
//
const sendingCode = ref(false)
const countdown = ref(0)
//
const isLoading = ref(false)
//
const sendVerificationCode = async () => {
if (!formData.value.email) {
formErrors.value.email = '请输入邮箱'
return
}
try {
sendingCode.value = true
formErrors.value.email = ''
await authApi.sendVerificationCode(formData.value.email)
countdown.value = 60
//
const timer = setInterval(() => {
countdown.value--
if (countdown.value <= 0) {
clearInterval(timer)
}
}, 1000)
} catch (err) {
formErrors.value.email = err instanceof Error ? err.message : '发送验证码失败,请重试'
console.error('发送验证码失败:', err)
} finally {
sendingCode.value = false
}
}
//
const validateForm = () => {
let isValid = true
formErrors.value = {
email: '',
password: '',
confirmPassword: '',
nickname: '',
verificationCode: '',
}
//
if (!formData.value.email) {
formErrors.value.email = '请输入邮箱'
isValid = false
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.value.email)) {
formErrors.value.email = '请输入有效的邮箱地址'
isValid = false
}
//
if (!formData.value.password) {
formErrors.value.password = '请输入密码'
isValid = false
} else if (formData.value.password.length < 6) {
formErrors.value.password = '密码长度不能小于6位'
isValid = false
}
//
if (loginMode.value === 'register') {
//
if (!formData.value.confirmPassword) {
formErrors.value.confirmPassword = '请确认密码'
isValid = false
} else if (formData.value.confirmPassword !== formData.value.password) {
formErrors.value.confirmPassword = '两次输入的密码不一致'
isValid = false
}
//
if (!formData.value.nickname) {
formErrors.value.nickname = '请输入昵称'
isValid = false
}
//
if (!formData.value.verificationCode) {
formErrors.value.verificationCode = '请输入验证码'
isValid = false
}
}
return isValid
}
//
const handleSubmit = async () => {
if (!validateForm()) return
isLoading.value = true
try {
if (loginMode.value === 'login') {
await authApi.login({
mail: formData.value.email,
password: formData.value.password,
})
} else {
await authApi.register({
mail: formData.value.email,
nickname: formData.value.nickname,
password: formData.value.password,
verification_code: formData.value.verificationCode,
})
//
await authApi.login({
mail: formData.value.email,
password: formData.value.password,
})
}
closeAuthModal()
} catch (error) {
console.error('认证失败:', error)
formErrors.value.email = error instanceof Error ? error.message : '认证失败,请检查输入信息'
} finally {
isLoading.value = false
}
}
const closeAuthModal = () => {
showLoginModal.value = false
loginMode.value = 'login'
//
formData.value = {
email: '',
password: '',
confirmPassword: '',
nickname: '',
verificationCode: '',
}
formErrors.value = {
email: '',
password: '',
confirmPassword: '',
nickname: '',
verificationCode: '',
}
}
const handleLogout = () => {
userStore.logout()
@ -38,6 +205,11 @@ const closeMenus = (event: MouseEvent) => {
}
}
const openAuthModal = (mode: 'login' | 'register') => {
loginMode.value = mode
showLoginModal.value = true
}
onMounted(() => {
document.addEventListener('click', closeMenus)
})
@ -147,8 +319,8 @@ onUnmounted(() => {
</div>
</div>
<div class="desktop-user-info" v-else>
<RouterLink to="/login" class="auth-link">登录</RouterLink>
<RouterLink to="/register" class="auth-link">注册</RouterLink>
<button class="auth-button" @click="openAuthModal('login')">登录</button>
<button class="auth-button register" @click="openAuthModal('register')">注册</button>
</div>
<!-- 移动端用户信息 -->
@ -191,12 +363,8 @@ onUnmounted(() => {
</div>
</div>
<div class="mobile-user-info" v-else>
<RouterLink to="/login" class="mobile-auth-link" @click="showMobileMenu = false"
>登录</RouterLink
>
<RouterLink to="/register" class="mobile-auth-link" @click="showMobileMenu = false"
>注册</RouterLink
>
<button class="auth-button" @click="openAuthModal('login')">登录</button>
<button class="auth-button register" @click="openAuthModal('register')">注册</button>
</div>
</div>
</aside>
@ -207,9 +375,142 @@ onUnmounted(() => {
<!-- 右侧对话区域 -->
<main class="chat-container">
<div class="chat-content">
<RouterView />
<RouterView @openAuth="openAuthModal" />
</div>
</main>
<!-- 登录注册模态框 -->
<div class="modal-overlay" v-if="showLoginModal" @click="closeAuthModal">
<div class="modal-container" @click.stop>
<div class="modal-header">
<h2>{{ loginMode === 'login' ? '登录' : '注册' }}</h2>
<button class="close-button" @click="closeAuthModal">
<svg
viewBox="0 0 24 24"
width="24"
height="24"
stroke="currentColor"
stroke-width="2"
fill="none"
>
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<div class="modal-content">
<form class="auth-form" @submit.prevent="handleSubmit">
<div class="form-group">
<label for="email">邮箱</label>
<div class="input-with-button" v-if="loginMode === 'register'">
<input
type="email"
id="email"
v-model="formData.email"
:class="{ error: formErrors.email }"
placeholder="请输入邮箱"
/>
<button
type="button"
class="code-button"
@click="sendVerificationCode"
:disabled="sendingCode || countdown > 0"
>
{{
countdown > 0
? `${countdown}秒后重试`
: sendingCode
? '发送中...'
: '获取验证码'
}}
</button>
</div>
<input
v-else
type="email"
id="email"
v-model="formData.email"
:class="{ error: formErrors.email }"
placeholder="请输入邮箱"
/>
<span class="error-message" v-if="formErrors.email">{{ formErrors.email }}</span>
</div>
<template v-if="loginMode === 'register'">
<div class="form-group">
<label for="verification-code">验证码</label>
<input
type="text"
id="verification-code"
v-model="formData.verificationCode"
:class="{ error: formErrors.verificationCode }"
placeholder="请输入验证码"
/>
<span class="error-message" v-if="formErrors.verificationCode">{{
formErrors.verificationCode
}}</span>
</div>
<div class="form-group">
<label for="nickname">昵称</label>
<input
type="text"
id="nickname"
v-model="formData.nickname"
:class="{ error: formErrors.nickname }"
placeholder="请输入昵称"
/>
<span class="error-message" v-if="formErrors.nickname">{{
formErrors.nickname
}}</span>
</div>
</template>
<div class="form-group">
<label for="password">密码</label>
<input
type="password"
id="password"
v-model="formData.password"
:class="{ error: formErrors.password }"
placeholder="请输入密码"
/>
<span class="error-message" v-if="formErrors.password">{{
formErrors.password
}}</span>
</div>
<div class="form-group" v-if="loginMode === 'register'">
<label for="confirm-password">确认密码</label>
<input
type="password"
id="confirm-password"
v-model="formData.confirmPassword"
:class="{ error: formErrors.confirmPassword }"
placeholder="请再次输入密码"
/>
<span class="error-message" v-if="formErrors.confirmPassword">{{
formErrors.confirmPassword
}}</span>
</div>
<button type="submit" class="submit-button" :disabled="isLoading">
<span v-if="!isLoading">{{ loginMode === 'login' ? '登录' : '注册' }}</span>
<span v-else class="loading-spinner"></span>
</button>
</form>
<div class="auth-switch">
{{ loginMode === 'login' ? '还没有账号?' : '已有账号?' }}
<button
class="switch-button"
@click="loginMode = loginMode === 'login' ? 'register' : 'login'"
>
{{ loginMode === 'login' ? '立即注册' : '立即登录' }}
</button>
</div>
</div>
</div>
</div>
</div>
</template>
@ -912,4 +1213,278 @@ body {
display: block;
}
}
/* 认证按钮样式 */
.auth-button {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-accent);
border-radius: var(--border-radius);
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
margin: 0.5rem 0;
background: none;
color: var(--color-accent);
}
.auth-button:hover {
background-color: rgba(51, 85, 255, 0.04);
}
.auth-button.register {
background-color: var(--color-accent);
color: white;
}
.auth-button.register:hover {
background-color: var(--color-accent-hover);
}
/* 模态框样式 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
backdrop-filter: blur(4px);
}
.modal-container {
background-color: var(--color-bg-primary);
border-radius: var(--border-radius);
width: 90%;
max-width: 400px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
animation: modalSlideIn 0.3s ease;
}
.modal-header {
padding: 1.5rem;
border-bottom: 1px solid var(--color-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h2 {
font-size: 1.5rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
}
.close-button {
background: none;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.close-button:hover {
background-color: var(--color-bg-hover);
color: var(--color-text-primary);
}
.modal-content {
padding: 1.5rem;
}
.auth-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-group label {
font-size: 0.95rem;
font-weight: 500;
color: var(--color-text-primary);
}
.form-group input {
padding: 0.75rem;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
font-size: 1rem;
transition: all 0.2s ease;
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
}
.form-group input:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 2px rgba(51, 85, 255, 0.1);
}
.submit-button {
margin-top: 1rem;
padding: 0.875rem;
background-color: var(--color-accent);
color: white;
border: none;
border-radius: var(--border-radius);
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.submit-button:hover {
background-color: var(--color-accent-hover);
}
.auth-switch {
margin-top: 1.5rem;
text-align: center;
color: var(--color-text-secondary);
font-size: 0.95rem;
}
.switch-button {
background: none;
border: none;
color: var(--color-accent);
cursor: pointer;
font-weight: 500;
padding: 0;
margin-left: 0.5rem;
}
.switch-button:hover {
text-decoration: underline;
}
@keyframes modalSlideIn {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* 移动端适配 */
@media (max-width: 768px) {
.modal-container {
width: 95%;
}
.modal-header {
padding: 1.25rem;
}
.modal-content {
padding: 1.25rem;
}
}
/* 表单错误样式 */
.form-group input.error {
border-color: #ff4d4f;
}
.form-group input.error:focus {
box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.1);
}
.error-message {
color: #ff4d4f;
font-size: 0.85rem;
margin-top: 0.25rem;
}
/* 加载动画 */
.loading-spinner {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
border: 2px solid #ffffff;
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* 禁用状态 */
.submit-button:disabled {
opacity: 0.7;
cursor: not-allowed;
}
/* 输入框聚焦状态 */
.form-group input:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 2px rgba(51, 85, 255, 0.1);
}
/* 验证码按钮样式 */
.input-with-button {
display: flex;
gap: 0.5rem;
}
.input-with-button input {
flex: 1;
}
.code-button {
padding: 0 1rem;
border-radius: var(--border-radius);
background-color: var(--color-bg-elevated);
border: 1px solid var(--color-border);
color: var(--color-text-secondary);
font-size: 0.9rem;
white-space: nowrap;
cursor: pointer;
transition: all 0.2s ease;
}
.code-button:hover:not(:disabled) {
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
}
.code-button:disabled {
opacity: 0.7;
cursor: not-allowed;
}
@media (max-width: 480px) {
.input-with-button {
flex-direction: column;
}
.code-button {
padding: 0.8rem;
}
}
</style>

View File

@ -347,10 +347,6 @@ const getIconPath = (agent: Agent) => {
<div class="login-prompt-content">
<h2>需要登录</h2>
<p>请登录或注册账号以使用AI Agent功能</p>
<div class="login-prompt-actions">
<router-link to="/login" class="login-button">登录</router-link>
<router-link to="/register" class="register-button">注册</router-link>
</div>
</div>
</div>

View File

@ -5,6 +5,12 @@ import { useRouter } from 'vue-router'
const userStore = useUserStore()
const isAuthenticated = computed(() => userStore.isAuthenticated)
const emit = defineEmits(['openAuth'])
const openAuthModal = (mode: 'login' | 'register') => {
emit('openAuth', mode)
}
</script>
<template>
@ -13,25 +19,10 @@ const isAuthenticated = computed(() => userStore.isAuthenticated)
<div class="hero-content">
<h1 class="hero-title"><span class="accent">tradus</span></h1>
<p class="hero-subtitle">A intelligent trading assistant</p>
<div class="hero-actions">
<!-- 未登录状态显示登录和注册按钮 -->
<template v-if="!isAuthenticated">
<router-link to="/login" class="btn btn-primary">登录</router-link>
<router-link to="/register" class="btn btn-secondary">注册</router-link>
</template>
<div class="hero-actions" v-if="!isAuthenticated">
<button class="btn btn-primary" @click="openAuthModal('login')">登录</button>
<button class="btn btn-secondary" @click="openAuthModal('register')">注册</button>
</div>
<!-- <div class="discord-link">
<a href="https://discord.gg/8vMDD4kC" target="_blank" class="discord-text">
<svg class="discord-icon" viewBox="0 0 24 24" width="16" height="16">
<path
fill="currentColor"
d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"
/>
</svg>
加入Discord社区
</a>
</div> -->
</div>
</section>
</div>