feat: complete mise env base code

web/src/api/index.ts

@@ -202,19 +202,34 @@ export const api = {
     }
   },
   deps: {
-    list: (type?: string) => {
-      const query = type ? `?type=${type}` : ''
-      return request<Dependency[]>(`/deps${query}`)
+    list: (params?: { language?: string; lang_version?: string }) => {
+      const query = new URLSearchParams()
+      if (params?.language) query.set('language', params.language)
+      if (params?.lang_version) query.set('lang_version', params.lang_version)
+      return request<Dependency[]>(`/deps?${query}`)
     },
-    create: (data: { name: string; version?: string; type: string; remark?: string }) =>
+    create: (data: { name: string; version?: string; language: string; lang_version?: string; remark?: string }) =>
       request<Dependency>('/deps', { method: 'POST', body: JSON.stringify(data) }),
     delete: (id: number) => request(`/deps/${id}`, { method: 'DELETE' }),
-    install: (data: { name: string; version?: string; type: string; remark?: string }) =>
-      request('/deps/install', { method: 'POST', body: JSON.stringify(data) }),
-    uninstall: (id: number) => request(`/deps/uninstall/${id}`, { method: 'POST' }),
+    install: (data: any) => request<any>('/deps/install', { method: 'POST', body: JSON.stringify(data) }),
+    getInstallCmd: (data: any) => request<{ command: string }>('/deps/install-cmd', { method: 'POST', body: JSON.stringify(data) }),
+    uninstall: (id: number) => request<any>(`/deps/uninstall/${id}`, { method: 'POST' }),
     reinstall: (id: number) => request(`/deps/reinstall/${id}`, { method: 'POST' }),
-    reinstallAll: (type: string) => request(`/deps/reinstall-all?type=${type}`, { method: 'POST' }),
-    getInstalled: (type: string) => request<Dependency[]>(`/deps/installed?type=${type}`)
+    reinstallAll: (language: string, lang_version?: string) => {
+      const query = new URLSearchParams({ language })
+      if (lang_version) query.set('lang_version', lang_version)
+      return request(`/deps/reinstall-all?${query}`, { method: 'POST' })
+    },
+    getReinstallAllCmd: (language: string, lang_version?: string) => {
+      const query = new URLSearchParams({ language })
+      if (lang_version) query.set('lang_version', lang_version)
+      return request<{ command: string }>(`/deps/reinstall-all-cmd?${query}`, { method: 'POST' })
+    },
+    getInstalled: (language: string, lang_version?: string) => {
+      const query = new URLSearchParams({ language })
+      if (lang_version) query.set('lang_version', lang_version)
+      return request<Dependency[]>(`/deps/installed?${query}`)
+    }
   },
   agents: {
     list: () => request<Agent[]>('/agents'),
@@ -229,6 +244,12 @@ export const api = {
     createToken: (data: { remark?: string; max_uses?: number; expires_at?: string }) =>
       request<AgentToken>('/agents/tokens', { method: 'POST', body: JSON.stringify(data) }),
     deleteToken: (id: number) => request('/agents/tokens/' + id, { method: 'DELETE' })
+  },
+  mise: {
+    list: () => request<MiseLanguage[]>('/mise/ls'),
+    sync: () => request<void>('/mise/sync', { method: 'POST' }),
+    plugins: () => request<string[]>('/mise/plugins'),
+    versions: (plugin: string) => request<string[]>(`/mise/versions?plugin=${plugin}`)
   }
 }
 
@@ -250,6 +271,8 @@ export interface Task {
   work_dir: string
   clean_config: string
   envs: string
+  language: string
+  lang_version: string
   agent_id: number | null
   enabled: boolean
   last_run: string
@@ -410,7 +433,8 @@ export interface Dependency {
   id: number
   name: string
   version: string
-  type: string
+  language: string
+  lang_version: string
   remark: string
   log: string
   created_at: string
@@ -446,3 +470,12 @@ export interface AgentToken {
   enabled: boolean
   created_at: string
 }
+
+export interface MiseLanguage {
+  plugin: string
+  version: string
+  source: { type?: string; path?: string } | string
+  active: boolean
+  install_path?: string
+  installed_at?: string  // 安装日期
+}

web/src/components/XTerminal.vue

@@ -20,6 +20,8 @@ const props = withDefaults(
 const emit = defineEmits<{
   connected: []
   disconnected: []
+  success: []
+  failed: []
 }>()
 
 const terminalRef = ref<HTMLDivElement | null>(null)
@@ -39,7 +41,7 @@ function initTerminal(forceConnect = false) {
     terminal.dispose()
     terminal = null
   }
-  
+
   // 确保旧的 WebSocket 完全关闭
   if (ws) {
     if (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING) {
@@ -47,7 +49,7 @@ function initTerminal(forceConnect = false) {
     }
     ws = null
   }
-  
+
   inputBuffer = ''
   isPtyMode = false
 
@@ -65,7 +67,7 @@ function initTerminal(forceConnect = false) {
   fitAddon = new FitAddon()
   terminal.loadAddon(fitAddon)
   terminal.open(terminalRef.value)
-  
+
   // 延迟调用 fit，确保 DOM 已渲染
   setTimeout(() => {
     try {
@@ -74,7 +76,7 @@ function initTerminal(forceConnect = false) {
       // 忽略 fit 错误
     }
   }, 50)
-  
+
   terminal.focus()
 
   // autoConnect 或者强制连接时才连接
@@ -187,6 +189,15 @@ function connectWebSocket() {
       return
     }
     terminal?.write(event.data)
+
+    // 检测安装结果标识
+    if (typeof event.data === 'string') {
+      if (event.data.includes('__INSTALL_SUCCESS__')) {
+        emit('success')
+      } else if (event.data.includes('__INSTALL_FAILED__')) {
+        emit('failed')
+      }
+    }
   }
 
   ws.onclose = () => {

web/src/layouts/MainLayout.vue

@@ -2,7 +2,7 @@
 import { ref, onMounted, computed } from 'vue'
 import { RouterLink, RouterView, useRoute } from 'vue-router'
 import { resetAuthCache } from '@/router'
-import { LayoutDashboard, ListTodo, FileCode, Settings, LogOut, ScrollText, Terminal, Variable, KeyRound, Package, Menu, X, Server } from 'lucide-vue-next'
+import { LayoutDashboard, ListTodo, FileCode, Settings, LogOut, ScrollText, Terminal, Variable, KeyRound, Menu, X, Server, Globe } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
 import ThemeToggle from '@/components/ThemeToggle.vue'
 import { api } from '@/api'
@@ -58,7 +58,7 @@ const navItems = [
   { to: '/editor', icon: FileCode, label: '脚本编辑', exact: false },
   { to: '/history', icon: ScrollText, label: '执行历史', exact: true },
   { to: '/environments', icon: Variable, label: '环境变量', exact: true },
-  { to: '/dependencies', icon: Package, label: '依赖管理', exact: true },
+  { to: '/languages', icon: Globe, label: '语言依赖', exact: true },
   { to: '/terminal', icon: Terminal, label: '终端命令', exact: true },
   { to: '/loginlogs', icon: KeyRound, label: '登录日志', exact: true },
   { to: '/settings', icon: Settings, label: '系统设置', exact: true },

web/src/router/index.ts

@@ -42,6 +42,7 @@ const router = createRouter({
         { path: 'editor', name: 'editor', component: () => import('@/views/editor/Editor.vue') },
         { path: 'environments', name: 'environments', component: () => import('@/views/environments/Environments.vue') },
         { path: 'dependencies', name: 'dependencies', component: () => import('@/views/dependencies/Dependencies.vue') },
+        { path: 'languages', name: 'languages', component: () => import('@/views/languages/Languages.vue') },
         { path: 'agents', name: 'agents', component: () => import('@/views/agents/Agents.vue') },
         { path: 'history', name: 'history', component: () => import('@/views/history/History.vue') },
         { path: 'loginlogs', name: 'loginlogs', component: () => import('@/views/loginlogs/LoginLogs.vue') },
@@ -57,7 +58,7 @@ router.beforeEach(async (to, _from, next) => {
   // 首次访问或访问登录页时强制检查
   const forceCheck = !authChecked || to.path === '/login'
   const isAuthenticated = await getAuthStatus(forceCheck)
-  
+
   // 检查是否需要认证
   if (to.matched.some(record => record.meta.requiresAuth)) {
     if (isAuthenticated) {

web/src/views/dependencies/Dependencies.vue

@@ -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 &lt;package-name&gt;</div>
-              <div class="text-muted-foreground"># Alpine</div>
-              <div>apk add &lt;package-name&gt;</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>

web/src/views/languages/Languages.vue

@@ -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>

web/src/views/tasks/TaskDialog.vue

@@ -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" />