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

style(ui): 统一使用新的颜色变量并优化侧边栏样式

Browse Source 
重构颜色变量定义，移除旧变量并使用新的 --main-* 和 --gray-* 变量
优化聊天侧边栏的分组显示和交互样式
调整多个组件的边框和背景色以匹配新颜色方案
This commit is contained in:
Wenjie Zhang 2025-07-30 11:00:50 +08:00
parent 612bd9f7b0
commit 1b3a5fe0fd
12 changed files with 308 additions and 270 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
web/src/assets/css/base.css
View File

@ -2,48 +2,45 @@
/* color palette from <https://github.com/vuejs/theme> */ /* color palette from <https://github.com/vuejs/theme> */
/* https://material-foundation.github.io/material-theme-builder/ */ /* https://material-foundation.github.io/material-theme-builder/ */
:root { :root {
--main-1000: #011A26; --main-1000: #01151f; /* 更深沉的深蓝黑 */
--main-900: #034A51; --main-900: #023944; /* 深海蓝 */
--main-800: #034F69; --main-800: #035065; /* 深蓝绿 */
--main-700: #03637F; --main-700: #046a82; /* 增加明度的蓝青色 */
--main-600: #1D7796; --main-600: #24839a; /* 冷色调中略带灰 */
--main-500: #2F86A8; --main-500: #3996ae; /* 平衡且主色调友好 */
--main-400: #5099B9; --main-400: #5faec2; /* 更加柔和的中亮蓝 */
--main-300: #6CADCB; --main-300: #82c3d6; /* 明亮通透，视觉清爽 */
--main-200: #8EC6E1; --main-200: #a3d8e8; /* 比原先更清澈淡蓝 */
--main-100: #ADE0F7; --main-100: #c4eaf5; /* 接近原色，但稍微柔和 */
--main-50: #CFF5FF; --main-50: #e1f6fb; /* 极浅天蓝，适合背景过渡 */
--main-25: #E8FAFF; --main-40: #eaf3f5; /* 淡灰蓝调 */
--main-10: #F8FDFF; --main-30: #f2fbfd; /* 几近白的蓝调提示 */
--main-5: #FAFCFD; --main-20: #f5f9fa; /* 比原配色更均匀些 */
--main-10: #fafcfd;
--main-5: #fcfefe;
--main-1: #fefefe;
--main-0: #ffffff;
--gray-10000: #000000; /* 保持纯黑 */
--gray-2000: #0d0d0d; /* 更精致的暗灰，用于极深背景 */
--gray-1000: #161616; /* 深灰黑，适用于主文本 */
--gray-900: #1f1f1f;
--gray-800: #333333; /* 标准深灰，适合背景 */
--gray-700: #4d4d4d;
--gray-600: #707070; /* 调和中灰，适合次要文本 */
--gray-500: #999999; /* 更柔和的中灰色 */
--gray-400: #bfbfbf;
--gray-300: #d9d9d9; /* 修正了原300/200重复 */
--gray-200: #e6e6e6; /* 稍微加深一点，便于分层 */
--gray-100: #f2f2f2;
--gray-50: #f7f7f7;
--gray-25: #fafafa;
--gray-10: #fcfcfc;
--gray-0: #ffffff;
--gray-10000: #000000;
--gray-2000: #0F0F0F;
--gray-1000: #171717;
--gray-900: #212121;
--gray-800: #424242;
--gray-700: #616161;
--gray-600: #8C8C8C;
--gray-500: #A7A7A7;
--gray-400: #C4C4C4;
--gray-300: #EFEFEF;
--gray-200: #EFEFEF;
--gray-100: #F8F8F8;
--gray-50: #FBFBFB;
--gray-25: #FCFCFC;
--gray-10: #FDFDFD;
--gray-0: #FFFFFF;
--main-color: #016179; --main-color: #016179;
--main-color-dark: #004d5c;
--main-color-text: #104461;
--main-light-1: #0076AB;
--main-light-2: #DAEAED;
--main-light-3: #EDF0F1;
--main-light-4: #F2F5F5;
--main-light-5: #F7FAFB;
--main-light-6: #FAFDFD;
--main-light-7: #FEFFFF;
--secondry-color: #4e616d; --secondry-color: #4e616d;
--error-color: #ba1a1a; --error-color: #ba1a1a;
@ -53,24 +50,3 @@
--min-width: 400px; --min-width: 400px;
} }
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
position: relative;
font-weight: normal;
}
body {
display: flow-root;
min-height: 100vh;
color: var(--gray-900);
line-height: 1.6;
font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans SC', 'Roboto', 'HarmonyOS Sans SC', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

23
web/src/assets/css/main.css
View File

@ -4,6 +4,29 @@
:root { :root {
--header-height: 60px; --header-height: 60px;
--min-width: 450px;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
position: relative;
font-weight: normal;
}
body {
display: flow-root;
min-height: 100vh;
color: var(--gray-900);
line-height: 1.6;
font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans SC', 'Roboto', 'HarmonyOS Sans SC', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
/* layout */ /* layout */

8
web/src/components/AgentChatComponent.vue
View File

@ -1382,7 +1382,7 @@ const mergeMessageChunk = (chunks) => {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1rem; padding: 1rem;
border-bottom: 1px solid var(--main-light-3); border-bottom: 1px solid var(--main-20);
.header__left, .header__right, .header__center { .header__left, .header__right, .header__center {
display: flex; display: flex;
@ -1415,7 +1415,7 @@ const mergeMessageChunk = (chunks) => {
} }
&:hover { &:hover {
background-color: var(--main-light-3); background-color: var(--main-20);
} }
.nav-btn-icon { .nav-btn-icon {
@ -1580,7 +1580,7 @@ const mergeMessageChunk = (chunks) => {
.generating-indicator { .generating-indicator {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.75rem 1rem; padding: 0.5rem 1rem 0.5rem 0.5rem;
background: var(--gray-100); background: var(--gray-100);
border-radius: 12px; border-radius: 12px;
border: 1px solid var(--gray-200); border: 1px solid var(--gray-200);
@ -1615,7 +1615,7 @@ const mergeMessageChunk = (chunks) => {
} }
&:hover { &:hover {
background-color: var(--main-light-3); background-color: var(--main-20);
} }
.nav-btn-icon { .nav-btn-icon {

369
web/src/components/ChatSidebarComponent.vue
View File

@ -10,50 +10,52 @@
</div> </div>
<div class="conversation-list-top"> <div class="conversation-list-top">
<button type="text" @click="createNewChat" class="new-chat-btn"> <button type="text" @click="createNewChat" class="new-chat-btn">
新对话 <MessageSquarePlus size="20" /> 创建新对话
</button> </button>
</div> </div>
<div class="conversation-list"> <div class="conversation-list">
<a-spin v-if="loading" /> <a-spin v-if="loading" />
<template v-else> <template v-else-if="Object.keys(groupedChats).length > 0">
<div <div v-for="(group, groupName) in groupedChats" :key="groupName" class="chat-group">
v-for="chat in chatsList" <div class="chat-group-title">{{ groupName }}</div>
:key="chat.id" <div
class="conversation-item" v-for="chat in group"
:class="{ 'active': currentChatId === chat.id }" :key="chat.id"
@click="selectChat(chat.id)" class="conversation-item"
> :class="{ 'active': currentChatId === chat.id }"
<div class="conversation-info"> @click="selectChat(chat)"
>
<div class="conversation-title">{{ chat.title || '新对话' }}</div> <div class="conversation-title">{{ chat.title || '新对话' }}</div>
<div class="actions-mask"></div>
<div class="conversation-actions">
<a-dropdown :trigger="['click']" @click.stop>
<template #overlay>
<a-menu>
<a-menu-item key="rename" @click.stop="renameChat(chat.id)">
<EditOutlined /> 重命名
</a-menu-item>
<a-menu-item key="delete" @click.stop="deleteChat(chat.id)" v-if="chat.id !== currentChatId">
<DeleteOutlined /> 删除
</a-menu-item>
</a-menu>
</template>
<a-button type="text" class="more-btn" @click.stop>
<MoreOutlined />
</a-button>
</a-dropdown>
</div>
</div> </div>
<div class="conversation-actions">
<a-dropdown :trigger="['click']" @click.stop>
<template #overlay>
<a-menu>
<a-menu-item key="rename" @click.stop="renameChat(chat.id)">
<EditOutlined /> 重命名
</a-menu-item>
<a-menu-item key="delete" @click.stop="deleteChat(chat.id)" v-if="chat.id !== currentChatId">
<DeleteOutlined /> 删除
</a-menu-item>
</a-menu>
</template>
<a-button type="text" class="more-btn" @click.stop>
<MoreOutlined />
</a-button>
</a-dropdown>
</div>
</div>
<div v-if="chatsList.length === 0" class="empty-list">
暂无对话历史
</div> </div>
</template> </template>
<div v-else class="empty-list">
暂无对话历史
</div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, computed, onMounted, watch, h } from 'vue'; import { ref, computed, h } from 'vue';
import { import {
DeleteOutlined, DeleteOutlined,
EditOutlined, EditOutlined,
@ -61,6 +63,12 @@ import {
} from '@ant-design/icons-vue'; } from '@ant-design/icons-vue';
import { message, Modal } from 'ant-design-vue'; import { message, Modal } from 'ant-design-vue';
import { PanelLeftClose, MessageSquarePlus } from 'lucide-vue-next'; import { PanelLeftClose, MessageSquarePlus } from 'lucide-vue-next';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
dayjs.locale('zh-cn');
const props = defineProps({ const props = defineProps({
currentAgentId: { currentAgentId: {
@ -87,72 +95,95 @@ const props = defineProps({
const emit = defineEmits(['create-chat', 'select-chat', 'delete-chat', 'rename-chat', 'toggle-sidebar']); const emit = defineEmits(['create-chat', 'select-chat', 'delete-chat', 'rename-chat', 'toggle-sidebar']);
// 状态变量
const loading = ref(false); const loading = ref(false);
// 创建新对话 const groupedChats = computed(() => {
const groups = {
'今天': [],
'七天内': [],
'三十天内': [],
};
const now = dayjs();
const today = now.startOf('day');
const sevenDaysAgo = now.subtract(7, 'day').startOf('day');
const thirtyDaysAgo = now.subtract(30, 'day').startOf('day');
// Sort chats by creation date, newest first
const sortedChats = [...props.chatsList].sort((a, b) => dayjs(b.create_at).diff(dayjs(a.create_at)));
sortedChats.forEach(chat => {
const chatDate = dayjs(chat.create_at);
if (chatDate.isAfter(today)) {
groups['今天'].push(chat);
} else if (chatDate.isAfter(sevenDaysAgo)) {
groups['七天内'].push(chat);
} else if (chatDate.isAfter(thirtyDaysAgo)) {
groups['三十天内'].push(chat);
} else {
const monthKey = chatDate.format('YYYY-MM');
if (!groups[monthKey]) {
groups[monthKey] = [];
}
groups[monthKey].push(chat);
}
});
// Remove empty groups
for (const key in groups) {
if (groups[key].length === 0) {
delete groups[key];
}
}
return groups;
});
const createNewChat = () => { const createNewChat = () => {
emit('create-chat'); emit('create-chat');
}; };
// 选择对话 const selectChat = (chat) => {
const selectChat = (chatId) => { console.log(chat);
emit('select-chat', chatId); emit('select-chat', chat.id);
}; };
// 删除对话
const deleteChat = (chatId) => { const deleteChat = (chatId) => {
emit('delete-chat', chatId); emit('delete-chat', chatId);
}; };
// 重命名对话
const renameChat = async (chatId) => { const renameChat = async (chatId) => {
try { try {
// 找到当前对话
const chat = props.chatsList.find(c => c.id === chatId); const chat = props.chatsList.find(c => c.id === chatId);
if (!chat) return; if (!chat) return;
// 获取新标题 let newTitle = chat.title;
let newTitle = ''; Modal.confirm({
let modalInstance = null; title: '重命名对话',
content: h('div', { style: { marginTop: '12px' } }, [
await new Promise((resolve, reject) => { h('input', {
modalInstance = Modal.confirm({ value: newTitle,
title: '重命名对话', style: { width: '100%', padding: '4px 8px', border: '1px solid #d9d9d9', borderRadius: '4px' },
content: h('div', {}, [ onInput: (e) => { newTitle = e.target.value; }
h('input', { })
value: chat.title, ]),
style: { width: '100%', marginTop: '10px' }, okText: '确认',
onInput: (e) => { newTitle = e.target.value; } cancelText: '取消',
}) onOk: () => {
]), if (!newTitle.trim()) {
okText: '确认', message.warning('标题不能为空');
cancelText: '取消', return Promise.reject();
onOk: () => {
resolve();
},
onCancel: () => {
reject();
} }
}); emit('rename-chat', { chatId, title: newTitle });
},
onCancel: () => {}
}); });
// 确保有标题
if (!newTitle.trim()) {
message.warning('标题不能为空');
return;
}
// 通知父组件
emit('rename-chat', { chatId, title: newTitle });
} catch (error) { } catch (error) {
console.error('重命名对话失败:', error); console.error('重命名对话失败:', error);
} }
}; };
// 折叠侧边栏
const toggleCollapse = () => { const toggleCollapse = () => {
emit('toggle-sidebar'); emit('toggle-sidebar');
}; };
@ -176,7 +207,7 @@ const toggleCollapse = () => {
&.sidebar-open { &.sidebar-open {
width: 280px; width: 280px;
max-width: 300px; max-width: 300px;
border-right: 1px solid #e8e8e8; border-right: 1px solid var(--gray-200);
} }
.sidebar-header { .sidebar-header {
@ -185,7 +216,8 @@ const toggleCollapse = () => {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 16px; padding: 0 16px;
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid var(--gray-200);
flex-shrink: 0;
.header-title { .header-title {
font-weight: 500; font-weight: 500;
@ -205,21 +237,26 @@ const toggleCollapse = () => {
} }
.conversation-list-top { .conversation-list-top {
padding: 10px; padding: 8px 12px;
border-bottom: 1px solid var(--gray-200);
.new-chat-btn { .new-chat-btn {
width: 100%; width: 100%;
padding: 8px 16px; padding: 8px 12px;
height: fit-content; border-radius: 6px;
border-radius: 8px; background-color: var(--main-50);
background-color: var(--gray-200);
color: var(--main-color); color: var(--main-color);
border: none; border: none;
transition: all 0.2s ease; transition: all 0.2s ease;
font-weight: 500; font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
&:hover { &:hover {
background-color: var(--gray-400); background-color: var(--main-100);
} }
} }
} }
@ -227,128 +264,134 @@ const toggleCollapse = () => {
.conversation-list { .conversation-list {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 10px; padding: 8px;
.chat-group {
margin-bottom: 16px;
}
.chat-group-title {
padding: 4px 8px;
font-size: 12px;
color: var(--gray-500);
font-weight: 500;
text-transform: uppercase;
}
.conversation-item { .conversation-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; padding: 8px 12px;
padding: 4px 0px 4px 12px; border-radius: 6px;
border-radius: 8px; margin: 4px 0;
margin-bottom: 8px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: background-color 0.2s ease;
position: relative;
overflow: hidden;
.conversation-title {
flex: 1;
font-size: 14px;
color: var(--gray-800);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.2s ease;
}
.actions-mask {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 60px;
background: linear-gradient(to right, transparent, var(--bg-sider) 20px);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.conversation-actions {
display: flex;
align-items: center;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: opacity 0.3s ease;
.more-btn {
color: var(--gray-600);
background-color: transparent !important;
&:hover {
color: var(--main-500);
background-color: transparent !important;
}
}
}
&:hover { &:hover {
background-color: #f0f0f0; background-color: var(--gray-100);
.conversation-actions { .actions-mask {
background: linear-gradient(to right, transparent, var(--gray-100) 20px);
}
.actions-mask, .conversation-actions {
opacity: 1; opacity: 1;
} }
} }
&.active { &.active {
background-color: var(--gray-300); background-color: var(--main-50);
.conversation-title { .conversation-title {
color: var(--main-700); color: var(--main-600);
font-weight: 500; font-weight: 500;
} }
} .actions-mask {
background: linear-gradient(to right, transparent, var(--main-50) 20px);
.conversation-info {
flex: 1;
min-width: 0;
.conversation-title {
font-size: 14px;
color: var(--gray-900);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.conversation-time {
font-size: 12px;
color: var(--gray-500);
}
}
.conversation-actions {
opacity: 0;
transition: opacity 0.2s ease;
.more-btn {
color: var(--gray-500);
&:hover {
color: var(--main-500);
}
} }
} }
} }
.empty-list { .empty-list {
display: flex; text-align: center;
align-items: center; margin-top: 20px;
justify-content: center;
height: 100px;
color: var(--gray-500); color: var(--gray-500);
font-size: 14px; font-size: 14px;
} }
} }
} }
// 滚动条美化 // Scrollbar styling
.conversation-list::-webkit-scrollbar { .conversation-list::-webkit-scrollbar {
width: 4px; width: 5px;
} }
.conversation-list::-webkit-scrollbar-track { .conversation-list::-webkit-scrollbar-track {
background: transparent; background: transparent;
} }
.conversation-list::-webkit-scrollbar-thumb { .conversation-list::-webkit-scrollbar-thumb {
background: var(--gray-300); background: var(--gray-300);
border-radius: 4px; border-radius: 5px;
} }
.conversation-list::-webkit-scrollbar-thumb:hover { .conversation-list::-webkit-scrollbar-thumb:hover {
background: var(--gray-400); background: var(--gray-400);
} }
</style>
.toggle-sidebar.nav-btn {
<style lang="less">
.toggle-sidebar {
cursor: pointer; cursor: pointer;
height: 2.5rem;
&.nav-btn { display: flex;
height: 2.5rem; justify-content: center;
display: flex; align-items: center;
justify-content: center; border-radius: 8px;
align-items: center; color: var(--gray-900);
border-radius: 8px; padding: 0.5rem;
color: var(--gray-900); transition: background-color 0.3s;
cursor: pointer; &:hover {
font-size: 15px; background-color: var(--gray-100);
width: auto;
padding: 0.5rem 1rem;
transition: background-color 0.3s;
overflow: hidden;
.text {
margin-left: 10px;
}
&:hover {
background-color: var(--main-light-3);
}
.nav-btn-icon {
width: 1.5rem;
height: 1.5rem;
}
} }
} }
</style> </style>

2
web/src/components/KnowledgeGraphViewer.vue
View File

@ -1142,7 +1142,7 @@ defineExpose({
flex: 1; flex: 1;
background: white; background: white;
position: relative; /* 确保子元素可以相对于此容器定位 */ position: relative; /* 确保子元素可以相对于此容器定位 */
border: 1px solid var(--main-light-3); border: 1px solid var(--main-20);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;

2
web/src/components/MessageComponent.vue
View File

@ -203,7 +203,7 @@ const isEmptyAndLoading = computed(() => {
margin-top: 10px; margin-top: 10px;
margin-bottom: 15px; margin-bottom: 15px;
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--main-light-3); border: 1px solid var(--main-20);
.reasoning-content { .reasoning-content {
font-size: 13px; font-size: 13px;

2
web/src/components/ModelSelectorComponent.vue
View File

@ -107,7 +107,7 @@ const handleSelectModel = (provider, name) => {
} }
&:hover { &:hover {
background-color: var(--main-light-3); background-color: var(--main-20);
} }
} }

2
web/src/components/ToolCallingResult/KnowledgeBaseResult.vue
View File

@ -301,7 +301,7 @@ const getScoreColor = (score) => {
} }
&:hover { &:hover {
background: var(--main-25); background: var(--main-30);
.view-icon { .view-icon {
opacity: 1; opacity: 1;

10
web/src/layouts/AppLayout.vue
View File

@ -352,10 +352,9 @@ div.header, #app-router-view {
padding: 10px 12px; padding: 10px 12px;
} }
&.active { &.active {
text-shadow: 0 0 15px var(--main-300);
font-weight: bold; font-weight: bold;
color: var(--main-color); color: var(--main-color);
background-color: white;
border: 1px solid white;
} }
&.warning { &.warning {
@ -363,8 +362,7 @@ div.header, #app-router-view {
} }
&:hover { &:hover {
background-color: rgba(255, 255, 255, 0.8); color: var(--main-color);
backdrop-filter: blur(10px);
} }
.text { .text {
@ -441,8 +439,8 @@ div.header, #app-router-view {
width: 100%; width: 100%;
height: 50px; height: 50px;
border-right: none; border-right: none;
border-bottom: 1px solid var(--main-light-2); border-bottom: 1px solid var(--main-40);
background-color: var(--main-light-3); background-color: var(--main-20);
padding: 0 20px; padding: 0 20px;
gap: 24px; gap: 24px;

20
web/src/views/AgentView.vue
View File

@ -2,16 +2,11 @@
<div class="agent-view"> <div class="agent-view">
<div class="agent-view-header"> <div class="agent-view-header">
<div class="header-left"> <div class="header-left">
<div class="header-item">
<a-button class="header-button" @click="toggleConf">
<template #icon><SettingOutlined /></template>
</a-button>
</div>
<div class="header-item"> <div class="header-item">
<a-select <a-select
v-model:value="selectedAgentId" v-model:value="selectedAgentId"
class="agent-list" class="agent-list"
style="width: 240px" style="width: 220px"
@change="selectAgent" @change="selectAgent"
> >
<a-select-option <a-select-option
@ -29,6 +24,9 @@
</a-select-option> </a-select-option>
</a-select> </a-select>
</div> </div>
<div class="header-item">
<a-button class="header-button" @click="toggleConf" :icon="h(SettingOutlined)"> 配置 </a-button>
</div>
</div> </div>
<div class="header-center"> <div class="header-center">
</div> </div>
@ -693,7 +691,7 @@ const toggleConf = () => {
.agent-view-header { .agent-view-header {
height: var(--agent-view-header-height); height: var(--agent-view-header-height);
background-color: var(--bg-sider); background-color: var(--bg-sider);
border-bottom: 1px solid var(--main-light-3); border-bottom: 1px solid var(--main-20);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -790,13 +788,13 @@ const toggleConf = () => {
.action-button { .action-button {
background-color: white; background-color: white;
border: 1px solid var(--main-light-3); border: 1px solid var(--main-20);
text-align: left; text-align: left;
height: auto; height: auto;
padding: 8px 12px; padding: 8px 12px;
&:hover { &:hover {
background-color: var(--main-light-4); background-color: var(--main-20);
} }
&.primary-action { &.primary-action {
@ -805,7 +803,7 @@ const toggleConf = () => {
&:disabled { &:disabled {
color: var(--main-color); color: var(--main-color);
background-color: var(--main-light-4); background-color: var(--main-20);
cursor: not-allowed; cursor: not-allowed;
opacity: 0.7; opacity: 0.7;
} }
@ -1165,7 +1163,7 @@ const toggleConf = () => {
} }
&:hover { &:hover {
background-color: var(--main-light-3); background-color: var(--main-20);
} }
.nav-btn-icon { .nav-btn-icon {

42
web/src/views/DataBaseInfoView.vue
View File

@ -2233,7 +2233,7 @@ const getFileIconColor = (filename) => {
background-color: var(--gray-100); background-color: var(--gray-100);
&:hover { &:hover {
background-color: var(--main-light-4); background-color: var(--main-20);
} }
} }
@ -2253,8 +2253,8 @@ const getFileIconColor = (filename) => {
cursor: pointer; cursor: pointer;
padding: 4px 16px; padding: 4px 16px;
border-radius: 8px; border-radius: 8px;
background-color: var(--main-light-4); background-color: var(--main-20);
border: 1px solid var(--main-light-3); border: 1px solid var(--main-20);
transition: all 0.2s ease; transition: all 0.2s ease;
&.active { &.active {
@ -2267,7 +2267,7 @@ const getFileIconColor = (filename) => {
.config-controls { .config-controls {
.ant-btn { .ant-btn {
border-color: var(--main-light-3); border-color: var(--main-20);
color: var(--gray-700); color: var(--gray-700);
&:hover { &:hover {
@ -2281,9 +2281,9 @@ const getFileIconColor = (filename) => {
.ocr-config { .ocr-config {
margin-bottom: 16px; margin-bottom: 16px;
padding: 12px 16px; padding: 12px 16px;
background-color: var(--main-light-6); background-color: var(--main-5);
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--main-light-3); border: 1px solid var(--main-20);
.ant-form-item { .ant-form-item {
margin-bottom: 0; margin-bottom: 0;
@ -2325,9 +2325,9 @@ const getFileIconColor = (filename) => {
.qa-split-config { .qa-split-config {
margin-bottom: 16px; margin-bottom: 16px;
padding: 12px 16px; padding: 12px 16px;
background-color: var(--main-light-6); background-color: var(--main-5);
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--main-light-3); border: 1px solid var(--main-20);
.ant-form-item { .ant-form-item {
margin-bottom: 12px; margin-bottom: 12px;
@ -2355,7 +2355,7 @@ const getFileIconColor = (filename) => {
} }
.ant-input { .ant-input {
border-color: var(--main-light-3); border-color: var(--main-20);
&:hover, &:hover,
&:focus { &:focus {
@ -2383,7 +2383,7 @@ const getFileIconColor = (filename) => {
margin-bottom: 20px; margin-bottom: 20px;
.ant-textarea { .ant-textarea {
border-color: var(--main-light-3); border-color: var(--main-20);
background-color: #fff; background-color: #fff;
font-family: monospace; font-family: monospace;
resize: vertical; resize: vertical;
@ -2405,7 +2405,7 @@ const getFileIconColor = (filename) => {
.chunk-config-content { .chunk-config-content {
.params-info { .params-info {
background-color: var(--main-light-4); background-color: var(--main-20);
border-radius: 6px; border-radius: 6px;
padding: 10px 12px; padding: 10px 12px;
margin-bottom: 16px; margin-bottom: 16px;
@ -2511,7 +2511,7 @@ const getFileIconColor = (filename) => {
z-index: 10; z-index: 10;
&:hover { &:hover {
background-color: var(--main-light-2); background-color: var(--main-40);
} }
} }
@ -2524,7 +2524,7 @@ const getFileIconColor = (filename) => {
z-index: 10; z-index: 10;
&:hover { &:hover {
background-color: var(--main-light-2); background-color: var(--main-40);
} }
} }
@ -2595,7 +2595,7 @@ const getFileIconColor = (filename) => {
border-radius: 4px; border-radius: 4px;
&:hover { &:hover {
background-color: var(--main-light-5); background-color: var(--main-5);
color: var(--main-color); color: var(--main-color);
} }
} }
@ -2607,7 +2607,7 @@ const getFileIconColor = (filename) => {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 2px 4px; padding: 2px 4px;
background-color: var(--main-light-5); background-color: var(--main-5);
border-radius: 4px; border-radius: 4px;
margin-bottom: 4px; margin-bottom: 4px;
flex-shrink: 0; flex-shrink: 0;
@ -2631,7 +2631,7 @@ const getFileIconColor = (filename) => {
border-radius: 3px; border-radius: 3px;
&:hover { &:hover {
background-color: var(--main-light-4); background-color: var(--main-20);
color: var(--main-color); color: var(--main-color);
} }
} }
@ -2721,7 +2721,7 @@ const getFileIconColor = (filename) => {
border-radius: 4px; border-radius: 4px;
&:hover { &:hover {
background-color: var(--main-light-5); background-color: var(--main-5);
color: var(--main-color); color: var(--main-color);
} }
} }
@ -2844,7 +2844,7 @@ const getFileIconColor = (filename) => {
font-size: 13px; font-size: 13px;
&:hover { &:hover {
background-color: var(--main-light-5); background-color: var(--main-5);
border-color: var(--main-color); border-color: var(--main-color);
color: var(--main-400); color: var(--main-400);
} }
@ -2928,11 +2928,11 @@ const getFileIconColor = (filename) => {
/* Table row selection styling */ /* Table row selection styling */
:deep(.ant-table-tbody > tr.ant-table-row-selected > td) { :deep(.ant-table-tbody > tr.ant-table-row-selected > td) {
background-color: var(--main-light-5); background-color: var(--main-5);
} }
:deep(.ant-table-tbody > tr:hover > td) { :deep(.ant-table-tbody > tr:hover > td) {
background-color: var(--main-light-6); background-color: var(--main-5);
} }
.panel-action-btn { .panel-action-btn {
@ -2969,7 +2969,7 @@ const getFileIconColor = (filename) => {
&.active.expanded { &.active.expanded {
transform: scaleX(1); transform: scaleX(1);
&:hover { &:hover {
background-color: var(--main-light-5); background-color: var(--main-5);
border-color: var(--main-color); border-color: var(--main-color);
color: var(--main-color); color: var(--main-color);
} }

2
web/src/views/SettingView.vue
View File

@ -256,7 +256,7 @@ const openLink = (url) => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border-right: 1px solid var(--main-light-3); border-right: 1px solid var(--main-20);
gap: 8px; gap: 8px;
padding-top: 20px; padding-top: 20px;