refactor(agents): improve backend setup, agent creation workflow, and data cleanup

- Add loading state management to BackendSwitcher with auto-unlock after 3s on error
- Initialize agent UUID automatically and emit 'added' event on successful online detection
- Fix Checkbox component event binding from @update:checked to @update:modelValue
- Implement time-based storage management with minute-to-timestamp conversion in NodeSettingTabStorage
- Replace immediate cleanup with scheduled cron-based cleanup for expired data
- Fix KV field name from database_limit_agent_task to database_limit_task for consistency
- Update cleanup descriptions to reflect proper retention period-based cleanup
- Add conditional rendering for AddAgentDialog to improve component lifecycle

Author: LloydAsp

src/components/BackendSwitcher.vue

@@ -11,7 +11,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useBackendStore, type Backend } from "@/composables/useBackendStore";
-import { Trash2 } from "lucide-vue-next";
+import { Trash2, Loader2 } from "lucide-vue-next";
 import { RainbowButton } from "@/components/ui/rainbow-button";
 import { useI18n } from "vue-i18n";
 import { useLifecycle } from "@/composables/useLifecycle";
@@ -56,6 +56,7 @@ const { backends, currentBackend, addBackend, removeBackend, selectBackend } =
 const newName = ref(props.initForm.newName);
 const newUrl = ref(props.initForm.newUrl);
 const newToken = ref(props.initForm.newToken);
+const isLoading = ref(false);
 
 const resetForm = () => {
   newName.value = props.initForm.newName;
@@ -65,18 +66,31 @@ const resetForm = () => {
 
 const handleAdd = async () => {
   if (!newName.value || !newUrl.value || !newToken.value) return;
-  const backend = {
-    name: newName.value,
-    url: newUrl.value,
-    token: newToken.value,
-  };
-  addBackend(backend);
-  await afterServerCreate(backend);
-  resetForm();
-  if (props.showList === false) isOpen.value = false;
-
-  // 防止出现有未预料到的未更新的内存变量
-  location.reload();
+  if (isLoading.value) return;
+
+  isLoading.value = true;
+  try {
+    const backend = {
+      name: newName.value,
+      url: newUrl.value,
+      token: newToken.value,
+    };
+    addBackend(backend);
+    await afterServerCreate(backend);
+    resetForm();
+    if (props.showList === false) isOpen.value = false;
+
+    isLoading.value = false;
+    // 防止出现有未预料到的未更新的内存变量
+    location.reload();
+  } catch (e) {
+    console.error("Failed to add backend:", e);
+    isLoading.value = false;
+    // 自动解锁：3秒后恢复正常操作
+    setTimeout(() => {
+      isLoading.value = false;
+    }, 3000);
+  }
 };
 
 const handleRemove = (b: Backend) => removeBackend(b);
@@ -101,7 +115,10 @@ watch(
         </DialogDescription>
       </DialogHeader>
 
-      <div class="grid gap-4 py-4">
+      <div
+        class="grid gap-4 py-4"
+        :class="{ 'opacity-50 pointer-events-none': isLoading }"
+      >
         <!-- 主控列表：仅在 showList !== false 时显示 -->
         <template v-if="showList !== false">
           <div class="flex flex-col gap-2 max-h-[300px] overflow-y-auto">
@@ -198,9 +215,14 @@ watch(
           </div>
           <RainbowButton
             @click="handleAdd"
-            :disabled="!newName || !newUrl || !newToken"
+            :disabled="!newName || !newUrl || !newToken || isLoading"
           >
-            {{ t("dashboard.servers.addServer") }}
+            <Loader2 v-if="isLoading" class="h-4 w-4 mr-2 animate-spin" />
+            {{
+              isLoading
+                ? t("dashboard.common.loading")
+                : t("dashboard.servers.addServer")
+            }}
           </RainbowButton>
         </div>
       </div>

src/components/agents/AddAgentDialog.vue

@@ -50,7 +50,7 @@ const step = ref(1);
 
 // Step 1: 基础信息
 const nodeName = ref("");
-const nodeUuid = ref("");
+const nodeUuid = ref(crypto.randomUUID());
 
 const generateUuid = () => {
   nodeUuid.value = crypto.randomUUID();
@@ -62,7 +62,7 @@ const generatedToken = ref("");
 const resetForm = () => {
   step.value = 1;
   nodeName.value = "";
-  nodeUuid.value = "";
+  nodeUuid.value = crypto.randomUUID();
   generatedToken.value = "";
   selectedCronIds.value = new Set();
   staticRetention.value = 60 * 24 * 7; // minute
@@ -123,6 +123,7 @@ const checkOnline = async () => {
         },
       });
       stopPolling();
+      emit("added");
     }
   } catch {
     // ignore
@@ -373,8 +374,8 @@ const steps = [
               >
                 <Checkbox
                   :checked="selectedCronIds.has(cron.id)"
-                  @update:checked="
-                    (v: boolean) => {
+                  @update:modelValue="
+                    (v: unknown) => {
                       if (v) selectedCronIds.add(cron.id);
                       else selectedCronIds.delete(cron.id);
                     }

src/components/node-manage/NodeManageTabAgents.vue

@@ -291,6 +291,10 @@ defineExpose({ fetchAgents });
         </TableBody>
       </Table>
     </div>
-    <AddAgentDialog v-model:open="addAgentOpen" @added="fetchAgents()" />
+    <AddAgentDialog
+      v-if="addAgentOpen"
+      v-model:open="addAgentOpen"
+      @added="fetchAgents()"
+    />
   </div>
 </template>

src/components/node/setting/NodeSettingTabStorage.vue

@@ -14,11 +14,13 @@ import {
 } from "@/components/ui/card";
 import { useKv } from "@/composables/useKv";
 import { useI18n } from "vue-i18n";
+import { useCron, taskToCronType } from "@/composables/useCron";
 
 const props = defineProps<{ uuid: string }>();
 
 const { t } = useI18n();
 const kv = useKv();
+const cron = useCron();
 
 const loading = ref(false);
 const saveLoading = ref(false);
@@ -28,6 +30,25 @@ const storageStatic = ref<number | undefined>(undefined);
 const storageDynamic = ref<number | undefined>(undefined);
 const storageAgentTask = ref<number | undefined>(undefined);
 
+let cleanCronName = "periodic-cleanup";
+
+const oneMinute = 60 * 1000;
+function tsToMinute(value: unknown) {
+  if (typeof value === "number") {
+    return value / oneMinute;
+  }
+  if (typeof value === "string" && /^\d+$/.test(value)) {
+    return parseInt(value) / oneMinute;
+  }
+}
+const minute2Ts = (t: typeof storageAgentTask.value) => {
+  const oneMinute = 60 * 1000; // ms
+  if (typeof t == "undefined") {
+    return undefined;
+  }
+  return t * oneMinute;
+};
+
 onMounted(async () => {
   loading.value = true;
   try {
@@ -38,11 +59,13 @@ onMounted(async () => {
     const get = (key: string) => results.find((r) => r.key === key)?.value;
 
     if (get("database_limit_static_monitoring") !== undefined)
-      storageStatic.value = Number(get("database_limit_static_monitoring"));
+      storageStatic.value = tsToMinute(get("database_limit_static_monitoring"));
     if (get("database_limit_dynamic_monitoring") !== undefined)
-      storageDynamic.value = Number(get("database_limit_dynamic_monitoring"));
-    if (get("database_limit_agent_task") !== undefined)
-      storageAgentTask.value = Number(get("database_limit_agent_task"));
+      storageDynamic.value = tsToMinute(
+        get("database_limit_dynamic_monitoring"),
+      );
+    if (get("database_limit_task") !== undefined)
+      storageAgentTask.value = tsToMinute(get("database_limit_task"));
   } catch {
     // ignore
   } finally {
@@ -59,17 +82,17 @@ async function handleSave() {
     if (storageStatic.value !== undefined)
       items.push({
         key: "database_limit_static_monitoring",
-        value: storageStatic.value,
+        value: minute2Ts(storageStatic.value),
       });
     if (storageDynamic.value !== undefined)
       items.push({
         key: "database_limit_dynamic_monitoring",
-        value: storageDynamic.value,
+        value: minute2Ts(storageDynamic.value),
       });
     if (storageAgentTask.value !== undefined)
       items.push({
-        key: "database_limit_agent_task",
-        value: storageAgentTask.value,
+        key: "database_limit_task",
+        value: minute2Ts(storageAgentTask.value),
       });
 
     if (items.length === 0) {
@@ -90,6 +113,26 @@ async function handleSave() {
   }
 }
 
+async function cleanExpiredData() {
+  try {
+    cleanLoading.value = true;
+    const tempName = crypto.randomUUID();
+    await cron.create({
+      name: tempName, // temp name
+      cron_expression: "* * * * * *",
+      cron_type: {
+        server: "clean_up_database",
+      },
+    });
+    await new Promise((r) => setTimeout(r, 2000));
+    await cron.remove(tempName);
+    toast.success(t("dashboard.node.storage.cleanSuccess"));
+  } catch (error) {
+    if (error instanceof Error) toast.error(error.toString());
+  } finally {
+    cleanLoading.value = false;
+  }
+}
 async function handleCleanData() {
   cleanLoading.value = true;
   try {
@@ -229,7 +272,7 @@ async function handleCleanData() {
           :confirm-text="$t('dashboard.node.storage.cleanConfirm')"
           :cancel-text="$t('dashboard.node.storage.cleanCancel')"
           :loading="cleanLoading"
-          @confirm="handleCleanData"
+          @confirm="cleanExpiredData"
         >
           <Button variant="destructive" :disabled="cleanLoading">
             <Loader2 v-if="cleanLoading" class="h-4 w-4 animate-spin mr-2" />

src/locales/en.ts

@@ -503,7 +503,7 @@ export default {
         title: "Storage Retention",
         cleanTitle: "Clean Data Now",
         cleanDesc:
-          "This will temporarily clear all stored data. This action cannot be undone.",
+          "Immediately purge expired data based on the configured retention period. This action is irreversible.",
         cleanButton: "Clean Data",
         cleaning: "Cleaning...",
         cleanSuccess: "Data cleaned successfully",

src/locales/zh_cn.ts

@@ -498,7 +498,7 @@ export default {
       storage: {
         title: "储存周期设置",
         cleanTitle: "立即清理数据",
-        cleanDesc: "将临时清除所有储存数据，此操作不可恢复。",
+        cleanDesc: "立即按照储存周期设置清理过期数据，此操作不可恢复。",
         cleanButton: "清理数据",
         cleaning: "清理中...",
         cleanSuccess: "数据清理完成",