bot_ym
/
water-management-system


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轻量 CRM - 首页</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    .stat-card { transition: transform 0.2s; }
    .stat-card:hover { transform: translateY(-2px); }
    @media (max-width: 640px) {
      .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
      .mobile-stack { flex-direction: column !important; }
      .mobile-full { width: 100% !important; }
    }
  </style>
</head>
<body class="bg-gray-50 min-h-screen">
  <!-- 顶部导航 -->
  <nav class="bg-indigo-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">轻量 CRM</h1>
        </div>
        <div class="flex items-center space-x-4">
          <a href="/" class="bg-indigo-500 px-3 py-2 rounded">首页</a>
          <a href="/customers" class="hover:bg-indigo-500 px-3 py-2 rounded">客户</a>
          <a href="/leads" class="hover:bg-indigo-500 px-3 py-2 rounded">线索</a>
          <a href="/public-pool" class="hover:bg-indigo-500 px-3 py-2 rounded">公海池</a>
          <a href="/sales-target" class="hover:bg-indigo-500 px-3 py-2 rounded">销售目标</a>
          <div id="userInfo" class="ml-4 flex items-center space-x-2">
            <a href="/login" class="hover:bg-indigo-500 px-3 py-2 rounded">登录</a>
          </div>
        </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-2 lg:grid-cols-4 gap-6 mb-8">
      <div class="stat-card bg-white rounded-lg shadow p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-500 text-sm">客户总数</p>
            <p id="totalCustomers" class="text-3xl font-bold text-indigo-600">-</p>
          </div>
          <div class="text-4xl">👥</div>
        </div>
      </div>

      <div class="stat-card bg-white rounded-lg shadow p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-500 text-sm">本周新增</p>
            <p id="newThisWeek" class="text-3xl font-bold text-green-600">-</p>
          </div>
          <div class="text-4xl">📈</div>
        </div>
      </div>

      <div class="stat-card bg-white rounded-lg shadow p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-500 text-sm">待跟进线索</p>
            <p id="totalLeads" class="text-3xl font-bold text-orange-600">-</p>
          </div>
          <div class="text-4xl">🎯</div>
        </div>
      </div>

      <div class="stat-card bg-white rounded-lg shadow p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-500 text-sm">今日跟进</p>
            <p id="todayFollowups" class="text-3xl font-bold text-blue-600">-</p>
          </div>
          <div class="text-4xl">📞</div>
        </div>
      </div>

      <div class="stat-card bg-white rounded-lg shadow p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-500 text-sm">公海池</p>
            <p id="publicPoolCount" class="text-3xl font-bold text-teal-600">-</p>
          </div>
          <div class="text-4xl">🌊</div>
        </div>
      </div>
    </div>

    <!-- 快捷操作 -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-lg font-semibold mb-4">🚀 快捷操作</h3>
        <div class="space-y-3">
          <button onclick="showAddCustomerModal()" class="w-full bg-indigo-600 text-white px-4 py-3 rounded-lg hover:bg-indigo-700 transition">
            ➕ 添加客户
          </button>
          <button onclick="showAddLeadModal()" class="w-full bg-green-600 text-white px-4 py-3 rounded-lg hover:bg-green-700 transition">
            🎯 添加线索
          </button>
          <button onclick="location.href='/customers'" class="w-full bg-gray-600 text-white px-4 py-3 rounded-lg hover:bg-gray-700 transition">
            📋 查看客户列表
          </button>
          <button onclick="exportCustomers()" class="w-full bg-teal-600 text-white px-4 py-3 rounded-lg hover:bg-teal-700 transition">
            📥 导出数据
          </button>
        </div>
      </div>

      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-lg font-semibold mb-4">📊 系统信息</h3>
        <div class="space-y-2 text-sm text-gray-600">
          <p>版本：v1.0.0</p>
          <p>数据库：SQLite</p>
          <p>API 状态：<span id="apiStatus" class="text-green-600">检查中...</span></p>
          <p>最后更新：<span id="lastUpdate">-</span></p>
        </div>
      </div>
    </div>

    <!-- 最近客户 -->
    <div class="bg-white rounded-lg shadow p-6 mb-8">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold">👥 最近客户</h3>
        <a href="/customers" class="text-indigo-600 hover:underline">查看全部 →</a>
      </div>
      <div id="recentCustomers" class="space-y-3">
        <p class="text-gray-500 text-center py-8">加载中...</p>
      </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="reminderCount" class="bg-red-500 text-white text-xs px-2 py-1 rounded-full">0</span>
      </div>
      <div id="reminderList" class="space-y-3">
        <p class="text-gray-500 text-center py-8">加载中...</p>
      </div>
    </div>
  </main>

  <!-- 添加客户弹窗 -->
  <div id="addCustomerModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-bold">➕ 添加客户</h3>
          <button onclick="hideAddCustomerModal()" class="text-gray-500 hover:text-gray-700 text-2xl">&times;</button>
        </div>
        <form id="addCustomerForm" class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">姓名 *</label>
            <input type="text" name="name" required class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">公司</label>
            <input type="text" name="company" class="w-full border border-gray-300 rounded-lg px-3 py-2">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">电话</label>
            <input type="text" name="phone" class="w-full border border-gray-300 rounded-lg px-3 py-2">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">微信</label>
            <input type="text" name="wechat" class="w-full border border-gray-300 rounded-lg px-3 py-2">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
            <input type="email" name="email" class="w-full border border-gray-300 rounded-lg px-3 py-2">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">来源</label>
            <select name="source" class="w-full border border-gray-300 rounded-lg px-3 py-2">
              <option value="">请选择</option>
              <option value="网站">网站</option>
              <option value="推荐">推荐</option>
              <option value="活动">活动</option>
              <option value="电话">电话</option>
              <option value="其他">其他</option>
            </select>
          </div>
          <div class="flex space-x-3 pt-4">
            <button type="button" onclick="hideAddCustomerModal()" class="flex-1 bg-gray-200 text-gray-700 py-2 rounded-lg hover:bg-gray-300">取消</button>
            <button type="submit" class="flex-1 bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- 添加线索弹窗 -->
  <div id="addLeadModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-bold">🎯 添加线索</h3>
          <button onclick="hideAddLeadModal()" class="text-gray-500 hover:text-gray-700 text-2xl">&times;</button>
        </div>
        <form id="addLeadForm" class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">姓名 *</label>
            <input type="text" name="name" required class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-green-500 focus:border-transparent">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">公司</label>
            <input type="text" name="company" class="w-full border border-gray-300 rounded-lg px-3 py-2">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">电话</label>
            <input type="text" name="phone" class="w-full border border-gray-300 rounded-lg px-3 py-2">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">需求描述</label>
            <textarea name="requirement" rows="3" class="w-full border border-gray-300 rounded-lg px-3 py-2"></textarea>
          </div>
          <div class="flex space-x-3 pt-4">
            <button type="button" onclick="hideAddLeadModal()" class="flex-1 bg-gray-200 text-gray-700 py-2 rounded-lg hover:bg-gray-300">取消</button>
            <button type="submit" class="flex-1 bg-green-600 text-white py-2 rounded-lg hover:bg-green-700">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <script>
    const API_BASE = '';
    const AUTH_SERVICE = 'http://localhost:3005';

    // 检查登录状态
    async function checkAuth() {
      const token = localStorage.getItem('token');
      const userStr = localStorage.getItem('user');
      
      if (!token || !userStr) {
        window.location.href = '/login';
        return null;
      }

      try {
        const res = await fetch(`${AUTH_SERVICE}/api/auth/verify`, {
          headers: { 'Authorization': 'Bearer ' + token }
        });
        const result = await res.json();
        
        if (!result.success) {
          window.location.href = '/login';
          return null;
        }
        
        const user = JSON.parse(userStr);
        document.getElementById('userInfo').innerHTML = `
          <span class="text-sm text-white">👤 ${user.username}</span>
          <button onclick="logout()" class="bg-red-500 hover:bg-red-600 px-3 py-1 rounded text-sm text-white">退出</button>
        `;
        return user;
      } catch (error) {
        window.location.href = '/login';
        return null;
      }
    }

    // 登出
    async function logout() {
      const token = localStorage.getItem('token');
      try {
        await fetch(`${AUTH_SERVICE}/api/auth/logout`, {
          method: 'POST',
          headers: { 'Authorization': 'Bearer ' + token }
        });
      } catch (e) {}
      localStorage.removeItem('token');
      localStorage.removeItem('user');
      window.location.href = '/login';
    }

    // 加载统计数据
    async function loadStats() {
      try {
        const res = await fetch(`${API_BASE}/api/stats/overview`);
        const data = await res.json();
        if (data.success) {
          document.getElementById('totalCustomers').textContent = data.data.totalCustomers;
          document.getElementById('newThisWeek').textContent = '+' + data.data.newThisWeek;
          document.getElementById('totalLeads').textContent = data.data.totalLeads;
          document.getElementById('todayFollowups').textContent = data.data.todayFollowups;
          if (document.getElementById('publicPoolCount')) {
            document.getElementById('publicPoolCount').textContent = data.data.publicPoolCount || 0;
          }
        }
      } catch (error) {
        console.error('加载统计失败:', error);
      }
    }

    // 加载最近客户
    async function loadRecentCustomers() {
      try {
        const res = await fetch(`${API_BASE}/api/customers?limit=5`);
        const data = await res.json();
        if (data.success) {
          const container = document.getElementById('recentCustomers');
          if (data.data.length === 0) {
            container.innerHTML = '<p class="text-gray-500 text-center py-8">暂无客户数据</p>';
            return;
          }
          container.innerHTML = data.data.map(c => `
            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100">
              <div>
                <p class="font-medium">${c.name}</p>
                <p class="text-sm text-gray-500">${c.company || '无公司'} · ${c.phone || '无电话'}</p>
              </div>
              <a href="/customers?id=${c.id}" class="text-indigo-600 hover:underline text-sm">详情</a>
            </div>
          `).join('');
        }
      } catch (error) {
        console.error('加载客户失败:', error);
      }
    }

    // 检查 API 状态
    async function checkApiStatus() {
      try {
        const res = await fetch(`${API_BASE}/api/health`);
        const data = await res.json();
        document.getElementById('apiStatus').textContent = '✅ 正常';
        document.getElementById('lastUpdate').textContent = new Date(data.timestamp).toLocaleString('zh-CN');
      } catch (error) {
        document.getElementById('apiStatus').textContent = '❌ 异常';
      }
    }

    // 弹窗控制
    function showAddCustomerModal() {
      document.getElementById('addCustomerModal').classList.remove('hidden');
      document.getElementById('addCustomerModal').classList.add('flex');
    }
    function hideAddCustomerModal() {
      document.getElementById('addCustomerModal').classList.add('hidden');
      document.getElementById('addCustomerModal').classList.remove('flex');
      document.getElementById('addCustomerForm').reset();
    }
    function showAddLeadModal() {
      document.getElementById('addLeadModal').classList.remove('hidden');
      document.getElementById('addLeadModal').classList.add('flex');
    }
    function hideAddLeadModal() {
      document.getElementById('addLeadModal').classList.add('hidden');
      document.getElementById('addLeadModal').classList.remove('flex');
      document.getElementById('addLeadForm').reset();
    }

    // 添加客户
    document.getElementById('addCustomerForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const formData = new FormData(e.target);
      const data = Object.fromEntries(formData);
      
      try {
        const res = await fetch(`${API_BASE}/api/customers`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(data)
        });
        const result = await res.json();
        if (result.success) {
          alert('✅ 客户添加成功');
          hideAddCustomerModal();
          loadStats();
          loadRecentCustomers();
        } else {
          alert('❌ ' + result.error);
        }
      } catch (error) {
        alert('❌ 添加失败：' + error.message);
      }
    });

    // 添加线索
    document.getElementById('addLeadForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const formData = new FormData(e.target);
      const data = Object.fromEntries(formData);
      
      try {
        const res = await fetch(`${API_BASE}/api/leads`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(data)
        });
        const result = await res.json();
        if (result.success) {
          alert('✅ 线索添加成功');
          hideAddLeadModal();
          loadStats();
        } else {
          alert('❌ ' + result.error);
        }
      } catch (error) {
        alert('❌ 添加失败：' + error.message);
      }
    });

    // 导出数据
    function exportCustomers() {
      window.open(`${API_BASE}/api/export/customers`, '_blank');
    }

    // 加载跟进提醒
    async function loadReminders() {
      try {
        const res = await fetch(`${API_BASE}/api/reminders/followups`);
        const data = await res.json();
        const container = document.getElementById('reminderList');
        const countEl = document.getElementById('reminderCount');
        
        if (data.success && data.data.length > 0) {
          countEl.textContent = data.data.length;
          container.innerHTML = data.data.map(r => `
            <div class="flex items-center justify-between p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
              <div>
                <p class="font-medium text-gray-800">${r.name}</p>
                <p class="text-sm text-gray-600">${r.company || '无公司'} · ${r.content.substring(0, 30)}...</p>
              </div>
              <a href="/customers?id=${r.customer_id}" class="text-indigo-600 hover:underline text-sm">查看</a>
            </div>
          `).slice(0, 5).join('');
        } else {
          countEl.textContent = '0';
          container.innerHTML = '<p class="text-gray-500 text-center py-8">暂无待跟进客户 ✅</p>';
        }
      } catch (error) {
        console.error('加载提醒失败:', error);
      }
    }

    // 页面加载
    document.addEventListener('DOMContentLoaded', async () => {
      const user = await checkAuth();
      if (user) {
        loadStats();
        loadRecentCustomers();
        checkApiStatus();
        loadReminders();
      }
    });
  </script>
</body>
</html>