bot_ym
/
water-management-system


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572
							<!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>
</head>
<body class="bg-gray-50 min-h-screen">
  <!-- 导航栏 -->
  <nav class="bg-gradient-to-r from-indigo-600 to-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 gap-3">
          <span class="text-3xl">📊</span>
          <div>
            <h1 class="text-2xl font-bold">中小企业 CRM 系统</h1>
            <p class="text-indigo-200 text-sm">简单实用的客户管理工具</p>
          </div>
        </div>
        <div class="flex gap-4 items-center">
          <button onclick="showListView()" class="text-white hover:text-indigo-200 transition">📋 客户列表</button>
          <button onclick="showAddModal()" class="bg-white text-indigo-600 px-6 py-2 rounded-lg hover:bg-indigo-50 font-medium transition shadow">
            ➕ 添加客户
          </button>
        </div>
      </div>
    </div>
  </nav>

  <!-- 主内容区 -->
  <div class="container mx-auto px-4 py-6">
    
    <!-- 列表视图 -->
    <div id="list-view">
      <!-- 统计卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
          <div class="flex items-center justify-between">
            <div>
              <div class="text-gray-500 text-sm mb-1">总客户数</div>
              <div class="text-4xl font-bold text-indigo-600" id="stat-total">-</div>
            </div>
            <div class="text-4xl">👥</div>
          </div>
        </div>
        <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
          <div class="flex items-center justify-between">
            <div>
              <div class="text-gray-500 text-sm mb-1">潜在客户</div>
              <div class="text-4xl font-bold text-yellow-600" id="stat-potential">-</div>
            </div>
            <div class="text-4xl">🌱</div>
          </div>
        </div>
        <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
          <div class="flex items-center justify-between">
            <div>
              <div class="text-gray-500 text-sm mb-1">跟进中</div>
              <div class="text-4xl font-bold text-blue-600" id="stat-contacting">-</div>
            </div>
            <div class="text-4xl">📞</div>
          </div>
        </div>
        <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
          <div class="flex items-center justify-between">
            <div>
              <div class="text-gray-500 text-sm mb-1">成交客户</div>
              <div class="text-4xl font-bold text-green-600" id="stat-customer">-</div>
            </div>
            <div class="text-4xl">✅</div>
          </div>
        </div>
      </div>

      <!-- 搜索和筛选 -->
      <div class="bg-white p-6 rounded-xl shadow-md mb-6">
        <div class="flex gap-4">
          <input type="text" id="search-keyword" placeholder="🔍 搜索客户名称、公司、电话..." 
            class="flex-1 border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition">
          <select id="filter-status" class="border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-indigo-500">
            <option value="">全部状态</option>
            <option value="potential">🌱 潜在客户</option>
            <option value="contacting">📞 跟进中</option>
            <option value="customer">✅ 成交客户</option>
          </select>
          <button onclick="loadCustomers()" class="bg-indigo-600 text-white px-8 py-3 rounded-lg hover:bg-indigo-700 transition font-medium">
            搜索
          </button>
        </div>
      </div>

      <!-- 客户列表 -->
      <div class="bg-white rounded-xl shadow-md overflow-hidden">
        <div class="px-6 py-4 border-b bg-gray-50">
          <h2 class="text-lg font-semibold text-gray-800">客户列表</h2>
        </div>
        <div class="overflow-x-auto">
          <table class="w-full">
            <thead class="bg-gray-50">
              <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">客户名称</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">公司</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">联系方式</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">来源</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
              </tr>
            </thead>
            <tbody id="customer-list" class="divide-y divide-gray-200">
              <tr><td colspan="6" class="px-6 py-12 text-center text-gray-500">⏳ 加载中...</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- 详情视图 -->
    <div id="detail-view" class="hidden">
      <button onclick="showListView()" class="mb-4 text-indigo-600 hover:text-indigo-800 font-medium transition">← 返回列表</button>
      
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- 客户信息 -->
        <div class="md:col-span-1">
          <div class="bg-white rounded-xl shadow-md p-6">
            <div class="flex items-center gap-3 mb-6">
              <div class="w-16 h-16 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-full flex items-center justify-center text-white text-2xl font-bold">
                <span id="detail-avatar">-</span>
              </div>
              <div>
                <h3 class="text-xl font-bold text-gray-800" id="detail-name">-</h3>
                <span id="detail-status-badge" class="text-xs px-2 py-1 rounded-full">-</span>
              </div>
            </div>
            <div class="space-y-4 text-sm">
              <div class="flex items-start gap-3">
                <span class="text-gray-400 text-lg">🏢</span>
                <div>
                  <span class="text-gray-500">公司</span>
                  <p id="detail-company" class="font-medium text-gray-800">-</p>
                </div>
              </div>
              <div class="flex items-start gap-3">
                <span class="text-gray-400 text-lg">📱</span>
                <div>
                  <span class="text-gray-500">电话</span>
                  <p id="detail-phone" class="font-medium text-gray-800">-</p>
                </div>
              </div>
              <div class="flex items-start gap-3">
                <span class="text-gray-400 text-lg">📧</span>
                <div>
                  <span class="text-gray-500">邮箱</span>
                  <p id="detail-email" class="font-medium text-gray-800">-</p>
                </div>
              </div>
              <div class="flex items-start gap-3">
                <span class="text-gray-400 text-lg">🎯</span>
                <div>
                  <span class="text-gray-500">来源</span>
                  <p id="detail-source" class="font-medium text-gray-800">-</p>
                </div>
              </div>
              <div class="flex items-start gap-3">
                <span class="text-gray-400 text-lg">📅</span>
                <div>
                  <span class="text-gray-500">创建时间</span>
                  <p id="detail-created" class="font-medium text-gray-800">-</p>
                </div>
              </div>
            </div>
            <div class="mt-6 flex gap-2">
              <button onclick="showEditModal()" class="flex-1 bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700 transition font-medium">✏️ 编辑</button>
              <button onclick="deleteCurrentCustomer()" class="flex-1 bg-red-600 text-white py-3 rounded-lg hover:bg-red-700 transition font-medium">🗑️ 删除</button>
            </div>
          </div>
        </div>

        <!-- 跟进记录 -->
        <div class="md:col-span-2">
          <div class="bg-white rounded-xl shadow-md p-6 mb-6">
            <h3 class="text-lg font-bold text-gray-800 mb-4">📝 添加跟进记录</h3>
            <form id="followup-form" class="space-y-4">
              <div class="grid grid-cols-2 gap-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">跟进类型</label>
                  <select name="type" class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-indigo-500">
                    <option value="电话">📞 电话沟通</option>
                    <option value="微信">💬 微信联系</option>
                    <option value="邮件">📧 邮件往来</option>
                    <option value="拜访">🚗 上门拜访</option>
                    <option value="报价">💰 发送报价</option>
                    <option value="成交">🎉 成交签约</option>
                    <option value="其他">📌 其他</option>
                  </select>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">下次跟进日期</label>
                  <input type="date" name="nextFollowup" class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-indigo-500">
                </div>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">跟进内容</label>
                <textarea name="content" rows="3" required class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-indigo-500" placeholder="记录本次跟进的详细内容..."></textarea>
              </div>
              <button type="submit" class="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition font-medium">➕ 添加记录</button>
            </form>
          </div>

          <div class="bg-white rounded-xl shadow-md p-6">
            <h3 class="text-lg font-bold text-gray-800 mb-4">📋 跟进记录</h3>
            <div id="followup-list" class="space-y-4">
              <p class="text-gray-500 text-center py-12">暂无跟进记录</p>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

  <!-- 添加客户模态框 -->
  <div id="add-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-xl p-8 w-full max-w-lg mx-4 shadow-2xl">
      <div class="flex justify-between items-center mb-6">
        <h3 class="text-2xl font-bold text-gray-800">➕ 添加客户</h3>
        <button onclick="hideAddModal()" class="text-gray-400 hover:text-gray-600 text-2xl">&times;</button>
      </div>
      <form id="add-form" class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">客户名称 <span class="text-red-500">*</span></label>
          <input type="text" name="name" required class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-indigo-500">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">公司</label>
          <input type="text" name="company" class="w-full border border-gray-300 rounded-lg px-4 py-3">
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">电话</label>
            <input type="tel" name="phone" class="w-full border border-gray-300 rounded-lg px-4 py-3">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">邮箱</label>
            <input type="email" name="email" class="w-full border border-gray-300 rounded-lg px-4 py-3">
          </div>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">来源</label>
          <select name="source" class="w-full border border-gray-300 rounded-lg px-4 py-3">
            <option value="">请选择</option>
            <option value="官网">🌐 官网</option>
            <option value="电话">📞 电话</option>
            <option value="朋友介绍">👥 朋友介绍</option>
            <option value="展会">🎪 展会</option>
            <option value="其他">📌 其他</option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">备注</label>
          <textarea name="notes" rows="3" class="w-full border border-gray-300 rounded-lg px-4 py-3"></textarea>
        </div>
        <div class="flex gap-4 pt-6">
          <button type="submit" class="flex-1 bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700 transition font-medium">💾 保存</button>
          <button type="button" onclick="hideAddModal()" class="flex-1 bg-gray-200 text-gray-700 py-3 rounded-lg hover:bg-gray-300 transition font-medium">取消</button>
        </div>
      </form>
    </div>
  </div>

  <!-- 编辑客户模态框 -->
  <div id="edit-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-xl p-8 w-full max-w-lg mx-4 shadow-2xl">
      <div class="flex justify-between items-center mb-6">
        <h3 class="text-2xl font-bold text-gray-800">✏️ 编辑客户</h3>
        <button onclick="hideEditModal()" class="text-gray-400 hover:text-gray-600 text-2xl">&times;</button>
      </div>
      <form id="edit-form" class="space-y-4">
        <input type="hidden" id="edit-id">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">客户名称 <span class="text-red-500">*</span></label>
          <input type="text" id="edit-name" required class="w-full border border-gray-300 rounded-lg px-4 py-3">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">公司</label>
          <input type="text" id="edit-company" class="w-full border border-gray-300 rounded-lg px-4 py-3">
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">电话</label>
            <input type="tel" id="edit-phone" class="w-full border border-gray-300 rounded-lg px-4 py-3">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">邮箱</label>
            <input type="email" id="edit-email" class="w-full border border-gray-300 rounded-lg px-4 py-3">
          </div>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">来源</label>
          <select id="edit-source" class="w-full border border-gray-300 rounded-lg px-4 py-3">
            <option value="">请选择</option>
            <option value="官网">🌐 官网</option>
            <option value="电话">📞 电话</option>
            <option value="朋友介绍">👥 朋友介绍</option>
            <option value="展会">🎪 展会</option>
            <option value="其他">📌 其他</option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">状态</label>
          <select id="edit-status" class="w-full border border-gray-300 rounded-lg px-4 py-3">
            <option value="potential">🌱 潜在客户</option>
            <option value="contacting">📞 跟进中</option>
            <option value="customer">✅ 成交客户</option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">备注</label>
          <textarea id="edit-notes" rows="3" class="w-full border border-gray-300 rounded-lg px-4 py-3"></textarea>
        </div>
        <div class="flex gap-4 pt-6">
          <button type="submit" class="flex-1 bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700 transition font-medium">💾 保存</button>
          <button type="button" onclick="hideEditModal()" class="flex-1 bg-gray-200 text-gray-700 py-3 rounded-lg hover:bg-gray-300 transition font-medium">取消</button>
        </div>
      </form>
    </div>
  </div>

  <script>
    const API_BASE = window.location.hostname === 'localhost' ? 'http://localhost:3002/api' : '/api';
    let currentCustomerId = null;

    // 加载统计数据
    async function loadStats() {
      try {
        const res = await fetch(`${API_BASE}/stats`);
        const data = await res.json();
        if (data.success) {
          document.getElementById('stat-total').textContent = data.data.total;
          document.getElementById('stat-potential').textContent = data.data.potential;
          document.getElementById('stat-contacting').textContent = data.data.contacting;
          document.getElementById('stat-customer').textContent = data.data.customer;
        }
      } catch (error) {
        console.error('加载统计失败:', error);
      }
    }

    // 加载客户列表
    async function loadCustomers() {
      const keyword = document.getElementById('search-keyword').value;
      const status = document.getElementById('filter-status').value;
      
      let url = `${API_BASE}/customers?`;
      if (keyword) url += `keyword=${encodeURIComponent(keyword)}&`;
      if (status) url += `status=${status}&`;
      
      try {
        const res = await fetch(url);
        const data = await res.json();
        const tbody = document.getElementById('customer-list');
        
        if (data.success && data.data.length > 0) {
          tbody.innerHTML = data.data.map(c => `
            <tr class="hover:bg-gray-50 transition">
              <td class="px-6 py-4 font-medium text-gray-800">${c.name}</td>
              <td class="px-6 py-4 text-gray-600">${c.company || '-'}</td>
              <td class="px-6 py-4">
                <div class="text-sm text-gray-800">${c.phone || '-'}</div>
                <div class="text-gray-500 text-xs">${c.email || ''}</div>
              </td>
              <td class="px-6 py-4 text-gray-600">${c.source || '-'}</td>
              <td class="px-6 py-4">
                <span class="px-3 py-1 rounded-full text-xs font-medium ${
                  c.status === 'customer' ? 'bg-green-100 text-green-800' :
                  c.status === 'contacting' ? 'bg-blue-100 text-blue-800' :
                  'bg-yellow-100 text-yellow-800'
                }">${
                  c.status === 'customer' ? '✅ 成交客户' :
                  c.status === 'contacting' ? '📞 跟进中' : '🌱 潜在客户'
                }</span>
              </td>
              <td class="px-6 py-4">
                <button onclick="viewCustomer(${c.id})" class="text-indigo-600 hover:text-indigo-800 mr-3 font-medium">👁️ 详情</button>
                <button onclick="deleteCustomer(${c.id})" class="text-red-600 hover:text-red-800 font-medium">🗑️ 删除</button>
              </td>
            </tr>
          `).join('');
        } else {
          tbody.innerHTML = '<tr><td colspan="6" class="px-6 py-12 text-center text-gray-500">📭 暂无客户数据，点击右上角添加客户</td></tr>';
        }
      } catch (error) {
        console.error('加载客户失败:', error);
      }
    }

    // 查看客户详情
    async function viewCustomer(id) {
      currentCustomerId = id;
      try {
        const res = await fetch(`${API_BASE}/customers/${id}`);
        const data = await res.json();
        
        if (data.success) {
          const c = data.data;
          document.getElementById('detail-name').textContent = c.name;
          document.getElementById('detail-avatar').textContent = c.name.charAt(0).toUpperCase();
          document.getElementById('detail-company').textContent = c.company || '-';
          document.getElementById('detail-phone').textContent = c.phone || '-';
          document.getElementById('detail-email').textContent = c.email || '-';
          document.getElementById('detail-source').textContent = c.source || '-';
          document.getElementById('detail-created').textContent = new Date(c.created_at).toLocaleString('zh-CN');
          
          const statusBadge = document.getElementById('detail-status-badge');
          statusBadge.textContent = c.status === 'customer' ? '✅ 成交客户' : c.status === 'contacting' ? '📞 跟进中' : '🌱 潜在客户';
          statusBadge.className = `text-xs px-3 py-1 rounded-full font-medium ${
            c.status === 'customer' ? 'bg-green-100 text-green-800' :
            c.status === 'contacting' ? 'bg-blue-100 text-blue-800' :
            'bg-yellow-100 text-yellow-800'
          }`;
          
          // 加载跟进记录
          const followupList = document.getElementById('followup-list');
          if (c.followUps && c.followUps.length > 0) {
            followupList.innerHTML = c.followUps.map(f => `
              <div class="border-l-4 border-indigo-500 pl-4 py-3 bg-gradient-to-r from-indigo-50 to-white rounded-lg shadow-sm">
                <div class="flex justify-between items-start">
                  <span class="font-medium text-indigo-600">${getTypeEmoji(f.type)} ${f.type || '跟进'}</span>
                  <span class="text-xs text-gray-500">${new Date(f.created_at).toLocaleString('zh-CN')}</span>
                </div>
                <p class="text-gray-700 mt-2">${f.content || '-'}</p>
                ${f.next_followup ? `<p class="text-sm text-orange-600 mt-2 font-medium">📅 下次跟进：${f.next_followup}</p>` : ''}
              </div>
            `).join('');
          } else {
            followupList.innerHTML = '<p class="text-gray-500 text-center py-12">📝 暂无跟进记录</p>';
          }
          
          // 切换视图
          document.getElementById('list-view').classList.add('hidden');
          document.getElementById('detail-view').classList.remove('hidden');
        }
      } catch (error) {
        alert('加载详情失败：' + error.message);
      }
    }

    // 获取类型表情
    function getTypeEmoji(type) {
      const emojis = {
        '电话': '📞',
        '微信': '💬',
        '邮件': '📧',
        '拜访': '🚗',
        '报价': '💰',
        '成交': '🎉',
        '其他': '📌'
      };
      return emojis[type] || '📝';
    }

    // 显示列表视图
    function showListView() {
      document.getElementById('detail-view').classList.add('hidden');
      document.getElementById('list-view').classList.remove('hidden');
      loadCustomers();
      loadStats();
    }

    // 显示添加模态框
    function showAddModal() {
      document.getElementById('add-modal').classList.remove('hidden');
      document.getElementById('add-modal').classList.add('flex');
    }

    // 隐藏添加模态框
    function hideAddModal() {
      document.getElementById('add-modal').classList.add('hidden');
      document.getElementById('add-modal').classList.remove('flex');
      document.getElementById('add-form').reset();
    }

    // 显示编辑模态框
    function showEditModal() {
      document.getElementById('edit-id').value = currentCustomerId;
      document.getElementById('edit-modal').classList.remove('hidden');
      document.getElementById('edit-modal').classList.add('flex');
    }

    // 隐藏编辑模态框
    function hideEditModal() {
      document.getElementById('edit-modal').classList.add('hidden');
      document.getElementById('edit-modal').classList.remove('flex');
    }

    // 删除客户
    async function deleteCustomer(id) {
      if (!confirm('确定要删除这个客户吗？此操作不可恢复。')) return;
      try {
        const res = await fetch(`${API_BASE}/customers/${id}`, { method: 'DELETE' });
        const data = await res.json();
        if (data.success) {
          alert('✅ 客户已删除');
          loadCustomers();
          loadStats();
        }
      } catch (error) {
        alert('删除失败：' + error.message);
      }
    }

    // 删除当前客户
    function deleteCurrentCustomer() {
      if (currentCustomerId) deleteCustomer(currentCustomerId);
    }

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

    // 添加跟进记录
    document.getElementById('followup-form').addEventListener('submit', async (e) => {
      e.preventDefault();
      const formData = new FormData(e.target);
      const data = Object.fromEntries(formData);
      
      try {
        const res = await fetch(`${API_BASE}/customers/${currentCustomerId}/followups`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(data)
        });
        const result = await res.json();
        
        if (result.success) {
          alert('✅ 跟进记录添加成功！');
          document.getElementById('followup-form').reset();
          viewCustomer(currentCustomerId);
          loadStats();
        }
      } catch (error) {
        alert('添加失败：' + error.message);
      }
    });

    // 初始化
    loadStats();
    loadCustomers();
  </script>
</body>
</html>