编辑页面

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);
  --ai-purple: #7c3aed; --ai-purple-light: #ede9fe; --ai-pink: #ec4899;
  --douyin: #fe2c55;
}
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.ai-entry::after { content: 'NEW'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 9px; padding: 2px 5px; border-radius: 3px; background: linear-gradient(135deg, var(--ai-purple), var(--ai-pink)); color: #fff; font-weight: 700; letter-spacing: .5px; }
.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); }
.stats-grid.col2 { grid-template-columns: repeat(2, 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; }
.btn-ai { background: linear-gradient(135deg, var(--ai-purple), var(--ai-pink)); color: #fff; font-size: 16px; padding: 14px 36px; border-radius: 10px; border: none; cursor: pointer; font-weight: 600; transition: all .3s; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 4px 20px rgba(124,58,237,.3); }
.btn-ai:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(124,58,237,.45); }
.btn-ai-sm { font-size: 13px; padding: 8px 18px; border-radius: 8px; }
.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; }
.tag-douyin { background: #ffe5ec; color: var(--douyin); }
.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); }

/* Radio Card */
.radio-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.radio-card { position: relative; }
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card label { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 16px; border: 2px solid var(--border); border-radius: 12px; cursor: pointer; transition: all .2s; background: #fff; text-align: center; }
.radio-card label:hover { border-color: var(--primary); background: var(--primary-light); }
.radio-card input:checked + label { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 0 0 3px rgba(26,115,232,.15); }
.radio-card .rc-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.radio-card .rc-icon.purple { background: #ede9fe; } .radio-card .rc-icon.green { background: #d1fae5; } .radio-card .rc-icon.orange { background: #fef3c7; }
.radio-card .rc-title { font-size: 14px; font-weight: 600; }
.radio-card .rc-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.radio-card .rc-check { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 10px; color: transparent; transition: all .2s; background: #fff; }
.radio-card input:checked + label .rc-check { border-color: var(--primary); background: var(--primary); color: #fff; }

/* Distributor load bar */
.load-bar-wrap { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.load-bar-wrap .lb-name { width: 70px; font-size: 13px; font-weight: 500; text-align: right; flex-shrink: 0; }
.load-bar-wrap .lb-bar { flex: 1; height: 10px; background: var(--border); border-radius: 5px; overflow: hidden; }
.load-bar-wrap .lb-bar .lb-fill { height: 100%; border-radius: 5px; transition: width .5s; }
.lb-fill.c1 { background: #1a73e8; } .lb-fill.c2 { background: #0d9488; } .lb-fill.c3 { background: #f59e0b; } .lb-fill.c4 { background: #8b5cf6; } .lb-fill.c5 { background: #ef4444; }
.load-bar-wrap .lb-count { width: 50px; font-size: 13px; font-weight: 600; text-align: left; }

/* Entry method radio in form */
.entry-method-radio { display: flex; gap: 12px; }
.entry-method-radio .em-option { position: relative; flex: 1; }
.entry-method-radio .em-option input { position: absolute; opacity: 0; pointer-events: none; }
.entry-method-radio .em-option label { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 2px solid var(--border); border-radius: 8px; cursor: pointer; transition: all .2s; font-size: 13px; background: #fff; }
.entry-method-radio .em-option label:hover { border-color: var(--primary); }
.entry-method-radio .em-option input:checked + label { border-color: var(--primary); background: var(--primary-light); color: var(--primary); font-weight: 500; }
.entry-method-radio .em-option label .em-icon { font-size: 18px; }
.entry-method-radio .em-option.douyin input:checked + label { border-color: var(--douyin); background: #fff0f3; color: var(--douyin); }

/* AI Hero (preserved) */
.ai-hero { background: linear-gradient(135deg, #0f0c29 0%, #302b63 40%, #24243e 100%); border-radius: 16px; padding: 48px 40px; position: relative; overflow: hidden; margin-bottom: 24px; color: #fff; }
.ai-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(124,58,237,.3) 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(236,72,153,.2) 0%, transparent 60%); }
.ai-hero .ai-hero-content { position: relative; z-index: 1; display: flex; align-items: center; gap: 40px; }
.ai-hero .ai-hero-text { flex: 1; }
.ai-hero .ai-hero-text h2 { font-size: 28px; font-weight: 700; margin-bottom: 12px; background: linear-gradient(135deg, #a78bfa, #f472b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.ai-hero .ai-hero-text p { font-size: 15px; opacity: .85; line-height: 1.6; margin-bottom: 8px; }
.ai-hero .ai-hero-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 20px; padding: 6px 16px; font-size: 12px; margin-top: 12px; }
.ai-hero .ai-hero-icon { width: 140px; height: 140px; background: linear-gradient(135deg, rgba(124,58,237,.3), rgba(236,72,153,.3)); border-radius: 28px; display: flex; align-items: center; justify-content: center; font-size: 64px; flex-shrink: 0; border: 1px solid rgba(255,255,255,.1); }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.feature-card { background: var(--card-bg); border-radius: 12px; padding: 24px; box-shadow: var(--shadow); text-align: center; transition: all .3s; cursor: pointer; border: 1px solid transparent; }
.feature-card:hover { border-color: var(--ai-purple); transform: translateY(-4px); box-shadow: 0 8px 30px rgba(124,58,237,.1); }
.feature-card .fc-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 24px; }
.feature-card .fc-icon.purple { background: #ede9fe; } .feature-card .fc-icon.pink { background: #fce7f3; }
.feature-card .fc-icon.blue { background: #dbeafe; } .feature-card .fc-icon.green { background: #d1fae5; }
.feature-card h4 { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.feature-card p { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.launch-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.launch-card { background: var(--card-bg); border-radius: 12px; box-shadow: var(--shadow); padding: 24px; }
.launch-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 16px; }
.launch-card .quick-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; cursor: pointer; transition: all .15s; }
.launch-card .quick-item:hover { background: #f8fafc; }
.launch-card .quick-item .qi-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.launch-card .quick-item .qi-icon.purple { background: #ede9fe; } .launch-card .quick-item .qi-icon.pink { background: #fce7f3; } .launch-card .quick-item .qi-icon.blue { background: #dbeafe; }
.launch-card .quick-item .qi-info { flex: 1; } .launch-card .quick-item .qi-info .qi-title { font-size: 13px; font-weight: 500; } .launch-card .quick-item .qi-info .qi-desc { font-size: 11px; color: var(--text-secondary); } .launch-card .quick-item .qi-arrow { color: var(--text-secondary); font-size: 14px; }
.project-card { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.project-card:last-child { border-bottom: none; }
.project-card .pc-thumb { width: 80px; height: 48px; border-radius: 6px; background: linear-gradient(135deg, #7c3aed, #a78bfa); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; flex-shrink: 0; }
.project-card .pc-thumb.p2 { background: linear-gradient(135deg, #ec4899, #f472b6); } .project-card .pc-thumb.p3 { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
.project-card .pc-info { flex: 1; } .project-card .pc-info .pc-title { font-size: 13px; font-weight: 500; margin-bottom: 2px; } .project-card .pc-info .pc-meta { font-size: 11px; color: var(--text-secondary); } .project-card .pc-status { font-size: 11px; }

@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); }
  .ai-hero .ai-hero-content { flex-direction: column; text-align: center; } .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .launch-panel { grid-template-columns: 1fr; } .radio-cards { grid-template-columns: 1fr; }
  .entry-method-radio { 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 ai-entry" data-page="aimix"><span>🎬</span> AI混剪</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="entryMethodFilter"><option value="">全部录入方式</option><option value="douyin">抖音自动带入</option><option value="manual">手动录入</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><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-group"><label><span class="required">*</span> 录入方式</label><div class="entry-method-radio">
        <div class="em-option douyin"><input type="radio" name="entryMethod" id="emDouyin" value="douyin" onchange="onEntryMethodChange('douyin')"><label for="emDouyin"><span class="em-icon">📱</span> 抖音自动带入</label></div>
        <div class="em-option"><input type="radio" name="entryMethod" id="emManual" value="manual" checked onchange="onEntryMethodChange('manual')"><label for="emManual"><span class="em-icon">✏️</span> 手动录入</label></div>
      </div></div>
      <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	成功
编辑页面

👤 客户详情

📋 跟进记录

🎬 AI智能混剪平台

智能脚本生成

模板一键套用

批量混剪生成

一键多平台发布

⚡ 快捷入口

🕐 最近混剪项目

📥 批量导入客户数据

📋 字段映射预览

📋 导入历史

📤 数据导出

📋 导出历史

📈 统计报表

📊 服务类型分布

🎯 客户来源分析

📈 月度新增客户趋势

✅ 跟进完成率统计

💾 数据备份与恢复

⏰ 自动备份策略

📦 备份保留

☁️ 备份位置

📋 备份历史

🔐 角色权限配置

📋 客户分配方式

📊 当前顾问客户负载

🕐 最近分配记录

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

👤 客户详情

📋 跟进记录

🎬 AI智能混剪平台

智能脚本生成

模板一键套用

批量混剪生成

一键多平台发布

⚡ 快捷入口

🕐 最近混剪项目

📥 批量导入客户数据

📋 字段映射预览

📋 导入历史

📤 数据导出

📋 导出历史

📈 统计报表

📊 服务类型分布

🎯 客户来源分析

📈 月度新增客户趋势

✅ 跟进完成率统计

💾 数据备份与恢复

⏰ 自动备份策略

📦 备份保留

☁️ 备份位置

📋 备份历史

🔐 角色权限配置

📋 客户分配方式

📊 当前顾问客户负载

🕐 最近分配记录

📝 填写跟进记录 -

👥 添加人员
