update
This commit is contained in:
aaron
parent
5fa2d869f7
commit
d079bb164e
@ -5,7 +5,7 @@ services:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
image: tradus-web:1.13
|
||||
image: tradus-web:1.14
|
||||
container_name: tradus-web
|
||||
ports:
|
||||
- '6000:80'
|
||||
|
||||
302
src/App.vue
302
src/App.vue
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { RouterView, useRoute } from 'vue-router'
|
||||
import { computed, ref, onMounted, onUnmounted } from 'vue'
|
||||
import { computed, ref, onMounted, onUnmounted, watch } from 'vue'
|
||||
import { useUserStore } from './stores/user'
|
||||
import { authApi } from './services/api'
|
||||
|
||||
@ -17,21 +17,69 @@ const loginMode = ref('login') // 'login' 或 'register'
|
||||
|
||||
// 获取最新用户数据
|
||||
const fetchUserInfo = async () => {
|
||||
if (isAuthenticated.value) {
|
||||
if (!isAuthenticated.value) return
|
||||
|
||||
try {
|
||||
await authApi.getUserInfo()
|
||||
const headers: Record<string, string> = {
|
||||
'Content-Type': 'application/json',
|
||||
}
|
||||
if (userStore.authHeader) {
|
||||
headers['Authorization'] = userStore.authHeader
|
||||
}
|
||||
|
||||
const response = await fetch(
|
||||
`${import.meta.env.MODE === 'development' ? 'http://127.0.0.1:8000' : 'https://api.ibtc.work'}/user/me`,
|
||||
{
|
||||
method: 'GET',
|
||||
headers,
|
||||
},
|
||||
)
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('获取用户信息失败')
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
userStore.$patch((state) => {
|
||||
state.userInfo = data
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('获取用户数据失败:', error)
|
||||
// 如果获取用户信息失败，可能是 token 过期，清除登录状态
|
||||
if (error instanceof Error && error.message.includes('401')) {
|
||||
userStore.logout()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 设置定期刷新用户信息（每10分钟）
|
||||
let userInfoRefreshInterval: number | undefined
|
||||
|
||||
const startUserInfoRefresh = () => {
|
||||
if (userInfoRefreshInterval) return
|
||||
userInfoRefreshInterval = window.setInterval(fetchUserInfo, 10 * 60 * 1000)
|
||||
}
|
||||
|
||||
const stopUserInfoRefresh = () => {
|
||||
if (userInfoRefreshInterval) {
|
||||
clearInterval(userInfoRefreshInterval)
|
||||
userInfoRefreshInterval = undefined
|
||||
}
|
||||
}
|
||||
|
||||
// 处理登录状态变化
|
||||
watch(isAuthenticated, (newValue) => {
|
||||
if (newValue) {
|
||||
startUserInfoRefresh()
|
||||
} else {
|
||||
stopUserInfoRefresh()
|
||||
}
|
||||
})
|
||||
|
||||
// 表单数据
|
||||
const formData = ref({
|
||||
email: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
nickname: '',
|
||||
verificationCode: '',
|
||||
})
|
||||
|
||||
@ -39,11 +87,12 @@ const formData = ref({
|
||||
const formErrors = ref({
|
||||
email: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
nickname: '',
|
||||
verificationCode: '',
|
||||
})
|
||||
|
||||
// 密码显示状态
|
||||
const showPassword = ref(false)
|
||||
|
||||
// 验证码相关状态
|
||||
const sendingCode = ref(false)
|
||||
const countdown = ref(0)
|
||||
@ -87,8 +136,6 @@ const validateForm = () => {
|
||||
formErrors.value = {
|
||||
email: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
nickname: '',
|
||||
verificationCode: '',
|
||||
}
|
||||
|
||||
@ -110,24 +157,8 @@ const validateForm = () => {
|
||||
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
|
||||
@ -148,10 +179,13 @@ const handleSubmit = async () => {
|
||||
mail: formData.value.email,
|
||||
password: formData.value.password,
|
||||
})
|
||||
await fetchUserInfo() // 登录成功后获取用户信息
|
||||
} else {
|
||||
// 从邮箱中提取用户名作为昵称
|
||||
const nickname = formData.value.email.split('@')[0]
|
||||
await authApi.register({
|
||||
mail: formData.value.email,
|
||||
nickname: formData.value.nickname,
|
||||
nickname: nickname,
|
||||
password: formData.value.password,
|
||||
verification_code: formData.value.verificationCode,
|
||||
})
|
||||
@ -160,6 +194,7 @@ const handleSubmit = async () => {
|
||||
mail: formData.value.email,
|
||||
password: formData.value.password,
|
||||
})
|
||||
await fetchUserInfo() // 注册并登录成功后获取用户信息
|
||||
}
|
||||
closeAuthModal()
|
||||
} catch (error) {
|
||||
@ -177,20 +212,17 @@ const closeAuthModal = () => {
|
||||
formData.value = {
|
||||
email: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
nickname: '',
|
||||
verificationCode: '',
|
||||
}
|
||||
formErrors.value = {
|
||||
email: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
nickname: '',
|
||||
verificationCode: '',
|
||||
}
|
||||
}
|
||||
|
||||
const handleLogout = () => {
|
||||
stopUserInfoRefresh() // 退出登录时停止定时刷新
|
||||
userStore.logout()
|
||||
if (window.location.pathname.includes('/user')) {
|
||||
window.location.href = '/'
|
||||
@ -226,11 +258,15 @@ const openAuthModal = (mode: 'login' | 'register') => {
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', closeMenus)
|
||||
fetchUserInfo() // 获取最新用户数据
|
||||
if (isAuthenticated.value) {
|
||||
fetchUserInfo() // 应用初始化时获取用户信息
|
||||
startUserInfoRefresh() // 开始定期刷新
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', closeMenus)
|
||||
stopUserInfoRefresh() // 组件卸载时停止定时刷新
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -451,7 +487,7 @@ onUnmounted(() => {
|
||||
<form class="auth-form" @submit.prevent="handleSubmit">
|
||||
<div class="form-group">
|
||||
<label for="email">邮箱</label>
|
||||
<div class="input-with-button" v-if="loginMode === 'register'">
|
||||
<div class="input-container">
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
@ -460,6 +496,7 @@ onUnmounted(() => {
|
||||
placeholder="请输入邮箱"
|
||||
/>
|
||||
<button
|
||||
v-if="loginMode === 'register'"
|
||||
type="button"
|
||||
class="code-button"
|
||||
@click="sendVerificationCode"
|
||||
@ -474,20 +511,11 @@ onUnmounted(() => {
|
||||
}}
|
||||
</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>
|
||||
<div class="form-group" v-if="loginMode === 'register'">
|
||||
<label for="verification-code">邮件验证码</label>
|
||||
<input
|
||||
type="text"
|
||||
id="verification-code"
|
||||
@ -495,54 +523,59 @@ onUnmounted(() => {
|
||||
:class="{ error: formErrors.verificationCode }"
|
||||
placeholder="请输入验证码"
|
||||
/>
|
||||
<span class="error-message" v-if="formErrors.verificationCode">{{
|
||||
formErrors.verificationCode
|
||||
}}</span>
|
||||
<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>
|
||||
<div class="password-input-container">
|
||||
<input
|
||||
type="password"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
id="password"
|
||||
v-model="formData.password"
|
||||
:class="{ error: formErrors.password }"
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="toggle-password-button"
|
||||
@click="showPassword = !showPassword"
|
||||
>
|
||||
<svg
|
||||
v-if="!showPassword"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
height="20"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
>
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
</svg>
|
||||
<svg
|
||||
v-else
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
height="20"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
|
||||
/>
|
||||
<line x1="1" y1="1" x2="23" y2="23" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<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>
|
||||
@ -1405,6 +1438,7 @@ body {
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius);
|
||||
@ -1412,6 +1446,8 @@ body {
|
||||
transition: all 0.2s ease;
|
||||
background-color: var(--color-bg-secondary);
|
||||
color: var(--color-text-primary);
|
||||
height: 42px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
@ -1515,44 +1551,23 @@ body {
|
||||
}
|
||||
|
||||
/* 验证码按钮样式 */
|
||||
.input-with-button {
|
||||
.input-container {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-with-button input {
|
||||
.input-container 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 {
|
||||
.input-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.code-button {
|
||||
padding: 0.8rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1633,4 +1648,85 @@ body {
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.password-input-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.password-input-container input {
|
||||
width: 100%;
|
||||
padding-right: 2.5rem; /* 为按钮留出空间 */
|
||||
}
|
||||
|
||||
.toggle-password-button {
|
||||
position: absolute;
|
||||
right: 0.75rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0.5rem;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.toggle-password-button:hover {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.input-container {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-container input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.input-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.code-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.code-button {
|
||||
padding: 0 1rem;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--color-accent);
|
||||
border: 1px solid var(--color-accent);
|
||||
color: white;
|
||||
font-size: 0.9rem;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
min-width: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.code-button:hover:not(:disabled) {
|
||||
background-color: var(--color-accent-hover);
|
||||
border-color: var(--color-accent-hover);
|
||||
}
|
||||
|
||||
.code-button:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
background-color: var(--color-bg-secondary);
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -16,17 +16,17 @@ const openAuthModal = (mode: 'login' | 'register') => {
|
||||
<div class="home-view">
|
||||
<section class="hero-section">
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title"><span class="accent">tradus</span></h1>
|
||||
<h1 class="hero-title">
|
||||
<span class="accent">tradus</span>
|
||||
<span class="free-tag">Alpha</span>
|
||||
</h1>
|
||||
<p class="hero-subtitle">基于AI大语言模型的智能投研助理</p>
|
||||
<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="hero-actions" v-else>
|
||||
<div class="btn-wrapper">
|
||||
<RouterLink to="/ai-agents" class="btn btn-primary">开始分析</RouterLink>
|
||||
<span class="free-tag">Beta</span>
|
||||
</div>
|
||||
<RouterLink to="/ai-agents" class="btn btn-primary">开始使用</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -79,7 +79,8 @@ const openAuthModal = (mode: 'login' | 'register') => {
|
||||
Roboto,
|
||||
sans-serif;
|
||||
letter-spacing: -0.5px;
|
||||
display: block;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.accent {
|
||||
@ -202,7 +203,7 @@ const openAuthModal = (mode: 'login' | 'register') => {
|
||||
.free-tag {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
right: -40px;
|
||||
background-color: #ff3355;
|
||||
color: white;
|
||||
font-size: 0.7rem;
|
||||
@ -275,7 +276,8 @@ const openAuthModal = (mode: 'login' | 'register') => {
|
||||
|
||||
.free-tag {
|
||||
top: -8px;
|
||||
right: 20px;
|
||||
right: -30px;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user