kris/ForcePilot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(用户界面): 改进登录按钮样式并优化首页视觉效果

Browse Source
This commit is contained in:
Wenjie Zhang 2025-08-04 18:31:25 +08:00
parent e2d0b17e5a
commit ff15fd1389
2 changed files with 146 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/src/components/UserInfoComponent.vue
View File

@ -23,9 +23,12 @@
</a-menu>
</template>
</a-dropdown>
<a-button v-else type="link" @click="goToLogin">
<UserRoundCheck /> 登录
<a-button v-else-if="showButton" type="primary" @click="goToLogin">
登录
</a-button>
<div v-else class="login-icon" @click="goToLogin">
<UserRoundCheck />
</div>
</div>
</template>
@ -44,6 +47,10 @@ const props = defineProps({
showRole: {
type: Boolean,
default: false
},
showButton: {
type: Boolean,
default: false
}
})
@ -161,4 +168,19 @@ const goToLogin = () => {
font-size: 12px;
color: rgba(0, 0, 0, 0.45);
}
.login-icon {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 50%;
transition: background-color 0.3s;
&:hover {
background-color: rgba(0, 0, 0, 0.05);
}
}
</style>

157
web/src/views/HomeView.vue
View File

@ -1,18 +1,27 @@
<template>
<div class="home-container">
<div class="background-elements">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
<div class="circle circle-3"></div>
<div class="circle circle-4"></div>
</div>
<div class="hero-section">
<div class="glass-header">
<div class="logo">
<img :src="infoStore.organization.logo" :alt="infoStore.organization.name" class="logo-img" />
<span style="font-size: 1.3rem; font-weight: bold;">{{ infoStore.organization.name }}</span>
</div>
<div class="github-link">
<a href="https://github.com/xerrors/Yuxi-Know" target="_blank">
<svg height="24" width="24" viewBox="0 0 16 16" version="1.1">
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>
<span class="stars-count">{{ isLoadingStars ? '加载中...' : githubStars }} ⭐</span>
</a>
<div class="header-actions">
<div class="github-link">
<a href="https://github.com/xerrors/Yuxi-Know" target="_blank">
<svg height="24" width="24" viewBox="0 0 16 16" version="1.1">
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>
<span class="stars-count">{{ isLoadingStars ? '加载中...' : githubStars }} ⭐</span>
</a>
</div>
<UserInfoComponent :show-button="true" />
</div>
</div>
@ -27,22 +36,6 @@
<button class="start-button" @click="goToChat">开始对话</button>
</div>
</div>
<div class="preview-section">
<div class="preview-container">
<img src="/home.png" alt="系统预览" />
<div class="preview-overlay">
<div class="overlay-content">
<h3>强大的问答能力</h3>
<p>{{ infoStore.branding.description }}</p>
</div>
</div>
</div>
</div>
<footer>
<p>{{ infoStore.footer.copyright }}</p>
</footer>
</div>
</template>
@ -52,6 +45,7 @@ import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { useInfoStore } from '@/stores/info'
import { chatApi } from '@/apis/auth_api'
import UserInfoComponent from '@/components/UserInfoComponent.vue'
const router = useRouter()
const userStore = useUserStore()
@ -126,9 +120,24 @@ onMounted(async () => {
display: flex;
flex-direction: column;
color: #333;
background: linear-gradient(135deg, #f5f7fa, #e2e8f0, #f0f4f8, #eef2f7);
background: linear-gradient(135deg, #f0f7ff 0%, #f8fcff 50%, #f5faff 100%);
background-size: 400% 400%;
animation: gradientBackground 15s ease infinite;
animation: gradientBackground 20s ease infinite;
position: relative;
overflow: hidden;
}
.home-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 15% 25%, rgba(161, 196, 253, 0.08) 0%, transparent 25%),
radial-gradient(circle at 85% 75%, rgba(194, 233, 251, 0.08) 0%, transparent 25%),
radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 30%);
z-index: 0;
}
@keyframes gradientBackground {
@ -149,14 +158,86 @@ onMounted(async () => {
align-items: center;
width: 100%;
padding: 1.2rem 2rem;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.03);
}
.header-actions {
display: flex;
align-items: center;
gap: 1rem;
}
.background-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
.circle {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
animation: float 18s infinite ease-in-out;
box-shadow: 0 0 30px rgba(161, 196, 253, 0.1);
}
.circle-1 {
width: 150px;
height: 150px;
top: 10%;
left: 5%;
animation-delay: 0s;
}
.circle-2 {
width: 100px;
height: 100px;
top: 70%;
left: 20%;
animation-delay: -5s;
}
.circle-3 {
width: 80px;
height: 80px;
top: 20%;
right: 10%;
animation-delay: -10s;
}
.circle-4 {
width: 120px;
height: 120px;
bottom: 15%;
right: 15%;
animation-delay: -7s;
}
@keyframes float {
0%, 100% {
transform: translate(0, 0);
}
25% {
transform: translate(20px, 20px);
}
50% {
transform: translate(40px, 0);
}
75% {
transform: translate(20px, -20px);
}
}
.logo {
@ -179,13 +260,14 @@ onMounted(async () => {
color: #333;
padding: 0.6rem 1.2rem;
border-radius: 2rem;
background-color: rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.25);
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.3);
&:hover {
background-color: rgba(255, 255, 255, 0.6);
background-color: rgba(255, 255, 255, 0.4);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
svg {
@ -199,12 +281,15 @@ onMounted(async () => {
.hero-section {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 2rem;
position: relative;
z-index: 1;
}
.hero-content {
@ -215,7 +300,7 @@ onMounted(async () => {
font-size: 4rem;
font-weight: 700;
margin-bottom: 1.5rem;
background: linear-gradient(45deg, #333, #666);
background: linear-gradient(45deg, #333, #555);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
@ -241,9 +326,11 @@ onMounted(async () => {
span {
padding: 0.5rem 1rem;
background-color: rgba(255, 255, 255, 0.6);
background-color: rgba(255, 255, 255, 0.3);
border-radius: 2rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(10px);
}
}
@ -257,11 +344,11 @@ onMounted(async () => {
border-radius: 3rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
&:hover {
transform: translateY(-3px);
box-shadow: 0 7px 20px rgba(0, 0, 0, 0.15);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
background: linear-gradient(135deg, var(--main-color), var(--main-700));
}