bot_ym
/
water-management-system


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
							<!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="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="hover:bg-purple-500 px-3 py-2 rounded">任务</a>
        </div>
      </div>
    </div>
  </nav>

  <main class="container mx-auto px-4 py-8">
    <div class="mb-8"><h2 class="text-3xl font-bold text-gray-800">📊 数据看板</h2><p class="text-gray-600 mt-2">异步协作效率统计</p></div>

    <div class="grid grid-cols-1 md:grid-cols-5 gap-6 mb-8">
      <div class="bg-white rounded-lg shadow p-6"><div><p class="text-gray-500 text-sm">团队成员</p><p id="totalUsers" class="text-3xl font-bold text-purple-600">-</p></div><div class="text-4xl">👥</div></div>
      <div class="bg-white rounded-lg shadow p-6"><div><p class="text-gray-500 text-sm">协作文档</p><p id="totalDocuments" class="text-3xl font-bold text-blue-600">-</p></div><div class="text-4xl">📄</div></div>
      <div class="bg-white rounded-lg shadow p-6"><div><p class="text-gray-500 text-sm">总任务数</p><p id="totalTasks" class="text-3xl font-bold text-green-600">-</p></div><div class="text-4xl">✅</div></div>
      <div class="bg-white rounded-lg shadow p-6"><div><p class="text-gray-500 text-sm">进行中</p><p id="pendingTasks" class="text-3xl font-bold text-orange-600">-</p></div><div class="text-4xl">⏳</div></div>
      <div class="bg-white rounded-lg shadow p-6"><div><p class="text-gray-500 text-sm">今日到期</p><p id="todayTasks" class="text-3xl font-bold text-red-600">-</p></div><div class="text-4xl">📅</div></div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-lg font-semibold mb-4">🚀 快捷操作</h3>
        <div class="grid grid-cols-2 gap-3">
          <button onclick="location.href='/documents'" class="bg-blue-600 text-white px-4 py-3 rounded-lg hover:bg-blue-700">📄 新建文档</button>
          <button onclick="location.href='/tasks'" class="bg-green-600 text-white px-4 py-3 rounded-lg hover:bg-green-700">✅ 创建任务</button>
          <button onclick="createDemoDoc()" class="bg-purple-600 text-white px-4 py-3 rounded-lg hover:bg-purple-700">📝 创建示例</button>
          <button onclick="createDemoTask()" class="bg-orange-600 text-white px-4 py-3 rounded-lg hover:bg-orange-700">🎯 添加示例任务</button>
        </div>
      </div>

      <div class="bg-white rounded-lg shadow p-6">
        <div class="flex justify-between items-center mb-4"><h3 class="text-lg font-semibold">🔔 通知</h3><span id="notifCount" class="bg-red-500 text-white text-xs px-2 py-1 rounded-full">0</span></div>
        <div id="notifList" class="space-y-3"><p class="text-gray-500 text-center py-8">加载中...</p></div>
      </div>
    </div>
  </main>

  <script>
    async function loadStats() {
      const res = await fetch('/api/stats/overview');
      const data = await res.json();
      if (data.success) {
        document.getElementById('totalUsers').textContent = data.data.totalUsers;
        document.getElementById('totalDocuments').textContent = data.data.totalDocuments;
        document.getElementById('totalTasks').textContent = data.data.totalTasks;
        document.getElementById('pendingTasks').textContent = data.data.pendingTasks;
        document.getElementById('todayTasks').textContent = data.data.todayTasks;
      }
    }

    async function loadNotifications() {
      const res = await fetch('/api/notifications?user_id=1&unread=true');
      const data = await res.json();
      const container = document.getElementById('notifList');
      const countEl = document.getElementById('notifCount');
      if (data.success && data.data.length > 0) {
        countEl.textContent = data.data.length;
        container.innerHTML = data.data.slice(0, 5).map(n => `
          <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
            <div class="flex-1"><p class="text-sm text-blue-800">${n.title}</p><p class="text-xs text-blue-600">${new Date(n.created_at).toLocaleString('zh-CN')}</p></div>
            <button onclick="markRead(${n.id})" class="text-blue-600 hover:underline text-sm ml-3">已读</button>
          </div>
        `).join('');
      } else {
        countEl.textContent = '0';
        container.innerHTML = '<p class="text-gray-500 text-center py-8">暂无新通知 ✅</p>';
      }
    }

    async function markRead(id) {
      await fetch(`/api/notifications/${id}/read`, { method: 'PUT' });
      loadNotifications();
    }

    async function createDemoDoc() {
      const res = await fetch('/api/documents', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title: '示例文档_' + Date.now(), content: '这是一个示例协作文档', owner_id: 1, is_public: true })
      });
      const result = await res.json();
      if (result.success) { alert('✅ 示例文档创建成功'); loadStats(); }
    }

    async function createDemoTask() {
      const res = await fetch('/api/tasks', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title: '示例任务_' + Date.now(), description: '这是一个示例任务', creator_id: 1, priority: 'medium' })
      });
      const result = await res.json();
      if (result.success) { alert('✅ 示例任务创建成功'); loadStats(); }
    }

    document.addEventListener('DOMContentLoaded', () => { loadStats(); loadNotifications(); });
  </script>
</body>
</html>