fix: task page small page style
This commit is contained in:
engigu
@@ -225,58 +225,75 @@ watch(() => route.query.agent_id, (newVal) => {
|
||||
<h2 class="text-xl sm:text-2xl font-bold tracking-tight">定时任务</h2>
|
||||
<p class="text-muted-foreground text-sm">管理和调度自动化任务</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="relative flex-1 sm:flex-none">
|
||||
<Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input v-model="filterName" placeholder="搜索任务..." class="h-9 pl-9 w-full sm:w-40 text-sm"
|
||||
@input="handleSearch" />
|
||||
<div class="flex flex-col sm:flex-row gap-2.5 w-full md:w-auto">
|
||||
<!-- 第1行: 搜索框 -->
|
||||
<div class="flex items-center gap-2 w-full sm:w-auto">
|
||||
<div class="relative flex-1 sm:flex-none">
|
||||
<Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input v-model="filterName" placeholder="搜索任务..." class="h-9 pl-9 w-full sm:w-40 text-sm"
|
||||
@input="handleSearch" />
|
||||
</div>
|
||||
<div class="relative flex-1 sm:flex-none">
|
||||
<Tag class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input v-model="filterTags" placeholder="搜索标签..." class="h-9 pl-9 w-full sm:w-32 text-sm"
|
||||
@input="handleSearch" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1 sm:flex-none">
|
||||
<Tag class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input v-model="filterTags" placeholder="搜索标签..." class="h-9 pl-9 w-full sm:w-32 text-sm"
|
||||
@input="handleSearch" />
|
||||
</div>
|
||||
<div class="relative flex-1 sm:flex-none">
|
||||
<Select v-model="filterType" @update:model-value="handleTypeChange">
|
||||
<SelectTrigger class="h-9 w-full sm:w-28 text-sm">
|
||||
<SelectValue placeholder="所有类型" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">所有类型</SelectItem>
|
||||
<SelectItem :value="TASK_TYPE.NORMAL">定时任务</SelectItem>
|
||||
<SelectItem :value="TASK_TYPE.REPO">仓库同步</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<!-- 第2行: 下拉框与按钮 -->
|
||||
<div class="flex items-center gap-2 w-full sm:w-auto mt-1 sm:mt-0">
|
||||
<div class="relative flex-1 sm:flex-none">
|
||||
<Select v-model="filterType" @update:model-value="handleTypeChange">
|
||||
<SelectTrigger class="h-9 w-full sm:w-28 text-sm">
|
||||
<SelectValue placeholder="所有类型" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">所有类型</SelectItem>
|
||||
<SelectItem :value="TASK_TYPE.NORMAL">定时任务</SelectItem>
|
||||
<SelectItem :value="TASK_TYPE.REPO">仓库同步</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div v-if="filterAgentId"
|
||||
class="hidden sm:flex items-center gap-1 px-2 py-1 bg-primary/10 text-primary rounded-md text-sm shrink-0">
|
||||
<Server class="h-3.5 w-3.5" />
|
||||
<span>{{ filterAgentName }}</span>
|
||||
<X class="h-3.5 w-3.5 cursor-pointer hover:text-destructive" @click="clearAgentFilter" />
|
||||
</div>
|
||||
<div class="flex items-center gap-2 shrink-0 justify-end">
|
||||
<Button variant="outline" @click="openCreateRepo" class="shrink-0 px-3 h-9">
|
||||
<GitBranch class="h-4 w-4 sm:mr-2" /> <span class="hidden sm:inline">仓库同步</span>
|
||||
</Button>
|
||||
<Button @click="openCreate" class="shrink-0 px-3 h-9">
|
||||
<Plus class="h-4 w-4 sm:mr-2" /> <span class="hidden sm:inline">新建任务</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 移动端 agent 过滤标签 -->
|
||||
<div v-if="filterAgentId"
|
||||
class="flex items-center gap-1 px-2 py-1 bg-primary/10 text-primary rounded-md text-sm">
|
||||
class="flex sm:hidden items-center gap-1 px-2 py-1 bg-primary/10 text-primary rounded-md text-sm w-fit mt-1">
|
||||
<Server class="h-3.5 w-3.5" />
|
||||
<span>{{ filterAgentName }}</span>
|
||||
<X class="h-3.5 w-3.5 cursor-pointer hover:text-destructive" @click="clearAgentFilter" />
|
||||
</div>
|
||||
<Button variant="outline" @click="openCreateRepo" class="shrink-0">
|
||||
<GitBranch class="h-4 w-4 sm:mr-2" /> <span class="hidden sm:inline">仓库同步</span>
|
||||
</Button>
|
||||
<Button @click="openCreate" class="shrink-0">
|
||||
<Plus class="h-4 w-4 sm:mr-2" /> <span class="hidden sm:inline">新建任务</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border bg-card overflow-x-auto">
|
||||
<!-- 表头 -->
|
||||
<div
|
||||
class="flex flex-wrap sm:flex-nowrap items-center gap-x-2 gap-y-1.5 sm:gap-4 px-3 sm:px-4 py-1.5 border-b bg-muted/20 text-xs sm:text-sm text-muted-foreground font-medium min-w-0 sm:min-w-[1000px]">
|
||||
class="flex flex-wrap sm:flex-nowrap items-center gap-x-2 gap-y-2 sm:gap-4 px-3 sm:px-4 py-2 sm:py-1.5 border-b bg-muted/20 text-xs sm:text-sm text-muted-foreground font-medium min-w-0 sm:min-w-[1000px]">
|
||||
<span class="w-10 sm:w-12 shrink-0 max-sm:order-1">ID</span>
|
||||
<span class="w-8 shrink-0 text-center max-sm:order-2">类型</span>
|
||||
<span class="flex-1 min-w-0 sm:flex-none sm:w-40 md:w-48 lg:w-56 shrink-0 max-sm:order-3">名称</span>
|
||||
<span class="w-24 sm:w-32 shrink-0 hidden md:block">执行位置</span>
|
||||
<span class="flex-1 min-w-[120px] max-sm:order-6 block sm:block max-sm:mt-1">命令/地址</span>
|
||||
<span class="w-8 shrink-0 text-center max-sm:order-4 max-sm:ml-auto">状态</span>
|
||||
|
||||
<div class="w-full hidden max-sm:block max-sm:order-5 mt-1 border-t border-muted/10 opacity-50"></div>
|
||||
|
||||
<span class="flex-1 min-w-[120px] max-sm:order-6 block sm:block max-sm:mt-1 flex items-center gap-1.5"><Terminal class="h-3.5 w-3.5 sm:hidden opacity-50"/>命令/地址</span>
|
||||
<span class="w-28 shrink-0 hidden md:block">定时规则</span>
|
||||
<span class="w-40 shrink-0 hidden lg:block">执行时间</span>
|
||||
<span class="w-8 shrink-0 text-center max-sm:order-4 max-sm:ml-auto">状态</span>
|
||||
<span class="w-28 sm:w-32 shrink-0 text-right sm:text-center max-sm:order-7 max-sm:mt-1">操作</span>
|
||||
<div class="w-full hidden max-sm:block max-sm:order-5"></div>
|
||||
</div>
|
||||
<!-- 列表 -->
|
||||
<div class="divide-y min-w-0 sm:min-w-[1000px]">
|
||||
@@ -284,7 +301,7 @@ watch(() => route.query.agent_id, (newVal) => {
|
||||
暂无任务
|
||||
</div>
|
||||
<div v-for="task in tasks" :key="task.id"
|
||||
class="flex flex-wrap sm:flex-nowrap items-center gap-x-2 gap-y-1.5 sm:gap-4 px-3 sm:px-4 py-1.5 hover:bg-muted/30 transition-colors">
|
||||
class="flex flex-wrap sm:flex-nowrap items-center gap-x-2 gap-y-2 sm:gap-4 px-3 sm:px-4 py-2.5 sm:py-1.5 hover:bg-muted/30 transition-colors">
|
||||
<span class="w-10 sm:w-12 shrink-0 text-muted-foreground text-xs sm:text-sm max-sm:order-1">#{{ task.id
|
||||
}}</span>
|
||||
<span class="w-8 shrink-0 flex justify-center max-sm:order-2" :title="getTaskTypeTitle(task.type || 'task')">
|
||||
@@ -343,8 +360,11 @@ watch(() => route.query.agent_id, (newVal) => {
|
||||
<ZapOff class="h-3.5 w-3.5 text-muted-foreground" />
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<div class="w-full hidden max-sm:block max-sm:order-5 -my-0.5"></div>
|
||||
|
||||
<span
|
||||
class="w-28 sm:w-32 shrink-0 flex justify-end sm:justify-center gap-0.5 sm:gap-1 max-sm:order-7 max-sm:mt-1">
|
||||
class="w-auto sm:w-32 shrink-0 flex justify-end sm:justify-center gap-1 max-sm:order-7 max-sm:mt-1">
|
||||
<Button variant="ghost" size="icon" class="h-6 w-6 sm:h-7 sm:w-7" @click="runTask(task.id)" title="执行"
|
||||
:disabled="executingTaskId === task.id">
|
||||
<Loader2 v-if="executingTaskId === task.id" class="h-3 w-3 sm:h-3.5 sm:w-3.5 animate-spin" />
|
||||
@@ -364,7 +384,6 @@ watch(() => route.query.agent_id, (newVal) => {
|
||||
<Trash2 class="h-3 w-3 sm:h-3.5 sm:w-3.5" />
|
||||
</Button>
|
||||
</span>
|
||||
<div class="w-full hidden max-sm:block max-sm:order-5"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
|
||||
Reference in New Issue
Block a user