bot_ym
/
water-management-system


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>任务追踪</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen">
  <nav class="bg-purple-600 text-white shadow-lg">
    <div class="container mx-auto px-4 py-4">
      <div class="flex justify-between items-center">
        <div class="flex items-center space-x-3"><span class="text-2xl">🤝</span><h1 class="text-xl font-bold">远程团队协作工具</h1></div>
        <div class="flex space-x-4">
          <a href="/" class="hover:bg-purple-500 px-3 py-2 rounded">首页</a>
          <a href="/documents" class="hover:bg-purple-500 px-3 py-2 rounded">文档</a>
          <a href="/tasks" class="bg-purple-500 px-3 py-2 rounded">任务</a>
        </div>
      </div>
    </div>
  </nav>
  <main class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-8">
      <div><h2 class="text-3xl font-bold text-gray-800">✅ 任务追踪</h2><p class="text-gray-600 mt-2">异步任务管理和进度跟踪</p></div>
      <button onclick="createTask()" class="bg-green-600 text-white px-6 py-3 rounded-lg">➕ 创建任务</button>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
      <div><h3 class="font-bold mb-3 text-gray-700">📋 待办</h3><div id="todoList" class="space-y-3"></div></div>
      <div><h3 class="font-bold mb-3 text-gray-700">⏳ 进行中</h3><div id="inProgressList" class="space-y-3"></div></div>
      <div><h3 class="font-bold mb-3 text-gray-700">✅ 已完成</h3><div id="doneList" class="space-y-3"></div></div>
    </div>
  </main>
  <script>
    async function loadTasks() {
      const res = await fetch('/api/tasks');
      const data = await res.json();
      if (data.success) {
        const todo = data.data.filter(t => t.status === 'todo');
        const progress = data.data.filter(t => t.status === 'in_progress');
        const done = data.data.filter(t => t.status === 'done');
        document.getElementById('todoList').innerHTML = renderTasks(todo);
        document.getElementById('inProgressList').innerHTML = renderTasks(progress);
        document.getElementById('doneList').innerHTML = renderTasks(done);
        if (data.data.length === 0) document.getElementById('todoList').innerHTML = '<p class="text-gray-500 text-center py-4">暂无任务</p>';
      }
    }
    function renderTasks(tasks) {
      if (tasks.length === 0) return '<p class="text-gray-500 text-center py-4">无</p>';
      return tasks.map(t => `
        <div class="bg-white rounded-lg shadow p-4">
          <h4 class="font-medium">${t.title}</h4>
          <p class="text-sm text-gray-600 mt-1">${t.description || ''}</p>
          <div class="flex justify-between items-center mt-3">
            <span class="text-xs ${t.priority==='high'?'text-red-600':t.priority==='medium'?'text-orange-600':'text-green-600'}">${t.priority}</span>
            ${t.status !== 'done' ? `<button onclick="advanceTask(${t.id}, '${t.status}')" class="text-blue-600 hover:underline text-sm">→ 推进</button>` : ''}
          </div>
        </div>
      `).join('');
    }
    async function advanceTask(id, status) {
      const newStatus = status === 'todo' ? 'in_progress' : 'done';
      const res = await fetch(`/api/tasks/${id}/status`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ status: newStatus, user_id: 1 }) });
      const result = await res.json();
      if (result.success) { alert('✅ 任务已推进'); loadTasks(); }
    }
    async function createTask() {
      const title = prompt('任务标题：');
      if (!title) return;
      const description = prompt('任务描述：') || '';
      const res = await fetch('/api/tasks', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title, description, creator_id: 1, priority: 'medium' }) });
      const result = await res.json();
      if (result.success) { alert('✅ 任务创建成功'); loadTasks(); }
      else alert('❌ ' + result.error);
    }
    document.addEventListener('DOMContentLoaded', loadTasks);
  </script>
</body>
</html>