From f034c3d882877493a29d146999bb6dc95bc8826d Mon Sep 17 00:00:00 2001
From: duorameng <2997944583@qq.com>
Date: Mon, 8 Jun 2026 09:03:55 +0800
Subject: [PATCH] refactor(web): extract LineNumberTextarea and refactor
 Environments.vue

- Extracted reusable LineNumberTextarea component

- Refactored Environments.vue by extracting EditEnvDialog and DeleteEnvDialog

- Fixed Sonner toast font inheritance

- Removed fixed placeholder font in LineNumberTextarea
---
 web/src/assets/index.css                      |   1 +
 web/src/components/LineNumberTextarea.vue     | 121 ++++++++
 web/src/views/environments/Environments.vue   | 267 +-----------------
 .../components/DeleteEnvDialog.vue            | 114 ++++++++
 .../environments/components/EditEnvDialog.vue | 117 ++++++++
 5 files changed, 366 insertions(+), 254 deletions(-)
 create mode 100644 web/src/components/LineNumberTextarea.vue
 create mode 100644 web/src/views/environments/components/DeleteEnvDialog.vue
 create mode 100644 web/src/views/environments/components/EditEnvDialog.vue

diff --git a/web/src/assets/index.css b/web/src/assets/index.css
index 6522178..a24079d 100644
--- a/web/src/assets/index.css
+++ b/web/src/assets/index.css
@@ -18,6 +18,7 @@
   border: 1px solid var(--border) !important;
   border-radius: var(--radius) !important;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+  font-family: var(--font-main) !important;
 }
 
 @custom-variant dark (&:is(.dark *));
diff --git a/web/src/components/LineNumberTextarea.vue b/web/src/components/LineNumberTextarea.vue
new file mode 100644
index 0000000..e199737
--- /dev/null
+++ b/web/src/components/LineNumberTextarea.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { ref, watch, nextTick, onBeforeUnmount, onMounted } from 'vue'
+
+const props = withDefaults(defineProps<{
+  modelValue?: string
+  placeholder?: string
+  rows?: number
+  minHeightClass?: string
+  maxHeightClass?: string
+}>(), {
+  modelValue: '',
+  placeholder: '',
+  rows: 5,
+  minHeightClass: 'min-h-16',
+  maxHeightClass: 'max-h-40'
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const valueTextareaRef = ref<HTMLTextAreaElement | null>(null)
+const lineNumbersRef = ref<HTMLDivElement | null>(null)
+const lineMeasureRef = ref<HTMLDivElement | null>(null)
+const visualLineNumbers = ref<string[]>(['1'])
+let textareaResizeObserver: ResizeObserver | null = null
+
+function syncValueLineNumbers() {
+  if (!valueTextareaRef.value || !lineNumbersRef.value) return
+  lineNumbersRef.value.scrollTop = valueTextareaRef.value.scrollTop
+}
+
+async function updateVisualLineNumbers() {
+  await nextTick()
+
+  const textarea = valueTextareaRef.value
+  const measure = lineMeasureRef.value
+  if (!textarea || !measure) return
+
+  const style = window.getComputedStyle(textarea)
+  const lineHeight = Number.parseFloat(style.lineHeight) || Number.parseFloat(style.fontSize) * 1.5 || 24
+  const lines = String(props.modelValue ?? '').split('\n')
+
+  measure.style.width = `${textarea.clientWidth}px`
+  measure.innerHTML = ''
+
+  const nextLineNumbers: string[] = []
+  lines.forEach((line, index) => {
+    const lineEl = document.createElement('div')
+    lineEl.className = 'break-all whitespace-pre-wrap'
+    lineEl.textContent = line || ' '
+    measure.appendChild(lineEl)
+
+    const visualRows = Math.max(1, Math.round(lineEl.getBoundingClientRect().height / lineHeight))
+    nextLineNumbers.push(String(index + 1))
+    for (let i = 1; i < visualRows; i += 1) {
+      nextLineNumbers.push('\u00A0')
+    }
+  })
+
+  visualLineNumbers.value = nextLineNumbers.length > 0 ? nextLineNumbers : ['1']
+  syncValueLineNumbers()
+}
+
+watch(() => props.modelValue, () => {
+  void updateVisualLineNumbers()
+})
+
+onMounted(() => {
+  updateVisualLineNumbers()
+  if (valueTextareaRef.value) {
+    textareaResizeObserver = new ResizeObserver(() => {
+      void updateVisualLineNumbers()
+    })
+    textareaResizeObserver.observe(valueTextareaRef.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  textareaResizeObserver?.disconnect()
+})
+
+function onInput(e: Event) {
+  const target = e.target as HTMLTextAreaElement
+  emit('update:modelValue', target.value)
+}
+
+// 暴露更新方法，供父组件弹窗打开等时机手动触发重绘
+defineExpose({
+  updateVisualLineNumbers
+})
+</script>
+
+<template>
+  <div>
+    <div class="relative flex min-w-0 overflow-hidden rounded-md border border-input bg-transparent shadow-xs focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]">
+      <div ref="lineNumbersRef" :class="['flex w-6 shrink-0 flex-col overflow-hidden border-r border-border bg-muted/30 py-2 text-right font-mono text-[10px] leading-6 text-muted-foreground', maxHeightClass]">
+        <span v-for="(line, index) in visualLineNumbers" :key="`${index}-${line}`" class="block h-6 px-1">{{ line }}</span>
+      </div>
+      <textarea
+        ref="valueTextareaRef"
+        :value="modelValue"
+        @input="onInput"
+        :rows="rows"
+        :placeholder="placeholder"
+        :class="['w-full min-w-0 resize-none overflow-x-hidden bg-transparent pl-2 pr-3 py-2 text-sm leading-6 break-all whitespace-pre-wrap outline-none', minHeightClass, maxHeightClass]"
+        @scroll="syncValueLineNumbers"
+      />
+      <div aria-hidden="true" class="pointer-events-none absolute bottom-1.5 right-1.5 h-3.5 w-3.5 opacity-45">
+        <span class="absolute bottom-0 right-0 h-px w-3 rotate-[-45deg] bg-border" />
+        <span class="absolute bottom-1 right-0.5 h-px w-2 rotate-[-45deg] bg-border/80" />
+        <span class="absolute bottom-2 right-1 h-px w-1 rotate-[-45deg] bg-border/60" />
+      </div>
+    </div>
+    <div
+      ref="lineMeasureRef"
+      aria-hidden="true"
+      :class="['pointer-events-none invisible fixed left-0 top-0 -z-10 break-all whitespace-pre-wrap px-2 py-2 text-sm leading-6', minHeightClass]"
+    />
+  </div>
+</template>
diff --git a/web/src/views/environments/Environments.vue b/web/src/views/environments/Environments.vue
index a6904d5..f1f1761 100644
--- a/web/src/views/environments/Environments.vue
+++ b/web/src/views/environments/Environments.vue
@@ -1,23 +1,21 @@
 <script setup lang="ts">
-import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 import { Button } from '@/components/ui/button'
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
-import BaihuDialog from '@/components/ui/BaihuDialog.vue'
 import { Input } from '@/components/ui/input'
-import { Textarea } from '@/components/ui/textarea'
-import { Label } from '@/components/ui/label'
 import Pagination from '@/components/Pagination.vue'
 import { Plus, Pencil, Trash2, Eye, EyeOff, Search, AlertTriangle, Terminal, Zap, ZapOff, Shield } from 'lucide-vue-next'
 import TextOverflow from '@/components/TextOverflow.vue'
 import { api, type EnvVar } from '@/api'
 import { toast } from 'vue-sonner'
 import { useSiteSettings } from '@/composables/useSiteSettings'
-import { Switch } from '@/components/ui/switch'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { ENV_TYPE } from '@/constants'
 import { format } from 'date-fns'
 import { Badge } from '@/components/ui/badge'
 
+import EditEnvDialog from './components/EditEnvDialog.vue'
+import DeleteEnvDialog from './components/DeleteEnvDialog.vue'
+
 function formatDate(dateStr?: string) {
   if (!dateStr) return '-'
   try {
@@ -30,19 +28,7 @@ function formatDate(dateStr?: string) {
 const { pageSize } = useSiteSettings()
 
 const envVars = ref<EnvVar[]>([])
-const showDialog = ref(false)
-const editingEnv = ref<Partial<EnvVar>>({})
-const isEdit = ref(false)
 const showValues = ref<Record<string, boolean>>({})
-const showDeleteDialog = ref(false)
-const deleteEnvId = ref<string | null>(null)
-const associatedTasks = ref<any[]>([])
-const isDeleting = ref(false)
-const valueTextareaRef = ref<HTMLTextAreaElement | null>(null)
-const lineNumbersRef = ref<HTMLDivElement | null>(null)
-const lineMeasureRef = ref<HTMLDivElement | null>(null)
-const visualLineNumbers = ref<string[]>(['1'])
-let textareaResizeObserver: ResizeObserver | null = null
 
 const filterName = ref('')
 const currentPage = ref(1)
@@ -51,6 +37,9 @@ const activeTab = ref<string>(ENV_TYPE.NORMAL)
 const isSecretSet = ref(true)
 let searchTimer: ReturnType<typeof setTimeout> | null = null
 
+const editDialogRef = ref<InstanceType<typeof EditEnvDialog> | null>(null)
+const deleteDialogRef = ref<InstanceType<typeof DeleteEnvDialog> | null>(null)
+
 async function checkSecretStatus() {
   try {
     isSecretSet.value = await api.env.secretStatus()
@@ -74,10 +63,6 @@ async function loadEnvVars() {
   } catch { toast.error('加载环境变量失败') }
 }
 
-watch(showDialog, (val) => {
-  if (!val) loadEnvVars()
-})
-
 function handleSearch() {
   if (searchTimer) clearTimeout(searchTimer)
   searchTimer = setTimeout(() => {
@@ -100,132 +85,17 @@ function handlePageChange(page: number) {
 }
 
 function openCreate() {
-  editingEnv.value = { name: '', value: '', remark: '', type: activeTab.value, hidden: true, enabled: true }
-  isEdit.value = false
-  showDialog.value = true
-  void updateVisualLineNumbers()
+  editDialogRef.value?.openCreate(activeTab.value)
 }
 
 function openEdit(env: EnvVar) {
-  editingEnv.value = { ...env, value: env.type === 'secret' ? '' : env.value }
-  isEdit.value = true
-  showDialog.value = true
-  void updateVisualLineNumbers()
+  editDialogRef.value?.openEdit(env)
 }
 
-function syncValueLineNumbers() {
-  if (!valueTextareaRef.value || !lineNumbersRef.value) return
-  lineNumbersRef.value.scrollTop = valueTextareaRef.value.scrollTop
+function confirmDelete(id: string) {
+  deleteDialogRef.value?.confirmDelete(id, activeTab.value)
 }
 
-async function updateVisualLineNumbers() {
-  await nextTick()
-
-  const textarea = valueTextareaRef.value
-  const measure = lineMeasureRef.value
-  if (!textarea || !measure) return
-
-  const style = window.getComputedStyle(textarea)
-  const lineHeight = Number.parseFloat(style.lineHeight) || Number.parseFloat(style.fontSize) * 1.5 || 24
-  const lines = String(editingEnv.value?.value ?? '').split('\n')
-
-  measure.style.width = `${textarea.clientWidth}px`
-  measure.innerHTML = ''
-
-  const nextLineNumbers: string[] = []
-  lines.forEach((line, index) => {
-    const lineEl = document.createElement('div')
-    lineEl.className = 'break-all whitespace-pre-wrap'
-    lineEl.textContent = line || ' '
-    measure.appendChild(lineEl)
-
-    const visualRows = Math.max(1, Math.round(lineEl.getBoundingClientRect().height / lineHeight))
-    nextLineNumbers.push(String(index + 1))
-    for (let i = 1; i < visualRows; i += 1) {
-      nextLineNumbers.push('\u00A0')
-    }
-  })
-
-  visualLineNumbers.value = nextLineNumbers.length > 0 ? nextLineNumbers : ['1']
-  syncValueLineNumbers()
-}
-
-async function saveEnv() {
-  try {
-    if (isEdit.value && editingEnv.value.id) {
-      await api.env.update(editingEnv.value.id, editingEnv.value)
-      toast.success(editingEnv.value.type === ENV_TYPE.SECRET ? '机密已更新' : '变量已更新')
-    } else {
-      await api.env.create(editingEnv.value)
-      toast.success(editingEnv.value.type === ENV_TYPE.SECRET ? '机密已创建' : '变量已创建')
-    }
-    showDialog.value = false
-    loadEnvVars()
-  } catch { toast.error('保存失败') }
-}
-
-async function confirmDelete(id: string) {
-  deleteEnvId.value = id
-  try {
-    const res = await api.env.tasks(id)
-    associatedTasks.value = res || []
-    showDeleteDialog.value = true
-  } catch {
-    toast.error('检查机密引用失败')
-  }
-}
-
-async function deleteEnv(force = false) {
-  if (!deleteEnvId.value) return
-  isDeleting.value = true
-  try {
-    const res = await api.env.delete(deleteEnvId.value, force)
-    if (res.code === 409) {
-      associatedTasks.value = res.data || []
-      isDeleting.value = false
-      return
-    }
-    if (res.code !== 200) {
-      toast.error(res.msg || '删除失败')
-      isDeleting.value = false
-      return
-    }
-    toast.success(activeTab.value === ENV_TYPE.SECRET ? '机密已删除' : '变量已删除')
-    loadEnvVars()
-    showDeleteDialog.value = false
-  } catch {
-    toast.error('网络错误，删除失败')
-  } finally {
-    isDeleting.value = false
-  }
-}
-
-watch(showDeleteDialog, (val) => {
-  if (!val) {
-    associatedTasks.value = []
-    deleteEnvId.value = null
-  }
-})
-
-watch(() => editingEnv.value.value, () => {
-  void updateVisualLineNumbers()
-})
-
-watch(showDialog, async (val) => {
-  if (val) {
-    await updateVisualLineNumbers()
-    if (valueTextareaRef.value) {
-      textareaResizeObserver?.disconnect()
-      textareaResizeObserver = new ResizeObserver(() => {
-        void updateVisualLineNumbers()
-      })
-      textareaResizeObserver.observe(valueTextareaRef.value)
-    }
-  } else {
-    textareaResizeObserver?.disconnect()
-  }
-})
-
 function toggleShow(id: string) {
   showValues.value[id] = !showValues.value[id]
 }
@@ -255,10 +125,6 @@ onMounted(() => {
   }
   loadEnvVars()
 })
-
-onBeforeUnmount(() => {
-  textareaResizeObserver?.disconnect()
-})
 </script>
 
 <template>
@@ -483,114 +349,7 @@ onBeforeUnmount(() => {
       <Pagination :total="total" :page="currentPage" @update:page="handlePageChange" />
     </div>
 
-
-    <Dialog v-model:open="showDialog">
-      <DialogContent class="w-[calc(100vw-2rem)] max-w-md min-w-0">
-        <DialogHeader>
-          <DialogTitle>{{ isEdit ? (editingEnv.type === ENV_TYPE.SECRET ? '更新机密' : '编辑变量') : (editingEnv.type === ENV_TYPE.SECRET ? '新建机密' : '新建变量') }}</DialogTitle>
-          <div v-if="editingEnv.type === ENV_TYPE.SECRET" class="flex items-center gap-2.5 p-3 mt-3 rounded-xl bg-amber-500/5 border border-amber-500/10 text-amber-600 dark:text-amber-400 text-xs leading-relaxed">
-            <Shield class="h-4 w-4 shrink-0 text-amber-500" />
-            <p>机密会在保存后得到<b class="text-amber-700 dark:text-amber-300">强加密保护</b>，且<b class="text-amber-700 dark:text-amber-300">仅在计划任务定时执行时才会被注入环境</b>。终端命令、调试运行、测试运行均无法获取机密内容。在执行日志内，机密文本会被自动打码。</p>
-          </div>
-          <DialogDescription v-else class="sr-only">编辑变量的名称、值、备注以及启用和隐藏状态。</DialogDescription>
-        </DialogHeader>
-        <div class="space-y-4 py-2 min-w-0">
-          <div class="space-y-2 min-w-0">
-            <Label class="text-sm">{{ editingEnv.type === ENV_TYPE.SECRET ? '机密名称' : '变量名' }}</Label>
-            <Input v-model="editingEnv.name" class="h-9 w-full min-w-0 text-sm" :placeholder="editingEnv.type === ENV_TYPE.SECRET ? '例如：GITHUB_TOKEN' : 'MY_VAR'" />
-          </div>
-          <div class="space-y-2 min-w-0">
-            <Label>
-              {{ editingEnv.type === ENV_TYPE.SECRET ? '机密内容' : '变量值' }}
-              <span v-if="editingEnv.type === ENV_TYPE.SECRET && isEdit" class="text-muted-foreground ml-1 font-normal text-xs">(输入新值即可覆盖)</span>
-            </Label>
-            <div class="relative flex min-w-0 overflow-hidden rounded-md border border-input bg-transparent shadow-xs focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]">
-              <div ref="lineNumbersRef" class="flex max-h-40 w-6 shrink-0 flex-col overflow-hidden border-r border-border bg-muted/30 py-2 text-right font-mono text-[10px] leading-6 text-muted-foreground">
-                <span v-for="(line, index) in visualLineNumbers" :key="`${index}-${line}`" class="block h-6 px-1">{{ line }}</span>
-              </div>
-              <textarea
-                ref="valueTextareaRef"
-                v-model="editingEnv.value"
-                rows="5"
-                :placeholder="editingEnv.type === ENV_TYPE.SECRET && isEdit ? '' : (editingEnv.type === ENV_TYPE.SECRET ? '输入机密内容...' : '输入变量内容...')"
-                class="max-h-40 min-h-16 w-full min-w-0 resize-none overflow-x-hidden bg-transparent pl-2 pr-3 py-2 font-mono placeholder:font-sans text-sm leading-6 break-all whitespace-pre-wrap outline-none"
-                @scroll="syncValueLineNumbers"
-              />
-              <div aria-hidden="true" class="pointer-events-none absolute bottom-1.5 right-1.5 h-3.5 w-3.5 opacity-45">
-                <span class="absolute bottom-0 right-0 h-px w-3 rotate-[-45deg] bg-border" />
-                <span class="absolute bottom-1 right-0.5 h-px w-2 rotate-[-45deg] bg-border/80" />
-                <span class="absolute bottom-2 right-1 h-px w-1 rotate-[-45deg] bg-border/60" />
-              </div>
-            </div>
-            <div
-              ref="lineMeasureRef"
-              aria-hidden="true"
-              class="pointer-events-none invisible fixed left-0 top-0 -z-10 min-h-16 break-all whitespace-pre-wrap px-2 py-2 font-mono text-sm leading-6"
-            />
-          </div>
-          <div class="space-y-2 min-w-0">
-            <Label>备注</Label>
-            <Textarea v-model="editingEnv.remark" class="w-full min-w-0 resize-none break-all text-sm placeholder:font-sans" rows="3" :placeholder="editingEnv.type === ENV_TYPE.SECRET ? '机密用途说明...' : '变量用途说明...'" />
-          </div>
-          <div class="flex items-center justify-between space-x-2 pt-2" v-if="editingEnv.type !== ENV_TYPE.SECRET">
-            <Label class="text-sm font-medium">隐藏变量值</Label>
-            <Switch v-model="editingEnv.hidden" />
-          </div>
-          <div class="flex items-center justify-between space-x-2 pt-2">
-            <Label class="text-sm font-medium">{{ editingEnv.type === ENV_TYPE.SECRET ? '启用机密' : '启用变量' }}</Label>
-            <Switch v-model="editingEnv.enabled" />
-          </div>
-        </div>
-        <DialogFooter>
-          <Button variant="outline" @click="showDialog = false">取消</Button>
-          <Button @click="saveEnv">保存</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-
-    <BaihuDialog v-model:open="showDeleteDialog" :title="associatedTasks.length > 0 ? '风险删除确认' : '确认删除'">
-      <div v-if="associatedTasks.length > 0" class="space-y-4">
-        <div class="flex items-start gap-4 p-4 rounded-xl bg-destructive/5 border border-destructive/10">
-          <AlertTriangle class="h-5 w-5 text-destructive shrink-0" />
-          <div class="space-y-1">
-            <p class="text-sm font-bold text-destructive">{{ activeTab === ENV_TYPE.SECRET ? '机密' : '环境变量' }}正在使用中</p>
-            <p class="text-[13px] text-muted-foreground/80 leading-relaxed">
-              该{{ activeTab === ENV_TYPE.SECRET ? '机密' : '变量' }}已被以下任务引用，直接删除可能导致任务运行失败。建议先移除引用或选择“强制删除”。
-            </p>
-          </div>
-        </div>
-
-        <div class="space-y-2">
-          <p class="text-[11px] font-bold text-muted-foreground uppercase tracking-widest px-1">关联任务 ({{ associatedTasks.length }})</p>
-          <div class="bg-muted/30 rounded-xl p-2 max-h-48 overflow-y-auto space-y-1.5 border border-border/40">
-            <div v-for="task in associatedTasks" :key="task.id"
-              class="text-xs flex items-center justify-between bg-card p-2.5 rounded-lg border border-border/50 hover:border-primary/30 transition-all">
-              <div class="flex items-center gap-2.5 min-w-0">
-                <Terminal class="h-3.5 w-3.5 text-primary/70" />
-                <span class="font-medium truncate">{{ task.name }}</span>
-              </div>
-              <code class="text-[10px] text-muted-foreground/70 font-mono bg-muted/50 px-1.5 py-0.5 rounded">{{ task.id }}</code>
-            </div>
-          </div>
-        </div>
-
-        <div class="p-4 rounded-xl bg-muted/20 border border-border/10">
-          <p class="text-xs text-muted-foreground leading-relaxed italic">
-            提示：选择强制删除将自动解除以上任务对该{{ activeTab === 'secret' ? '机密' : '变量' }}的绑定并执行物理删除。
-          </p>
-        </div>
-      </div>
-      <p v-else class="text-[15px] leading-relaxed text-muted-foreground">确定要删除此{{ activeTab === ENV_TYPE.SECRET ? '机密' : '环境变量' }}吗？此操作无法撤销，请谨慎操作。</p>
-
-      <template #footer>
-        <Button variant="ghost" :disabled="isDeleting" @click="showDeleteDialog = false">取消</Button>
-        <Button v-if="associatedTasks.length > 0" variant="destructive" class="shadow-lg shadow-destructive/20" @click="deleteEnv(true)" :disabled="isDeleting">
-          {{ isDeleting ? '删除中...' : '确认强制删除' }}
-        </Button>
-        <Button v-else variant="destructive" class="shadow-lg shadow-destructive/20" @click="deleteEnv(false)" :disabled="isDeleting">
-          {{ isDeleting ? '删除中...' : '确认删除' }}
-        </Button>
-      </template>
-    </BaihuDialog>
+    <EditEnvDialog ref="editDialogRef" @saved="loadEnvVars" />
+    <DeleteEnvDialog ref="deleteDialogRef" @deleted="loadEnvVars" />
   </Tabs>
 </template>
diff --git a/web/src/views/environments/components/DeleteEnvDialog.vue b/web/src/views/environments/components/DeleteEnvDialog.vue
new file mode 100644
index 0000000..fa0b60b
--- /dev/null
+++ b/web/src/views/environments/components/DeleteEnvDialog.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Button } from '@/components/ui/button'
+import BaihuDialog from '@/components/ui/BaihuDialog.vue'
+import { AlertTriangle, Terminal } from 'lucide-vue-next'
+import { api } from '@/api'
+import { toast } from 'vue-sonner'
+import { ENV_TYPE } from '@/constants'
+
+const emit = defineEmits<{
+  (e: 'deleted'): void
+}>()
+
+const isOpen = ref(false)
+const isDeleting = ref(false)
+const deleteEnvId = ref<string | null>(null)
+const envType = ref<string>(ENV_TYPE.NORMAL)
+const associatedTasks = ref<any[]>([])
+
+async function confirmDelete(id: string, type: string) {
+  deleteEnvId.value = id
+  envType.value = type
+  try {
+    const res = await api.env.tasks(id)
+    associatedTasks.value = res || []
+    isOpen.value = true
+  } catch {
+    toast.error('检查机密引用失败')
+  }
+}
+
+async function deleteEnv(force = false) {
+  if (!deleteEnvId.value) return
+  isDeleting.value = true
+  try {
+    const res = await api.env.delete(deleteEnvId.value, force)
+    if (res.code === 409) {
+      associatedTasks.value = res.data || []
+      isDeleting.value = false
+      return
+    }
+    if (res.code !== 200) {
+      toast.error(res.msg || '删除失败')
+      isDeleting.value = false
+      return
+    }
+    toast.success(envType.value === ENV_TYPE.SECRET ? '机密已删除' : '变量已删除')
+    isOpen.value = false
+    emit('deleted')
+  } catch {
+    toast.error('网络错误，删除失败')
+  } finally {
+    isDeleting.value = false
+  }
+}
+
+watch(isOpen, (val) => {
+  if (!val) {
+    associatedTasks.value = []
+    deleteEnvId.value = null
+  }
+})
+
+defineExpose({
+  confirmDelete
+})
+</script>
+
+<template>
+  <BaihuDialog v-model:open="isOpen" :title="associatedTasks.length > 0 ? '风险删除确认' : '确认删除'">
+    <div v-if="associatedTasks.length > 0" class="space-y-4">
+      <div class="flex items-start gap-4 p-4 rounded-xl bg-destructive/5 border border-destructive/10">
+        <AlertTriangle class="h-5 w-5 text-destructive shrink-0" />
+        <div class="space-y-1">
+          <p class="text-sm font-bold text-destructive">{{ envType === ENV_TYPE.SECRET ? '机密' : '环境变量' }}正在使用中</p>
+          <p class="text-[13px] text-muted-foreground/80 leading-relaxed">
+            该{{ envType === ENV_TYPE.SECRET ? '机密' : '变量' }}已被以下任务引用，直接删除可能导致任务运行失败。建议先移除引用或选择“强制删除”。
+          </p>
+        </div>
+      </div>
+
+      <div class="space-y-2">
+        <p class="text-[11px] font-bold text-muted-foreground uppercase tracking-widest px-1">关联任务 ({{ associatedTasks.length }})</p>
+        <div class="bg-muted/30 rounded-xl p-2 max-h-48 overflow-y-auto space-y-1.5 border border-border/40">
+          <div v-for="task in associatedTasks" :key="task.id"
+            class="text-xs flex items-center justify-between bg-card p-2.5 rounded-lg border border-border/50 hover:border-primary/30 transition-all">
+            <div class="flex items-center gap-2.5 min-w-0">
+              <Terminal class="h-3.5 w-3.5 text-primary/70" />
+              <span class="font-medium truncate">{{ task.name }}</span>
+            </div>
+            <code class="text-[10px] text-muted-foreground/70 font-mono bg-muted/50 px-1.5 py-0.5 rounded">{{ task.id }}</code>
+          </div>
+        </div>
+      </div>
+
+      <div class="p-4 rounded-xl bg-muted/20 border border-border/10">
+        <p class="text-xs text-muted-foreground leading-relaxed italic">
+          提示：选择强制删除将自动解除以上任务对该{{ envType === 'secret' ? '机密' : '变量' }}的绑定并执行物理删除。
+        </p>
+      </div>
+    </div>
+    <p v-else class="text-[15px] leading-relaxed text-muted-foreground">确定要删除此{{ envType === ENV_TYPE.SECRET ? '机密' : '环境变量' }}吗？此操作无法撤销，请谨慎操作。</p>
+
+    <template #footer>
+      <Button variant="ghost" :disabled="isDeleting" @click="isOpen = false">取消</Button>
+      <Button v-if="associatedTasks.length > 0" variant="destructive" class="shadow-lg shadow-destructive/20" @click="deleteEnv(true)" :disabled="isDeleting">
+        {{ isDeleting ? '删除中...' : '确认强制删除' }}
+      </Button>
+      <Button v-else variant="destructive" class="shadow-lg shadow-destructive/20" @click="deleteEnv(false)" :disabled="isDeleting">
+        {{ isDeleting ? '删除中...' : '确认删除' }}
+      </Button>
+    </template>
+  </BaihuDialog>
+</template>
diff --git a/web/src/views/environments/components/EditEnvDialog.vue b/web/src/views/environments/components/EditEnvDialog.vue
new file mode 100644
index 0000000..feb8dcf
--- /dev/null
+++ b/web/src/views/environments/components/EditEnvDialog.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { Label } from '@/components/ui/label'
+import { Switch } from '@/components/ui/switch'
+import { Shield } from 'lucide-vue-next'
+import { api, type EnvVar } from '@/api'
+import { toast } from 'vue-sonner'
+import { ENV_TYPE } from '@/constants'
+import LineNumberTextarea from '@/components/LineNumberTextarea.vue'
+
+const emit = defineEmits<{
+  (e: 'saved'): void
+}>()
+
+const isOpen = ref(false)
+const isEdit = ref(false)
+const editingEnv = ref<Partial<EnvVar>>({})
+
+const textareaRef = ref<InstanceType<typeof LineNumberTextarea> | null>(null)
+
+function openCreate(type: string) {
+  editingEnv.value = { name: '', value: '', remark: '', type, hidden: true, enabled: true }
+  isEdit.value = false
+  isOpen.value = true
+}
+
+function openEdit(env: EnvVar) {
+  editingEnv.value = { ...env, value: env.type === 'secret' ? '' : env.value }
+  isEdit.value = true
+  isOpen.value = true
+}
+
+watch(isOpen, (val) => {
+  if (val) {
+    // 延迟等待 DOM 渲染后更新行号
+    setTimeout(() => {
+      textareaRef.value?.updateVisualLineNumbers()
+    }, 50)
+  }
+})
+
+async function saveEnv() {
+  try {
+    if (isEdit.value && editingEnv.value.id) {
+      await api.env.update(editingEnv.value.id, editingEnv.value)
+      toast.success(editingEnv.value.type === ENV_TYPE.SECRET ? '机密已更新' : '变量已更新')
+    } else {
+      await api.env.create(editingEnv.value)
+      toast.success(editingEnv.value.type === ENV_TYPE.SECRET ? '机密已创建' : '变量已创建')
+    }
+    isOpen.value = false
+    emit('saved')
+  } catch { toast.error('保存失败') }
+}
+
+defineExpose({
+  openCreate,
+  openEdit
+})
+</script>
+
+<template>
+  <Dialog v-model:open="isOpen">
+    <DialogContent class="w-[calc(100vw-2rem)] max-w-md min-w-0">
+      <DialogHeader>
+        <DialogTitle>{{ isEdit ? (editingEnv.type === ENV_TYPE.SECRET ? '更新机密' : '编辑变量') : (editingEnv.type === ENV_TYPE.SECRET ? '新建机密' : '新建变量') }}</DialogTitle>
+        <div v-if="editingEnv.type === ENV_TYPE.SECRET" class="flex items-center gap-2.5 p-3 mt-3 rounded-xl bg-amber-500/5 border border-amber-500/10 text-amber-600 dark:text-amber-400 text-xs leading-relaxed">
+          <Shield class="h-4 w-4 shrink-0 text-amber-500" />
+          <p>机密会在保存后得到<b class="text-amber-700 dark:text-amber-300">强加密保护</b>，且<b class="text-amber-700 dark:text-amber-300">仅在计划任务定时执行时才会被注入环境</b>。终端命令、调试运行、测试运行均无法获取机密内容。在执行日志内，机密文本会被自动打码。</p>
+        </div>
+        <DialogDescription v-else class="sr-only">编辑变量的名称、值、备注以及启用和隐藏状态。</DialogDescription>
+      </DialogHeader>
+      <div class="space-y-4 py-2 min-w-0">
+        <div class="space-y-2 min-w-0">
+          <Label class="text-sm">{{ editingEnv.type === ENV_TYPE.SECRET ? '机密名称' : '变量名' }}</Label>
+          <Input v-model="editingEnv.name" class="h-9 w-full min-w-0 text-sm" :placeholder="editingEnv.type === ENV_TYPE.SECRET ? '例如：GITHUB_TOKEN' : 'MY_VAR'" />
+        </div>
+        <div class="space-y-2 min-w-0">
+          <Label>
+            {{ editingEnv.type === ENV_TYPE.SECRET ? '机密内容' : '变量值' }}
+            <span v-if="editingEnv.type === ENV_TYPE.SECRET && isEdit" class="text-muted-foreground ml-1 font-normal text-xs">(输入新值即可覆盖)</span>
+          </Label>
+          
+          <LineNumberTextarea 
+            ref="textareaRef"
+            v-model="editingEnv.value"
+            :placeholder="editingEnv.type === ENV_TYPE.SECRET && isEdit ? '' : (editingEnv.type === ENV_TYPE.SECRET ? '输入机密内容...' : '输入变量内容...')"
+            :rows="5"
+            minHeightClass="min-h-16"
+            maxHeightClass="max-h-40"
+          />
+
+        </div>
+        <div class="space-y-2 min-w-0">
+          <Label>备注</Label>
+          <Textarea v-model="editingEnv.remark" class="w-full min-w-0 resize-none break-all text-sm" rows="3" :placeholder="editingEnv.type === ENV_TYPE.SECRET ? '机密用途说明...' : '变量用途说明...'" />
+        </div>
+        <div class="flex items-center justify-between space-x-2 pt-2" v-if="editingEnv.type !== ENV_TYPE.SECRET">
+          <Label class="text-sm font-medium">隐藏变量值</Label>
+          <Switch v-model="editingEnv.hidden" />
+        </div>
+        <div class="flex items-center justify-between space-x-2 pt-2">
+          <Label class="text-sm font-medium">{{ editingEnv.type === ENV_TYPE.SECRET ? '启用机密' : '启用变量' }}</Label>
+          <Switch v-model="editingEnv.enabled" />
+        </div>
+      </div>
+      <DialogFooter>
+        <Button variant="outline" @click="isOpen = false">取消</Button>
+        <Button @click="saveEnv">保存</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>