bot_ym
/
water-management-system


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
							<!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="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="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="createDoc()" class="bg-blue-600 text-white px-6 py-3 rounded-lg">➕ 新建文档</button>
    </div>
    <div id="docList" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div>
  </main>
  <script>
    async function loadDocs() {
      const res = await fetch('/api/documents');
      const data = await res.json();
      const container = document.getElementById('docList');
      if (data.success && data.data.length > 0) {
        container.innerHTML = data.data.map(d => `
          <div class="bg-white rounded-lg shadow p-6 hover:shadow-md transition">
            <h3 class="text-lg font-bold mb-2">${d.title}</h3>
            <p class="text-gray-600 text-sm mb-4">${d.content ? d.content.substring(0, 80) + '...' : '无内容'}</p>
            <div class="flex justify-between items-center">
              <span class="text-xs text-gray-500">作者：${d.owner_name}</span>
              <button onclick="viewDoc(${d.id})" class="text-blue-600 hover:underline text-sm">查看</button>
            </div>
          </div>
        `).join('');
      } else {
        container.innerHTML = '<div class="col-span-full text-center text-gray-500 py-8">暂无文档，点击右上角创建第一个文档</div>';
      }
    }
    async function createDoc() {
      const title = prompt('文档标题：');
      if (!title) return;
      const res = await fetch('/api/documents', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title, content: '', owner_id: 1, is_public: true }) });
      const result = await res.json();
      if (result.success) { alert('✅ 文档创建成功'); loadDocs(); }
      else alert('❌ ' + result.error);
    }
    function viewDoc(id) { alert('文档详情功能开发中... 文档 ID: ' + id); }
    document.addEventListener('DOMContentLoaded', loadDocs);
  </script>
</body>
</html>