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
This commit is contained in:
duorameng
@@ -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 *));
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user