feat: add agent start code

web/src/views/agents/Agents.vue

@@ -3,31 +3,29 @@ import { ref, onMounted, computed, onUnmounted } from 'vue'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { Badge } from '@/components/ui/badge'
-import { Switch } from '@/components/ui/switch'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from '@/components/ui/dialog'
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { RefreshCw, Trash2, Edit, Copy, Key, Server, Search, Check, X, Download, RotateCw } from 'lucide-vue-next'
-import { api, type Agent } from '@/api'
+import { RefreshCw, Trash2, Edit, Copy, Server, Search, Download, RotateCw, Plus, Ticket, Power, PowerOff } from 'lucide-vue-next'
+import { api, type Agent, type AgentRegCode } from '@/api'
 import { toast } from 'vue-sonner'
 import TextOverflow from '@/components/TextOverflow.vue'
 
 const agents = ref<Agent[]>([])
-const pendingAgents = ref<Agent[]>([])
+const regCodes = ref<AgentRegCode[]>([])
 const loading = ref(false)
 const searchQuery = ref('')
-const activeTab = ref('approved')
+const activeTab = ref('agents')
 const agentVersion = ref('')
 const platforms = ref<{ os: string; arch: string; filename: string }[]>([])
 const showEditDialog = ref(false)
 const showDeleteDialog = ref(false)
-const showTokenDialog = ref(false)
 const showDownloadDialog = ref(false)
+const showRegCodeDialog = ref(false)
 const formData = ref({ name: '', description: '' })
+const regCodeForm = ref({ remark: '', max_uses: 0, expires_at: '' })
 const editingAgent = ref<Agent | null>(null)
 const deletingAgent = ref<Agent | null>(null)
-const currentToken = ref('')
 let refreshTimer: ReturnType<typeof setInterval> | null = null
 
 const filteredAgents = computed(() => {
@@ -40,18 +38,27 @@ const filteredAgents = computed(() => {
   )
 })
 
+// 判断 Agent 是否在线（last_seen 在 2 分钟内）
+function isOnline(agent: Agent): boolean {
+  if (!agent.last_seen) return false
+  const lastSeen = new Date(agent.last_seen)
+  const now = new Date()
+  const diffMs = now.getTime() - lastSeen.getTime()
+  return diffMs < 2 * 60 * 1000 // 2 分钟
+}
+
 async function loadAgents() {
   loading.value = true
   try {
-    const [agentList, pendingList, versionInfo] = await Promise.all([
+    const [agentList, versionInfo, codeList] = await Promise.all([
       api.agents.list(),
-      api.agents.listPending(),
-      api.agents.getVersion()
+      api.agents.getVersion(),
+      api.agents.listRegCodes()
     ])
     agents.value = agentList
-    pendingAgents.value = pendingList
     agentVersion.value = versionInfo.version || ''
     platforms.value = versionInfo.platforms || []
+    regCodes.value = codeList
   } catch {
     toast.error('加载失败')
   } finally {
@@ -59,28 +66,6 @@ async function loadAgents() {
   }
 }
 
-async function approveAgent(agent: Agent) {
-  try {
-    const approved = await api.agents.approve(agent.id)
-    currentToken.value = approved.token
-    showTokenDialog.value = true
-    await loadAgents()
-    toast.success('已通过审核')
-  } catch (e: unknown) {
-    toast.error((e as Error).message || '操作失败')
-  }
-}
-
-async function rejectAgent(agent: Agent) {
-  try {
-    await api.agents.reject(agent.id)
-    await loadAgents()
-    toast.success('已拒绝')
-  } catch (e: unknown) {
-    toast.error((e as Error).message || '操作失败')
-  }
-}
-
 function openEditDialog(agent: Agent) {
   editingAgent.value = agent
   formData.value = { name: agent.name, description: agent.description }
@@ -101,8 +86,10 @@ async function updateAgent() {
 
 async function toggleEnabled(agent: Agent) {
   try {
-    await api.agents.update(agent.id, { name: agent.name, description: agent.description, enabled: !agent.enabled })
+    const newEnabled = !agent.enabled
+    await api.agents.update(agent.id, { name: agent.name, description: agent.description, enabled: newEnabled })
     await loadAgents()
+    toast.success(`${agent.name} 已${newEnabled ? '启用' : '禁用'}`)
   } catch (e: unknown) {
     toast.error((e as Error).message || '操作失败')
   }
@@ -125,17 +112,6 @@ async function deleteAgent() {
   }
 }
 
-async function regenerateToken(agent: Agent) {
-  try {
-    const res = await api.agents.regenerateToken(agent.id)
-    currentToken.value = res.token
-    showTokenDialog.value = true
-    toast.success('Token 已重新生成')
-  } catch (e: unknown) {
-    toast.error((e as Error).message || '操作失败')
-  }
-}
-
 async function forceUpdate(agent: Agent) {
   try {
     await api.agents.forceUpdate(agent.id)
@@ -145,11 +121,46 @@ async function forceUpdate(agent: Agent) {
   }
 }
 
-function copyToken() {
-  navigator.clipboard.writeText(currentToken.value)
+function copyRegCode(code: string) {
+  navigator.clipboard.writeText(code)
   toast.success('已复制')
 }
 
+async function createRegCode() {
+  try {
+    await api.agents.createRegCode({
+      remark: regCodeForm.value.remark,
+      max_uses: regCodeForm.value.max_uses,
+      expires_at: regCodeForm.value.expires_at || undefined
+    })
+    showRegCodeDialog.value = false
+    regCodeForm.value = { remark: '', max_uses: 0, expires_at: '' }
+    await loadAgents()
+    toast.success('创建成功')
+  } catch (e: unknown) {
+    toast.error((e as Error).message || '创建失败')
+  }
+}
+
+async function deleteRegCode(id: number) {
+  try {
+    await api.agents.deleteRegCode(id)
+    await loadAgents()
+    toast.success('删除成功')
+  } catch (e: unknown) {
+    toast.error((e as Error).message || '删除失败')
+  }
+}
+
+function isRegCodeExpired(code: AgentRegCode) {
+  if (!code.expires_at) return false
+  return new Date(code.expires_at) < new Date()
+}
+
+function isRegCodeExhausted(code: AgentRegCode) {
+  return code.max_uses > 0 && code.used_count >= code.max_uses
+}
+
 function downloadAgent(os: string, arch: string) {
   window.open(api.agents.downloadUrl(os, arch), '_blank')
 }
@@ -194,57 +205,61 @@ onUnmounted(() => {
 
     <Tabs v-model="activeTab">
       <TabsList>
-        <TabsTrigger value="approved">已注册</TabsTrigger>
-        <TabsTrigger value="pending" class="relative">
-          未注册
-          <Badge v-if="pendingAgents.length > 0" variant="destructive" class="ml-1.5 h-5 min-w-5 px-1">{{ pendingAgents.length }}</Badge>
+        <TabsTrigger value="agents">Agent 列表</TabsTrigger>
+        <TabsTrigger value="regcodes">
+          <Ticket class="h-4 w-4 mr-1" />令牌
         </TabsTrigger>
       </TabsList>
 
-      <TabsContent value="approved" class="mt-4">
+      <TabsContent value="agents" class="mt-4">
         <div class="rounded-lg border bg-card overflow-x-auto">
-          <div class="flex items-center gap-4 px-4 py-2 border-b bg-muted/50 text-sm text-muted-foreground font-medium min-w-[800px]">
+          <div class="flex items-center gap-4 px-4 py-2 border-b bg-muted/50 text-sm text-muted-foreground font-medium min-w-[900px]">
+            <span class="w-6"></span>
             <span class="w-28">名称</span>
-            <span class="w-16 text-center">状态</span>
             <span class="w-24">IP</span>
             <span class="w-24">主机名</span>
             <span class="w-16">版本</span>
             <span class="w-28">构建时间</span>
+            <span class="w-36">心跳时间</span>
             <span class="flex-1">描述</span>
-            <span class="w-14 text-center">启用</span>
             <span class="w-28 text-center">操作</span>
           </div>
-          <div class="divide-y min-w-[800px]">
+          <div class="divide-y min-w-[900px]">
             <div v-if="filteredAgents.length === 0" class="text-center py-8 text-muted-foreground">
               <Server class="h-8 w-8 mx-auto mb-2 opacity-50" />
               {{ searchQuery ? '无匹配结果' : '暂无 Agent' }}
             </div>
             <div v-for="agent in filteredAgents" :key="agent.id" class="flex items-center gap-4 px-4 py-2 hover:bg-muted/50 transition-colors">
-              <span class="w-28 font-medium text-sm truncate">{{ agent.name }}</span>
-              <span class="w-16 flex justify-center">
-                <Badge :variant="agent.status === 'online' ? 'default' : 'secondary'" class="text-xs">{{ agent.status === 'online' ? '在线' : '离线' }}</Badge>
+            <span class="w-6 flex justify-center">
+              <span 
+                class="relative flex h-2.5 w-2.5" 
+                :title="isOnline(agent) ? '在线' : '离线'"
+              >
+                <span v-if="isOnline(agent)" class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+                <span :class="isOnline(agent) ? 'bg-green-500' : 'bg-gray-400'" class="relative inline-flex rounded-full h-2.5 w-2.5"></span>
               </span>
+            </span>
+              <span class="w-28 font-medium text-sm truncate" :title="agent.machine_id ? '机器ID: ' + agent.machine_id.slice(0, 16) + '...' : ''">{{ agent.name }}</span>
               <span class="w-24 text-sm text-muted-foreground truncate">{{ agent.ip || '-' }}</span>
               <span class="w-24 text-sm text-muted-foreground truncate">{{ agent.hostname || '-' }}</span>
               <span class="w-16 text-sm text-muted-foreground">{{ agent.version || '-' }}</span>
               <span class="w-28 text-sm text-muted-foreground truncate">{{ agent.build_time || '-' }}</span>
+              <span class="w-36 text-sm text-muted-foreground">{{ agent.last_seen || '-' }}</span>
               <span class="flex-1 text-sm text-muted-foreground truncate">
                 <TextOverflow :text="agent.description || '-'" title="描述" />
               </span>
-              <span class="w-14 flex justify-center">
-                <Switch :checked="agent.enabled" @update:checked="toggleEnabled(agent)" />
-              </span>
               <span class="w-28 flex justify-center gap-1">
+                <Button variant="ghost" size="icon" class="h-7 w-7" @click="toggleEnabled(agent)" :title="agent.enabled ? '禁用' : '启用'">
+                  <Power v-if="agent.enabled" class="h-3.5 w-3.5 text-green-600" />
+                  <PowerOff v-else class="h-3.5 w-3.5 text-gray-400" />
+                </Button>
                 <Button variant="ghost" size="icon" class="h-7 w-7" @click="forceUpdate(agent)" title="强制更新">
                   <RotateCw class="h-3.5 w-3.5" />
                 </Button>
-                <Button variant="ghost" size="icon" class="h-7 w-7" @click="regenerateToken(agent)" title="重新生成 Token">
-                  <Key class="h-3.5 w-3.5" />
-                </Button>
-                <Button variant="ghost" size="icon" class="h-7 w-7" @click="openEditDialog(agent)">
+                <Button variant="ghost" size="icon" class="h-7 w-7" @click="openEditDialog(agent)" title="编辑">
                   <Edit class="h-3.5 w-3.5" />
                 </Button>
-                <Button variant="ghost" size="icon" class="h-7 w-7 text-destructive" @click="confirmDelete(agent)">
+                <Button variant="ghost" size="icon" class="h-7 w-7 text-destructive" @click="confirmDelete(agent)" title="删除">
                   <Trash2 class="h-3.5 w-3.5" />
                 </Button>
               </span>
@@ -253,32 +268,45 @@ onUnmounted(() => {
         </div>
       </TabsContent>
 
-      <TabsContent value="pending" class="mt-4">
+      <TabsContent value="regcodes" class="mt-4">
         <div class="rounded-lg border bg-card overflow-x-auto">
-          <div class="flex items-center gap-4 px-4 py-2 border-b bg-muted/50 text-sm text-muted-foreground font-medium min-w-[500px]">
-            <span class="w-32">名称</span>
-            <span class="w-28">IP</span>
-            <span class="w-28">主机名</span>
-            <span class="w-20">版本</span>
-            <span class="flex-1">注册时间</span>
-            <span class="w-24 text-center">操作</span>
+          <div class="flex items-center gap-4 px-4 py-2 border-b bg-muted/50 text-sm text-muted-foreground font-medium min-w-[800px]">
+            <span class="w-6"></span>
+            <span class="w-[420px]">令牌</span>
+            <span class="w-32">备注</span>
+            <span class="w-20 text-center">使用次数</span>
+            <span class="flex-1">过期时间</span>
+            <span class="w-20 flex justify-center">
+              <Button size="sm" class="h-7" @click="showRegCodeDialog = true">
+                <Plus class="h-3.5 w-3.5 mr-1" />生成
+              </Button>
+            </span>
           </div>
-          <div class="divide-y min-w-[500px]">
-            <div v-if="pendingAgents.length === 0" class="text-center py-8 text-muted-foreground">
-              <Server class="h-8 w-8 mx-auto mb-2 opacity-50" />暂无未注册的 Agent
+          <div class="divide-y min-w-[800px]">
+            <div v-if="regCodes.length === 0" class="text-center py-8 text-muted-foreground">
+              <Ticket class="h-8 w-8 mx-auto mb-2 opacity-50" />暂无令牌
             </div>
-            <div v-for="agent in pendingAgents" :key="agent.id" class="flex items-center gap-4 px-4 py-2 hover:bg-muted/50 transition-colors">
-              <span class="w-32 font-medium text-sm truncate">{{ agent.name }}</span>
-              <span class="w-28 text-sm text-muted-foreground truncate">{{ agent.ip || '-' }}</span>
-              <span class="w-28 text-sm text-muted-foreground truncate">{{ agent.hostname || '-' }}</span>
-              <span class="w-20 text-sm text-muted-foreground">{{ agent.version || '-' }}</span>
-              <span class="flex-1 text-sm text-muted-foreground">{{ agent.created_at }}</span>
-              <span class="w-24 flex justify-center gap-1">
-                <Button variant="ghost" size="icon" class="h-7 w-7 text-green-600" @click="approveAgent(agent)" title="通过">
-                  <Check class="h-4 w-4" />
+            <div v-for="code in regCodes" :key="code.id" class="flex items-center gap-4 px-4 py-2 hover:bg-muted/50 transition-colors">
+              <span class="w-6 flex justify-center">
+                <span class="relative flex h-2.5 w-2.5">
+                  <span v-if="!isRegCodeExpired(code) && !isRegCodeExhausted(code)" class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+                  <span :class="!isRegCodeExpired(code) && !isRegCodeExhausted(code) ? 'bg-green-500' : 'bg-gray-400'" class="relative inline-flex rounded-full h-2.5 w-2.5"></span>
+                </span>
+              </span>
+              <code class="w-[420px] font-mono text-xs bg-muted px-2 py-0.5 rounded truncate">{{ code.code }}</code>
+              <span class="w-32 text-sm text-muted-foreground truncate">{{ code.remark || '-' }}</span>
+              <span class="w-20 text-sm text-muted-foreground text-center">
+                {{ code.used_count }}/{{ code.max_uses === 0 ? '∞' : code.max_uses }}
+              </span>
+              <span class="flex-1 text-sm text-muted-foreground">
+                {{ code.expires_at || '永不过期' }}
+              </span>
+              <span class="w-20 flex justify-center gap-1">
+                <Button variant="ghost" size="icon" class="h-7 w-7" @click="copyRegCode(code.code)" title="复制">
+                  <Copy class="h-3.5 w-3.5" />
                 </Button>
-                <Button variant="ghost" size="icon" class="h-7 w-7 text-destructive" @click="rejectAgent(agent)" title="拒绝">
-                  <X class="h-4 w-4" />
+                <Button variant="ghost" size="icon" class="h-7 w-7 text-destructive" @click="deleteRegCode(code.id)" title="删除">
+                  <Trash2 class="h-3.5 w-3.5" />
                 </Button>
               </span>
             </div>
@@ -324,27 +352,6 @@ onUnmounted(() => {
       </AlertDialogContent>
     </AlertDialog>
 
-    <!-- Token 对话框 -->
-    <Dialog v-model:open="showTokenDialog">
-      <DialogContent class="sm:max-w-[500px]">
-        <DialogHeader>
-          <DialogTitle>Agent Token</DialogTitle>
-          <DialogDescription>Token 已下发给 Agent，此处仅供查看</DialogDescription>
-        </DialogHeader>
-        <div class="py-4">
-          <div class="flex items-center gap-2">
-            <code class="flex-1 bg-muted px-3 py-2 rounded text-xs font-mono break-all">{{ currentToken }}</code>
-            <Button variant="outline" size="icon" class="shrink-0" @click="copyToken">
-              <Copy class="h-4 w-4" />
-            </Button>
-          </div>
-        </div>
-        <DialogFooter>
-          <Button @click="showTokenDialog = false">关闭</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-
     <!-- 下载对话框 -->
     <Dialog v-model:open="showDownloadDialog">
       <DialogContent class="sm:max-w-[500px]">
@@ -354,7 +361,7 @@ onUnmounted(() => {
         </DialogHeader>
         <div class="py-4 space-y-4">
           <div v-if="platforms.length === 0" class="text-center py-4 text-muted-foreground">
-            暂无可用的 Agent 程序，请先构建并上传到 data/agent 目录
+            暂无可用的 Agent 程序
           </div>
           <div v-else class="grid gap-2">
             <Button v-for="p in platforms" :key="p.filename" variant="outline" class="justify-start" @click="downloadAgent(p.os, p.arch)">
@@ -366,8 +373,8 @@ onUnmounted(() => {
             <div class="text-xs text-muted-foreground space-y-1.5">
               <p>1. 下载对应平台的 Agent 压缩包并解压</p>
               <p>2. 修改 config.example.ini 为 config.ini，设置 server_url</p>
-              <p>3. 运行 <code class="bg-muted px-1 rounded">./baihu-agent start</code> 启动</p>
-              <p>4. 在本页面"未注册"标签中审核通过</p>
+              <p>3. 在"令牌"标签页生成令牌，填入 config.ini 的 token</p>
+              <p>4. 运行 <code class="bg-muted px-1 rounded">./baihu-agent start</code> 启动</p>
               <p>5. 可选: <code class="bg-muted px-1 rounded">./baihu-agent install</code> 设置开机自启</p>
             </div>
           </div>
@@ -377,5 +384,33 @@ onUnmounted(() => {
         </DialogFooter>
       </DialogContent>
     </Dialog>
+
+    <!-- 创建令牌对话框 -->
+    <Dialog v-model:open="showRegCodeDialog">
+      <DialogContent class="sm:max-w-[400px]">
+        <DialogHeader>
+          <DialogTitle>生成令牌</DialogTitle>
+          <DialogDescription>Agent 使用令牌可直接注册，无需审核</DialogDescription>
+        </DialogHeader>
+        <div class="grid gap-4 py-4">
+          <div class="grid grid-cols-4 items-center gap-4">
+            <Label class="text-right">备注</Label>
+            <Input v-model="regCodeForm.remark" class="col-span-3" placeholder="可选" />
+          </div>
+          <div class="grid grid-cols-4 items-center gap-4">
+            <Label class="text-right">使用次数</Label>
+            <Input v-model.number="regCodeForm.max_uses" type="number" min="0" class="col-span-3" placeholder="0 表示无限制" />
+          </div>
+          <div class="grid grid-cols-4 items-center gap-4">
+            <Label class="text-right">过期时间</Label>
+            <Input v-model="regCodeForm.expires_at" type="datetime-local" class="col-span-3" />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" @click="showRegCodeDialog = false">取消</Button>
+          <Button @click="createRegCode">生成</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   </div>
 </template>

web/src/views/history/History.vue

@@ -184,7 +184,10 @@ watch(() => route.query.task_id, (newTaskId) => {
               </span>
               <span class="flex-1 min-w-0 font-medium truncate text-xs">{{ log.task_name }}</span>
               <span class="w-8 flex justify-center shrink-0">
-                <span :class="['w-2 h-2 rounded-full', log.status === 'success' ? 'bg-green-500' : log.status === 'failed' ? 'bg-red-500' : 'bg-yellow-500']" />
+                <span class="relative flex h-2.5 w-2.5">
+                  <span v-if="log.status === 'success'" class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+                  <span :class="log.status === 'success' ? 'bg-green-500' : log.status === 'failed' ? 'bg-red-500' : 'bg-yellow-500'" class="relative inline-flex rounded-full h-2.5 w-2.5"></span>
+                </span>
               </span>
               <span class="w-12 text-right shrink-0 text-muted-foreground text-xs">{{ formatDuration(log.duration) }}</span>
             </div>
@@ -200,7 +203,10 @@ watch(() => route.query.task_id, (newTaskId) => {
                 <TextOverflow :text="log.command" title="执行命令" />
               </code>
               <span class="w-12 flex justify-center shrink-0">
-                <span :class="['w-2 h-2 rounded-full', log.status === 'success' ? 'bg-green-500' : log.status === 'failed' ? 'bg-red-500' : 'bg-yellow-500']" />
+                <span class="relative flex h-2.5 w-2.5">
+                  <span v-if="log.status === 'success'" class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+                  <span :class="log.status === 'success' ? 'bg-green-500' : log.status === 'failed' ? 'bg-red-500' : 'bg-yellow-500'" class="relative inline-flex rounded-full h-2.5 w-2.5"></span>
+                </span>
               </span>
               <span class="w-16 text-right shrink-0 text-muted-foreground text-xs">{{ formatDuration(log.duration) }}</span>
               <span v-if="!selectedLog" class="w-40 text-right shrink-0 text-muted-foreground text-xs hidden md:block">{{ log.created_at }}</span>
@@ -230,7 +236,10 @@ watch(() => route.query.task_id, (newTaskId) => {
           <div class="flex justify-between items-center">
             <span class="text-muted-foreground">状态</span>
             <span class="flex items-center gap-1.5">
-              <span :class="['w-2 h-2 rounded-full', selectedLog.status === 'success' ? 'bg-green-500' : selectedLog.status === 'failed' ? 'bg-red-500' : 'bg-yellow-500']" />
+              <span class="relative flex h-2.5 w-2.5">
+                <span v-if="selectedLog.status === 'success'" class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+                <span :class="selectedLog.status === 'success' ? 'bg-green-500' : selectedLog.status === 'failed' ? 'bg-red-500' : 'bg-yellow-500'" class="relative inline-flex rounded-full h-2.5 w-2.5"></span>
+              </span>
               {{ selectedLog.status }}
             </span>
           </div>

web/src/views/tasks/RepoDialog.vue

@@ -7,7 +7,7 @@ import { Label } from '@/components/ui/label'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Checkbox } from '@/components/ui/checkbox'
 import DirTreeSelect from '@/components/DirTreeSelect.vue'
-import { api, type Task, type RepoConfig } from '@/api'
+import { api, type Task, type RepoConfig, type Agent } from '@/api'
 import { toast } from 'vue-sonner'
 
 const props = defineProps<{
@@ -54,13 +54,19 @@ const repoConfig = ref<RepoConfig>({
 })
 const cleanType = ref('none')
 const cleanKeep = ref(30)
+const allAgents = ref<Agent[]>([])
+const selectedAgentId = ref<string>('local')
 
 const cleanConfig = computed(() => {
   if (!cleanType.value || cleanType.value === 'none' || cleanKeep.value <= 0) return ''
   return JSON.stringify({ type: cleanType.value, keep: cleanKeep.value })
 })
 
-watch(() => props.open, (val) => {
+const onlineAgents = computed(() => {
+  return allAgents.value.filter(a => a.enabled)
+})
+
+watch(() => props.open, async (val) => {
   if (val) {
     form.value = { ...props.task }
     // 解析清理配置
@@ -87,15 +93,26 @@ watch(() => props.open, (val) => {
     } else {
       repoConfig.value = { source_type: 'git', source_url: '', target_path: '', branch: '', sparse_path: '', single_file: false, proxy: 'none', proxy_url: '', auth_token: '' }
     }
+    // 解析 Agent
+    selectedAgentId.value = props.task?.agent_id ? String(props.task.agent_id) : 'local'
+    // 加载 Agent 列表
+    await loadAgents()
   }
 })
 
+async function loadAgents() {
+  try {
+    allAgents.value = await api.agents.list()
+  } catch { /* ignore */ }
+}
+
 async function save() {
   try {
     form.value.clean_config = cleanConfig.value
     form.value.type = 'repo'
     form.value.config = JSON.stringify(repoConfig.value)
     form.value.command = `[${repoConfig.value.source_type}] ${repoConfig.value.source_url}`
+    form.value.agent_id = selectedAgentId.value === 'local' ? null : Number(selectedAgentId.value)
     if (props.isEdit && form.value.id) {
       await api.tasks.update(form.value.id, form.value)
       toast.success('同步任务已更新')
@@ -139,7 +156,24 @@ async function save() {
         <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
           <Label class="sm:text-right text-sm">目标路径</Label>
           <div class="sm:col-span-3">
-            <DirTreeSelect :model-value="repoConfig.target_path || ''" @update:model-value="v => repoConfig.target_path = v" />
+            <DirTreeSelect v-if="selectedAgentId === 'local'" :model-value="repoConfig.target_path || ''" @update:model-value="v => repoConfig.target_path = v" />
+            <Input v-else v-model="repoConfig.target_path" placeholder="Agent 上的目标路径" class="h-8 text-sm" />
+          </div>
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
+          <Label class="sm:text-right text-sm">执行位置</Label>
+          <div class="sm:col-span-3">
+            <Select v-model="selectedAgentId">
+              <SelectTrigger class="h-8 text-sm">
+                <SelectValue placeholder="选择执行位置" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="local">本地执行</SelectItem>
+                <SelectItem v-for="agent in onlineAgents" :key="agent.id" :value="String(agent.id)">
+                  {{ agent.name }} ({{ agent.status === 'online' ? '在线' : '离线' }})
+                </SelectItem>
+              </SelectContent>
+            </Select>
           </div>
         </div>
         <div v-if="repoConfig.source_type === 'git'" class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">

web/src/views/tasks/TaskDialog.vue

@@ -9,7 +9,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import { Badge } from '@/components/ui/badge'
 import DirTreeSelect from '@/components/DirTreeSelect.vue'
 import { Plus, ChevronDown, X } from 'lucide-vue-next'
-import { api, type Task, type EnvVar } from '@/api'
+import { api, type Task, type EnvVar, type Agent } from '@/api'
 import { toast } from 'vue-sonner'
 
 const props = defineProps<{
@@ -39,7 +39,9 @@ const form = ref<Partial<Task>>({})
 const cleanType = ref('none')
 const cleanKeep = ref(30)
 const allEnvVars = ref<EnvVar[]>([])
+const allAgents = ref<Agent[]>([])
 const selectedEnvIds = ref<number[]>([])
+const selectedAgentId = ref<string>('local')
 const envSearchQuery = ref('')
 
 const cleanConfig = computed(() => {
@@ -61,6 +63,10 @@ const selectedEnvs = computed(() => {
     .filter((e): e is EnvVar => e !== undefined)
 })
 
+const onlineAgents = computed(() => {
+  return allAgents.value.filter(a => a.enabled)
+})
+
 watch(() => props.open, async (val) => {
   if (val) {
     form.value = { ...props.task }
@@ -84,14 +90,25 @@ watch(() => props.open, async (val) => {
     } else {
       selectedEnvIds.value = []
     }
+    // 解析 Agent
+    selectedAgentId.value = props.task?.agent_id ? String(props.task.agent_id) : 'local'
     envSearchQuery.value = ''
-    // 加载环境变量
-    try {
-      allEnvVars.value = await api.env.all()
-    } catch { /* ignore */ }
+    // 加载数据
+    await loadData()
   }
 })
 
+async function loadData() {
+  try {
+    const [envs, agents] = await Promise.all([
+      api.env.all(),
+      api.agents.list()
+    ])
+    allEnvVars.value = envs
+    allAgents.value = agents
+  } catch { /* ignore */ }
+}
+
 function addEnv(id: number) {
   if (!selectedEnvIds.value.includes(id)) {
     selectedEnvIds.value.push(id)
@@ -109,6 +126,7 @@ async function save() {
     form.value.clean_config = cleanConfig.value
     form.value.envs = selectedEnvIds.value.join(',')
     form.value.type = 'task'
+    form.value.agent_id = selectedAgentId.value === 'local' ? null : Number(selectedAgentId.value)
     if (props.isEdit && form.value.id) {
       await api.tasks.update(form.value.id, form.value)
       toast.success('任务已更新')
@@ -140,7 +158,24 @@ async function save() {
         <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
           <Label class="sm:text-right text-sm">工作目录</Label>
           <div class="sm:col-span-3">
-            <DirTreeSelect :model-value="form.work_dir || ''" @update:model-value="v => form.work_dir = v" />
+            <DirTreeSelect v-if="selectedAgentId === 'local'" :model-value="form.work_dir || ''" @update:model-value="v => form.work_dir = v" />
+            <Input v-else v-model="form.work_dir" placeholder="Agent 上的工作目录（可选）" class="h-8 text-sm" />
+          </div>
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
+          <Label class="sm:text-right text-sm">执行位置</Label>
+          <div class="sm:col-span-3">
+            <Select v-model="selectedAgentId">
+              <SelectTrigger class="h-8 text-sm">
+                <SelectValue placeholder="选择执行位置" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="local">本地执行</SelectItem>
+                <SelectItem v-for="agent in onlineAgents" :key="agent.id" :value="String(agent.id)">
+                  {{ agent.name }} ({{ agent.status === 'online' ? '在线' : '离线' }})
+                </SelectItem>
+              </SelectContent>
+            </Select>
           </div>
         </div>
         <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">

web/src/views/tasks/Tasks.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { Button } from '@/components/ui/button'
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'
 import { Input } from '@/components/ui/input'
 import Pagination from '@/components/Pagination.vue'
 import TaskDialog from './TaskDialog.vue'
 import RepoDialog from './RepoDialog.vue'
-import { Plus, Play, Pencil, Trash2, Search, ScrollText, GitBranch, Terminal } from 'lucide-vue-next'
-import { api, type Task } from '@/api'
+import { Plus, Play, Pencil, Trash2, Search, ScrollText, GitBranch, Terminal, Server, Monitor } from 'lucide-vue-next'
+import { api, type Task, type Agent } from '@/api'
 import { toast } from 'vue-sonner'
 import { useSiteSettings } from '@/composables/useSiteSettings'
 import { useRouter } from 'vue-router'
@@ -17,6 +17,7 @@ const router = useRouter()
 const { pageSize } = useSiteSettings()
 
 const tasks = ref<Task[]>([])
+const agents = ref<Agent[]>([])
 const showTaskDialog = ref(false)
 const showRepoDialog = ref(false)
 const editingTask = ref<Partial<Task>>({})
@@ -29,6 +30,27 @@ const currentPage = ref(1)
 const total = ref(0)
 let searchTimer: ReturnType<typeof setTimeout> | null = null
 
+// 创建 agent 映射表
+const agentMap = computed(() => {
+  const map: Record<number, Agent> = {}
+  agents.value.forEach(a => { map[a.id] = a })
+  return map
+})
+
+// 获取任务执行位置名称
+function getExecutorName(task: Task): string {
+  if (!task.agent_id) return '本地'
+  const agent = agentMap.value[task.agent_id]
+  return agent ? agent.name : `Agent #${task.agent_id}`
+}
+
+// 获取任务执行位置状态
+function getExecutorStatus(task: Task): 'local' | 'online' | 'offline' {
+  if (!task.agent_id) return 'local'
+  const agent = agentMap.value[task.agent_id]
+  return agent?.status === 'online' ? 'online' : 'offline'
+}
+
 async function loadTasks() {
   try {
     const res = await api.tasks.list({ page: currentPage.value, page_size: pageSize.value, name: filterName.value || undefined })
@@ -37,6 +59,12 @@ async function loadTasks() {
   } catch { toast.error('加载任务失败') }
 }
 
+async function loadAgents() {
+  try {
+    agents.value = await api.agents.list()
+  } catch { /* ignore */ }
+}
+
 function handleSearch() {
   if (searchTimer) clearTimeout(searchTimer)
   searchTimer = setTimeout(() => {
@@ -108,7 +136,10 @@ function getTaskTypeTitle(type: string) {
   return type === 'repo' ? '仓库同步' : '普通任务'
 }
 
-onMounted(loadTasks)
+onMounted(() => {
+  loadTasks()
+  loadAgents()
+})
 </script>
 
 <template>
@@ -134,10 +165,11 @@ onMounted(loadTasks)
 
     <div class="rounded-lg border bg-card overflow-x-auto">
       <!-- 表头 -->
-      <div class="flex items-center gap-2 sm:gap-4 px-3 sm:px-4 py-2 border-b bg-muted/50 text-xs sm:text-sm text-muted-foreground font-medium min-w-[360px] sm:min-w-[700px]">
+      <div class="flex items-center gap-2 sm:gap-4 px-3 sm:px-4 py-2 border-b bg-muted/50 text-xs sm:text-sm text-muted-foreground font-medium min-w-[360px] sm:min-w-[800px]">
         <span class="w-12 sm:w-14 shrink-0">ID</span>
         <span class="w-10 sm:w-12 shrink-0 text-center">类型</span>
         <span class="flex-1 min-w-0">名称</span>
+        <span class="w-20 shrink-0 hidden md:block">执行位置</span>
         <span class="w-32 sm:flex-1 shrink-0 sm:shrink hidden sm:block">命令/地址</span>
         <span class="w-32 shrink-0 hidden md:block">定时规则</span>
         <span class="w-40 shrink-0 hidden lg:block">上次执行</span>
@@ -146,7 +178,7 @@ onMounted(loadTasks)
         <span class="w-20 sm:w-36 shrink-0 text-center">操作</span>
       </div>
       <!-- 列表 -->
-      <div class="divide-y min-w-[360px] sm:min-w-[700px]">
+      <div class="divide-y min-w-[360px] sm:min-w-[800px]">
         <div v-if="tasks.length === 0" class="text-sm text-muted-foreground text-center py-8">
           暂无任务
         </div>
@@ -161,6 +193,11 @@ onMounted(loadTasks)
             <Terminal v-else class="h-3.5 w-3.5 sm:h-4 sm:w-4 text-primary" />
           </span>
           <span class="flex-1 min-w-0 font-medium truncate text-xs sm:text-sm">{{ task.name }}</span>
+          <span class="w-20 shrink-0 hidden md:flex items-center gap-1 text-xs" :title="getExecutorName(task)">
+            <Monitor v-if="!task.agent_id" class="h-3 w-3 text-muted-foreground" />
+            <Server v-else class="h-3 w-3" :class="getExecutorStatus(task) === 'online' ? 'text-green-500' : 'text-gray-400'" />
+            <span class="truncate">{{ getExecutorName(task) }}</span>
+          </span>
           <code class="w-32 sm:flex-1 shrink-0 sm:shrink text-muted-foreground truncate text-xs bg-muted px-2 py-1 rounded hidden sm:block">
             <TextOverflow :text="task.command" :title="task.type === 'repo' ? '同步地址' : '执行命令'" />
           </code>
@@ -168,7 +205,10 @@ onMounted(loadTasks)
           <span class="w-40 shrink-0 text-muted-foreground text-xs hidden lg:block">{{ task.last_run || '-' }}</span>
           <span class="w-40 shrink-0 text-muted-foreground text-xs hidden lg:block">{{ task.next_run || '-' }}</span>
           <span class="w-8 sm:w-12 flex justify-center shrink-0 cursor-pointer" @click="toggleTask(task, !task.enabled)" :title="task.enabled ? '点击禁用' : '点击启用'">
-            <span :class="['w-2 h-2 rounded-full', task.enabled ? 'bg-green-500' : 'bg-gray-400']" />
+            <span class="relative flex h-2.5 w-2.5">
+              <span v-if="task.enabled" class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+              <span :class="task.enabled ? 'bg-green-500' : 'bg-gray-400'" class="relative inline-flex rounded-full h-2.5 w-2.5"></span>
+            </span>
           </span>
           <span class="w-20 sm:w-36 shrink-0 flex justify-center gap-0.5 sm:gap-1">
             <Button variant="ghost" size="icon" class="h-6 w-6 sm:h-7 sm:w-7" @click="runTask(task.id)" title="执行">