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

style: 登录样式更新

Browse Source
This commit is contained in:
Wenjie Zhang 2025-10-15 22:24:33 +08:00
parent 5d8101a502
commit 8514f18985
3 changed files with 324 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
server/routers/system_router.py
View File

@ -114,7 +114,7 @@ def get_default_info_config():
"description": "结合知识库与知识图谱，提供更准确、更全面的回答", "description": "结合知识库与知识图谱，提供更准确、更全面的回答",
}, },
"features": ["📚 灵活知识库", "🕸️ 知识图谱集成", "🤖 多模型支持"], "features": ["📚 灵活知识库", "🕸️ 知识图谱集成", "🤖 多模型支持"],
"footer": {"copyright": "© 江南语析 2025 [WIP] v0.2.0"}, "footer": {"copyright": "© 江南语析 2025 [WIP] v0.3.0"},
} }

2
src/config/static/info.template.yaml
View File

@ -23,4 +23,4 @@ features:
# 页脚信息 # 页脚信息
footer: footer:
copyright: "© 江南语析 2025 v0.2.0" copyright: "© 江南语析 2025 v0.3.0"

237
web/src/views/LoginView.vue
View File

@ -26,9 +26,9 @@
<img :src="loginBgImage" alt="登录背景" class="login-bg-image" /> <img :src="loginBgImage" alt="登录背景" class="login-bg-image" />
<div class="image-overlay"> <div class="image-overlay">
<div class="brand-info"> <div class="brand-info">
<h1 class="brand-title">{{ infoStore.branding?.name || 'Yuxi-Know' }}</h1> <h1 class="brand-title">{{ brandName }}</h1>
<p class="brand-subtitle">{{ infoStore.branding?.subtitle || '大模型驱动的知识库管理工具' }}</p> <p class="brand-subtitle">{{ brandSubtitle }}</p>
<p class="brand-description">{{ infoStore.branding?.description || '结合知识库与知识图谱，提供更准确、更全面的回答' }}</p> <p class="brand-description">{{ brandDescription }}</p>
</div> </div>
<div class="brand-copyright"> <div class="brand-copyright">
<p>{{ infoStore.footer?.copyright || 'Yuxi-Know' }}. {{ infoStore.branding?.copyright || '版权所有' }}</p> <p>{{ infoStore.footer?.copyright || 'Yuxi-Know' }}. {{ infoStore.branding?.copyright || '版权所有' }}</p>
@ -39,19 +39,16 @@
<!-- 右侧登录表单区域 --> <!-- 右侧登录表单区域 -->
<div class="login-form-section"> <div class="login-form-section">
<div class="login-container"> <div class="login-container">
<div class="login-logo"> <header class="login-header">
<h1>欢迎登录 {{ infoStore.branding.name }}</h1> <p class="login-title">欢迎登录</p>
</div> <h1 class="login-brand">{{ brandName }}</h1>
<p v-if="!isFirstRun && brandSubtitle" class="login-subtitle">{{ brandSubtitle }}</p>
</header>
<div class="login-content" :class="{ 'is-initializing': isFirstRun }">
<!-- 初始化管理员表单 --> <!-- 初始化管理员表单 -->
<div v-if="isFirstRun" class="login-form"> <div v-if="isFirstRun" class="login-form login-form--init">
<h2>系统初始化，请创建超级管理员账户</h2> <h2>系统初始化，请创建超级管理员</h2>
<div class="init-tips">
<p>• 请输入用户ID（仅支持字母、数字和下划线）</p>
<p>• 手机号可选填写，用于后续登录</p>
<p>• 请妥善保管管理员账户信息</p>
</div>
<a-form <a-form
:model="adminForm" :model="adminForm"
@finish="handleInitialize" @finish="handleInitialize"
@ -210,6 +207,7 @@
<div v-if="errorMessage" class="error-message"> <div v-if="errorMessage" class="error-message">
{{ errorMessage }} {{ errorMessage }}
</div> </div>
</div>
<!-- 页脚 --> <!-- 页脚 -->
<div class="login-footer"> <div class="login-footer">
@ -224,7 +222,7 @@
</template> </template>
<script setup> <script setup>
import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue'; import { ref, reactive, onMounted, onUnmounted, computed } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user'; import { useUserStore } from '@/stores/user';
import { useInfoStore } from '@/stores/info'; import { useInfoStore } from '@/stores/info';
@ -237,10 +235,25 @@ const userStore = useUserStore();
const infoStore = useInfoStore(); const infoStore = useInfoStore();
const agentStore = useAgentStore(); const agentStore = useAgentStore();
// 从infoStore获取登录背景图片 // 品牌展示数据
const loginBgImage = computed(() => { const loginBgImage = computed(() => {
return infoStore.organization?.login_bg || '/login-bg.jpg'; return infoStore.organization?.login_bg || '/login-bg.jpg';
}); });
const brandName = computed(() => {
const rawName = infoStore.branding?.name ?? '';
const trimmed = rawName.trim();
return trimmed || 'Yuxi-Know';
});
const brandSubtitle = computed(() => {
const rawSubtitle = infoStore.branding?.subtitle ?? '';
const trimmed = rawSubtitle.trim();
return trimmed || '大模型驱动的知识库管理工具';
});
const brandDescription = computed(() => {
const rawDescription = infoStore.branding?.description ?? '';
const trimmed = rawDescription.trim();
return trimmed || '结合知识库与知识图谱，提供更准确、更全面的回答';
});
// 状态 // 状态
const isFirstRun = ref(false); const isFirstRun = ref(false);
@ -531,7 +544,7 @@ onUnmounted(() => {
} }
.back-home-btn { .back-home-btn {
color: #666; color: var(--gray-600);
font-size: 14px; font-size: 14px;
padding: 0 8px; padding: 0 8px;
@ -544,14 +557,16 @@ onUnmounted(() => {
.login-layout { .login-layout {
display: flex; display: flex;
height: 100%; min-height: 100%;
width: 100%; width: 100%;
background: var(--gray-10);
} }
.login-image-section { .login-image-section {
flex: 0 0 55%; flex: 0 0 52%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
max-height: 100vh;
.login-bg-image { .login-bg-image {
width: 100%; width: 100%;
@ -566,41 +581,41 @@ onUnmounted(() => {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.35);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
padding: 80px 60px 40px 60px; padding: 72px 64px 36px;
} }
.brand-info { .brand-info {
text-align: left; text-align: left;
color: white; color: white;
max-width: 600px; max-width: 520px;
.brand-title { .brand-title {
font-size: 64px; font-size: 52px;
font-weight: 800; font-weight: 700;
margin-bottom: 24px; margin-bottom: 20px;
text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4); text-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
letter-spacing: -1px; letter-spacing: -0.5px;
} }
.brand-subtitle { .brand-subtitle {
font-size: 28px; font-size: 24px;
font-weight: 500; font-weight: 500;
margin-bottom: 32px; margin-bottom: 24px;
opacity: 0.95; opacity: 0.92;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
line-height: 1.3; line-height: 1.4;
} }
.brand-description { .brand-description {
font-size: 20px; font-size: 18px;
line-height: 1.6; line-height: 1.6;
margin-bottom: 0; margin: 0;
opacity: 0.85; opacity: 0.82;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
} }
} }
@ -619,54 +634,80 @@ onUnmounted(() => {
.login-form-section { .login-form-section {
flex: 1; flex: 1;
min-width: 400px; min-width: 420px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: #ffffff; padding: 64px 72px;
padding: 40px; background: var(--main-20);
} }
.login-container { .login-container {
width: 100%; width: 100%;
max-width: 420px; max-width: 460px;
padding: 0; padding: 40px;
background: transparent; background: var(--gray-0);
border-radius: 0; border-radius: 24px;
box-shadow: none; border: 1px solid var(--gray-150);
backdrop-filter: none; box-shadow: 0 18px 36px rgba(66, 66, 66, 0.05);
border: none; display: flex;
flex-direction: column;
gap: 32px;
} }
.login-logo { .login-header {
text-align: center; display: flex;
margin-bottom: 30px; flex-direction: column;
gap: 8px;
text-align: left;
}
img { .login-title {
height: 70px; margin: 0;
margin-bottom: 16px; font-size: 14px;
} font-weight: 600;
letter-spacing: 0.08em;
color: var(--gray-600);
text-transform: uppercase;
}
h1 { .login-brand {
font-size: 28px; margin: 0;
font-size: 30px;
font-weight: 600; font-weight: 600;
color: var(--main-color); color: var(--main-color);
line-height: 1.25;
}
.login-subtitle {
margin: 0; margin: 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); font-size: 16px;
color: var(--gray-600);
line-height: 1.6;
}
.login-content {
display: flex;
flex-direction: column;
gap: 24px;
&.is-initializing {
gap: 28px;
} }
} }
.login-form { .login-form {
h2 { display: flex;
text-align: center; flex-direction: column;
margin-bottom: 30px; gap: 12px;
font-size: 22px; width: 100%;
font-weight: 500;
color: #333; :deep(.ant-form) {
width: 100%;
} }
:deep(.ant-form-item) { :deep(.ant-form-item) {
margin-bottom: 20px; margin-bottom: 18px;
} }
:deep(.ant-input-affix-wrapper) { :deep(.ant-input-affix-wrapper) {
@ -681,35 +722,52 @@ onUnmounted(() => {
} }
} }
.login-form--init {
padding: 24px;
border-radius: 18px;
background: var(--main-30);
border: 1px solid var(--main-200);
h2 {
margin-bottom: 16px;
font-size: 22px;
font-weight: 600;
color: var(--main-color);
text-align: left;
}
}
.login-options { .login-options {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 8px; margin-bottom: 8px;
gap: 12px;
flex-wrap: wrap;
.forgot-password { .forgot-password {
color: #1890ff; color: var(--main-color);
font-size: 14px; font-size: 14px;
&:hover { &:hover {
color: #40a9ff; color: var(--main-bright);
} }
} }
} }
.init-tips { .init-tips {
background: #f6ffed; background: var(--main-20);
border: 1px solid #b7eb8f; border: 1px solid var(--main-200);
border-radius: 6px; border-radius: 12px;
padding: 12px 16px; padding: 16px 18px;
margin-bottom: 20px; margin-bottom: 20px;
text-align: left; text-align: left;
p { p {
margin: 4px 0; margin: 4px 0;
font-size: 13px; font-size: 13px;
color: #52c41a; color: var(--main-700);
line-height: 1.4; line-height: 1.45;
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
@ -724,10 +782,10 @@ onUnmounted(() => {
.error-message { .error-message {
margin-top: 16px; margin-top: 16px;
padding: 10px 12px; padding: 10px 12px;
background-color: #fff2f0; background-color: var(--stats-error-bg);
border: 1px solid #ffccc7; border: 1px solid rgba(220, 38, 38, 0.25);
border-radius: 4px; border-radius: 8px;
color: #ff4d4f; color: var(--stats-error-color);
font-size: 14px; font-size: 14px;
} }
@ -745,7 +803,7 @@ onUnmounted(() => {
top: 50%; top: 50%;
width: calc(50% - 60px); width: calc(50% - 60px);
height: 1px; height: 1px;
background-color: #e8e8e8; background-color: var(--gray-200);
} }
&::before { &::before {
@ -759,9 +817,9 @@ onUnmounted(() => {
span { span {
display: inline-block; display: inline-block;
padding: 0 12px; padding: 0 12px;
background-color: #fff; background-color: var(--gray-0);
position: relative; position: relative;
color: #999; color: var(--gray-600);
font-size: 14px; font-size: 14px;
} }
} }
@ -775,26 +833,33 @@ onUnmounted(() => {
margin: 0 12px; margin: 0 12px;
width: 42px; width: 42px;
height: 42px; height: 42px;
color: #666; color: var(--gray-600);
border: 1px solid var(--gray-300); border: 1px solid var(--gray-300);
transition: all 0.3s; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
&:hover { &:hover {
color: var(--main-color); color: var(--main-color);
border-color: var(--main-color); border-color: var(--main-color);
background-color: var(--main-20);
} }
} }
} }
} }
.login-footer { .login-footer {
margin-top: 24px; margin-top: 16px;
text-align: center; padding-top: 16px;
border-top: 1px solid var(--gray-150);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 16px;
font-size: 13px; font-size: 13px;
a { a {
color: #666; color: var(--gray-600);
margin: 0 8px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
@ -804,7 +869,7 @@ onUnmounted(() => {
} }
.server-status-alert { .server-status-alert {
position: fixed; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;