feat: add deps page

web/src/views/dependencies/Dependencies.vue

@@ -7,152 +7,66 @@ import { Badge } from '@/components/ui/badge'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } 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 { Plus, Trash2, Package, Search, RefreshCw, Loader2 } from 'lucide-vue-next'
-import { api, type RuntimeEnv, type RuntimePackage } from '@/api'
+import { Plus, Trash2, Package, Search, RefreshCw, Loader2, Download } from 'lucide-vue-next'
+import { api, type Dependency } from '@/api'
 import { toast } from 'vue-sonner'
 
-const availableRuntimes = ref<string[]>([])
-const activeRuntime = ref('conda')
-const envs = ref<RuntimeEnv[]>([])
-const selectedEnv = ref<RuntimeEnv | null>(null)
-const packages = ref<RuntimePackage[]>([])
+const activeTab = ref('py')
+const deps = ref<Dependency[]>([])
 const loading = ref(false)
-const packagesLoading = ref(false)
-
-// 创建环境
-const showCreateDialog = ref(false)
-const newEnvName = ref('')
-const newEnvVersion = ref('')
-const creating = ref(false)
-
-// 删除环境
-const showDeleteDialog = ref(false)
-const envToDelete = ref<RuntimeEnv | null>(null)
-
-// 安装包
-const showInstallDialog = ref(false)
-const packageToInstall = ref('')
 const installing = ref(false)
 
-// 搜索
-const packageSearch = ref('')
+// 安装对话框
+const showInstallDialog = ref(false)
+const newPkgName = ref('')
+const newPkgVersion = ref('')
 
-const filteredPackages = computed(() => {
-  if (!packageSearch.value) return packages.value
-  const q = packageSearch.value.toLowerCase()
-  return packages.value.filter(p => p.name.toLowerCase().includes(q))
+// 删除确认
+const showDeleteDialog = ref(false)
+const depToDelete = ref<Dependency | null>(null)
+
+// 搜索
+const searchQuery = ref('')
+
+const filteredDeps = computed(() => {
+  const list = deps.value.filter(d => d.type === activeTab.value)
+  if (!searchQuery.value) return list
+  const q = searchQuery.value.toLowerCase()
+  return list.filter(d => d.name.toLowerCase().includes(q))
 })
 
-async function loadRuntimes() {
-  try {
-    availableRuntimes.value = await api.runtime.getAvailable()
-    if (availableRuntimes.value.length > 0 && !availableRuntimes.value.includes(activeRuntime.value)) {
-      activeRuntime.value = availableRuntimes.value[0] ?? 'conda'
-    }
-  } catch {
-    availableRuntimes.value = []
-  }
-}
-
-async function loadEnvs() {
-  if (!activeRuntime.value) return
+async function loadDeps() {
   loading.value = true
   try {
-    envs.value = await api.runtime.listEnvs(activeRuntime.value)
-    if (envs.value.length > 0 && !selectedEnv.value) {
-      const firstEnv = envs.value[0]
-      if (firstEnv) selectEnv(firstEnv)
-    }
+    deps.value = await api.deps.list()
   } catch {
-    toast.error('加载环境列表失败')
-    envs.value = []
+    toast.error('加载依赖列表失败')
   } finally {
     loading.value = false
   }
 }
 
-async function selectEnv(env: RuntimeEnv) {
-  selectedEnv.value = env
-  await loadPackages()
-}
-
-async function loadPackages() {
-  if (!selectedEnv.value) return
-  packagesLoading.value = true
-  try {
-    packages.value = await api.runtime.listPackages(activeRuntime.value, selectedEnv.value.name)
-  } catch {
-    toast.error('加载包列表失败')
-    packages.value = []
-  } finally {
-    packagesLoading.value = false
-  }
-}
-
-function openCreateDialog() {
-  newEnvName.value = ''
-  newEnvVersion.value = ''
-  showCreateDialog.value = true
-}
-
-async function createEnv() {
-  if (!newEnvName.value.trim()) {
-    toast.error('请输入环境名称')
-    return
-  }
-  creating.value = true
-  try {
-    await api.runtime.createEnv(activeRuntime.value, newEnvName.value.trim(), newEnvVersion.value.trim() || undefined)
-    toast.success('环境创建成功')
-    showCreateDialog.value = false
-    await loadEnvs()
-  } catch (e: unknown) {
-    toast.error((e as Error).message || '创建失败')
-  } finally {
-    creating.value = false
-  }
-}
-
-function confirmDeleteEnv(env: RuntimeEnv) {
-  if (env.name === 'base') {
-    toast.error('不能删除 base 环境')
-    return
-  }
-  envToDelete.value = env
-  showDeleteDialog.value = true
-}
-
-async function deleteEnv() {
-  if (!envToDelete.value) return
-  try {
-    await api.runtime.deleteEnv(activeRuntime.value, envToDelete.value.name)
-    toast.success('环境删除成功')
-    if (selectedEnv.value?.name === envToDelete.value.name) {
-      selectedEnv.value = null
-      packages.value = []
-    }
-    await loadEnvs()
-  } catch (e: unknown) {
-    toast.error((e as Error).message || '删除失败')
-  } finally {
-    showDeleteDialog.value = false
-    envToDelete.value = null
-  }
-}
-
 function openInstallDialog() {
-  packageToInstall.value = ''
+  newPkgName.value = ''
+  newPkgVersion.value = ''
   showInstallDialog.value = true
 }
 
 async function installPackage() {
-  if (!packageToInstall.value.trim() || !selectedEnv.value) return
+  if (!newPkgName.value.trim()) {
+    toast.error('请输入包名')
+    return
+  }
   installing.value = true
   try {
-    await api.runtime.installPackage(activeRuntime.value, selectedEnv.value.name, packageToInstall.value.trim())
-    toast.success('包安装成功')
+    await api.deps.install({
+      name: newPkgName.value.trim(),
+      version: newPkgVersion.value.trim() || undefined,
+      type: activeTab.value
+    })
+    toast.success('安装成功')
     showInstallDialog.value = false
-    await loadPackages()
+    await loadDeps()
   } catch (e: unknown) {
     toast.error((e as Error).message || '安装失败')
   } finally {
@@ -160,29 +74,30 @@ async function installPackage() {
   }
 }
 
-async function uninstallPackage(pkg: RuntimePackage) {
-  if (!selectedEnv.value) return
+function confirmDelete(dep: Dependency) {
+  depToDelete.value = dep
+  showDeleteDialog.value = true
+}
+
+async function uninstallPackage() {
+  if (!depToDelete.value) return
   try {
-    await api.runtime.uninstallPackage(activeRuntime.value, selectedEnv.value.name, pkg.name)
-    toast.success('包卸载成功')
-    await loadPackages()
+    await api.deps.uninstall(depToDelete.value.id)
+    toast.success('卸载成功')
+    await loadDeps()
   } catch (e: unknown) {
     toast.error((e as Error).message || '卸载失败')
+  } finally {
+    showDeleteDialog.value = false
+    depToDelete.value = null
   }
 }
 
-function getRuntimeLabel(type: string) {
-  const labels: Record<string, string> = { conda: 'Conda', node: 'Node.js' }
-  return labels[type] || type
+function getTypeLabel(type: string) {
+  return type === 'py' ? 'Python' : 'Node.js'
 }
 
-onMounted(async () => {
-  await loadRuntimes()
-  if (availableRuntimes.value.includes('conda')) {
-    activeRuntime.value = 'conda'
-    await loadEnvs()
-  }
-})
+onMounted(loadDeps)
 </script>
 
 <template>
@@ -190,184 +105,117 @@ onMounted(async () => {
     <div class="flex items-center justify-between">
       <div>
         <h2 class="text-2xl font-bold tracking-tight">依赖管理</h2>
-        <p class="text-muted-foreground">管理运行时环境和依赖包</p>
+        <p class="text-muted-foreground">管理 Python 和 Node.js 依赖包</p>
       </div>
     </div>
 
-    <div v-if="availableRuntimes.length === 0" class="text-center py-8 text-muted-foreground">
-      <Package class="h-10 w-10 mx-auto mb-3 opacity-50" />
-      <p>未检测到可用的运行时环境</p>
-      <p class="text-sm mt-1">请确保已安装 Conda 或其他支持的运行时</p>
-    </div>
-
-    <Tabs v-else v-model="activeRuntime" @update:model-value="loadEnvs">
+    <Tabs v-model="activeTab">
       <TabsList>
-        <TabsTrigger v-for="rt in availableRuntimes" :key="rt" :value="rt">
-          {{ getRuntimeLabel(rt) }}
-        </TabsTrigger>
+        <TabsTrigger value="py">Python</TabsTrigger>
+        <TabsTrigger value="node">Node.js</TabsTrigger>
       </TabsList>
 
-      <TabsContent :value="activeRuntime" class="mt-4">
-        <div class="flex gap-4 min-h-[480px]">
-          <!-- 环境列表 -->
-          <div class="w-52 shrink-0 border rounded-lg p-3 h-fit">
-            <div class="flex items-center justify-between mb-2">
-              <span class="text-sm font-medium">虚拟环境</span>
-              <Button variant="ghost" size="icon" class="h-6 w-6" @click="openCreateDialog">
-                <Plus class="h-3.5 w-3.5" />
-              </Button>
+      <TabsContent :value="activeTab" class="mt-4">
+        <div class="rounded-lg border bg-card">
+          <!-- 工具栏 -->
+          <div class="flex items-center justify-between 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-0.5 min-h-[60px]">
-              <div v-if="loading" class="text-sm text-muted-foreground text-center py-3">
-                <Loader2 class="h-4 w-4 animate-spin mx-auto" />
-              </div>
-              <div
-                v-else
-                v-for="env in envs"
-                :key="env.name"
-                :class="[
-                  'group flex items-center justify-between px-2 py-1.5 rounded cursor-pointer text-sm',
-                  selectedEnv?.name === env.name ? 'bg-accent text-accent-foreground' : 'hover:bg-muted'
-                ]"
-                @click="selectEnv(env)"
-              >
-                <span class="truncate text-xs">{{ env.name }}</span>
-                <Button
-                  v-if="env.name !== 'base'"
-                  variant="ghost"
-                  size="icon"
-                  class="h-5 w-5 shrink-0 opacity-0 group-hover:opacity-100"
-                  @click.stop="confirmDeleteEnv(env)"
-                >
-                  <Trash2 class="h-3 w-3 text-destructive" />
-                </Button>
+            <div class="flex items-center gap-2">
+              <div class="relative">
+                <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-48 text-sm" />
               </div>
+              <Button variant="outline" size="icon" class="h-9 w-9" @click="loadDeps" :disabled="loading">
+                <RefreshCw class="h-4 w-4" :class="{ 'animate-spin': loading }" />
+              </Button>
+              <Button size="sm" class="h-9" @click="openInstallDialog">
+                <Download class="h-4 w-4 mr-1.5" /> 安装
+              </Button>
             </div>
           </div>
 
-          <!-- 包列表 -->
-          <div class="flex-1 border rounded-lg flex flex-col h-[480px]">
-            <div class="flex items-center justify-between px-3 py-2 border-b bg-muted/30 shrink-0">
-              <div class="flex items-center gap-2">
-                <span class="text-sm font-medium">{{ selectedEnv?.name || '选择环境' }}</span>
-                <Badge v-if="selectedEnv" variant="secondary" class="text-xs">{{ packages.length }} 包</Badge>
-              </div>
-              <div class="flex items-center gap-1.5">
-                <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="packageSearch" placeholder="搜索..." class="h-7 pl-7 w-36 text-xs" />
-                </div>
-                <Button variant="ghost" size="icon" class="h-7 w-7" @click="loadPackages" :disabled="!selectedEnv">
-                  <RefreshCw class="h-3.5 w-3.5" />
-                </Button>
-                <Button size="sm" class="h-7 text-xs" @click="openInstallDialog" :disabled="!selectedEnv">
-                  <Plus class="h-3.5 w-3.5 mr-1" /> 安装
-                </Button>
-              </div>
+          <!-- 表头 -->
+          <div class="flex items-center gap-4 px-4 py-2 border-b bg-muted/50 text-sm text-muted-foreground font-medium">
+            <span class="flex-1">包名</span>
+            <span class="w-32">版本</span>
+            <span class="w-48">备注</span>
+            <span class="w-20 text-center">操作</span>
+          </div>
+
+          <!-- 列表 -->
+          <div class="divide-y max-h-[480px] overflow-y-auto">
+            <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 class="flex-1 overflow-y-auto">
-              <div v-if="!selectedEnv" class="text-center py-8 text-muted-foreground text-sm">
-                请选择一个环境
-              </div>
-              <div v-else-if="packagesLoading" class="text-center py-8">
-                <Loader2 class="h-5 w-5 animate-spin mx-auto text-muted-foreground" />
-              </div>
-              <div v-else-if="filteredPackages.length === 0" class="text-center py-8 text-muted-foreground text-sm">
-                {{ packageSearch ? '无匹配结果' : '暂无包' }}
-              </div>
-              <table v-else class="w-full text-sm">
-                <thead class="bg-muted/50 sticky top-0">
-                  <tr class="text-xs text-muted-foreground">
-                    <th class="text-left px-3 py-1.5 font-medium">包名</th>
-                    <th class="text-left px-3 py-1.5 font-medium">版本</th>
-                    <th class="text-left px-3 py-1.5 font-medium">来源</th>
-                    <th class="text-center px-3 py-1.5 font-medium w-16">操作</th>
-                  </tr>
-                </thead>
-                <tbody class="divide-y">
-                  <tr v-for="pkg in filteredPackages" :key="pkg.name" class="hover:bg-muted/50">
-                    <td class="px-3 py-1.5 text-xs font-mono">{{ pkg.name }}</td>
-                    <td class="px-3 py-1.5 text-xs text-muted-foreground">{{ pkg.version }}</td>
-                    <td class="px-3 py-1.5 text-xs text-muted-foreground">{{ pkg.channel || '-' }}</td>
-                    <td class="px-3 py-1.5 text-center">
-                      <Button variant="ghost" size="icon" class="h-6 w-6 text-destructive" @click="uninstallPackage(pkg)">
-                        <Trash2 class="h-3 w-3" />
-                      </Button>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
+            <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">{{ dep.name }}</span>
+              <span class="w-32 text-sm text-muted-foreground">{{ dep.version || '-' }}</span>
+              <span class="w-48 text-sm text-muted-foreground truncate" :title="dep.remark">{{ dep.remark || '-' }}</span>
+              <span class="w-20 flex justify-center">
+                <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>
       </TabsContent>
     </Tabs>
 
-    <!-- 创建环境对话框 -->
-    <Dialog v-model:open="showCreateDialog">
-      <DialogContent class="sm:max-w-[380px]">
-        <DialogHeader>
-          <DialogTitle>创建虚拟环境</DialogTitle>
-        </DialogHeader>
-        <div class="grid gap-3 py-3">
-          <div class="grid grid-cols-4 items-center gap-3">
-            <Label class="text-right text-sm">环境名称</Label>
-            <Input v-model="newEnvName" placeholder="myenv" class="col-span-3 h-8" />
-          </div>
-          <div class="grid grid-cols-4 items-center gap-3">
-            <Label class="text-right text-sm">Python</Label>
-            <Input v-model="newEnvVersion" placeholder="3.10 (可选)" class="col-span-3 h-8" />
-          </div>
-        </div>
-        <DialogFooter>
-          <Button variant="outline" size="sm" @click="showCreateDialog = false">取消</Button>
-          <Button size="sm" @click="createEnv" :disabled="creating">
-            <Loader2 v-if="creating" class="h-3.5 w-3.5 mr-1.5 animate-spin" />
-            创建
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-
-    <!-- 删除环境确认 -->
-    <AlertDialog v-model:open="showDeleteDialog">
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>确认删除</AlertDialogTitle>
-          <AlertDialogDescription>
-            确定要删除环境 "{{ envToDelete?.name }}" 吗？此操作无法撤销。
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>取消</AlertDialogCancel>
-          <AlertDialogAction class="bg-destructive text-white hover:bg-destructive/90" @click="deleteEnv">删除</AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-
-    <!-- 安装包对话框 -->
+    <!-- 安装对话框 -->
     <Dialog v-model:open="showInstallDialog">
-      <DialogContent class="sm:max-w-[380px]">
+      <DialogContent class="sm:max-w-[400px]">
         <DialogHeader>
-          <DialogTitle>安装包</DialogTitle>
+          <DialogTitle>安装 {{ getTypeLabel(activeTab) }} 包</DialogTitle>
         </DialogHeader>
-        <div class="grid gap-3 py-3">
-          <div class="grid grid-cols-4 items-center gap-3">
-            <Label class="text-right text-sm">包名</Label>
-            <Input v-model="packageToInstall" placeholder="numpy" class="col-span-3 h-8" />
+        <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>
-          <p class="text-xs text-muted-foreground ml-auto col-span-4">
-            支持版本指定: numpy==1.24.0
-          </p>
         </div>
         <DialogFooter>
-          <Button variant="outline" size="sm" @click="showInstallDialog = false">取消</Button>
-          <Button size="sm" @click="installPackage" :disabled="installing">
-            <Loader2 v-if="installing" class="h-3.5 w-3.5 mr-1.5 animate-spin" />
+          <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>
   </div>
 </template>