修复Agent管理页面中'可用工具'列表显示为空的问题

frontend/src/pages/AgentManagement.vue

@@ -30,7 +30,7 @@
       </el-table-column>
     </el-table>
     
-    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑Agent' : '创建Agent'" width="600px" @close="resetForm" @open="loadEnabledLlmConfigs">
+    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑Agent' : '创建Agent'" width="600px" @close="resetForm" @open="handleDialogOpen">
       <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
         <el-form-item label="名称" prop="name">
           <el-input v-model="form.name" />
@@ -93,11 +93,13 @@
         </el-form-item>
         <el-form-item label="可用工具" prop="tools">
           <el-select 
+            ref="toolsSelectRef"
             v-model="form.tools" 
             multiple 
             filterable 
             placeholder="请选择此Agent可用的工具"
             :loading="loadingTools"
+            :key="`tools-select-${allTools.length}`"
           >
             <el-option
               v-for="tool in allTools"
@@ -109,6 +111,9 @@
               <span v-if="tool.description" style="float: right; color: #8492a6; font-size: 13px">{{ tool.description }}</span>
             </el-option>
           </el-select>
+          <div v-if="allTools.length === 0" style="margin-top: 5px; font-size: 12px; color: #f56c6c;">
+            工具列表加载失败或为空，请刷新页面重试
+          </div>
           <div style="margin-top: 5px; font-size: 12px; color: #8492a6;">
             不选择任何工具表示此Agent可以使用所有工具
           </div>
@@ -123,7 +128,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, reactive } from 'vue'
+import { ref, onMounted, reactive, watch, nextTick } from 'vue'
 import { useAuthStore } from '@/stores/auth'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import request from '@/utils/request'
@@ -137,6 +142,7 @@ const isEdit = ref(false)
 const loading = ref(false)
 const saving = ref(false)
 const formRef = ref(null)
+const toolsSelectRef = ref(null)
 
 const form = reactive({
   name: '',
@@ -210,9 +216,12 @@ const loadAllTools = async () => {
   try {
     loadingTools.value = true
     const res = await authStore.get('/tools')
+    console.log('工具API响应:', res)
     allTools.value = res.data.data || []
+    console.log('加载工具列表:', allTools.value)
   } catch (error) {
     console.error('获取工具列表失败:', error)
+    console.error('错误详情:', error.response || error)
     ElMessage.error('获取工具列表失败: ' + (error.response?.data?.message || error.message || '未知错误'))
   } finally {
     loadingTools.value = false
@@ -225,6 +234,24 @@ onMounted(() => {
   loadAllTools() // 加载工具列表
 })
 
+// 在打开对话框时也加载工具列表
+const handleDialogOpen = async () => {
+  // 确保工具列表已加载
+  if (allTools.value.length === 0) {
+    await loadAllTools()
+  }
+}
+
+// 监听工具列表变化，确保选择器正确更新
+watch(allTools, (newTools) => {
+  if (dialogVisible.value && isEdit.value && form.tools.length > 0) {
+    // 强制更新选择器
+    nextTick(() => {
+      // 这里不需要做任何事情，只是触发Vue的重新渲染
+    })
+  }
+})
+
 const loadAgents = async () => {
   try {
     loading.value = true
@@ -249,31 +276,48 @@ const loadEnabledLlmConfigs = async () => {
   }
 }
 
-const editAgent = (agent) => {
+const editAgent = async (agent) => {
   isEdit.value = true
+  
+  // 确保工具列表已加载
+  if (allTools.value.length === 0) {
+    await loadAllTools()
+  }
+  
   // 深拷贝避免直接修改原对象
   Object.assign(form, { ...agent })
   
-  // 处理工具配置
+  // 处理工具配置 - 简化逻辑
+  let toolsArray = []
   if (agent.tools) {
     try {
       // 如果tools是JSON字符串，需要解析为数组
       if (typeof agent.tools === 'string') {
-        form.tools = JSON.parse(agent.tools)
+        const parsedTools = JSON.parse(agent.tools)
+        toolsArray = Array.isArray(parsedTools) ? parsedTools : []
       } else if (Array.isArray(agent.tools)) {
-        form.tools = [...agent.tools]
-      } else {
-        form.tools = []
+        toolsArray = [...agent.tools]
       }
     } catch (e) {
       console.error('解析工具配置失败:', e)
-      form.tools = []
     }
-  } else {
-    form.tools = []
   }
   
+  // 使用nextTick确保在DOM更新后设置工具列表
   dialogVisible.value = true
+  
+  await nextTick()
+  
+  // 设置工具列表
+  form.tools = toolsArray
+  
+  // 再次等待确保UI更新
+  await nextTick()
+  
+  // 手动刷新select组件
+  if (toolsSelectRef.value) {
+    toolsSelectRef.value.$forceUpdate?.()
+  }
 }
 
 const saveAgent = async () => {