feat: improve agent chat entry

web/apps/web-ele/src/router/prefetch.ts

@@ -143,6 +143,7 @@ function prefetchAiPlatformPages(currentPath = '') {
 
   if (isAiPlatformRoute(currentPath)) {
     delayedPrefetch(aiManagementPrefetchTasks, 2000);
+    delayedPrefetch(aiInteractivePrefetchTasks, 4500);
     return;
   }
 

web/apps/web-ele/src/views/_core/agent-chat/index.vue

@@ -8,7 +8,7 @@ import { Page } from '@vben/common-ui/es/page';
 import { PanelLeft, PanelRight } from '@vben/icons';
 import { $t } from '@vben/locales';
 
-import { ElButton, ElEmpty } from 'element-plus';
+import { ElButton, ElEmpty, ElTag } from 'element-plus';
 
 import { getAgentByCodeApi } from '#/api/ai-platform/ai-platform';
 
@@ -53,6 +53,43 @@ const currentConversationId = ref<null | string>(null);
 const showHistoryPanel = ref(false);
 const conversationListRef = ref();
 
+const agentModeLabel = computed(() => {
+  const mode = agent.value?.mode;
+  if (mode === 'autonomous') return '自主规划';
+  if (mode === 'dialog_flow') return '对话流';
+  return mode || '-';
+});
+
+const agentStatusLabel = computed(() => {
+  const status = agent.value?.status;
+  if (status === 'published') return '已发布';
+  if (status === 'draft') return '草稿';
+  if (status === 'disabled') return '已停用';
+  return status || '-';
+});
+
+const agentStatusType = computed(() => {
+  const status = agent.value?.status;
+  if (status === 'published') return 'success';
+  if (status === 'disabled') return 'danger';
+  return 'warning';
+});
+
+const modelLabel = computed(
+  () => agent.value?.model_name || agent.value?.model_id || '默认 Chat 模型',
+);
+
+const agentDescription = computed(
+  () =>
+    agent.value?.description ||
+    agent.value?.welcome_message ||
+    '发送消息后开始智能体协作。',
+);
+
+const historyButtonTitle = computed(() =>
+  showHistoryPanel.value ? '收起历史' : '打开历史',
+);
+
 // 加载智能体
 async function loadAgent() {
   if (!agentCode.value) {
@@ -128,7 +165,7 @@ onMounted(() => {
         <!-- 左侧历史记录面板 -->
         <div
           v-if="showHistoryPanel"
-          class="bg-card mr-3 h-full w-64 flex-shrink-0 rounded-[8px]"
+          class="bg-card mr-3 h-full w-64 flex-shrink-0 overflow-hidden rounded-[8px] border border-[var(--el-border-color-lighter)]"
         >
           <ConversationList
             ref="conversationListRef"
@@ -141,14 +178,34 @@ onMounted(() => {
         </div>
 
         <!-- 聊天面板 -->
-        <div class="relative flex flex-1 flex-col overflow-hidden">
+        <div class="agent-chat-shell flex flex-1 flex-col overflow-hidden">
-          <!-- 切换按钮 -->
+          <div
-          <ElButton
+            class="flex min-h-[64px] items-center gap-3 border-b border-[var(--el-border-color-lighter)] px-4 py-3"
-            class="absolute left-2 top-2 z-10"
+          >
-            :icon="showHistoryPanel ? PanelLeft : PanelRight"
+            <ElButton
-            link
+              :icon="showHistoryPanel ? PanelLeft : PanelRight"
-            @click="toggleHistoryPanel"
+              :title="historyButtonTitle"
-          />
+              link
+              @click="toggleHistoryPanel"
+            />
+            <div class="min-w-0 flex-1">
+              <div class="flex min-w-0 items-center gap-2">
+                <div class="truncate text-base font-semibold">
+                  {{ agent.name }}
+                </div>
+                <ElTag :type="agentStatusType" size="small">
+                  {{ agentStatusLabel }}
+                </ElTag>
+              </div>
+              <div class="text-muted-foreground mt-1 truncate text-xs">
+                {{ agentDescription }}
+              </div>
+            </div>
+            <div class="hidden flex-shrink-0 items-center gap-2 md:flex">
+              <ElTag size="small" type="info">{{ agentModeLabel }}</ElTag>
+              <ElTag size="small" type="info">模型：{{ modelLabel }}</ElTag>
+            </div>
+          </div>
 
           <AiChatPanel
             :key="currentConversationId || 'new'"
@@ -161,7 +218,7 @@ onMounted(() => {
             :enable-image="true"
             :show-clear-button="true"
             :show-header="false"
-            class="flex-1"
+            class="agent-chat-panel min-h-0 flex-1"
             @message-complete="handleMessageComplete"
           />
         </div>
@@ -169,3 +226,16 @@ onMounted(() => {
     </div>
   </Page>
 </template>
+
+<style scoped>
+.agent-chat-shell {
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+  background: var(--el-bg-color);
+}
+
+.agent-chat-panel :deep(.chatbox) {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+</style>