feat: adapt mobile phone style

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
+1 -1
View File
@@ -26,7 +26,7 @@ onMounted(loadAbout)
<p class="text-sm text-muted-foreground">一个轻量级的定时任务管理系统支持脚本管理定时执行和日志追踪</p>
</div>
<div class="grid md:grid-cols-2 gap-x-8 gap-y-5">
<div class="grid sm:grid-cols-2 gap-x-8 gap-y-5">
<!-- 左侧技术栈和功能特性 -->
<div class="space-y-5">
<div>
+3 -3
View File
@@ -90,12 +90,12 @@ onMounted(checkBackupStatus)
<template>
<div class="space-y-4">
<div class="flex items-center gap-4">
<Button @click="createBackup" :disabled="backupLoading" variant="outline">
<div class="flex flex-wrap items-center gap-3">
<Button @click="createBackup" :disabled="backupLoading" variant="outline" class="shrink-0">
<Archive class="w-4 h-4 mr-2" />
{{ backupLoading ? '备份中...' : '创建备份' }}
</Button>
<Button v-if="hasBackup" @click="downloadBackup" variant="outline">
<Button v-if="hasBackup" @click="downloadBackup" variant="outline" class="shrink-0">
<Download class="w-4 h-4 mr-2" />
下载备份
</Button>
+9 -9
View File
@@ -37,17 +37,17 @@ async function changePassword() {
<template>
<div class="space-y-4">
<div class="grid grid-cols-4 items-center gap-4">
<Label class="text-right">原密码</Label>
<Input v-model="oldPassword" type="password" placeholder="请输入原密码" class="col-span-3" />
<div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-4">
<Label class="sm:text-right">原密码</Label>
<Input v-model="oldPassword" type="password" placeholder="请输入原密码" class="sm:col-span-3" />
</div>
<div class="grid grid-cols-4 items-center gap-4">
<Label class="text-right">新密码</Label>
<Input v-model="newPassword" type="password" placeholder="请输入新密码(至少6位)" class="col-span-3" />
<div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-4">
<Label class="sm:text-right">新密码</Label>
<Input v-model="newPassword" type="password" placeholder="请输入新密码(至少6位)" class="sm:col-span-3" />
</div>
<div class="grid grid-cols-4 items-center gap-4">
<Label class="text-right">确认密码</Label>
<Input v-model="confirmPassword" type="password" placeholder="请再次输入新密码" class="col-span-3" />
<div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-4">
<Label class="sm:text-right">确认密码</Label>
<Input v-model="confirmPassword" type="password" placeholder="请再次输入新密码" class="sm:col-span-3" />
</div>
<div class="flex justify-end pt-2">
<Button @click="changePassword">修改密码</Button>
+12 -12
View File
@@ -63,25 +63,25 @@ onMounted(loadSettings)
<template>
<div class="space-y-4">
<div class="grid grid-cols-4 items-center gap-4">
<Label class="text-right">Worker 数量</Label>
<div class="col-span-3 flex items-center gap-2">
<div class="grid grid-cols-1 sm:grid-cols-4 items-start gap-2 sm:gap-4">
<Label class="sm:text-right pt-2">Worker数</Label>
<div class="sm:col-span-3 space-y-1">
<Input v-model="form.worker_count" type="number" class="w-24" />
<span class="text-xs text-muted-foreground">并发执行任务的 worker 数量</span>
<span class="text-xs text-muted-foreground block">并发执行任务的 worker 数量</span>
</div>
</div>
<div class="grid grid-cols-4 items-center gap-4">
<Label class="text-right">队列大小</Label>
<div class="col-span-3 flex items-center gap-2">
<div class="grid grid-cols-1 sm:grid-cols-4 items-start gap-2 sm:gap-4">
<Label class="sm:text-right pt-2">队列大小</Label>
<div class="sm:col-span-3 space-y-1">
<Input v-model="form.queue_size" type="number" class="w-24" />
<span class="text-xs text-muted-foreground">任务队列缓冲区大小</span>
<span class="text-xs text-muted-foreground block">任务队列缓冲区大小</span>
</div>
</div>
<div class="grid grid-cols-4 items-center gap-4">
<Label class="text-right">速率间隔</Label>
<div class="col-span-3 flex items-center gap-2">
<div class="grid grid-cols-1 sm:grid-cols-4 items-start gap-2 sm:gap-4">
<Label class="sm:text-right pt-2">速率间隔</Label>
<div class="sm:col-span-3 space-y-1">
<Input v-model="form.rate_interval" type="number" class="w-24" />
<span class="text-xs text-muted-foreground">ms任务启动间隔200ms = 每秒最多5个</span>
<span class="text-xs text-muted-foreground block">ms任务启动间隔200ms = 每秒最多5个</span>
</div>
</div>
<div class="flex justify-end pt-2">
+8 -8
View File
@@ -14,17 +14,17 @@ const activeTab = ref('password')
<template>
<div class="space-y-6">
<div>
<h2 class="text-2xl font-bold tracking-tight">系统设置</h2>
<p class="text-muted-foreground">管理系统配置和账户安全</p>
<h2 class="text-xl sm:text-2xl font-bold tracking-tight">系统设置</h2>
<p class="text-muted-foreground text-sm">管理系统配置和账户安全</p>
</div>
<Tabs v-model="activeTab" class="w-full">
<TabsList>
<TabsTrigger value="password">密码修改</TabsTrigger>
<TabsTrigger value="site">站点设置</TabsTrigger>
<TabsTrigger value="scheduler">调度设置</TabsTrigger>
<TabsTrigger value="backup">备份恢复</TabsTrigger>
<TabsTrigger value="about">关于</TabsTrigger>
<TabsList class="flex-wrap h-auto gap-1">
<TabsTrigger value="password" class="text-xs sm:text-sm">密码修改</TabsTrigger>
<TabsTrigger value="site" class="text-xs sm:text-sm">站点设置</TabsTrigger>
<TabsTrigger value="scheduler" class="text-xs sm:text-sm">调度设置</TabsTrigger>
<TabsTrigger value="backup" class="text-xs sm:text-sm">备份恢复</TabsTrigger>
<TabsTrigger value="about" class="text-xs sm:text-sm">关于</TabsTrigger>
</TabsList>
<TabsContent value="password" class="mt-6">
+12 -12
View File
@@ -56,24 +56,24 @@ onMounted(loadSettings)
<template>
<div class="space-y-4">
<div class="grid grid-cols-4 items-center gap-4">
<Label class="text-right">站点标题</Label>
<Input v-model="form.title" placeholder="白虎面板" class="col-span-3" />
<div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-4">
<Label class="sm:text-right">站点标题</Label>
<Input v-model="form.title" placeholder="白虎面板" class="sm:col-span-3" />
</div>
<div class="grid grid-cols-4 items-center gap-4">
<Label class="text-right">站点标语</Label>
<Input v-model="form.subtitle" placeholder="轻量级定时任务管理系统" class="col-span-3" />
<div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-4">
<Label class="sm:text-right">站点标语</Label>
<Input v-model="form.subtitle" placeholder="轻量级定时任务管理系统" class="sm:col-span-3" />
</div>
<div class="grid grid-cols-4 items-center gap-4">
<Label class="text-right">站点图标</Label>
<div class="col-span-3 flex items-center gap-2">
<div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-4">
<Label class="sm:text-right">站点图标</Label>
<div class="sm:col-span-3 flex items-center gap-2">
<Input v-model="form.icon" placeholder="<svg>...</svg>" class="flex-1 font-mono text-xs" />
<div v-if="iconPreview" class="p-1.5 border rounded bg-white dark:bg-white w-8 h-8 flex items-center justify-center shrink-0 [&>svg]:w-5 [&>svg]:h-5" v-html="iconPreview" />
</div>
</div>
<div class="grid grid-cols-4 items-center gap-4">
<Label class="text-right">分页/Cookie</Label>
<div class="col-span-3 flex items-center gap-4">
<div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-4">
<Label class="sm:text-right">分页/Cookie</Label>
<div class="sm:col-span-3 flex flex-wrap items-center gap-4">
<div class="flex items-center gap-2">
<Input v-model="form.page_size" type="number" class="w-20" />
<span class="text-sm text-muted-foreground">/</span>