编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>汽车后市场客户管理平台 - 交互原型</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --primary: #1a73e8; --primary-light: #e8f0fe; --success: #0d9488; --warning: #f59e0b;
  --danger: #ef4444; --bg: #f1f5f9; --card-bg: #fff; --text: #1e293b;
  --text-secondary: #64748b; --border: #e2e8f0; --sidebar-bg: #0f172a;
  --sidebar-text: #cbd5e1; --radius: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); display: flex; min-height: 100vh; }
.sidebar { width: 220px; background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; }
.sidebar-logo { padding: 20px; font-size: 16px; font-weight: 700; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: 8px; }
.sidebar-logo .icon { width: 32px; height: 32px; background: var(--primary); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; cursor: pointer; transition: all .15s; font-size: 14px; color: var(--sidebar-text); border-left: 3px solid transparent; }
.nav-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-item.active { background: rgba(26,115,232,.2); color: #fff; border-left-color: var(--primary); }
.nav-item .badge { margin-left: auto; background: var(--danger); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 10px; }
.nav-divider { height: 1px; background: rgba(255,255,255,.08); margin: 8px 16px; }
.main { flex: 1; margin-left: 220px; padding: 24px; min-width: 0; }
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.header h1 { font-size: 22px; font-weight: 600; }
.header-right { display: flex; align-items: center; gap: 12px; }
.user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stats-grid.col3 { grid-template-columns: repeat(3, 1fr); }
.stat-card { background: var(--card-bg); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.stat-card .stat-label { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.stat-card .stat-value { font-size: 28px; font-weight: 700; }
.stat-card .stat-change { font-size: 12px; margin-top: 6px; }
.stat-card .stat-change.up { color: var(--success); }
.stat-card .stat-change.down { color: var(--danger); }
.card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 20px; }
.card-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.card-header h2 { font-size: 16px; font-weight: 600; }
.card-body { padding: 20px; }
.card-body.no-padding { padding: 0; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; transition: all .15s; }
.btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: #1557b0; }
.btn-outline { background: #fff; color: var(--primary); border: 1px solid var(--primary); } .btn-outline:hover { background: var(--primary-light); }
.btn-ghost { background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background: #f1f5f9; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-danger { background: var(--danger); color: #fff; } .btn-success { background: var(--success); color: #fff; }
.btn-warning { background: var(--warning); color: #fff; }
.btn-lg { padding: 12px 24px; font-size: 15px; }
.search-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.search-input { padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; width: 240px; outline: none; }
.search-input:focus { border-color: var(--primary); }
.select-input { padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; outline: none; background: #fff; cursor: pointer; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; padding: 12px 16px; background: #f8fafc; color: var(--text-secondary); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 12px 16px; border-bottom: 1px solid var(--border); }
tr:hover td { background: #f8fafc; }
tr.clickable { cursor: pointer; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.tag-blue { background: #dbeafe; color: #1d4ed8; } .tag-green { background: #d1fae5; color: #065f46; }
.tag-orange { background: #fef3c7; color: #92400e; } .tag-red { background: #fee2e2; color: #991b1b; }
.tag-gray { background: #f1f5f9; color: #475569; } .tag-purple { background: #ede9fe; color: #6d28d9; }
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 200; align-items: center; justify-content: center; }
.modal-overlay.show { display: flex; }
.modal { background: #fff; border-radius: 12px; width: 640px; max-height: 80vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.15); }
.modal-lg { width: 800px; }
.modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: #fff; z-index: 10; border-radius: 12px 12px 0 0; }
.modal-header h3 { font-size: 17px; font-weight: 600; }
.modal-close { width: 32px; height: 32px; border-radius: 6px; border: none; background: transparent; cursor: pointer; font-size: 18px; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; }
.modal-close:hover { background: #f1f5f9; }
.modal-body { padding: 24px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--text); }
.form-group label .required { color: var(--danger); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.form-input, .form-textarea, .form-select { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; outline: none; font-family: inherit; }
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,115,232,.1); }
.form-textarea { resize: vertical; min-height: 80px; }
.toggle { position: relative; display: inline-block; width: 40px; height: 22px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .slider { position: absolute; cursor: pointer; inset: 0; background: #cbd5e1; border-radius: 22px; transition: .2s; }
.toggle .slider::before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.toggle input:checked + .slider { background: var(--primary); }
.toggle input:checked + .slider::before { transform: translateX(18px); }
.timeline { position: relative; padding-left: 24px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: var(--border); }
.timeline-item { position: relative; margin-bottom: 20px; }
.timeline-item::before { content: ''; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--primary); }
.timeline-item.type-visit::before { background: var(--success); box-shadow: 0 0 0 2px var(--success); }
.timeline-item.type-phone::before { background: var(--warning); box-shadow: 0 0 0 2px var(--warning); }
.timeline-header { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
.timeline-header .time { font-size: 12px; color: var(--text-secondary); }
.timeline-content { background: #f8fafc; border-radius: 6px; padding: 12px; font-size: 13px; }
.timeline-content p { margin-bottom: 4px; }
.timeline-content .meta { font-size: 12px; color: var(--text-secondary); }
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
.tab { padding: 10px 20px; cursor: pointer; font-size: 14px; color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 500; }
.settings-layout { display: flex; gap: 20px; min-height: calc(100vh - 120px); }
.settings-subnav { width: 180px; flex-shrink: 0; background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px 0; }
.settings-subnav .subnav-item { padding: 10px 16px; cursor: pointer; font-size: 13px; color: var(--text-secondary); border-left: 3px solid transparent; transition: all .15s; display: flex; align-items: center; gap: 8px; }
.settings-subnav .subnav-item:hover { background: #f8fafc; color: var(--text); }
.settings-subnav .subnav-item.active { background: var(--primary-light); color: var(--primary); border-left-color: var(--primary); font-weight: 500; }
.settings-content { flex: 1; min-width: 0; }
.perm-table th:first-child, .perm-table td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; }
.perm-table tr:hover td:first-child { background: #f8fafc; }
.perm-table th, .perm-table td { text-align: center; }
.perm-table td:first-child { text-align: left; font-weight: 500; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.detail-item { display: flex; flex-direction: column; }
.detail-item .detail-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 2px; }
.detail-item .detail-value { font-size: 14px; }
.section { display: none; } .section.active { display: block; }
.settings-panel { display: none; } .settings-panel.active { display: block; }
.empty-state { text-align: center; padding: 48px 20px; color: var(--text-secondary); }
.empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-state p { font-size: 14px; }
.pagination { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; font-size: 13px; color: var(--text-secondary); }
.pagination-btns { display: flex; gap: 4px; }
.pagination-btns button { padding: 6px 12px; border: 1px solid var(--border); background: #fff; border-radius: 4px; cursor: pointer; font-size: 12px; }
.pagination-btns button:hover { background: #f1f5f9; }
.pagination-btns button.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.toast { position: fixed; top: 20px; right: 20px; background: #0f172a; color: #fff; padding: 12px 20px; border-radius: 8px; font-size: 13px; z-index: 999; opacity: 0; transform: translateY(-10px); transition: all .3s; }
.toast.show { opacity: 1; transform: translateY(0); }

/* Upload Zone */
.upload-zone { border: 2px dashed var(--border); border-radius: 12px; padding: 40px; text-align: center; transition: all .2s; cursor: pointer; background: #fafbfc; }
.upload-zone:hover { border-color: var(--primary); background: var(--primary-light); }
.upload-zone .upload-icon { font-size: 48px; margin-bottom: 12px; }
.upload-zone .upload-text { font-size: 14px; color: var(--text); margin-bottom: 4px; }
.upload-zone .upload-hint { font-size: 12px; color: var(--text-secondary); }

/* Progress */
.progress-bar { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; margin-top: 12px; }
.progress-bar .fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width .3s; width: 0%; }
.progress-info { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

/* Chart placeholders */
.chart-bar { display: flex; align-items: flex-end; gap: 12px; height: 200px; padding: 0 8px; }
.chart-bar .bar-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.chart-bar .bar-item .bar { width: 100%; max-width: 60px; border-radius: 6px 6px 0 0; transition: all .3s; cursor: pointer; position: relative; min-width: 40px; }
.chart-bar .bar-item .bar:hover { opacity: .8; }
.chart-bar .bar-item .bar-val { font-size: 12px; font-weight: 600; }
.chart-bar .bar-item .bar-label { font-size: 11px; color: var(--text-secondary); text-align: center; }
.chart-colors .c1 { background: #1a73e8; } .chart-colors .c2 { background: #0d9488; }
.chart-colors .c3 { background: #f59e0b; } .chart-colors .c4 { background: #ef4444; }
.chart-colors .c5 { background: #8b5cf6; } .chart-colors .c6 { background: #06b6d4; }

/* Donut chart */
.donut-wrap { display: flex; align-items: center; gap: 32px; justify-content: center; }
.donut { width: 160px; height: 160px; border-radius: 50%; position: relative; }
.donut-center { position: absolute; inset: 30px; background: #fff; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-center .total { font-size: 24px; font-weight: 700; }
.donut-center .label { font-size: 12px; color: var(--text-secondary); }
.legend { display: flex; flex-direction: column; gap: 8px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.legend-item .pct { color: var(--text-secondary); margin-left: auto; }

/* Backup */
.backup-card { display: flex; align-items: center; gap: 20px; padding: 24px; background: linear-gradient(135deg, #1a73e8, #0d9488); border-radius: 12px; color: #fff; margin-bottom: 20px; }
.backup-card .backup-info { flex: 1; }
.backup-card .backup-info h3 { font-size: 18px; margin-bottom: 8px; }
.backup-card .backup-info p { font-size: 13px; opacity: .85; }
.backup-card .btn-backup { background: #fff; color: var(--primary); padding: 12px 28px; font-size: 15px; font-weight: 600; border-radius: 8px; border: none; cursor: pointer; }
.backup-card .btn-backup:hover { background: #f0f4ff; }
.backup-schedule { display: flex; gap: 24px; margin-top: 20px; }
.backup-schedule .schedule-item { flex: 1; background: #f8fafc; border-radius: 8px; padding: 16px; }
.backup-schedule .schedule-item h4 { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.backup-schedule .schedule-item p { font-size: 14px; }

/* Mapping preview */
.mapping-table { font-size: 13px; }
.mapping-table th { font-size: 12px; padding: 10px 12px; }
.mapping-table td { padding: 10px 12px; }
.mapping-table .status-ok { color: var(--success); }
.mapping-table .status-warn { color: var(--warning); }

@media (max-width: 1200px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .settings-layout { flex-direction: column; }
  .settings-subnav { width: 100%; display: flex; flex-direction: row; overflow-x: auto; padding: 4px; }
  .settings-subnav .subnav-item { border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; }
  .settings-subnav .subnav-item.active { border-left-color: transparent; border-bottom-color: var(--primary); }
  .backup-schedule { flex-direction: column; }
}
</style>
</head>
<body>

<aside class="sidebar">
  <div class="sidebar-logo"><div class="icon">🚗</div>车服管家</div>
  <nav class="sidebar-nav">
    <div class="nav-item active" data-page="dashboard"><span>📊</span> 工作台</div>
    <div class="nav-item" data-page="customers"><span>👥</span> 客户管理</div>
    <div class="nav-item" data-page="followups"><span>📋</span> 跟进记录<span class="badge" id="pendingBadge">5</span></div>
    <div class="nav-item" data-page="add-customer"><span>➕</span> 录入客户</div>
    <div class="nav-divider"></div>
    <div class="nav-item" data-page="data-mgmt"><span>📊</span> 数据管理</div>
    <div class="nav-item" data-page="settings"><span>⚙️</span> 系统设置</div>
  </nav>
</aside>

<main class="main">
  <div class="header">
    <h1 id="pageTitle">📊 工作台</h1>
    <div class="header-right">
      <span style="font-size:13px;color:var(--text-secondary)">2026-06-22 周一</span>
      <div class="user-avatar">张</div>
    </div>
  </div>

  <!-- ===== Dashboard ===== -->
  <section class="section active" id="section-dashboard">
    <div class="stats-grid">
      <div class="stat-card"><div class="stat-label">👥 客户总数</div><div class="stat-value">186</div><div class="stat-change up">↑ 12 本月新增</div></div>
      <div class="stat-card"><div class="stat-label">📋 今日待跟进</div><div class="stat-value" style="color:var(--warning)">5</div><div class="stat-change down">3 已逾期</div></div>
      <div class="stat-card"><div class="stat-label">✅ 本月已完成跟进</div><div class="stat-value" style="color:var(--success)">43</div><div class="stat-change up">↑ 8% 环比</div></div>
      <div class="stat-card"><div class="stat-label">📈 本月转化率</div><div class="stat-value" style="color:var(--primary)">24%</div><div class="stat-change up">↑ 3% 环比</div></div>
    </div>
    <div class="card">
      <div class="card-header"><h2>⏰ 今日待跟进客户</h2><button class="btn btn-outline btn-sm" onclick="switchPage('followups')">查看全部</button></div>
      <div class="card-body no-padding"><div class="table-wrap"><table>
        <thead><tr><th>客户</th><th>电话</th><th>车牌号</th><th>车型</th><th>跟进类型</th><th>计划时间</th><th>状态</th><th>操作</th></tr></thead>
        <tbody>
          <tr><td>李明华</td><td>138****6789</td><td>京A·88888</td><td>宝马5系</td><td><span class="tag tag-blue">电话回访</span></td><td>14:00</td><td><span class="tag tag-orange">待跟进</span></td><td><button class="btn btn-sm btn-primary" onclick="openFollowupModal('C001','李明华')">跟进</button></td></tr>
          <tr><td>王建国</td><td>139****8901</td><td>沪B·66666</td><td>奥迪A6L</td><td><span class="tag tag-green">到店接待</span></td><td>15:30</td><td><span class="tag tag-orange">待跟进</span></td><td><button class="btn btn-sm btn-primary" onclick="openFollowupModal('C002','王建国')">跟进</button></td></tr>
          <tr><td>赵小燕</td><td>136****3456</td><td>粤C·12345</td><td>奔驰C级</td><td><span class="tag tag-blue">电话回访</span></td><td>16:00</td><td><span class="tag tag-red">已逾期</span></td><td><button class="btn btn-sm btn-danger" onclick="openFollowupModal('C003','赵小燕')">跟进</button></td></tr>
          <tr><td>陈志强</td><td>135****7890</td><td>苏D·99999</td><td>丰田凯美瑞</td><td><span class="tag tag-blue">电话回访</span></td><td>16:30</td><td><span class="tag tag-orange">待跟进</span></td><td><button class="btn btn-sm btn-primary" onclick="openFollowupModal('C004','陈志强')">跟进</button></td></tr>
          <tr><td>刘芳芳</td><td>137****2345</td><td>浙E·77777</td><td>大众迈腾</td><td><span class="tag tag-green">到店接待</span></td><td>17:00</td><td><span class="tag tag-orange">待跟进</span></td><td><button class="btn btn-sm btn-primary" onclick="openFollowupModal('C005','刘芳芳')">跟进</button></td></tr>
        </tbody>
      </table></div></div>
    </div>
    <div class="card">
      <div class="card-header"><h2>📝 最近跟进动态</h2></div>
      <div class="card-body"><div class="timeline">
        <div class="timeline-item type-phone"><div class="timeline-header"><span class="tag tag-blue">电话回访</span><span class="time">今天 10:30 · 张经理</span></div><div class="timeline-content"><p><strong>客户：周建国</strong> · 电话回访保养满意度</p><p>客户反馈对刹车片更换服务满意，预约下次保养时间12月15日</p></div></div>
        <div class="timeline-item type-visit"><div class="timeline-header"><span class="tag tag-green">到店接待</span><span class="time">今天 09:15 · 李主管</span></div><div class="timeline-content"><p><strong>客户：孙海龙</strong> · 到店做四轮定位</p><p>车辆到店进行四轮定位和动平衡，已处理完成</p></div></div>
        <div class="timeline-item type-phone"><div class="timeline-header"><span class="tag tag-blue">电话回访</span><span class="time">昨天 16:00 · 王顾问</span></div><div class="timeline-content"><p><strong>客户：吴晓明</strong> · 保险到期提醒</p><p>已提醒客户车险将于7月15日到期，客户表示下周到店续保</p></div></div>
        <div class="timeline-item type-visit"><div class="timeline-header"><span class="tag tag-green">到店接待</span><span class="time">昨天 14:30 · 张经理</span></div><div class="timeline-content"><p><strong>客户：郑浩然</strong> · 事故维修接待</p><p>车辆右前侧碰撞损伤，已完成定损，客户同意维修方案，预计工期5天</p></div></div>
      </div></div>
    </div>
  </section>

  <!-- ===== Customer List ===== -->
  <section class="section" id="section-customers">
    <div class="card">
      <div class="card-header">
        <div class="search-bar">
          <input type="text" class="search-input" placeholder="🔍 搜索姓名/电话/车牌..." oninput="filterCustomers()" id="customerSearch">
          <select class="select-input" onchange="filterCustomers()" id="customerFilter"><option value="">全部状态</option><option value="active">活跃客户</option><option value="inactive">沉默客户</option><option value="lost">已流失</option></select>
          <select class="select-input" onchange="filterCustomers()" id="sourceFilter"><option value="">全部来源</option><option value="线上推广">线上推广</option><option value="老客介绍">老客介绍</option><option value="自然到店">自然到店</option><option value="合作渠道">合作渠道</option></select>
        </div>
        <button class="btn btn-primary" onclick="switchPage('add-customer')">➕ 新增客户</button>
      </div>
      <div class="card-body no-padding"><div class="table-wrap"><table><thead><tr><th>客户姓名</th><th>电话</th><th>车牌号</th><th>车辆型号</th><th>来源</th><th>状态</th><th>最近跟进</th><th>操作</th></tr></thead><tbody id="customerTableBody"></tbody></table></div>
        <div class="pagination"><span>共 <strong id="customerCount">12</strong> 条记录</span><div class="pagination-btns"><button>上一页</button><button class="active">1</button><button>2</button><button>3</button><button>下一页</button></div></div></div>
    </div>
  </section>

  <!-- ===== Follow-ups ===== -->
  <section class="section" id="section-followups">
    <div class="tabs">
      <div class="tab active" data-followup-tab="pending" onclick="switchFollowupTab('pending')">⏰ 待跟进 (5)</div>
      <div class="tab" data-followup-tab="completed" onclick="switchFollowupTab('completed')">✅ 已完成 (43)</div>
      <div class="tab" data-followup-tab="all" onclick="switchFollowupTab('all')">📋 全部记录 (86)</div>
    </div>
    <div class="card"><div class="card-body no-padding"><div class="table-wrap"><table><thead><tr><th>客户</th><th>跟进时间</th><th>跟进方式</th><th>跟进内容</th><th>跟进人</th><th>状态</th><th>操作</th></tr></thead><tbody id="followupTableBody"></tbody></table></div></div></div>
  </section>

  <!-- ===== Add Customer ===== -->
  <section class="section" id="section-add-customer">
    <div class="card"><div class="card-header"><h2>📝 客户信息录入</h2></div><div class="card-body">
      <form id="customerForm" onsubmit="submitCustomer(event)">
        <div class="form-row">
          <div class="form-group"><label><span class="required">*</span> 客户姓名</label><input type="text" class="form-input" placeholder="请输入客户姓名" required id="inputName"></div>
          <div class="form-group"><label><span class="required">*</span> 手机号码</label><input type="tel" class="form-input" placeholder="请输入手机号码" required id="inputPhone"></div>
        </div>
        <div class="form-row">
          <div class="form-group"><label><span class="required">*</span> 车牌号码</label><input type="text" class="form-input" placeholder="例：京A·88888" required id="inputPlate"></div>
          <div class="form-group"><label>车架号(VIN)</label><input type="text" class="form-input" placeholder="17位车架号" id="inputVin"></div>
        </div>
        <div class="form-row">
          <div class="form-group"><label><span class="required">*</span> 车辆品牌型号</label><input type="text" class="form-input" placeholder="例：宝马5系 530Li" required id="inputModel"></div>
          <div class="form-group"><label>车型年份</label><input type="text" class="form-input" placeholder="例：2023款" id="inputYear"></div>
        </div>
        <div class="form-row">
          <div class="form-group"><label>客户来源</label><select class="form-select" id="inputSource"><option value="">请选择</option><option value="线上推广">线上推广</option><option value="老客介绍">老客介绍</option><option value="自然到店">自然到店</option><option value="合作渠道">合作渠道</option><option value="其他">其他</option></select></div>
          <div class="form-group"><label>意向服务类型</label><select class="form-select" id="inputServiceType"><option value="">请选择</option><option value="保养">保养</option><option value="维修">维修</option><option value="保险">保险</option><option value="美容">美容</option><option value="改装">改装</option><option value="其他">其他</option></select></div>
        </div>
        <div class="form-group"><label>备注信息</label><textarea class="form-textarea" placeholder="客户需求、车辆状况等补充信息..." id="inputRemark">
导入时间	文件名	总条数	成功	失败	操作人	状态
2026-06-20 15:30	客户导入_6月.xlsx	86	84	2	张伟明	完成
2026-06-15 10:12	新客户数据.csv	45	45	0	李建国	完成
2026-06-08 14:22	批量导入_测试.xlsx	200	198	2	张伟明	部分完成
导出时间	数据类型	格式	条数	操作人	状态	操作
2026-06-21 11:08	客户数据	.xlsx	186	李建国	完成
2026-06-18 16:45	跟进记录	.csv	320	张伟明	完成
备份时间	备份类型	文件大小	状态
2026-06-21 02:00	自动备份	24.5 MB	成功
2026-06-20 02:00	自动备份	24.2 MB	成功
2026-06-19 02:00	自动备份	24.1 MB	成功
2026-06-18 16:30	手动备份	24.0 MB	成功
编辑页面

👤 客户详情

📋 跟进记录

📥 批量导入客户数据

📋 字段映射预览

📋 导入历史

📤 数据导出

📋 导出历史

📈 统计报表

📊 服务类型分布

🎯 客户来源分析

📈 月度新增客户趋势

✅ 跟进完成率统计

💾 数据备份与恢复

⏰ 自动备份策略

📦 备份保留

☁️ 备份位置

📋 备份历史

🔐 角色权限配置

Excel列名	系统字段	匹配状态	示例数据
客户姓名	客户姓名	✅ 已匹配	张三
手机号码	手机号码	✅ 已匹配	138****6789
车牌号	车牌号码	✅ 已匹配	京A·88888
车辆型号	车辆品牌型号	✅ 已匹配	宝马5系
来源渠道	客户来源	⚠️ 待确认	线上推广
备注	备注信息	✅ 已匹配	意向保养客户
编辑页面

👤 客户详情

📋 跟进记录

📥 批量导入客户数据

📋 字段映射预览

📋 导入历史

📤 数据导出

📋 导出历史

📈 统计报表

📊 服务类型分布

🎯 客户来源分析

📈 月度新增客户趋势

✅ 跟进完成率统计

💾 数据备份与恢复

⏰ 自动备份策略

📦 备份保留

☁️ 备份位置

📋 备份历史

🔐 角色权限配置

📝 填写跟进记录 -

👥 添加人员
