style(ui): 统一使用新的颜色变量并优化侧边栏样式
重构颜色变量定义，移除旧变量并使用新的 --main-* 和 --gray-* 变量 优化聊天侧边栏的分组显示和交互样式 调整多个组件的边框和背景色以匹配新颜色方案
This commit is contained in:
Wenjie Zhang
parent
612bd9f7b0
commit
1b3a5fe0fd
@ -2,48 +2,45 @@
|
||||
/* color palette from <https://github.com/vuejs/theme> */
|
||||
/* https://material-foundation.github.io/material-theme-builder/ */
|
||||
:root {
|
||||
--main-1000: #011A26;
|
||||
--main-900: #034A51;
|
||||
--main-800: #034F69;
|
||||
--main-700: #03637F;
|
||||
--main-600: #1D7796;
|
||||
--main-500: #2F86A8;
|
||||
--main-400: #5099B9;
|
||||
--main-300: #6CADCB;
|
||||
--main-200: #8EC6E1;
|
||||
--main-100: #ADE0F7;
|
||||
--main-50: #CFF5FF;
|
||||
--main-25: #E8FAFF;
|
||||
--main-10: #F8FDFF;
|
||||
--main-5: #FAFCFD;
|
||||
--main-1000: #01151f; /* 更深沉的深蓝黑 */
|
||||
--main-900: #023944; /* 深海蓝 */
|
||||
--main-800: #035065; /* 深蓝绿 */
|
||||
--main-700: #046a82; /* 增加明度的蓝青色 */
|
||||
--main-600: #24839a; /* 冷色调中略带灰 */
|
||||
--main-500: #3996ae; /* 平衡且主色调友好 */
|
||||
--main-400: #5faec2; /* 更加柔和的中亮蓝 */
|
||||
--main-300: #82c3d6; /* 明亮通透，视觉清爽 */
|
||||
--main-200: #a3d8e8; /* 比原先更清澈淡蓝 */
|
||||
--main-100: #c4eaf5; /* 接近原色，但稍微柔和 */
|
||||
--main-50: #e1f6fb; /* 极浅天蓝，适合背景过渡 */
|
||||
--main-40: #eaf3f5; /* 淡灰蓝调 */
|
||||
--main-30: #f2fbfd; /* 几近白的蓝调提示 */
|
||||
--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-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;
|
||||
--error-color: #ba1a1a;
|
||||
|
||||
@ -53,24 +50,3 @@
|
||||
|
||||
--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;
|
||||
}
|
||||
|
||||
@ -4,6 +4,29 @@
|
||||
|
||||
:root {
|
||||
--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 */
|
||||
|
||||
@ -1382,7 +1382,7 @@ const mergeMessageChunk = (chunks) => {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--main-light-3);
|
||||
border-bottom: 1px solid var(--main-20);
|
||||
|
||||
.header__left, .header__right, .header__center {
|
||||
display: flex;
|
||||
@ -1415,7 +1415,7 @@ const mergeMessageChunk = (chunks) => {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--main-light-3);
|
||||
background-color: var(--main-20);
|
||||
}
|
||||
|
||||
.nav-btn-icon {
|
||||
@ -1580,7 +1580,7 @@ const mergeMessageChunk = (chunks) => {
|
||||
.generating-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
padding: 0.5rem 1rem 0.5rem 0.5rem;
|
||||
background: var(--gray-100);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--gray-200);
|
||||
@ -1615,7 +1615,7 @@ const mergeMessageChunk = (chunks) => {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--main-light-3);
|
||||
background-color: var(--main-20);
|
||||
}
|
||||
|
||||
.nav-btn-icon {
|
||||
|
||||
@ -10,50 +10,52 @@
|
||||
</div>
|
||||
<div class="conversation-list-top">
|
||||
<button type="text" @click="createNewChat" class="new-chat-btn">
|
||||
新对话
|
||||
<MessageSquarePlus size="20" /> 创建新对话
|
||||
</button>
|
||||
</div>
|
||||
<div class="conversation-list">
|
||||
<a-spin v-if="loading" />
|
||||
<template v-else>
|
||||
<div
|
||||
v-for="chat in chatsList"
|
||||
:key="chat.id"
|
||||
class="conversation-item"
|
||||
:class="{ 'active': currentChatId === chat.id }"
|
||||
@click="selectChat(chat.id)"
|
||||
>
|
||||
<div class="conversation-info">
|
||||
<template v-else-if="Object.keys(groupedChats).length > 0">
|
||||
<div v-for="(group, groupName) in groupedChats" :key="groupName" class="chat-group">
|
||||
<div class="chat-group-title">{{ groupName }}</div>
|
||||
<div
|
||||
v-for="chat in group"
|
||||
:key="chat.id"
|
||||
class="conversation-item"
|
||||
:class="{ 'active': currentChatId === chat.id }"
|
||||
@click="selectChat(chat)"
|
||||
>
|
||||
<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 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>
|
||||
</template>
|
||||
<div v-else class="empty-list">
|
||||
暂无对话历史
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch, h } from 'vue';
|
||||
import { ref, computed, h } from 'vue';
|
||||
import {
|
||||
DeleteOutlined,
|
||||
EditOutlined,
|
||||
@ -61,6 +63,12 @@ import {
|
||||
} from '@ant-design/icons-vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
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({
|
||||
currentAgentId: {
|
||||
@ -87,72 +95,95 @@ const props = defineProps({
|
||||
|
||||
const emit = defineEmits(['create-chat', 'select-chat', 'delete-chat', 'rename-chat', 'toggle-sidebar']);
|
||||
|
||||
// 状态变量
|
||||
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 = () => {
|
||||
emit('create-chat');
|
||||
};
|
||||
|
||||
// 选择对话
|
||||
const selectChat = (chatId) => {
|
||||
emit('select-chat', chatId);
|
||||
const selectChat = (chat) => {
|
||||
console.log(chat);
|
||||
emit('select-chat', chat.id);
|
||||
};
|
||||
|
||||
// 删除对话
|
||||
const deleteChat = (chatId) => {
|
||||
emit('delete-chat', chatId);
|
||||
};
|
||||
|
||||
// 重命名对话
|
||||
const renameChat = async (chatId) => {
|
||||
try {
|
||||
// 找到当前对话
|
||||
const chat = props.chatsList.find(c => c.id === chatId);
|
||||
if (!chat) return;
|
||||
|
||||
// 获取新标题
|
||||
let newTitle = '';
|
||||
let modalInstance = null;
|
||||
|
||||
await new Promise((resolve, reject) => {
|
||||
modalInstance = Modal.confirm({
|
||||
title: '重命名对话',
|
||||
content: h('div', {}, [
|
||||
h('input', {
|
||||
value: chat.title,
|
||||
style: { width: '100%', marginTop: '10px' },
|
||||
onInput: (e) => { newTitle = e.target.value; }
|
||||
})
|
||||
]),
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
resolve();
|
||||
},
|
||||
onCancel: () => {
|
||||
reject();
|
||||
let newTitle = chat.title;
|
||||
Modal.confirm({
|
||||
title: '重命名对话',
|
||||
content: h('div', { style: { marginTop: '12px' } }, [
|
||||
h('input', {
|
||||
value: newTitle,
|
||||
style: { width: '100%', padding: '4px 8px', border: '1px solid #d9d9d9', borderRadius: '4px' },
|
||||
onInput: (e) => { newTitle = e.target.value; }
|
||||
})
|
||||
]),
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
if (!newTitle.trim()) {
|
||||
message.warning('标题不能为空');
|
||||
return Promise.reject();
|
||||
}
|
||||
});
|
||||
emit('rename-chat', { chatId, title: newTitle });
|
||||
},
|
||||
onCancel: () => {}
|
||||
});
|
||||
|
||||
// 确保有标题
|
||||
if (!newTitle.trim()) {
|
||||
message.warning('标题不能为空');
|
||||
return;
|
||||
}
|
||||
|
||||
// 通知父组件
|
||||
emit('rename-chat', { chatId, title: newTitle });
|
||||
|
||||
} catch (error) {
|
||||
console.error('重命名对话失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// 折叠侧边栏
|
||||
const toggleCollapse = () => {
|
||||
emit('toggle-sidebar');
|
||||
};
|
||||
@ -176,7 +207,7 @@ const toggleCollapse = () => {
|
||||
&.sidebar-open {
|
||||
width: 280px;
|
||||
max-width: 300px;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
border-right: 1px solid var(--gray-200);
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
@ -185,7 +216,8 @@ const toggleCollapse = () => {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
border-bottom: 1px solid var(--gray-200);
|
||||
flex-shrink: 0;
|
||||
|
||||
.header-title {
|
||||
font-weight: 500;
|
||||
@ -205,21 +237,26 @@ const toggleCollapse = () => {
|
||||
}
|
||||
|
||||
.conversation-list-top {
|
||||
padding: 10px;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid var(--gray-200);
|
||||
|
||||
.new-chat-btn {
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
height: fit-content;
|
||||
border-radius: 8px;
|
||||
background-color: var(--gray-200);
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
background-color: var(--main-50);
|
||||
color: var(--main-color);
|
||||
border: none;
|
||||
transition: all 0.2s ease;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--gray-400);
|
||||
background-color: var(--main-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -227,128 +264,134 @@ const toggleCollapse = () => {
|
||||
.conversation-list {
|
||||
flex: 1;
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 0px 4px 12px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
margin: 4px 0;
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--gray-300);
|
||||
background-color: var(--main-50);
|
||||
|
||||
.conversation-title {
|
||||
color: var(--main-700);
|
||||
color: var(--main-600);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
.actions-mask {
|
||||
background: linear-gradient(to right, transparent, var(--main-50) 20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
color: var(--gray-500);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动条美化
|
||||
// Scrollbar styling
|
||||
.conversation-list::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.conversation-list::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.conversation-list::-webkit-scrollbar-thumb {
|
||||
background: var(--gray-300);
|
||||
border-radius: 4px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.conversation-list::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--gray-400);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<style lang="less">
|
||||
.toggle-sidebar {
|
||||
.toggle-sidebar.nav-btn {
|
||||
cursor: pointer;
|
||||
|
||||
&.nav-btn {
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
color: var(--gray-900);
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
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;
|
||||
}
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
color: var(--gray-900);
|
||||
padding: 0.5rem;
|
||||
transition: background-color 0.3s;
|
||||
&:hover {
|
||||
background-color: var(--gray-100);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1142,7 +1142,7 @@ defineExpose({
|
||||
flex: 1;
|
||||
background: white;
|
||||
position: relative; /* 确保子元素可以相对于此容器定位 */
|
||||
border: 1px solid var(--main-light-3);
|
||||
border: 1px solid var(--main-20);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
@ -203,7 +203,7 @@ const isEmptyAndLoading = computed(() => {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--main-light-3);
|
||||
border: 1px solid var(--main-20);
|
||||
|
||||
.reasoning-content {
|
||||
font-size: 13px;
|
||||
|
||||
@ -107,7 +107,7 @@ const handleSelectModel = (provider, name) => {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--main-light-3);
|
||||
background-color: var(--main-20);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -301,7 +301,7 @@ const getScoreColor = (score) => {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--main-25);
|
||||
background: var(--main-30);
|
||||
|
||||
.view-icon {
|
||||
opacity: 1;
|
||||
|
||||
@ -352,10 +352,9 @@ div.header, #app-router-view {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
&.active {
|
||||
text-shadow: 0 0 15px var(--main-300);
|
||||
font-weight: bold;
|
||||
color: var(--main-color);
|
||||
background-color: white;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
@ -363,8 +362,7 @@ div.header, #app-router-view {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.text {
|
||||
@ -441,8 +439,8 @@ div.header, #app-router-view {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--main-light-2);
|
||||
background-color: var(--main-light-3);
|
||||
border-bottom: 1px solid var(--main-40);
|
||||
background-color: var(--main-20);
|
||||
padding: 0 20px;
|
||||
gap: 24px;
|
||||
|
||||
|
||||
@ -2,16 +2,11 @@
|
||||
<div class="agent-view">
|
||||
<div class="agent-view-header">
|
||||
<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">
|
||||
<a-select
|
||||
v-model:value="selectedAgentId"
|
||||
class="agent-list"
|
||||
style="width: 240px"
|
||||
style="width: 220px"
|
||||
@change="selectAgent"
|
||||
>
|
||||
<a-select-option
|
||||
@ -29,6 +24,9 @@
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<a-button class="header-button" @click="toggleConf" :icon="h(SettingOutlined)"> 配置 </a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-center">
|
||||
</div>
|
||||
@ -693,7 +691,7 @@ const toggleConf = () => {
|
||||
.agent-view-header {
|
||||
height: var(--agent-view-header-height);
|
||||
background-color: var(--bg-sider);
|
||||
border-bottom: 1px solid var(--main-light-3);
|
||||
border-bottom: 1px solid var(--main-20);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -790,13 +788,13 @@ const toggleConf = () => {
|
||||
|
||||
.action-button {
|
||||
background-color: white;
|
||||
border: 1px solid var(--main-light-3);
|
||||
border: 1px solid var(--main-20);
|
||||
text-align: left;
|
||||
height: auto;
|
||||
padding: 8px 12px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--main-light-4);
|
||||
background-color: var(--main-20);
|
||||
}
|
||||
|
||||
&.primary-action {
|
||||
@ -805,7 +803,7 @@ const toggleConf = () => {
|
||||
|
||||
&:disabled {
|
||||
color: var(--main-color);
|
||||
background-color: var(--main-light-4);
|
||||
background-color: var(--main-20);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.7;
|
||||
}
|
||||
@ -1165,7 +1163,7 @@ const toggleConf = () => {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--main-light-3);
|
||||
background-color: var(--main-20);
|
||||
}
|
||||
|
||||
.nav-btn-icon {
|
||||
|
||||
@ -2233,7 +2233,7 @@ const getFileIconColor = (filename) => {
|
||||
background-color: var(--gray-100);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--main-light-4);
|
||||
background-color: var(--main-20);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2253,8 +2253,8 @@ const getFileIconColor = (filename) => {
|
||||
cursor: pointer;
|
||||
padding: 4px 16px;
|
||||
border-radius: 8px;
|
||||
background-color: var(--main-light-4);
|
||||
border: 1px solid var(--main-light-3);
|
||||
background-color: var(--main-20);
|
||||
border: 1px solid var(--main-20);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&.active {
|
||||
@ -2267,7 +2267,7 @@ const getFileIconColor = (filename) => {
|
||||
|
||||
.config-controls {
|
||||
.ant-btn {
|
||||
border-color: var(--main-light-3);
|
||||
border-color: var(--main-20);
|
||||
color: var(--gray-700);
|
||||
|
||||
&:hover {
|
||||
@ -2281,9 +2281,9 @@ const getFileIconColor = (filename) => {
|
||||
.ocr-config {
|
||||
margin-bottom: 16px;
|
||||
padding: 12px 16px;
|
||||
background-color: var(--main-light-6);
|
||||
background-color: var(--main-5);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--main-light-3);
|
||||
border: 1px solid var(--main-20);
|
||||
|
||||
.ant-form-item {
|
||||
margin-bottom: 0;
|
||||
@ -2325,9 +2325,9 @@ const getFileIconColor = (filename) => {
|
||||
.qa-split-config {
|
||||
margin-bottom: 16px;
|
||||
padding: 12px 16px;
|
||||
background-color: var(--main-light-6);
|
||||
background-color: var(--main-5);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--main-light-3);
|
||||
border: 1px solid var(--main-20);
|
||||
|
||||
.ant-form-item {
|
||||
margin-bottom: 12px;
|
||||
@ -2355,7 +2355,7 @@ const getFileIconColor = (filename) => {
|
||||
}
|
||||
|
||||
.ant-input {
|
||||
border-color: var(--main-light-3);
|
||||
border-color: var(--main-20);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@ -2383,7 +2383,7 @@ const getFileIconColor = (filename) => {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.ant-textarea {
|
||||
border-color: var(--main-light-3);
|
||||
border-color: var(--main-20);
|
||||
background-color: #fff;
|
||||
font-family: monospace;
|
||||
resize: vertical;
|
||||
@ -2405,7 +2405,7 @@ const getFileIconColor = (filename) => {
|
||||
|
||||
.chunk-config-content {
|
||||
.params-info {
|
||||
background-color: var(--main-light-4);
|
||||
background-color: var(--main-20);
|
||||
border-radius: 6px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 16px;
|
||||
@ -2511,7 +2511,7 @@ const getFileIconColor = (filename) => {
|
||||
z-index: 10;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--main-light-2);
|
||||
background-color: var(--main-40);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2524,7 +2524,7 @@ const getFileIconColor = (filename) => {
|
||||
z-index: 10;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--main-light-2);
|
||||
background-color: var(--main-40);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2595,7 +2595,7 @@ const getFileIconColor = (filename) => {
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--main-light-5);
|
||||
background-color: var(--main-5);
|
||||
color: var(--main-color);
|
||||
}
|
||||
}
|
||||
@ -2607,7 +2607,7 @@ const getFileIconColor = (filename) => {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 2px 4px;
|
||||
background-color: var(--main-light-5);
|
||||
background-color: var(--main-5);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 4px;
|
||||
flex-shrink: 0;
|
||||
@ -2631,7 +2631,7 @@ const getFileIconColor = (filename) => {
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--main-light-4);
|
||||
background-color: var(--main-20);
|
||||
color: var(--main-color);
|
||||
}
|
||||
}
|
||||
@ -2721,7 +2721,7 @@ const getFileIconColor = (filename) => {
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--main-light-5);
|
||||
background-color: var(--main-5);
|
||||
color: var(--main-color);
|
||||
}
|
||||
}
|
||||
@ -2844,7 +2844,7 @@ const getFileIconColor = (filename) => {
|
||||
font-size: 13px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--main-light-5);
|
||||
background-color: var(--main-5);
|
||||
border-color: var(--main-color);
|
||||
color: var(--main-400);
|
||||
}
|
||||
@ -2928,11 +2928,11 @@ const getFileIconColor = (filename) => {
|
||||
|
||||
/* Table row selection styling */
|
||||
: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) {
|
||||
background-color: var(--main-light-6);
|
||||
background-color: var(--main-5);
|
||||
}
|
||||
|
||||
.panel-action-btn {
|
||||
@ -2969,7 +2969,7 @@ const getFileIconColor = (filename) => {
|
||||
&.active.expanded {
|
||||
transform: scaleX(1);
|
||||
&:hover {
|
||||
background-color: var(--main-light-5);
|
||||
background-color: var(--main-5);
|
||||
border-color: var(--main-color);
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
@ -256,7 +256,7 @@ const openLink = (url) => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-right: 1px solid var(--main-light-3);
|
||||
border-right: 1px solid var(--main-20);
|
||||
gap: 8px;
|
||||
padding-top: 20px;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user