X-Agents/web/src/views/Plan.vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { Play, Pause, Edit, Trash2, Plus, Search, Clock } from 'lucide-vue-next'

// Mock scheduled tasks data
const tasks = ref([
  {
    id: 1,
    name: 'Human-like Heartbeat',
    status: 'running',
    triggerType: 'Interval 30 minutes',
    nextRun: '2026/03/10 16:26',
    lastRun: '2026/03/10 15:56',
    notifyChannel: '-',
    executionCount: 13,
    description: 'Check if proactive messages need to be sent (greetings/reminders/follow-ups)',
    tags: ['System Task', 'Agent Task', 'Interval']
  },
  {
    id: 2,
    name: 'Memory Organization',
    status: 'running',
    triggerType: 'Interval 3 hours',
    nextRun: '2026/03/10 18:35',
    lastRun: '2026/03/10 15:35',
    notifyChannel: '-',
    executionCount: 2,
    description: 'Execute memory organization: organize chat history, extract key memories, refresh MEMORY.md',
    tags: ['System Task', 'Agent Task', 'Interval']
  },
  {
    id: 3,
    name: 'System Self-Check',
    status: 'running',
    triggerType: 'Daily 04:00',
    nextRun: '2026/03/11 04:00',
    lastRun: 'Never',
    notifyChannel: '-',
    executionCount: 0,
    description: 'Execute system self-check: analyze ERROR logs, try to fix tool issues, generate report',
    tags: ['System Task', 'Agent Task', 'Daily']
  },
])

const filterStatus = ref('all') // running, stopped, all
const searchQuery = ref('')

const filteredTasks = computed(() => {
  let result = tasks.value
  if (filterStatus.value !== 'all') {
    result = result.filter(t => t.status === filterStatus.value)
  }
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(t =>
      t.name.toLowerCase().includes(query) ||
      t.description.toLowerCase().includes(query)
    )
  }
  return result
})

const getTaskCount = (status: string) => {
  if (status === 'running') return tasks.value.filter(t => t.status === 'running').length
  if (status === 'stopped') return tasks.value.filter(t => t.status === 'stopped').length
  return tasks.value.length
}
</script>

<template>
  <div class="p-6 min-h-screen plan-page">
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
      <div class="flex items-center gap-2">
        <Clock class="w-5 h-5 text-orange-500" />
        <span class="font-medium">Scheduled Tasks</span>
      </div>
      <button class="flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-orange-500 to-amber-500 text-white text-sm font-medium hover:from-orange-400 hover:to-amber-400 transition-all">
        <Plus class="w-4 h-4" />
        New Task
      </button>
    </div>

    <!-- Search -->
    <div class="flex gap-4 mb-6">
      <div class="flex-1 relative">
        <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
        <input
          v-model="searchQuery"
          type="text"
          placeholder="Search tasks..."
          class="search-input w-full"
        >
      </div>
      <el-select v-model="filterStatus" placeholder="Select" class="w-40" size="large">
        <el-option label="All Status" value="all" />
        <el-option label="Running" value="running" />
        <el-option label="Stopped" value="stopped" />
      </el-select>
    </div>

    <!-- Task List Table -->
    <div class="bg-dark-700 rounded-xl overflow-hidden shadow-lg">
      <div v-if="filteredTasks.length === 0" class="empty-box">
        <div class="empty-icon">
          <Clock class="w-12 h-12" />
        </div>
        <p class="empty-text">No tasks found</p>
        <p class="empty-tip">Click "New Task" to add a task</p>
      </div>
      <table v-else class="w-full">
        <thead class="bg-dark-600">
          <tr>
            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400 w-1/3">Task Name</th>
            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Status</th>
            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Trigger</th>
            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Next Run</th>
            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Executions</th>
            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="task in filteredTasks" :key="task.id" class="table-row">
            <td class="px-5 py-4">
              <div class="flex gap-3">
                <div class="w-10 h-10 rounded-lg bg-orange-500/20 flex items-center justify-center flex-shrink-0 self-center">
                  <Clock class="w-5 h-5 text-orange-400" />
                </div>
                <div class="min-w-0 self-center">
                  <div class="font-medium">{{ task.name }}</div>
                  <div class="text-sm text-gray-500 line-clamp-2 mt-0.5">{{ task.description }}</div>
                </div>
              </div>
              <div class="flex gap-2 mt-2 ml-13">
                <span v-for="tag in task.tags" :key="tag" class="task-tag">{{ tag }}</span>
              </div>
            </td>
            <td class="px-5 py-4 text-center">
              <span class="inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs" :class="task.status === 'running' ? 'bg-green-500/20 text-green-400' : 'bg-gray-500/20 text-gray-400'">
                <span class="w-1.5 h-1.5 rounded-full" :class="task.status === 'running' ? 'bg-green-500' : 'bg-gray-400'"></span>
                <span class="capitalize">{{ task.status === 'running' ? 'Running' : 'Stopped' }}</span>
              </span>
            </td>
            <td class="px-5 py-4 text-center text-gray-400 text-sm">
              {{ task.triggerType }}
            </td>
            <td class="px-5 py-4 text-center text-gray-400 text-sm">
              {{ task.nextRun }}
            </td>
            <td class="px-5 py-4 text-center">
              <span class="text-primary-cyan">{{ task.executionCount }}</span>
            </td>
            <td class="px-5 py-4">
              <div class="flex items-center justify-center gap-2">
                <button class="btn-icon" title="Pause">
                  <Pause v-if="task.status === 'running'" class="w-4 h-4 text-gray-400 hover:text-yellow-400" />
                  <Play v-else class="w-4 h-4 text-gray-400 hover:text-green-400" />
                </button>
                <button class="btn-icon" title="Edit">
                  <Edit class="w-4 h-4 text-gray-400 hover:text-white" />
                </button>
                <button class="btn-icon" title="Delete">
                  <Trash2 class="w-4 h-4 text-gray-400 hover:text-red-400" />
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style scoped>
.plan-page {
  background-color: #0f1419;
}

.search-input {
  background-color: #1f2937;
  border: 1px solid #374151;
  border-radius: 8px;
  padding: 10px 12px 10px 36px;
  color: white;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.search-input:focus {
  border-color: #f97316;
}

.search-input::placeholder {
  color: #6b7280;
}

.table-row {
  border-top: 1px solid #2a2a3a;
  transition: background-color 0.2s;
}

.table-row:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

.task-tag {
  background-color: #374151;
  color: #d1d5db;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
}

.ml-13 {
  margin-left: 3.25rem;
}

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.btn-icon:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* 空状态样式 */
.empty-box {
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-icon {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1f2937, #111827);
  border-radius: 24px;
  margin-bottom: 20px;
}

.empty-icon i {
  font-size: 40px;
  color: #6b7280;
}

.empty-text {
  color: #d1d5db;
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 8px;
}

.empty-tip {
  color: #6b7280;
  font-size: 0.875rem;
}
</style>