admin/TaskPool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: adapt mobile phone style

Browse Source
This commit is contained in:
engigu
2025-12-23 23:22:25 +08:00
parent 95242410d5
commit ca46573c9b
16 changed files with 174 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/views/dependencies/Dependencies.vue
+14 -14
View File
@@ -116,10 +116,10 @@ onMounted(loadDeps)
<template>
<div class="space-y-4">
<div class="flex items-center justify-between">
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div>
<h2 class="text-2xl font-bold tracking-tight">依赖管理</h2>
<p class="text-muted-foreground">管理 Python 和 Node.js 依赖包</p>
<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>
@@ -130,36 +130,36 @@ onMounted(loadDeps)
</TabsList>
<TabsContent :value="activeTab" class="mt-4">
<div class="rounded-lg border bg-card">
<div class="rounded-lg border bg-card overflow-x-auto">
<!-- 工具栏 -->
<div class="flex items-center justify-between px-4 py-3 border-b bg-muted/30">
<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="flex items-center gap-2">
<div class="relative">
<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-48 text-sm" />
<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" @click="loadDeps" :disabled="loading">
<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 size="sm" class="h-9" @click="openInstallDialog">
<Download class="h-4 w-4 mr-1.5" /> 安装
<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>
<!-- 表头 -->
<div class="flex items-center gap-4 px-4 py-2 border-b bg-muted/50 text-sm text-muted-foreground font-medium">
<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">备注</span>
<span class="w-48 hidden md:block">备注</span>
<span class="w-20 text-center">操作</span>
</div>
<!-- 列表 -->
<div class="divide-y max-h-[480px] overflow-y-auto">
<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" />
加载中...
@@ -176,7 +176,7 @@ onMounted(loadDeps)
>
<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-48 text-sm text-muted-foreground truncate hidden md:block" :title="dep.remark">{{ dep.remark || '-' }}</span>
<span class="w-20 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" />