feat: 优化聊天界面样式和交互体验
- 将默认对话标题从"新对话"改为"新的对话" - 调整聊天侧边栏的背景色和悬停效果 - 在空聊天状态添加输入框 - 重构智能体选择器为弹窗模式 - 改进消息输入组件支持单行/多行模式 - 优化加载动画和生成状态指示器
This commit is contained in:
Wenjie Zhang
parent
4857de1856
commit
386a2c422f
@ -285,7 +285,7 @@ async def create_thread(
|
||||
id=thread_id,
|
||||
user_id=str(current_user.id),
|
||||
agent_id=thread.agent_id,
|
||||
title=thread.title or "新对话",
|
||||
title=thread.title or "新的对话",
|
||||
description=thread.description,
|
||||
)
|
||||
|
||||
|
||||
@ -120,7 +120,7 @@ export const threadApi = {
|
||||
*/
|
||||
createThread: (agentId, title, metadata) => apiPost('/api/chat/thread', {
|
||||
agent_id: agentId,
|
||||
title: title || '新对话',
|
||||
title: title || '新的对话',
|
||||
metadata: metadata || {}
|
||||
}, {}, true),
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
<PanelLeftOpen size="20" color="var(--gray-800)"/>
|
||||
</div>
|
||||
<div class="newchat nav-btn" @click="createNewChat" :disabled="state.isProcessingRequest || state.creatingNewChat">
|
||||
<MessageSquarePlus size="20" color="var(--gray-800)"/> <span class="text" :class="{'hide-text': isMediumContainer}">新对话</span>
|
||||
<MessageSquarePlus size="20" color="var(--gray-800)"/> <span class="text" :class="{'hide-text': isMediumContainer}">新的对话</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__center">
|
||||
@ -56,8 +56,21 @@
|
||||
<div v-else-if="convs.length === 0 && !onGoingConv.messages.length" class="chat-examples">
|
||||
<h1>{{ currentAgent ? currentAgent.name : '请选择一个智能体开始对话' }}</h1>
|
||||
<p>{{ currentAgent ? currentAgent.description : '不同的智能体有不同的专长和能力' }}</p>
|
||||
<div class="inputer-init">
|
||||
<MessageInputComponent
|
||||
v-model="userInput"
|
||||
:is-loading="state.isProcessingRequest"
|
||||
:disabled="!currentAgent"
|
||||
:send-button-disabled="!userInput || !currentAgent || state.isProcessingRequest"
|
||||
:placeholder="'输入问题...'"
|
||||
@send="handleSendMessage"
|
||||
@keydown="handleKeyDown"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="chat-box" ref="messagesContainer">
|
||||
<div class="conv-box" v-for="(conv, index) in convs" :key="index">
|
||||
<AgentMessageComponent
|
||||
@ -104,7 +117,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="message-input-wrapper">
|
||||
<div class="message-input-wrapper" v-if="convs.length > 0 || onGoingConv.messages.length > 0">
|
||||
<MessageInputComponent
|
||||
v-model="userInput"
|
||||
:is-loading="state.isProcessingRequest"
|
||||
@ -301,7 +314,7 @@ const createNewChat = async () => {
|
||||
try {
|
||||
// 调用API创建新对话
|
||||
state.creatingNewChat = true;
|
||||
const response = await threadApi.createThread(props.agentId, '新对话');
|
||||
const response = await threadApi.createThread(props.agentId, '新的对话');
|
||||
if (!response || !response.id) {
|
||||
throw new Error('创建对话失败');
|
||||
}
|
||||
@ -1436,13 +1449,20 @@ const mergeMessageChunk = (chunks) => {
|
||||
|
||||
h1 {
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.2rem;
|
||||
color: var(--gray-900);
|
||||
font-size: 1.3rem;
|
||||
color: var(--gray-1000);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.1rem;
|
||||
color: var(--gray-700);
|
||||
}
|
||||
|
||||
.inputer-init {
|
||||
margin: 40px auto;
|
||||
width: 80%;
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-loading {
|
||||
@ -1550,16 +1570,16 @@ const mergeMessageChunk = (chunks) => {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.loading-dots div {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin: 0 4px;
|
||||
background-color: var(--gray-700);
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: linear-gradient(135deg, var(--main-color), var(--main-700));
|
||||
border-radius: 50%;
|
||||
opacity: 0.3;
|
||||
animation: pulse 0.5s infinite ease-in-out both;
|
||||
animation: dotPulse 1.4s infinite ease-in-out both;
|
||||
box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.loading-dots div:nth-child(1) {
|
||||
@ -1570,25 +1590,29 @@ const mergeMessageChunk = (chunks) => {
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
.loading-dots div:nth-child(3) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.generating-status {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 0.8rem 0;
|
||||
animation: fadeInUp 0.3s ease-out;
|
||||
padding: 1rem 0;
|
||||
animation: fadeInUp 0.4s ease-out;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.generating-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem 0.5rem 0.5rem;
|
||||
background: var(--gray-100);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--gray-200);
|
||||
padding: 0.75rem 0rem;
|
||||
|
||||
.generating-text {
|
||||
margin-left: 12px;
|
||||
color: var(--gray-700);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1625,17 +1649,26 @@ const mergeMessageChunk = (chunks) => {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
@keyframes dotPulse {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0.8);
|
||||
opacity: 0.3;
|
||||
opacity: 0.5;
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
transform: scale(1.1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
left: -100%;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes swing-in-top-fwd {
|
||||
0% {
|
||||
transform: rotateX(-100deg);
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
:class="{ 'active': currentChatId === chat.id }"
|
||||
@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>
|
||||
@ -244,7 +244,7 @@ const toggleCollapse = () => {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
background-color: var(--main-50);
|
||||
background-color: var(--gray-50);
|
||||
color: var(--main-color);
|
||||
border: none;
|
||||
transition: all 0.2s ease;
|
||||
@ -332,7 +332,7 @@ const toggleCollapse = () => {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--gray-100);
|
||||
background-color: var(--gray-50);
|
||||
|
||||
.actions-mask {
|
||||
background: linear-gradient(to right, transparent, var(--gray-100) 20px);
|
||||
@ -344,14 +344,14 @@ const toggleCollapse = () => {
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--main-50);
|
||||
background-color: var(--gray-100);
|
||||
|
||||
.conversation-title {
|
||||
color: var(--main-600);
|
||||
font-weight: 500;
|
||||
}
|
||||
.actions-mask {
|
||||
background: linear-gradient(to right, transparent, var(--main-50) 20px);
|
||||
background: linear-gradient(to right, transparent, var(--gray-100) 20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,48 +1,76 @@
|
||||
<template>
|
||||
<div class="input-box" :class="customClasses" @click="focusInput">
|
||||
<div class="input-area">
|
||||
<a-textarea
|
||||
ref="inputRef"
|
||||
class="user-input"
|
||||
v-model:value="inputValue"
|
||||
@keydown="handleKeyPress"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:auto-size="autoSize"
|
||||
/>
|
||||
<div class="input-box" :class="[customClasses, { 'single-line': isSingleLine }]" @click="focusInput">
|
||||
<div class="expand-options" v-if="hasOptionsLeft">
|
||||
<a-popover
|
||||
v-model:open="optionsExpanded"
|
||||
placement="bottomLeft"
|
||||
trigger="click"
|
||||
>
|
||||
<template #content>
|
||||
<div class="popover-options">
|
||||
<slot name="options-left">
|
||||
<div class="no-options">没有配置 options</div>
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
<a-button
|
||||
type="text"
|
||||
size="small"
|
||||
class="expand-btn"
|
||||
>
|
||||
<template #icon>
|
||||
<PlusOutlined :class="{ 'rotated': optionsExpanded }" />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-popover>
|
||||
</div>
|
||||
<div class="input-options">
|
||||
<div class="options__left">
|
||||
<slot name="options-left"></slot>
|
||||
</div>
|
||||
<div class="options__right">
|
||||
<a-tooltip :title="isLoading ? '停止回答' : ''">
|
||||
<a-button
|
||||
@click="handleSendOrStop"
|
||||
:disabled="sendButtonDisabled"
|
||||
type="link"
|
||||
>
|
||||
|
||||
<textarea
|
||||
ref="inputRef"
|
||||
class="user-input"
|
||||
:value="inputValue"
|
||||
@keydown="handleKeyPress"
|
||||
@input="handleInput"
|
||||
@focus="focusInput"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
/>
|
||||
|
||||
<div class="send-button-container">
|
||||
<a-tooltip :title="isLoading ? '停止回答' : ''">
|
||||
<a-button
|
||||
@click="handleSendOrStop"
|
||||
:disabled="sendButtonDisabled"
|
||||
type="link"
|
||||
class="send-button"
|
||||
>
|
||||
<template #icon>
|
||||
<component :is="getIcon" class="send-btn"/>
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, toRefs, onMounted } from 'vue';
|
||||
import { ref, computed, toRefs, onMounted, nextTick, watch, onBeforeUnmount } from 'vue';
|
||||
import {
|
||||
SendOutlined,
|
||||
ArrowUpOutlined,
|
||||
LoadingOutlined,
|
||||
PauseOutlined
|
||||
PauseOutlined,
|
||||
PlusOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
|
||||
const inputRef = ref(null);
|
||||
const isSingleLine = ref(true);
|
||||
const optionsExpanded = ref(false);
|
||||
const hasOptionsLeft = ref(false);
|
||||
const singleLineHeight = ref(0); // Add this
|
||||
// 用于防抖的定时器
|
||||
const debounceTimer = ref(null);
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
@ -106,11 +134,71 @@ const handleKeyPress = (e) => {
|
||||
emit('keydown', e);
|
||||
};
|
||||
|
||||
// 处理输入事件
|
||||
const handleInput = (e) => {
|
||||
const value = e.target.value;
|
||||
emit('update:modelValue', value);
|
||||
};
|
||||
|
||||
// 处理发送按钮点击
|
||||
const handleSendOrStop = () => {
|
||||
emit('send');
|
||||
};
|
||||
|
||||
// 用于存储固定的单行宽度基准
|
||||
const singleLineWidth = ref(0);
|
||||
|
||||
// 检查行数
|
||||
const checkLineCount = () => {
|
||||
if (!inputRef.value || singleLineHeight.value === 0) {
|
||||
return;
|
||||
}
|
||||
const textarea = inputRef.value;
|
||||
const content = inputValue.value;
|
||||
|
||||
// 主要判断依据：内容是否包含换行符
|
||||
const hasNewlines = content.includes('\n');
|
||||
|
||||
// 辅助判断：内容是否超出单行宽度（使用固定的单行宽度基准）
|
||||
let contentExceedsWidth = false;
|
||||
if (!hasNewlines && content.trim() && singleLineWidth.value > 0) {
|
||||
// 使用固定的单行宽度作为测量基准，避免因模式切换导致的宽度变化
|
||||
const measureDiv = document.createElement('div');
|
||||
measureDiv.style.cssText = `
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
white-space: nowrap;
|
||||
font-family: ${getComputedStyle(textarea).fontFamily};
|
||||
font-size: ${getComputedStyle(textarea).fontSize};
|
||||
line-height: ${getComputedStyle(textarea).lineHeight};
|
||||
padding: 0;
|
||||
border: none;
|
||||
width: ${singleLineWidth.value}px;
|
||||
`;
|
||||
measureDiv.textContent = content;
|
||||
document.body.appendChild(measureDiv);
|
||||
|
||||
// 检查内容是否会换行（基于固定的单行宽度）
|
||||
contentExceedsWidth = measureDiv.scrollWidth > measureDiv.clientWidth;
|
||||
document.body.removeChild(measureDiv);
|
||||
}
|
||||
|
||||
const shouldBeMultiLine = hasNewlines || contentExceedsWidth;
|
||||
isSingleLine.value = !shouldBeMultiLine;
|
||||
|
||||
// 根据模式调整高度
|
||||
if (shouldBeMultiLine) {
|
||||
// 多行模式：让textarea自适应内容高度
|
||||
textarea.style.height = 'auto';
|
||||
textarea.style.height = `${Math.max(textarea.scrollHeight, singleLineHeight.value)}px`;
|
||||
} else {
|
||||
// 单行模式：清除内联样式，让CSS控制高度
|
||||
textarea.style.height = '';
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 聚焦输入框
|
||||
const focusInput = () => {
|
||||
if (inputRef.value && !props.disabled) {
|
||||
@ -118,30 +206,89 @@ const focusInput = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 检查是否有左侧选项
|
||||
const checkOptionsLeft = () => {
|
||||
// 这里可以通过检查slot内容来判断是否有选项
|
||||
// 暂时设为true，实际使用时可以根据slot内容动态判断
|
||||
hasOptionsLeft.value = true;
|
||||
};
|
||||
|
||||
// 监听输入值变化
|
||||
watch(inputValue, () => {
|
||||
nextTick(() => {
|
||||
checkLineCount();
|
||||
});
|
||||
});
|
||||
|
||||
// 监听输入框尺寸变化
|
||||
/* const observeTextareaResize = () => {
|
||||
if (inputRef.value) {
|
||||
const textarea = inputRef.value;
|
||||
if (textarea) {
|
||||
// 创建 ResizeObserver 来监听文本域尺寸变化
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
checkLineCount();
|
||||
});
|
||||
resizeObserver.observe(textarea);
|
||||
|
||||
// 在组件卸载时断开观察器
|
||||
onBeforeUnmount(() => {
|
||||
resizeObserver.disconnect();
|
||||
});
|
||||
}
|
||||
}
|
||||
}; */
|
||||
|
||||
// Wait for component to mount before setting up onStartTyping
|
||||
onMounted(() => {
|
||||
// Use the template ref element for onStartTyping
|
||||
setTimeout(() => {
|
||||
console.log('Component mounted');
|
||||
checkOptionsLeft();
|
||||
nextTick(() => {
|
||||
if (inputRef.value) {
|
||||
// 记录单行模式下的高度和宽度基准
|
||||
singleLineHeight.value = inputRef.value.clientHeight;
|
||||
singleLineWidth.value = inputRef.value.clientWidth;
|
||||
checkLineCount();
|
||||
inputRef.value.focus();
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
// observeTextareaResize();
|
||||
});
|
||||
|
||||
// 组件卸载时清除定时器
|
||||
onBeforeUnmount(() => {
|
||||
if (debounceTimer.value) {
|
||||
clearTimeout(debounceTimer.value);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.input-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
padding: 0.6rem 0.75rem 0.4rem 0.75rem;
|
||||
border: 2px solid var(--gray-200);
|
||||
border-radius: 0.8rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
gap: 8px;
|
||||
|
||||
/* Default: Multi-line layout */
|
||||
padding: 0.8rem 0.75rem 0.6rem 0.75rem;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"input input"
|
||||
"options send";
|
||||
|
||||
.expand-options {
|
||||
justify-self: start;
|
||||
}
|
||||
.send-button-container {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--main-500);
|
||||
@ -149,82 +296,127 @@ onMounted(() => {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.input-area {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
&.single-line {
|
||||
padding: 0.75rem 0.75rem;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-areas: "options input send";
|
||||
align-items: center;
|
||||
|
||||
.user-input {
|
||||
flex: 1;
|
||||
min-height: 44px;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
margin: 0;
|
||||
color: #222222;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
resize: none;
|
||||
line-height: 1.6;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
.user-input {
|
||||
min-height: 24px;
|
||||
height: 24px; /* Fix height for single line */
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #888888;
|
||||
}
|
||||
}
|
||||
|
||||
.input-options {
|
||||
display: flex;
|
||||
// border-top: 1px solid var(--gray-100);
|
||||
|
||||
.options__left,
|
||||
.options__right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.options__right {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.options__left {
|
||||
flex: 1;
|
||||
|
||||
:deep(.opt-item) {
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--gray-300);
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: var(--gray-700);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--main-10);
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--main-color);
|
||||
border: 1px solid var(--main-500);
|
||||
background-color: var(--main-10);
|
||||
}
|
||||
}
|
||||
.expand-options, .send-button-container {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.ant-btn-icon-only {
|
||||
.expand-options {
|
||||
grid-area: options;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-input {
|
||||
grid-area: input;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
margin: 0;
|
||||
color: #222222;
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
resize: none;
|
||||
line-height: 1.5;
|
||||
font-family: inherit;
|
||||
min-height: 44px; /* Default min-height for multi-line */
|
||||
max-height: 200px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #888888;
|
||||
}
|
||||
}
|
||||
|
||||
.send-button-container {
|
||||
grid-area: send;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.expand-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--gray-600);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--gray-100);
|
||||
color: var(--main-500);
|
||||
}
|
||||
|
||||
.anticon {
|
||||
font-size: 12px;
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&.rotated {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Popover 选项样式
|
||||
.popover-options {
|
||||
min-width: 200px;
|
||||
max-width: 300px;
|
||||
|
||||
.no-options {
|
||||
color: var(--gray-700);
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:deep(.opt-item) {
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--gray-300);
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: var(--gray-700);
|
||||
transition: all 0.2s ease;
|
||||
margin: 4px;
|
||||
display: inline-block;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--main-10);
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--main-color);
|
||||
border: 1px solid var(--main-500);
|
||||
background-color: var(--main-10);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.send-button.ant-btn-icon-only {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
cursor: pointer;
|
||||
|
||||
@ -3,34 +3,23 @@
|
||||
<div class="agent-view-header">
|
||||
<div class="header-left">
|
||||
<div class="header-item">
|
||||
<a-select
|
||||
v-model:value="selectedAgentId"
|
||||
class="agent-list"
|
||||
style="width: 220px"
|
||||
@change="selectAgent"
|
||||
<div
|
||||
class="agent-selector"
|
||||
@click="openAgentModal"
|
||||
style="width: 220px; cursor: pointer;"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(agent, id) in agents"
|
||||
:key="id"
|
||||
:value="id"
|
||||
>
|
||||
<div class="agent-option">
|
||||
<div class="agent-option-content">
|
||||
<p class="agent-option-name">{{ agent.name }} <StarFilled v-if="id === defaultAgentId" class="default-icon" /></p>
|
||||
<p class="agent-option-description">{{ agent.description }}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<a-button class="header-button" @click="toggleConf" :icon="h(SettingOutlined)"> 配置 </a-button>
|
||||
<div class="selected-agent-display">
|
||||
<span class="agent-name">{{ selectedAgent.name || '选择智能体' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-center">
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="header-item">
|
||||
<a-button class="header-button" @click="toggleConf" :icon="h(SettingOutlined)"> 配置 </a-button>
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<a-button
|
||||
class="header-button"
|
||||
@ -263,6 +252,39 @@
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
<!-- 智能体选择弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="state.agentModalOpen"
|
||||
title="选择智能体"
|
||||
:width="800"
|
||||
:footer="null"
|
||||
:maskClosable="true"
|
||||
class="agent-modal"
|
||||
>
|
||||
<div class="agent-modal-content">
|
||||
<div class="agents-grid">
|
||||
<div
|
||||
v-for="(agent, id) in agents"
|
||||
:key="id"
|
||||
class="agent-card"
|
||||
:class="{ 'selected': id === selectedAgentId }"
|
||||
@click="selectAgentFromModal(id)"
|
||||
>
|
||||
<div class="agent-card-header">
|
||||
<div class="agent-card-title">
|
||||
<span class="agent-card-name">{{ agent.name }}</span>
|
||||
<StarFilled v-if="id === defaultAgentId" class="default-icon" />
|
||||
</div>
|
||||
<div class="agent-card-indicator">
|
||||
<CheckCircleOutlined v-if="id === selectedAgentId" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="agent-card-description">{{ agent.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
<!-- 中间内容区域 -->
|
||||
<div class="content">
|
||||
<AgentChatComponent
|
||||
@ -309,6 +331,7 @@ const state = reactive({
|
||||
agentConfOpen: false,
|
||||
debug_mode: false,
|
||||
toolsModalOpen: false,
|
||||
agentModalOpen: false,
|
||||
isEmptyConfig: computed(() =>
|
||||
!selectedAgentId.value ||
|
||||
Object.keys(configurableItems.value).length === 0
|
||||
@ -611,6 +634,17 @@ const selectAgent = (agentId) => {
|
||||
loadAgentConfig();
|
||||
};
|
||||
|
||||
// 打开智能体选择弹窗
|
||||
const openAgentModal = () => {
|
||||
state.agentModalOpen = true;
|
||||
};
|
||||
|
||||
// 从弹窗中选择智能体
|
||||
const selectAgentFromModal = (agentId) => {
|
||||
selectAgent(agentId);
|
||||
state.agentModalOpen = false;
|
||||
};
|
||||
|
||||
// 加载工具列表
|
||||
const loadAvailableTools = async () => {
|
||||
try {
|
||||
@ -1137,6 +1171,149 @@ const toggleConf = () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 智能体选择器样式
|
||||
.agent-selector {
|
||||
border: 1px solid var(--gray-300);
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
background: white;
|
||||
transition: border-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--main-color);
|
||||
}
|
||||
|
||||
.selected-agent-display {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.agent-name {
|
||||
font-size: 14px;
|
||||
color: var(--gray-900);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.default-icon {
|
||||
color: #faad14;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 智能体选择弹窗样式
|
||||
.agent-modal {
|
||||
:deep(.ant-modal-content) {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.ant-modal-header) {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid var(--gray-200);
|
||||
padding: 16px 20px;
|
||||
|
||||
.ant-modal-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--gray-900);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-modal-body) {
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.agent-modal-content {
|
||||
.agents-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 12px;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.agent-card {
|
||||
border: 1px solid var(--gray-200);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s ease;
|
||||
background: white;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--main-color);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border-color: var(--main-color);
|
||||
background: var(--main-10);
|
||||
|
||||
.agent-card-indicator {
|
||||
color: var(--main-color);
|
||||
}
|
||||
}
|
||||
|
||||
.agent-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.agent-card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
|
||||
.agent-card-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--gray-900);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.default-icon {
|
||||
color: #faad14;
|
||||
font-size: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.agent-card-indicator {
|
||||
font-size: 20px;
|
||||
color: var(--gray-400);
|
||||
transition: color 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.agent-card-description {
|
||||
font-size: 14px;
|
||||
color: var(--gray-700);
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配智能体弹窗
|
||||
@media (max-width: 768px) {
|
||||
.agent-modal {
|
||||
.agent-modal-content {
|
||||
.agents-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user