android应用

frontend/src/views/Agents.vue

@@ -5,10 +5,16 @@
       <template #header>
         <div class="card-header">
           <h2>Agent管理</h2>
-          <el-button type="primary" @click="handleCreate">
-            <el-icon><Plus /></el-icon>
-            创建Agent
-          </el-button>
+          <div>
+            <el-button @click="handleImport">
+              <el-icon><Upload /></el-icon>
+              导入Agent
+            </el-button>
+            <el-button type="primary" @click="handleCreate" style="margin-left: 10px">
+              <el-icon><Plus /></el-icon>
+              创建Agent
+            </el-button>
+          </div>
         </div>
       </template>
 
@@ -70,12 +76,21 @@
             {{ formatDate(row.created_at) }}
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="350" fixed="right">
+        <el-table-column label="操作" width="480" fixed="right">
           <template #default="{ row }">
             <el-button link type="primary" @click="handleEdit(row)">
               <el-icon><Edit /></el-icon>
               编辑
             </el-button>
+            <el-button 
+              v-if="row.status === 'published' || row.status === 'running'"
+              link 
+              type="primary" 
+              @click="handleUse(row)"
+            >
+              <el-icon><ChatDotRound /></el-icon>
+              使用
+            </el-button>
             <el-button link type="primary" @click="handleDesign(row)">
               <el-icon><Setting /></el-icon>
               设计
@@ -84,6 +99,10 @@
               <el-icon><CopyDocument /></el-icon>
               复制
             </el-button>
+            <el-button link type="success" @click="handleExport(row)">
+              <el-icon><Download /></el-icon>
+              导出
+            </el-button>
             <el-button
               v-if="row.status === 'draft' || row.status === 'stopped'"
               link
@@ -164,6 +183,63 @@
         </el-button>
       </template>
     </el-dialog>
+
+    <!-- 导入Agent对话框 -->
+    <el-dialog
+      v-model="importDialogVisible"
+      title="导入Agent"
+      width="600px"
+      @close="handleImportDialogClose"
+    >
+      <el-upload
+        ref="uploadRef"
+        :auto-upload="false"
+        :on-change="handleFileChange"
+        :file-list="fileList"
+        accept=".json"
+        drag
+      >
+        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+        <div class="el-upload__text">
+          将JSON文件拖到此处，或<em>点击上传</em>
+        </div>
+        <template #tip>
+          <div class="el-upload__tip">
+            只能上传JSON格式的Agent配置文件
+          </div>
+        </template>
+      </el-upload>
+      
+      <div v-if="importFileContent" style="margin-top: 20px;">
+        <el-alert
+          type="info"
+          :closable="false"
+          show-icon
+        >
+          <template #title>
+            <div>
+              <div><strong>Agent名称:</strong> {{ importFileContent.name || '未命名' }}</div>
+              <div v-if="importFileContent.description" style="margin-top: 5px;">
+                <strong>描述:</strong> {{ importFileContent.description }}
+              </div>
+              <div style="margin-top: 5px;">
+                <strong>节点数:</strong> {{ importFileContent.workflow_config?.nodes?.length || 0 }}
+                <span style="margin-left: 20px;">
+                  <strong>连接数:</strong> {{ importFileContent.workflow_config?.edges?.length || 0 }}
+                </span>
+              </div>
+            </div>
+          </template>
+        </el-alert>
+      </div>
+
+      <template #footer>
+        <el-button @click="importDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleConfirmImport" :loading="importing" :disabled="!importFileContent">
+          确认导入
+        </el-button>
+      </template>
+    </el-dialog>
     </div>
   </MainLayout>
 </template>
@@ -182,7 +258,11 @@ import {
   Setting,
   VideoPlay,
   VideoPause,
-  CopyDocument
+  CopyDocument,
+  Upload,
+  Download,
+  UploadFilled,
+  ChatDotRound
 } from '@element-plus/icons-vue'
 import { useAgentStore } from '@/stores/agent'
 import type { Agent } from '@/stores/agent'
@@ -225,6 +305,13 @@ const form = ref({
 })
 const currentAgentId = ref<string | null>(null)
 
+// 导入相关
+const importDialogVisible = ref(false)
+const fileList = ref<any[]>([])
+const importFileContent = ref<any>(null)
+const importing = ref(false)
+const uploadRef = ref()
+
 // 表单验证规则
 const rules = {
   name: [
@@ -331,6 +418,14 @@ const handleEdit = (agent: Agent) => {
   dialogVisible.value = true
 }
 
+// 使用Agent（跳转到设计器，那里有聊天界面）
+const handleUse = (agent: Agent) => {
+  router.push({
+    name: 'AgentDesigner',
+    params: { id: agent.id }
+  })
+}
+
 // 设计
 const handleDesign = (agent: Agent) => {
   router.push({
@@ -427,6 +522,75 @@ const handleDelete = async (agent: Agent) => {
   }
 }
 
+// 导出Agent
+const handleExport = async (agent: Agent) => {
+  try {
+    await agentStore.exportAgent(agent.id)
+    ElMessage.success('Agent导出成功')
+  } catch (error: any) {
+    console.error('导出失败详情:', error)
+    const errorMessage = error.message || error.response?.data?.detail || '导出失败，请查看控制台获取详细信息'
+    ElMessage.error(errorMessage)
+  }
+}
+
+// 显示导入对话框
+const handleImport = () => {
+  importDialogVisible.value = true
+  fileList.value = []
+  importFileContent.value = null
+}
+
+// 文件选择
+const handleFileChange = (file: any) => {
+  const reader = new FileReader()
+  reader.onload = (e) => {
+    try {
+      const content = JSON.parse(e.target?.result as string)
+      importFileContent.value = content
+    } catch (error) {
+      ElMessage.error('文件格式错误，请上传有效的JSON文件')
+      fileList.value = []
+      importFileContent.value = null
+    }
+  }
+  reader.readAsText(file.raw)
+}
+
+// 关闭导入对话框
+const handleImportDialogClose = () => {
+  fileList.value = []
+  importFileContent.value = null
+  if (uploadRef.value) {
+    uploadRef.value.clearFiles()
+  }
+}
+
+// 确认导入
+const handleConfirmImport = async () => {
+  if (!importFileContent.value) {
+    ElMessage.warning('请先选择要导入的文件')
+    return
+  }
+  
+  importing.value = true
+  try {
+    const agent = await agentStore.importAgent(importFileContent.value)
+    importDialogVisible.value = false
+    ElMessage.success('Agent导入成功')
+    await loadAgents()
+    // 跳转到Agent设计器
+    router.push({
+      name: 'AgentDesigner',
+      params: { id: agent.id }
+    })
+  } catch (error: any) {
+    ElMessage.error(error.response?.data?.detail || '导入Agent失败')
+  } finally {
+    importing.value = false
+  }
+}
+
 // 提交表单
 const handleSubmit = async () => {
   if (!formRef.value) return