feat: complete mise env base code

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