102 lines
6.9 KiB
HTML
102 lines
6.9 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}计划任务 - GEMINI BALANCER{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="w-full h-full flex flex-col pl-0 pr-3 lg:px-0" data-page-id="tasks">
|
|
<!-- =================================================================== -->
|
|
<!-- 1. 页面顶栏：标题与全局控制器 -->
|
|
<!-- =================================================================== -->
|
|
<div class="flex items-center justify-between mb-6 shrink-0">
|
|
<div>
|
|
<h2 class="text-3xl font-bold tracking-tight">计划任务</h2>
|
|
<p class="text-sm text-zinc-500 dark:text-zinc-400 mt-1">管理和监控所有周期性系统任务。</p>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<button class="btn btn-primary">
|
|
<i class="fas fa-plus mr-2 h-4 w-4"></i>
|
|
新建任务
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- =================================================================== -->
|
|
<!-- 2. 主内容区：任务列表 -->
|
|
<!-- =================================================================== -->
|
|
<div class="rounded-lg border border-border flex-grow overflow-hidden flex flex-col">
|
|
<!-- 容器需要 overflow-auto 以便表格内容超出时滚动 -->
|
|
<div class="relative w-full overflow-auto flex-grow main-content-scroll">
|
|
<table class="w-full caption-bottom text-sm">
|
|
<thead class="[&_tr]:border-b border-b-border sticky top-0 bg-muted/50 dark:bg-muted/50 z-10">
|
|
<tr class="transition-colors hover:bg-muted/80 dark:hover:bg-muted/80">
|
|
<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground w-24">状态</th>
|
|
<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">任务名称</th>
|
|
<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">CRON 表达式</th>
|
|
<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">上次运行</th>
|
|
<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground">下次运行</th>
|
|
<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground w-32">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="[&_tr:last-child]:border-0">
|
|
<!-- 示例任务 1: 运行中 -->
|
|
<tr class="border-b border-b-border transition-colors hover:bg-muted/80 dark:hover:bg-muted/80">
|
|
<td class="p-4 align-middle">
|
|
<div class="inline-flex items-center gap-2">
|
|
<span class="relative flex h-3 w-3">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
|
|
</span>
|
|
<span class="text-foreground">运行中</span>
|
|
</div>
|
|
</td>
|
|
<td class="p-4 align-middle font-medium">密钥可用性检查</td>
|
|
<td class="p-4 align-middle font-mono text-muted-foreground">0 */1 * * *</td>
|
|
<td class="p-4 align-middle text-muted-foreground">2024-05-21 10:30:00</td>
|
|
<td class="p-4 align-middle text-muted-foreground">2024-05-21 11:30:00</td>
|
|
<td class="p-4 align-middle space-x-2">
|
|
<button class="btn btn-ghost btn-icon btn-sm" aria-label="立即运行"><i class="fas fa-play"></i></button>
|
|
<button class="btn btn-ghost btn-icon btn-sm" aria-label="编辑任务"><i class="fas fa-pencil-alt"></i></button>
|
|
</td>
|
|
</tr>
|
|
<!-- 示例任务 2: 已暂停 -->
|
|
<tr class="border-b border-b-border transition-colors hover:bg-muted/80 dark:hover:bg-muted/80">
|
|
<td class="p-4 align-middle">
|
|
<div class="inline-flex items-center gap-2">
|
|
<span class="relative flex h-3 w-3"><span class="relative inline-flex rounded-full h-3 w-3 bg-yellow-500"></span></span>
|
|
<span class="text-foreground">已暂停</span>
|
|
</div>
|
|
</td>
|
|
<td class="p-4 align-middle font-medium">清理过期日志</td>
|
|
<td class="p-4 align-middle font-mono text-muted-foreground">0 1 * * *</td>
|
|
<td class="p-4 align-middle text-muted-foreground">2024-05-20 01:00:00</td>
|
|
<td class="p-4 align-middle text-muted-foreground">N/A</td>
|
|
<td class="p-4 align-middle space-x-2">
|
|
<button class="btn btn-ghost btn-icon btn-sm" aria-label="立即运行"><i class="fas fa-play"></i></button>
|
|
<button class="btn btn-ghost btn-icon btn-sm" aria-label="编辑任务"><i class="fas fa-pencil-alt"></i></button>
|
|
</td>
|
|
</tr>
|
|
<!-- 示例任务 3: 失败 -->
|
|
<tr class="border-b border-b-border transition-colors hover:bg-muted/80 dark:hover:bg-muted/80">
|
|
<td class="p-4 align-middle">
|
|
<div class="inline-flex items-center gap-2">
|
|
<span class="relative flex h-3 w-3"><span class="relative inline-flex rounded-full h-3 w-3 bg-destructive"></span></span>
|
|
<span class="text-destructive">失败</span>
|
|
</div>
|
|
</td>
|
|
<td class="p-4 align-middle font-medium">同步外部数据源</td>
|
|
<td class="p-4 align-middle font-mono text-muted-foreground">*/30 * * * *</td>
|
|
<td class="p-4 align-middle text-muted-foreground">2024-05-21 10:00:00 (错误)</td>
|
|
<td class="p-4 align-middle text-muted-foreground">2024-05-21 10:30:00</td>
|
|
<td class="p-4 align-middle space-x-2">
|
|
<button class="btn btn-ghost btn-icon btn-sm" aria-label="查看日志"><i class="fas fa-file-alt"></i></button>
|
|
<button class="btn btn-ghost btn-icon btn-sm" aria-label="编辑任务"><i class="fas fa-pencil-alt"></i></button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block page_scripts %}
|
|
{% endblock page_scripts %} |