From 3bca00a864b19526ffbce86a9dc0a13478415e58 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Mon, 25 Aug 2025 01:46:31 +0800
Subject: [PATCH] =?UTF-8?q?refactor(agent):=20=E9=87=8D=E6=9E=84=E6=99=BA?=
 =?UTF-8?q?=E8=83=BD=E4=BD=93=E7=9B=B8=E5=85=B3=E9=80=BB=E8=BE=91=E8=87=B3?=
 =?UTF-8?q?Pinia=20store?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将智能体管理、配置、线程和消息等逻辑从组件中抽离，统一管理至Pinia store
优化代码结构，提升可维护性和复用性
修复多处直接调用API的问题，统一通过store管理状态
---
 web/src/App.vue                              |   8 +
 web/src/components/AgentChatComponent.vue    | 159 +++----
 web/src/components/AgentConfigSidebar.vue    | 134 +++---
 web/src/components/AgentMessageComponent.vue |  18 +-
 web/src/router/index.js                      |  31 +-
 web/src/stores/agent.js                      | 445 +++++++++++++++++++
 web/src/views/AgentView.vue                  | 263 +++--------
 web/src/views/HomeView.vue                   |  21 +-
 web/src/views/LoginView.vue                  |  17 +-
 9 files changed, 712 insertions(+), 384 deletions(-)
 create mode 100644 web/src/stores/agent.js

diff --git a/web/src/App.vue b/web/src/App.vue
index a5615884..71c309b4 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,5 +1,13 @@
 <script setup>
 import { themeConfig } from '@/assets/theme'
+import { useAgentStore } from '@/stores/agent'
+import { onMounted } from 'vue'
+
+const agentStore = useAgentStore();
+
+onMounted(async () => {
+  await agentStore.initialize();
+})
 </script>
 <template>
   <a-config-provider :theme="themeConfig">
diff --git a/web/src/components/AgentChatComponent.vue b/web/src/components/AgentChatComponent.vue
index e7a0a282..c60a6f0d 100644
--- a/web/src/components/AgentChatComponent.vue
+++ b/web/src/components/AgentChatComponent.vue
@@ -7,7 +7,7 @@
       :is-initial-render="state.isInitialRender"
       :single-mode="props.singleMode"
       :agents="agents"
-      :selected-agent-id="props.agentId"
+      :selected-agent-id="agentStore.selectedAgentId"
       @create-chat="createNewChat"
       @select-chat="selectChat"
       @delete-chat="deleteChat"
@@ -34,8 +34,8 @@
           </div>
         </div>
         <div class="header__center" @mouseenter="showRenameButton = true" @mouseleave="showRenameButton = false">
-          <div @click="console.log(currentChat)" class="center-title">
-            {{ currentChat?.title }}
+          <div @click="console.log(agentStore.currentThread)" class="center-title">
+            {{ agentStore.currentThread?.title }}
           </div>
           <div class="rename-button" v-if="currentChatId" :class="{ 'visible': showRenameButton }" @click="handleRenameChat">
             <EditOutlined style="font-size: 14px; color: var(--gray-600);"/>
@@ -54,7 +54,7 @@
         </div>
       </div>
 
-      <div v-if="isLoading" class="chat-loading">
+      <div v-if="isLoadingThreads || isLoadingMessages" class="chat-loading">
         <LoadingOutlined />
         <span>正在加载历史记录...</span>
       </div>
@@ -147,19 +147,12 @@ import MessageInputComponent from '@/components/MessageInputComponent.vue'
 import AgentMessageComponent from '@/components/AgentMessageComponent.vue'
 import ChatSidebarComponent from '@/components/ChatSidebarComponent.vue'
 import RefsComponent from '@/components/RefsComponent.vue'
-import { agentApi, threadApi } from '@/apis/agent'
 import { PanelLeftOpen, MessageSquarePlus } from 'lucide-vue-next';
+import { useAgentStore } from '@/stores/agent';
+import { storeToRefs } from 'pinia';
 
 // 新增props属性，允许父组件传入agentId
 const props = defineProps({
-  agentId: {
-    type: String,
-    default: null
-  },
-  config: {
-    type: Object,
-    default: () => ({})
-  },
   state: {
     type: Object,
     default: () => ({})
@@ -172,6 +165,19 @@ const props = defineProps({
 
 const emit = defineEmits(['open-config', 'open-agent-modal']);
 
+// ==================== Store 管理 ====================
+const agentStore = useAgentStore();
+const {
+  agents,
+  currentAgentThreads,
+  currentThread,
+  currentThreadMessages,
+  isLoadingThreads,
+  isLoadingMessages,
+  selectedAgent,
+  configSchema
+} = storeToRefs(agentStore);
+
 // ==================== 状态管理 ====================
 
 // UI状态
@@ -272,15 +278,17 @@ const getLastMessage = (conv) => {
 const messagesContainer = ref(null);
 
 // 数据状态
-const agents = ref({});                // 智能体列表
 const userInput = ref('');             // 用户输入
-const currentChatId = ref(null);       // 当前对话ID
-const chatsList = ref([]);             // 对话列表
-const isLoading = ref(false);          // 是否处于加载状态
 
 const convs = ref([]);
-const currentAgent = computed(() => agents.value[props.agentId]);
-const currentChat = computed(() => chatsList.value.find(chat => chat.id === currentChatId.value));
+const currentAgent = computed(() => {
+  if (!agentStore.selectedAgentId || !agents.value) return null;
+  return agents.value[agentStore.selectedAgentId];
+});
+
+// 使用 agentStore 的线程相关计算属性
+const currentChatId = computed(() => agentStore.currentThreadId);
+const chatsList = computed(() => currentAgentThreads.value || []);
 
 const onGoingConv = reactive({
   msgChunks: {},
@@ -308,7 +316,7 @@ const expandedToolCalls = ref(new Set()); // 展开的工具调用集合
 // 创建新对话
 const createNewChat = async () => {
   // 确保有AgentID
-  if (!props.agentId) {
+  if (!agentStore.selectedAgentId) {
     console.warn("未指定AgentID，无法创建对话");
     return;
   }
@@ -319,24 +327,20 @@ const createNewChat = async () => {
     return;
   }
 
-  if (currentChatId.value &&convs.value.length === 0) {
+  if (currentChatId.value && convs.value.length === 0) {
     return;
   }
 
   try {
-    // 调用API创建新对话
+    // 使用 agentStore 创建新对话
     state.creatingNewChat = true;
-    const response = await threadApi.createThread(props.agentId, '新的对话');
-    if (!response || !response.id) {
+    const thread = await agentStore.createThread(agentStore.selectedAgentId, '新的对话');
+    if (!thread || !thread.id) {
       throw new Error('创建对话失败');
     }
 
-    // 切换到新对话
-    currentChatId.value = response.id;
+    // 重置线程状态
     resetThread();
-
-    // 刷新对话列表
-    loadChatsList();
   } catch (error) {
     console.error('创建对话失败:', error);
     message.error('创建对话失败');
@@ -348,37 +352,33 @@ const createNewChat = async () => {
 // 选择已有对话
 const selectChat = async (chatId) => {
   // 确保有AgentID
-  if (!props.agentId) {
+  if (!agentStore.selectedAgentId) {
     console.warn("未指定AgentID，无法选择对话");
     return;
   }
 
   console.log("选择对话:", chatId);
 
-  // 切换到选中的对话
-  currentChatId.value = chatId;
+  // 使用 agentStore 选择线程
+  agentStore.selectThread(chatId);
   await getAgentHistory();
 };
 
 // 删除对话
 const deleteChat = async (chatId) => {
-  if (!props.agentId) {
+  if (!agentStore.selectedAgentId) {
     console.warn("未指定AgentID，无法删除对话");
     return;
   }
 
   try {
-    // 调用API删除对话
-    await threadApi.deleteThread(chatId);
+    // 使用 agentStore 删除对话
+    await agentStore.deleteThread(chatId);
 
     // 如果删除的是当前对话，重置状态
     if (chatId === currentChatId.value) {
       resetThread();
-      currentChatId.value = null;
     }
-
-    // 刷新对话列表
-    loadChatsList();
   } catch (error) {
     console.error('删除对话失败:', error);
     message.error('删除对话失败');
@@ -395,7 +395,7 @@ const renameChat = async (data) => {
   }
 
   // 确保有AgentID
-  if (!props.agentId) {
+  if (!agentStore.selectedAgentId) {
     console.warn("未指定AgentID，无法重命名对话");
     return;
   }
@@ -406,11 +406,8 @@ const renameChat = async (data) => {
   }
 
   try {
-    // 调用API更新对话
-    await threadApi.updateThread(chatId, title);
-
-    // 刷新对话列表
-    loadChatsList();
+    // 使用 agentStore 更新对话
+    await agentStore.updateThread(chatId, title);
   } catch (error) {
     console.error('重命名对话失败:', error);
     message.error('重命名对话失败');
@@ -419,12 +416,12 @@ const renameChat = async (data) => {
 
 // 处理重命名对话点击事件
 const handleRenameChat = () => {
-  if (!currentChatId.value || !currentChat.value) {
+  if (!currentChatId.value || !currentThread.value) {
     message.warning('请先选择对话');
     return;
   }
 
-  let newTitle = currentChat.value.title;
+  let newTitle = currentThread.value.title;
 
   Modal.confirm({
     title: '重命名对话',
@@ -473,7 +470,7 @@ const shareChat = () => {
     const link = document.createElement('a');
 
     // 生成文件名
-    const chatTitle = currentChat.value?.title || '新对话';
+    const chatTitle = currentThread.value?.title || '新对话';
     const timestamp = new Date().toLocaleString('zh-CN').replace(/[:/\s]/g, '-');
     const filename = `${chatTitle}-${timestamp}.html`;
 
@@ -497,7 +494,7 @@ const shareChat = () => {
 
 // 生成对话的HTML内容
 const generateChatHTML = () => {
-  const chatTitle = currentChat.value?.title || '新对话';
+  const chatTitle = agentStore.currentThread.value?.title || '新对话';
   const agentName = currentAgent.value?.name || '智能助手';
   const agentDescription = currentAgent.value?.description || '';
   const exportTime = new Date().toLocaleString('zh-CN');
@@ -939,7 +936,7 @@ const sendMessageToServer = async (text) => {
   const requestData = {
     query: text.trim(),
     config: {
-      ...props.config,
+      ...agentStore.agentConfig,
       thread_id: currentChatId.value
     },
     meta: {
@@ -950,7 +947,7 @@ const sendMessageToServer = async (text) => {
   try {
     state.waitingServerResponse = true;
 
-    const response = await agentApi.sendAgentMessage(currentAgent.value.id, requestData);
+    const response = await agentStore.sendMessage(currentAgent.value.id, requestData);
     if (!response.ok) {
       throw new Error('请求失败');
     }
@@ -1049,52 +1046,37 @@ const processResponseChunk = async (data) => {
 // 初始化所有数据
 const initAll = async () => {
   try {
-    isLoading.value = true;
-    // 获取智能体列表
+    // 使用 agentStore 的加载状态
+    // 初始化agent store（如果还未初始化）
+    if (!agentStore.agents || Object.keys(agentStore.agents).length === 0) {
+      await agentStore.initialize();
+    }
+    // 加载对话列表以及对话历史
     setTimeout(async () => {
-      await fetchAgents();  // 加载智能体数据
-      await loadChatsList();     // 加载对话列表以及对话历史
-      isLoading.value = false;
+      await loadChatsList();
     }, 100);
 
   } catch (error) {
     console.error("组件挂载出错:", error);
     message.error(`加载数据失败: ${error}`);
-    isLoading.value = false;
   }
 }
 
-// 获取智能体列表
-const fetchAgents = async () => {
-  try {
-    const data = await agentApi.getAgents();
-    // 将数组转换为对象
-    agents.value = data.agents.reduce((acc, agent) => {
-      acc[agent.id] = agent;
-      return acc;
-    }, {});
-    console.log("agents", agents.value);
-  } catch (error) {
-    console.error('获取智能体错误:', error);
-  }
-};
-
 // 从服务器对话列表
 const loadChatsList = async () => {
   try {
-    if (!props.agentId) {
+    if (!agentStore.selectedAgentId) {
       console.warn("未指定AgentID，无法加载状态");
       return;
     }
 
-    // 获取对话列表
-    const threads = await threadApi.getThreads(props.agentId);
+    // 使用 agentStore 获取对话列表
+    await agentStore.fetchThreads(agentStore.selectedAgentId);
 
-    if (threads && Array.isArray(threads) && threads.length > 0) {
-      // 如果有对话，则加载最近的一个
-      chatsList.value = threads;
-      currentChatId.value = threads[0].id; // 假设已按更新时间排序
-      await getAgentHistory()
+    if (currentAgentThreads.value && currentAgentThreads.value.length > 0) {
+      // 如果有对话，则选择最近的一个
+      await agentStore.selectThread(currentAgentThreads.value[0].id);
+      await getAgentHistory();
     } else {
       // 如果没有对话，创建新对话
       await createNewChat();
@@ -1106,21 +1088,22 @@ const loadChatsList = async () => {
 
 // 获取智能体历史记录
 const getAgentHistory = async () => {
-  if (!props.agentId || !currentChatId.value) {
+  if (!agentStore.selectedAgentId || !currentChatId.value) {
     console.warn('未选择智能体或对话ID');
     return;
   }
 
   try {
-    console.debug(`正在获取智能体[${props.agentId}]的历史记录，对话ID: ${currentChatId.value}`);
-    const response = await agentApi.getAgentHistory(props.agentId, currentChatId.value);
-    console.debug('智能体历史记录:', response);
+    console.debug(`正在获取智能体[${agentStore.selectedAgentId}]的历史记录，对话ID: ${currentChatId.value}`);
 
-    // 如果成功获取历史记录并且是数组
-    if (response && Array.isArray(response.history)) {
+
+    // 使用 agentStore 获取线程消息
+    await agentStore.fetchThreadMessages(currentChatId.value);
+    // 从 store 获取消息并转换格式
+    if (currentThreadMessages.value && Array.isArray(currentThreadMessages.value)) {
       // 将服务器格式的历史记录转换为组件格式
       onGoingConv.msgChunks = {};
-      convs.value = convertServerHistoryToMessages(response.history);
+      convs.value = convertServerHistoryToMessages(currentThreadMessages.value);
 
       // 加载历史记录后，启用自动滚动并滚动到底部
       shouldAutoScroll.value = true;
@@ -1202,7 +1185,7 @@ onMounted(async () => {
 
 // 监听agentId变化
 onMounted(() => {
-  watch(() => props.agentId, async (newAgentId, oldAgentId) => {
+  watch(() => agentStore.selectedAgentId, async (newAgentId, oldAgentId) => {
     try {
       console.debug("智能体ID变化", oldAgentId, "->", newAgentId);
 
diff --git a/web/src/components/AgentConfigSidebar.vue b/web/src/components/AgentConfigSidebar.vue
index 93a7235a..f577451e 100644
--- a/web/src/components/AgentConfigSidebar.vue
+++ b/web/src/components/AgentConfigSidebar.vue
@@ -18,7 +18,7 @@
 
     <!-- 侧边栏内容 -->
     <div class="sidebar-content">
-      <div class="agent-info">
+      <div class="agent-info" v-if="selectedAgent">
         <div class="agent-basic-info">
           <h4>{{ selectedAgent.name || '未选择智能体' }}</h4>
           <p class="agent-description">{{ selectedAgent.description }}</p>
@@ -70,7 +70,8 @@
                 <!-- 系统提示词 -->
                 <a-textarea
                   v-else-if="key === 'system_prompt'"
-                  v-model:value="agentConfig[key]"
+                  :value="agentConfig[key]"
+                  @update:value="(val) => agentStore.updateAgentConfig({ [key]: val })"
                   :rows="3"
                   :placeholder="getPlaceholder(key, value)"
                   class="system-prompt-input"
@@ -116,13 +117,15 @@
                 <!-- 布尔类型 -->
                 <a-switch
                   v-else-if="typeof agentConfig[key] === 'boolean'"
-                  v-model:checked="agentConfig[key]"
+                  :checked="agentConfig[key]"
+                  @update:checked="(val) => agentStore.updateAgentConfig({ [key]: val })"
                 />
 
                 <!-- 单选 -->
                 <a-select
                   v-else-if="value?.options && (value?.type === 'str' || value?.type === 'select')"
-                  v-model:value="agentConfig[key]"
+                  :value="agentConfig[key]"
+                  @update:value="(val) => agentStore.updateAgentConfig({ [key]: val })"
                   class="config-select"
                 >
                   <a-select-option v-for="option in value.options" :key="option" :value="option">
@@ -168,7 +171,8 @@
                 <!-- 数字 -->
                 <a-input-number
                   v-else-if="value?.type === 'number'"
-                  v-model:value="agentConfig[key]"
+                  :value="agentConfig[key]"
+                  @update:value="(val) => agentStore.updateAgentConfig({ [key]: val })"
                   :placeholder="getPlaceholder(key, value)"
                   class="config-input-number"
                 />
@@ -176,7 +180,8 @@
                 <!-- 滑块 -->
                 <a-slider
                   v-else-if="value?.type === 'slider'"
-                  v-model:value="agentConfig[key]"
+                  :value="agentConfig[key]"
+                  @update:value="(val) => agentStore.updateAgentConfig({ [key]: val })"
                   :min="value.min"
                   :max="value.max"
                   :step="value.step"
@@ -186,7 +191,8 @@
                 <!-- 其他类型 -->
                 <a-input
                   v-else
-                  v-model:value="agentConfig[key]"
+                  :value="agentConfig[key]"
+                  @update:value="(val) => agentStore.updateAgentConfig({ [key]: val })"
                   :placeholder="getPlaceholder(key, value)"
                   class="config-input"
                 />
@@ -279,45 +285,41 @@ import {
 } from '@ant-design/icons-vue';
 import { message } from 'ant-design-vue';
 import ModelSelectorComponent from '@/components/ModelSelectorComponent.vue';
-import { agentApi } from '@/apis/agent';
+import { useAgentStore } from '@/stores/agent';
+import { storeToRefs } from 'pinia';
 
 // Props
 const props = defineProps({
   isOpen: {
     type: Boolean,
     default: false
-  },
-  selectedAgent: {
-    type: Object,
-    default: () => ({})
-  },
-  selectedAgentId: {
-    type: String,
-    default: null
-  },
-  agentConfig: {
-    type: Object,
-    default: () => ({})
   }
 });
 
 // Emits
 const emit = defineEmits([
-  'close',
-  'update:agentConfig',
-  'config-saved',
-  'config-reset'
+  'close'
 ]);
 
+// Store 管理
+const agentStore = useAgentStore();
+const {
+  availableTools,
+  selectedAgent,
+  selectedAgentId,
+  agentConfig
+} = storeToRefs(agentStore);
+
+// console.log(availableTools.value)
+
 // 本地状态
 const debugMode = ref(false);
 const toolsModalOpen = ref(false);
-const availableTools = ref([]);
 const selectedTools = ref([]);
 const toolsSearchText = ref('');
 
 // 计算属性
-const configSchema = computed(() => props.selectedAgent.config_schema || {});
+const configSchema = computed(() => selectedAgent.value?.config_schema || {});
 
 const configurableItems = computed(() => {
   const items = configSchema.value.configurable_items || {};
@@ -333,15 +335,16 @@ const configurableItems = computed(() => {
 });
 
 const isEmptyConfig = computed(() => {
-  return !props.selectedAgentId || Object.keys(configurableItems.value).length === 0;
+  return !selectedAgentId.value || Object.keys(configurableItems.value).length === 0;
 });
 
 const filteredTools = computed(() => {
+  const toolsList = availableTools.value ? Object.values(availableTools.value) : [];
   if (!toolsSearchText.value) {
-    return availableTools.value;
+    return toolsList;
   }
   const searchLower = toolsSearchText.value.toLowerCase();
-  return availableTools.value.filter(tool =>
+  return toolsList.filter(tool =>
     tool.name.toLowerCase().includes(searchLower) ||
     tool.description.toLowerCase().includes(searchLower)
   );
@@ -357,6 +360,7 @@ const toggleDebugMode = () => {
 };
 
 const getConfigLabel = (key, value) => {
+  // console.log(configurableItems)
   if (value.description && value.name !== key) {
     return `${value.name}（${key}）`;
   }
@@ -368,33 +372,32 @@ const getPlaceholder = (key, value) => {
 };
 
 const handleModelChange = (data) => {
-  const newConfig = { ...props.agentConfig };
-  newConfig.model = `${data.provider}/${data.name}`;
-  emit('update:agentConfig', newConfig);
+  agentStore.updateAgentConfig({
+    model: `${data.provider}/${data.name}`
+  });
 };
 
 // 多选相关方法
 const ensureArray = (key) => {
-  const config = { ...props.agentConfig };
+  const config = agentConfig.value || {};
   if (!config[key] || !Array.isArray(config[key])) {
-    config[key] = [];
+    return [];
   }
-  return config;
+  return config[key];
 };
 
 const isOptionSelected = (key, option) => {
-  const config = ensureArray(key);
-  return config[key].includes(option);
+  const currentOptions = ensureArray(key);
+  return currentOptions.includes(option);
 };
 
 const getSelectedCount = (key) => {
-  const config = ensureArray(key);
-  return config[key].length;
+  const currentOptions = ensureArray(key);
+  return currentOptions.length;
 };
 
 const toggleOption = (key, option) => {
-  const config = ensureArray(key);
-  const currentOptions = [...config[key]];
+  const currentOptions = [...ensureArray(key)];
   const index = currentOptions.indexOf(option);
 
   if (index > -1) {
@@ -403,26 +406,27 @@ const toggleOption = (key, option) => {
     currentOptions.push(option);
   }
 
-  config[key] = currentOptions;
-  emit('update:agentConfig', config);
+  agentStore.updateAgentConfig({
+    [key]: currentOptions
+  });
 };
 
 const clearSelection = (key) => {
-  const config = { ...props.agentConfig };
-  config[key] = [];
-  emit('update:agentConfig', config);
+  agentStore.updateAgentConfig({
+    [key]: []
+  });
 };
 
 // 工具相关方法
 const getToolNameById = (toolId) => {
-  const tool = availableTools.value.find(t => t.id === toolId);
+  const toolsList = availableTools.value ? Object.values(availableTools.value) : [];
+  const tool = toolsList.find(t => t.id === toolId);
   return tool ? tool.name : toolId;
 };
 
 const loadAvailableTools = async () => {
   try {
-    const response = await agentApi.getTools();
-    availableTools.value = Object.values(response.tools || {});
+    await agentStore.fetchTools();
   } catch (error) {
     console.error('加载工具列表失败:', error);
   }
@@ -430,10 +434,10 @@ const loadAvailableTools = async () => {
 
 const openToolsModal = async () => {
   try {
-    if (availableTools.value.length === 0) {
+    if (!availableTools.value || Object.keys(availableTools.value).length === 0) {
       await loadAvailableTools();
     }
-    selectedTools.value = [...(props.agentConfig.tools || [])];
+    selectedTools.value = [...(agentConfig.value?.tools || [])];
     toolsModalOpen.value = true;
   } catch (error) {
     console.error('打开工具选择弹窗失败:', error);
@@ -451,18 +455,20 @@ const toggleToolSelection = (toolId) => {
 };
 
 const removeSelectedTool = (toolId) => {
-  const config = { ...props.agentConfig };
-  const index = config.tools.indexOf(toolId);
+  const currentTools = [...(agentConfig.value?.tools || [])];
+  const index = currentTools.indexOf(toolId);
   if (index > -1) {
-    config.tools.splice(index, 1);
-    emit('update:agentConfig', config);
+    currentTools.splice(index, 1);
+    agentStore.updateAgentConfig({
+      tools: currentTools
+    });
   }
 };
 
 const confirmToolsSelection = () => {
-  const config = { ...props.agentConfig };
-  config.tools = [...selectedTools.value];
-  emit('update:agentConfig', config);
+  agentStore.updateAgentConfig({
+    tools: [...selectedTools.value]
+  });
   toolsModalOpen.value = false;
   toolsSearchText.value = '';
 };
@@ -475,15 +481,14 @@ const cancelToolsSelection = () => {
 
 // 配置保存和重置
 const saveConfig = async () => {
-  if (!props.selectedAgentId) {
+  if (!selectedAgentId.value) {
     message.error('没有选择智能体');
     return;
   }
 
   try {
-    await agentApi.saveAgentConfig(props.selectedAgentId, props.agentConfig);
+    await agentStore.saveAgentConfig();
     message.success('配置已保存到服务器');
-    emit('config-saved');
   } catch (error) {
     console.error('保存配置到服务器出错:', error);
     message.error('保存配置到服务器失败');
@@ -491,14 +496,13 @@ const saveConfig = async () => {
 };
 
 const resetConfig = async () => {
-  if (!props.selectedAgentId) {
+  if (!selectedAgentId.value) {
     message.error('没有选择智能体');
     return;
   }
 
   try {
-    await agentApi.saveAgentConfig(props.selectedAgentId, {});
-    emit('config-reset');
+    agentStore.resetAgentConfig();
     message.info('配置已重置');
   } catch (error) {
     console.error('重置配置出错:', error);
@@ -508,7 +512,7 @@ const resetConfig = async () => {
 
 // 监听器
 watch(() => props.isOpen, (newVal) => {
-  if (newVal && availableTools.value.length === 0) {
+  if (newVal && (!availableTools.value || Object.keys(availableTools.value).length === 0)) {
     loadAvailableTools();
   }
 });
diff --git a/web/src/components/AgentMessageComponent.vue b/web/src/components/AgentMessageComponent.vue
index 6897f6cd..2bab6940 100644
--- a/web/src/components/AgentMessageComponent.vue
+++ b/web/src/components/AgentMessageComponent.vue
@@ -35,10 +35,10 @@
               <span v-if="!toolCall.tool_call_result">
                 <span><Loader size="16" class="tool-loader rotate" /></span> &nbsp;
                 <span>正在调用工具: </span>
-                <span class="tool-name">{{ toolCall.name || toolCall.function.name }}</span>
+                <span class="tool-name">{{ getToolNameByToolCall(toolCall) }}</span>
               </span>
               <span v-else>
-                <span><CircleCheckBig size="16" class="tool-loader" /></span> &nbsp; 工具 <span class="tool-name">{{ toolCall.name || toolCall.function.name }}</span> 执行完成
+                <span><CircleCheckBig size="16" class="tool-loader" /></span> &nbsp; 工具 <span class="tool-name">{{ getToolNameByToolCall(toolCall) }}</span> 执行完成
               </span>
             </div>
             <div class="tool-content" v-show="expandedToolCalls.has(toolCall.id)">
@@ -85,6 +85,8 @@ import { CaretRightOutlined, ThunderboltOutlined, LoadingOutlined } from '@ant-d
 import RefsComponent from '@/components/RefsComponent.vue'
 import { Loader, CircleCheckBig } from 'lucide-vue-next';
 import { ToolResultRenderer } from '@/components/ToolCallingResult'
+import { useAgentStore } from '@/stores/agent'
+import { storeToRefs } from 'pinia'
 
 
 import { MdPreview } from 'md-editor-v3'
@@ -138,6 +140,18 @@ const isEmptyAndLoading = computed(() => {
   return isEmpty && isLoading;
 });
 
+// 引入智能体 store
+const agentStore = useAgentStore();
+const { availableTools } = storeToRefs(agentStore);
+
+// 工具相关方法
+const getToolNameByToolCall = (toolCall) => {
+  const toolId = toolCall.name || toolCall.function.name;
+  const toolsList = availableTools.value ? Object.values(availableTools.value) : [];
+  const tool = toolsList.find(t => t.id === toolId);
+  return tool ? tool.name : toolId;
+};
+
 const parsedMessage = computed(() => {
   const message = props.message;
   if (message.content) {
diff --git a/web/src/router/index.js b/web/src/router/index.js
index e50c112b..58b33efe 100644
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -2,7 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import AppLayout from '@/layouts/AppLayout.vue';
 import BlankLayout from '@/layouts/BlankLayout.vue';
 import { useUserStore } from '@/stores/user';
-import { agentApi } from '@/apis/agent';
+import { useAgentStore } from '@/stores/agent';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -121,21 +121,24 @@ router.beforeEach(async (to, from, next) => {
   if (requiresAdmin && !isAdmin) {
     // 如果是普通用户，跳转到默认智能体页面
     try {
-      // 先尝试获取默认智能体
-      const data = await agentApi.getDefaultAgent();
-      if (data && data.default_agent_id) {
-        // 如果存在默认智能体，直接跳转
-        next(`/agent/${data.default_agent_id}`);
-        return;
+      const agentStore = useAgentStore();
+      // 等待 store 初始化完成
+      if (!agentStore.isInitialized) {
+        await agentStore.initialize();
       }
-
-      // 如果没有默认智能体，则获取第一个可用智能体
-      const agentData = await agentApi.getAgents();
-      if (agentData && agentData.agents && agentData.agents.length > 0) {
-        const firstAgentId = agentData.agents[0].name;
-        next(`/agent/${firstAgentId}`);
+      
+      const defaultAgent = agentStore.defaultAgent;
+      if (defaultAgent && defaultAgent.id) {
+        next(`/agent/${defaultAgent.id}`);
       } else {
-        next('/');
+        // 如果没有默认智能体，可以考虑跳转到第一个可用的智能体，或者一个特定的页面
+        const agentIds = Object.keys(agentStore.agents);
+        if (agentIds.length > 0) {
+          next(`/agent/${agentIds[0]}`);
+        } else {
+          // 没有可用的智能体，跳转到首页
+          next('/');
+        }
       }
     } catch (error) {
       console.error('获取智能体信息失败:', error);
diff --git a/web/src/stores/agent.js b/web/src/stores/agent.js
new file mode 100644
index 00000000..65480caf
--- /dev/null
+++ b/web/src/stores/agent.js
@@ -0,0 +1,445 @@
+import { defineStore } from 'pinia';
+import { agentApi, threadApi } from '@/apis/agent';
+
+export const useAgentStore = defineStore('agent', {
+  state: () => ({
+    // 智能体相关状态
+    agents: {}, // 以ID为键的智能体对象
+    selectedAgentId: null, // 当前选中的智能体ID
+    defaultAgentId: null, // 默认智能体ID
+
+    // 智能体配置相关状态
+    agentConfig: {}, // 当前智能体的配置
+    originalAgentConfig: {}, // 原始配置，用于重置
+
+    // 工具相关状态
+    availableTools: [], // 所有可用工具列表
+
+    // 线程相关状态
+    threads: {}, // 以智能体ID为键的线程列表
+    currentThreadId: null, // 当前选中的线程ID
+    threadMessages: {}, // 以线程ID为键的消息列表
+
+    // 加载状态
+    isLoadingAgents: false,
+    isLoadingConfig: false,
+    isLoadingTools: false,
+    isLoadingThreads: false,
+    isLoadingMessages: false,
+
+    // 错误状态
+    error: null,
+
+    // 初始化状态
+    isInitialized: false
+  }),
+
+  getters: {
+    // 获取当前选中的智能体
+    selectedAgent() {
+      return this.selectedAgentId ? this.agents[this.selectedAgentId] : null;
+    },
+
+    // 获取默认智能体，默认取第一个
+    defaultAgent() {
+      return this.defaultAgentId ? this.agents[this.defaultAgentId] : this.agents[Object.keys(this.agents)[0]];
+    },
+
+    // 获取智能体列表（数组形式）
+    agentsList() {
+      return Object.values(this.agents);
+    },
+
+    // 判断当前智能体是否为默认智能体
+    isDefaultAgent() {
+      return this.selectedAgentId === this.defaultAgentId;
+    },
+
+    // 获取当前智能体的配置schema
+    configSchema() {
+      const agent = this.selectedAgentId ? this.agents[this.selectedAgentId] : null;
+      return agent?.config_schema || {};
+    },
+
+    // 获取可配置项（处理x_oap_ui_config）
+    configurableItems() {
+      const schema = this.configSchema || {};
+      if (!schema || !schema.configurable_items) return {};
+
+      const items = { ...schema.configurable_items };
+
+      // 处理x_oap_ui_config，将其提升到上一层
+      Object.keys(items).forEach(key => {
+        const item = items[key];
+        if (item && item.x_oap_ui_config) {
+          items[key] = {
+            ...item,
+            ...item.x_oap_ui_config
+          };
+          delete items[key].x_oap_ui_config;
+        }
+      });
+
+      return items;
+    },
+
+    // 检查配置是否有变更
+    hasConfigChanges() {
+      return JSON.stringify(this.agentConfig) !== JSON.stringify(this.originalAgentConfig);
+    },
+
+    // 获取当前智能体的线程列表
+    currentAgentThreads() {
+      return this.selectedAgentId ? (this.threads[this.selectedAgentId] || []) : [];
+    },
+
+    // 获取当前线程
+    currentThread() {
+      if (!this.currentThreadId || !this.selectedAgentId) return null;
+      const agentThreads = this.threads[this.selectedAgentId] || [];
+      return agentThreads.find(thread => thread.id === this.currentThreadId);
+    },
+
+    // 获取当前线程的消息
+    currentThreadMessages() {
+      return this.currentThreadId ? (this.threadMessages[this.currentThreadId] || []) : [];
+    }
+  },
+
+  actions: {
+    // 初始化store
+    async initialize() {
+      if (this.isInitialized) return;
+
+      try {
+        await Promise.all([
+          this.fetchAgents(),
+          this.fetchDefaultAgent(),
+          this.fetchTools()
+        ]);
+        this.isInitialized = true;
+      } catch (error) {
+        console.error('Failed to initialize agent store:', error);
+        this.error = error.message;
+      }
+    },
+
+    // 获取智能体列表
+    async fetchAgents() {
+      this.isLoadingAgents = true;
+      this.error = null;
+
+      try {
+        const response = await agentApi.getAgents();
+        // 将数组转换为以ID为键的对象
+        this.agents = response.agents.reduce((acc, agent) => {
+          acc[agent.id] = agent;
+          return acc;
+        }, {});
+      } catch (error) {
+        console.error('Failed to fetch agents:', error);
+        this.error = error.message;
+        throw error;
+      } finally {
+        this.isLoadingAgents = false;
+      }
+    },
+
+    // 获取默认智能体
+    async fetchDefaultAgent() {
+      try {
+        const response = await agentApi.getDefaultAgent();
+        this.defaultAgentId = response.default_agent_id;
+
+        // 如果没有选中的智能体，则选择默认智能体
+        if (!this.selectedAgentId && this.defaultAgentId) {
+          this.selectedAgentId = this.defaultAgentId;
+        }
+      } catch (error) {
+        console.error('Failed to fetch default agent:', error);
+        this.error = error.message;
+      }
+    },
+
+    // 设置默认智能体
+    async setDefaultAgent(agentId) {
+      try {
+        await agentConfigApi.setDefaultAgent(agentId);
+        this.defaultAgentId = agentId;
+      } catch (error) {
+        console.error('Failed to set default agent:', error);
+        this.error = error.message;
+        throw error;
+      }
+    },
+
+    // 选择智能体
+    selectAgent(agentId) {
+      if (this.agents[agentId]) {
+        this.selectedAgentId = agentId;
+        // 清空之前的配置
+        this.agentConfig = {};
+        this.originalAgentConfig = {};
+      }
+    },
+
+    // 加载智能体配置
+    async loadAgentConfig(agentId = null) {
+      const targetAgentId = agentId || this.selectedAgentId;
+      if (!targetAgentId) return;
+
+      this.isLoadingConfig = true;
+      this.error = null;
+
+      try {
+        const response = await agentApi.getAgentConfig(targetAgentId);
+        this.agentConfig = { ...response.config };
+        this.originalAgentConfig = { ...response.config };
+      } catch (error) {
+        console.error('Failed to load agent config:', error);
+        this.error = error.message;
+        throw error;
+      } finally {
+        this.isLoadingConfig = false;
+      }
+    },
+
+    // 保存智能体配置
+    async saveAgentConfig(agentId = null) {
+      const targetAgentId = agentId || this.selectedAgentId;
+      if (!targetAgentId) return;
+
+      try {
+        await agentApi.saveAgentConfig(targetAgentId, this.agentConfig);
+        this.originalAgentConfig = { ...this.agentConfig };
+      } catch (error) {
+        console.error('Failed to save agent config:', error);
+        this.error = error.message;
+        throw error;
+      }
+    },
+
+    // 重置智能体配置
+    resetAgentConfig() {
+      this.agentConfig = { ...this.originalAgentConfig };
+    },
+
+    // 更新配置项
+    updateConfigItem(key, value) {
+      this.agentConfig[key] = value;
+    },
+
+    // 更新智能体配置（支持批量更新）
+    updateAgentConfig(updates) {
+      Object.assign(this.agentConfig, updates);
+    },
+
+    // 获取工具列表
+    async fetchTools() {
+      this.isLoadingTools = true;
+      this.error = null;
+
+      try {
+        const response = await agentApi.getTools();
+        this.availableTools = response.tools;
+      } catch (error) {
+        console.error('Failed to fetch tools:', error);
+        this.error = error.message;
+        throw error;
+      } finally {
+        this.isLoadingTools = false;
+      }
+    },
+
+    // 清除错误状态
+    clearError() {
+      this.error = null;
+    },
+
+    // ==================== 线程管理方法 ====================
+
+    // 获取智能体的线程列表
+    async fetchThreads(agentId = null) {
+      const targetAgentId = agentId || this.selectedAgentId;
+      if (!targetAgentId) return;
+
+      this.isLoadingThreads = true;
+      this.error = null;
+
+      try {
+        const threads = await threadApi.getThreads(targetAgentId);
+        this.threads[targetAgentId] = threads || [];
+      } catch (error) {
+        console.error('Failed to fetch threads:', error);
+        this.error = error.message;
+        throw error;
+      } finally {
+        this.isLoadingThreads = false;
+      }
+    },
+
+    // 创建新线程
+    async createThread(agentId, title = '新的对话') {
+      if (!agentId) return null;
+
+      try {
+        const thread = await threadApi.createThread(agentId, title);
+        if (thread) {
+          // 更新线程列表
+          if (!this.threads[agentId]) {
+            this.threads[agentId] = [];
+          }
+          this.threads[agentId].unshift(thread);
+
+          // 设置为当前线程
+          this.currentThreadId = thread.id;
+
+          // 初始化消息列表
+          this.threadMessages[thread.id] = [];
+        }
+        return thread;
+      } catch (error) {
+        console.error('Failed to create thread:', error);
+        this.error = error.message;
+        throw error;
+      }
+    },
+
+    // 删除线程
+    async deleteThread(threadId) {
+      if (!threadId) return;
+
+      try {
+        await threadApi.deleteThread(threadId);
+
+        // 从所有智能体的线程列表中移除
+        Object.keys(this.threads).forEach(agentId => {
+          this.threads[agentId] = this.threads[agentId].filter(thread => thread.id !== threadId);
+        });
+
+        // 清理消息
+        delete this.threadMessages[threadId];
+
+        // 如果删除的是当前线程，重置当前线程ID
+        if (this.currentThreadId === threadId) {
+          this.currentThreadId = null;
+        }
+      } catch (error) {
+        console.error('Failed to delete thread:', error);
+        this.error = error.message;
+        throw error;
+      }
+    },
+
+    // 更新线程标题
+    async updateThread(threadId, title) {
+      if (!threadId || !title) return;
+
+      try {
+        await threadApi.updateThread(threadId, title);
+
+        // 更新本地线程列表中的标题
+        Object.keys(this.threads).forEach(agentId => {
+          const thread = this.threads[agentId].find(t => t.id === threadId);
+          if (thread) {
+            thread.title = title;
+          }
+        });
+      } catch (error) {
+        console.error('Failed to update thread:', error);
+        this.error = error.message;
+        throw error;
+      }
+    },
+
+    // 选择线程
+    selectThread(threadId) {
+      this.currentThreadId = threadId;
+
+      // 如果没有该线程的消息，初始化空数组
+      if (threadId && !this.threadMessages[threadId]) {
+        this.threadMessages[threadId] = [];
+      }
+    },
+
+    // 获取线程消息
+    async fetchThreadMessages(threadId) {
+      if (!threadId) return;
+
+      this.isLoadingMessages = true;
+      this.error = null;
+
+      try {
+        const response = await agentApi.getAgentHistory(this.selectedAgentId, threadId);
+        this.threadMessages[threadId] = response.history || [];
+      } catch (error) {
+        console.error('Failed to fetch thread messages:', error);
+        this.error = error.message;
+        throw error;
+      } finally {
+        this.isLoadingMessages = false;
+      }
+    },
+
+    // 发送消息
+    async sendMessage(agentId, requestData) {
+      if (!agentId) return null;
+
+      try {
+        const response = await agentApi.sendAgentMessage(agentId, requestData);
+        return response;
+      } catch (error) {
+        console.error('Failed to send message:', error);
+        this.error = error.message;
+        throw error;
+      }
+    },
+
+    // 添加消息到线程
+    addMessageToThread(threadId, message) {
+      if (!threadId || !message) return;
+
+      if (!this.threadMessages[threadId]) {
+        this.threadMessages[threadId] = [];
+      }
+
+      this.threadMessages[threadId].push(message);
+    },
+
+    // 更新线程中的消息
+    updateMessageInThread(threadId, messageIndex, updatedMessage) {
+      if (!threadId || messageIndex < 0 || !this.threadMessages[threadId]) return;
+
+      if (messageIndex < this.threadMessages[threadId].length) {
+        this.threadMessages[threadId][messageIndex] = updatedMessage;
+      }
+    },
+
+    // 重置store状态
+    reset() {
+      this.agents = {};
+      this.selectedAgentId = null;
+      this.defaultAgentId = null;
+      this.agentConfig = {};
+      this.originalAgentConfig = {};
+      this.availableTools = [];
+      this.threads = {};
+      this.currentThreadId = null;
+      this.threadMessages = {};
+      this.isLoadingAgents = false;
+      this.isLoadingConfig = false;
+      this.isLoadingTools = false;
+      this.isLoadingThreads = false;
+      this.isLoadingMessages = false;
+      this.error = null;
+      this.isInitialized = false;
+    }
+  },
+
+  // 持久化配置
+  persist: {
+    key: 'agent-store',
+    storage: localStorage,
+    paths: ['selectedAgentId', 'defaultAgentId'] // 只持久化关键状态
+  }
+});
\ No newline at end of file
diff --git a/web/src/views/AgentView.vue b/web/src/views/AgentView.vue
index 60462011..56433231 100644
--- a/web/src/views/AgentView.vue
+++ b/web/src/views/AgentView.vue
@@ -5,7 +5,7 @@
         <div class="header-item">
           <a-button class="header-button" @click="openAgentModal">
             <Bot size="18" stroke-width="1.75" />
-            选择：{{ selectedAgent.name || '选择智能体' }}
+            选择：{{ selectedAgent?.name || '选择智能体' }}
           </a-button>
         </div>
       </div>
@@ -62,8 +62,6 @@
       <!-- 中间内容区域 -->
       <div class="content">
         <AgentChatComponent
-          :agent-id="selectedAgentId"
-          :config="agentConfig"
           :state="state"
           :single-mode="false"
           @open-config="toggleConf"
@@ -76,13 +74,7 @@
       <!-- 配置侧边栏 -->
       <AgentConfigSidebar
         :isOpen="state.isConfigSidebarOpen"
-        :selectedAgent="selectedAgent"
-        :selectedAgentId="selectedAgentId"
-        :agentConfig="agentConfig"
         @close="() => state.isConfigSidebarOpen = false"
-        @update:agentConfig="(config) => agentConfig = config"
-        @config-saved="loadAgentConfig"
-        @config-reset="loadAgentConfig"
       />
     </div>
   </div>
@@ -92,72 +84,53 @@
 import { ref, onMounted, reactive, watch, computed, h } from 'vue';
 import { useRouter } from 'vue-router';
 import {
-  CloseOutlined,
   SettingOutlined,
   LinkOutlined,
   StarOutlined,
   StarFilled,
-  CheckCircleOutlined,
-  PlusCircleOutlined
 } from '@ant-design/icons-vue';
 import { message } from 'ant-design-vue';
 import { Bot } from 'lucide-vue-next';
 import AgentChatComponent from '@/components/AgentChatComponent.vue';
-import ModelSelectorComponent from '@/components/ModelSelectorComponent.vue';
 import AgentConfigSidebar from '@/components/AgentConfigSidebar.vue';
 import { useUserStore } from '@/stores/user';
-import { agentApi } from '@/apis/agent';
+import { useAgentStore } from '@/stores/agent';
+import { storeToRefs } from 'pinia';
 
-// 路由
+// 路由和stores
 const router = useRouter();
 const userStore = useUserStore();
+const agentStore = useAgentStore();
 
-// 状态
-const agents = ref({});
-const selectedAgentId = ref(null);
-const defaultAgentId = ref(null); // 存储默认智能体ID
+// 从store中获取响应式状态
+const {
+  agents,
+  selectedAgentId,
+  defaultAgentId,
+  agentConfig,
+  selectedAgent,
+  configurableItems,
+} = storeToRefs(agentStore);
 const state = reactive({
   debug_mode: false,
   agentModalOpen: false,
   isConfigSidebarOpen: false,
   isEmptyConfig: computed(() =>
     !selectedAgentId.value ||
-    Object.keys(configurableItems.value).length === 0
+    Object.keys(configurableItems.value || {}).length === 0
   )
 });
 
 
 
-const selectedAgent = computed(() => agents.value[selectedAgentId.value] || {});
-const configSchema = computed(() => selectedAgent.value.config_schema || {});
-const configurableItems = computed(() => {
-  const items = configSchema.value.configurable_items || {};
-  // 遍历所有的配置项，将所有的 x_oap_ui_config 的层级提升到上一层
-  Object.keys(items).forEach(key => {
-    const item = items[key];
-    if (item.x_oap_ui_config) {
-      items[key] = { ...item, ...item.x_oap_ui_config };
-      delete items[key].x_oap_ui_config;
-    }
-  });
-  return items;
-});
-
-// 配置状态
-const agentConfig = ref({});
-
-// 检查是否为默认智能体
-const isDefaultAgent = computed(() => {
-  return selectedAgentId.value === defaultAgentId.value;
-});
+// 本地状态（仅UI相关）
 
 // 设置为默认智能体
 const setAsDefaultAgent = async () => {
   if (!selectedAgentId.value || !userStore.isAdmin) return;
 
   try {
-    await agentApi.setDefaultAgent(selectedAgentId.value);
-    defaultAgentId.value = selectedAgentId.value;
+    await agentStore.setDefaultAgent(selectedAgentId.value);
     message.success('已将当前智能体设为默认');
   } catch (error) {
     console.error('设置默认智能体错误:', error);
@@ -169,97 +142,15 @@ const setAsDefaultAgent = async () => {
 
 
 
-// 获取默认智能体ID
-const fetchDefaultAgent = async () => {
-  try {
-    const data = await agentApi.getDefaultAgent();
-    defaultAgentId.value = data.default_agent_id;
-    console.debug("Default agent ID:", defaultAgentId.value);
-  } catch (error) {
-    console.error('获取默认智能体错误:', error);
-  }
-};
+// 这些方法现在由agentStore处理，无需在组件中定义
 
-// 获取智能体列表
-const fetchAgents = async () => {
-  try {
-    const data = await agentApi.getAgents();
-    // 将数组转换为对象
-    agents.value = data.agents.reduce((acc, agent) => {
-      acc[agent.id] = agent;
-      return acc;
-    }, {});
-    // console.log("agents", agents.value);
-
-    // 加载当前选中智能体的配置
-    if (selectedAgentId.value) {
-      loadAgentConfig();
-    }
-  } catch (error) {
-    console.error('获取智能体错误:', error);
-  }
-};
-
-// 根据选中的智能体加载配置
+// 加载智能体配置（使用store方法）
 const loadAgentConfig = async () => {
-  // BUG: 目前消息重置有问题，需要重置消息
-  if (!selectedAgentId.value || !agents.value[selectedAgentId.value]) return;
-
-  const agent = agents.value[selectedAgentId.value];
-  const schema = agent.config_schema || {};
-  const items = schema.configurable_items || {};
-
-  // 重置配置
-  agentConfig.value = {};
-
-  // 初始化基础配置项
-  if (schema.system_prompt) {
-    agentConfig.value.system_prompt = schema.system_prompt;
-  }
-
-  if (schema.model) {
-    agentConfig.value.model = schema.model;
-  }
-
-  if (schema.tools && schema.tools.length > 0 && schema.tools[0] != 'undefined') {
-    agentConfig.value.tools = schema.tools;
-  }
-
-  // 初始化可配置项
-  Object.keys(items).forEach(key => {
-    const item = items[key];
-
-    // 根据类型设置默认值
-    if (typeof item.default === 'boolean') {
-      agentConfig.value[key] = item.default;
-    } else if (item.type === 'list') {
-      // 对于 list 类型，确保初始化为数组
-      agentConfig.value[key] = Array.isArray(item.default) ? item.default : [];
-    } else {
-      agentConfig.value[key] = item.default || '';
-    }
-  });
-
   try {
-    // 从服务器加载配置
-    const response = await agentApi.getAgentConfig(selectedAgentId.value);
-    if (response.success && response.config) {
-      // 合并服务器配置
-      Object.keys(response.config).forEach(key => {
-        if (key in agentConfig.value) {
-          const item = items[key];
-          // 对于 list 类型，确保是数组
-          if (item && item.type === 'list') {
-            agentConfig.value[key] = Array.isArray(response.config[key]) ? response.config[key] : [];
-          } else {
-            agentConfig.value[key] = response.config[key];
-          }
-        }
-      });
-      // console.log(`从服务器加载 ${selectedAgentId.value} 配置成功, ${JSON.stringify(agentConfig.value)}`);
-    }
+    await agentStore.loadAgentConfig();
   } catch (error) {
-    console.error('从服务器加载配置出错:', error);
+    console.error('加载配置出错:', error);
+    message.error('加载配置失败');
   }
 };
 
@@ -267,43 +158,6 @@ const handleModelChange = (data) => {
   agentConfig.value.model = `${data.provider}/${data.name}`;
 }
 
-// 保存配置
-const saveConfig = async () => {
-  if (!selectedAgentId.value) {
-    message.error('没有选择智能体');
-    return;
-  }
-
-  try {
-    // 保存配置到服务器
-    await agentApi.saveAgentConfig(selectedAgentId.value, agentConfig.value);
-    // 提示保存成功
-    message.success('配置已保存到服务器');
-    console.log("保存配置:", agentConfig.value);
-  } catch (error) {
-    console.error('保存配置到服务器出错:', error);
-    message.error('保存配置到服务器失败');
-  }
-};
-
-// 重置配置
-const resetConfig = async () => {
-  if (!selectedAgentId.value) {
-    message.error('没有选择智能体');
-    return;
-  }
-
-  try {
-    // 保存空配置到服务器，相当于重置
-    await agentApi.saveAgentConfig(selectedAgentId.value, {});
-    // 重新加载默认配置
-    await loadAgentConfig();
-    message.info('配置已重置');
-  } catch (error) {
-    console.error('重置配置出错:', error);
-    message.error('重置配置失败');
-  }
-};
 
 // 监听智能体选择变化
 watch(
@@ -313,11 +167,9 @@ watch(
   }
 );
 
-// 选择智能体
+// 选择智能体（使用store方法）
 const selectAgent = (agentId) => {
-  selectedAgentId.value = agentId;
-  // 保存选择到本地存储
-  localStorage.setItem('last-selected-agent', agentId);
+  agentStore.selectAgent(agentId);
   // 加载该智能体的配置
   loadAgentConfig();
 };
@@ -335,29 +187,27 @@ const selectAgentFromModal = (agentId) => {
 
 
 
-// 初始化
+// 初始化（使用store方法）
 onMounted(async () => {
-  // 获取默认智能体
-  await fetchDefaultAgent();
-  // 获取智能体列表
-  await fetchAgents();
-  // 加载工具列表
+  try {
+    // 恢复上次选择的智能体
+    const lastSelectedAgent = localStorage.getItem('last-selected-agent');
+    if (lastSelectedAgent && agents.value[lastSelectedAgent]) {
+      agentStore.selectAgent(lastSelectedAgent);
+    } else if (defaultAgentId.value && agents.value[defaultAgentId.value]) {
+      // 如果有默认智能体，优先选择默认智能体
+      agentStore.selectAgent(defaultAgentId.value);
+    } else if (Object.keys(agents.value).length > 0) {
+      // 默认选择第一个智能体
+      agentStore.selectAgent(Object.keys(agents.value)[0]);
+    }
 
-
-  // 恢复上次选择的智能体
-  const lastSelectedAgent = localStorage.getItem('last-selected-agent');
-  if (lastSelectedAgent && agents.value[lastSelectedAgent]) {
-    selectedAgentId.value = lastSelectedAgent;
-  } else if (defaultAgentId.value && agents.value[defaultAgentId.value]) {
-    // 如果有默认智能体，优先选择默认智能体
-    selectedAgentId.value = defaultAgentId.value;
-  } else if (Object.keys(agents.value).length > 0) {
-    // 默认选择第一个智能体
-    selectedAgentId.value = Object.keys(agents.value)[0];
+    // 加载配置
+    await loadAgentConfig();
+  } catch (error) {
+    console.error('初始化失败:', error);
+    message.error('初始化失败');
   }
-
-  // 加载配置
-  loadAgentConfig();
 });
 
 // 获取配置标签
@@ -445,6 +295,35 @@ const toggleConf = () => {
   // padding: var(--gap-radius);
   // gap: var(--gap-radius);
 
+  .content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .no-agent-selected {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--bg-content);
+  }
+
+  .no-agent-content {
+    text-align: center;
+    color: var(--text-secondary);
+
+    svg {
+      margin-bottom: 16px;
+      opacity: 0.6;
+    }
+
+    h3 {
+      margin-bottom: 16px;
+      color: var(--text-primary);
+    }
+  }
+
   // .content {
   //   border-radius: var(--gap-radius);
   //   border: 1px solid var(--gray-300);
diff --git a/web/src/views/HomeView.vue b/web/src/views/HomeView.vue
index 5b13a31d..18e55fb4 100644
--- a/web/src/views/HomeView.vue
+++ b/web/src/views/HomeView.vue
@@ -64,12 +64,13 @@ import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/user'
 import { useInfoStore } from '@/stores/info'
-import { agentApi } from '@/apis/agent'
+import { useAgentStore } from '@/stores/agent'
 import UserInfoComponent from '@/components/UserInfoComponent.vue'
 
 const router = useRouter()
 const userStore = useUserStore()
 const infoStore = useInfoStore()
+const agentStore = useAgentStore()
 
 const goToChat = async () => {
   // 检查用户是否登录
@@ -90,23 +91,11 @@ const goToChat = async () => {
   // 普通用户跳转到默认智能体
   try {
     // 获取默认智能体
-    const data = await agentApi.getDefaultAgent();
-    if (data.default_agent_id) {
-      // 使用后端设置的默认智能体
-      router.push(`/agent/${data.default_agent_id}`);
-    } else {
-      // 如果没有设置默认智能体，则获取智能体列表选择第一个
-      const agentData = await agentApi.getAgents();
-      if (agentData.agents && agentData.agents.length > 0) {
-        router.push(`/agent/${agentData.agents[0].id}`);
-      } else {
-        // 没有可用智能体，回退到chat页面
-        router.push("/chat");
-}
-    }
+    const defaultAgent = agentStore.defaultAgent;
+    router.push(`/agent/${defaultAgent.id}`);
   } catch (error) {
     console.error('跳转到智能体页面失败:', error);
-    router.push("/chat");
+    router.push("/");
   }
 };
 
diff --git a/web/src/views/LoginView.vue b/web/src/views/LoginView.vue
index f4722fc5..e785790a 100644
--- a/web/src/views/LoginView.vue
+++ b/web/src/views/LoginView.vue
@@ -170,13 +170,14 @@ import { ref, reactive, onMounted, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { useUserStore } from '@/stores/user';
 import { useInfoStore } from '@/stores/info';
+import { useAgentStore } from '@/stores/agent';
 import { message } from 'ant-design-vue';
-import { agentApi } from '@/apis/agent';
 import { healthApi } from '@/apis/system_api';
 import { UserOutlined, LockOutlined, WechatOutlined, QrcodeOutlined, ThunderboltOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
 const router = useRouter();
 const userStore = useUserStore();
 const infoStore = useInfoStore();
+const agentStore = useAgentStore();
 
 // 从infoStore获取登录背景图片
 const loginBgImage = computed(() => {
@@ -248,18 +249,20 @@ const handleLogin = async () => {
 
       // 普通用户跳转到默认智能体
       try {
+        // 初始化agentStore并获取智能体信息
+        await agentStore.initialize();
+        
         // 尝试获取默认智能体
-        const data = await agentApi.getDefaultAgent();
-        if (data.default_agent_id) {
+        if (agentStore.defaultAgentId) {
           // 如果存在默认智能体，直接跳转
-          router.push(`/agent/${data.default_agent_id}`);
+          router.push(`/agent/${agentStore.defaultAgentId}`);
           return;
         }
 
         // 没有默认智能体，获取第一个可用智能体
-        const agentData = await agentApi.getAgents();
-        if (agentData.agents && agentData.agents.length > 0) {
-          router.push(`/agent/${agentData.agents[0].id}`);
+        const agentIds = Object.keys(agentStore.agents);
+        if (agentIds.length > 0) {
+          router.push(`/agent/${agentIds[0]}`);
           return;
         }