From 27e144410ddf20b5d5e7ce3c87add84ed1b734f4 Mon Sep 17 00:00:00 2001
From: engigu <sayheya@qq.com>
Date: Mon, 30 Mar 2026 17:19:25 +0800
Subject: [PATCH] chore: add loading animation

---
 web/src/views/editor/Editor.vue                 |  5 +++++
 web/src/views/editor/components/FileSidebar.vue |  5 +++--
 web/src/views/tasks/Tasks.vue                   | 12 ++++++++++--
 web/src/views/terminal/Terminal.vue             | 11 +++++++++--
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/web/src/views/editor/Editor.vue b/web/src/views/editor/Editor.vue
index 137dda1..ea96cb0 100644
--- a/web/src/views/editor/Editor.vue
+++ b/web/src/views/editor/Editor.vue
@@ -27,6 +27,7 @@ const selectedFile = ref<string | null>(null)
 const fileContent = ref('')
 const originalContent = ref('')
 const isLoading = ref(false)
+const isRefreshing = ref(false)
 const isEditMode = ref(false)
 const hasChanges = computed(() => fileContent.value !== originalContent.value)
 
@@ -142,10 +143,13 @@ function handleResize() {
 }
 
 async function loadTree() {
+  isRefreshing.value = true
   try {
     fileTree.value = await api.files.tree()
   } catch {
     toast.error('加载文件树失败')
+  } finally {
+    isRefreshing.value = false
   }
 }
 
@@ -438,6 +442,7 @@ onUnmounted(() => {
       :file-tree="fileTree"
       :expanded-dirs="expandedDirs"
       :selected-path="selectedPath"
+      :is-refreshing="isRefreshing"
       @refresh="loadTree"
       @select="handleSelect"
       @delete="confirm => dialogsRef?.openDelete(confirm)"
diff --git a/web/src/views/editor/components/FileSidebar.vue b/web/src/views/editor/components/FileSidebar.vue
index c6ee979..487b3e2 100644
--- a/web/src/views/editor/components/FileSidebar.vue
+++ b/web/src/views/editor/components/FileSidebar.vue
@@ -9,6 +9,7 @@ defineProps<{
   fileTree: FileNode[]
   expandedDirs: Set<string>
   selectedPath: string | null
+  isRefreshing?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -67,8 +68,8 @@ function handleFilesUpload(e: Event) {
     <div class="flex items-center justify-between p-2 border-b">
       <span class="text-xs font-medium">脚本文件</span>
       <div class="flex gap-1">
-        <Button variant="ghost" size="icon" class="h-6 w-6" @click="emit('refresh')" title="刷新">
-          <RefreshCw class="h-3 w-3" />
+        <Button variant="ghost" size="icon" class="h-6 w-6" @click="emit('refresh')" :disabled="isRefreshing" title="刷新">
+          <RefreshCw class="h-3 w-3" :class="{ 'animate-spin': isRefreshing }" />
         </Button>
         <Button variant="ghost" size="icon" class="h-6 w-6" @click="triggerFilesUpload('')" title="上传文件/文件夹(放在根目录)">
           <FolderUp class="h-3 w-3" />
diff --git a/web/src/views/tasks/Tasks.vue b/web/src/views/tasks/Tasks.vue
index a70aca8..4b19a57 100644
--- a/web/src/views/tasks/Tasks.vue
+++ b/web/src/views/tasks/Tasks.vue
@@ -7,7 +7,7 @@ import Pagination from '@/components/Pagination.vue'
 import TaskDialog from './TaskDialog.vue'
 import RepoDialog from './RepoDialog.vue'
 import LogViewer from '@/views/history/LogViewer.vue'
-import { Plus, Play, Pencil, Trash2, Search, ScrollText, GitBranch, Terminal, Server, Monitor, X, Loader2, Wifi, WifiOff, Zap, ZapOff, Copy, Tag } from 'lucide-vue-next'
+import { Plus, Play, Pencil, Trash2, Search, ScrollText, GitBranch, Terminal, Server, Monitor, X, Loader2, RefreshCw, Wifi, WifiOff, Zap, ZapOff, Copy, Tag } from 'lucide-vue-next'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { api, type Agent, type Task } from '@/api'
@@ -36,6 +36,7 @@ const filterType = ref<string>(TASK_TYPE.NORMAL)
 const filterAgentId = ref<string | null>(null)
 const currentPage = ref(1)
 const total = ref(0)
+const loading = ref(false)
 let searchTimer: ReturnType<typeof setTimeout> | null = null
 
 // 创建 agent 映射表
@@ -67,6 +68,7 @@ function getExecutorStatus(task: Task): 'local' | 'online' | 'offline' {
 }
 
 async function loadTasks() {
+  loading.value = true
   try {
     const res = await api.tasks.list({
       page: currentPage.value,
@@ -78,7 +80,9 @@ async function loadTasks() {
     })
     tasks.value = res.data
     total.value = res.total
-  } catch { toast.error('加载任务失败') }
+  } catch { toast.error('加载任务失败') } finally {
+    loading.value = false
+  }
 }
 
 async function loadAgents() {
@@ -347,6 +351,10 @@ watch(() => route.query.agent_id, (newVal) => {
             <X class="h-3.5 w-3.5 cursor-pointer hover:text-destructive" @click="clearAgentFilter" />
           </div>
 
+          <Button variant="outline" size="icon" class="h-9 w-9 shrink-0" @click="loadTasks" :disabled="loading" title="刷新">
+            <RefreshCw class="h-4 w-4" :class="{ 'animate-spin': loading }" />
+          </Button>
+
           <div class="flex items-center gap-2 shrink-0 justify-end">
             <!-- 动态新增按钮 -->
             <Button variant="outline" class="shrink-0 px-3 h-9 shadow-sm text-destructive border-destructive/20 hover:bg-destructive/10" @click="confirmBatchDelete">
diff --git a/web/src/views/terminal/Terminal.vue b/web/src/views/terminal/Terminal.vue
index 9508088..3153b24 100644
--- a/web/src/views/terminal/Terminal.vue
+++ b/web/src/views/terminal/Terminal.vue
@@ -18,8 +18,15 @@ onMounted(async () => {
   }
 })
 
+const isReconnecting = ref(false)
+
 function reconnect() {
+  isReconnecting.value = true
   terminalRef.value?.reconnect()
+  // Add a slight delay to the animation so it's visible even for fast reconnections
+  setTimeout(() => {
+    isReconnecting.value = false
+  }, 1000)
 }
 </script>
 
@@ -52,8 +59,8 @@ function reconnect() {
         </Popover>
       </div>
       <Button variant="ghost" size="icon" class="h-6 w-6 text-gray-400 hover:text-white" @click="reconnect"
-        title="重新连接">
-        <RefreshCw class="h-3 w-3" />
+        :disabled="isReconnecting" title="重新连接">
+        <RefreshCw class="h-3 w-3" :class="{ 'animate-spin': isReconnecting }" />
       </Button>
     </div>
     <div class="flex-1 border border-[#3c3c3c] border-t-0 rounded-b-md overflow-hidden bg-[#1e1e1e]">