xiaozhi/xiaozhi-admin-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 优化 !pr850 相关代码用法与问题

Browse Source
This commit is contained in:
疯狂的狮子Li
2026-05-26 11:07:48 +08:00
parent 5f0e2484b0
commit f2c09f33c9
6 changed files with 309 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/ai/agent/index.ts
+34 -20
View File
@@ -1,7 +1,15 @@
import type { AxiosPromise } from '@/utils/api-types';
import request from '@/utils/request';
import { getToken } from '@/utils/auth';
import type { AgentChatRequest, AgentItem, ConversationMessage, ConversationSummaryList, SnailOpenApiUser } from './types';
import request, { globalHeaders } from '@/utils/request';
import { getLanguage } from '@/lang';
import type {
AgentChatRequest,
AgentChatSyncResponse,
AgentItem,
ConversationMessage,
ConversationSummaryItem,
ConversationSummaryList,
SnailOpenApiUser
} from './types';
export const fetchMyAgents = (): AxiosPromise<AgentItem[]> => {
return request({
@@ -35,7 +43,7 @@ export const fetchConversationMessages = (agentId: number, conversationId: strin
});
};
export const createConversation = (agentId: number, data: { title?: string }): AxiosPromise<{ conversationId: string; title?: string }> => {
export const createConversation = (agentId: number, data: { title?: string }): AxiosPromise<ConversationSummaryItem> => {
return request({
url: `/snail-ai/agent/${agentId}/conversation`,
method: 'post',
@@ -43,6 +51,13 @@ export const createConversation = (agentId: number, data: { title?: string }): A
});
};
export const deleteConversation = (agentId: number, conversationId: string): AxiosPromise<void> => {
return request({
url: `/snail-ai/agent/${agentId}/conversation/${conversationId}`,
method: 'delete'
});
};
export const registerCurrentSnailUser = (): AxiosPromise<SnailOpenApiUser> => {
return request({
url: '/snail-ai/user/register',
@@ -57,7 +72,7 @@ export const fetchChatMode = (): AxiosPromise<{ mode?: 'stream' | 'sync' }> => {
});
};
export const fetchAgentChat = (
export const fetchAgentChat = async (
agentId: number,
data: AgentChatRequest,
options: {
@@ -67,25 +82,24 @@ export const fetchAgentChat = (
onError: (error: Error) => void;
signal?: AbortSignal;
}
) => {
): Promise<void> => {
const baseURL = import.meta.env.VITE_APP_BASE_API;
const token = getToken();
const query = new URLSearchParams({ content: data.content });
if (data.conversationId) {
query.set('conversationId', data.conversationId);
}
fetch(`${baseURL}/snail-ai/agent/${agentId}/chat/stream?${query.toString()}`, {
method: 'GET',
await fetch(`${baseURL}/snail-ai/agent/${agentId}/chat/stream`, {
method: 'POST',
headers: {
Authorization: token ? `Bearer ${token}` : '',
clientid: import.meta.env.VITE_APP_CLIENT_ID
...globalHeaders(),
'Content-Language': getLanguage(),
Accept: 'text/event-stream',
'Content-Type': 'application/json;charset=utf-8'
},
body: JSON.stringify(data),
signal: options.signal
})
.then(async response => {
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
const text = await response.text();
throw new Error(text || `HTTP ${response.status}`);
}
const reader = response.body?.getReader();
@@ -100,21 +114,21 @@ export const fetchAgentChat = (
if (done) break;
buffer += decoder.decode(value, { stream: true });
const eventBlocks = buffer.split('\n\n');
const eventBlocks = buffer.split(/\r?\n\r?\n/);
buffer = eventBlocks.pop() || '';
for (const block of eventBlocks) {
if (!block.trim()) continue;
let eventName = 'message';
let payload = '';
for (const line of block.split('\n')) {
for (const line of block.split(/\r?\n/)) {
if (line.startsWith('event:')) {
eventName = line.slice(6).trim();
} else if (line.startsWith('data:')) {
payload += line.slice(5).trim();
}
}
if (!payload) continue;
if (!payload && eventName !== 'done') continue;
if (eventName === 'thinking') {
options.onThinking?.(payload);
} else if (eventName === 'text') {
@@ -139,7 +153,7 @@ export const fetchAgentChat = (
});
};
export const fetchAgentChatSync = (agentId: number, data: AgentChatRequest): AxiosPromise<any> => {
export const fetchAgentChatSync = (agentId: number, data: AgentChatRequest): AxiosPromise<AgentChatSyncResponse> => {
return request({
url: `/snail-ai/agent/${agentId}/chat/sync`,
method: 'post',
src/api/ai/agent/types.ts
+13 -9
View File
@@ -1,26 +1,25 @@
import type { PageResult } from '@/api/types';
export interface AgentItem {
id: number;
name: string;
description?: string;
avatar?: string;
greeting?: string;
status?: number;
presetQuestions?: string[];
webSearchEnabled?: boolean;
}
export interface ConversationSummaryItem {
conversationId: string;
agentId?: number;
title: string;
lastMessageDt?: string;
createDt?: string;
updateDt?: string;
}
export interface ConversationSummaryList {
data: ConversationSummaryItem[];
page?: number;
size?: number;
total?: number;
}
export type ConversationSummaryList = PageResult<ConversationSummaryItem>;
export interface ConversationMessage {
role?: string;
@@ -33,8 +32,13 @@ export interface AgentChatRequest {
content: string;
disabledMcpServerIds?: number[];
disabledSkillIds?: number[];
deepPlanEnabled?: boolean;
webSearchEnabled?: boolean;
}
export interface AgentChatSyncResponse {
conversationId?: string;
content?: string;
traceId?: string;
durationMs?: number;
}
export interface SnailOpenApiUser {
src/views/ai/chat/index.vue
+75 -14
View File
@@ -1,7 +1,8 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { fetchAgentConversations, fetchMyAgents, registerCurrentSnailUser } from '@/api/ai/agent';
import { deleteConversation, fetchAgentConversations, fetchMyAgents, registerCurrentSnailUser } from '@/api/ai/agent';
import type { AgentItem, ConversationSummaryItem } from '@/api/ai/agent/types';
import { ElMessage, ElMessageBox } from 'element-plus';
import ChatMain from './modules/chat-main.vue';
import ChatSidebar from './modules/chat-sidebar.vue';
@@ -12,6 +13,29 @@ const conversations = ref<ConversationSummaryItem[]>([]);
const currentAgent = ref<AgentItem | null>(null);
const currentConversationId = ref('');
const currentNickname = ref('');
const loading = ref(false);
function normalizeAgentList(payload: any): AgentItem[] {
const container = payload?.data ?? payload;
const source =
(Array.isArray(container) && container) ||
(Array.isArray(container?.rows) && container.rows) ||
(Array.isArray(container?.list) && container.list) ||
(Array.isArray(container?.records) && container.records) ||
[];
return source
.map((item: any) => ({
id: Number(item?.id ?? item?.agentId),
name: String(item?.name ?? item?.title ?? ''),
description: item?.description,
avatar: item?.avatar,
greeting: item?.greeting,
status: item?.status,
presetQuestions: Array.isArray(item?.presetQuestions) ? item.presetQuestions : []
}))
.filter((item: AgentItem) => Number.isFinite(item.id) && !!item.name);
}
function normalizeConversationList(payload: any): ConversationSummaryItem[] {
const container = payload?.data ?? payload;
@@ -29,11 +53,12 @@ function normalizeConversationList(payload: any): ConversationSummaryItem[] {
.map((item: any) => ({
conversationId: String(item?.conversationId ?? item?.id ?? ''),
title: String(item?.title ?? item?.name ?? ''),
lastMessageDt: item?.lastMessageDt ?? item?.updateTime ?? item?.updateDt,
createDt: item?.createDt ?? item?.createTime
lastMessageDt: item?.lastMessageDt ?? item?.updateDt ?? item?.updateTime,
createDt: item?.createDt ?? item?.createTime,
updateDt: item?.updateDt
}))
.filter((item: ConversationSummaryItem) => !!item.conversationId)
.sort((a: ConversationSummaryItem, b: ConversationSummaryItem) => {
.toSorted((a: ConversationSummaryItem, b: ConversationSummaryItem) => {
const ta = new Date(a.lastMessageDt || a.createDt || 0).getTime();
const tb = new Date(b.lastMessageDt || b.createDt || 0).getTime();
return tb - ta;
@@ -41,11 +66,16 @@ function normalizeConversationList(payload: any): ConversationSummaryItem[] {
}
async function loadAgents() {
const { data: user } = await registerCurrentSnailUser();
currentNickname.value = user?.nickname || '';
const { data } = await fetchMyAgents();
agents.value = Array.isArray(data) ? data : [];
currentAgent.value = agents.value[0] || null;
loading.value = true;
try {
const { data: user } = await registerCurrentSnailUser();
currentNickname.value = user?.nickname || '';
const { data } = await fetchMyAgents();
agents.value = normalizeAgentList(data);
currentAgent.value = agents.value.find(item => item.id === currentAgent.value?.id) || agents.value[0] || null;
} finally {
loading.value = false;
}
}
async function loadConversations(agentId: number) {
@@ -63,6 +93,25 @@ async function onSelectAgent(agent: AgentItem) {
await loadConversations(agent.id);
}
async function onDeleteConversation(conversationId: string) {
if (!currentAgent.value) return;
try {
await ElMessageBox.confirm('确认删除该会话记录？', '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
});
} catch {
return;
}
await deleteConversation(currentAgent.value.id, conversationId);
if (currentConversationId.value === conversationId) {
currentConversationId.value = '';
}
await loadConversations(currentAgent.value.id);
ElMessage.success('删除成功');
}
onMounted(() => {
loadAgents().then(async () => {
if (currentAgent.value) {
@@ -82,6 +131,7 @@ onMounted(() => {
</header>
<div class="chat-body">
<ChatSidebar
v-loading="loading"
:agents="agents"
:conversations="conversations"
:current-agent="currentAgent"
@@ -89,6 +139,7 @@ onMounted(() => {
:current-nickname="currentNickname"
@select-agent="onSelectAgent"
@select-conversation="currentConversationId = $event"
@delete-conversation="onDeleteConversation"
@new-chat="currentConversationId = ''"
/>
<ChatMain
@@ -106,15 +157,15 @@ onMounted(() => {
flex-direction: column;
height: calc(100vh - 84px);
min-height: 0;
background: #f5f6f8;
background: var(--el-bg-color-page);
overflow: hidden;
}
.chat-header {
height: 46px;
padding: 0 14px;
border-bottom: 1px solid #e6e8ee;
background: #fff;
border-bottom: 1px solid var(--app-surface-border);
background: var(--app-surface-bg);
display: flex;
align-items: center;
}
@@ -123,7 +174,7 @@ onMounted(() => {
display: flex;
align-items: center;
gap: 8px;
color: #8b90a0;
color: var(--app-text-title);
font-size: 18px;
font-weight: 600;
}
@@ -132,7 +183,7 @@ onMounted(() => {
width: 16px;
height: 16px;
border-radius: 50%;
background: #6f76ff;
background: var(--el-color-primary);
}
.chat-body {
@@ -141,4 +192,14 @@ onMounted(() => {
overflow: hidden;
min-height: 0;
}
@media (max-width: 768px) {
.ai-chat-page {
height: calc(100vh - 64px);
}
.chat-body {
flex-direction: column;
}
}
</style>
src/views/ai/chat/modules/chat-input.vue
+5 -4
View File
@@ -29,7 +29,7 @@ function submit() {
placeholder="给智能体发消息"
@keydown.enter.exact.prevent="submit"
/>
<el-button type="primary" circle :disabled="sending" @click="submit">
<el-button type="primary" circle :loading="sending" :disabled="sending" @click="submit">
<el-icon><Promotion /></el-icon>
</el-button>
</div>
@@ -45,10 +45,11 @@ function submit() {
.chat-input-box {
max-width: 920px;
margin: 0 auto;
border-radius: 16px;
border: 1px solid #dde2eb;
background: #fff;
border-radius: 8px;
border: 1px solid var(--app-surface-border);
background: var(--app-surface-bg);
padding: 12px;
box-shadow: var(--app-shadow-sm);
}
.input-row {
src/views/ai/chat/modules/chat-main.vue
+116 -101
View File
@@ -1,18 +1,10 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { computed, onBeforeUnmount, ref, watch } from 'vue';
import { createConversation, fetchAgentChat, fetchAgentChatSync, fetchChatMode, fetchConversationMessages } from '@/api/ai/agent';
import type { AgentItem } from '@/api/ai/agent/types';
import { ElMessage } from 'element-plus';
import ChatInput from './chat-input.vue';
interface AgentItem {
id: number;
name: string;
description?: string;
greeting?: string;
presetQuestions?: string[];
webSearchEnabled?: boolean;
}
const props = defineProps<{
agent: AgentItem | null;
conversationId: string;
@@ -29,7 +21,9 @@ interface ChatMessage {
const messages = ref<ChatMessage[]>([]);
const sending = ref(false);
const sendMode = ref<'stream' | 'sync'>('stream');
const streamTimeout = 300000;
let sendingTimer: ReturnType<typeof setTimeout> | null = null;
let activeController: AbortController | null = null;
const showWelcome = computed(() => !!props.agent && !props.conversationId && !messages.value.length);
const displayQuestions = computed(() => {
@@ -154,31 +148,47 @@ async function loadMessages() {
messages.value = normalizeMessageList(data);
}
function clearSendingTimer() {
if (sendingTimer) {
clearTimeout(sendingTimer);
sendingTimer = null;
}
}
function finishSending() {
sending.value = false;
clearSendingTimer();
activeController = null;
}
async function onSend(content: string) {
if (!props.agent || !content.trim() || sending.value) return;
sending.value = true;
if (sendingTimer) clearTimeout(sendingTimer);
clearSendingTimer();
sendingTimer = setTimeout(() => {
if (sending.value) {
sending.value = false;
activeController?.abort();
finishSending();
ElMessage.warning('响应超时，已恢复发送按钮，请重试');
}
}, 60000);
}, streamTimeout);
let targetConversationId = props.conversationId;
if (!targetConversationId) {
messages.value = [];
const { data } = await createConversation(props.agent.id, { title: content.slice(0, 20) });
if (!data?.conversationId) {
sending.value = false;
if (sendingTimer) {
clearTimeout(sendingTimer);
sendingTimer = null;
try {
const { data } = await createConversation(props.agent.id, { title: content.slice(0, 20) });
if (!data?.conversationId) {
finishSending();
ElMessage.error('创建会话失败，请稍后重试');
return;
}
ElMessage.error('创建会话失败，请稍后重试');
targetConversationId = data.conversationId;
emit('conversationCreated', targetConversationId);
} catch (error: any) {
finishSending();
ElMessage.error(error?.message || '创建会话失败，请稍后重试');
return;
}
targetConversationId = data.conversationId;
emit('conversationCreated', targetConversationId);
}
messages.value.push({ role: 'user', content });
@@ -186,60 +196,49 @@ async function onSend(content: string) {
try {
const { data } = await fetchAgentChatSync(props.agent.id, {
conversationId: targetConversationId,
content,
webSearchEnabled: props.agent.webSearchEnabled
content
});
const reply = extractSyncReply(data) || '（后端已返回空消息）';
messages.value.push({ role: 'assistant', content: reply });
} catch (error: any) {
ElMessage.error(error?.message || '对话失败，请稍后重试');
} finally {
sending.value = false;
if (sendingTimer) {
clearTimeout(sendingTimer);
sendingTimer = null;
}
finishSending();
}
return;
}
messages.value.push({ role: 'assistant', content: '' });
const assistantIndex = messages.value.length - 1;
fetchAgentChat(
props.agent.id,
{
conversationId: targetConversationId,
content,
webSearchEnabled: props.agent.webSearchEnabled
activeController?.abort();
activeController = new AbortController();
void fetchAgentChat(
props.agent.id,
{
conversationId: targetConversationId,
content
},
{
signal: activeController.signal,
onMessage(chunk) {
const msg = messages.value[assistantIndex];
if (msg) msg.content += normalizeStreamChunk(chunk);
},
{
onMessage(chunk) {
const msg = messages.value[assistantIndex];
if (msg) msg.content += normalizeStreamChunk(chunk);
},
onThinking() {},
onDone() {
const msg = messages.value[assistantIndex];
if (msg && !msg.content.trim()) {
msg.content = '（后端已返回空消息）';
}
sending.value = false;
if (sendingTimer) {
clearTimeout(sendingTimer);
sendingTimer = null;
}
},
onError(error) {
messages.value.splice(assistantIndex, 1);
sending.value = false;
if (sendingTimer) {
clearTimeout(sendingTimer);
sendingTimer = null;
}
ElMessage.error(error.message || '对话失败，请稍后重试');
onThinking() {},
onDone() {
const msg = messages.value[assistantIndex];
if (msg && !msg.content.trim()) {
msg.content = '（后端已返回空消息）';
}
finishSending();
},
onError(error) {
messages.value.splice(assistantIndex, 1);
finishSending();
ElMessage.error(error.message || '对话失败，请稍后重试');
}
);
}
);
}
watch(
@@ -248,11 +247,8 @@ watch(
if (sending.value && convId) {
return;
}
sending.value = false;
if (sendingTimer) {
clearTimeout(sendingTimer);
sendingTimer = null;
}
activeController?.abort();
finishSending();
if (agentId && convId) {
await loadMessages();
} else if (agentId && !convId) {
@@ -263,6 +259,11 @@ watch(
);
loadSendMode();
onBeforeUnmount(() => {
activeController?.abort();
clearSendingTimer();
});
</script>
<template>
@@ -273,28 +274,23 @@ loadSendMode();
<div class="chat-content">
<div v-if="showWelcome" class="welcome-card">
<div class="card-head">
<span class="avatar-dot" />
<el-avatar class="agent-avatar" :size="36" :src="agent.avatar">{{ agent.name.slice(0, 1) }}</el-avatar>
<div class="title-block">
<div class="agent-name">{{ agent.name }}</div>
<div class="agent-desc">{{ agent.description || '暂无描述' }}</div>
<div class="agent-desc">{{ agent.description || '暂无描述' }}</div>
</div>
</div>
</div>
<div class="greeting">{{ agent.greeting || '你好，我是你的智能助手。' }}</div>
<div v-if="displayQuestions.length" class="question-title">推荐问题</div>
<div v-if="displayQuestions.length" class="question-list">
<button
v-for="q in displayQuestions"
:key="q"
class="question-pill"
@click="onSend(q)"
>
<button v-for="q in displayQuestions" :key="q" class="question-pill" @click="onSend(q)">
{{ q }}
</button>
</div>
</div>
<div v-for="(msg, idx) in messages" :key="idx" class="msg-row" :class="{ user: msg.role === 'user' }">
<div class="msg-bubble">{{ msg.content }}</div>
<div class="msg-bubble" :class="{ pending: msg.role === 'assistant' && !msg.content }">{{ msg.content || '正在生成...' }}</div>
</div>
</div>
</el-scrollbar>
@@ -318,7 +314,7 @@ loadSendMode();
display: flex;
align-items: center;
justify-content: center;
color: #98a0af;
color: var(--app-text-muted);
}
.chat-scroll {
@@ -334,11 +330,12 @@ loadSendMode();
}
.welcome-card {
background: #fff;
border: 1px solid #e4e8f0;
border-radius: 14px;
background: var(--app-surface-bg);
border: 1px solid var(--app-surface-border);
border-radius: 8px;
padding: 16px;
margin-bottom: 14px;
box-shadow: var(--app-shadow-sm);
}
.card-head {
@@ -346,36 +343,33 @@ loadSendMode();
gap: 10px;
}
.avatar-dot {
margin-top: 2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #3f434b;
.agent-avatar {
flex-shrink: 0;
background: var(--el-color-primary);
}
.agent-name {
font-size: 20px;
font-weight: 700;
color: #1f2430;
color: var(--app-text-title);
}
.agent-desc {
margin-top: 4px;
color: #6f7687;
color: var(--app-text-muted);
line-height: 1.6;
}
.greeting {
margin-top: 12px;
color: #2b3240;
color: var(--app-text-title);
}
.question-title {
margin-top: 14px;
padding-top: 10px;
border-top: 1px solid #edf0f5;
color: #6f7687;
border-top: 1px solid var(--app-surface-border);
color: var(--app-text-muted);
font-size: 13px;
}
@@ -387,14 +381,19 @@ loadSendMode();
}
.question-pill {
border: 1px solid #e0e5ef;
background: #fff;
color: #3a4252;
border-radius: 999px;
border: 1px solid var(--app-surface-border);
background: var(--app-surface-bg);
color: var(--app-text-title);
border-radius: 8px;
padding: 6px 12px;
cursor: pointer;
}
.question-pill:hover {
border-color: var(--el-color-primary);
color: var(--el-color-primary);
}
.msg-row {
display: flex;
margin-bottom: 12px;
@@ -408,15 +407,31 @@ loadSendMode();
max-width: 80%;
white-space: pre-wrap;
line-height: 1.7;
background: #fff;
border: 1px solid #e4e8f0;
border-radius: 12px;
background: var(--app-surface-bg);
border: 1px solid var(--app-surface-border);
border-radius: 8px;
padding: 10px 12px;
color: var(--app-text-title);
box-shadow: var(--app-shadow-sm);
}
.msg-row.user .msg-bubble {
background: #e9ecff;
border-color: #d7dcff;
color: #4552d9;
background: var(--el-color-primary-light-9);
border-color: var(--el-color-primary-light-7);
color: var(--el-color-primary);
}
.msg-bubble.pending {
color: var(--app-text-muted);
}
@media (max-width: 768px) {
.chat-scroll {
padding: 12px 12px 0;
}
.msg-bubble {
max-width: 92%;
}
}
</style>
src/views/ai/chat/modules/chat-sidebar.vue
+66 -22
View File
@@ -16,6 +16,7 @@ interface ConversationItem {
const emit = defineEmits<{
selectAgent: [agent: AgentItem];
selectConversation: [conversationId: string];
deleteConversation: [conversationId: string];
newChat: [];
}>();
@@ -34,12 +35,16 @@ const avatarText = computed(() => (displayNickname.value ? displayNickname.value
<template>
<aside class="chat-sidebar">
<div class="sidebar-block sidebar-head">
<el-button class="new-btn" :disabled="!currentAgent" @click="emit('newChat')">+ 新对话</el-button>
<el-button class="new-btn" type="primary" plain :disabled="!currentAgent" @click="emit('newChat')">
<el-icon><Plus /></el-icon>
<span>新对话</span>
</el-button>
</div>
<el-scrollbar class="sidebar-scroll">
<div class="sidebar-block">
<div class="block-title">我的智能体</div>
<el-empty v-if="!agents.length" :image-size="54" description="暂无智能体" />
<div
v-for="agent in agents"
:key="agent.id"
@@ -54,6 +59,7 @@ const avatarText = computed(() => (displayNickname.value ? displayNickname.value
<div class="sidebar-block">
<div class="block-title">对话记录</div>
<el-empty v-if="!conversations.length" :image-size="54" description="暂无会话" />
<div
v-for="conv in conversations"
:key="conv.conversationId"
@@ -61,13 +67,16 @@ const avatarText = computed(() => (displayNickname.value ? displayNickname.value
:class="{ active: currentConversationId === conv.conversationId }"
@click="emit('selectConversation', conv.conversationId)"
>
{{ conv.title || '未命名会话' }}
<span class="conv-title">{{ conv.title || '未命名会话' }}</span>
<el-button class="delete-btn" link type="danger" circle @click.stop="emit('deleteConversation', conv.conversationId)">
<el-icon><Delete /></el-icon>
</el-button>
</div>
</div>
</el-scrollbar>
<div class="sidebar-foot">
<div class="user-avatar">{{ avatarText }}</div>
<div class="user-avatar">{{ avatarText }}</div>
<div>
<div class="user-name">{{ displayNickname }}</div>
<div class="user-status">已登录</div>
@@ -79,10 +88,11 @@ const avatarText = computed(() => (displayNickname.value ? displayNickname.value
<style scoped lang="scss">
.chat-sidebar {
width: 234px;
border-right: 1px solid #e5e8ef;
background: #f8f9fc;
border-right: 1px solid var(--app-surface-border);
background: var(--app-elevated-soft-bg);
display: flex;
flex-direction: column;
min-height: 0;
}
.sidebar-head {
@@ -103,16 +113,10 @@ const avatarText = computed(() => (displayNickname.value ? displayNickname.value
.block-title {
margin-bottom: 10px;
color: #8a8fa2;
color: var(--app-text-muted);
font-size: 12px;
}
.sub-title {
margin-bottom: 6px;
color: #9399aa;
font-size: 13px;
}
.agent-item,
.conv-item {
height: 36px;
@@ -121,51 +125,73 @@ const avatarText = computed(() => (displayNickname.value ? displayNickname.value
display: flex;
align-items: center;
gap: 8px;
color: #2a2e38;
color: var(--app-text-title);
cursor: pointer;
}
.agent-item:hover,
.conv-item:hover {
background: #eef1f6;
background: var(--el-fill-color-light);
}
.agent-item.active,
.conv-item.active {
background: #e9ecff;
color: #4d57ea;
background: var(--el-color-primary-light-9);
color: var(--el-color-primary);
}
.avatar-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: #3f434b;
background: var(--el-color-primary);
}
.name {
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.conv-item {
font-size: 13px;
}
.conv-title {
min-width: 0;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.delete-btn {
width: 24px;
height: 24px;
visibility: hidden;
}
.conv-item:hover .delete-btn,
.conv-item.active .delete-btn {
visibility: visible;
}
.sidebar-foot {
border-top: 1px solid #e5e8ef;
border-top: 1px solid var(--app-surface-border);
padding: 10px 12px;
display: flex;
align-items: center;
gap: 10px;
background: #fff;
background: var(--app-surface-bg);
}
.user-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background: #1dbf73;
color: #fff;
background: var(--el-color-success);
color: var(--el-color-white);
display: flex;
align-items: center;
justify-content: center;
@@ -175,10 +201,28 @@ const avatarText = computed(() => (displayNickname.value ? displayNickname.value
.user-name {
font-size: 14px;
font-weight: 600;
color: var(--app-text-title);
}
.user-status {
color: #8f95a3;
color: var(--app-text-muted);
font-size: 12px;
}
:deep(.el-empty) {
--el-empty-padding: 8px 0 12px;
}
@media (max-width: 768px) {
.chat-sidebar {
width: 100%;
height: 224px;
border-right: 0;
border-bottom: 1px solid var(--app-surface-border);
}
.sidebar-foot {
display: none;
}
}
</style>