feat: complete mise env base code
This commit is contained in:
engigu
@@ -1,23 +1,29 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { ref, onMounted, computed, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from '@/components/ui/dialog'
|
||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { Trash2, Package, Search, RefreshCw, Loader2, Download, FileText, RotateCw, AlertTriangle } from 'lucide-vue-next'
|
||||
import { Trash2, Package, Search, RefreshCw, Loader2, Download, FileText, RotateCw, ChevronLeft, Terminal as TerminalIcon, X } from 'lucide-vue-next'
|
||||
import { api, type Dependency } from '@/api'
|
||||
import TextOverflow from '@/components/TextOverflow.vue'
|
||||
import XTerminal from '@/components/XTerminal.vue'
|
||||
import { toast } from 'vue-sonner'
|
||||
|
||||
const activeTab = ref('py')
|
||||
const route = useRoute()
|
||||
const language = computed(() => route.query.language as string || '')
|
||||
const langVersion = computed(() => route.query.version as string || '')
|
||||
|
||||
const activeTab = ref('python')
|
||||
const deps = ref<Dependency[]>([])
|
||||
const loading = ref(false)
|
||||
const installing = ref(false)
|
||||
const reinstalling = ref<number | null>(null)
|
||||
const reinstallingAll = ref(false)
|
||||
const installedLangs = ref<string[]>([])
|
||||
|
||||
// 安装对话框
|
||||
const showInstallDialog = ref(false)
|
||||
@@ -34,11 +40,18 @@ const showLogDialog = ref(false)
|
||||
const logContent = ref('')
|
||||
const logPkgName = ref('')
|
||||
|
||||
// 终端状态
|
||||
const showTerminalDialog = ref(false)
|
||||
const terminalCommand = ref('')
|
||||
const terminalTitle = ref('依赖安装')
|
||||
const isInstallSuccess = ref(false)
|
||||
const pendingInstall = ref<{ name: string; version?: string; language: string; lang_version?: string; remark?: string } | null>(null)
|
||||
|
||||
// 搜索
|
||||
const searchQuery = ref('')
|
||||
|
||||
const filteredDeps = computed(() => {
|
||||
const list = deps.value.filter(d => d.type === activeTab.value)
|
||||
const list = deps.value.filter(d => d.language === activeTab.value)
|
||||
if (!searchQuery.value) return list
|
||||
const q = searchQuery.value.toLowerCase()
|
||||
return list.filter(d => d.name.toLowerCase().includes(q))
|
||||
@@ -47,7 +60,10 @@ const filteredDeps = computed(() => {
|
||||
async function loadDeps() {
|
||||
loading.value = true
|
||||
try {
|
||||
deps.value = await api.deps.list()
|
||||
deps.value = await api.deps.list({
|
||||
language: language.value || activeTab.value,
|
||||
lang_version: langVersion.value
|
||||
})
|
||||
} catch {
|
||||
toast.error('加载依赖列表失败')
|
||||
} finally {
|
||||
@@ -55,6 +71,23 @@ async function loadDeps() {
|
||||
}
|
||||
}
|
||||
|
||||
async function loadInstalledLangs() {
|
||||
try {
|
||||
const langs = await api.mise.list()
|
||||
// 获取去重后的插件名，按字母排序
|
||||
installedLangs.value = [...new Set(langs.map(l => l.plugin))].sort()
|
||||
|
||||
// 如果当前 activeTab 不在已安装列表中，且不是 system，则默认选中第一个
|
||||
if (activeTab.value !== 'system' && !installedLangs.value.includes(activeTab.value)) {
|
||||
if (installedLangs.value.length > 0) {
|
||||
activeTab.value = installedLangs.value[0]!
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
toast.error('获取已安装环境失败')
|
||||
}
|
||||
}
|
||||
|
||||
function openInstallDialog() {
|
||||
newPkgName.value = ''
|
||||
newPkgVersion.value = ''
|
||||
@@ -67,24 +100,51 @@ async function installPackage() {
|
||||
toast.error('请输入包名')
|
||||
return
|
||||
}
|
||||
|
||||
const pkgData = {
|
||||
name: newPkgName.value.trim(),
|
||||
version: newPkgVersion.value.trim() || undefined,
|
||||
remark: newPkgRemark.value.trim() || undefined,
|
||||
language: language.value || activeTab.value,
|
||||
lang_version: langVersion.value || undefined
|
||||
}
|
||||
|
||||
installing.value = true
|
||||
isInstallSuccess.value = false // 重置状态
|
||||
try {
|
||||
await api.deps.install({
|
||||
name: newPkgName.value.trim(),
|
||||
version: newPkgVersion.value.trim() || undefined,
|
||||
type: activeTab.value,
|
||||
remark: newPkgRemark.value.trim() || undefined
|
||||
})
|
||||
toast.success('安装成功')
|
||||
const { command } = await api.deps.getInstallCmd(pkgData)
|
||||
terminalCommand.value = command
|
||||
terminalTitle.value = `安装: ${pkgData.name}`
|
||||
pendingInstall.value = pkgData
|
||||
showInstallDialog.value = false
|
||||
await loadDeps()
|
||||
showTerminalDialog.value = true
|
||||
} catch (e: unknown) {
|
||||
toast.error((e as Error).message || '安装失败')
|
||||
toast.error((e as Error).message || '获取安装命令失败')
|
||||
} finally {
|
||||
installing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleTerminalClose() {
|
||||
if (pendingInstall.value && isInstallSuccess.value) {
|
||||
try {
|
||||
// 终端关闭后，仅在成功时尝试在数据库中记录
|
||||
await api.deps.create(pendingInstall.value)
|
||||
toast.success('依赖记录已更新')
|
||||
} catch (e: any) {
|
||||
if (e.message !== '依赖已存在') {
|
||||
toast.error('记录依赖失败: ' + e.message)
|
||||
}
|
||||
}
|
||||
} else if (pendingInstall.value && !isInstallSuccess.value) {
|
||||
toast.error('安装未成功，记录未保存')
|
||||
}
|
||||
|
||||
pendingInstall.value = null
|
||||
isInstallSuccess.value = false
|
||||
loadDeps()
|
||||
}
|
||||
|
||||
function confirmDelete(dep: Dependency) {
|
||||
depToDelete.value = dep
|
||||
showDeleteDialog.value = true
|
||||
@@ -113,11 +173,18 @@ function showLog(dep: Dependency) {
|
||||
async function reinstallPackage(dep: Dependency) {
|
||||
reinstalling.value = dep.id
|
||||
try {
|
||||
await api.deps.reinstall(dep.id)
|
||||
toast.success(`${dep.name} 重新安装成功`)
|
||||
await loadDeps()
|
||||
const { command } = await api.deps.getInstallCmd({
|
||||
name: dep.name,
|
||||
version: dep.version,
|
||||
language: dep.language,
|
||||
lang_version: dep.lang_version
|
||||
})
|
||||
terminalCommand.value = command
|
||||
terminalTitle.value = `重装: ${dep.name}`
|
||||
pendingInstall.value = null // 重新安装不需要再次记录
|
||||
showTerminalDialog.value = true
|
||||
} catch (e: unknown) {
|
||||
toast.error((e as Error).message || '重新安装失败')
|
||||
toast.error((e as Error).message || '获取命令失败')
|
||||
} finally {
|
||||
reinstalling.value = null
|
||||
}
|
||||
@@ -126,200 +193,240 @@ async function reinstallPackage(dep: Dependency) {
|
||||
async function reinstallAll() {
|
||||
reinstallingAll.value = true
|
||||
try {
|
||||
await api.deps.reinstallAll(activeTab.value)
|
||||
toast.success('全部重新安装成功')
|
||||
await loadDeps()
|
||||
const lang = language.value || activeTab.value
|
||||
const ver = langVersion.value
|
||||
const { command } = await api.deps.getReinstallAllCmd(lang, ver)
|
||||
|
||||
terminalCommand.value = command
|
||||
terminalTitle.value = `全部重装: ${getTypeLabel(lang)}`
|
||||
pendingInstall.value = null // 全部重装不需要记录新条目
|
||||
showTerminalDialog.value = true
|
||||
} catch (e: unknown) {
|
||||
toast.error((e as Error).message || '重新安装失败')
|
||||
toast.error((e as Error).message || '获取命令失败')
|
||||
} finally {
|
||||
reinstallingAll.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function getTypeLabel(type: string) {
|
||||
return type === 'py' ? 'Python' : 'Node.js'
|
||||
const labels: Record<string, string> = {
|
||||
python: 'Python',
|
||||
node: 'Node.js',
|
||||
ruby: 'Ruby',
|
||||
go: 'Go',
|
||||
rust: 'Rust',
|
||||
bun: 'Bun',
|
||||
php: 'PHP',
|
||||
deno: 'Deno',
|
||||
dotnet: '.NET',
|
||||
elixir: 'Elixir',
|
||||
erlang: 'Erlang',
|
||||
lua: 'Lua',
|
||||
nim: 'Nim',
|
||||
dart: 'Dart',
|
||||
flutter: 'Flutter',
|
||||
perl: 'Perl',
|
||||
crystal: 'Crystal'
|
||||
}
|
||||
return labels[type] || type.charAt(0).toUpperCase() + type.slice(1)
|
||||
}
|
||||
|
||||
onMounted(loadDeps)
|
||||
watch(activeTab, loadDeps)
|
||||
|
||||
// 如果 URL 中带了环境参数，自动切 Tab
|
||||
onMounted(async () => {
|
||||
await loadInstalledLangs()
|
||||
if (language.value) activeTab.value = language.value
|
||||
loadDeps()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h2 class="text-xl sm:text-2xl font-bold tracking-tight">依赖管理</h2>
|
||||
<p class="text-muted-foreground text-sm">管理 Python 和 Node.js 依赖包</p>
|
||||
<div class="flex items-center gap-3">
|
||||
<Button v-if="language" variant="ghost" size="icon" @click="$router.back()" class="h-8 w-8">
|
||||
<ChevronLeft class="h-5 w-5" />
|
||||
</Button>
|
||||
<div>
|
||||
<h2 class="text-xl sm:text-2xl font-bold tracking-tight">依赖管理</h2>
|
||||
<p class="text-muted-foreground text-sm">管理 Python 和 Node.js 依赖包</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tabs v-model="activeTab">
|
||||
<TabsList>
|
||||
<TabsTrigger value="py">Python</TabsTrigger>
|
||||
<TabsTrigger value="node">Node.js</TabsTrigger>
|
||||
<TabsTrigger value="system">System</TabsTrigger>
|
||||
</TabsList>
|
||||
<!-- 当前环境信息 -->
|
||||
<div v-if="language && langVersion"
|
||||
class="bg-primary/10 border border-primary/20 rounded-lg p-3 flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<Package class="h-4 w-4 text-primary" />
|
||||
<span class="text-sm">正在管理环境: <span class="font-bold font-mono">{{ language }}@{{ langVersion }}</span></span>
|
||||
</div>
|
||||
<Badge variant="outline" class="font-mono text-xs">Scoped Environment</Badge>
|
||||
</div>
|
||||
|
||||
<!-- 系统依赖提示 -->
|
||||
<TabsContent value="system" class="mt-4">
|
||||
<div class="rounded-lg border bg-card p-4 sm:p-6">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<AlertTriangle class="h-5 w-5 text-amber-500 shrink-0" />
|
||||
<h3 class="font-medium">系统依赖 (System Dependencies)</h3>
|
||||
<div class="mt-4">
|
||||
<div class="rounded-lg border bg-card overflow-x-auto">
|
||||
<!-- 工具栏 -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 px-4 py-3 border-b bg-muted/30">
|
||||
<div class="flex items-center gap-2">
|
||||
<Badge variant="secondary">{{ filteredDeps.length }} 个包</Badge>
|
||||
</div>
|
||||
<div class="space-y-3 text-sm text-muted-foreground">
|
||||
<p>
|
||||
系统依赖需要通过终端使用包管理器安装。
|
||||
</p>
|
||||
<ul class="list-disc list-inside space-y-1 ml-1">
|
||||
<li>Debian/Ubuntu: 使用 <code class="bg-muted px-1.5 py-0.5 rounded text-xs">apt-get install</code></li>
|
||||
<li>Alpine: 使用 <code class="bg-muted px-1.5 py-0.5 rounded text-xs">apk add</code></li>
|
||||
</ul>
|
||||
<p>
|
||||
注意：Docker 容器重新创建后，手动安装的系统依赖会丢失。如需持久化，请在 Dockerfile 中添加依赖或使用自定义镜像。
|
||||
</p>
|
||||
<div class="bg-muted px-3 py-2 rounded text-xs font-mono">
|
||||
<div class="text-muted-foreground"># Debian / Ubuntu</div>
|
||||
<div class="mb-3">apt-get update && apt-get install -y <package-name></div>
|
||||
<div class="text-muted-foreground"># Alpine</div>
|
||||
<div>apk add <package-name></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="relative flex-1 sm:flex-none">
|
||||
<Search class="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input v-model="searchQuery" placeholder="搜索包名..." class="h-9 pl-8 w-full sm:w-48 text-sm" />
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent :value="activeTab" v-if="activeTab !== 'system'" class="mt-4">
|
||||
<div class="rounded-lg border bg-card overflow-x-auto">
|
||||
<!-- 工具栏 -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 px-4 py-3 border-b bg-muted/30">
|
||||
<div class="flex items-center gap-2">
|
||||
<Badge variant="secondary">{{ filteredDeps.length }} 个包</Badge>
|
||||
<!-- 表头 -->
|
||||
<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>
|
||||
<span class="w-24 text-center">操作</span>
|
||||
</div>
|
||||
|
||||
<!-- 列表 -->
|
||||
<div class="divide-y max-h-[480px] overflow-y-auto min-w-[400px]">
|
||||
<div v-if="loading" class="text-center py-8 text-muted-foreground">
|
||||
<Loader2 class="h-5 w-5 animate-spin mx-auto mb-2" />
|
||||
加载中...
|
||||
</div>
|
||||
<div v-else-if="filteredDeps.length === 0" class="text-center py-8 text-muted-foreground">
|
||||
<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">
|
||||
<span class="flex-1 font-mono text-sm truncate">
|
||||
<TextOverflow :text="dep.name" title="包名" />
|
||||
</span>
|
||||
<span class="w-32 text-sm text-muted-foreground">{{ dep.version || '-' }}</span>
|
||||
<span class="w-48 text-sm text-muted-foreground truncate hidden md:block">
|
||||
<TextOverflow :text="dep.remark || '-'" title="备注" />
|
||||
</span>
|
||||
<span class="w-24 flex justify-center gap-1">
|
||||
<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">
|
||||
<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)">
|
||||
<Trash2 class="h-4 w-4" />
|
||||
</Button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 安装对话框 -->
|
||||
<Dialog v-model:open="showInstallDialog">
|
||||
<DialogContent class="sm:max-w-[400px]" @openAutoFocus.prevent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>安装 {{ getTypeLabel(activeTab) }} 包</DialogTitle>
|
||||
<DialogDescription class="sr-only">输入包名和版本号进行安装</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div class="grid gap-4 py-4">
|
||||
<div class="grid grid-cols-4 items-center gap-4">
|
||||
<Label class="text-right">包名</Label>
|
||||
<Input v-model="newPkgName"
|
||||
:placeholder="activeTab === 'python' ? 'requests' : (activeTab === 'node' ? 'lodash' : 'package-name')"
|
||||
class="col-span-3" />
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="relative flex-1 sm:flex-none">
|
||||
<Search class="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input v-model="searchQuery" placeholder="搜索包名..." class="h-9 pl-8 w-full sm:w-48 text-sm" />
|
||||
<div class="grid grid-cols-4 items-center gap-4">
|
||||
<Label class="text-right">版本</Label>
|
||||
<Input v-model="newPkgVersion" placeholder="可选，如 1.0.0" class="col-span-3" />
|
||||
</div>
|
||||
<div class="grid grid-cols-4 items-center gap-4">
|
||||
<Label class="text-right">备注</Label>
|
||||
<Input v-model="newPkgRemark" placeholder="可选" class="col-span-3" />
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" @click="showInstallDialog = false">取消</Button>
|
||||
<Button @click="installPackage" :disabled="installing">
|
||||
<Loader2 v-if="installing" class="h-4 w-4 mr-2 animate-spin" />
|
||||
安装
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<!-- 卸载确认 -->
|
||||
<AlertDialog v-model:open="showDeleteDialog">
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>确认卸载</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
确定要卸载 "{{ depToDelete?.name }}" 吗？
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||||
<AlertDialogAction class="bg-destructive text-white hover:bg-destructive/90" @click="uninstallPackage">
|
||||
卸载
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
<!-- 日志对话框 -->
|
||||
<Dialog v-model:open="showLogDialog">
|
||||
<DialogContent class="sm:max-w-[600px]" @openAutoFocus.prevent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>安装日志 - {{ logPkgName }}</DialogTitle>
|
||||
<DialogDescription class="sr-only">查看依赖包的详细安装输出日志</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div class="max-h-[400px] overflow-y-auto">
|
||||
<pre class="text-xs bg-muted p-3 rounded-lg whitespace-pre-wrap break-all font-mono">{{ logContent }}</pre>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" @click="showLogDialog = false">关闭</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<!-- 终端对话框 -->
|
||||
<Dialog v-model:open="showTerminalDialog" @update:open="(val) => !val && handleTerminalClose()">
|
||||
<DialogContent class="max-w-4xl h-[600px] p-0 overflow-hidden bg-[#1e1e1e] border-none shadow-2xl">
|
||||
<DialogHeader class="sr-only">
|
||||
<DialogTitle>{{ terminalTitle }}</DialogTitle>
|
||||
<DialogDescription>正在执行依赖安装指令</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div class="flex flex-col h-full">
|
||||
<div class="flex items-center justify-between px-4 py-2 bg-[#252526] border-b border-[#3c3c3c]">
|
||||
<div class="flex items-center gap-2">
|
||||
<TerminalIcon class="h-4 w-4 text-primary" />
|
||||
<span class="text-xs font-medium text-gray-300">正在执行: {{ terminalCommand }}</span>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
<Button variant="ghost" size="icon" class="h-6 w-6 text-gray-400 hover:text-white"
|
||||
@click="showTerminalDialog = false">
|
||||
<X class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</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]">
|
||||
<span class="flex-1">包名</span>
|
||||
<span class="w-32">版本</span>
|
||||
<span class="w-48 hidden md:block">备注</span>
|
||||
<span class="w-24 text-center">操作</span>
|
||||
</div>
|
||||
|
||||
<!-- 列表 -->
|
||||
<div class="divide-y max-h-[480px] overflow-y-auto min-w-[400px]">
|
||||
<div v-if="loading" class="text-center py-8 text-muted-foreground">
|
||||
<Loader2 class="h-5 w-5 animate-spin mx-auto mb-2" />
|
||||
加载中...
|
||||
</div>
|
||||
<div v-else-if="filteredDeps.length === 0" class="text-center py-8 text-muted-foreground">
|
||||
<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">
|
||||
<span class="flex-1 font-mono text-sm truncate">
|
||||
<TextOverflow :text="dep.name" title="包名" />
|
||||
</span>
|
||||
<span class="w-32 text-sm text-muted-foreground">{{ dep.version || '-' }}</span>
|
||||
<span class="w-48 text-sm text-muted-foreground truncate hidden md:block">
|
||||
<TextOverflow :text="dep.remark || '-'" title="备注" />
|
||||
</span>
|
||||
<span class="w-24 flex justify-center gap-1">
|
||||
<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">
|
||||
<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)">
|
||||
<Trash2 class="h-4 w-4" />
|
||||
</Button>
|
||||
</span>
|
||||
<div class="flex-1">
|
||||
<XTerminal v-if="showTerminalDialog" :font-size="13" :initial-command="terminalCommand"
|
||||
@success="isInstallSuccess = true" @failed="isInstallSuccess = false" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<!-- 安装对话框 -->
|
||||
<Dialog v-model:open="showInstallDialog">
|
||||
<DialogContent class="sm:max-w-[400px]" @openAutoFocus.prevent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>安装 {{ getTypeLabel(activeTab) }} 包</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div class="grid gap-4 py-4">
|
||||
<div class="grid grid-cols-4 items-center gap-4">
|
||||
<Label class="text-right">包名</Label>
|
||||
<Input v-model="newPkgName" :placeholder="activeTab === 'py' ? 'requests' : 'lodash'" class="col-span-3" />
|
||||
</div>
|
||||
<div class="grid grid-cols-4 items-center gap-4">
|
||||
<Label class="text-right">版本</Label>
|
||||
<Input v-model="newPkgVersion" placeholder="可选，如 1.0.0" class="col-span-3" />
|
||||
</div>
|
||||
<div class="grid grid-cols-4 items-center gap-4">
|
||||
<Label class="text-right">备注</Label>
|
||||
<Input v-model="newPkgRemark" placeholder="可选" class="col-span-3" />
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" @click="showInstallDialog = false">取消</Button>
|
||||
<Button @click="installPackage" :disabled="installing">
|
||||
<Loader2 v-if="installing" class="h-4 w-4 mr-2 animate-spin" />
|
||||
安装
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<!-- 卸载确认 -->
|
||||
<AlertDialog v-model:open="showDeleteDialog">
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>确认卸载</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
确定要卸载 "{{ depToDelete?.name }}" 吗？
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||||
<AlertDialogAction class="bg-destructive text-white hover:bg-destructive/90" @click="uninstallPackage">
|
||||
卸载
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
<!-- 日志对话框 -->
|
||||
<Dialog v-model:open="showLogDialog">
|
||||
<DialogContent class="sm:max-w-[600px]" @openAutoFocus.prevent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>安装日志 - {{ logPkgName }}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div class="max-h-[400px] overflow-y-auto">
|
||||
<pre class="text-xs bg-muted p-3 rounded-lg whitespace-pre-wrap break-all font-mono">{{ logContent }}</pre>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" @click="showLogDialog = false">关闭</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,484 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed, watch } from 'vue'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog'
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import {
|
||||
Plus, Globe, Search, RefreshCw, Loader2, Trash2,
|
||||
Terminal as TerminalIcon, X, AlertCircle,
|
||||
Check, ChevronsUpDown
|
||||
} from 'lucide-vue-next'
|
||||
import { api, type MiseLanguage } from '@/api'
|
||||
import { toast } from 'vue-sonner'
|
||||
import XTerminal from '@/components/XTerminal.vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const SUPPORTED_DEPS_LANGS = [
|
||||
'python', 'node', 'ruby', 'go', 'rust', 'bun', 'php',
|
||||
'deno', 'dotnet', 'elixir', 'erlang', 'lua', 'nim',
|
||||
'dart', 'flutter', 'perl', 'crystal'
|
||||
]
|
||||
|
||||
interface DisplayLanguage extends Omit<MiseLanguage, 'source'> {
|
||||
source: string
|
||||
}
|
||||
|
||||
const languages = ref<DisplayLanguage[]>([])
|
||||
const loading = ref(false)
|
||||
const searchQuery = ref('')
|
||||
const errorMsg = ref('')
|
||||
const syncing = ref(false)
|
||||
const showSyncConfirm = ref(false)
|
||||
|
||||
const showInstallDialog = ref(false)
|
||||
const newLangPlugin = ref('')
|
||||
const newLangVersion = ref('')
|
||||
|
||||
// 下拉列表相关
|
||||
const availablePlugins = ref<string[]>([])
|
||||
const loadingPlugins = ref(false)
|
||||
const pluginSearch = ref('')
|
||||
const openPluginPopover = ref(false)
|
||||
|
||||
const availableVersions = ref<string[]>([])
|
||||
const loadingVersions = ref(false)
|
||||
const versionSearch = ref('')
|
||||
const openVersionPopover = ref(false)
|
||||
|
||||
const filteredPlugins = computed(() => {
|
||||
if (!pluginSearch.value) return availablePlugins.value
|
||||
const s = pluginSearch.value.toLowerCase()
|
||||
return availablePlugins.value.filter(p => p.toLowerCase().includes(s))
|
||||
})
|
||||
|
||||
const filteredVersions = computed(() => {
|
||||
const list = availableVersions.value
|
||||
if (!versionSearch.value) return list
|
||||
const s = versionSearch.value.toLowerCase()
|
||||
return list.filter(v => v.toLowerCase().includes(s))
|
||||
})
|
||||
|
||||
const showTerminalDialog = ref(false)
|
||||
const terminalCommand = ref('')
|
||||
|
||||
const filteredLanguages = computed(() => {
|
||||
if (!searchQuery.value) return languages.value
|
||||
const q = searchQuery.value.toLowerCase()
|
||||
return languages.value.filter(l => l.plugin.toLowerCase().includes(q) || l.version.toLowerCase().includes(q))
|
||||
})
|
||||
|
||||
async function loadLanguages() {
|
||||
loading.value = true
|
||||
errorMsg.value = ''
|
||||
try {
|
||||
const data = await api.mise.list()
|
||||
if (!data || !Array.isArray(data)) {
|
||||
languages.value = []
|
||||
return
|
||||
}
|
||||
languages.value = data.map(item => ({
|
||||
...item,
|
||||
source: typeof item.source === 'object' ? (item.source.path || item.source.type || '-') : (item.source || '-')
|
||||
}))
|
||||
} catch (e) {
|
||||
toast.error('获取语言列表失败')
|
||||
errorMsg.value = String(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSync() {
|
||||
syncing.value = true
|
||||
try {
|
||||
await api.mise.sync()
|
||||
toast.success('本地环境同步成功')
|
||||
await loadLanguages()
|
||||
} catch (e) {
|
||||
toast.error('同步失败: ' + e)
|
||||
} finally {
|
||||
syncing.value = false
|
||||
showSyncConfirm.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchPlugins() {
|
||||
if (availablePlugins.value.length > 0) return
|
||||
loadingPlugins.value = true
|
||||
try {
|
||||
availablePlugins.value = await api.mise.plugins()
|
||||
} catch (e) {
|
||||
console.error('Fetch plugins failed', e)
|
||||
} finally {
|
||||
loadingPlugins.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchVersions(plugin: string) {
|
||||
if (!plugin) return
|
||||
loadingVersions.value = true
|
||||
availableVersions.value = []
|
||||
try {
|
||||
availableVersions.value = await api.mise.versions(plugin)
|
||||
} catch (e) {
|
||||
console.error('Fetch versions failed', e)
|
||||
} finally {
|
||||
loadingVersions.value = false
|
||||
// 如果当前版本为空且已经有列表，默认选择第一个（通常是最新版本）
|
||||
if (!newLangVersion.value && availableVersions.value.length > 0) {
|
||||
newLangVersion.value = availableVersions.value[0] || ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
watch(newLangPlugin, (newVal) => {
|
||||
if (newVal) {
|
||||
fetchVersions(newVal)
|
||||
} else {
|
||||
availableVersions.value = []
|
||||
}
|
||||
newLangVersion.value = ''
|
||||
})
|
||||
|
||||
function openInstallDialog() {
|
||||
newLangPlugin.value = ''
|
||||
newLangVersion.value = ''
|
||||
showInstallDialog.value = true
|
||||
fetchPlugins()
|
||||
}
|
||||
|
||||
function startInstall() {
|
||||
if (!newLangPlugin.value.trim()) {
|
||||
toast.error('请输入或选择语言名称')
|
||||
return
|
||||
}
|
||||
if (!newLangVersion.value.trim()) {
|
||||
toast.error('请选择版本')
|
||||
return
|
||||
}
|
||||
const version = newLangVersion.value.trim()
|
||||
const cmd = `mise install ${newLangPlugin.value.trim()}@${version}`
|
||||
|
||||
showInstallDialog.value = false
|
||||
runInTerminal(cmd)
|
||||
}
|
||||
|
||||
function runInTerminal(command: string) {
|
||||
terminalCommand.value = command
|
||||
showTerminalDialog.value = true
|
||||
}
|
||||
|
||||
function confirmDelete(lang: MiseLanguage) {
|
||||
const cmd = `mise uninstall ${lang.plugin}@${lang.version}`
|
||||
runInTerminal(cmd)
|
||||
}
|
||||
|
||||
function getLangIcon(plugin: string) {
|
||||
const name = plugin.toLowerCase().trim()
|
||||
const mapping: Record<string, string> = {
|
||||
'python': 'python/python-original.svg',
|
||||
'node': 'nodejs/nodejs-original.svg',
|
||||
'nodejs': 'nodejs/nodejs-original.svg',
|
||||
'go': 'go/go-original.svg',
|
||||
'rust': 'rust/rust-original.svg',
|
||||
'ruby': 'ruby/ruby-plain.svg',
|
||||
'php': 'php/php-plain.svg',
|
||||
'java': 'java/java-plain.svg',
|
||||
'deno': 'deno/deno-plain.svg',
|
||||
'bun': 'bun/bun-plain.svg',
|
||||
'zig': 'zig/zig-original.svg',
|
||||
'dotnet': 'dot-net/dot-net-original.svg',
|
||||
'.net': 'dot-net/dot-net-original.svg',
|
||||
'elixir': 'elixir/elixir-original.svg',
|
||||
'erlang': 'erlang/erlang-original.svg',
|
||||
'crystal': 'crystal/crystal-original.svg',
|
||||
'lua': 'lua/lua-original.svg',
|
||||
'julia': 'julia/julia-original.svg',
|
||||
'nim': 'nim/nim-original.svg',
|
||||
'perl': 'perl/perl-original.svg',
|
||||
'scala': 'scala/scala-original.svg',
|
||||
'kotlin': 'kotlin/kotlin-original.svg',
|
||||
'clojure': 'clojure/clojure-line.svg',
|
||||
'dart': 'dart/dart-original.svg',
|
||||
'flutter': 'flutter/flutter-original.svg',
|
||||
'terraform': 'terraform/terraform-original.svg',
|
||||
'docker': 'docker/docker-original.svg',
|
||||
'kubernetes': 'kubernetes/kubernetes-plain.svg',
|
||||
'ansible': 'ansible/ansible-original.svg',
|
||||
}
|
||||
|
||||
if (mapping[name]) {
|
||||
return `https://cdn.jsdelivr.net/gh/devicons/devicon/icons/${mapping[name]}`
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
onMounted(loadLanguages)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h2 class="text-xl sm:text-2xl font-bold tracking-tight">语言依赖</h2>
|
||||
<p class="text-muted-foreground text-sm">管理系统环境中的编程语言运行时及相关包依赖 (Mise)</p>
|
||||
</div>
|
||||
<Button @click="openInstallDialog">
|
||||
<Plus class="h-4 w-4 mr-2" /> 新增语言
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div v-if="errorMsg"
|
||||
class="bg-destructive/10 border border-destructive/20 rounded-lg p-4 flex items-center gap-3 text-destructive">
|
||||
<AlertCircle class="h-5 w-5 shrink-0" />
|
||||
<p class="text-sm font-medium">{{ errorMsg }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 列表部分 -->
|
||||
<div class="rounded-lg border bg-card overflow-hidden">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between px-4 py-3 border-b bg-muted/30 gap-3">
|
||||
<div class="relative w-full sm:w-64">
|
||||
<Search class="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input v-model="searchQuery" placeholder="搜索语言或版本..." class="h-9 pl-8 text-sm" />
|
||||
</div>
|
||||
<div class="flex items-center gap-2 w-full sm:w-auto justify-end">
|
||||
<Button variant="outline" class="h-9 px-3 text-sm flex-1 sm:flex-none"
|
||||
@click="showSyncConfirm = true" :disabled="syncing || loading">
|
||||
<RefreshCw class="h-4 w-4 sm:mr-2" :class="{ 'animate-spin': syncing }" />
|
||||
<span class="hidden sm:inline">更新本地环境</span>
|
||||
<span class="sm:hidden">同步</span>
|
||||
</Button>
|
||||
<Button variant="outline" size="icon" class="h-9 w-9 shrink-0" @click="loadLanguages"
|
||||
:disabled="loading">
|
||||
<RefreshCw class="h-4 w-4" :class="{ 'animate-spin': loading }" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divide-y max-h-[600px] overflow-y-auto min-h-[200px]">
|
||||
<div v-if="loading && languages.length === 0" class="text-center py-12 text-muted-foreground">
|
||||
<Loader2 class="h-8 w-8 animate-spin mx-auto mb-2 opacity-20" />
|
||||
正在扫描运行环境...
|
||||
</div>
|
||||
<div v-else-if="filteredLanguages.length === 0 && !loading"
|
||||
class="text-center py-12 text-muted-foreground">
|
||||
<Globe class="h-12 w-12 mx-auto mb-2 opacity-10" />
|
||||
{{ searchQuery ? '未找到匹配的语言' : '未发现已安装的语言' }}
|
||||
</div>
|
||||
<div v-else v-for="lang in filteredLanguages" :key="lang.plugin + lang.version"
|
||||
class="flex flex-col sm:flex-row sm:items-center justify-between px-4 py-4 hover:bg-muted/50 transition-colors gap-4">
|
||||
<div class="flex items-center gap-4 min-w-0">
|
||||
<div
|
||||
class="h-9 w-9 sm:h-10 sm:w-10 rounded-full bg-primary/10 flex items-center justify-center font-bold text-primary uppercase overflow-hidden shrink-0">
|
||||
<template v-if="getLangIcon(lang.plugin)">
|
||||
<div class="w-full h-full bg-white/80 p-2 flex items-center justify-center">
|
||||
<img :src="getLangIcon(lang.plugin)" :alt="lang.plugin"
|
||||
class="w-full h-full object-contain" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ lang.plugin.length > 2 ? lang.plugin.substring(0, 2) : lang.plugin }}
|
||||
</template>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-bold capitalize truncate">{{ lang.plugin }}</span>
|
||||
<Badge variant="outline" class="font-mono whitespace-nowrap">{{ lang.version }}</Badge>
|
||||
</div>
|
||||
<div class="text-xs text-muted-foreground mt-1 space-y-0.5">
|
||||
<div class="font-mono opacity-60 truncate" :title="lang.source">来源: {{ lang.source }}
|
||||
</div>
|
||||
<div v-if="lang.installed_at" class="opacity-50">
|
||||
添加日期: {{ lang.installed_at }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-2 sm:ml-auto w-full sm:w-auto overflow-x-auto pb-1 sm:pb-0 hide-scrollbar">
|
||||
<Button v-if="SUPPORTED_DEPS_LANGS.includes(lang.plugin)" variant="outline" size="sm"
|
||||
class="whitespace-nowrap flex-1 sm:flex-none"
|
||||
@click="$router.push(`/dependencies?language=${lang.plugin}&version=${lang.version}`)">
|
||||
依赖管理
|
||||
</Button>
|
||||
<Badge v-else variant="secondary"
|
||||
class="h-8 opacity-60 flex-1 sm:flex-none justify-center whitespace-nowrap">
|
||||
不支持管理
|
||||
</Badge>
|
||||
<Button variant="outline" size="sm" class="whitespace-nowrap flex-1 sm:flex-none"
|
||||
@click="runInTerminal(`mise exec ${lang.plugin}@${lang.version} -- env`)">
|
||||
环境验证
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" class="text-destructive h-8 w-8 shrink-0 ml-auto sm:ml-0"
|
||||
@click="confirmDelete(lang)" title="卸载">
|
||||
<Trash2 class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 安装对话框 (带搜索下拉) -->
|
||||
<Dialog v-model:open="showInstallDialog">
|
||||
<DialogContent class="sm:max-w-[400px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>管理语言运行时</DialogTitle>
|
||||
<DialogDescription>配置并安装新的编程语言环境</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div class="grid gap-6 py-4">
|
||||
<!-- 语言选择 -->
|
||||
<div class="grid gap-2">
|
||||
<Label>语言名称 (Mise Plugin)</Label>
|
||||
<Popover v-model:open="openPluginPopover">
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="outline" role="combobox" :aria-expanded="openPluginPopover"
|
||||
class="justify-between w-full font-normal">
|
||||
{{ newLangPlugin || "选择或输入语言..." }}
|
||||
<ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="p-0 w-[var(--reka-popover-trigger-width)]" align="start">
|
||||
<div class="p-2 border-b">
|
||||
<div class="relative">
|
||||
<Search
|
||||
class="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
|
||||
<Input v-model="pluginSearch" placeholder="搜索插件..." class="h-8 pl-8 text-xs"
|
||||
@keydown.enter="() => { if (pluginSearch) { newLangPlugin = pluginSearch; openPluginPopover = false } }" />
|
||||
</div>
|
||||
</div>
|
||||
<ScrollArea class="h-64">
|
||||
<div class="p-1">
|
||||
<div v-if="loadingPlugins" class="flex items-center justify-center py-6">
|
||||
<Loader2 class="h-4 w-4 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
<div v-else-if="filteredPlugins.length === 0"
|
||||
class="py-6 text-center text-xs text-muted-foreground">
|
||||
未找到匹配插件
|
||||
</div>
|
||||
<button v-else v-for="p in filteredPlugins" :key="p"
|
||||
@click="() => { newLangPlugin = p; openPluginPopover = false }"
|
||||
class="w-full flex items-center px-2 py-1.5 text-sm rounded-sm hover:bg-muted text-left transition-colors group">
|
||||
<div
|
||||
class="mr-2 h-4 w-4 shrink-0 flex items-center justify-center relative">
|
||||
<div v-if="getLangIcon(p)"
|
||||
class="w-full h-full rounded-sm bg-white/80 overflow-hidden p-0.5">
|
||||
<img :src="getLangIcon(p)" class="w-full h-full object-contain" />
|
||||
</div>
|
||||
<div v-else
|
||||
class="w-full h-full flex items-center justify-center bg-primary/10 rounded-sm text-[8px] font-bold uppercase">
|
||||
{{ p.substring(0, 2) }}
|
||||
</div>
|
||||
<Check v-if="newLangPlugin === p"
|
||||
class="absolute -right-2 -top-1 h-3 w-3 text-primary bg-background rounded-full border shadow-sm" />
|
||||
</div>
|
||||
<span :class="{ 'font-bold text-primary': newLangPlugin === p }">{{ p
|
||||
}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
<!-- 版本选择 -->
|
||||
<div class="grid gap-2">
|
||||
<Label>版本</Label>
|
||||
<Popover v-model:open="openVersionPopover">
|
||||
<PopoverTrigger asChild :disabled="!newLangPlugin">
|
||||
<Button variant="outline" role="combobox" :aria-expanded="openVersionPopover"
|
||||
class="justify-between w-full font-normal" :disabled="!newLangPlugin">
|
||||
{{ newLangVersion || "选择或输入版本..." }}
|
||||
<div class="flex items-center">
|
||||
<Loader2 v-if="loadingVersions" class="mr-2 h-3 w-3 animate-spin opacity-50" />
|
||||
<ChevronsUpDown class="h-4 w-4 shrink-0 opacity-50" />
|
||||
</div>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="p-0 w-[var(--reka-popover-trigger-width)]" align="start">
|
||||
<div class="p-2 border-b">
|
||||
<div class="relative">
|
||||
<Search
|
||||
class="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
|
||||
<Input v-model="versionSearch" placeholder="搜索版本..." class="h-8 pl-8 text-xs"
|
||||
@keydown.enter="() => { if (versionSearch) { newLangVersion = versionSearch; openVersionPopover = false } }" />
|
||||
</div>
|
||||
</div>
|
||||
<ScrollArea class="h-64">
|
||||
<div class="p-1">
|
||||
<div v-if="loadingVersions" class="flex items-center justify-center py-6">
|
||||
<Loader2 class="h-4 w-4 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
<div v-else-if="filteredVersions.length === 0"
|
||||
class="py-6 text-center text-xs text-muted-foreground">
|
||||
未找到匹配版本
|
||||
</div>
|
||||
<button v-else v-for="v in filteredVersions" :key="v"
|
||||
@click="() => { newLangVersion = v; openVersionPopover = false }"
|
||||
class="w-full flex items-center px-2 py-1.5 text-sm rounded-sm hover:bg-muted text-left transition-colors">
|
||||
<Check
|
||||
:class="cn('mr-2 h-3.5 w-3.5', newLangVersion === v ? 'opacity-100' : 'opacity-0')" />
|
||||
{{ v }}
|
||||
</button>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" @click="showInstallDialog = false">取消</Button>
|
||||
<Button @click="startInstall">开始安装</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<!-- 终端对话框 -->
|
||||
<Dialog v-model:open="showTerminalDialog" @update:open="(val) => !val && loadLanguages()">
|
||||
<DialogContent class="max-w-4xl h-[600px] p-0 overflow-hidden bg-[#1e1e1e] border-none shadow-2xl">
|
||||
<DialogHeader class="sr-only">
|
||||
<DialogTitle>终端执行</DialogTitle>
|
||||
<DialogDescription>正在执行 mise 相关指令</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div class="flex flex-col h-full">
|
||||
<div class="flex items-center justify-between px-4 py-2 bg-[#252526] border-b border-[#3c3c3c]">
|
||||
<div class="flex items-center gap-2">
|
||||
<TerminalIcon class="h-4 w-4 text-primary" />
|
||||
<span class="text-xs font-medium text-gray-300">正在安装 / 执行: {{ terminalCommand }}</span>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" class="h-6 w-6 text-gray-400 hover:text-white"
|
||||
@click="showTerminalDialog = false">
|
||||
<X class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<XTerminal v-if="showTerminalDialog" :font-size="13" :initial-command="terminalCommand" />
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<!-- 同步确认对话框 -->
|
||||
<Dialog v-model:open="showSyncConfirm">
|
||||
<DialogContent class="sm:max-w-[400px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>同步本地环境</DialogTitle>
|
||||
<DialogDescription>
|
||||
将实时扫描系统中已安装的所有 Mise 运行时并更新到数据库表中。
|
||||
<p class="mt-2 text-destructive font-medium italic text-xs">注意：这可能会覆盖或更新表中的记录。</p>
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" @click="showSyncConfirm = false" :disabled="syncing">取消</Button>
|
||||
<Button @click="handleSync" :disabled="syncing">
|
||||
<Loader2 v-if="syncing" class="mr-2 h-4 w-4 animate-spin" />
|
||||
立即同步
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -7,9 +7,11 @@ import { Label } from '@/components/ui/label'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import DirTreeSelect from '@/components/DirTreeSelect.vue'
|
||||
import { Plus, ChevronDown, X } from 'lucide-vue-next'
|
||||
import { api, type Task, type EnvVar, type Agent } from '@/api'
|
||||
import { Plus, ChevronDown, X, Search, Check, ChevronsUpDown, Loader2, AlertCircle } from 'lucide-vue-next'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { api, type Task, type EnvVar, type Agent, type MiseLanguage } from '@/api'
|
||||
import { toast } from 'vue-sonner'
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -84,6 +86,100 @@ const onlineAgents = computed(() => {
|
||||
return allAgents.value.filter(a => a.enabled)
|
||||
})
|
||||
|
||||
// 语言环境相关
|
||||
const installedLangs = ref<MiseLanguage[]>([])
|
||||
const loadingLangs = ref(false)
|
||||
const availablePlugins = ref<string[]>([])
|
||||
const pluginSearch = ref('')
|
||||
const openPluginPopover = ref(false)
|
||||
|
||||
const availableVersions = ref<string[]>([])
|
||||
const versionSearch = ref('')
|
||||
const openVersionPopover = ref(false)
|
||||
|
||||
const filteredPlugins = computed(() => {
|
||||
if (!pluginSearch.value) return availablePlugins.value
|
||||
const s = pluginSearch.value.toLowerCase()
|
||||
return availablePlugins.value.filter(p => p.toLowerCase().includes(s))
|
||||
})
|
||||
|
||||
const filteredVersions = computed(() => {
|
||||
if (!versionSearch.value) return availableVersions.value
|
||||
const s = versionSearch.value.toLowerCase()
|
||||
return availableVersions.value.filter(v => v.toLowerCase().includes(s))
|
||||
})
|
||||
|
||||
async function fetchInstalledLangs() {
|
||||
loadingLangs.value = true
|
||||
try {
|
||||
installedLangs.value = await api.mise.list()
|
||||
const plugins = new Set<string>()
|
||||
installedLangs.value.forEach(l => plugins.add(l.plugin))
|
||||
availablePlugins.value = Array.from(plugins).sort()
|
||||
} catch (e) {
|
||||
console.error('Fetch installed langs failed', e)
|
||||
} finally {
|
||||
loadingLangs.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function getLangIcon(plugin: string) {
|
||||
const name = plugin?.toLowerCase().trim()
|
||||
const mapping: Record<string, string> = {
|
||||
'python': 'python/python-original.svg',
|
||||
'node': 'nodejs/nodejs-original.svg',
|
||||
'nodejs': 'nodejs/nodejs-original.svg',
|
||||
'go': 'go/go-original.svg',
|
||||
'rust': 'rust/rust-original.svg',
|
||||
'ruby': 'ruby/ruby-plain.svg',
|
||||
'php': 'php/php-plain.svg',
|
||||
'java': 'java/java-plain.svg',
|
||||
'deno': 'deno/deno-plain.svg',
|
||||
'bun': 'bun/bun-plain.svg',
|
||||
'zig': 'zig/zig-original.svg',
|
||||
'dotnet': 'dot-net/dot-net-original.svg',
|
||||
'.net': 'dot-net/dot-net-original.svg',
|
||||
'elixir': 'elixir/elixir-original.svg',
|
||||
'erlang': 'erlang/erlang-original.svg',
|
||||
'crystal': 'crystal/crystal-original.svg',
|
||||
'lua': 'lua/lua-original.svg',
|
||||
'julia': 'julia/julia-original.svg',
|
||||
'nim': 'nim/nim-original.svg',
|
||||
'perl': 'perl/perl-original.svg',
|
||||
'scala': 'scala/scala-original.svg',
|
||||
'kotlin': 'kotlin/kotlin-original.svg',
|
||||
'clojure': 'clojure/clojure-line.svg',
|
||||
'dart': 'dart/dart-original.svg',
|
||||
'flutter': 'flutter/flutter-original.svg',
|
||||
'terraform': 'terraform/terraform-original.svg',
|
||||
'docker': 'docker/docker-original.svg',
|
||||
'kubernetes': 'kubernetes/kubernetes-plain.svg',
|
||||
'ansible': 'ansible/ansible-original.svg',
|
||||
}
|
||||
|
||||
if (mapping[name]) {
|
||||
return `https://cdn.jsdelivr.net/gh/devicons/devicon/icons/${mapping[name]}`
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
watch(() => form.value.language, (newVal) => {
|
||||
if (newVal) {
|
||||
availableVersions.value = installedLangs.value
|
||||
.filter(l => l.plugin === newVal)
|
||||
.map(l => l.version)
|
||||
.sort((a, b) => b.localeCompare(a, undefined, { numeric: true }))
|
||||
|
||||
// 如果当前选中的版本不在可用列表中，且列表不为空，则自动选中第一个（通常是最新版）
|
||||
if (form.value.lang_version && !availableVersions.value.includes(form.value.lang_version)) {
|
||||
// 保持原样，可能还没加载完
|
||||
}
|
||||
} else {
|
||||
availableVersions.value = []
|
||||
form.value.lang_version = ''
|
||||
}
|
||||
})
|
||||
|
||||
watch(() => props.open, async (val) => {
|
||||
if (val) {
|
||||
form.value = { ...props.task }
|
||||
@@ -147,6 +243,16 @@ watch(() => props.open, async (val) => {
|
||||
envSearchQuery.value = ''
|
||||
// 加载数据
|
||||
await loadData()
|
||||
if (selectedAgentId.value === 'local') {
|
||||
await fetchInstalledLangs()
|
||||
// 如果已选择语言（编辑模式），手动触发一次版本更新
|
||||
if (form.value.language) {
|
||||
availableVersions.value = installedLangs.value
|
||||
.filter(l => l.plugin === form.value.language)
|
||||
.map(l => l.version)
|
||||
.sort((a, b) => b.localeCompare(a, undefined, { numeric: true }))
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -229,17 +335,7 @@ async function save() {
|
||||
<Label class="sm:text-right text-sm">任务名称</Label>
|
||||
<Input v-model="form.name" placeholder="我的任务" class="sm:col-span-3 h-8 text-sm" />
|
||||
</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="form.command" placeholder="node script.js" class="sm:col-span-3 h-8 text-sm 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'" v-model="currentWorkDir" />
|
||||
<Input v-else v-model="currentWorkDir" placeholder="工作目录（可选）" class="h-8 text-sm" />
|
||||
</div>
|
||||
</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">
|
||||
@@ -256,6 +352,120 @@ async function save() {
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 本地任务语言版本配置 -->
|
||||
<template v-if="selectedAgentId === 'local'">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-4 items-start gap-2 sm:gap-3">
|
||||
<span></span>
|
||||
<div class="sm:col-span-3">
|
||||
<div
|
||||
class="flex items-start gap-2 p-2 rounded-md bg-amber-500/10 border border-amber-500/20 text-amber-600 dark:text-amber-500 text-[11px] leading-relaxed">
|
||||
<AlertCircle class="h-3.5 w-3.5 mt-0.5 shrink-0" />
|
||||
<p>请先在<b>「语言依赖」</b>中安装所需的运行时。任务执行时将使用该环境，确保所有依赖已正确配置（如果是执行 <b>bash</b> 脚本，可随便选择一个环境即可）。</p>
|
||||
</div>
|
||||
</div>
|
||||
</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 font-medium">语言环境</Label>
|
||||
<div class="sm:col-span-3 flex gap-2">
|
||||
<Popover v-model:open="openPluginPopover">
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="outline" role="combobox" :aria-expanded="openPluginPopover"
|
||||
class="justify-between flex-1 h-8 text-sm font-normal">
|
||||
<div class="flex items-center gap-2 truncate">
|
||||
<div v-if="form.language && getLangIcon(form.language)"
|
||||
class="w-4 h-4 shrink-0 rounded-sm bg-white p-0.5 border">
|
||||
<img :src="getLangIcon(form.language)" class="w-full h-full object-contain" />
|
||||
</div>
|
||||
<span>{{ form.language || "选择环境..." }}</span>
|
||||
</div>
|
||||
<ChevronsUpDown class="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="p-0 w-[240px]" align="start">
|
||||
<div class="p-2 border-b">
|
||||
<div class="relative">
|
||||
<Search class="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
|
||||
<Input v-model="pluginSearch" placeholder="搜索已安装语言..." class="h-7 pl-8 text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
<ScrollArea class="h-48">
|
||||
<div class="p-1">
|
||||
<div v-if="loadingLangs" class="flex items-center justify-center py-4">
|
||||
<Loader2 class="h-4 w-4 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
<div v-else-if="filteredPlugins.length === 0"
|
||||
class="py-4 text-center text-xs text-muted-foreground">
|
||||
未找到已安装语言
|
||||
</div>
|
||||
<button v-else v-for="p in filteredPlugins" :key="p"
|
||||
@click="() => { form.language = p; openPluginPopover = false }"
|
||||
class="w-full flex items-center px-2 py-1.5 text-xs rounded-sm hover:bg-muted text-left transition-colors group">
|
||||
<div class="mr-2 h-4 w-4 shrink-0 flex items-center justify-center relative">
|
||||
<div v-if="getLangIcon(p)"
|
||||
class="w-full h-full rounded-sm bg-white overflow-hidden p-0.5 border">
|
||||
<img :src="getLangIcon(p)" class="w-full h-full object-contain" />
|
||||
</div>
|
||||
<div v-else
|
||||
class="w-full h-full flex items-center justify-center bg-primary/10 rounded-sm text-[8px] font-bold uppercase border">
|
||||
{{ p.substring(0, 2) }}
|
||||
</div>
|
||||
<Check v-if="form.language === p"
|
||||
class="absolute -right-2 -top-1 h-3 w-3 text-primary bg-background rounded-full border shadow-sm" />
|
||||
</div>
|
||||
<span :class="{ 'font-bold text-primary': form.language === p }">{{ p }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<Popover v-model:open="openVersionPopover">
|
||||
<PopoverTrigger asChild :disabled="!form.language">
|
||||
<Button variant="outline" role="combobox" :aria-expanded="openVersionPopover"
|
||||
class="justify-between w-32 h-8 text-sm font-normal" :disabled="!form.language">
|
||||
<span class="truncate">{{ form.lang_version || "选择版本..." }}</span>
|
||||
<div class="flex items-center">
|
||||
<ChevronsUpDown class="h-3.5 w-3.5 shrink-0 opacity-50" />
|
||||
</div>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="p-0 w-[140px]" align="start">
|
||||
<div class="p-2 border-b">
|
||||
<div class="relative">
|
||||
<Search class="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
|
||||
<Input v-model="versionSearch" placeholder="搜索版本..." class="h-7 pl-8 text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
<ScrollArea class="h-48">
|
||||
<div class="p-1">
|
||||
<div v-if="filteredVersions.length === 0" class="py-4 text-center text-xs text-muted-foreground">
|
||||
无可用版本
|
||||
</div>
|
||||
<button v-else v-for="v in filteredVersions" :key="v"
|
||||
@click="() => { form.lang_version = v; openVersionPopover = false }"
|
||||
class="w-full flex items-center px-2 py-1.5 text-xs rounded-sm hover:bg-muted text-left transition-colors">
|
||||
<Check :class="cn('mr-2 h-3 w-3', form.lang_version === v ? 'opacity-100' : 'opacity-0')" />
|
||||
<span class="truncate">{{ v }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<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="form.command" placeholder="node script.js" class="sm:col-span-3 h-8 text-sm 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'" v-model="currentWorkDir" />
|
||||
<Input v-else v-model="currentWorkDir" placeholder="工作目录（可选）" class="h-8 text-sm" />
|
||||
</div>
|
||||
</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="form.schedule" placeholder="0 * * * * *" class="sm:col-span-3 h-8 text-sm font-mono" />
|
||||
|
||||
Reference in New Issue
Block a user