编辑页面

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>
:root {
  --bg: #f5f6f8;
  --sidebar-bg: #1a1d29;
  --sidebar-text: #8b8fa3;
  --sidebar-active: #fff;
  --sidebar-hover: #252836;
  --card-bg: #fff;
  --border: #e8eaef;
  --text: #1a1d29;
  --text-secondary: #6b7280;
  --primary: #4f6ef7;
  --primary-light: #eef1fe;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #6366f1;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); display: flex; height: 100vh; overflow: hidden; }
/* Sidebar */
.sidebar { width: 240px; background: var(--sidebar-bg); display: flex; flex-direction: column; flex-shrink: 0; }
.sidebar-logo { padding: 20px 24px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.sidebar-logo .icon { width: 36px; height: 36px; background: linear-gradient(135deg, #4f6ef7, #7c3aed); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.sidebar-logo h1 { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: 0.5px; }
.sidebar-logo span { font-size: 11px; color: #8b8fa3; display: block; font-weight: 400; }
.sidebar-nav { flex: 1; padding: 16px 12px; overflow-y: auto; }
.nav-section { margin-bottom: 8px; }
.nav-section-title { font-size: 11px; color: #5c6072; text-transform: uppercase; letter-spacing: 1px; padding: 8px 12px 6px; font-weight: 600; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--sidebar-text); cursor: pointer; transition: all 0.2s; font-size: 14px; margin-bottom: 2px; position: relative; }
.nav-item:hover { background: var(--sidebar-hover); color: #c8cad6; }
.nav-item.active { background: rgba(79,110,247,0.15); color: var(--sidebar-active); font-weight: 600; }
.nav-item.active::before { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: var(--primary); border-radius: 0 3px 3px 0; }
.nav-item .emoji { font-size: 16px; width: 20px; text-align: center; }
.nav-item .badge { margin-left: auto; background: var(--danger); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 10px; font-weight: 600; }
.sidebar-footer { padding: 16px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 10px; }
.sidebar-footer .avatar { width: 34px; height: 34px; border-radius: 50%; background: #4f6ef7; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 600; }
.sidebar-footer .info { color: #8b8fa3; font-size: 12px; }
.sidebar-footer .info strong { color: #c8cad6; display: block; font-size: 13px; }
/* Main */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.main-header { background: #fff; padding: 16px 28px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.main-header h2 { font-size: 20px; font-weight: 700; }
.main-header .header-actions { display: flex; gap: 10px; align-items: center; }
.header-badge { display: flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--primary-light); border-radius: 20px; font-size: 13px; color: var(--primary); font-weight: 500; }
.header-badge .dot { width: 7px; height: 7px; background: var(--success); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.main-content { flex: 1; overflow-y: auto; padding: 24px 28px; }
.page { display: none; }
.page.active { display: block; }
/* Cards */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--card-bg); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); border: 1px solid var(--border); transition: box-shadow 0.2s; }
.stat-card:hover { box-shadow: var(--shadow-md); }
.stat-card .card-label { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.stat-card .card-value { font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.stat-card .card-change { font-size: 12px; display: flex; align-items: center; gap: 4px; }
.card-change.up { color: var(--success); }
.card-change.down { color: var(--danger); }
/* Panels */
.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.panel-grid.three { grid-template-columns: 2fr 1fr; }
.panel { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); overflow: hidden; }
.panel-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.panel-header h3 { font-size: 15px; font-weight: 600; }
.panel-header .link { font-size: 13px; color: var(--primary); cursor: pointer; }
.panel-body { padding: 16px 20px; }
.panel-body.no-pad { padding: 0; }
/* Tables */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; color: var(--text-secondary); font-weight: 600; padding: 10px 16px; background: #f9fafb; border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.5px; }
td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 14px; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #fafbfc; }
/* Tags */
.tag { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; }
.tag-blue { background: #eef1fe; color: #4f6ef7; }
.tag-green { background: #d1fae5; color: #059669; }
.tag-yellow { background: #fef3c7; color: #d97706; }
.tag-red { background: #fee2e2; color: #dc2626; }
.tag-purple { background: #ede9fe; color: #7c3aed; }
.tag-gray { background: #f3f4f6; color: #6b7280; }
/* AI Chat */
.chat-layout { display: grid; grid-template-columns: 300px 1fr 280px; gap: 0; height: calc(100vh - 140px); }
.chat-sessions { border-right: 1px solid var(--border); background: #fff; overflow-y: auto; }
.chat-sessions .search-bar { padding: 12px; border-bottom: 1px solid var(--border); }
.chat-sessions .search-bar input { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; outline: none; }
.chat-sessions .search-bar input:focus { border-color: var(--primary); }
.session-item { padding: 14px 16px; border-bottom: 1px solid #f3f4f6; cursor: pointer; transition: background 0.15s; position: relative; }
.session-item:hover { background: #f9fafb; }
.session-item.active { background: var(--primary-light); border-left: 3px solid var(--primary); }
.session-item .name { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.session-item .preview { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-item .time { font-size: 11px; color: #9ca3af; position: absolute; top: 14px; right: 16px; }
.session-item .source { font-size: 11px; margin-top: 4px; }
.chat-main { display: flex; flex-direction: column; background: #fff; }
.chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; background: #fafbfc; }
.msg { display: flex; gap: 10px; max-width: 80%; }
.msg.user { align-self: flex-end; flex-direction: row-reverse; }
.msg .avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; font-weight: 600; }
.msg .avatar.customer { background: #f59e0b; }
.msg .avatar.ai { background: #4f6ef7; }
.msg .bubble { padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.6; }
.msg.user .bubble { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.msg.ai .bubble { background: #fff; border: 1px solid #e5e7eb; border-bottom-left-radius: 4px; }
.msg .time-stamp { font-size: 11px; color: #9ca3af; margin-top: 4px; }
.msg.system-msg { align-self: center; background: #f3f4f6; padding: 6px 14px; border-radius: 12px; font-size: 12px; color: var(--text-secondary); max-width: none; }
.chat-input { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; gap: 10px; background: #fff; }
.chat-input input { flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: 20px; font-size: 14px; outline: none; }
.chat-input input:focus { border-color: var(--primary); }
.chat-input button { padding: 10px 20px; background: var(--primary); color: #fff; border: none; border-radius: 20px; font-size: 14px; cursor: pointer; font-weight: 500; }
.chat-sidebar { border-left: 1px solid var(--border); background: #fff; overflow-y: auto; padding: 16px; }
.chat-sidebar h4 { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.chat-sidebar .info-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f3f4f6; font-size: 13px; }
.chat-sidebar .info-row .label { color: var(--text-secondary); }
.chat-sidebar .info-row .value { font-weight: 500; }
/* Mix */
.mix-header { display: flex; gap: 16px; margin-bottom: 20px; }
.mix-stat { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; flex: 1; box-shadow: var(--shadow); }
.mix-stat .label { font-size: 12px; color: var(--text-secondary); }
.mix-stat .value { font-size: 22px; font-weight: 700; margin-top: 2px; }
.template-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.template-card { background: #fff; border: 2px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: all 0.2s; }
.template-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.template-card.selected { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,110,247,0.15); }
.template-card .thumb { height: 120px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32px; position: relative; }
.template-card:nth-child(2) .thumb { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.template-card:nth-child(3) .thumb { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.template-card:nth-child(4) .thumb { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.template-card .thumb .play-btn { width: 44px; height: 44px; background: rgba(255,255,255,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.template-card .info { padding: 12px; }
.template-card .info h4 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.template-card .info p { font-size: 12px; color: var(--text-secondary); }
.mix-task-list { display: flex; flex-direction: column; gap: 8px; }
.mix-task { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border: 1px solid var(--border); border-radius: 10px; }
.mix-task .task-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.mix-task .task-info { flex: 1; }
.mix-task .task-info h4 { font-size: 14px; font-weight: 600; }
.mix-task .task-info p { font-size: 12px; color: var(--text-secondary); }
.mix-task .task-progress { width: 120px; }
.progress-bar { height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; }
.progress-bar .fill { height: 100%; border-radius: 3px; background: var(--primary); transition: width 0.5s; }
/* CRM */
.crm-toolbar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.crm-toolbar select, .crm-toolbar input { padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; outline: none; background: #fff; }
.crm-toolbar input { width: 200px; }
.crm-toolbar select:focus, .crm-toolbar input:focus { border-color: var(--primary); }
.funnel { display: flex; align-items: center; gap: 8px; padding: 20px 0; }
.funnel-step { flex: 1; text-align: center; position: relative; }
.funnel-step .step-num { font-size: 28px; font-weight: 700; color: var(--primary); }
.funnel-step .step-label { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.funnel-step .step-rate { font-size: 11px; color: var(--text-secondary); }
.funnel-arrow { color: #d1d5db; font-size: 20px; }
.customer-detail { padding: 0; }
.detail-tabs { display: flex; border-bottom: 1px solid var(--border); }
.detail-tab { padding: 10px 18px; font-size: 13px; cursor: pointer; border-bottom: 2px solid transparent; color: var(--text-secondary); font-weight: 500; }
.detail-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.detail-timeline { padding: 16px; }
.timeline-item { display: flex; gap: 12px; padding: 10px 0; border-left: 2px solid #e5e7eb; margin-left: 8px; padding-left: 20px; position: relative; }
.timeline-item::before { content: ''; position: absolute; left: -5px; top: 14px; width: 8px; height: 8px; background: var(--primary); border-radius: 50%; }
.timeline-item .tl-time { font-size: 11px; color: #9ca3af; min-width: 70px; }
.timeline-item .tl-content { font-size: 13px; }
/* Chart */
.chart-bars { display: flex; align-items: flex-end; gap: 12px; height: 160px; padding: 20px 0 0; }
.chart-bar-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.chart-bar { width: 100%; max-width: 40px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #4f6ef7, #818cf8); transition: height 0.5s; position: relative; }
.chart-bar:hover { background: linear-gradient(180deg, #3b5de7, #6366f1); }
.chart-bar .bar-val { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--text); white-space: nowrap; }
.chart-bar-label { font-size: 11px; color: var(--text-secondary); }
/* SEO */
.seo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.seo-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.seo-card h4 { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; font-weight: 500; }
.seo-rank { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f3f4f6; font-size: 13px; }
.seo-rank .keyword { font-weight: 500; }
.seo-rank .pos { font-weight: 700; }
.seo-rank .change { font-size: 11px; }
/* Responsive helper */
.quick-actions { display: flex; gap: 10px; margin-top: 16px; }
.btn { padding: 8px 16px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-size: 13px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px; }
.btn:hover { background: #f9fafb; }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: #3b5de7; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-xs { padding: 3px 10px; font-size: 11px; }
/* Toast */
.toast { position: fixed; bottom: 24px; right: 24px; background: #1a1d29; color: #fff; padding: 12px 20px; border-radius: 8px; font-size: 14px; z-index: 9999; opacity: 0; transform: translateY(10px); transition: all 0.3s; pointer-events: none; }
.toast.show { opacity: 1; transform: translateY(0); }
/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }
/* Modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 100; align-items: center; justify-content: center; }
.modal-overlay.show { display: flex; }
.modal { background: #fff; border-radius: var(--radius); width: 520px; max-height: 70vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-header h3 { font-size: 16px; }
.modal-close { width: 28px; height: 28px; border: none; background: #f3f4f6; border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.modal-body { padding: 20px; }
.modal-footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
/* Geo badge */
.geo-badge { background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff; font-size: 10px; padding: 2px 8px; border-radius: 8px; font-weight: 600; }
/* Store selector */
.store-selector { display: flex; gap: 8px; align-items: center; }
.store-selector select { padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; outline: none; }
/* Settings page */
.settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 0; height: calc(100vh - 140px); background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); }
.settings-nav { background: #f9fafb; border-right: 1px solid var(--border); padding: 8px 0; overflow-y: auto; }
.settings-nav-item { padding: 11px 20px; font-size: 14px; cursor: pointer; transition: all 0.15s; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; border-left: 3px solid transparent; }
.settings-nav-item:hover { background: #f0f1f5; color: var(--text); }
.settings-nav-item.active { background: #fff; color: var(--primary); font-weight: 600; border-left-color: var(--primary); }
.settings-nav-item .si-icon { font-size: 16px; width: 20px; text-align: center; }
.settings-panel { padding: 24px 28px; overflow-y: auto; }
.stab-content { display: none; }
.stab-content.active { display: block; }
.settings-panel h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.settings-panel .panel-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; }
.settings-section { margin-bottom: 28px; }
.settings-section h4 { font-size: 14px; font-weight: 600; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid.single { grid-template-columns: 1fr; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 13px; font-weight: 500; color: var(--text); }
.form-group .hint { font-size: 11px; color: var(--text-secondary); }
.form-group input, .form-group select, .form-group textarea { padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; outline: none; font-family: inherit; background: #fff; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,110,247,0.1); }
.form-group textarea { min-height: 80px; resize: vertical; }
/* Toggle switch */
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f3f4f6; }
.toggle-row .toggle-info { flex: 1; }
.toggle-row .toggle-info strong { font-size: 14px; display: block; }
.toggle-row .toggle-info span { font-size: 12px; color: var(--text-secondary); }
.toggle-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: #d1d5db; border-radius: 24px; cursor: pointer; transition: 0.2s; }
.toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.2s; }
.toggle-switch input:checked + .toggle-slider { background: var(--primary); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
/* Settings staff table */
.settings-table { width: 100%; border-collapse: collapse; }
.settings-table th { text-align: left; font-size: 12px; color: var(--text-secondary); font-weight: 600; padding: 10px 14px; background: #f9fafb; border-bottom: 1px solid var(--border); }
.settings-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
.settings-table tr:last-child td { border-bottom: none; }
.settings-table .role-badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 500; }
.role-admin { background: #ede9fe; color: #7c3aed; }
.role-sales { background: #eef1fe; color: #4f6ef7; }
.role-operator { background: #fef3c7; color: #d97706; }
.role-editor { background: #d1fae5; color: #059669; }
/* Template card for settings */
.tpl-list { display: flex; flex-direction: column; gap: 10px; }
.tpl-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: #fff; transition: box-shadow 0.2s; }
.tpl-item:hover { box-shadow: var(--shadow-md); }
.tpl-item .tpl-thumb { width: 64px; height: 40px; border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 600; }
.tpl-item .tpl-info { flex: 1; }
.tpl-item .tpl-info strong { font-size: 13px; display: block; }
.tpl-item .tpl-info span { font-size: 11px; color: var(--text-secondary); }
/* Account card */
.account-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; }
.account-card .ac-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.account-card .ac-info { flex: 1; }
.account-card .ac-info strong { font-size: 14px; display: block; }
.account-card .ac-info span { font-size: 12px; color: var(--text-secondary); }
/* Danger zone */
.danger-zone { border: 1px solid #fecaca; border-radius: 8px; padding: 16px; background: #fef2f2; }
.danger-zone h4 { color: var(--danger); }
/* Detail Drawer */
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.drawer-overlay.show { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; width: 520px; max-width: 94vw; height: 100vh; background: #fff; z-index: 201; box-shadow: -8px 0 30px rgba(0,0,0,0.12); transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; }
.drawer.show { transform: translateX(0); }
.drawer-header { padding: 18px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.drawer-header .drawer-title { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.drawer-header .drawer-actions { display: flex; gap: 8px; }
.drawer-close { width: 32px; height: 32px; border: none; background: #f3f4f6; border-radius: 50%; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.drawer-close:hover { background: #e5e7eb; }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.drawer-footer { padding: 14px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 16px; }
.breadcrumb span { color: var(--text-secondary); cursor: pointer; }
.breadcrumb span:hover { color: var(--primary); }
.breadcrumb .sep { color: #d1d5db; cursor: default; }
.breadcrumb .current { color: var(--text); font-weight: 600; cursor: default; }
.breadcrumb .current:hover { color: var(--text); }
/* Drawer internal sections */
.drawer-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.drawer-stat-mini { background: #f9fafb; border-radius: 8px; padding: 12px; text-align: center; }
.drawer-stat-mini .val { font-size: 20px; font-weight: 700; }
.drawer-stat-mini .lbl { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.drawer-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.drawer-info-item { padding: 8px 0; border-bottom: 1px solid #f3f4f6; font-size: 13px; display: flex; justify-content: space-between; }
.drawer-info-item .l { color: var(--text-secondary); }
.drawer-info-item .v { font-weight: 500; text-align: right; }
.drawer-info-item.full { grid-column: 1/-1; }
/* Clickable hint */
.clickable { cursor: pointer; transition: all 0.15s; }
.clickable:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: #f0f4ff; }
</style>
</head>
<body>

<!-- Sidebar -->
<aside class="sidebar">
  <div class="sidebar-logo">
    <div class="icon">🚗</div>
    <div><h1>车后云</h1><span>Auto Service Cloud</span></div>
  </div>
  <nav class="sidebar-nav">
    <div class="nav-section">
      <div class="nav-section-title">核心功能</div>
      <div class="nav-item active" data-page="dashboard" onclick="switchPage('dashboard')">
        <span class="emoji">📊</span> 数据驾驶舱
      </div>
      <div class="nav-item" data-page="ai-chat" onclick="switchPage('ai-chat')">
        <span class="emoji">🤖</span> AI客服中心
        <span class="badge">12</span>
      </div>
      <div class="nav-item" data-page="ai-mix" onclick="switchPage('ai-mix')">
        <span class="emoji">🎬</span> AI混剪工作室
        <span class="badge">3</span>
      </div>
      <div class="nav-item" data-page="crm" onclick="switchPage('crm')">
        <span class="emoji">👥</span> CRM客户管理
      </div>
      <div class="nav-item" data-page="seo" onclick="switchPage('seo')">
        <span class="emoji">📈</span> SEO/GEO优化
      </div>
    </div>
    <div class="nav-section">
      <div class="nav-section-title">设置</div>
      <div class="nav-item" data-page="settings" onclick="switchPage('settings')">
        <span class="emoji">⚙️</span> 系统设置
      </div>
    </div>
  </nav>
  <div class="sidebar-footer">
    <div class="avatar">店</div>
    <div class="info"><strong>车美汇旗舰店</strong>管理员</div>
  </div>
</aside>

<!-- Main Content -->
<main class="main">
  <header class="main-header">
    <h2 id="pageTitle">📊 数据驾驶舱</h2>
    <div class="header-actions">
      <div class="store-selector">
        <span style="font-size:13px;color:var(--text-secondary)">当前门店：</span>
        <select onchange="showToast('已切换到：'+this.value)">
          <option>车美汇旗舰店</option>
          <option>极速车服（望京店）</option>
          <option>膜力社（三里屯店）</option>
          <option>途悦养车（朝阳店）</option>
        </select>
      </div>
      <div class="header-badge" id="liveBadge">
        <span class="dot"></span> AI客服在线 · 今日已接待 <strong id="liveCount">47</strong> 位
      </div>
    </div>
  </header>

  <div class="main-content">

    <!-- ===== 数据驾驶舱 ===== -->
    <div class="page active" id="page-dashboard">
      <div class="stat-grid">
        <div class="stat-card">
          <div class="card-label">📥 今日线索</div>
          <div class="card-value">128</div>
          <div class="card-change up">▲ 12% <span style="color:var(--text-secondary);margin-left:4px;">vs 昨日</span></div>
        </div>
        <div class="stat-card">
          <div class="card-label">🤖 AI接待数</div>
          <div class="card-value">89</div>
          <div class="card-change up">▲ 8% <span style="color:var(--text-secondary);margin-left:4px;">自动回复率 73%</span></div>
        </div>
        <div class="stat-card">
          <div class="card-label">📅 预约到店</div>
          <div class="card-value">34</div>
          <div class="card-change up">▲ 21% <span style="color:var(--text-secondary);margin-left:4px;">到店率 68%</span></div>
        </div>
        <div class="stat-card">
          <div class="card-label">💰 今日成交</div>
          <div class="card-value">¥52,800</div>
          <div class="card-change up">▲ 15% <span style="color:var(--text-secondary);margin-left:4px;">客单价 ¥1,553</span></div>
        </div>
      </div>

      <div class="panel-grid three">
        <div class="panel">
          <div class="panel-header"><h3>🔥 实时线索动态</h3><span class="link" onclick="switchPage('ai-chat')">查看全部 →</span></div>
          <div class="panel-body no-pad">
            <table>
              <thead><tr><th>来源</th><th>客户</th><th>意向</th><th>AI状态</th><th>分配</th><th>时间</th></tr></thead>
              <tbody>
                <tr><td><span class="tag tag-blue">抖音</span></td><td>王先生</td><td>全车贴膜</td><td><span class="tag tag-green">已回复</span></td><td>销售A组</td><td>2分钟前</td></tr>
                <tr><td><span class="tag tag-blue">抖音</span></td><td>李女士</td><td>镀晶护理</td><td><span class="tag tag-green">已回复</span></td><td>销售B组</td><td>8分钟前</td></tr>
                <tr><td><span class="tag tag-purple">巨量引擎</span></td><td>张先生</td><td>隐形车衣</td><td><span class="tag tag-yellow">跟进中</span></td><td>待分配</td><td>12分钟前</td></tr>
                <tr><td><span class="tag tag-blue">抖音</span></td><td>赵女士</td><td>精致洗车</td><td><span class="tag tag-green">已回复</span></td><td>销售A组</td><td>15分钟前</td></tr>
                <tr><td><span class="tag tag-gray">小程序</span></td><td>陈先生</td><td>改色膜</td><td><span class="tag tag-gray">待处理</span></td><td>待分配</td><td>22分钟前</td></tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="panel">
          <div class="panel-header"><h3>⏰ 待处理提醒</h3></div>
          <div class="panel-body">
            <div style="display:flex;flex-direction:column;gap:12px;">
              <div style="display:flex;align-items:center;gap:10px;padding:10px;background:#fef3c7;border-radius:8px;">
                <span style="font-size:20px;">⚠️</span>
                <div style="flex:1;font-size:13px;"><strong>3条线索超30分钟未分配</strong><br><span style="color:var(--text-secondary);font-size:12px;">建议立即处理，避免流失</span></div>
                <button class="btn btn-sm btn-primary" onclick="switchPage('ai-chat')">处理</button>
              </div>
              <div style="display:flex;align-items:center;gap:10px;padding:10px;background:#eef1fe;border-radius:8px;">
                <span style="font-size:20px;">📞</span>
                <div style="flex:1;font-size:13px;"><strong>5位客户待回访邀约</strong><br><span style="color:var(--text-secondary);font-size:12px;">最近一次跟进超过24小时</span></div>
                <button class="btn btn-sm btn-primary" onclick="switchPage('crm')">跟进</button>
              </div>
              <div style="display:flex;align-items:center;gap:10px;padding:10px;background:#fee2e2;border-radius:8px;">
                <span style="font-size:20px;">🎬</span>
                <div style="flex:1;font-size:13px;"><strong>今日混剪配额剩余 2 条</strong><br><span style="color:var(--text-secondary);font-size:12px;">建议尽快完成发布任务</span></div>
                <button class="btn btn-sm btn-primary" onclick="switchPage('ai-mix')">混剪</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="panel-grid">
        <div class="panel">
          <div class="panel-header"><h3>📊 近7天线索与转化趋势</h3></div>
          <div class="panel-body">
            <div class="chart-bars">
              <div class="chart-bar-item"><div class="chart-bar" style="height:60px"><span class="bar-val">23</span></div><div class="chart-bar-label">6/25</div></div>
              <div class="chart-bar-item"><div class="chart-bar" style="height:75px"><span class="bar-val">31</span></div><div class="chart-bar-label">6/26</div></div>
              <div class="chart-bar-item"><div class="chart-bar" style="height:55px"><span class="bar-val">18</span></div><div class="chart-bar-label">6/27</div></div>
              <div class="chart-bar-item"><div class="chart-bar" style="height:90px"><span class="bar-val">42</span></div><div class="chart-bar-label">6/28</div></div>
              <div class="chart-bar-item"><div class="chart-bar" style="height:110px"><span class="bar-val">58</span></div><div class="chart-bar-label">6/29</div></div>
              <div class="chart-bar-item"><div class="chart-bar" style="height:130px"><span class="bar-val">89</span></div><div class="chart-bar-label">6/30</div></div>
              <div class="chart-bar-item"><div class="chart-bar" style="height:145px;background:linear-gradient(180deg,#7c3aed,#a78bfa)"><span class="bar-val">128</span></div><div class="chart-bar-label" style="font-weight:700;color:var(--primary)">今日</div></div>
            </div>
            <div style="display:flex;gap:20px;margin-top:12px;font-size:12px;color:var(--text-secondary);justify-content:center;">
              <span>🟦 线索数</span><span style="margin-left:8px;">📈 本周环比 +41%</span>
            </div>
          </div>
        </div>
        <div class="panel">
          <div class="panel-header"><h3>🏆 各店今日排行</h3></div>
          <div class="panel-body no-pad">
            <table>
              <thead><tr><th>#</th><th>门店</th><th>线索</th><th>预约</th><th>成交</th></tr></thead>
              <tbody>
                <tr><td>🥇</td><td>车美汇旗舰店</td><td>128</td><td>34</td><td>¥52,800</td></tr>
                <tr><td>🥈</td><td>膜力社（三里屯）</td><td>96</td><td>28</td><td>¥38,500</td></tr>
                <tr><td>🥉</td><td>极速车服（望京）</td><td>73</td><td>19</td><td>¥21,200</td></tr>
                <tr><td>4</td><td>途悦养车（朝阳）</td><td>51</td><td>12</td><td>¥9,800</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div class="quick-actions">
        <button class="btn btn-primary" onclick="switchPage('ai-chat')">🤖 查看AI客服</button>
        <button class="btn" onclick="switchPage('ai-mix')">🎬 开始混剪</button>
        <button class="btn" onclick="switchPage('crm')">👥 客户管理</button>
        <button class="btn" onclick="switchPage('seo')">📈 数据分析</button>
      </div>
    </div>

    <!-- ===== AI客服中心 ===== -->
    <div class="page" id="page-ai-chat">
      <div class="chat-layout">
        <!-- 会话列表 -->
        <div class="chat-sessions">
          <div class="search-bar"><input type="text" placeholder="🔍 搜索客户或对话..."></div>
          <div class="session-item active" data-name="王先生" data-source="抖音" data-intent="全车贴膜" data-status="已回复" onclick="switchSession(this)">
            <div class="name">王先生</div>
            <div class="preview">请问你们家现在贴膜有什么优惠？</div>
            <div class="time">10:02</div>
            <div class="source"><span class="tag tag-blue">抖音</span> <span class="tag tag-green">已回复</span></div>
          </div>
          <div class="session-item" data-name="李女士" data-source="抖音" data-intent="镀晶护理" data-status="已回复" onclick="switchSession(this)">
            <div class="name">李女士</div>
            <div class="preview">镀晶和打蜡有什么区别？</div>
            <div class="time">09:55</div>
            <div class="source"><span class="tag tag-blue">抖音</span> <span class="tag tag-green">已回复</span></div>
          </div>
          <div class="session-item" data-name="张先生" data-source="巨量引擎" data-intent="隐形车衣" data-status="跟进中" onclick="switchSession(this)">
            <div class="name">张先生</div>
            <div class="preview">隐形车衣是什么牌子的？多少钱？</div>
            <div class="time">09:48</div>
            <div class="source"><span class="tag tag-purple">巨量引擎</span> <span class="tag tag-yellow">跟进中</span></div>
          </div>
          <div class="session-item" data-name="赵女士" data-source="抖音" data-intent="精致洗车" data-status="已回复" onclick="switchSession(this)">
            <div class="name">赵女士</div>
            <div class="preview">明天上午可以预约洗车吗？</div>
            <div class="time">09:40</div>
            <div class="source"><span class="tag tag-blue">抖音</span> <span class="tag tag-green">已回复</span></div>
          </div>
          <div class="session-item" data-name="陈先生" data-source="小程序" data-intent="改色膜" data-status="待处理" onclick="switchSession(this)">
            <div class="name">陈先生</div>
            <div class="preview">保时捷卡宴改色需要多久？</div>
            <div class="time">09:32</div>
            <div class="source"><span class="tag tag-gray">小程序</span> <span class="tag tag-gray">待处理</span></div>
          </div>
          <div class="session-item" data-name="刘女士" data-source="抖音" data-intent="脚垫" data-status="已回复" onclick="switchSession(this)">
            <div class="name">刘女士</div>
            <div class="preview">有宝马X5专用的脚垫吗？</div>
            <div class="time">09:15</div>
            <div class="source"><span class="tag tag-blue">抖音</span> <span class="tag tag-green">已回复</span></div>
          </div>
        </div>

        <!-- 聊天窗口 -->
        <div class="chat-main">
          <div style="padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:#fff;">
            <div style="display:flex;align-items:center;gap:10px;">
              <div class="avatar customer" style="width:30px;height:30px;font-size:11px;">王</div>
              <div>
                <div style="font-weight:600;font-size:14px;">王先生 <span class="tag tag-blue" style="margin-left:6px;">抖音</span></div>
                <div style="font-size:11px;color:var(--text-secondary);">全车贴膜 · 高意向 · 首次咨询</div>
              </div>
            </div>
            <div style="display:flex;gap:8px;">
              <button class="btn btn-sm" onclick="showToast('已分配给销售A组')">📋 分配</button>
              <button class="btn btn-sm" onclick="showToast('已标记为重点客户')">⭐ 标记</button>
            </div>
          </div>

          <div class="chat-messages" id="chatMessages">
            <div class="msg system-msg">📱 客户从抖音广告进入，系统已自动创建会话 · 10:02</div>
            <div class="msg user">
              <div class="avatar customer">王</div>
              <div>
                <div class="bubble">你好，想了解一下你们家全车贴膜的价格，最近有没有优惠活动？</div>
                <div class="time-stamp">10:02</div>
              </div>
            </div>
            <div class="msg ai">
              <div class="avatar ai">AI</div>
              <div>
                <div class="bubble">王先生您好！👋 感谢您的咨询！<br><br>我们目前全车贴膜有多款方案：<br>🔹 <strong>基础款</strong>（3M）：¥3,999 起<br>🔹 <strong>升级款</strong>（龙膜AVS）：¥6,999 起<br>🔹 <strong>旗舰款</strong>（XPEL ULT）：¥12,999 起<br><br>🎉 <strong>本月优惠：</strong>到店即享免费检测+精美礼品一份，预约可享9折优惠！<br><br>请问您的车型是什么？我可以帮您精准匹配方案 👇</div>
                <div class="time-stamp">10:02 · AI自动回复</div>
              </div>
            </div>
            <div class="msg user">
              <div class="avatar customer">王</div>
              <div>
                <div class="bubble">特斯拉Model Y，主要是想防刮蹭和石子</div>
                <div class="time-stamp">10:03</div>
              </div>
            </div>
            <div class="msg ai">
              <div class="avatar ai">AI</div>
              <div>
                <div class="bubble">Model Y非常适合贴车衣！👍<br><br>针对防刮蹭和石子撞击的需求，我建议选择<strong>升级款龙膜AVS</strong>，厚度8mil，自动修复划痕，特斯拉Model Y整车方案 ¥6,999（原价 ¥8,200）。<br><br>📅 要不要帮您预约到店免费体验？我们可以现场展示防刮测试，满意再决定！<br><br>您方便什么时间到店呢？</div>
                <div class="time-stamp">10:03 · AI自动回复</div>
              </div>
            </div>
          </div>

          <div class="chat-input">
            <input type="text" placeholder="输入消息，或由AI自动回复..." id="chatInput">
            <button onclick="sendMessage()">发送</button>
            <button style="background:#10b981;" onclick="showToast('已切换为人工模式')">👤 人工接管</button>
          </div>
        </div>

        <!-- 客户信息 & 设置 -->
        <div class="chat-sidebar">
          <h4>📋 客户信息</h4>
          <div class="info-row"><span class="label">姓名</span><span class="value">王先生</span></div>
          <div class="info-row"><span class="label">来源</span><span class="value"><span class="tag tag-blue">抖音</span></span></div>
          <div class="info-row"><span class="label">意向</span><span class="value">全车贴膜</span></div>
          <div class="info-row"><span class="label">意向度</span><span class="value"><span class="tag tag-green">高</span></span></div>
          <div class="info-row"><span class="label">车型</span><span class="value">特斯拉 Model Y</span></div>
          <div class="info-row"><span class="label">分配状态</span><span class="value">销售A组</span></div>
          <div class="info-row"><span class="label">AI状态</span><span class="value"><span class="tag tag-green">自动回复中</span></span></div>

          <h4 style="margin-top:20px;">⚙️ AI回复规则</h4>
          <div style="font-size:12px;color:var(--text-secondary);margin-bottom:8px;">当前匹配规则：<strong>贴膜咨询 > 询价 > 邀约话术V3</strong></div>
          <div style="display:flex;flex-direction:column;gap:6px;">
            <label style="font-size:12px;display:flex;align-items:center;gap:6px;cursor:pointer;"><input type="checkbox" checked> 自动回复常见问题</label>
            <label style="font-size:12px;display:flex;align-items:center;gap:6px;cursor:pointer;"><input type="checkbox" checked> 自动发送优惠活动</label>
            <label style="font-size:12px;display:flex;align-items:center;gap:6px;cursor:pointer;"><input type="checkbox" checked> 自动邀约到店</label>
            <label style="font-size:12px;display:flex;align-items:center;gap:6px;cursor:pointer;"><input type="checkbox"> 自动发送报价单</label>
          </div>

          <h4 style="margin-top:20px;">📤 客资分发规则</h4>
          <div style="font-size:12px;color:var(--text-secondary);margin-bottom:6px;">当AI无法处理时自动分配</div>
          <select style="width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:6px;font-size:12px;margin-bottom:8px;">
            <option>轮流分配（当前）</option>
            <option>按技能匹配</option>
            <option>按空闲率</option>
          </select>
          <div style="font-size:11px;color:var(--text-secondary);">
            分配组：<strong>销售A组(3人)</strong>、<strong>销售B组(2人)</strong><br>
            超时规则：<strong>30分钟未回复 → 重新分配</strong>
          </div>
        </div>
      </div>
    </div>

    <!-- ===== AI混剪工作室 ===== -->
    <div class="page" id="page-ai-mix">
      <div class="mix-header">
        <div class="mix-stat">
          <div class="label">📹 今日已生成</div>
          <div class="value">8</div>
        </div>
        <div class="mix-stat">
          <div class="label">⏳ 处理中</div>
          <div class="value">3</div>
        </div>
        <div class="mix-stat">
          <div class="label">✅ 本月累计</div>
          <div class="value">186</div>
        </div>
        <div class="mix-stat">
          <div class="label">📈 平均播放量</div>
          <div class="value">12.5K</div>
        </div>
        <div class="mix-stat">
          <div class="label">🎯 转化率</div>
          <div class="value">4.2%</div>
        </div>
      </div>

      <div class="panel" style="margin-bottom:20px;">
        <div class="panel-header"><h3>🎨 视频模板库</h3><span class="link">查看更多 →</span></div>
        <div class="panel-body">
          <div class="template-grid">
            <div class="template-card selected" onclick="selectTemplate(this)">
              <div class="thumb"><div class="play-btn">▶</div></div>
              <div class="info"><h4>施工过程展示</h4><p>时长15s · 快节奏剪辑</p></div>
            </div>
            <div class="template-card" onclick="selectTemplate(this)">
              <div class="thumb"><div class="play-btn">▶</div></div>
              <div class="info"><h4>产品对比测评</h4><p>时长30s · 数据对比呈现</p></div>
            </div>
            <div class="template-card" onclick="selectTemplate(this)">
              <div class="thumb"><div class="play-btn">▶</div></div>
              <div class="info"><h4>客户实拍见证</h4><p>时长20s · 真实体验分享</p></div>
            </div>
            <div class="template-card" onclick="selectTemplate(this)">
              <div class="thumb"><div class="play-btn">▶</div></div>
              <div class="info"><h4>优惠活动种草</h4><p>时长12s · 促销信息展示</p></div>
            </div>
          </div>
          <div class="quick-actions">
            <button class="btn btn-primary" onclick="showToast('正在生成混剪任务...')">🎬 使用选中模板一键混剪</button>
            <button class="btn" onclick="showToast('素材上传功能开发中')">📤 上传素材</button>
            <button class="btn" onclick="showToast('已添加到发布队列')">📅 预约发布</button>
          </div>
        </div>
      </div>

      <div class="panel-grid">
        <div class="panel">
          <div class="panel-header"><h3>⚡ 混剪任务队列</h3></div>
          <div class="panel-body">
            <div class="mix-task-list">
              <div class="mix-task">
                <div class="task-icon" style="background:#eef1fe;">🎬</div>
                <div class="task-info">
                  <h4>施工过程展示_v12</h4>
                  <p>素材: 3段 · 模板: 施工展示 · 预计15s</p>
                </div>
                <div class="task-progress">
                  <div style="font-size:11px;color:var(--text-secondary);margin-bottom:4px;">渲染中 65%</div>
                  <div class="progress-bar"><div class="fill" style="width:65%"></div></div>
                </div>
                <span class="tag tag-yellow">处理中</span>
              </div>
              <div class="mix-task">
                <div class="task-icon" style="background:#fef3c7;">⏳</div>
                <div class="task-info">
                  <h4>优惠种草_周末活动</h4>
                  <p>素材: 5段 · 模板: 优惠种草 · 预计12s</p>
                </div>
                <div class="task-progress">
                  <div style="font-size:11px;color:var(--text-secondary);margin-bottom:4px;">排队中</div>
                  <div class="progress-bar"><div class="fill" style="width:0%"></div></div>
                </div>
                <span class="tag tag-gray">等待中</span>
              </div>
              <div class="mix-task">
                <div class="task-icon" style="background:#d1fae5;">✅</div>
                <div class="task-info">
                  <h4>客户见证_宝马X5</h4>
                  <p>素材: 2段 · 模板: 客户见证 · 20s</p>
                </div>
                <div class="task-progress">
                  <div style="font-size:11px;color:var(--success);margin-bottom:4px;">已完成</div>
                  <div class="progress-bar"><div class="fill" style="width:100%;background:var(--success)"></div></div>
                </div>
                <span class="tag tag-green">已完成</span>
              </div>
            </div>
          </div>
        </div>
        <div class="panel">
          <div class="panel-header"><h3>📅 发布管理</h3><span class="link">+ 新建发布</span></div>
          <div class="panel-body no-pad">
            <table>
              <thead><tr><th>视频</th><th>平台</th><th>状态</th><th>播放</th><th>互动</th></tr></thead>
              <tbody>
                <tr><td>镀晶前后对比_v8</td><td><span class="tag tag-blue">抖音</span></td><td><span class="tag tag-green">已发布</span></td><td>8.2K</td><td>326</td></tr>
                <tr><td>贴膜施工_v5</td><td><span class="tag tag-blue">抖音</span></td><td><span class="tag tag-green">已发布</span></td><td>15K</td><td>892</td></tr>
                <tr><td>客户好评合集_v3</td><td><span class="tag tag-blue">抖音</span> <span class="tag tag-gray">小红书</span></td><td><span class="tag tag-yellow">审核中</span></td><td>-</td><td>-</td></tr>
                <tr><td>周末特惠_v2</td><td><span class="tag tag-blue">抖音</span></td><td><span class="tag tag-gray">草稿</span></td><td>-</td><td>-</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- ===== CRM客户管理 ===== -->
    <div class="page" id="page-crm">
      <div class="stat-grid" style="grid-template-columns:repeat(5,1fr);">
        <div class="stat-card" style="padding:14px 16px;"><div class="card-label">👥 总客户数</div><div class="card-value" style="font-size:22px;">2,856</div></div>
        <div class="stat-card" style="padding:14px 16px;"><div class="card-label">📥 本月新增</div><div class="card-value" style="font-size:22px;">342</div></div>
        <div class="stat-card" style="padding:14px 16px;"><div class="card-label">📅 待邀约</div><div class="card-value" style="font-size:22px;color:var(--warning);">48</div></div>
        <div class="stat-card" style="padding:14px 16px;"><div class="card-label">💰 本月成交</div><div class="card-value" style="font-size:22px;color:var(--success);">67</div></div>
        <div class="stat-card" style="padding:14px 16px;"><div class="card-label">📊 转化率</div><div class="card-value" style="font-size:22px;color:var(--primary);">19.6%</div></div>
      </div>

      <!-- 转化漏斗 -->
      <div class="panel" style="margin-bottom:16px;">
        <div class="panel-header"><h3>🔄 本月转化漏斗</h3></div>
        <div class="panel-body">
          <div class="funnel">
            <div class="funnel-step"><div class="step-num">342</div><div class="step-label">获取线索</div><div class="step-rate">100%</div></div>
            <div class="funnel-arrow">→</div>
            <div class="funnel-step"><div class="step-num">198</div><div class="step-label">AI有效沟通</div><div class="step-rate">57.9%</div></div>
            <div class="funnel-arrow">→</div>
            <div class="funnel-step"><div class="step-num">126</div><div class="step-label">邀约到店</div><div class="step-rate">36.8%</div></div>
            <div class="funnel-arrow">→</div>
            <div class="funnel-step"><div class="step-num">89</div><div class="step-label">到店体验</div><div class="step-rate">26.0%</div></div>
            <div class="funnel-arrow">→</div>
            <div class="funnel-step"><div class="step-num" style="color:var(--success);">67</div><div class="step-label">成交转化</div><div class="step-rate" style="color:var(--success);">19.6%</div></div>
          </div>
        </div>
      </div>

      <div class="crm-toolbar">
        <select><option>全部阶段</option><option>新线索</option><option>沟通中</option><option>已邀约</option><option>已到店</option><option>已成交</option><option>已流失</option></select>
        <select><option>全部来源</option><option>抖音</option><option>巨量引擎</option><option>小程序</option><option>转介绍</option></select>
        <select><option>全部意向</option><option>贴膜</option><option>镀晶</option><option>洗车</option><option>改色</option><option>车衣</option></select>
        <input type="text" placeholder="🔍 搜索客户姓名/手机号...">
        <button class="btn btn-primary btn-sm">+ 新增客户</button>
        <button class="btn btn-sm">📥 导出</button>
      </div>

      <div class="panel">
        <div class="panel-body no-pad">
          <table>
            <thead><tr><th>客户</th><th>手机</th><th>来源</th><th>意向</th><th>阶段</th><th>分配</th><th>最近跟进</th><th>操作</th></tr></thead>
            <tbody>
              <tr>
                <td><strong>王建国</strong></td><td>138****6789</td><td><span class="tag tag-blue">抖音</span></td><td>全车贴膜</td><td><span class="tag tag-green">已邀约</span></td><td>销售A组</td><td>今天 10:02</td>
                <td><button class="btn btn-xs btn-primary" onclick="openCustomerDetail('王建国','138****6789','全车贴膜')">详情</button></td>
              </tr>
              <tr>
                <td><strong>李美玲</strong></td><td>159****2345</td><td><span class="tag tag-blue">抖音</span></td><td>镀晶护理</td><td><span class="tag tag-yellow">沟通中</span></td><td>销售B组</td><td>今天 09:55</td>
                <td><button class="btn btn-xs btn-primary" onclick="openCustomerDetail('李美玲','159****2345','镀晶护理')">详情</button></td>
              </tr>
              <tr>
                <td><strong>张伟</strong></td><td>186****8901</td><td><span class="tag tag-purple">巨量引擎</span></td><td>隐形车衣</td><td><span class="tag tag-green">已到店</span></td><td>销售A组</td><td>昨天 16:30</td>
                <td><button class="btn btn-xs btn-primary" onclick="openCustomerDetail('张伟','186****8901','隐形车衣')">详情</button></td>
              </tr>
              <tr>
                <td><strong>赵雪</strong></td><td>177****4567</td><td><span class="tag tag-blue">抖音</span></td><td>精致洗车</td><td><span class="tag tag-green">已成交</span></td><td>销售B组</td><td>昨天 14:20</td>
                <td><button class="btn btn-xs btn-primary" onclick="openCustomerDetail('赵雪','177****4567','精致洗车')">详情</button></td>
              </tr>
              <tr>
                <td><strong>陈浩</strong></td><td>133****7890</td><td><span class="tag tag-gray">小程序</span></td><td>改色膜</td><td><span class="tag tag-gray">新线索</span></td><td>待分配</td><td>1小时前</td>
                <td><button class="btn btn-xs btn-primary" onclick="openCustomerDetail('陈浩','133****7890','改色膜')">详情</button></td>
              </tr>
              <tr>
                <td><strong>刘洋</strong></td><td>152****3456</td><td><span class="tag tag-blue">抖音</span></td><td>全车贴膜</td><td><span class="tag tag-red">已流失</span></td><td>销售A组</td><td>3天前</td>
                <td><button class="btn btn-xs" onclick="openCustomerDetail('刘洋','152****3456','全车贴膜')">查看</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- ===== SEO/GEO优化 ===== -->
    <div class="page" id="page-seo">
      <div class="seo-grid">
        <div class="seo-card">
          <h4>🔍 本地搜索排名（SEO）</h4>
          <div class="seo-rank"><span class="keyword">汽车贴膜 北京</span><span class="pos" style="color:var(--success);">第1位</span><span class="change" style="color:var(--success);">▲ 2</span></div>
          <div class="seo-rank"><span class="keyword">镀晶多少钱</span><span class="pos" style="color:var(--primary);">第3位</span><span class="change" style="color:var(--success);">▲ 5</span></div>
          <div class="seo-rank"><span class="keyword">隐形车衣 推荐</span><span class="pos">第7位</span><span class="change" style="color:var(--success);">▲ 3</span></div>
          <div class="seo-rank"><span class="keyword">洗车 望京</span><span class="pos">第2位</span><span class="change" style="color:var(--text-secondary);">—</span></div>
          <div class="seo-rank"><span class="keyword">改色膜 价格</span><span class="pos" style="color:var(--danger);">第12位</span><span class="change" style="color:var(--danger);">▼ 4</span></div>
        </div>
        <div class="seo-card">
          <h4>🤖 AI搜索可见度（GEO）<span class="geo-badge">NEW</span></h4>
          <div class="seo-rank"><span class="keyword">北京贴膜哪家好</span><span class="pos" style="color:var(--success);">✅ 被引用</span><span class="change" style="color:var(--success);">ChatGPT · Perplexity</span></div>
          <div class="seo-rank"><span class="keyword">特斯拉贴车衣推荐</span><span class="pos" style="color:var(--success);">✅ 被引用</span><span class="change" style="color:var(--success);">豆包 · Kimi</span></div>
          <div class="seo-rank"><span class="keyword">汽车镀晶有必要吗</span><span class="pos" style="color:var(--warning);">⚠️ 部分引用</span><span class="change" style="color:var(--text-secondary);">元宝</span></div>
          <div class="seo-rank"><span class="keyword">车衣品牌排行</span><span class="pos" style="color:var(--danger);">❌ 未收录</span><span class="change">-</span></div>
        </div>
        <div class="seo-card">
          <h4>📈 抖音SEO表现</h4>
          <div class="seo-rank"><span class="keyword">#贴膜施工</span><span class="pos" style="color:var(--success);">TOP 50</span><span class="change" style="color:var(--success);">▲ 12</span></div>
          <div class="seo-rank"><span class="keyword">#汽车美容</span><span class="pos" style="color:var(--primary);">TOP 200</span><span class="change" style="color:var(--success);">▲ 35</span></div>
          <div class="seo-rank"><span class="keyword">#改色膜案例</span><span class="pos" style="color:var(--warning);">TOP 500</span><span class="change" style="color:var(--success);">▲ 80</span></div>
          <div class="seo-rank"><span class="keyword">#隐形车衣</span><span class="pos" style="color:var(--danger);">未上榜</span><span class="change">-</span></div>
        </div>
      </div>

      <div class="panel-grid">
        <div class="panel">
          <div class="panel-header"><h3>📊 各渠道流量来源</h3></div>
          <div class="panel-body">
            <div style="display:flex;flex-direction:column;gap:12px;">
              <div style="display:flex;align-items:center;gap:10px;">
                <span style="font-size:13px;width:80px;">抖音搜索</span>
                <div style="flex:1;height:22px;background:#e5e7eb;border-radius:8px;overflow:hidden;">
                  <div style="width:45%;height:100%;background:linear-gradient(90deg,#4f6ef7,#818cf8);border-radius:8px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:11px;color:#fff;font-weight:600;">45%</div>
                </div>
                <span style="font-size:12px;color:var(--text-secondary);width:60px;">1,280次</span>
              </div>
              <div style="display:flex;align-items:center;gap:10px;">
                <span style="font-size:13px;width:80px;">百度搜索</span>
                <div style="flex:1;height:22px;background:#e5e7eb;border-radius:8px;overflow:hidden;">
                  <div style="width:25%;height:100%;background:linear-gradient(90deg,#10b981,#34d399);border-radius:8px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:11px;color:#fff;font-weight:600;">25%</div>
                </div>
                <span style="font-size:12px;color:var(--text-secondary);width:60px;">712次</span>
              </div>
              <div style="display:flex;align-items:center;gap:10px;">
                <span style="font-size:13px;width:80px;">AI搜索</span>
                <div style="flex:1;height:22px;background:#e5e7eb;border-radius:8px;overflow:hidden;">
                  <div style="width:15%;height:100%;background:linear-gradient(90deg,#7c3aed,#a78bfa);border-radius:8px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:11px;color:#fff;font-weight:600;">15%</div>
                </div>
                <span style="font-size:12px;color:var(--text-secondary);width:60px;">426次</span>
              </div>
              <div style="display:flex;align-items:center;gap:10px;">
                <span style="font-size:13px;width:80px;">地图搜索</span>
                <div style="flex:1;height:22px;background:#e5e7eb;border-radius:8px;overflow:hidden;">
                  <div style="width:10%;height:100%;background:linear-gradient(90deg,#f59e0b,#fbbf24);border-radius:8px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:11px;color:#fff;font-weight:600;">10%</div>
                </div>
                <span style="font-size:12px;color:var(--text-secondary);width:60px;">285次</span>
              </div>
              <div style="display:flex;align-items:center;gap:10px;">
                <span style="font-size:13px;width:80px;">其他</span>
                <div style="flex:1;height:22px;background:#e5e7eb;border-radius:8px;overflow:hidden;">
                  <div style="width:5%;height:100%;background:#d1d5db;border-radius:8px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:11px;color:#fff;font-weight:600;">5%</div>
                </div>
                <span style="font-size:12px;color:var(--text-secondary);width:60px;">142次</span>
              </div>
            </div>
          </div>
        </div>
        <div class="panel">
          <div class="panel-header"><h3>💡 SEO/GEO优化建议</h3></div>
          <div class="panel-body">
            <div style="display:flex;flex-direction:column;gap:12px;">
              <div style="padding:12px;background:#eef1fe;border-radius:8px;font-size:13px;">
                <strong>🔧 高优先级</strong><br>
                <span style="color:var(--text-secondary);">「车衣品牌排行」在AI搜索中未收录，建议发布一篇深度评测文章</span>
              </div>
              <div style="padding:12px;background:#fef3c7;border-radius:8px;font-size:13px;">
                <strong>⚡ 中优先级</strong><br>
                <span style="color:var(--text-secondary);">「改色膜 价格」搜索排名下降4位，建议更新内容并增加本地关键词</span>
              </div>
              <div style="padding:12px;background:#d1fae5;border-radius:8px;font-size:13px;">
                <strong>✅ 表现良好</strong><br>
                <span style="color:var(--text-secondary);">「汽车贴膜 北京」居本地搜索第1位，点击率 8.7%，持续优化</span>
              </div>
              <div style="padding:12px;background:#f3f4f6;border-radius:8px;font-size:13px;">
                <strong>💡 GEO提示</strong><br>
                <span style="color:var(--text-secondary);">AI搜索引擎越来越重要，建议增加结构化数据标记（Schema.org）</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ===== 系统设置 ===== -->
    <div class="page" id="page-settings">
      <div class="settings-layout">
        <!-- 设置导航 -->
        <div class="settings-nav">
          <div class="settings-nav-item active" data-stab="store" onclick="switchSettingsTab('store')"><span class="si-icon">🏪</span> 店面信息</div>
          <div class="settings-nav-item" data-stab="staff" onclick="switchSettingsTab('staff')"><span class="si-icon">👥</span> 员工管理</div>
          <div class="settings-nav-item" data-stab="ai-rules" onclick="switchSettingsTab('ai-rules')"><span class="si-icon">🤖</span> AI客服规则</div>
          <div class="settings-nav-item" data-stab="templates" onclick="switchSettingsTab('templates')"><span class="si-icon">🎬</span> 混剪模板</div>
          <div class="settings-nav-item" data-stab="douyin" onclick="switchSettingsTab('douyin')"><span class="si-icon">📱</span> 抖音账号</div>
          <div class="settings-nav-item" data-stab="notify" onclick="switchSettingsTab('notify')"><span class="si-icon">🔔</span> 通知设置</div>
          <div class="settings-nav-item" data-stab="danger" onclick="switchSettingsTab('danger')"><span class="si-icon">⚠️</span> 高级操作</div>
        </div>
        <!-- 设置内容区 -->
        <div class="settings-panel" id="settingsPanel">
          <!-- 店面信息 (默认) -->
          <div class="stab-content active" id="stab-store">
            <h3>🏪 店面信息</h3>
            <p class="panel-desc">管理门店基本信息，这些信息将展示在AI客服回复和客户邀约中。</p>
            <div class="settings-section">
              <h4>基本信息</h4>
              <div class="form-grid">
                <div class="form-group"><label>门店名称</label><input type="text" value="车美汇旗舰店"></div>
                <div class="form-group"><label>品牌简称</label><input type="text" value="车美汇"></div>
                <div class="form-group"><label>联系电话</label><input type="text" value="010-8888-6666"></div>
                <div class="form-group"><label>备用电话</label><input type="text" value="138xxxx8888"></div>
                <div class="form-group full"><label>门店地址</label><input type="text" value="北京市朝阳区望京街道xxx号"></div>
                <div class="form-group"><label>营业时间（起）</label><input type="time" value="08:30"></div>
                <div class="form-group"><label>营业时间（止）</label><input type="time" value="20:00"></div>
              </div>
            </div>
            <div class="settings-section">
              <h4>服务项目与报价</h4>
              <div class="form-grid">
                <div class="form-group"><label>全车贴膜（基础款）</label><input type="text" value="¥3,999 起 (3M)"></div>
                <div class="form-group"><label>全车贴膜（升级款）</label><input type="text" value="¥6,999 起 (龙膜AVS)"></div>
                <div class="form-group"><label>全车贴膜（旗舰款）</label><input type="text" value="¥12,999 起 (XPEL ULT)"></div>
                <div class="form-group"><label>镀晶护理</label><input type="text" value="¥1,580 起"></div>
                <div class="form-group"><label>精致洗车</label><input type="text" value="¥68 起"></div>
                <div class="form-group"><label>改色膜</label><input type="text" value="¥5,800 起"></div>
              </div>
            </div>
            <div class="settings-section">
              <h4>门店介绍（AI客服引用）</h4>
              <div class="form-grid single">
                <div class="form-group full">
                  <label>门店简介</label>
                  <textarea rows="3">车美汇旗舰店成立于2018年，专注高端汽车美容与贴膜服务。拥有8年经验技师团队，累计服务超过20,000台车辆。使用3M、龙膜、XPEL等国际一线品牌产品，提供从洗车、镀晶到全车贴膜的一站式服务。
姓名	手机号	角色	所属组	接待上限	状态
周明	139****1234	管理员	-	-	在线
林小红	158****5678	销售组长	销售A组	15单/日	在线
陈刚	186****9012	销售顾问	销售A组	10单/日	在线
吴芳	177****3456	销售组长	销售B组	15单/日	忙碌
赵磊	133****7890	运营专员	-	-	在线
刘悦	152****4321	视频剪辑	-	-	离线
角色	权限范围
管理员	全部功能 + 系统设置 + 员工管理
销售组长	CRM管理 + 客资分配 + AI客服监控 + 数据查看
销售顾问	客户跟进 + 客资查看（仅自己） + 预约管理
运营专员	AI客服配置 + 混剪管理 + 发布管理 + 数据分析
视频剪辑	AI混剪 + 素材管理 + 模板管理
关键词	触发动作	话术模板	优先级
价格/多少钱/优惠	发送报价+优惠	贴膜询价话术V3	高
预约/什么时候/明天	发起邀约	到店邀约话术V2	高
什么牌子/哪个好	产品对比	产品推荐话术V1	中
地址/在哪/位置	发送门店信息	门店导航话术	中
差评/投诉/退款	转人工 + 通知管理员	客诉安抚话术V1	高
编辑页面

👥 员工管理

员工列表

角色权限说明

🤖 AI客服规则配置

自动回复开关

关键词触发规则

客资分发策略

🎬 混剪模板管理

模板列表

默认配置

📱 抖音账号绑定

已绑定账号

绑定新账号

数据同步设置

🔔 通知设置

新线索通知

客户跟进提醒

混剪任务通知

通知渠道

⚠️ 高级操作

数据管理

🗑️ 危险区域

编辑页面

👥 员工管理

员工列表

角色权限说明

🤖 AI客服规则配置

自动回复开关

关键词触发规则

客资分发策略

🎬 混剪模板管理

模板列表

默认配置

📱 抖音账号绑定

已绑定账号

绑定新账号

数据同步设置

🔔 通知设置

新线索通知

客户跟进提醒

混剪任务通知

通知渠道

⚠️ 高级操作

数据管理

🗑️ 危险区域

客户详情
