fix: env hidden and disable input focus

2026-02-10 18:58:21 +08:00
parent a8bd67dbd3
commit 5625ba3be7
7 changed files with 89 additions and 74 deletions
@@ -323,7 +323,7 @@ onUnmounted(() => {
                class="w-24 sm:w-32 shrink-0 font-medium text-xs sm:text-sm truncate cursor-pointer hover:text-primary"
                @click="viewDetail(agent)" :title="agent.name">{{ agent.name }}</span>
              <span class="w-24 sm:w-28 shrink-0 text-xs sm:text-sm text-muted-foreground truncate">{{ agent.ip || '-'
-                }}</span>
+              }}</span>
              <span class="w-20 sm:w-32 shrink-0 text-xs sm:text-sm text-muted-foreground truncate hidden md:block">{{
                agent.hostname || '-' }}</span>
              <span class="w-20 sm:w-36 shrink-0 text-xs sm:text-sm text-muted-foreground truncate hidden lg:block">{{
@@ -423,7 +423,7 @@ onUnmounted(() => {

    <!-- 详情对话框 -->
    <Dialog v-model:open="showDetailDialog">
-      <DialogContent class="sm:max-w-md md:max-w-lg">
+      <DialogContent class="sm:max-w-md md:max-w-lg" @openAutoFocus.prevent>
        <DialogHeader>
          <DialogTitle>Agent 详情</DialogTitle>
        </DialogHeader>
@@ -492,7 +492,7 @@ onUnmounted(() => {

    <!-- 编辑对话框 -->
    <Dialog v-model:open="showEditDialog">
-      <DialogContent>
+      <DialogContent @openAutoFocus.prevent>
        <DialogHeader>
          <DialogTitle>编辑 Agent</DialogTitle>
        </DialogHeader>
@@ -532,7 +532,7 @@ onUnmounted(() => {

    <!-- 下载对话框 -->
    <Dialog v-model:open="showDownloadDialog">
-      <DialogContent class="sm:max-w-lg">
+      <DialogContent class="sm:max-w-lg" @openAutoFocus.prevent>
        <DialogHeader>
          <DialogTitle>下载 Agent</DialogTitle>
          <DialogDescription>当前版本: {{ agentVersion }}</DialogDescription>
@@ -580,7 +580,7 @@ onUnmounted(() => {

    <!-- 创建令牌对话框 -->
    <Dialog v-model:open="showTokenDialog">
-      <DialogContent>
+      <DialogContent @openAutoFocus.prevent>
        <DialogHeader>
          <DialogTitle>生成令牌</DialogTitle>
        </DialogHeader>
@@ -202,8 +202,10 @@ onMounted(loadDeps)
              <Button variant="outline" size="icon" class="h-9 w-9 shrink-0" @click="loadDeps" :disabled="loading">
                <RefreshCw class="h-4 w-4" :class="{ 'animate-spin': loading }" />
              </Button>
-              <Button variant="outline" size="sm" class="h-9 shrink-0" @click="reinstallAll" :disabled="reinstallingAll || filteredDeps.length === 0">
-                <RotateCw class="h-4 w-4 sm:mr-1.5" :class="{ 'animate-spin': reinstallingAll }" /> <span class="hidden sm:inline">全部重装</span>
+              <Button variant="outline" size="sm" class="h-9 shrink-0" @click="reinstallAll"
+                :disabled="reinstallingAll || filteredDeps.length === 0">
+                <RotateCw class="h-4 w-4 sm:mr-1.5" :class="{ 'animate-spin': reinstallingAll }" /> <span
+                  class="hidden sm:inline">全部重装</span>
              </Button>
              <Button size="sm" class="h-9 shrink-0" @click="openInstallDialog">
                <Download class="h-4 w-4 sm:mr-1.5" /> <span class="hidden sm:inline">安装</span>
@@ -212,7 +214,8 @@ onMounted(loadDeps)
          </div>

          <!-- 表头 -->
-          <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-[400px]">
+          <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-[400px]">
            <span class="flex-1">包名</span>
            <span class="w-32">版本</span>
            <span class="w-48 hidden md:block">备注</span>
@@ -229,12 +232,8 @@ onMounted(loadDeps)
              <Package class="h-8 w-8 mx-auto mb-2 opacity-50" />
              {{ searchQuery ? '无匹配结果' : '暂无依赖包' }}
            </div>
-            <div
-              v-else
-              v-for="dep in filteredDeps"
-              :key="dep.id"
-              class="flex items-center gap-4 px-4 py-2 hover:bg-muted/50 transition-colors"
-            >
+            <div v-else v-for="dep in filteredDeps" :key="dep.id"
+              class="flex items-center gap-4 px-4 py-2 hover:bg-muted/50 transition-colors">
              <span class="flex-1 font-mono text-sm truncate">
                <TextOverflow :text="dep.name" title="包名" />
              </span>
@@ -246,7 +245,8 @@ onMounted(loadDeps)
                <Button v-if="dep.log" variant="ghost" size="icon" class="h-7 w-7" @click="showLog(dep)">
                  <FileText class="h-4 w-4" />
                </Button>
-                <Button variant="ghost" size="icon" class="h-7 w-7" @click="reinstallPackage(dep)" :disabled="reinstalling === dep.id">
+                <Button variant="ghost" size="icon" class="h-7 w-7" @click="reinstallPackage(dep)"
+                  :disabled="reinstalling === dep.id">
                  <RotateCw class="h-4 w-4" :class="{ 'animate-spin': reinstalling === dep.id }" />
                </Button>
                <Button variant="ghost" size="icon" class="h-7 w-7 text-destructive" @click="confirmDelete(dep)">
@@ -261,7 +261,7 @@ onMounted(loadDeps)

    <!-- 安装对话框 -->
    <Dialog v-model:open="showInstallDialog">
-      <DialogContent class="sm:max-w-[400px]">
+      <DialogContent class="sm:max-w-[400px]" @openAutoFocus.prevent>
        <DialogHeader>
          <DialogTitle>安装 {{ getTypeLabel(activeTab) }} 包</DialogTitle>
        </DialogHeader>
@@ -309,7 +309,7 @@ onMounted(loadDeps)

    <!-- 日志对话框 -->
    <Dialog v-model:open="showLogDialog">
-      <DialogContent class="sm:max-w-[600px]">
+      <DialogContent class="sm:max-w-[600px]" @openAutoFocus.prevent>
        <DialogHeader>
          <DialogTitle>安装日志 - {{ logPkgName }}</DialogTitle>
        </DialogHeader>
@@ -522,7 +522,7 @@ onUnmounted(() => {

    <!-- 新建对话框 -->
    <Dialog v-model:open="showCreateDialog">
-      <DialogContent class="max-w-xs">
+      <DialogContent class="max-w-xs" @openAutoFocus.prevent>
        <DialogHeader>
          <DialogTitle class="text-sm">新建</DialogTitle>
        </DialogHeader>
@@ -570,7 +570,7 @@ onUnmounted(() => {

    <!-- 重命名对话框 -->
    <Dialog v-model:open="showRenameDialog">
-      <DialogContent class="max-w-xs" @open-auto-focus.prevent>
+      <DialogContent class="max-w-xs" @openAutoFocus.prevent>
        <DialogHeader>
          <DialogTitle class="text-sm">重命名</DialogTitle>
        </DialogHeader>
@@ -592,7 +592,7 @@ onUnmounted(() => {
    <Dialog v-model:open="showTerminalDialog">
      <DialogContent
        class="w-[calc(100%-2rem)] sm:max-w-3xl h-[60vh] sm:h-[70vh] flex flex-col p-0 overflow-hidden !bg-[#1e1e1e] border-[#3c3c3c]"
-        :show-close-button="false">
+        :show-close-button="false" @openAutoFocus.prevent>
        <div class="flex items-center justify-between px-3 sm:px-4 py-2 border-b border-[#3c3c3c]">
          <span class="text-xs sm:text-sm font-medium text-gray-300">运行脚本</span>
          <Button variant="ghost" size="icon" class="h-6 w-6 text-gray-400 hover:text-white hover:bg-white/10"
@@ -100,16 +100,8 @@ async function deleteEnv() {
  deleteEnvId.value = null
 }

-async function toggleShow(env: EnvVar) {
-  const newHiddenStatus = !env.hidden
-  try {
-    await api.env.update(env.id, { ...env, hidden: newHiddenStatus })
-    env.hidden = newHiddenStatus
-    showValues.value[env.id] = !newHiddenStatus
-    toast.success(newHiddenStatus ? '值已隐藏并保存' : '值已显示并保存')
-  } catch {
-    toast.error('保存显示状态失败')
-  }
+function toggleShow(id: number) {
+  showValues.value[id] = !showValues.value[id]
 }

 function maskValue(value: string) {
@@ -163,7 +155,7 @@ onMounted(loadEnvVars)
            <TextOverflow :text="env.remark || '-'" title="备注" />
          </span>
          <span class="w-20 sm:w-24 shrink-0 flex justify-center gap-1">
-            <Button variant="ghost" size="icon" class="h-7 w-7" @click="toggleShow(env)"
+            <Button variant="ghost" size="icon" class="h-7 w-7" @click="toggleShow(env.id)"
              :title="showValues[env.id] ? '隐藏' : '显示'">
              <Eye v-if="!showValues[env.id]" class="h-3.5 w-3.5" />
              <EyeOff v-else class="h-3.5 w-3.5" />
@@ -183,7 +175,7 @@ onMounted(loadEnvVars)
    </div>

    <Dialog v-model:open="showDialog">
-      <DialogContent class="max-w-md">
+      <DialogContent class="max-w-md" @openAutoFocus.prevent>
        <DialogHeader>
          <DialogTitle>{{ isEdit ? '编辑变量' : '新建变量' }}</DialogTitle>
        </DialogHeader>
@@ -116,7 +116,7 @@ watch(() => props.open, async (val) => {
        // 兼容旧字段: 优先使用 $task_concurrency, 若无则默认 1
        let concurrency = 1
        if (parsed['$task_concurrency'] !== undefined) {
-             concurrency = parsed['$task_concurrency'] === 1 ? 1 : 0
+          concurrency = parsed['$task_concurrency'] === 1 ? 1 : 0
        }
        repoConfig.value = { ...defaultConfig, ...parsed, concurrency }
      } catch {
@@ -149,7 +149,7 @@ async function save() {
      ...repoConfig.value,
      '$task_concurrency': repoConfig.value.concurrency !== undefined ? repoConfig.value.concurrency : 1
    }
-    
+
    form.value.config = JSON.stringify(configToSave)
    form.value.command = `[${repoConfig.value.source_type}] ${repoConfig.value.source_url}`
    form.value.agent_id = selectedAgentId.value === 'local' ? null : Number(selectedAgentId.value)
@@ -168,7 +168,8 @@ async function save() {

 <template>
  <Dialog :open="open" @update:open="emit('update:open', $event)">
-    <DialogContent class="sm:max-w-[480px] max-h-[85vh] flex flex-col !gap-0 !p-0" :trap-focus="false" @open-auto-focus.prevent>
+    <DialogContent class="sm:max-w-[480px] max-h-[85vh] flex flex-col !gap-0 !p-0" :trap-focus="false"
+      @openAutoFocus.prevent>
      <DialogHeader class="shrink-0 p-6 pb-0">
        <DialogTitle>{{ isEdit ? '编辑仓库同步' : '新建仓库同步' }}</DialogTitle>
      </DialogHeader>
@@ -179,7 +180,8 @@ async function save() {
        </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>
-          <Select :model-value="repoConfig.source_type" @update:model-value="(v) => repoConfig.source_type = String(v || 'git')">
+          <Select :model-value="repoConfig.source_type"
+            @update:model-value="(v) => repoConfig.source_type = String(v || 'git')">
            <SelectTrigger class="sm:col-span-3 h-8 text-sm">
              <SelectValue placeholder="选择源类型" />
            </SelectTrigger>
@@ -191,12 +193,15 @@ async function save() {
        </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>
-          <Input v-model="repoConfig.source_url" :placeholder="repoConfig.source_type === 'git' ? 'https://github.com/user/repo.git' : 'https://example.com/file.js'" class="sm:col-span-3 h-8 text-xs font-mono" />
+          <Input v-model="repoConfig.source_url"
+            :placeholder="repoConfig.source_type === 'git' ? 'https://github.com/user/repo.git' : 'https://example.com/file.js'"
+            class="sm:col-span-3 h-8 text-xs font-mono" />
        </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">
-            <DirTreeSelect v-if="selectedAgentId === 'local'" :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>
@@ -214,15 +219,20 @@ async function save() {
            <p class="text-xs text-muted-foreground mt-1">仓库同步任务暂时仅支持本地执行</p>
          </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">
+        <div v-if="repoConfig.source_type === 'git'"
+          class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
          <Label class="sm:text-right text-sm">分支</Label>
-          <Input v-model="repoConfig.branch" placeholder="main (可选)" class="sm:col-span-3 h-8 text-sm" autocomplete="off" />
+          <Input v-model="repoConfig.branch" placeholder="main (可选)" class="sm:col-span-3 h-8 text-sm"
+            autocomplete="off" />
        </div>
-        <div v-if="repoConfig.source_type === 'git'" class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
+        <div v-if="repoConfig.source_type === 'git'"
+          class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
          <Label class="sm:text-right text-sm">稀疏路径</Label>
-          <Input v-model="repoConfig.sparse_path" placeholder="仅拉取指定目录或文件 (可选)" class="sm:col-span-3 h-8 text-sm" autocomplete="off" />
+          <Input v-model="repoConfig.sparse_path" placeholder="仅拉取指定目录或文件 (可选)" class="sm:col-span-3 h-8 text-sm"
+            autocomplete="off" />
        </div>
-        <div v-if="repoConfig.source_type === 'git' && repoConfig.sparse_path" class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
+        <div v-if="repoConfig.source_type === 'git' && repoConfig.sparse_path"
+          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">
            <div class="flex items-center gap-3">
@@ -246,11 +256,13 @@ async function save() {
        </div>
        <div v-if="repoConfig.proxy === 'custom'" class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
          <Label class="sm:text-right text-sm">代理地址</Label>
-          <Input v-model="repoConfig.proxy_url" placeholder="https://your-proxy.com/" class="sm:col-span-3 h-8 text-xs font-mono" autocomplete="off" />
+          <Input v-model="repoConfig.proxy_url" placeholder="https://your-proxy.com/"
+            class="sm:col-span-3 h-8 text-xs font-mono" autocomplete="off" />
        </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">认证Token</Label>
-          <Input v-model="repoConfig.auth_token" type="text" placeholder="可选，用于私有仓库" class="sm:col-span-3 h-8 text-sm" autocomplete="new-password" />
+          <Input v-model="repoConfig.auth_token" type="text" placeholder="可选，用于私有仓库" class="sm:col-span-3 h-8 text-sm"
+            autocomplete="new-password" />
        </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>
@@ -269,12 +281,9 @@ async function save() {
          <div class="sm:col-span-3">
            <p class="text-xs text-muted-foreground mb-1.5">格式: 秒 分 时 日 月 周</p>
            <div class="flex flex-wrap gap-1">
-              <span
-                v-for="preset in cronPresets"
-                :key="preset.value"
+              <span v-for="preset in cronPresets" :key="preset.value"
                class="px-1.5 py-0.5 text-xs rounded bg-muted hover:bg-accent cursor-pointer transition-colors"
-                @click="form.schedule = preset.value"
-              >
+                @click="form.schedule = preset.value">
                {{ preset.label }}
              </span>
            </div>
@@ -298,7 +307,8 @@ async function save() {
                  <SelectItem value="count">按条数</SelectItem>
                </SelectContent>
              </Select>
-              <Input v-if="cleanType && cleanType !== 'none'" v-model.number="cleanKeep" type="number" :placeholder="cleanType === 'day' ? '7' : '100'" class="w-20 h-9 text-sm" />
+              <Input v-if="cleanType && cleanType !== 'none'" v-model.number="cleanKeep" type="number"
+                :placeholder="cleanType === 'day' ? '7' : '100'" class="w-20 h-9 text-sm" />
            </div>
          </div>
        </div>
@@ -109,7 +109,7 @@ watch(() => props.open, async (val) => {
      if (!configStr) {
        configStr = '{}'
      }
-      
+
      const parsed = JSON.parse(configStr)
      // 确保解析结果是对象
      if (parsed && typeof parsed === 'object') {
@@ -178,10 +178,10 @@ async function save() {
    form.value.envs = selectedEnvIds.value.join(',')
    form.value.type = 'task'
    form.value.agent_id = selectedAgentId.value === 'local' ? null : Number(selectedAgentId.value)
-    
+
    // 保存配置 - 确保 concurrency 字段被正确保存
    let config: Record<string, any> = {}
-    
+
    // 如果 form.value.config 存在，先解析它以保留其他配置
    if (form.value.config) {
      try {
@@ -193,16 +193,16 @@ async function save() {
        config = {}
      }
    }
-    
+
    // 更新并发控制字段 (1: 开启, 0: 关闭)
    config['$task_concurrency'] = concurrency.value
-    
+
    // 重新序列化配置
    form.value.config = JSON.stringify(config)

    // 保存当前选择的执行位置对应的工作目录
    form.value.work_dir = currentWorkDir.value
-    
+
    if (props.isEdit && form.value.id) {
      await api.tasks.update(form.value.id, form.value)
      toast.success('任务已更新')
@@ -212,15 +212,15 @@ async function save() {
    }
    emit('update:open', false)
    emit('saved')
-  } catch (error) { 
-    toast.error('保存失败') 
+  } catch (error) {
+    toast.error('保存失败')
  }
 }
 </script>

 <template>
  <Dialog :open="open" @update:open="emit('update:open', $event)">
-    <DialogContent class="sm:max-w-[480px]" @open-auto-focus.prevent>
+    <DialogContent class="sm:max-w-[480px]" @openAutoFocus.prevent>
      <DialogHeader>
        <DialogTitle>{{ isEdit ? '编辑任务' : '新建任务' }}</DialogTitle>
      </DialogHeader>
@@ -248,7 +248,7 @@ async function save() {
                <SelectValue placeholder="选择执行位置" />
              </SelectTrigger>
              <SelectContent>
-              <SelectItem value="local">本地执行</SelectItem>
+                <SelectItem value="local">本地执行</SelectItem>
                <SelectItem v-for="agent in onlineAgents" :key="agent.id" :value="String(agent.id)">
                  {{ agent.name }} ({{ agent.status === 'online' ? '在线' : '离线' }})
                </SelectItem>
@@ -265,12 +265,9 @@ async function save() {
          <div class="sm:col-span-3">
            <p class="text-xs text-muted-foreground mb-1.5">格式: 秒 分 时 日 月 周</p>
            <div class="flex flex-wrap gap-1">
-              <span
-                v-for="preset in cronPresets"
-                :key="preset.value"
+              <span v-for="preset in cronPresets" :key="preset.value"
                class="px-1.5 py-0.5 text-xs rounded bg-muted hover:bg-accent cursor-pointer transition-colors"
-                @click="form.schedule = preset.value"
-              >
+                @click="form.schedule = preset.value">
                {{ preset.label }}
              </span>
            </div>
@@ -294,7 +291,8 @@ async function save() {
                  <SelectItem value="count">按条数</SelectItem>
                </SelectContent>
              </Select>
-              <Input v-if="cleanType && cleanType !== 'none'" v-model.number="cleanKeep" type="number" :placeholder="cleanType === 'day' ? '7' : '100'" class="w-20 h-9 text-sm" />
+              <Input v-if="cleanType && cleanType !== 'none'" v-model.number="cleanKeep" type="number"
+                :placeholder="cleanType === 'day' ? '7' : '100'" class="w-20 h-9 text-sm" />
            </div>
          </div>
        </div>
@@ -324,12 +322,9 @@ async function save() {
                  {{ allEnvVars.length === 0 ? '暂无环境变量' : '无匹配结果' }}
                </div>
                <div v-else class="max-h-[140px] overflow-y-auto space-y-0.5">
-                  <div
-                    v-for="env in filteredEnvVars"
-                    :key="env.id"
+                  <div v-for="env in filteredEnvVars" :key="env.id"
                    class="flex items-center gap-2 px-2 py-1 rounded hover:bg-muted cursor-pointer text-xs"
-                    @click="addEnv(env.id)"
-                  >
+                    @click="addEnv(env.id)">
                    <Plus class="h-3 w-3 text-muted-foreground" />
                    <span class="truncate">{{ env.name }}</span>
                  </div>
@@ -337,7 +332,8 @@ async function save() {
              </PopoverContent>
            </Popover>
            <div v-if="selectedEnvs.length > 0" class="flex flex-wrap gap-1">
-              <div v-for="env in selectedEnvs" :key="env.id" class="inline-flex items-center gap-0.5 px-2 py-0.5 text-xs h-5 rounded-full bg-secondary text-secondary-foreground">
+              <div v-for="env in selectedEnvs" :key="env.id"
+                class="inline-flex items-center gap-0.5 px-2 py-0.5 text-xs h-5 rounded-full bg-secondary text-secondary-foreground">
                <span>{{ env.name }}</span>
                <X class="h-2.5 w-2.5 cursor-pointer hover:text-destructive" @click="removeEnv(env.id)" />
              </div>