feat: opt page style

internal/controllers/dashboard_controller.go

@@ -72,11 +72,19 @@ type DailyStats struct {
 	Failed  int    `json:"failed"`
 }
 
-// GetSendStats 获取最近30天发送统计
+// GetSendStats 获取发送统计
 func (dc *DashboardController) GetSendStats(c *gin.Context) {
-	// 获取最近30天的日期范围
+	// 获取天数参数，默认30天
+	days := 30
+	if d := c.Query("days"); d != "" {
+		if parsed, err := utils.ParseInt(d); err == nil && parsed > 0 && parsed <= 90 {
+			days = parsed
+		}
+	}
+
+	// 获取日期范围
 	now := time.Now()
-	startDay := now.AddDate(0, 0, -29).Format("2006-01-02")
+	startDay := now.AddDate(0, 0, -(days - 1)).Format("2006-01-02")
 
 	var stats []models.SendStats
 	database.DB.Where("day >= ?", startDay).Find(&stats)
@@ -97,8 +105,8 @@ func (dc *DashboardController) GetSendStats(c *gin.Context) {
 	}
 
 	// 填充缺失的日期
-	result := make([]DailyStats, 0, 30)
+	result := make([]DailyStats, 0, days)
-	for i := 29; i >= 0; i-- {
+	for i := days - 1; i >= 0; i-- {
 		day := now.AddDate(0, 0, -i).Format("2006-01-02")
 		if ds, ok := dayMap[day]; ok {
 			result = append(result, *ds)
@@ -122,10 +130,18 @@ type TaskStats struct {
 	Count    int    `json:"count"`
 }
 
-// GetTaskStats 获取最近30天任务执行占比
+// GetTaskStats 获取任务执行占比
 func (dc *DashboardController) GetTaskStats(c *gin.Context) {
+	// 获取天数参数，默认30天
+	days := 30
+	if d := c.Query("days"); d != "" {
+		if parsed, err := utils.ParseInt(d); err == nil && parsed > 0 && parsed <= 90 {
+			days = parsed
+		}
+	}
+
 	now := time.Now()
-	startDay := now.AddDate(0, 0, -29).Format("2006-01-02")
+	startDay := now.AddDate(0, 0, -(days - 1)).Format("2006-01-02")
 
 	// 按 task_id 聚合统计
 	var results []struct {

internal/utils/pagination.go

@@ -9,6 +9,11 @@ import (
 	"github.com/gin-gonic/gin"
 )
 
+// ParseInt 解析字符串为整数
+func ParseInt(s string) (int, error) {
+	return strconv.Atoi(s)
+}
+
 // Pagination 分页参数
 type Pagination struct {
 	Page     int

web/src/api/index.ts

@@ -104,8 +104,8 @@ export const api = {
   dashboard: {
     stats: () => request<Stats>('/stats'),
     sentence: () => request<{ sentence: string }>('/sentence'),
-    sendStats: () => request<DailyStats[]>('/sendstats'),
+    sendStats: (days?: number) => request<DailyStats[]>(`/sendstats${days ? `?days=${days}` : ''}`),
-    taskStats: () => request<TaskStatsItem[]>('/taskstats')
+    taskStats: (days?: number) => request<TaskStatsItem[]>(`/taskstats${days ? `?days=${days}` : ''}`)
   },
   settings: {
     changePassword: (data: { old_password: string; new_password: string }) =>

web/src/components/ui/button/index.ts

@@ -17,7 +17,7 @@ export const buttonVariants = cva(
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 active:scale-90 active:bg-primary/20 dark:active:bg-primary/30",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {

web/src/components/ui/dialog/DialogContent.vue

@@ -34,7 +34,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="{ ...$attrs, ...forwarded }"
       :class="
         cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg overflow-y-auto custom-scrollbar',
           props.class,
         )"
     >

web/src/components/ui/dialog/DialogScrollContent.vue

@@ -27,12 +27,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <DialogPortal>
     <DialogOverlay
-      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 py-4 custom-scrollbar data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     >
       <DialogContent
         :class="
           cn(
-            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            'relative z-50 grid w-full max-w-lg max-h-[calc(100vh-2rem)] gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
             props.class,
           )
         "

web/src/views/dashboard/Dashboard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onUnmounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { ListTodo, Variable, Clock, Play, ScrollText } from 'lucide-vue-next'
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
@@ -11,6 +11,12 @@ const stats = ref<Stats>({ tasks: 0, today_execs: 0, envs: 0, logs: 0, scheduled
 const sendStats = ref<DailyStats[]>([])
 const taskStats = ref<TaskStatsItem[]>([])
 const chartsLoaded = ref(false)
+const isMobile = ref(window.innerWidth < 768)
+const chartDays = computed(() => isMobile.value ? 15 : 30)
+
+let lineChart: ApexCharts | null = null
+let pieChart: ApexCharts | null = null
+
 const statItems = [
   { key: 'today_execs', label: '今日执行', icon: Play, route: '/history' },
   { key: 'tasks', label: '任务总数', icon: ListTodo, route: '/tasks' },
@@ -24,6 +30,41 @@ function navigateTo(route?: string) {
   if (route) router.push(route)
 }
 
+function handleResize() {
+  const wasMobile = isMobile.value
+  isMobile.value = window.innerWidth < 768
+  if (wasMobile !== isMobile.value) {
+    reloadCharts()
+  }
+}
+
+async function reloadCharts() {
+  // 销毁旧图表
+  if (lineChart) {
+    lineChart.destroy()
+    lineChart = null
+  }
+  if (pieChart) {
+    pieChart.destroy()
+    pieChart = null
+  }
+  chartsLoaded.value = false
+
+  // 重新获取数据
+  const [sendStatsData, taskStatsData] = await Promise.all([
+    api.dashboard.sendStats(chartDays.value),
+    api.dashboard.taskStats(chartDays.value)
+  ])
+  sendStats.value = sendStatsData
+  taskStats.value = taskStatsData
+
+  setTimeout(() => {
+    renderLineChart()
+    renderPieChart()
+    chartsLoaded.value = true
+  }, 100)
+}
+
 const renderLineChart = () => {
   const options = {
     series: [
@@ -145,7 +186,8 @@ const renderLineChart = () => {
     },
     responsive: [{ breakpoint: 768, options: { chart: { height: 200 }, legend: { position: 'bottom', offsetY: 0 } } }]
   }
-  new ApexCharts(document.querySelector("#stats-chart"), options).render()
+  lineChart = new ApexCharts(document.querySelector("#stats-chart"), options)
+  lineChart.render()
 }
 
 const renderPieChart = () => {
@@ -192,15 +234,17 @@ const renderPieChart = () => {
     },
     responsive: [{ breakpoint: 768, options: { chart: { height: 200 }, legend: { position: 'bottom' } } }]
   }
-  new ApexCharts(document.querySelector("#pie-chart"), options).render()
+  pieChart = new ApexCharts(document.querySelector("#pie-chart"), options)
+  pieChart.render()
 }
 
 onMounted(async () => {
+  window.addEventListener('resize', handleResize)
   try {
     const [statsData, sendStatsData, taskStatsData] = await Promise.all([
       api.dashboard.stats(),
-      api.dashboard.sendStats(),
+      api.dashboard.sendStats(chartDays.value),
-      api.dashboard.taskStats()
+      api.dashboard.taskStats(chartDays.value)
     ])
     stats.value = statsData
     sendStats.value = sendStatsData
@@ -212,6 +256,12 @@ onMounted(async () => {
     }, 100)
   } catch {}
 })
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  if (lineChart) lineChart.destroy()
+  if (pieChart) pieChart.destroy()
+})
 </script>
 
 <template>
@@ -237,7 +287,7 @@ onMounted(async () => {
       <Card class="lg:col-span-7 h-[300px] sm:h-[340px]">
         <CardHeader class="pb-2">
           <CardTitle class="text-base sm:text-lg">执行统计</CardTitle>
-          <CardDescription class="text-xs sm:text-sm">最近30天任务执行情况</CardDescription>
+          <CardDescription class="text-xs sm:text-sm">最近{{ chartDays }}天任务执行情况</CardDescription>
         </CardHeader>
         <CardContent>
           <div id="stats-chart" class="w-full h-[200px] sm:h-[240px]">
@@ -251,7 +301,7 @@ onMounted(async () => {
       <Card class="lg:col-span-3 h-[300px] sm:h-[340px]">
         <CardHeader class="pb-2">
           <CardTitle class="text-base sm:text-lg">任务占比</CardTitle>
-          <CardDescription class="text-xs sm:text-sm">最近30天任务执行分布</CardDescription>
+          <CardDescription class="text-xs sm:text-sm">最近{{ chartDays }}天任务执行分布</CardDescription>
         </CardHeader>
         <CardContent>
           <div id="pie-chart" class="w-full h-[200px] sm:h-[240px]">

web/src/views/history/History.vue

@@ -143,14 +143,22 @@ watch(() => route.query.task_id, (newTaskId) => {
     <div class="flex flex-col lg:flex-row gap-4">
       <!-- 日志列表 -->
       <div class="flex-1 min-w-0 rounded-lg border bg-card overflow-hidden">
-        <!-- 表头 -->
+        <!-- 小屏表头 -->
-        <div class="flex items-center gap-4 px-4 py-2 border-b bg-muted/50 text-sm text-muted-foreground font-medium overflow-x-auto">
+        <div class="flex sm:hidden items-center gap-2 px-3 py-2 border-b bg-muted/50 text-xs text-muted-foreground font-medium">
-          <span class="w-12 shrink-0">ID</span>
+          <span class="w-14 shrink-0">ID</span>
-          <span class="w-8 shrink-0 text-center">类型</span>
+          <span class="w-6 shrink-0 text-center">类型</span>
-          <span class="w-20 sm:w-28 shrink-0">任务名称</span>
+          <span class="flex-1 min-w-0">任务名称</span>
-          <span :class="selectedLog ? 'w-40 shrink-0 hidden sm:block' : 'w-32 sm:flex-1 shrink-0 sm:shrink'">命令</span>
+          <span class="w-8 shrink-0 text-center">状态</span>
+          <span class="w-12 text-right shrink-0">耗时</span>
+        </div>
+        <!-- 大屏表头 -->
+        <div class="hidden sm:flex items-center gap-4 px-4 py-2 border-b bg-muted/50 text-sm text-muted-foreground font-medium">
+          <span class="w-16 shrink-0">ID</span>
+          <span class="w-10 shrink-0 text-center">类型</span>
+          <span class="w-36 shrink-0">任务名称</span>
+          <span class="flex-1 min-w-0">命令</span>
           <span class="w-12 shrink-0 text-center">状态</span>
-          <span class="w-20 text-right shrink-0">耗时</span>
+          <span class="w-16 text-right shrink-0">耗时</span>
           <span v-if="!selectedLog" class="w-40 text-right shrink-0 hidden md:block">执行时间</span>
         </div>
         <!-- 列表 -->
@@ -162,27 +170,41 @@ watch(() => route.query.task_id, (newTaskId) => {
             v-for="log in logs"
             :key="log.id"
             :class="[
-              'flex items-center gap-4 px-4 py-2 min-h-[44px] cursor-pointer hover:bg-muted/50 transition-colors',
+              'cursor-pointer hover:bg-muted/50 transition-colors',
               selectedLog?.id === log.id && 'bg-accent'
             ]"
             @click="selectLog(log)"
           >
-            <span class="w-12 shrink-0 text-muted-foreground text-sm">#{{ log.id }}</span>
+            <!-- 小屏行 -->
-            <span class="w-8 shrink-0 flex justify-center" :title="getTaskTypeTitle(log.task_type || 'task')">
+            <div class="flex sm:hidden items-center gap-2 px-3 py-2">
-              <GitBranch v-if="log.task_type === 'repo'" class="h-4 w-4 text-primary" />
+              <span class="w-14 shrink-0 text-muted-foreground text-xs">#{{ log.id }}</span>
-              <Terminal v-else class="h-4 w-4 text-muted-foreground" />
+              <span class="w-6 shrink-0 flex justify-center" :title="getTaskTypeTitle(log.task_type || 'task')">
-            </span>
+                <GitBranch v-if="log.task_type === 'repo'" class="h-3.5 w-3.5 text-primary" />
-            <span class="w-20 sm:w-28 font-medium truncate shrink-0 text-sm">
+                <Terminal v-else class="h-3.5 w-3.5 text-primary" />
-              <TextOverflow :text="log.task_name" title="任务名称" />
+              </span>
-            </span>
+              <span class="flex-1 min-w-0 font-medium truncate text-xs">{{ log.task_name }}</span>
-            <code :class="['text-muted-foreground truncate text-xs bg-muted px-2 py-1 rounded', selectedLog ? 'w-40 shrink-0 hidden sm:block' : 'w-32 sm:flex-1 shrink-0 sm:shrink']">
+              <span class="w-8 flex justify-center shrink-0">
-              <TextOverflow :text="log.command" title="执行命令" />
+                <span :class="['w-2 h-2 rounded-full', log.status === 'success' ? 'bg-green-500' : log.status === 'failed' ? 'bg-red-500' : 'bg-yellow-500']" />
-            </code>
+              </span>
-            <span class="w-12 flex justify-center shrink-0">
+              <span class="w-12 text-right shrink-0 text-muted-foreground text-xs">{{ formatDuration(log.duration) }}</span>
-              <span :class="['w-2 h-2 rounded-full', log.status === 'success' ? 'bg-green-500' : log.status === 'failed' ? 'bg-red-500' : 'bg-yellow-500']" />
+            </div>
-            </span>
+            <!-- 大屏行 -->
-            <span class="w-20 text-right shrink-0 text-muted-foreground text-xs">{{ formatDuration(log.duration) }}</span>
+            <div class="hidden sm:flex items-center gap-4 px-4 py-2">
-            <span v-if="!selectedLog" class="w-40 text-right shrink-0 text-muted-foreground text-xs hidden md:block">{{ log.created_at }}</span>
+              <span class="w-16 shrink-0 text-muted-foreground text-sm">#{{ log.id }}</span>
+              <span class="w-10 shrink-0 flex justify-center" :title="getTaskTypeTitle(log.task_type || 'task')">
+                <GitBranch v-if="log.task_type === 'repo'" class="h-4 w-4 text-primary" />
+                <Terminal v-else class="h-4 w-4 text-primary" />
+              </span>
+              <span class="w-36 shrink-0 font-medium truncate text-sm">{{ log.task_name }}</span>
+              <code class="flex-1 min-w-0 text-muted-foreground truncate text-xs bg-muted px-2 py-1 rounded">
+                <TextOverflow :text="log.command" title="执行命令" />
+              </code>
+              <span class="w-12 flex justify-center shrink-0">
+                <span :class="['w-2 h-2 rounded-full', log.status === 'success' ? 'bg-green-500' : log.status === 'failed' ? 'bg-red-500' : 'bg-yellow-500']" />
+              </span>
+              <span class="w-16 text-right shrink-0 text-muted-foreground text-xs">{{ formatDuration(log.duration) }}</span>
+              <span v-if="!selectedLog" class="w-40 text-right shrink-0 text-muted-foreground text-xs hidden md:block">{{ log.created_at }}</span>
+            </div>
           </div>
         </div>
         <!-- 分页 -->

web/src/views/tasks/RepoDialog.vue

@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Checkbox } from '@/components/ui/checkbox'
+import DirTreeSelect from '@/components/DirTreeSelect.vue'
+import { api, type Task, type RepoConfig } from '@/api'
+import { toast } from 'vue-sonner'
+
+const props = defineProps<{
+  open: boolean
+  task?: Partial<Task>
+  isEdit: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  'saved': []
+}>()
+
+const cronPresets = [
+  { label: '每5秒', value: '*/5 * * * * *' },
+  { label: '每30秒', value: '*/30 * * * * *' },
+  { label: '每分钟', value: '0 * * * * *' },
+  { label: '每5分钟', value: '0 */5 * * * *' },
+  { label: '每小时', value: '0 0 * * * *' },
+  { label: '每天0点', value: '0 0 0 * * *' },
+  { label: '每天8点', value: '0 0 8 * * *' },
+  { label: '每周一', value: '0 0 0 * * 1' },
+  { label: '每月1号', value: '0 0 0 1 * *' },
+]
+
+const proxyOptions = [
+  { label: '不使用代理', value: 'none' },
+  { label: 'ghproxy.com', value: 'ghproxy' },
+  { label: 'mirror.ghproxy.com', value: 'mirror' },
+  { label: '自定义代理', value: 'custom' },
+]
+
+const form = ref<Partial<Task>>({})
+const repoConfig = ref<RepoConfig>({
+  source_type: 'git',
+  source_url: '',
+  target_path: '',
+  branch: '',
+  sparse_path: '',
+  single_file: false,
+  proxy: 'none',
+  proxy_url: '',
+  auth_token: ''
+})
+const cleanType = ref('none')
+const cleanKeep = ref(30)
+
+const cleanConfig = computed(() => {
+  if (!cleanType.value || cleanType.value === 'none' || cleanKeep.value <= 0) return ''
+  return JSON.stringify({ type: cleanType.value, keep: cleanKeep.value })
+})
+
+watch(() => props.open, (val) => {
+  if (val) {
+    form.value = { ...props.task }
+    // 解析清理配置
+    if (props.task?.clean_config) {
+      try {
+        const config = JSON.parse(props.task.clean_config)
+        cleanType.value = config.type || 'none'
+        cleanKeep.value = config.keep || 30
+      } catch {
+        cleanType.value = 'none'
+        cleanKeep.value = 30
+      }
+    } else {
+      cleanType.value = 'none'
+      cleanKeep.value = 30
+    }
+    // 解析仓库配置
+    if (props.task?.config) {
+      try {
+        repoConfig.value = JSON.parse(props.task.config)
+      } catch {
+        repoConfig.value = { source_type: 'git', source_url: '', target_path: '', branch: '', sparse_path: '', single_file: false, proxy: 'none', proxy_url: '', auth_token: '' }
+      }
+    } else {
+      repoConfig.value = { source_type: 'git', source_url: '', target_path: '', branch: '', sparse_path: '', single_file: false, proxy: 'none', proxy_url: '', auth_token: '' }
+    }
+  }
+})
+
+async function save() {
+  try {
+    form.value.clean_config = cleanConfig.value
+    form.value.type = 'repo'
+    form.value.config = JSON.stringify(repoConfig.value)
+    form.value.command = `[${repoConfig.value.source_type}] ${repoConfig.value.source_url}`
+    if (props.isEdit && form.value.id) {
+      await api.tasks.update(form.value.id, form.value)
+      toast.success('同步任务已更新')
+    } else {
+      await api.tasks.create(form.value)
+      toast.success('同步任务已创建')
+    }
+    emit('update:open', false)
+    emit('saved')
+  } catch { toast.error('保存失败') }
+}
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="emit('update:open', $event)">
+    <DialogContent class="sm:max-w-[480px] max-h-[85vh] flex flex-col !gap-0 !p-0">
+      <DialogHeader class="shrink-0 p-6 pb-0">
+        <DialogTitle>{{ isEdit ? '编辑仓库同步' : '新建仓库同步' }}</DialogTitle>
+      </DialogHeader>
+      <div class="space-y-3 py-3 px-6 overflow-y-auto flex-1 custom-scrollbar">
+        <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
+          <Label class="sm:text-right text-sm">任务名称</Label>
+          <Input v-model="form.name" placeholder="我的仓库同步" class="sm:col-span-3 h-8 text-sm" />
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
+          <Label class="sm:text-right text-sm">源类型</Label>
+          <Select :model-value="repoConfig.source_type" @update:model-value="(v) => repoConfig.source_type = String(v || 'git')">
+            <SelectTrigger class="sm:col-span-3 h-8 text-sm">
+              <SelectValue placeholder="选择源类型" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="git">Git 仓库</SelectItem>
+              <SelectItem value="url">URL 下载</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
+          <Label class="sm:text-right text-sm">源地址</Label>
+          <Input v-model="repoConfig.source_url" :placeholder="repoConfig.source_type === 'git' ? 'https://github.com/user/repo.git' : 'https://example.com/file.js'" class="sm:col-span-3 h-8 text-xs font-mono" />
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
+          <Label class="sm:text-right text-sm">目标路径</Label>
+          <div class="sm:col-span-3">
+            <DirTreeSelect :model-value="repoConfig.target_path || ''" @update:model-value="v => repoConfig.target_path = v" />
+          </div>
+        </div>
+        <div v-if="repoConfig.source_type === 'git'" class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
+          <Label class="sm:text-right text-sm">分支</Label>
+          <Input v-model="repoConfig.branch" placeholder="main (可选)" class="sm:col-span-3 h-8 text-sm" autocomplete="off" />
+        </div>
+        <div v-if="repoConfig.source_type === 'git'" class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
+          <Label class="sm:text-right text-sm">稀疏路径</Label>
+          <Input v-model="repoConfig.sparse_path" placeholder="仅拉取指定目录或文件 (可选)" class="sm:col-span-3 h-8 text-sm" autocomplete="off" />
+        </div>
+        <div v-if="repoConfig.source_type === 'git' && repoConfig.sparse_path" class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
+          <Label class="sm:text-right text-sm">单文件</Label>
+          <div class="sm:col-span-3 flex items-center gap-2">
+            <Checkbox :checked="repoConfig.single_file" @update:checked="(v: boolean) => repoConfig.single_file = v" />
+            <span class="text-xs text-muted-foreground">直接下载文件（适用于单个文件同步）</span>
+          </div>
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
+          <Label class="sm:text-right text-sm">代理</Label>
+          <Select :model-value="repoConfig.proxy" @update:model-value="(v) => repoConfig.proxy = String(v || 'none')">
+            <SelectTrigger class="sm:col-span-3 h-8 text-sm">
+              <SelectValue placeholder="选择代理" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem v-for="opt in proxyOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div v-if="repoConfig.proxy === 'custom'" class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
+          <Label class="sm:text-right text-sm">代理地址</Label>
+          <Input v-model="repoConfig.proxy_url" placeholder="https://your-proxy.com/" class="sm:col-span-3 h-8 text-xs font-mono" autocomplete="off" />
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
+          <Label class="sm:text-right text-sm">认证Token</Label>
+          <Input v-model="repoConfig.auth_token" type="text" placeholder="可选，用于私有仓库" class="sm:col-span-3 h-8 text-sm" autocomplete="new-password" />
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
+          <Label class="sm:text-right text-sm">定时规则</Label>
+          <Input v-model="form.schedule" placeholder="0 0 0 * * *" class="sm:col-span-3 h-8 text-sm font-mono" />
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-4 items-start gap-2 sm:gap-3">
+          <span></span>
+          <div class="sm:col-span-3">
+            <p class="text-xs text-muted-foreground mb-1.5">格式: 秒 分 时 日 月 周</p>
+            <div class="flex flex-wrap gap-1">
+              <span
+                v-for="preset in cronPresets"
+                :key="preset.value"
+                class="px-1.5 py-0.5 text-xs rounded bg-muted hover:bg-accent cursor-pointer transition-colors"
+                @click="form.schedule = preset.value"
+              >
+                {{ preset.label }}
+              </span>
+            </div>
+          </div>
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
+          <Label class="sm:text-right text-sm">超时/清理</Label>
+          <div class="sm:col-span-3 flex flex-wrap items-center gap-3">
+            <div class="flex items-center gap-1.5">
+              <Input v-model.number="form.timeout" type="number" placeholder="30" class="w-16 h-8 text-sm" />
+              <span class="text-xs text-muted-foreground">分钟</span>
+            </div>
+            <div class="flex items-center gap-1.5">
+              <Select :model-value="cleanType" @update:model-value="(v) => cleanType = String(v || 'none')">
+                <SelectTrigger class="w-20 h-8 text-sm">
+                  <SelectValue placeholder="不清理" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">不清理</SelectItem>
+                  <SelectItem value="day">按天数</SelectItem>
+                  <SelectItem value="count">按条数</SelectItem>
+                </SelectContent>
+              </Select>
+              <Input v-if="cleanType && cleanType !== 'none'" v-model.number="cleanKeep" type="number" :placeholder="cleanType === 'day' ? '天' : '条'" class="w-14 h-8 text-sm" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <DialogFooter class="shrink-0 p-6 pt-3 border-t">
+        <Button variant="outline" size="sm" @click="emit('update:open', false)">取消</Button>
+        <Button size="sm" @click="save">保存</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

web/src/views/tasks/TaskDialog.vue

@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Badge } from '@/components/ui/badge'
+import DirTreeSelect from '@/components/DirTreeSelect.vue'
+import { Plus, ChevronDown, X } from 'lucide-vue-next'
+import { api, type Task, type EnvVar } from '@/api'
+import { toast } from 'vue-sonner'
+
+const props = defineProps<{
+  open: boolean
+  task?: Partial<Task>
+  isEdit: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  'saved': []
+}>()
+
+const cronPresets = [
+  { label: '每5秒', value: '*/5 * * * * *' },
+  { label: '每30秒', value: '*/30 * * * * *' },
+  { label: '每分钟', value: '0 * * * * *' },
+  { label: '每5分钟', value: '0 */5 * * * *' },
+  { label: '每小时', value: '0 0 * * * *' },
+  { label: '每天0点', value: '0 0 0 * * *' },
+  { label: '每天8点', value: '0 0 8 * * *' },
+  { label: '每周一', value: '0 0 0 * * 1' },
+  { label: '每月1号', value: '0 0 0 1 * *' },
+]
+
+const form = ref<Partial<Task>>({})
+const cleanType = ref('none')
+const cleanKeep = ref(30)
+const allEnvVars = ref<EnvVar[]>([])
+const selectedEnvIds = ref<number[]>([])
+const envSearchQuery = ref('')
+
+const cleanConfig = computed(() => {
+  if (!cleanType.value || cleanType.value === 'none' || cleanKeep.value <= 0) return ''
+  return JSON.stringify({ type: cleanType.value, keep: cleanKeep.value })
+})
+
+const filteredEnvVars = computed(() => {
+  return allEnvVars.value.filter(env => {
+    const matchSearch = !envSearchQuery.value || env.name.toLowerCase().includes(envSearchQuery.value.toLowerCase())
+    const notSelected = !selectedEnvIds.value.includes(env.id)
+    return matchSearch && notSelected
+  })
+})
+
+const selectedEnvs = computed(() => {
+  return selectedEnvIds.value
+    .map(id => allEnvVars.value.find(e => e.id === id))
+    .filter((e): e is EnvVar => e !== undefined)
+})
+
+watch(() => props.open, async (val) => {
+  if (val) {
+    form.value = { ...props.task }
+    // 解析清理配置
+    if (props.task?.clean_config) {
+      try {
+        const config = JSON.parse(props.task.clean_config)
+        cleanType.value = config.type || 'none'
+        cleanKeep.value = config.keep || 30
+      } catch {
+        cleanType.value = 'none'
+        cleanKeep.value = 30
+      }
+    } else {
+      cleanType.value = 'none'
+      cleanKeep.value = 30
+    }
+    // 解析环境变量
+    if (props.task?.envs) {
+      selectedEnvIds.value = props.task.envs.split(',').map(s => parseInt(s.trim())).filter(n => !isNaN(n))
+    } else {
+      selectedEnvIds.value = []
+    }
+    envSearchQuery.value = ''
+    // 加载环境变量
+    try {
+      allEnvVars.value = await api.env.all()
+    } catch { /* ignore */ }
+  }
+})
+
+function addEnv(id: number) {
+  if (!selectedEnvIds.value.includes(id)) {
+    selectedEnvIds.value.push(id)
+  }
+  envSearchQuery.value = ''
+}
+
+function removeEnv(id: number) {
+  const idx = selectedEnvIds.value.indexOf(id)
+  if (idx !== -1) selectedEnvIds.value.splice(idx, 1)
+}
+
+async function save() {
+  try {
+    form.value.clean_config = cleanConfig.value
+    form.value.envs = selectedEnvIds.value.join(',')
+    form.value.type = 'task'
+    if (props.isEdit && form.value.id) {
+      await api.tasks.update(form.value.id, form.value)
+      toast.success('任务已更新')
+    } else {
+      await api.tasks.create(form.value)
+      toast.success('任务已创建')
+    }
+    emit('update:open', false)
+    emit('saved')
+  } catch { toast.error('保存失败') }
+}
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="emit('update:open', $event)">
+    <DialogContent class="sm:max-w-[480px]">
+      <DialogHeader>
+        <DialogTitle>{{ isEdit ? '编辑任务' : '新建任务' }}</DialogTitle>
+      </DialogHeader>
+      <div class="space-y-3 py-3">
+        <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
+          <Label class="sm:text-right text-sm">任务名称</Label>
+          <Input v-model="form.name" placeholder="我的任务" class="sm:col-span-3 h-8 text-sm" />
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
+          <Label class="sm:text-right text-sm">执行命令</Label>
+          <Input v-model="form.command" placeholder="node script.js" class="sm:col-span-3 h-8 text-sm font-mono" />
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
+          <Label class="sm:text-right text-sm">工作目录</Label>
+          <div class="sm:col-span-3">
+            <DirTreeSelect :model-value="form.work_dir || ''" @update:model-value="v => form.work_dir = v" />
+          </div>
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
+          <Label class="sm:text-right text-sm">定时规则</Label>
+          <Input v-model="form.schedule" placeholder="0 * * * * *" class="sm:col-span-3 h-8 text-sm font-mono" />
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-4 items-start gap-2 sm:gap-3">
+          <span></span>
+          <div class="sm:col-span-3">
+            <p class="text-xs text-muted-foreground mb-1.5">格式: 秒 分 时 日 月 周</p>
+            <div class="flex flex-wrap gap-1">
+              <span
+                v-for="preset in cronPresets"
+                :key="preset.value"
+                class="px-1.5 py-0.5 text-xs rounded bg-muted hover:bg-accent cursor-pointer transition-colors"
+                @click="form.schedule = preset.value"
+              >
+                {{ preset.label }}
+              </span>
+            </div>
+          </div>
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-2 sm:gap-3">
+          <Label class="sm:text-right text-sm">超时/清理</Label>
+          <div class="sm:col-span-3 flex flex-wrap items-center gap-3">
+            <div class="flex items-center gap-1.5">
+              <Input v-model.number="form.timeout" type="number" placeholder="30" class="w-16 h-8 text-sm" />
+              <span class="text-xs text-muted-foreground">分钟</span>
+            </div>
+            <div class="flex items-center gap-1.5">
+              <Select :model-value="cleanType" @update:model-value="(v) => cleanType = String(v || 'none')">
+                <SelectTrigger class="w-20 h-8 text-sm">
+                  <SelectValue placeholder="不清理" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">不清理</SelectItem>
+                  <SelectItem value="day">按天数</SelectItem>
+                  <SelectItem value="count">按条数</SelectItem>
+                </SelectContent>
+              </Select>
+              <Input v-if="cleanType && cleanType !== 'none'" v-model.number="cleanKeep" type="number" :placeholder="cleanType === 'day' ? '天' : '条'" class="w-14 h-8 text-sm" />
+            </div>
+          </div>
+        </div>
+        <div class="grid grid-cols-1 sm:grid-cols-4 items-start gap-2 sm:gap-3">
+          <Label class="sm:text-right text-sm pt-1.5">环境变量</Label>
+          <div class="sm:col-span-3 space-y-1.5">
+            <Popover>
+              <PopoverTrigger as-child>
+                <Button variant="outline" class="w-full justify-between font-normal h-8 text-sm">
+                  <span class="text-muted-foreground text-xs">搜索并添加环境变量...</span>
+                  <ChevronDown class="h-3.5 w-3.5 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent class="w-[260px] p-2" align="start">
+                <Input v-model="envSearchQuery" placeholder="搜索环境变量..." class="mb-2 h-7 text-sm" />
+                <div v-if="filteredEnvVars.length === 0" class="text-xs text-muted-foreground text-center py-2">
+                  {{ allEnvVars.length === 0 ? '暂无环境变量' : '无匹配结果' }}
+                </div>
+                <div v-else class="max-h-[140px] overflow-y-auto space-y-0.5">
+                  <div
+                    v-for="env in filteredEnvVars"
+                    :key="env.id"
+                    class="flex items-center gap-2 px-2 py-1 rounded hover:bg-muted cursor-pointer text-xs"
+                    @click="addEnv(env.id)"
+                  >
+                    <Plus class="h-3 w-3 text-muted-foreground" />
+                    <span class="truncate">{{ env.name }}</span>
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
+            <div v-if="selectedEnvs.length > 0" class="flex flex-wrap gap-1">
+              <Badge v-for="env in selectedEnvs" :key="env.id" variant="secondary" class="gap-0.5 pr-0.5 text-xs h-5">
+                {{ env.name }}
+                <X class="h-2.5 w-2.5 cursor-pointer hover:text-destructive" @click="removeEnv(env.id)" />
+              </Badge>
+            </div>
+          </div>
+        </div>
+      </div>
+      <DialogFooter>
+        <Button variant="outline" size="sm" @click="emit('update:open', false)">取消</Button>
+        <Button size="sm" @click="save">保存</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

web/src/views/tasks/Tasks.vue

@@ -1,18 +1,13 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted } from 'vue'
 import { Button } from '@/components/ui/button'
-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 { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { Badge } from '@/components/ui/badge'
-import { Checkbox } from '@/components/ui/checkbox'
 import Pagination from '@/components/Pagination.vue'
-import DirTreeSelect from '@/components/DirTreeSelect.vue'
+import TaskDialog from './TaskDialog.vue'
-import { Plus, Play, Pencil, Trash2, Search, ScrollText, ChevronDown, X, GitBranch, Terminal } from 'lucide-vue-next'
+import RepoDialog from './RepoDialog.vue'
-import { api, type Task, type EnvVar, type RepoConfig } from '@/api'
+import { Plus, Play, Pencil, Trash2, Search, ScrollText, GitBranch, Terminal } from 'lucide-vue-next'
+import { api, type Task } from '@/api'
 import { toast } from 'vue-sonner'
 import { useSiteSettings } from '@/composables/useSiteSettings'
 import { useRouter } from 'vue-router'
@@ -22,104 +17,18 @@ const router = useRouter()
 const { pageSize } = useSiteSettings()
 
 const tasks = ref<Task[]>([])
-const showDialog = ref(false)
+const showTaskDialog = ref(false)
 const showRepoDialog = ref(false)
 const editingTask = ref<Partial<Task>>({})
 const isEdit = ref(false)
 const showDeleteDialog = ref(false)
 const deleteTaskId = ref<number | null>(null)
 
-// 清理配置
-const cleanType = ref('')
-const cleanKeep = ref(30)
-
-// 仓库同步配置
-const repoConfig = ref<RepoConfig>({
-  source_type: 'git',
-  source_url: '',
-  target_path: '',
-  branch: '',
-  sparse_path: '',
-  single_file: false,
-  proxy: 'none',
-  proxy_url: '',
-  auth_token: ''
-})
-
-// 环境变量
-const allEnvVars = ref<EnvVar[]>([])
-const selectedEnvIds = ref<number[]>([])
-const envSearchQuery = ref('')
-
 const filterName = ref('')
 const currentPage = ref(1)
 const total = ref(0)
 let searchTimer: ReturnType<typeof setTimeout> | null = null
 
-const cronPresets = [
-  { label: '每5秒', value: '*/5 * * * * *' },
-  { label: '每30秒', value: '*/30 * * * * *' },
-  { label: '每分钟', value: '0 * * * * *' },
-  { label: '每5分钟', value: '0 */5 * * * *' },
-  { label: '每小时', value: '0 0 * * * *' },
-  { label: '每天0点', value: '0 0 0 * * *' },
-  { label: '每天8点', value: '0 0 8 * * *' },
-  { label: '每周一', value: '0 0 0 * * 1' },
-  { label: '每月1号', value: '0 0 0 1 * *' },
-]
-
-const proxyOptions = [
-  { label: '不使用代理', value: 'none' },
-  { label: 'ghproxy.com', value: 'ghproxy' },
-  { label: 'mirror.ghproxy.com', value: 'mirror' },
-  { label: '自定义代理', value: 'custom' },
-]
-
-// 计算清理配置 JSON
-const cleanConfig = computed(() => {
-  if (!cleanType.value || cleanType.value === 'none' || cleanKeep.value <= 0) return ''
-  return JSON.stringify({ type: cleanType.value, keep: cleanKeep.value })
-})
-
-// 过滤后的环境变量列表（排除已选中的）
-const filteredEnvVars = computed(() => {
-  return allEnvVars.value.filter(env => {
-    const matchSearch = !envSearchQuery.value || env.name.toLowerCase().includes(envSearchQuery.value.toLowerCase())
-    const notSelected = !selectedEnvIds.value.includes(env.id)
-    return matchSearch && notSelected
-  })
-})
-
-// 已选中的环境变量对象列表
-const selectedEnvs = computed(() => {
-  return selectedEnvIds.value
-    .map(id => allEnvVars.value.find(e => e.id === id))
-    .filter((e): e is EnvVar => e !== undefined)
-})
-
-// 计算 envs 字符串
-const envsString = computed(() => selectedEnvIds.value.join(','))
-
-async function loadEnvVars() {
-  try {
-    allEnvVars.value = await api.env.all()
-  } catch { /* ignore */ }
-}
-
-function addEnv(id: number) {
-  if (!selectedEnvIds.value.includes(id)) {
-    selectedEnvIds.value.push(id)
-  }
-  envSearchQuery.value = ''
-}
-
-function removeEnv(id: number) {
-  const idx = selectedEnvIds.value.indexOf(id)
-  if (idx !== -1) {
-    selectedEnvIds.value.splice(idx, 1)
-  }
-}
-
 async function loadTasks() {
   try {
     const res = await api.tasks.list({ page: currentPage.value, page_size: pageSize.value, name: filterName.value || undefined })
@@ -143,98 +52,26 @@ function handlePageChange(page: number) {
 
 function openCreate() {
   editingTask.value = { name: '', command: '', type: 'task', schedule: '0 * * * * *', timeout: 30, work_dir: '', enabled: true, clean_config: '', envs: '' }
-  cleanType.value = 'none'
-  cleanKeep.value = 30
-  selectedEnvIds.value = []
-  envSearchQuery.value = ''
   isEdit.value = false
-  showDialog.value = true
+  showTaskDialog.value = true
 }
 
 function openCreateRepo() {
   editingTask.value = { name: '', type: 'repo', schedule: '0 0 0 * * *', timeout: 30, enabled: true, clean_config: '', envs: '' }
-  repoConfig.value = { source_type: 'git', source_url: '', target_path: '', branch: '', sparse_path: '', single_file: false, proxy: 'none', proxy_url: '', auth_token: '' }
-  cleanType.value = 'none'
-  cleanKeep.value = 30
   isEdit.value = false
   showRepoDialog.value = true
 }
 
 function openEdit(task: Task) {
   editingTask.value = { ...task }
-  // 解析清理配置
-  if (task.clean_config) {
-    try {
-      const config = JSON.parse(task.clean_config)
-      cleanType.value = config.type || 'none'
-      cleanKeep.value = config.keep || 30
-    } catch {
-      cleanType.value = 'none'
-      cleanKeep.value = 30
-    }
-  } else {
-    cleanType.value = 'none'
-    cleanKeep.value = 30
-  }
-  // 解析环境变量
-  if (task.envs) {
-    selectedEnvIds.value = task.envs.split(',').map(s => parseInt(s.trim())).filter(n => !isNaN(n))
-  } else {
-    selectedEnvIds.value = []
-  }
-  envSearchQuery.value = ''
   isEdit.value = true
-
-  // 根据任务类型打开不同弹窗
   if (task.type === 'repo') {
-    if (task.config) {
-      try {
-        repoConfig.value = JSON.parse(task.config)
-      } catch {
-        repoConfig.value = { source_type: 'git', source_url: '', target_path: '', branch: '', sparse_path: '', single_file: false, proxy: 'none', proxy_url: '', auth_token: '' }
-      }
-    }
     showRepoDialog.value = true
   } else {
-    showDialog.value = true
+    showTaskDialog.value = true
   }
 }
 
-async function saveTask() {
-  try {
-    editingTask.value.clean_config = cleanConfig.value
-    editingTask.value.envs = envsString.value
-    editingTask.value.type = 'task'
-    if (isEdit.value && editingTask.value.id) {
-      await api.tasks.update(editingTask.value.id, editingTask.value)
-      toast.success('任务已更新')
-    } else {
-      await api.tasks.create(editingTask.value)
-      toast.success('任务已创建')
-    }
-    showDialog.value = false
-    loadTasks()
-  } catch { toast.error('保存失败') }
-}
-
-async function saveRepoTask() {
-  try {
-    editingTask.value.clean_config = cleanConfig.value
-    editingTask.value.type = 'repo'
-    editingTask.value.config = JSON.stringify(repoConfig.value)
-    editingTask.value.command = `[${repoConfig.value.source_type}] ${repoConfig.value.source_url}`
-    if (isEdit.value && editingTask.value.id) {
-      await api.tasks.update(editingTask.value.id, editingTask.value)
-      toast.success('同步任务已更新')
-    } else {
-      await api.tasks.create(editingTask.value)
-      toast.success('同步任务已创建')
-    }
-    showRepoDialog.value = false
-    loadTasks()
-  } catch { toast.error('保存失败') }
-}
-
 function confirmDelete(id: number) {
   deleteTaskId.value = id
   showDeleteDialog.value = true
@@ -271,10 +108,7 @@ function getTaskTypeTitle(type: string) {
   return type === 'repo' ? '仓库同步' : '普通任务'
 }
 
-onMounted(() => {
+onMounted(loadTasks)
-  loadTasks()
-  loadEnvVars()
-})
 </script>
 
 <template>
@@ -300,56 +134,54 @@ onMounted(() => {
 
     <div class="rounded-lg border bg-card overflow-x-auto">
       <!-- 表头 -->
-      <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-[700px]">
+      <div class="flex items-center gap-2 sm:gap-4 px-3 sm:px-4 py-2 border-b bg-muted/50 text-xs sm:text-sm text-muted-foreground font-medium min-w-[360px] sm:min-w-[700px]">
-        <span class="w-12 shrink-0">ID</span>
+        <span class="w-12 sm:w-14 shrink-0">ID</span>
-        <span class="w-8 shrink-0 text-center">类型</span>
+        <span class="w-6 sm:w-8 shrink-0 text-center">类型</span>
-        <span class="w-20 sm:w-28 shrink-0">名称</span>
+        <span class="flex-1 min-w-0">名称</span>
-        <span class="w-32 sm:flex-1 shrink-0 sm:shrink">命令/地址</span>
+        <span class="w-32 sm:flex-1 shrink-0 sm:shrink hidden sm:block">命令/地址</span>
         <span class="w-32 shrink-0 hidden md:block">定时规则</span>
         <span class="w-40 shrink-0 hidden lg:block">上次执行</span>
         <span class="w-40 shrink-0 hidden lg:block">下次执行</span>
-        <span class="w-12 shrink-0 text-center">状态</span>
+        <span class="w-8 sm:w-12 shrink-0 text-center">状态</span>
-        <span class="w-36 shrink-0 text-center">操作</span>
+        <span class="w-20 sm:w-36 shrink-0 text-center">操作</span>
       </div>
       <!-- 列表 -->
-      <div class="divide-y min-w-[700px]">
+      <div class="divide-y min-w-[360px] sm:min-w-[700px]">
         <div v-if="tasks.length === 0" class="text-sm text-muted-foreground text-center py-8">
           暂无任务
         </div>
         <div
           v-for="task in tasks"
           :key="task.id"
-          class="flex items-center gap-4 px-4 py-2 hover:bg-muted/50 transition-colors"
+          class="flex items-center gap-2 sm:gap-4 px-3 sm:px-4 py-2 hover:bg-muted/50 transition-colors"
         >
-          <span class="w-12 shrink-0 text-muted-foreground text-sm">#{{ task.id }}</span>
+          <span class="w-12 sm:w-14 shrink-0 text-muted-foreground text-xs sm:text-sm">#{{ task.id }}</span>
-          <span class="w-8 shrink-0 flex justify-center" :title="getTaskTypeTitle(task.type || 'task')">
+          <span class="w-6 sm:w-8 shrink-0 flex justify-center" :title="getTaskTypeTitle(task.type || 'task')">
-            <GitBranch v-if="task.type === 'repo'" class="h-4 w-4 text-primary" />
+            <GitBranch v-if="task.type === 'repo'" class="h-3.5 w-3.5 sm:h-4 sm:w-4 text-primary" />
-            <Terminal v-else class="h-4 w-4 text-muted-foreground" />
+            <Terminal v-else class="h-3.5 w-3.5 sm:h-4 sm:w-4 text-primary" />
           </span>
-          <span class="w-20 sm:w-28 font-medium truncate shrink-0 text-sm">
+          <span class="flex-1 min-w-0 font-medium truncate text-xs sm:text-sm">{{ task.name }}</span>
-            <TextOverflow :text="task.name" title="任务名称" />
+          <code class="w-32 sm:flex-1 shrink-0 sm:shrink text-muted-foreground truncate text-xs bg-muted px-2 py-1 rounded hidden sm:block">
-          </span>
-          <code class="w-32 sm:flex-1 shrink-0 sm:shrink text-muted-foreground truncate text-xs bg-muted px-2 py-1 rounded">
             <TextOverflow :text="task.command" :title="task.type === 'repo' ? '同步地址' : '执行命令'" />
           </code>
           <code class="w-36 shrink-0 text-muted-foreground text-xs bg-muted px-2 py-1 rounded hidden md:block">{{ task.schedule }}</code>
           <span class="w-40 shrink-0 text-muted-foreground text-xs hidden lg:block">{{ task.last_run || '-' }}</span>
           <span class="w-40 shrink-0 text-muted-foreground text-xs hidden lg:block">{{ task.next_run || '-' }}</span>
-          <span class="w-12 flex justify-center shrink-0 cursor-pointer" @click="toggleTask(task, !task.enabled)" :title="task.enabled ? '点击禁用' : '点击启用'">
+          <span class="w-8 sm:w-12 flex justify-center shrink-0 cursor-pointer" @click="toggleTask(task, !task.enabled)" :title="task.enabled ? '点击禁用' : '点击启用'">
             <span :class="['w-2 h-2 rounded-full', task.enabled ? 'bg-green-500' : 'bg-gray-400']" />
           </span>
-          <span class="w-36 shrink-0 flex justify-center gap-1">
+          <span class="w-20 sm:w-36 shrink-0 flex justify-center gap-0.5 sm:gap-1">
-            <Button variant="ghost" size="icon" class="h-7 w-7" @click="runTask(task.id)" title="执行">
+            <Button variant="ghost" size="icon" class="h-6 w-6 sm:h-7 sm:w-7" @click="runTask(task.id)" title="执行">
-              <Play class="h-3.5 w-3.5" />
+              <Play class="h-3 w-3 sm:h-3.5 sm:w-3.5" />
             </Button>
-            <Button variant="ghost" size="icon" class="h-7 w-7" @click="viewLogs(task.id)" title="日志">
+            <Button variant="ghost" size="icon" class="h-6 w-6 sm:h-7 sm:w-7" @click="viewLogs(task.id)" title="日志">
-              <ScrollText class="h-3.5 w-3.5" />
+              <ScrollText class="h-3 w-3 sm:h-3.5 sm:w-3.5" />
             </Button>
-            <Button variant="ghost" size="icon" class="h-7 w-7" @click="openEdit(task)" title="编辑">
+            <Button variant="ghost" size="icon" class="h-6 w-6 sm:h-7 sm:w-7" @click="openEdit(task)" title="编辑">
-              <Pencil class="h-3.5 w-3.5" />
+              <Pencil class="h-3 w-3 sm:h-3.5 sm:w-3.5" />
             </Button>
-            <Button variant="ghost" size="icon" class="h-7 w-7 text-destructive" @click="confirmDelete(task.id)" title="删除">
+            <Button variant="ghost" size="icon" class="h-6 w-6 sm:h-7 sm:w-7 text-destructive" @click="confirmDelete(task.id)" title="删除">
-              <Trash2 class="h-3.5 w-3.5" />
+              <Trash2 class="h-3 w-3 sm:h-3.5 sm:w-3.5" />
             </Button>
           </span>
         </div>
@@ -359,230 +191,12 @@ onMounted(() => {
     </div>
 
     <!-- 普通任务弹窗 -->
-    <Dialog v-model:open="showDialog">
+    <TaskDialog v-model:open="showTaskDialog" :task="editingTask" :is-edit="isEdit" @saved="loadTasks" />
-      <DialogContent class="sm:max-w-[500px]">
-        <DialogHeader>
-          <DialogTitle>{{ isEdit ? '编辑任务' : '新建任务' }}</DialogTitle>
-        </DialogHeader>
-        <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="editingTask.name" placeholder="我的任务" class="col-span-3" />
-          </div>
-          <div class="grid grid-cols-4 items-center gap-4">
-            <Label class="text-right">执行命令</Label>
-            <Input v-model="editingTask.command" placeholder="node script.js" class="col-span-3 font-mono" />
-          </div>
-          <div class="grid grid-cols-4 items-center gap-4">
-            <Label class="text-right">工作目录</Label>
-            <div class="col-span-3">
-              <DirTreeSelect :model-value="editingTask.work_dir || ''" @update:model-value="v => editingTask.work_dir = v" />
-            </div>
-          </div>
-          <div class="grid grid-cols-4 items-center gap-4">
-            <Label class="text-right">定时规则</Label>
-            <Input v-model="editingTask.schedule" placeholder="0 * * * * *" class="col-span-3 font-mono" />
-          </div>
-          <div class="grid grid-cols-4 items-start gap-4">
-            <span></span>
-            <div class="col-span-3">
-              <p class="text-xs text-muted-foreground mb-2">格式: 秒 分 时 日 月 周</p>
-              <div class="flex flex-wrap gap-1.5">
-              <span
-                v-for="preset in cronPresets"
-                :key="preset.value"
-                class="px-2 py-0.5 text-xs rounded-md bg-muted hover:bg-accent cursor-pointer transition-colors"
-                @click="editingTask.schedule = preset.value"
-              >
-                {{ preset.label }}
-              </span>
-              </div>
-            </div>
-          </div>
-          <div class="grid grid-cols-4 items-center gap-4">
-            <Label class="text-right">超时(分钟)</Label>
-            <Input v-model.number="editingTask.timeout" type="number" placeholder="30" class="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 gap-2">
-              <Select :model-value="cleanType" @update:model-value="(v) => cleanType = String(v || 'none')">
-                <SelectTrigger class="w-28">
-                  <SelectValue placeholder="不清理" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="none">不清理</SelectItem>
-                  <SelectItem value="day">按天数</SelectItem>
-                  <SelectItem value="count">按条数</SelectItem>
-                </SelectContent>
-              </Select>
-              <Input v-if="cleanType && cleanType !== 'none'" v-model.number="cleanKeep" type="number" :placeholder="cleanType === 'day' ? '保留天数' : '保留条数'" class="flex-1" />
-            </div>
-          </div>
-          <div class="grid grid-cols-4 items-start gap-4">
-            <Label class="text-right pt-2">环境变量</Label>
-            <div class="col-span-3 space-y-2">
-              <Popover>
-                <PopoverTrigger as-child>
-                  <Button variant="outline" class="w-full justify-between font-normal">
-                    <span class="text-muted-foreground">搜索并添加环境变量...</span>
-                    <ChevronDown class="h-4 w-4 shrink-0 opacity-50" />
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent class="w-[300px] p-2" align="start">
-                  <Input v-model="envSearchQuery" placeholder="搜索环境变量..." class="mb-2 h-8" />
-                  <div v-if="filteredEnvVars.length === 0" class="text-sm text-muted-foreground text-center py-2">
-                    {{ allEnvVars.length === 0 ? '暂无环境变量' : '无匹配结果' }}
-                  </div>
-                  <div v-else class="max-h-[160px] overflow-y-auto space-y-1">
-                    <div
-                      v-for="env in filteredEnvVars"
-                      :key="env.id"
-                      class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-muted cursor-pointer text-sm"
-                      @click="addEnv(env.id)"
-                    >
-                      <Plus class="h-3.5 w-3.5 text-muted-foreground" />
-                      <span class="truncate">{{ env.name }}</span>
-                    </div>
-                  </div>
-                </PopoverContent>
-              </Popover>
-              <div v-if="selectedEnvs.length > 0" class="flex flex-wrap gap-1.5">
-                <Badge
-                  v-for="env in selectedEnvs"
-                  :key="env.id"
-                  variant="secondary"
-                  class="gap-1 pr-1"
-                >
-                  {{ env.name }}
-                  <X class="h-3 w-3 cursor-pointer hover:text-destructive" @click="removeEnv(env.id)" />
-                </Badge>
-              </div>
-            </div>
-          </div>
-        </div>
-        <DialogFooter>
-          <Button variant="outline" @click="showDialog = false">取消</Button>
-          <Button @click="saveTask">保存</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
 
-    <!-- 仓库同步任务弹窗 -->
+    <!-- 仓库同步弹窗 -->
-    <Dialog v-model:open="showRepoDialog">
+    <RepoDialog v-model:open="showRepoDialog" :task="editingTask" :is-edit="isEdit" @saved="loadTasks" />
-      <DialogContent class="sm:max-w-[500px] max-h-[85vh] flex flex-col">
-        <DialogHeader>
-          <DialogTitle>{{ isEdit ? '编辑仓库同步' : '新建仓库同步' }}</DialogTitle>
-        </DialogHeader>
-        <div class="grid gap-4 py-4 overflow-y-auto flex-1 pr-4 custom-scrollbar">
-          <div class="grid grid-cols-4 items-center gap-4">
-            <Label class="text-right text-sm">任务名称</Label>
-            <Input v-model="editingTask.name" placeholder="我的仓库同步" class="col-span-3" />
-          </div>
-          <div class="grid grid-cols-4 items-center gap-4">
-            <Label class="text-right text-sm">源类型</Label>
-            <Select :model-value="repoConfig.source_type" @update:model-value="(v) => repoConfig.source_type = String(v || 'git')">
-              <SelectTrigger class="col-span-3">
-                <SelectValue placeholder="选择源类型" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="git">Git 仓库</SelectItem>
-                <SelectItem value="url">URL 下载</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div class="grid grid-cols-4 items-center gap-4">
-            <Label class="text-right text-sm">源地址</Label>
-            <Input v-model="repoConfig.source_url" :placeholder="repoConfig.source_type === 'git' ? 'https://github.com/user/repo.git' : 'https://example.com/file.js'" class="col-span-3 font-mono text-sm" />
-          </div>
-          <div class="grid grid-cols-4 items-center gap-4">
-            <Label class="text-right text-sm">目标路径</Label>
-            <div class="col-span-3">
-              <DirTreeSelect :model-value="repoConfig.target_path || ''" @update:model-value="v => repoConfig.target_path = v" />
-            </div>
-          </div>
-          <div v-if="repoConfig.source_type === 'git'" class="grid grid-cols-4 items-center gap-4">
-            <Label class="text-right text-sm">分支</Label>
-            <Input v-model="repoConfig.branch" placeholder="main (可选)" class="col-span-3" autocomplete="off" />
-          </div>
-          <div v-if="repoConfig.source_type === 'git'" class="grid grid-cols-4 items-center gap-4">
-            <Label class="text-right text-sm">稀疏路径</Label>
-            <Input v-model="repoConfig.sparse_path" placeholder="仅拉取指定目录或文件 (可选)" class="col-span-3" autocomplete="off" />
-          </div>
-          <div v-if="repoConfig.source_type === 'git' && repoConfig.sparse_path" class="grid grid-cols-4 items-center gap-4">
-            <Label class="text-right text-sm">单文件模式</Label>
-            <div class="col-span-3 flex items-center gap-2">
-              <Checkbox :checked="repoConfig.single_file" @update:checked="(v: boolean) => repoConfig.single_file = v" />
-              <span class="text-sm text-muted-foreground">直接下载文件（适用于单个文件同步）</span>
-            </div>
-          </div>
-          <div class="grid grid-cols-4 items-center gap-4">
-            <Label class="text-right text-sm">代理</Label>
-            <Select :model-value="repoConfig.proxy" @update:model-value="(v) => repoConfig.proxy = String(v || 'none')">
-              <SelectTrigger class="col-span-3">
-                <SelectValue placeholder="选择代理" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem v-for="opt in proxyOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div v-if="repoConfig.proxy === 'custom'" class="grid grid-cols-4 items-center gap-4">
-            <Label class="text-right text-sm">代理地址</Label>
-            <Input v-model="repoConfig.proxy_url" placeholder="https://your-proxy.com/" class="col-span-3 font-mono text-sm" autocomplete="off" />
-          </div>
-          <div class="grid grid-cols-4 items-center gap-4">
-            <Label class="text-right text-sm">认证Token</Label>
-            <Input v-model="repoConfig.auth_token" type="text" placeholder="可选，用于私有仓库" class="col-span-3" autocomplete="new-password" />
-          </div>
-          <div class="grid grid-cols-4 items-center gap-4">
-            <Label class="text-right text-sm">定时规则</Label>
-            <Input v-model="editingTask.schedule" placeholder="0 0 0 * * *" class="col-span-3 font-mono text-sm" />
-          </div>
-          <div class="grid grid-cols-4 items-start gap-4">
-            <span></span>
-            <div class="col-span-3">
-              <p class="text-xs text-muted-foreground mb-2">格式: 秒 分 时 日 月 周</p>
-              <div class="flex flex-wrap gap-1.5">
-                <span
-                  v-for="preset in cronPresets"
-                  :key="preset.value"
-                  class="px-2 py-0.5 text-xs rounded-md bg-muted hover:bg-accent cursor-pointer transition-colors"
-                  @click="editingTask.schedule = preset.value"
-                >
-                  {{ preset.label }}
-                </span>
-              </div>
-            </div>
-          </div>
-          <div class="grid grid-cols-4 items-center gap-4">
-            <Label class="text-right text-sm">超时(分钟)</Label>
-            <Input v-model.number="editingTask.timeout" type="number" placeholder="30" class="col-span-3" />
-          </div>
-          <div class="grid grid-cols-4 items-center gap-4">
-            <Label class="text-right text-sm">日志清理</Label>
-            <div class="col-span-3 flex gap-2">
-              <Select :model-value="cleanType" @update:model-value="(v) => cleanType = String(v || 'none')">
-                <SelectTrigger class="w-28">
-                  <SelectValue placeholder="不清理" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="none">不清理</SelectItem>
-                  <SelectItem value="day">按天数</SelectItem>
-                  <SelectItem value="count">按条数</SelectItem>
-                </SelectContent>
-              </Select>
-              <Input v-if="cleanType && cleanType !== 'none'" v-model.number="cleanKeep" type="number" :placeholder="cleanType === 'day' ? '保留天数' : '保留条数'" class="flex-1" />
-            </div>
-          </div>
-        </div>
-        <DialogFooter class="pt-4 border-t">
-          <Button variant="outline" @click="showRepoDialog = false">取消</Button>
-          <Button @click="saveRepoTask">保存</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
 
+    <!-- 删除确认 -->
     <AlertDialog v-model:open="showDeleteDialog">
       <AlertDialogContent>
         <AlertDialogHeader>