XinXiKuaiBaoYuan/vue-info-reporter/src/views/Tasks.vue

<template>
  <div class="flex-1 flex flex-col min-h-0">
    <!-- 顶部导航栏 -->
    <header class="bg-white border-b border-gray-200 px-6 py-4">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-4">
          <button
            @click="toggleMobileSidebar"
            class="lg:hidden p-2 rounded-md hover:bg-gray-100"
          >
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
          </button>
          
          <div>
            <h1 class="text-2xl font-bold text-gray-900">任务管理</h1>
            <p class="text-sm text-gray-600">管理和监控所有信息采集任务</p>
          </div>
        </div>
        
        <button class="bg-primary-600 text-white px-4 py-2 rounded-lg hover:bg-primary-700 transition-colors">
          新建任务
        </button>
      </div>
    </header>

    <!-- 主内容区域 -->
    <main class="flex-1 p-6 overflow-auto">
      <!-- 任务统计 -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm font-medium text-gray-600">总任务数</p>
              <p class="text-3xl font-bold text-gray-900">{{ tasks.length }}</p>
            </div>
            <TasksIcon class="w-8 h-8 text-gray-400" />
          </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm font-medium text-gray-600">运行中</p>
              <p class="text-3xl font-bold text-green-600">{{ runningTasks.length }}</p>
            </div>
            <div class="w-8 h-8 bg-green-500 rounded-full animate-pulse"></div>
          </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm font-medium text-gray-600">已完成</p>
              <p class="text-3xl font-bold text-blue-600">{{ completedTasks.length }}</p>
            </div>
            <svg class="w-8 h-8 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm font-medium text-gray-600">异常任务</p>
              <p class="text-3xl font-bold text-red-600">{{ errorTasks.length }}</p>
            </div>
            <svg class="w-8 h-8 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
            </svg>
          </div>
        </div>
      </div>

      <!-- 任务列表 -->
      <div class="bg-white rounded-lg shadow-sm border border-gray-200">
        <div class="p-6 border-b border-gray-200">
          <div class="flex items-center justify-between">
            <h2 class="text-lg font-semibold text-gray-900">任务列表</h2>
            <div class="flex items-center gap-4">
              <!-- 筛选器 -->
              <select
                v-model="statusFilter"
                class="border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
              >
                <option value="">所有状态</option>
                <option value="running">运行中</option>
                <option value="paused">暂停</option>
                <option value="completed">已完成</option>
                <option value="error">异常</option>
              </select>
              
              <!-- 搜索框 -->
              <div class="relative">
                <input
                  v-model="searchQuery"
                  type="text"
                  placeholder="搜索任务..."
                  class="border border-gray-300 rounded-md px-3 py-1 pl-8 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                >
                <svg class="w-4 h-4 text-gray-400 absolute left-2 top-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
              </div>
            </div>
          </div>
        </div>
        
        <div class="p-6">
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <TaskCard
              v-for="task in filteredTasks"
              :key="task.id"
              :task="task"
              @click="selectTask(task.id)"
            />
          </div>
          
          <!-- 空状态 -->
          <div v-if="filteredTasks.length === 0" class="text-center py-12">
            <svg class="w-16 h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 0 1 2-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
            <h3 class="text-lg font-medium text-gray-900 mb-2">没有找到任务</h3>
            <p class="text-gray-600">尝试调整搜索条件或创建新任务</p>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/stores/app'
import TaskCard from '@/components/TaskCard.vue'
import TasksIcon from '@/components/icons/TasksIcon.vue'

const appStore = useAppStore()
const { tasks, runningTasks, completedTasks } = storeToRefs(appStore)
const { toggleMobileSidebar, selectTask } = appStore

const statusFilter = ref('')
const searchQuery = ref('')

const errorTasks = computed(() => tasks.value.filter(t => t.status === 'error'))

const filteredTasks = computed(() => {
  let filtered = tasks.value

  // 状态筛选
  if (statusFilter.value) {
    filtered = filtered.filter(task => task.status === statusFilter.value)
  }

  // 搜索筛选
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    filtered = filtered.filter(task =>
      task.title.toLowerCase().includes(query) ||
      (task.description && task.description.toLowerCase().includes(query))
    )
  }

  return filtered
})
</script>