update
This commit is contained in:
aaron
parent
1ca60d45eb
commit
1a607c1ee1
857
src/App.vue
857
src/App.vue
@ -1,149 +1,91 @@
|
||||
<script setup lang="ts">
|
||||
import { RouterView } from 'vue-router'
|
||||
import { ref, computed } from 'vue'
|
||||
import { computed, ref, onMounted, onUnmounted } from 'vue'
|
||||
import { useUserStore } from './stores/user'
|
||||
|
||||
const mobileMenuOpen = ref(false)
|
||||
const userStore = useUserStore()
|
||||
const isAuthenticated = computed(() => userStore.isAuthenticated)
|
||||
const userInfo = computed(() => userStore.userInfo)
|
||||
|
||||
// 根据用户等级获取等级名称
|
||||
const userLevelName = computed(() => {
|
||||
if (!userInfo.value) return ''
|
||||
switch (userInfo.value.level) {
|
||||
case 0:
|
||||
return '普通会员'
|
||||
case 1:
|
||||
return 'VIP'
|
||||
case 2:
|
||||
return '超级VIP'
|
||||
default:
|
||||
return '普通会员'
|
||||
}
|
||||
})
|
||||
|
||||
// 根据用户等级获取等级标签的样式类
|
||||
const userLevelClass = computed(() => {
|
||||
if (!userInfo.value) return ''
|
||||
switch (userInfo.value.level) {
|
||||
case 0:
|
||||
return 'user-level-normal'
|
||||
case 1:
|
||||
return 'user-level-vip'
|
||||
case 2:
|
||||
return 'user-level-super-vip'
|
||||
default:
|
||||
return 'user-level-normal'
|
||||
}
|
||||
})
|
||||
|
||||
const toggleMobileMenu = () => {
|
||||
mobileMenuOpen.value = !mobileMenuOpen.value
|
||||
}
|
||||
|
||||
const closeMobileMenu = () => {
|
||||
mobileMenuOpen.value = false
|
||||
}
|
||||
const showUserMenu = ref(false)
|
||||
|
||||
const handleLogout = () => {
|
||||
userStore.logout()
|
||||
mobileMenuOpen.value = false
|
||||
// 如果当前在需要登录的页面，可以跳转到首页
|
||||
if (window.location.pathname.includes('/user')) {
|
||||
window.location.href = '/'
|
||||
}
|
||||
showUserMenu.value = false
|
||||
}
|
||||
|
||||
const toggleUserMenu = () => {
|
||||
showUserMenu.value = !showUserMenu.value
|
||||
}
|
||||
|
||||
// 点击其他地方关闭菜单
|
||||
const closeUserMenu = (event: MouseEvent) => {
|
||||
const target = event.target as HTMLElement
|
||||
if (!target.closest('.user-section')) {
|
||||
showUserMenu.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', closeUserMenu)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', closeUserMenu)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<header class="app-header">
|
||||
<div class="header-content">
|
||||
<!-- 左侧Logo -->
|
||||
<div class="logo">
|
||||
<RouterLink to="/" class="logo-link">
|
||||
<img src="@/assets/logo.png" alt="Crypto.AI Logo" class="logo-image" />
|
||||
Crypto.AI
|
||||
<!-- 左侧栏 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-content">
|
||||
<!-- 网站标题 -->
|
||||
<div class="site-title">
|
||||
<span class="title-text">AI Trade</span>
|
||||
<div class="subtitle-text">AI for Trading</div>
|
||||
</div>
|
||||
<!-- Agent 列表 -->
|
||||
<div class="agent-list">
|
||||
<RouterLink to="/" class="agent-item">
|
||||
<span class="agent-icon">🏠</span>
|
||||
<span class="agent-name">首页</span>
|
||||
</RouterLink>
|
||||
<RouterLink to="/ai-agent" class="agent-item">
|
||||
<span class="agent-icon">🤖</span>
|
||||
<span class="agent-name">AI 助手</span>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 右侧用户区域 - 仅在桌面版显示 -->
|
||||
<div class="user-area">
|
||||
<!-- 未登录状态显示登录/注册链接 -->
|
||||
<template v-if="!isAuthenticated">
|
||||
<!-- 右侧对话区域 -->
|
||||
<main class="chat-container">
|
||||
<div class="chat-content">
|
||||
<RouterView />
|
||||
</div>
|
||||
|
||||
<!-- 用户信息区域 -->
|
||||
<div class="user-section" v-if="isAuthenticated">
|
||||
<div class="user-info-box" @click="toggleUserMenu">
|
||||
<div class="user-avatar">
|
||||
<span>{{ userInfo?.nickname?.charAt(0) || 'U' }}</span>
|
||||
</div>
|
||||
<span class="user-nickname">{{ userInfo?.nickname }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 用户菜单 -->
|
||||
<div v-if="showUserMenu" class="user-menu">
|
||||
<button class="menu-item" @click="handleLogout">退出登录</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="user-section">
|
||||
<div class="auth-buttons">
|
||||
<RouterLink to="/login" class="auth-link">登录</RouterLink>
|
||||
<RouterLink to="/register" class="auth-link register-link">注册</RouterLink>
|
||||
</template>
|
||||
|
||||
<!-- 已登录状态显示用户信息和退出按钮 -->
|
||||
<template v-else>
|
||||
<div class="user-menu">
|
||||
<div class="user-info">
|
||||
<span class="user-nickname">{{ userInfo?.nickname }}</span>
|
||||
<span class="user-level" :class="userLevelClass">{{ userLevelName }}</span>
|
||||
</div>
|
||||
<button class="logout-button" @click="handleLogout">退出</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 汉堡菜单按钮 -->
|
||||
<button class="mobile-menu-toggle" @click="toggleMobileMenu" aria-label="菜单">
|
||||
<span class="bar" :class="{ 'bar-1-active': mobileMenuOpen }"></span>
|
||||
<span class="bar" :class="{ 'bar-2-active': mobileMenuOpen }"></span>
|
||||
<span class="bar" :class="{ 'bar-3-active': mobileMenuOpen }"></span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 移动菜单 -->
|
||||
<div class="mobile-menu" :class="{ 'mobile-menu-open': mobileMenuOpen }">
|
||||
<nav class="mobile-nav">
|
||||
<RouterLink to="/" class="mobile-nav-link" @click="closeMobileMenu">首页</RouterLink>
|
||||
<RouterLink to="/ai-agent" class="mobile-nav-link" @click="closeMobileMenu"
|
||||
>AI Agent</RouterLink
|
||||
>
|
||||
<RouterLink to="/ai-feed" class="mobile-nav-link" @click="closeMobileMenu"
|
||||
>AI分析</RouterLink
|
||||
>
|
||||
<!-- <RouterLink to="/ai-agent" class="mobile-nav-link" @click="closeMobileMenu">AI Agent</RouterLink> -->
|
||||
<!-- <RouterLink to="/tools" class="mobile-nav-link" @click="closeMobileMenu">工具集合</RouterLink> -->
|
||||
</nav>
|
||||
|
||||
<div class="mobile-user-area">
|
||||
<!-- 未登录状态显示登录/注册链接 -->
|
||||
<template v-if="!isAuthenticated">
|
||||
<RouterLink to="/login" class="mobile-auth-link" @click="closeMobileMenu"
|
||||
>登录</RouterLink
|
||||
>
|
||||
<RouterLink
|
||||
to="/register"
|
||||
class="mobile-auth-link mobile-register-link"
|
||||
@click="closeMobileMenu"
|
||||
>注册</RouterLink
|
||||
>
|
||||
</template>
|
||||
|
||||
<!-- 已登录状态显示用户信息和退出按钮 -->
|
||||
<template v-else>
|
||||
<div class="mobile-user-info">
|
||||
<span class="mobile-user-nickname">{{ userInfo?.nickname }}</span>
|
||||
<span class="user-level mobile-user-level" :class="userLevelClass">{{
|
||||
userLevelName
|
||||
}}</span>
|
||||
</div>
|
||||
<button class="mobile-logout-button" @click="handleLogout">退出</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 遮罩层 - 仅在小屏幕上显示 -->
|
||||
<div v-if="mobileMenuOpen" class="mobile-menu-overlay" @click="closeMobileMenu"></div>
|
||||
|
||||
<main class="app-content">
|
||||
<div class="content-container">
|
||||
<RouterView />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
@ -151,33 +93,31 @@ const handleLogout = () => {
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--color-bg-primary: #000000;
|
||||
--color-bg-secondary: #111111;
|
||||
--color-bg-elevated: #1a1a1a;
|
||||
--color-bg-card: #0a0a0a;
|
||||
--color-bg-primary: #343541;
|
||||
--color-bg-secondary: #202123;
|
||||
--color-bg-elevated: #2a2b32;
|
||||
--color-bg-card: #444654;
|
||||
|
||||
--color-text-primary: rgba(255, 255, 255, 1);
|
||||
--color-text-secondary: rgba(255, 255, 255, 0.7);
|
||||
--color-text-tertiary: rgba(255, 255, 255, 0.5);
|
||||
--color-text-disabled: rgba(255, 255, 255, 0.3);
|
||||
--color-text-primary: #ececf1;
|
||||
--color-text-secondary: #9fa6b1;
|
||||
--color-text-tertiary: #565869;
|
||||
--color-text-disabled: #6b7280;
|
||||
|
||||
--color-divider: rgba(255, 255, 255, 0.1);
|
||||
--color-border: rgba(255, 255, 255, 0.15);
|
||||
--color-border-hover: rgba(255, 255, 255, 0.25);
|
||||
--color-border: rgba(255, 255, 255, 0.1);
|
||||
--color-border-hover: rgba(255, 255, 255, 0.2);
|
||||
|
||||
--color-accent: rgba(255, 255, 255, 0.9);
|
||||
--color-accent-hover: rgba(255, 255, 255, 1);
|
||||
--color-accent-light: rgba(255, 255, 255, 0.1);
|
||||
--color-accent: #66a3ff;
|
||||
--color-accent-hover: #4d8fff;
|
||||
--color-accent-light: rgba(102, 163, 255, 0.1);
|
||||
|
||||
--font-weight-light: 300;
|
||||
--font-weight-regular: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-bold: 700;
|
||||
--font-weight-bold: 600;
|
||||
|
||||
--header-height: 70px;
|
||||
--border-radius: 8px;
|
||||
--max-content-width: 1280px;
|
||||
--content-padding: 1rem;
|
||||
--border-radius: 0.5rem;
|
||||
--sidebar-width: 260px;
|
||||
}
|
||||
|
||||
* {
|
||||
@ -190,9 +130,10 @@ html,
|
||||
body,
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -200,418 +141,226 @@ body {
|
||||
background-color: var(--color-bg-primary);
|
||||
color: var(--color-text-primary);
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
font-weight: var(--font-weight-regular);
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
/* 左侧栏样式 */
|
||||
.sidebar {
|
||||
width: var(--sidebar-width);
|
||||
height: 100vh;
|
||||
background-color: var(--color-bg-secondary);
|
||||
box-shadow: 0 1px 0 var(--color-divider);
|
||||
height: var(--header-height);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
backdrop-filter: blur(8px);
|
||||
width: 100vw;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-right: 1px solid var(--color-divider);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
width: 100%;
|
||||
max-width: var(--max-content-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--content-padding);
|
||||
.sidebar-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.8rem;
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-text-primary);
|
||||
letter-spacing: 0.5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.logo-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
color: var(--color-text-primary);
|
||||
text-decoration: none;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.logo-link:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* 用户区域样式 */
|
||||
.user-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.auth-link {
|
||||
color: var(--color-text-secondary);
|
||||
text-decoration: none;
|
||||
font-weight: var(--font-weight-medium);
|
||||
transition: all 0.2s ease;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.auth-link:hover {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.register-link {
|
||||
background-color: #3355ff;
|
||||
color: white;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.register-link:hover {
|
||||
background-color: #2244ee;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.user-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-nickname {
|
||||
font-weight: 500;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.logout-button {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-secondary);
|
||||
padding: 0.3rem 0.8rem;
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.logout-button:hover {
|
||||
background-color: rgba(255, 77, 77, 0.1);
|
||||
color: #ff4d4d;
|
||||
border-color: rgba(255, 77, 77, 0.3);
|
||||
}
|
||||
|
||||
/* 移动菜单按钮 */
|
||||
.mobile-menu-toggle {
|
||||
display: none;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 110;
|
||||
}
|
||||
|
||||
.mobile-menu-toggle:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.bar {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
margin: 3px auto;
|
||||
background-color: var(--color-text-primary);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* 汉堡菜单动画 */
|
||||
.bar-1-active {
|
||||
transform: rotate(-45deg) translate(-5px, 5px);
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.bar-2-active {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
|
||||
.bar-3-active {
|
||||
transform: rotate(45deg) translate(-5px, -5px);
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
/* 移动菜单 */
|
||||
.mobile-menu {
|
||||
position: fixed;
|
||||
top: var(--header-height);
|
||||
right: -250px;
|
||||
width: 250px;
|
||||
height: calc(100vh - var(--header-height));
|
||||
background-color: var(--color-bg-elevated);
|
||||
z-index: 100;
|
||||
transition: right 0.3s ease;
|
||||
box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.3);
|
||||
border-left: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mobile-menu-open {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mobile-nav-link {
|
||||
padding: 1rem 1.5rem;
|
||||
color: var(--color-text-secondary);
|
||||
text-decoration: none;
|
||||
font-weight: var(--font-weight-medium);
|
||||
transition: all 0.2s ease;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
/* 网站标题样式 */
|
||||
.site-title {
|
||||
padding: 2rem 1.5rem;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid var(--color-divider);
|
||||
}
|
||||
|
||||
.mobile-nav-link:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.mobile-nav-link.router-link-active {
|
||||
color: var(--color-text-primary);
|
||||
font-weight: var(--font-weight-bold);
|
||||
border-left: 3px solid #3355ff;
|
||||
}
|
||||
|
||||
.mobile-user-area {
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.mobile-auth-link {
|
||||
padding: 0.8rem 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: var(--color-text-secondary);
|
||||
text-decoration: none;
|
||||
font-weight: var(--font-weight-medium);
|
||||
border-radius: var(--border-radius);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.mobile-auth-link:hover {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.mobile-register-link {
|
||||
background-color: #3355ff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mobile-register-link:hover {
|
||||
background-color: #2244ee;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mobile-user-info {
|
||||
padding: 0.5rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mobile-user-nickname {
|
||||
font-weight: 500;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.mobile-logout-button {
|
||||
width: 100%;
|
||||
padding: 0.8rem 0;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.mobile-logout-button:hover {
|
||||
background-color: rgba(255, 77, 77, 0.1);
|
||||
color: #ff4d4d;
|
||||
border-color: rgba(255, 77, 77, 0.3);
|
||||
}
|
||||
|
||||
.mobile-menu-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: var(--header-height);
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
z-index: 90;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.app-content {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
width: 100%;
|
||||
max-width: var(--max-content-width);
|
||||
padding: 0 var(--content-padding);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 移除 footer 相关样式 */
|
||||
.app-footer,
|
||||
.footer-content,
|
||||
.footer-links,
|
||||
.footer-link,
|
||||
.discord-icon-footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1280px) {
|
||||
:root {
|
||||
--content-padding: 2rem;
|
||||
}
|
||||
|
||||
.content-container,
|
||||
.header-content {
|
||||
width: 100%;
|
||||
max-width: var(--max-content-width);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
:root {
|
||||
--content-padding: 1rem;
|
||||
--header-height: 60px;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
height: var(--header-height);
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.app-content {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
:root {
|
||||
--header-height: 56px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.mobile-menu-toggle {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.user-area {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-menu-overlay {
|
||||
.title-text {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, #66a3ff 0%, #3355ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-fill-color: transparent;
|
||||
font-family:
|
||||
'SF Pro Display',
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
sans-serif;
|
||||
letter-spacing: -0.5px;
|
||||
margin-bottom: 0.3rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.subtitle-text {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: 400;
|
||||
font-family:
|
||||
'SF Pro Display',
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
sans-serif;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Agent 列表样式 */
|
||||
.agent-list {
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.agent-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
color: var(--color-text-primary);
|
||||
text-decoration: none;
|
||||
border-radius: var(--border-radius);
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.agent-item:hover {
|
||||
background-color: var(--color-bg-elevated);
|
||||
}
|
||||
|
||||
.agent-item.router-link-active {
|
||||
background-color: var(--color-bg-elevated);
|
||||
}
|
||||
|
||||
.agent-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.agent-name {
|
||||
font-size: 0.95rem;
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
/* 修改用户信息区域样式 */
|
||||
.user-section {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: var(--sidebar-width);
|
||||
background-color: var(--color-bg-elevated);
|
||||
border-radius: 0;
|
||||
padding: 1rem;
|
||||
z-index: 100;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border-top: 1px solid var(--color-divider);
|
||||
}
|
||||
|
||||
.user-section:hover {
|
||||
background-color: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
.user-info-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 50%;
|
||||
background: #3355ff33;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1rem;
|
||||
color: #3355ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.user-nickname {
|
||||
font-size: 0.95rem;
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* 用户菜单样式 */
|
||||
.user-menu {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
right: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
background-color: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius);
|
||||
min-width: 120px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 0.9rem;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background-color: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
/* 移动端适配 */
|
||||
@media (max-width: 768px) {
|
||||
.user-section {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.subtitle-text {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 右侧对话区域样式 */
|
||||
.chat-container {
|
||||
flex: 1;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
background-color: var(--color-bg-primary);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chat-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 全局按钮样式 */
|
||||
@ -661,41 +410,27 @@ body {
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 用户等级标签样式 */
|
||||
.user-level {
|
||||
display: inline-block;
|
||||
font-size: 0.75rem;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
margin-left: 0.5rem;
|
||||
font-weight: var(--font-weight-medium);
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
:root {
|
||||
--sidebar-width: 100%;
|
||||
}
|
||||
|
||||
.user-level-normal {
|
||||
background-color: #555555;
|
||||
color: #ffffff;
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.user-level-vip {
|
||||
background-color: #ff9800;
|
||||
color: #000000;
|
||||
.sidebar-open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.user-level-super-vip {
|
||||
background-color: #f44336;
|
||||
color: #ffffff;
|
||||
background-image: linear-gradient(45deg, #f44336, #ff9800);
|
||||
}
|
||||
|
||||
.mobile-user-level {
|
||||
margin-top: 0.25rem;
|
||||
.chat-container {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.mobile-user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -4,16 +4,7 @@ import { useUserStore } from '../stores/user'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const router = useRouter()
|
||||
const isAuthenticated = computed(() => userStore.isAuthenticated)
|
||||
|
||||
const goToAIAgent = () => {
|
||||
router.push('/ai-agent')
|
||||
}
|
||||
|
||||
const goToAIFeed = () => {
|
||||
router.push('/ai-feed')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -23,61 +14,8 @@ const goToAIFeed = () => {
|
||||
<h1 class="hero-title"><span class="accent">AI Agent for Web3</span></h1>
|
||||
<p class="hero-subtitle">立刻加入，开启 Web3 + AI 新时代</p>
|
||||
<div class="hero-actions">
|
||||
<!-- 已登录状态显示两个功能入口 -->
|
||||
<template v-if="isAuthenticated">
|
||||
<div class="feature-buttons">
|
||||
<button @click="goToAIAgent" class="feature-button">
|
||||
<div class="feature-icon">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M12 2a10 10 0 1 0 10 10H12V2z"></path>
|
||||
<path d="M12 2a10 10 0 0 1 10 10h-10V2z"></path>
|
||||
<path d="M12 22v-10h10"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="feature-content">
|
||||
<h3>AI Agent</h3>
|
||||
<p>VIP专属：智能 AI 助手</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button @click="goToAIFeed" class="feature-button">
|
||||
<div class="feature-icon">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<line x1="12" y1="20" x2="12" y2="10"></line>
|
||||
<line x1="18" y1="20" x2="18" y2="4"></line>
|
||||
<line x1="6" y1="20" x2="6" y2="16"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="feature-content">
|
||||
<h3>AI行情分析</h3>
|
||||
<p>专业市场行情分析，深度洞察趋势</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 未登录状态显示登录和注册按钮 -->
|
||||
<template v-else>
|
||||
<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>
|
||||
@ -96,41 +34,25 @@ const goToAIFeed = () => {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- <section class="stats-section">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card card">
|
||||
<div class="stat-value">1000+</div>
|
||||
<div class="stat-label">会员人数</div>
|
||||
</div>
|
||||
<div class="stat-card card">
|
||||
<div class="stat-value">5000+</div>
|
||||
<div class="stat-label">Agent服务次数</div>
|
||||
</div>
|
||||
<div class="stat-card card">
|
||||
<div class="stat-value">99.9%</div>
|
||||
<div class="stat-label">正常运行时间</div>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.home-view {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
margin-bottom: 4rem;
|
||||
background-color: var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.hero-section::before {
|
||||
@ -140,26 +62,26 @@ const goToAIFeed = () => {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 50%);
|
||||
background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.05), transparent 70%);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 3rem;
|
||||
font-size: 3.5rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.2;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
background: linear-gradient(135deg, var(--color-accent) 0%, #3355ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.accent {
|
||||
color: var(--color-accent);
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
@ -174,77 +96,25 @@ const goToAIFeed = () => {
|
||||
background-color: var(--color-accent-light);
|
||||
z-index: -1;
|
||||
border-radius: 4px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1rem;
|
||||
font-size: 1.2rem;
|
||||
color: var(--color-text-secondary);
|
||||
max-width: 700px;
|
||||
margin: 0 auto 2.5rem;
|
||||
margin: 0 auto 3rem;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.feature-buttons {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.feature-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: var(--color-bg-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
width: 280px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-button:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
||||
border-color: #3355ff;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: rgba(51, 85, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
margin-bottom: 1rem;
|
||||
color: #3355ff;
|
||||
}
|
||||
|
||||
.feature-content h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.feature-content p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin: 0;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.discord-link {
|
||||
margin-top: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.discord-text {
|
||||
@ -303,32 +173,32 @@ const goToAIFeed = () => {
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-title {
|
||||
font-size: 2.2rem;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.feature-buttons {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.feature-button {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
.hero-section {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero-section {
|
||||
padding: 3rem 1rem;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user