编辑页面

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;

  --qianwen: #6c47ff; --doubao: #00b578; --yuanbao: #1677ff; --deepseek: #4f46e5;
}
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; }
  .geo-platform-grid { grid-template-columns: 1fr; }
  .geo-editor { grid-template-columns: 1fr; }
}

/* ===== GEO Beauty Styles V2 ===== */
.geo-content-area { margin-bottom: 24px; }
.geo-content-area .geo-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.geo-content-area .editor-pane { background: var(--card-bg); border-radius: 14px; box-shadow: var(--shadow); padding: 0; overflow: hidden; border: 1px solid var(--border); }
.editor-pane-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid #f0f0f0; background: linear-gradient(135deg, #fafbfc, #f5f7fa); }
.editor-pane-header h3 { font-size: 15px; font-weight: 600; margin: 0; }
.editor-badge { font-size: 11px; color: var(--text-secondary); background: #f1f5f9; padding: 4px 12px; border-radius: 20px; }
.geo-content-area .editor-pane textarea { width: 100%; min-height: 140px; border: none; border-bottom: 1px solid #f0f0f0; padding: 18px 24px; font-size: 13.5px; font-family: inherit; resize: vertical; outline: none; line-height: 1.8; color: var(--text); background: #fff; transition: all .2s; }
.geo-content-area .editor-pane textarea:focus { background: #fefefe; box-shadow: inset 0 0 0 2px rgba(26,115,232,.06); }
.geo-content-area .editor-pane textarea::placeholder { color: #b0bac5; }
.geo-platform-checks-wrap { padding: 16px 24px; border-bottom: 1px solid #f0f0f0; }
.gpc-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 10px; color: var(--text); }
.geo-platform-checks { display: flex; gap: 10px; flex-wrap: wrap; }
.geo-platform-check label { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1.5px solid #e8ecf1; border-radius: 10px; cursor: pointer; font-size: 13px; transition: all .2s; background: #fff; white-space: nowrap; user-select: none; }
.geo-platform-check label:hover { border-color: #c4d0e0; background: #f8faff; transform: translateY(-1px); }
.geo-platform-check input:checked + label { border-color: var(--primary); background: #f0f6ff; font-weight: 500; box-shadow: 0 2px 8px rgba(26,115,232,.12); }
.geo-platform-check label .gp-icon { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff !important; flex-shrink: 0; }
.geo-action-bar { padding: 14px 24px; display: flex; gap: 10px; align-items: center; background: #fafbfc; border-top: 1px solid #f0f0f0; }
.geo-action-bar .btn { flex: 1; justify-content: center; min-width: 80px; }
.trends-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 20px 24px; }
.trend-card { background: #f8f9fc; border-radius: 12px; padding: 16px; border: 1px solid #eeeef2; }
.trend-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.trend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.trend-dot.tq { background: var(--qianwen); } .trend-dot.td { background: var(--doubao); } .trend-dot.ty { background: var(--yuanbao); } .trend-dot.tds { background: var(--deepseek); }
.trend-name { font-size: 13px; font-weight: 600; }
.trend-total { font-size: 11px; color: var(--text-secondary); margin-left: auto; font-weight: 600; }
.trend-bars { display: flex; align-items: flex-end; gap: 5px; height: 70px; margin-bottom: 8px; }
.trend-bars .tb { flex: 1; border-radius: 3px 3px 0 0; min-height: 4px; transition: height .4s ease; position: relative; }
.trend-qianwen .tb { background: linear-gradient(to top, var(--qianwen), rgba(108,71,255,.35)); }
.trend-doubao .tb { background: linear-gradient(to top, var(--doubao), rgba(0,181,120,.35)); }
.trend-yuanbao .tb { background: linear-gradient(to top, var(--yuanbao), rgba(22,119,255,.35)); }
.trend-deepseek .tb { background: linear-gradient(to top, var(--deepseek), rgba(79,70,229,.35)); }
.trend-labels { display: flex; justify-content: space-between; font-size: 10px; color: #a0aab8; }
.geo-platform-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 24px; }
.geo-platform-card { background: var(--card-bg); border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,.05), 0 1px 4px rgba(0,0,0,.03); overflow: hidden; border: 1px solid #eef0f4; transition: all .3s cubic-bezier(.25,.46,.45,.94); position: relative; }
.geo-platform-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; opacity: 0; transition: opacity .3s; }
.geo-platform-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.1), 0 4px 12px rgba(0,0,0,.04); border-color: transparent; }
.geo-platform-card:hover::before { opacity: 1; }
#gpQianwen::before { background: linear-gradient(90deg, var(--qianwen), #9b7dff); }
#gpDoubao::before { background: linear-gradient(90deg, var(--doubao), #4cdba0); }
#gpYuanbao::before { background: linear-gradient(90deg, var(--yuanbao), #69b1ff); }
#gpDeepseek::before { background: linear-gradient(90deg, var(--deepseek), #818cf8); }
.geo-platform-card .gp-header { padding: 22px 24px; display: flex; justify-content: space-between; align-items: center; }
.geo-platform-card .gp-logo { display: flex; align-items: center; gap: 14px; }
.geo-platform-card .gp-logo .gp-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.gp-icon.qianwen { background: linear-gradient(135deg, var(--qianwen), #9b7dff); }
.gp-icon.doubao { background: linear-gradient(135deg, var(--doubao), #4cdba0); }
.gp-icon.yuanbao { background: linear-gradient(135deg, var(--yuanbao), #69b1ff); }
.gp-icon.deepseek { background: linear-gradient(135deg, var(--deepseek), #818cf8); }
.geo-platform-card .gp-name { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.geo-platform-card .gp-name small { display: block; font-size: 11.5px; color: var(--text-secondary); font-weight: 400; margin-top: 2px; line-height: 1.4; }
.geo-platform-card .gp-status { display: flex; align-items: center; gap: 10px; }
.geo-platform-card .gp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid #f0f2f5; background: #fafbfd; }
.geo-platform-card .gp-stat { padding: 16px 14px; text-align: center; border-right: 1px solid #f0f2f5; transition: background .2s; }
.geo-platform-card .gp-stat:last-child { border-right: none; }
.geo-platform-card .gp-stat:hover { background: #f5f7fa; }
.geo-platform-card .gp-stat .gps-val { font-size: 20px; font-weight: 700; margin-bottom: 3px; letter-spacing: -.02em; }
.geo-platform-card .gp-stat .gps-label { font-size: 11px; color: #8c95a4; text-transform: uppercase; letter-spacing: .03em; }
.geo-platform-card .gp-actions { padding: 16px 24px; display: flex; gap: 8px; border-top: 1px solid #f0f2f5; flex-wrap: wrap; background: #fafbfd; }
.geo-platform-card .gp-actions .btn { flex: 1; justify-content: center; min-width: 85px; font-size: 12px; padding: 7px 10px; border-radius: 8px; transition: all .2s; }
.geo-platform-card .gp-actions .btn:hover { transform: translateY(-1px); }
#section-geo .stat-card { position: relative; overflow: hidden; }
#section-geo .stat-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; opacity: .6; }
#section-geo .stat-card:nth-child(1)::after { background: linear-gradient(90deg, #6c47ff, #a78bfa); }
#section-geo .stat-card:nth-child(2)::after { background: linear-gradient(90deg, #00b578, #4cdba0); }
#section-geo .stat-card:nth-child(3)::after { background: linear-gradient(90deg, #1677ff, #69b1ff); }
#section-geo .stat-card:nth-child(4)::after { background: linear-gradient(90deg, #4f46e5, #818cf8); }
@media (max-width: 1200px) {
  .geo-content-area .geo-editor { grid-template-columns: 1fr; }
  .trends-grid { grid-template-columns: 1fr 1fr; }
}

/* ===== Data Management Beauty Styles ===== */
.report-header-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.report-header-row h3 { font-size:17px; font-weight:700; margin:0; }

.charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.chart-card { background:var(--card-bg); border-radius:16px; box-shadow:0 2px 12px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.02); border:1px solid #eef0f4; overflow:hidden; transition:transform .25s ease,box-shadow .25s ease; }
.chart-card:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,.07),0 2px 8px rgba(0,0,0,.03); }
.chart-wide { grid-column:1 / -1; }

.chart-card-header { display:flex; align-items:center; gap:10px; padding:18px 22px; border-bottom:1px solid #f0f2f5; background:linear-gradient(135deg,#fafbfc,#f5f7fa); }
.chart-icon { font-size:18px; }
.chart-title { font-size:14px; font-weight:600; flex:1; }
.chart-badge { font-size:11px; color:#8c95a4; background:#f1f5f9; padding:3px 10px; border-radius:12px; font-weight:500; }

.chart-body { padding:22px; }

/* Bar Chart (Service Types) */
.bar-chart-vertical { display:flex; flex-direction:column; gap:14px; }
.bar-item { display:grid; grid-template-columns:50px 1fr 40px; align-items:center; gap:12px; }
.bar-label { font-size:13px; color:#4a5568; font-weight:500; text-align:right; }
.bar-track { height:24px; background:#f1f5f9; border-radius:12px; overflow:hidden; position:relative; }
.bar-fill { height:100%; border-radius:12px; transition:width .8s cubic-bezier(.25,.46,.45,.94); position:relative; min-width:8%; }
.bar-fill::after { content:''; position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(to bottom,rgba(255,255,255,.25),transparent);border-radius:12px 12px 0 0; }
.bar-blue { background:linear-gradient(90deg,#1677ff,#69b1ff); }
.bar-green { background:linear-gradient(90deg,#00b578,#4cdba0); }
.bar-orange { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
.bar-purple { background:linear-gradient(90deg,#6c47ff,#a78bfa); }
.bar-cyan { background:linear-gradient(90deg,#06b6d4,#67e8f9); }
.bar-gray { background:linear-gradient(90deg,#94a3b8,#cbd5e1); }
.bar-value { font-size:14px; font-weight:700; color:#1a202c; }

/* Donut Chart (Customer Sources) */
.donut-wrapper { display:flex; justify-content:center; padding:10px 0; }
.donut-chart { width:160px;height:160px;border-radius:50%;background:conic-gradient(#1677ff 0% 38%,#f59e0b 38% 63%,#10b981 63% 81%,#6c47ff 81% 93%,#94a3b8 93% 100%);display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 4px 20px rgba(0,0,0,.08); }
.donut-center { width:96px;height:96px;background:#fff;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 2px 8px rgba(0,0,0,.06); }
.donut-total { font-size:26px;font-weight:800;color:#1a202c;line-height:1; }
.donut-label { font-size:11px;color:#8c95a4;margin-top:2px; }
.donut-legend { display:flex;flex-direction:column;gap:10px;margin-top:16px; }
.legend-item { display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;transition:background .2s;cursor:default; }
.legend-item:hover { background:#f8fafc; }
.dot { width:10px;height:10px;border-radius:50%;flex-shrink:0; }
.dot-blue{background:#1677ff} .dot-orange{background:#f59e0b} .dot-green{background:#10b981} .dot-purple{background:#6c47ff} .dot-gray{background:#94a3b8}
.legend-name { font-size:13px;color:#374151;flex:1;font-weight:500; }
.legend-pct { font-size:13px;font-weight:700;color:#1a202c;width:36px;text-align:right; }
.legend-val { font-size:11px;color:#8c95a4;width:32px;text-align:right; }

/* Monthly Trend Chart */
.trend-chart { display:flex;gap:0;height:260px; }
.y-axis { display:flex;flex-direction:column;justify-content:space-between;padding-right:10px;min-width:28px; }
.y-axis span { font-size:11px;color:#8c95a4;text-align:right;line-height:1;font-weight:500; }
.trend-area::before{content:'';position:absolute;top:0;left:0;right:0;bottom:30px;background:repeating-linear-gradient(transparent,transparent 19.5%,#f0f2f5 19.5%,#f0f2f5 20%);pointer-events:none;z-index:0;}
.trend-area { flex:1;display:flex;flex-direction:column;position:relative; }
.trend-bars-h { display:flex;align-items:flex-end;justify-content:space-around;flex:1;padding-bottom:28px;gap:8px; }
.tbh-wrap { display:flex;flex-direction:column;align-items:center;flex:1;max-width:70px;position:relative; }
.tbh { width:100%;max-width:52px;border-radius:6px 6px 0 0;transition:height .6s cubic-bezier(.25,.46,.45,.94);position:relative;min-height:12px;cursor:pointer; }
.tbh-blue { background:linear-gradient(to top,#1677ff,rgba(22,119,255,.3)); }
.tbh-primary { background:linear-gradient(to top,#6c47ff,rgba(108,71,255,.3));box-shadow:0 0 12px rgba(108,71,255,.3); }
.tbh-tip { position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;color:#1a202c;background:#fff;padding:2px 6px;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.1);white-space:nowrap;opacity:0;transition:opacity .2s; }
.tbh:hover .tbh-tip { opacity:1; }
.tbh-val { display:block;font-size:13px;font-weight:700;color:#1a202c;margin-top:4px;text-align:center; }
.tbh-label { font-size:11px;color:#8c95a4;margin-top:8px;font-weight:500; }
.trend-line-svg { position:absolute;bottom:30px;left:0;right:0;pointer-events:none; }

/* Completion Rings */
.completion-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }
.comp-ring-card { background:#f8fafc;border-radius:14px;padding:18px;text-align:center;border:1px solid #eef2f6;transition:all .25s ease; }
.comp-ring-card:hover { transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.06);border-color:transparent; }
.comp-ring { width:80px;height:80px;margin:0 auto 12px;position:relative; }
.comp-ring svg { width:100%;height:100%;transform:rotate(-90deg); }
.comp-ring-text { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center; }
.comp-ring-text b { display:block;font-size:16px;font-weight:800;color:#1a202c;line-height:1; }
.comp-ring-text small { font-size:10px;color:#8c95a4; }
.comp-detail { display:flex;flex-direction:column;gap:2px; }
.comp-num { font-size:22px;font-weight:800;color:#1a202c; }
.comp-lbl { font-size:11px;color:#8c95a4; }

@media(max-width:1100px){
  .charts-grid{grid-template-columns:1fr;}
  .chart-wide{grid-column:auto;}
  .completion-cards{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:700px){
  .completion-cards{grid-template-columns:1fr;}
}
/* ===== Backup Page Beauty ===== */
.backup-hero { display:flex;align-items:center;gap:20px;padding:28px 28px;background:linear-gradient(135deg,#f0f6ff,#eef4ff);border-radius:14px;margin-bottom:24px;border:1px solid #d9e6ff; }
.backup-hero-icon { font-size:42px;flex-shrink:0; }
.backup-hero-info { flex:1; }
.backup-hero-info h2 { margin:0;font-size:18px;font-weight:700; }
.backup-hero-info p { margin:4px 0 0;font-size:13px;color:#8c95a4; }
.backup-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px; }
.backup-config-card { background:#fff;border-radius:14px;border:1px solid #eef2f6;overflow:hidden;transition:all .25s ease; }
.backup-config-card:hover { transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.06); }
.bcc-wide { grid-column:1 / -1; }
.bcc-header { display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid #f0f2f5;background:#fafbfc; }
.bcc-icon { font-size:18px; }
.bcc-header h3 { font-size:14px;font-weight:600;margin:0;flex:1; }
.bcc-status { font-size:11px;padding:3px 10px;border-radius:12px;font-weight:600; }
.bcc-on { background:#ecfdf5;color:#059669; }
.bcc-off { background:#fef3c7;color:#d97706; }
.bcc-body { padding:18px 20px; }
.bcc-desc { font-size:13px;color:#64748b;line-height:1.6;margin:0; }
.bcc-toggle-row { display:flex;align-items:center;margin-top:14px; }
.toggle-label { display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:#4a5568; }
.toggle-label input { display:none; }
.toggle-switch { width:40px;height:22px;background:#ddd;border-radius:11px;position:relative;transition:background .25s; }
.toggle-label input:checked + .toggle-switch { background:#1677ff; }
.toggle-switch::after { content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .25s;box-shadow:0 1px 3px rgba(0,0,0,.2); }
.toggle-label input:checked + .toggle-switch::after { transform:translateX(18px); }
.toggle-text { font-size:12px;font-weight:500;color:#10b981;min-width:36px; }
.bcc-stat-row { display:flex;gap:24px; }
.bcc-stat { display:flex;flex-direction:column;align-items:center; }
.bcc-stat b { font-size:22px;font-weight:800;color:#1a202c; }
.bcc-stat span { font-size:11px;color:#8c95a4;margin-top:2px; }
.storage-path { display:flex;align-items:center;gap:12px;padding:14px 18px;background:#f8fafc;border-radius:10px;border:1px dashed #d1d5db; }
.sp-icon { font-size:20px; }
.storage-path code { font-size:13px;color:#374151;background:none;padding:0;flex:1; }
.sp-badge { font-size:11px;padding:3px 10px;border-radius:12px;font-weight:600; }
.sp-ok { background:#ecfdf5;color:#059669; }
.backup-history-section { margin-top:8px; }
.table-wrapper { overflow-x:auto;border-radius:12px;border:1px solid #eef2f4; }
</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="geo"><span>🎯</span> GEO推广</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>

  <!-- ===== GEO 推广平台 ===== -->
  <section class="section" id="section-geo">
    <div class="stats-grid">
      <div class="stat-card"><div class="stat-label">🚀 本月推广次数</div><div class="stat-value">156</div><div class="stat-change up">↑ 28% 环比</div></div>
      <div class="stat-card"><div class="stat-label">👁️ 总曝光量</div><div class="stat-value">45.8K</div><div class="stat-change up">↑ 15% 环比</div></div>
      <div class="stat-card"><div class="stat-label">🖱️ 总点击量</div><div class="stat-value">2,860</div><div class="stat-change up">↑ 9% 环比</div></div>
      <div class="stat-card"><div class="stat-label">📞 线索转化</div><div class="stat-value">132</div><div class="stat-change up">↑ 12% 环比</div></div>
    </div>
    <!-- Geo Content Editor + Trends - Beautified -->
    <div class="geo-content-area">
      <div class="geo-editor">
        <div class="editor-pane" id="geoEditorPane">
          <div class="editor-pane-header"><h3>✍️ 推广内容编辑</h3><span class="editor-badge">支持多平台一键投放</span></div>
          <textarea id="geoContent" placeholder="输入推广文案内容...

示例：
【宝马5系限时保养优惠】
原厂机油+机滤套餐仅需 ¥599
到店即享免费24项车辆检测
预约热线：400-xxx-xxxx
地址：XX市XX区XX路XX号">
🎯 选择推广平台（可多选）
Q 千问
D 豆包
Y 元宝
S DeepSeek
Excel列名	系统字段	匹配状态	示例数据
客户姓名	客户姓名	✅ 已匹配	张三
手机号码	手机号码	✅ 已匹配	138****6789
车牌号	车牌号码	✅ 已匹配	京A·88888
车辆型号	车辆品牌型号	✅ 已匹配	宝马5系
来源渠道	客户来源	⚠️ 待确认	线上推广
备注	备注信息	✅ 已匹配	意向保养客户
导入时间	文件名	总条数	成功	失败	操作人	状态
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	张伟明	完成
编辑页面

📊 各平台推广趋势（近7天）

🤖 推广平台概览

📋 推广投放记录

📝 客户信息录入

👤 客户详情

📋 跟进记录

🎬 AI智能混剪平台

智能脚本生成

模板一键套用

批量混剪生成

一键多平台发布

⚡ 快捷入口

🕐 最近混剪项目

📥 批量导入客户数据

📋 字段映射预览

📋 导入历史

📤 数据导出

📋 导出历史

📊 统计报表

🔐 角色权限配置

📋 客户分配方式

📊 当前顾问客户负载

🕐 最近分配记录

编辑页面

📊 各平台推广趋势（近7天）

🤖 推广平台概览

📋 推广投放记录

📝 客户信息录入

👤 客户详情

📋 跟进记录

🎬 AI智能混剪平台

智能脚本生成

模板一键套用

批量混剪生成

一键多平台发布

⚡ 快捷入口

🕐 最近混剪项目

📥 批量导入客户数据

📋 字段映射预览

📋 导入历史

📤 数据导出

📋 导出历史

📊 统计报表

🔐 角色权限配置

📋 客户分配方式

📊 当前顾问客户负载

🕐 最近分配记录

📝 填写跟进记录 -

👥 添加人员
