From fb53e0fe0487339fcbfb32865c9fc988dbe2b113 Mon Sep 17 00:00:00 2001
From: madayouxi <madayouxi@outlook.com>
Date: Tue, 7 Oct 2025 23:19:05 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20static/index.html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/index.html | 658 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 658 insertions(+)
 create mode 100644 static/index.html
diff --git a/static/index.html b/static/index.html
new file mode 100644
index 0000000..1cf8faf
--- /dev/null
+++ b/static/index.html
@@ -0,0 +1,658 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>🌌 恶意客户智能匹配平台</title>
+
+  <!-- Tailwind CDN -->
+  <script src="https://cdn.tailwindcss.com"></script>
+
+  <style>
+    /* 小动画与样式 */
+    .rotate { transition: transform .22s ease; display:inline-block; }
+    .rotate.open { transform: rotate(90deg); }
+    .fade-up { transform: translateY(6px); opacity: 0; transition: all .28s ease; }
+    .fade-up.in { transform: translateY(0); opacity: 1; }
+    .glass { background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.62)); backdrop-filter: blur(6px); }
+    .scrollbar-thin::-webkit-scrollbar { height:8px; width:8px; }
+    .scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 8px; }
+  </style>
+</head>
+<body class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-purple-100 font-sans">
+
+  <div class="max-w-6xl mx-auto p-6">
+
+    <!-- Header -->
+    <header class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-6">
+      <div>
+        <h1 class="text-3xl font-extrabold text-gray-900 flex items-center gap-3">
+          <span>🚀 恶意客户智能匹配平台</span>
+        </h1>
+        <p class="text-sm text-gray-600 mt-1">上传订单 Excel，选择客户库进行快速匹配 — 地址 → 客户 → 订单 三层视图，支持 CRUD 管理。</p>
+      </div>
+
+      <div class="flex gap-3">
+        <div class="flex items-center gap-2 text-sm text-gray-600">
+          <div class="w-2 h-2 bg-blue-400 rounded-full"></div><span>分析</span>
+          <div class="w-2 h-2 bg-red-400 rounded-full ml-2"></div><span>管理</span>
+        </div>
+      </div>
+    </header>
+
+    <!-- Tabs -->
+    <nav class="mb-6 bg-transparent">
+      <div class="inline-flex rounded-xl bg-white/70 glass border border-gray-200 p-1">
+        <button id="tabAnalyze" class="tab-btn px-4 py-2 rounded-lg font-medium text-sm text-gray-800 bg-gradient-to-r from-blue-50 to-purple-50 shadow-sm">📦 订单分析</button>
+        <button id="tabManage" class="tab-btn px-4 py-2 rounded-lg font-medium text-sm text-gray-600 hover:text-gray-800">🧠 恶意客户管理</button>
+      </div>
+    </nav>
+
+    <!-- Main content -->
+    <main>
+      <!-- ========== 分析面板 ========== -->
+      <section id="panelAnalyze" class="fade-up in">
+
+        <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
+          <!-- Left: 控件 -->
+          <div class="md:col-span-4 bg-white glass rounded-2xl p-5 shadow">
+            <h2 class="text-lg font-semibold mb-3">上传 & 分析</h2>
+
+            <label class="text-sm text-gray-600">订单文件 (.xlsx)</label>
+            <input id="fileInput" type="file" accept=".xlsx" class="mt-2 w-full border rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-blue-300" />
+
+            <label class="text-sm text-gray-600 mt-4 block">选择恶意客户库</label>
+            <select id="suspectSelect" class="mt-2 w-full border rounded-lg p-2"></select>
+
+            <div class="mt-4 flex gap-2">
+              <button id="analyzeBtn" class="flex-1 bg-gradient-to-r from-blue-500 to-purple-500 text-white font-semibold px-4 py-2 rounded-lg shadow hover:scale-[1.02] transition">⚡ 发起分析</button>
+              <button id="refreshBtn" title="刷新客户库" class="px-4 py-2 rounded-lg border bg-white">⟳</button>
+            </div>
+
+            <p id="statusText" class="mt-3 text-sm text-gray-500">状态：未开始</p>
+
+            <!-- 浮动统计（小版）-->
+            <div id="statsMini" class="mt-4 bg-white rounded-lg p-3 border flex flex-col gap-2">
+              <div class="flex justify-between text-sm text-gray-600"><span>地址：</span><strong id="miniAddr">0</strong></div>
+              <div class="flex justify-between text-sm text-gray-600"><span>订单：</span><strong id="miniOrders">0</strong></div>
+              <div class="flex justify-between text-sm text-gray-600"><span>恶意客户：</span><strong id="miniSuspects">0</strong></div>
+            </div>
+
+            <!-- 说明 -->
+            <div class="mt-4 text-xs text-gray-500">
+              地址层默认展开；点击客户可展开订单列表。支持查看 note / info_url / registertime。
+            </div>
+          </div>
+
+          <!-- Right: 结果 -->
+          <div class="md:col-span-8 space-y-4">
+            <!-- 搜索 / filters -->
+            <div class="flex gap-3 items-center">
+              <input id="globalSearch" placeholder="🔎 搜索：姓名 / 电话 / 地址 / 订单号" class="flex-1 p-2 rounded-lg border" />
+              <div class="text-sm text-gray-500">显示：<span id="displayCount">0</span> 条匹配</div>
+            </div>
+
+            <!-- 结果容器 -->
+            <div id="resultsContainer" class="space-y-4"></div>
+
+          </div>
+        </div>
+      </section>
+
+      <!-- ========== 管理面板 ========== -->
+      <section id="panelManage" class="hidden">
+        <div class="bg-white glass rounded-2xl p-5 shadow">
+          <div class="flex gap-4 md:gap-8 items-start">
+            <div class="w-full md:w-1/3">
+              <h3 class="font-semibold text-lg">管理客户库</h3>
+              <div class="mt-3">
+                <label class="text-sm text-gray-600">选择库文件</label>
+                <div class="flex gap-2 mt-2">
+                  <select id="manageSelect" class="flex-1 border rounded-lg p-2"></select>
+                  <button id="createFileBtn" class="px-3 py-2 rounded-lg bg-green-50 border border-green-200">新建</button>
+                </div>
+                <input id="newFileName" placeholder="文件名（不带 .json）" class="mt-2 p-2 border rounded-lg w-full" />
+              </div>
+
+              <div class="mt-4">
+                <label class="text-sm text-gray-600">搜索记录</label>
+                <input id="manageSearch" placeholder="按姓名/手机号/地址搜索" class="mt-2 p-2 border rounded-lg w-full" />
+              </div>
+
+              <div class="mt-4">
+                <button id="addRecordBtn" class="w-full bg-blue-600 text-white py-2 rounded-lg shadow">➕ 添加记录</button>
+              </div>
+            </div>
+
+            <div class="flex-1">
+              <h3 class="font-semibold text-lg">记录列表</h3>
+              <div id="recordsList" class="mt-3 space-y-2 max-h-[60vh] overflow-auto p-2 scrollbar-thin"></div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+    </main>
+  </div>
+
+  <!-- 全局浮动统计框（左下） -->
+  <div id="statsBox" class="fixed bottom-6 left-6 bg-white/95 glass rounded-xl shadow-lg p-4 w-64 hidden">
+    <div class="text-sm text-gray-600">分析统计</div>
+    <div class="mt-2">
+      <div class="flex justify-between text-sm"><span>地址数：</span><strong id="statAddress">0</strong></div>
+      <div class="flex justify-between text-sm"><span>订单数：</span><strong id="statOrders">0</strong></div>
+      <div class="flex justify-between text-sm"><span>恶意客户数：</span><strong id="statSuspects">0</strong></div>
+    </div>
+  </div>
+
+  <!-- 弹窗：添加/编辑记录 -->
+  <div id="recordModal" class="fixed inset-0 bg-black/40 hidden items-center justify-center p-4">
+    <div class="bg-white rounded-2xl w-full max-w-2xl p-5 shadow-lg">
+      <div class="flex justify-between items-center">
+        <h4 id="recordModalTitle" class="font-semibold">添加记录</h4>
+        <button id="closeRecordModal" class="text-gray-500">✕</button>
+      </div>
+      <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3">
+        <input id="f_name" placeholder="姓名" class="p-2 border rounded" />
+        <input id="f_phone" placeholder="手机号" class="p-2 border rounded" />
+        <input id="f_address" placeholder="地址（省 市 区）" class="p-2 border rounded col-span-1 md:col-span-2" />
+        <input id="f_store" placeholder="店铺" class="p-2 border rounded" />
+        <input id="f_order_id" placeholder="关联订单号（允许多个，逗号分隔；系统会保留后4位）" class="p-2 border rounded" />
+        <input id="f_info_url" placeholder="信息链接（info_url）" class="p-2 border rounded" />
+        <textarea id="f_note" placeholder="备注 / note" class="p-2 border rounded col-span-1 md:col-span-2"></textarea>
+      </div>
+      <div class="mt-4 flex justify-end gap-2">
+        <button id="cancelRecord" class="px-4 py-2 rounded border">取消</button>
+        <button id="saveRecord" class="px-4 py-2 rounded bg-green-600 text-white">保存</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- 简易确认模态 -->
+  <div id="confirmModal" class="fixed inset-0 bg-black/40 hidden items-center justify-center p-4">
+    <div class="bg-white rounded-xl p-4 shadow">
+      <div id="confirmText" class="text-sm text-gray-700"></div>
+      <div class="mt-3 flex justify-end gap-2">
+        <button id="confirmNo" class="px-3 py-1 rounded border">取消</button>
+        <button id="confirmYes" class="px-3 py-1 rounded bg-red-600 text-white">确认</button>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    // ---------- DOM ----------
+    const tabAnalyze = document.getElementById('tabAnalyze');
+    const tabManage = document.getElementById('tabManage');
+    const panelAnalyze = document.getElementById('panelAnalyze');
+    const panelManage = document.getElementById('panelManage');
+
+    const fileInput = document.getElementById('fileInput');
+    const suspectSelect = document.getElementById('suspectSelect');
+    const analyzeBtn = document.getElementById('analyzeBtn');
+    const refreshBtn = document.getElementById('refreshBtn');
+    const statusText = document.getElementById('statusText');
+
+    const resultsContainer = document.getElementById('resultsContainer');
+    const globalSearch = document.getElementById('globalSearch');
+    const displayCount = document.getElementById('displayCount');
+
+    const statsBox = document.getElementById('statsBox');
+    const statAddress = document.getElementById('statAddress');
+    const statOrders = document.getElementById('statOrders');
+    const statSuspects = document.getElementById('statSuspects');
+
+    const miniAddr = document.getElementById('miniAddr');
+    const miniOrders = document.getElementById('miniOrders');
+    const miniSuspects = document.getElementById('miniSuspects');
+
+    // 管理面板 DOM
+    const manageSelect = document.getElementById('manageSelect');
+    const createFileBtn = document.getElementById('createFileBtn');
+    const newFileName = document.getElementById('newFileName');
+    const manageSearch = document.getElementById('manageSearch');
+    const addRecordBtn = document.getElementById('addRecordBtn');
+    const recordsList = document.getElementById('recordsList');
+
+    // record modal
+    const recordModal = document.getElementById('recordModal');
+    const recordModalTitle = document.getElementById('recordModalTitle');
+    const closeRecordModal = document.getElementById('closeRecordModal');
+    const cancelRecord = document.getElementById('cancelRecord');
+    const saveRecord = document.getElementById('saveRecord');
+
+    const f_name = document.getElementById('f_name');
+    const f_phone = document.getElementById('f_phone');
+    const f_address = document.getElementById('f_address');
+    const f_store = document.getElementById('f_store');
+    const f_order_id = document.getElementById('f_order_id');
+    const f_info_url = document.getElementById('f_info_url');
+    const f_note = document.getElementById('f_note');
+
+    // confirm modal
+    const confirmModal = document.getElementById('confirmModal');
+    const confirmText = document.getElementById('confirmText');
+    const confirmYes = document.getElementById('confirmYes');
+    const confirmNo = document.getElementById('confirmNo');
+
+    // state
+    let currentSuspectFile = null;
+    let currentRecords = [];
+    let editingIndex = -1;
+    let latestResults = { fullMatches: [], cityMatches: [], totalOrders: 0 };
+
+    // ---------- Utils ----------
+    function show(el){ el.classList.remove('hidden'); el.style.display='flex'; }
+    function hide(el){ el.classList.add('hidden'); el.style.display='none'; }
+
+    async function fetchJson(url, opts={}) {
+      const r = await fetch(url, opts);
+      return r.json();
+    }
+
+    // ---------- Tabs ----------
+    tabAnalyze.addEventListener('click', () => {
+      panelAnalyze.classList.remove('hidden');
+      panelManage.classList.add('hidden');
+      tabAnalyze.classList.remove('text-gray-600');
+      tabManage.classList.remove('bg-gradient-to-r','from-blue-50','to-purple-50');
+      tabAnalyze.classList.add('bg-gradient-to-r','from-blue-50','to-purple-50');
+    });
+    tabManage.addEventListener('click', () => {
+      panelManage.classList.remove('hidden');
+      panelAnalyze.classList.add('hidden');
+      tabAnalyze.classList.remove('bg-gradient-to-r','from-blue-50','to-purple-50');
+      tabManage.classList.add('bg-gradient-to-r','from-blue-50','to-purple-50');
+    });
+
+    // ---------- Load suspect files ----------
+    async function loadSuspectOptions(){
+      try{
+        const res = await fetchJson('/api/suspects');
+        const files = res.files || [];
+        suspectSelect.innerHTML = files.map(f => `<option value="${f}">${f}</option>`).join('');
+        manageSelect.innerHTML = files.map(f => `<option value="${f}">${f}</option>`).join('');
+        if(files.length){
+          suspectSelect.value = files[0];
+          manageSelect.value = files[0];
+          currentSuspectFile = files[0];
+        } else {
+          currentSuspectFile = null;
+        }
+      } catch(err){
+        console.error(err);
+      }
+    }
+
+    refreshBtn.addEventListener('click', loadSuspectOptions);
+
+    // ---------- Analyze ----------
+    analyzeBtn.addEventListener('click', async () => {
+      if(!fileInput.files.length){ alert('请选择 .xlsx 文件'); return; }
+      if(!suspectSelect.value){ alert('请选择恶意客户库'); return; }
+
+      const form = new FormData();
+      form.append('file', fileInput.files[0]);
+      form.append('suspectFile', suspectSelect.value);
+
+      statusText.textContent = '分析中...';
+      analyzeBtn.disabled = true;
+      resultsContainer.innerHTML = '';
+
+      try{
+        const r = await fetch('/api/analyze', { method: 'POST', body: form });
+        const data = await r.json();
+        if(data.error){ statusText.textContent = '错误：' + data.error; analyzeBtn.disabled=false; return; }
+        latestResults = data;
+        statusText.textContent = `分析完成：共 ${data.totalOrders} 条订单`;
+        renderResults(data);
+      } catch(err){
+        console.error(err);
+        statusText.textContent = '网络或服务异常';
+      } finally {
+        analyzeBtn.disabled = false;
+      }
+    });
+
+    // ---------- Render Results (三层结构) ----------
+    function renderResults(data){
+      resultsContainer.innerHTML = '';
+      const full = data.fullMatches || [];
+      const city = data.cityMatches || [];
+      let totalCustomers = 0;
+      let totalOrders = data.totalOrders || 0;
+      let totalAddresses = full.length;
+
+      // helper: create address/city section (address default expanded)
+      function createTopSection(title, groups, isCity=false){
+        if(!groups || groups.length===0) return;
+
+        const section = document.createElement('section');
+        section.className = 'bg-white rounded-2xl p-4 shadow-lg';
+
+        const header = document.createElement('div');
+        header.className = 'flex items-center justify-between cursor-pointer';
+        header.innerHTML = `<div class="text-lg font-semibold">${isCity ? '🏙️ 城市级匹配：' : '📍 地址匹配：'} ${title}</div>
+                            <div class="text-sm text-gray-500">（点击收起/展开） <span class="ml-2 rotate">▶</span></div>`;
+
+        const content = document.createElement('div');
+        content.className = 'mt-3 space-y-3';
+
+        // 默认展开地址层：content visible; rotate open
+        content.style.display = '';
+        header.querySelector('.rotate').classList.add('open');
+
+        header.addEventListener('click', () => {
+          if(content.style.display === 'none'){ content.style.display=''; header.querySelector('.rotate').classList.add('open'); }
+          else { content.style.display='none'; header.querySelector('.rotate').classList.remove('open'); }
+        });
+
+        // groups: array of { address|city, customers:[...] }
+        groups.forEach(g => {
+          // each g has .address or .city and .customers
+          const areaTitle = isCity ? g.city : g.address;
+          const areaBlock = document.createElement('div');
+          areaBlock.className = 'p-3 bg-gray-50 border border-gray-100 rounded-lg';
+
+          const areaHeader = document.createElement('div');
+          areaHeader.className = 'text-sm font-medium text-gray-700 mb-2';
+          areaHeader.textContent = areaTitle;
+
+          const customersWrap = document.createElement('div');
+          customersWrap.className = 'space-y-2';
+
+          g.customers.forEach(c => {
+            totalCustomers++;
+            const custCard = document.createElement('div');
+            custCard.className = 'bg-white rounded-lg border p-3 flex flex-col gap-2 shadow-sm';
+
+            // customer header (click to toggle orders)
+            const custHeader = document.createElement('div');
+            custHeader.className = 'flex items-center justify-between cursor-pointer';
+
+            const left = document.createElement('div');
+            left.innerHTML = `<div class="text-red-600 font-semibold">${c.name || '—'} <span class="text-xs text-gray-500">(${c.phone||'—'})</span></div>
+                              <div class="text-xs text-gray-500">${c.address || ''}</div>`;
+
+            const right = document.createElement('div');
+            right.innerHTML = `<div class="text-xs text-gray-500">注册：${c.registertime || '-'}</div>
+                               <div class="text-xs text-gray-500">${(c.order_id||[]).length ? ('订单：' + (Array.isArray(c.order_id)? c.order_id.join(',') : c.order_id)) : ''}</div>`;
+
+            const arrow = document.createElement('span');
+            arrow.className = 'rotate text-gray-500';
+            arrow.textContent = '▶';
+            right.appendChild(arrow);
+
+            custHeader.appendChild(left);
+            custHeader.appendChild(right);
+
+            const details = document.createElement('div');
+            details.className = 'mt-2 ml-2 border-l border-gray-100 pl-3 hidden';
+
+            // note / link
+            const noteP = document.createElement('div');
+            noteP.className = 'text-sm text-gray-600 mb-2';
+            noteP.innerHTML = `📝 ${c.note || '-'} &nbsp; <a href="${c.info_url||'#'}" target="_blank" class="text-blue-500 underline text-xs ml-2">🔗 详情</a>`;
+
+            // orders list
+            const ordersWrap = document.createElement('div');
+            ordersWrap.className = 'grid gap-2';
+
+            (c.matched_orders || []).forEach(o => {
+              const orderEl = document.createElement('div');
+              orderEl.className = 'flex items-center justify-between bg-blue-50 border border-blue-100 rounded p-2 text-sm';
+              orderEl.innerHTML = `<div>📦 <strong>${o.orderId}</strong> &nbsp; <span class="text-gray-600 text-xs">(${o.orderName||''}/${o.orderPhone||''})</span></div>
+                                   <div class="text-blue-600 text-sm">${o.score} 分 <span class="text-xs text-gray-500">(${o.percentage}%)</span></div>`;
+              ordersWrap.appendChild(orderEl);
+            });
+
+            details.appendChild(noteP);
+            details.appendChild(ordersWrap);
+
+            // default: customer level COLLAPSED (only address expanded as requested)
+            custHeader.addEventListener('click', () => {
+              if(details.classList.contains('hidden')) {
+                details.classList.remove('hidden');
+                arrow.classList.add('open');
+              } else {
+                details.classList.add('hidden');
+                arrow.classList.remove('open');
+              }
+            });
+
+            custCard.appendChild(custHeader);
+            custCard.appendChild(details);
+            customersWrap.appendChild(custCard);
+          });
+
+          areaBlock.appendChild(areaHeader);
+          areaBlock.appendChild(customersWrap);
+          content.appendChild(areaBlock);
+        });
+
+        section.appendChild(header);
+        section.appendChild(content);
+        resultsContainer.appendChild(section);
+      }
+
+      // render both
+      if(full && full.length){
+        createTopSection('全部地址（默认展开）', full, false);
+      }
+      if(city && city.length){
+        createTopSection('城市汇总', city, true);
+      }
+
+      // stats
+      statAddress.textContent = (data.fullMatches || []).length;
+      statOrders.textContent = data.totalOrders || 0;
+      statSuspects.textContent = totalCustomers;
+      miniAddr.textContent = statAddress.textContent;
+      miniOrders.textContent = statOrders.textContent;
+      miniSuspects.textContent = statSuspects.textContent;
+
+      // show stats box
+      statsBox.classList.remove('hidden');
+
+      // display count
+      displayCount.textContent = (totalCustomers + (data.fullMatches||[]).length);
+    }
+
+    // Search filter (client-side)
+    globalSearch.addEventListener('input', (e) => {
+      const q = e.target.value.trim().toLowerCase();
+      if(!q){
+        // re-render last results
+        if(latestResults && latestResults.totalOrders) renderResults(latestResults);
+        return;
+      }
+
+      // filter by scanning latestResults and keep only nodes that match
+      const filtered = { fullMatches: [], cityMatches: [], totalOrders: latestResults.totalOrders||0 };
+
+      function filterGroups(groups){
+        const out = [];
+        (groups||[]).forEach(g => {
+          const customers = (g.customers||[]).map(c => {
+            const matched_orders = (c.matched_orders||[]).filter(o => {
+              return (''+o.orderId).toLowerCase().includes(q) ||
+                     (''+o.orderName).toLowerCase().includes(q) ||
+                     (''+o.orderPhone).toLowerCase().includes(q);
+            });
+            const custMatch = (''+c.name).toLowerCase().includes(q) ||
+                              (''+c.phone).toLowerCase().includes(q) ||
+                              (''+c.address).toLowerCase().includes(q) ||
+                              (''+(c.order_id||[]).join(',')).toLowerCase().includes(q);
+            // include customer if customer fields match OR some matched_orders match
+            if(custMatch || matched_orders.length) {
+              // clone with filtered orders
+              const clone = Object.assign({}, c);
+              clone.matched_orders = matched_orders.length ? matched_orders : c.matched_orders || [];
+              return clone;
+            }
+            return null;
+          }).filter(Boolean);
+
+          if(customers.length) out.push(Object.assign({}, g, { customers }));
+        });
+        return out;
+      }
+
+      filtered.fullMatches = filterGroups(latestResults.fullMatches);
+      filtered.cityMatches = filterGroups(latestResults.cityMatches);
+      renderResults(filtered);
+    });
+
+    // ---------- Management (CRUD) ----------
+    async function loadRecordsForSelected(){
+      const fname = manageSelect.value;
+      if(!fname) { recordsList.innerHTML = '<div class="text-sm text-gray-500">无文件</div>'; return; }
+      currentSuspectFile = fname;
+      try{
+        const res = await fetchJson('/api/suspects/' + encodeURIComponent(fname));
+        if(res.error){ recordsList.innerHTML = '<div class="text-sm text-red-600">加载失败</div>'; return; }
+        currentRecords = res.data || [];
+        renderRecordsList(currentRecords);
+      } catch(err){
+        console.error(err);
+        recordsList.innerHTML = '<div class="text-sm text-red-600">加载失败</div>';
+      }
+    }
+
+    function renderRecordsList(list){
+      const q = (manageSearch.value||'').trim().toLowerCase();
+      recordsList.innerHTML = '';
+      if(!list.length) recordsList.innerHTML = '<div class="text-sm text-gray-500">空记录</div>';
+      list.forEach((r, idx) => {
+        const text = `${r.name||''} ${r.phone||''} ${r.address||''}`.toLowerCase();
+        if(q && text.indexOf(q) === -1) return;
+        const row = document.createElement('div');
+        row.className = 'p-3 rounded-lg border flex items-start justify-between gap-3 bg-white';
+        row.innerHTML = `<div>
+                          <div class="font-medium">${r.name || '—'} <span class="text-xs text-gray-500">(${r.phone||''})</span></div>
+                          <div class="text-xs text-gray-600">${r.address || ''}</div>
+                          <div class="text-xs text-gray-400 mt-1">注册：${r.registertime || '-'}</div>
+                          <div class="text-xs text-gray-500 mt-1">订单：${r.order_id || ''}</div>
+                        </div>
+                        <div class="flex flex-col gap-2 items-end">
+                          <button class="editBtn text-indigo-600 text-sm">编辑</button>
+                          <button class="delBtn text-red-600 text-sm">删除</button>
+                        </div>`;
+        // handlers
+        row.querySelector('.editBtn').addEventListener('click', () => openEditRecord(idx));
+        row.querySelector('.delBtn').addEventListener('click', () => confirmDelete(idx));
+        recordsList.appendChild(row);
+      });
+    }
+
+    manageSelect.addEventListener('change', loadRecordsForSelected);
+    manageSearch.addEventListener('input', () => renderRecordsList(currentRecords));
+
+    // create library file
+    createFileBtn.addEventListener('click', async () => {
+      const name = (newFileName.value||'').trim();
+      if(!name) { alert('请输入文件名'); return; }
+      try{
+        const res = await fetchJson('/api/suspects/' + encodeURIComponent(name), {
+          method: 'POST',
+          headers: {'Content-Type':'application/json'},
+          body: JSON.stringify({ data: [] })
+        });
+        if(res.error) throw new Error(res.error);
+        await loadSuspectOptions();
+        alert('创建成功');
+      } catch(err){
+        alert('创建失败：' + err.message);
+      }
+    });
+
+    // add / edit record
+    addRecordBtn.addEventListener('click', openAddRecord);
+    closeRecordModal.addEventListener('click', ()=> hide(recordModal));
+    cancelRecord.addEventListener('click', ()=> hide(recordModal));
+
+    function openAddRecord(){
+      editingIndex = -1;
+      recordModalTitle.textContent = '添加记录';
+      f_name.value=''; f_phone.value=''; f_address.value=''; f_store.value=''; f_order_id.value=''; f_info_url.value=''; f_note.value='';
+      show(recordModal);
+    }
+
+    function openEditRecord(idx){
+      editingIndex = idx;
+      const r = currentRecords[idx];
+      if(!r) return;
+      recordModalTitle.textContent = '编辑记录';
+      f_name.value = r.name || '';
+      f_phone.value = r.phone || '';
+      f_address.value = r.address || '';
+      f_store.value = r.store || '';
+      f_order_id.value = r.order_id || '';
+      f_info_url.value = r.info_url || '';
+      f_note.value = r.note || '';
+      show(recordModal);
+    }
+
+    saveRecord.addEventListener('click', async () => {
+      if(!currentSuspectFile){ alert('请先选择或创建客户库'); return; }
+      const payload = {
+        name: (f_name.value||'').trim(),
+        phone: (f_phone.value||'').trim(),
+        address: (f_address.value||'').trim(),
+        store: (f_store.value||'').trim(),
+        order_id: (f_order_id.value||'').trim(),
+        note: (f_note.value||'').trim(),
+        info_url: (f_info_url.value||'').trim()
+      };
+      try {
+        if(editingIndex === -1){
+          const res = await fetchJson('/api/suspects/' + encodeURIComponent(currentSuspectFile) + '/records', {
+            method: 'POST',
+            headers: {'Content-Type':'application/json'},
+            body: JSON.stringify(payload)
+          });
+          if(res.error) throw new Error(res.error);
+          alert('添加成功');
+        } else {
+          const res = await fetchJson('/api/suspects/' + encodeURIComponent(currentSuspectFile) + '/records/' + editingIndex, {
+            method: 'PUT',
+            headers: {'Content-Type':'application/json'},
+            body: JSON.stringify(payload)
+          });
+          if(res.error) throw new Error(res.error);
+          alert('更新成功');
+        }
+        hide(recordModal);
+        await loadRecordsForSelected();
+      } catch(err){
+        alert('保存失败：' + err.message);
+      }
+    });
+
+    // delete record with confirm
+    function confirmDelete(idx){
+      confirmText.textContent = '确认删除该记录？该操作不可恢复。';
+      show(confirmModal);
+      confirmYes.onclick = async () => {
+        try{
+          const res = await fetchJson('/api/suspects/' + encodeURIComponent(currentSuspectFile) + '/records/' + idx, { method: 'DELETE' });
+          if(res.error) throw new Error(res.error);
+          hide(confirmModal);
+          await loadRecordsForSelected();
+        } catch(err){
+          alert('删除失败：' + err.message);
+        }
+      };
+      confirmNo.onclick = () => hide(confirmModal);
+    }
+
+    // ---------- Init ----------
+    (async function init(){
+      await loadSuspectOptions();
+      // set default to analyze tab
+      tabAnalyze.click();
+      // set manage panel default data
+      await loadRecordsForSelected();
+    })();
+  </script>
+</body>
+</html>
\ No newline at end of file
