编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI智能客服系统 - 坐席工作台</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --primary: #4F46E5;
            --primary-hover: #4338CA;
            --success: #10B981;
            --warning: #F59E0B;
            --danger: #EF4444;
            --bg: #F3F4F6;
            --white: #FFFFFF;
            --text: #111827;
            --text-secondary: #6B7280;
            --border: #E5E7EB;
            --sidebar-width: 220px;
        }
        body {
            font-family: 'Microsoft YaHei', -apple-system, sans-serif;
            background: var(--bg);
            color: var(--text);
            min-height: 100vh;
        }
        
        /* 顶部导航 */
        .header {
            height: 56px;
            background: var(--white);
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
        }
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 16px;
            font-weight: 600;
            color: var(--primary);
        }
        .logo-icon {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, var(--primary), #818CF8);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }
        .header-right {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px 12px;
            background: var(--bg);
            border-radius: 8px;
            cursor: pointer;
        }
        .user-avatar {
            width: 32px;
            height: 32px;
            background: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 14px;
        }
        .user-name { font-weight: 500; font-size: 14px; }
        .user-status { font-size: 12px; color: var(--success); }
        
        /* 主布局 */
        .main-container {
            display: flex;
            margin-top: 56px;
            min-height: calc(100vh - 56px);
        }
        
        /* 左侧导航 */
        .sidebar {
            width: var(--sidebar-width);
            background: var(--white);
            border-right: 1px solid var(--border);
            position: fixed;
            top: 56px;
            left: 0;
            bottom: 0;
            overflow-y: auto;
            padding: 16px 0;
        }
        .nav-group { margin-bottom: 8px; }
        .nav-title {
            padding: 8px 20px;
            font-size: 11px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .nav-item {
            padding: 10px 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 14px;
            color: var(--text);
        }
        .nav-item:hover { background: var(--bg); }
        .nav-item.active {
            background: rgba(79, 70, 229, 0.1);
            color: var(--primary);
            border-left: 3px solid var(--primary);
            padding-left: 17px;
        }
        .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
        .nav-badge {
            margin-left: auto;
            background: var(--danger);
            color: white;
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 10px;
        }
        
        /* 内容区域 */
        .content {
            flex: 1;
            margin-left: var(--sidebar-width);
            padding: 24px;
        }
        
        /* 页面标题 */
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }
        .page-title {
            font-size: 20px;
            font-weight: 600;
        }
        
        /* 按钮 */
        .btn {
            padding: 8px 16px;
            border-radius: 6px;
            border: none;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
        }
        .btn-primary {
            background: var(--primary);
            color: white;
        }
        .btn-primary:hover { background: var(--primary-hover); }
        .btn-secondary {
            background: var(--white);
            border: 1px solid var(--border);
            color: var(--text);
        }
        .btn-secondary:hover { background: var(--bg); }
        .btn-sm { padding: 6px 12px; font-size: 13px; }
        .btn svg { width: 16px; height: 16px; }
        
        /* 统计卡片 */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px;
            margin-bottom: 24px;
        }
        .stat-card {
            background: var(--white);
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .stat-label {
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }
        .stat-value {
            font-size: 24px;
            font-weight: 700;
        }
        .stat-trend {
            font-size: 12px;
            margin-top: 4px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .stat-trend.up { color: var(--success); }
        .stat-trend.down { color: var(--danger); }
        
        /* 卡片容器 */
        .card {
            background: var(--white);
            border-radius: 10px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .card-header {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .card-title {
            font-size: 15px;
            font-weight: 600;
        }
        .card-body { padding: 20px; }
        
        /* 双列布局 */
        .two-col {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        
        /* 任务列表 */
        .task-list { list-style: none; }
        .task-item {
            display: flex;
            align-items: center;
            padding: 14px 0;
            border-bottom: 1px solid var(--border);
        }
        .task-item:last-child { border-bottom: none; }
        .task-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            flex-shrink: 0;
        }
        .task-icon.blue { background: rgba(59, 130, 246, 0.1); color: #3B82F6; }
        .task-icon.orange { background: rgba(245, 158, 11, 0.1); color: #F59E0B; }
        .task-icon.green { background: rgba(16, 185, 129, 0.1); color: #10B981; }
        .task-icon.purple { background: rgba(139, 92, 246, 0.1); color: #8B5CF6; }
        .task-icon svg { width: 20px; height: 20px; }
        .task-content { flex: 1; }
        .task-title { font-weight: 500; font-size: 14px; margin-bottom: 2px; }
        .task-meta { font-size: 12px; color: var(--text-secondary); }
        .task-action { color: var(--primary); font-size: 13px; cursor: pointer; }
        .task-action:hover { text-decoration: underline; }
        
        /* 状态标签 */
        .status {
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }
        .status-success { background: rgba(16, 185, 129, 0.1); color: var(--success); }
        .status-warning { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
        .status-danger { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
        .status-info { background: rgba(59, 130, 246, 0.1); color: #3B82F6; }
        .status-purple { background: rgba(139, 92, 246, 0.1); color: #8B5CF6; }
        
        /* 表格 */
        .table {
            width: 100%;
            border-collapse: collapse;
        }
        .table th, .table td {
            padding: 12px 16px;
            text-align: left;
            border-bottom: 1px solid var(--border);
            font-size: 14px;
        }
        .table th {
            background: var(--bg);
            font-weight: 500;
            color: var(--text-secondary);
            font-size: 13px;
        }
        .table tbody tr:hover { background: rgba(79, 70, 229, 0.02); }
        .table .checkbox {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }
        .table-actions {
            display: flex;
            gap: 12px;
            color: var(--primary);
            font-size: 13px;
        }
        .table-actions span { cursor: pointer; }
        .table-actions span:hover { text-decoration: underline; }
        
        /* 搜索框 */
        .search-box {
            display: flex;
            align-items: center;
            background: var(--bg);
            border-radius: 6px;
            padding: 8px 12px;
            gap: 8px;
        }
        .search-box input {
            border: none;
            background: transparent;
            outline: none;
            font-size: 14px;
            width: 200px;
        }
        .search-box svg { width: 16px; height: 16px; color: var(--text-secondary); }
        
        /* 筛选器 */
        .filter-select {
            padding: 8px 12px;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 14px;
            background: var(--white);
            cursor: pointer;
            min-width: 120px;
        }
        
        /* 分页 */
        .pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            border-top: 1px solid var(--border);
        }
        .pagination-info { font-size: 13px; color: var(--text-secondary); }
        .pagination-buttons { display: flex; gap: 4px; }
        .page-btn {
            width: 32px;
            height: 32px;
            border: 1px solid var(--border);
            background: var(--white);
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
        }
        .page-btn:hover { background: var(--bg); }
        .page-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
        
        /* 模态框 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        .modal-overlay.show { display: flex; }
        .modal {
            background: var(--white);
            border-radius: 12px;
            width: 90%;
            max-width: 800px;
            max-height: 90vh;
            overflow: hidden;
            animation: modalIn 0.3s;
        }
        @keyframes modalIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }
        .modal-lg { max-width: 1000px; }
        .modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .modal-title { font-size: 16px; font-weight: 600; }
        .modal-close {
            width: 32px;
            height: 32px;
            border: none;
            background: var(--bg);
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .modal-close:hover { background: var(--border); }
        .modal-body {
            padding: 24px;
            max-height: 60vh;
            overflow-y: auto;
        }
        .modal-footer {
            padding: 16px 24px;
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }
        
        /* 表单 */
        .form-group { margin-bottom: 20px; }
        .form-label{
            display: block;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 8px;
        }
        .form-label span { color: var(--danger); }
        .form-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 14px;
            transition: all 0.2s;
        }
        .form-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
        }
        .form-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }
        textarea.form-input { resize: vertical; min-height: 100px; }
        
        /* 快捷操作 */
        .quick-actions {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }
        .quick-action {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: var(--bg);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .quick-action:hover {
            background: rgba(79, 70, 229, 0.1);
            transform: translateY(-2px);
        }
        .quick-action svg { width: 28px; height: 28px; margin-bottom: 8px; color: var(--primary); }
        .quick-action span { font-size: 13px; color: var(--text); }
        
        /* 实时状态 */
        .realtime-stats {
            display: flex;
            justify-content: center;
            gap: 40px;
            padding: 20px 0;
        }
        .realtime-stat { text-align: center; }
        .realtime-value {
            font-size: 36px;
            font-weight: 700;
            color: var(--primary);
        }
        .realtime-label {
            font-size: 13px;
            color: var(--text-secondary);
            margin-top: 4px;
        }
        
        /* 进度条 */
        .progress-bar {
            height: 8px;
            background: var(--bg);
            border-radius: 4px;
            overflow: hidden;
            margin-top: 8px;
        }
        .progress-fill {
            height: 100%;
            background: var(--primary);
            border-radius: 4px;
            transition: width 0.3s;
        }
        
        /* Tab标签页 */
        .tabs {
            display: flex;
            gap: 4px;
            padding: 0 24px;
            background: var(--bg);
            border-bottom: 1px solid var(--border);
        }
        .tab {
            padding: 12px 20px;
            cursor: pointer;
            font-size: 14px;
            color: var(--text-secondary);
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
        }
        .tab:hover { color: var(--text); }
        .tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }
        
        /* 模板卡片 */
        .template-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }
        .template-card {
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 20px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .template-card:hover {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
        }
        .template-card.selected {
            border-color: var(--primary);
            background: rgba(79, 70, 229, 0.05);
        }
        .template-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 12px;
        }
        .template-name { font-weight: 600; font-size: 15px; }
        .template-uses { font-size: 12px; color: var(--text-secondary); }
        .template-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
        
        /* 通知提示 */
        .toast {
            position: fixed;
            top: 80px;
            right: 24px;
            background: var(--white);
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            padding: 16px 20px;
            display: none;
            align-items: center;
            gap: 12px;
            z-index: 2000;
            animation: toastIn 0.3s;
        }
        .toast.show { display: flex; }
        @keyframes toastIn {
            from { opacity: 0; transform: translateX(20px); }
            to { opacity: 1; transform: translateX(0); }
        }
        .toast-icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .toast-success .toast-icon { background: rgba(16, 185, 129, 0.1); color: var(--success); }
        .toast-message { font-size: 14px; }
        
        /* 播放按钮 */
        .play-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--primary);
            color: white;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .play-btn:hover { background: var(--primary-hover); }
        
        /* 开关 */
        .toggle {
            position: relative;
            width: 44px;
            height: 24px;
            background: var(--border);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .toggle.active { background: var(--success); }
        .toggle::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            transition: all 0.2s;
        }
        .toggle.active::after { left: 22px; }
        
        /* 隐藏类 */
        .hidden { display: none !important; }
        
        /* 通话类型图标 */
        .call-type-icon {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .call-type-inbound {
            background: rgba(16, 185, 129, 0.1);
            color: #10B981;
        }
        .call-type-outbound {
            background: rgba(59, 130, 246, 0.1);
            color: #3B82F6;
        }
        .call-type-ai {
            background: rgba(139, 92, 246, 0.1);
            color: #8B5CF6;
        }
        
        /* 统计卡片图标 */
        .stat-icon {
            width: 48px;
            height: 48px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
        }
        .stat-icon svg { color: white; }
        
        /* 统一按钮样式 */
        .btn-outline {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text);
        }
        .btn-outline:hover {
            background: var(--bg);
            border-color: var(--primary);
            color: var(--primary);
        }
        .btn-success {
            background: var(--success);
            color: white;
            border: none;
        }
        .btn-success:hover { background: #0D9668; }
        .btn-danger {
            background: var(--danger);
            color: white;
            border: none;
        }
        .btn-danger:hover { background: #DC2626; }
        
        /* 文本按钮 */
        .btn-text {
            background: none;
            border: none;
            color: var(--primary);
            padding: 4px 8px;
            cursor: pointer;
            font-size: 13px;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .btn-text:hover {
            background: rgba(79, 70, 229, 0.1);
        }
        .btn-text svg { width: 16px; height: 16px; }
        .btn-text:disabled {
            color: var(--text-secondary);
            cursor: not-allowed;
            opacity: 0.5;
        }
        
        /* 统一page-actions样式 */
        .page-actions {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        
        /* 问答卡片样式 */
        .qa-item {
            border: 1px solid var(--border);
            border-radius: 8px;
            margin-bottom: 12px;
            overflow: hidden;
        }
        .qa-question, .qa-answer {
            display: flex;
            gap: 12px;
            padding: 12px 16px;
        }
        .qa-question {
            background: var(--bg);
            border-bottom: 1px solid var(--border);
        }
        .qa-answer {
            background: white;
        }
        .qa-label {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
            flex-shrink: 0;
        }
        .qa-question .qa-label {
            background: rgba(59, 130, 246, 0.1);
            color: #3B82F6;
        }
        .qa-answer .qa-label {
            background: rgba(16, 185, 129, 0.1);
            color: #10B981;
        }
        .qa-content { flex: 1; }
        .qa-text { font-size: 14px; line-height: 1.6; margin-bottom: 8px; }
        .qa-meta {
            display: flex;
            gap: 12px;
            align-items: center;
        }
        .qa-views, .qa-uses {
            font-size: 12px;
            color: var(--text-secondary);
        }
        .qa-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        /* 转人工规则卡片 */
        .transfer-rules {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .transfer-rule-card {
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 16px;
            background: white;
        }
        .transfer-rule-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        .transfer-rule-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 500;
        }
        .transfer-rule-desc {
            font-size: 13px;
            color: var(--text-secondary);
            padding-left: 30px;
        }
        
        /* 坐席状态点 */
        .status-dot {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .status-dot::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }
        .status-online::before { background: var(--success); }
        .status-busy::before { background: var(--danger); }
        .status-away::before { background: var(--warning); }
        .status-offline::before { background: var(--text-secondary); }
        
        /* 通话控制按钮 */
        .call-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            padding: 12px;
background: var(--bg);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            color: var(--text);
            font-size: 12px;
            transition: all 0.2s;
        }
        .call-btn:hover {
            background: rgba(79, 70, 229, 0.1);
            color: var(--primary);
        }
        .call-btn svg { color: inherit; }
        .call-btn-danger { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
        .call-btn-danger:hover { background: var(--danger); color: white; }
        
        /* 图表样式 */
        .chart-bar-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            flex: 1;
        }
        .chart-bar {
            width: 100%;
            max-width: 40px;
            border-radius: 4px 4px 0 0;
            min-height: 20px;
            transition: height 0.3s;
        }
        .chart-bar-label {
            font-size: 11px;
            color: var(--text-secondary);
        }
        
        /* 下拉菜单 */
        .dropdown { position: relative; }
        .dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            background: white;
            border: 1px solid var(--border);
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 100;
            min-width: 120px;
            display: none;
        }
        .dropdown-menu.show { display: block; }
        .dropdown-menu a {
            display: block;
            padding: 8px 16px;
            font-size: 13px;
            color: var(--text);
            text-decoration: none;
        }
        .dropdown-menu a:hover { background: var(--bg); }
        
        /* Tab徽章 */
        .tab-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 18px;
            height: 18px;
            padding: 0 6px;
            border-radius: 9px;
            font-size: 11px;
            font-weight: 600;
            margin-left: 4px;
        }
        .tab-badge { background: var(--danger); color: white; }
        .tab-badge-warning { background: var(--warning); color: white; }
        .tab-badge-success { background: var(--success); color: white; }
        
        /* Tab内容区域 */
        .tab-content { display: block; }
        
        /* 数据表格 */
        .data-table {
            width: 100%;
            border-collapse: collapse;
        }
        .data-table th {
            background: var(--bg);
            padding: 12px 16px;
            text-align: left;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-secondary);
            border-bottom: 1px solid var(--border);
        }
        .data-table td {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            font-size: 14px;
        }
        .data-table tbody tr:hover {
            background: rgba(79, 70, 229, 0.02);
        }
        
        /* 标签变体 */
        .tag-warning { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
        .tag-info { background: rgba(59, 130, 246, 0.1); color: #3B82F6; }
        .tag-success { background: rgba(16, 185, 129, 0.1); color: var(--success); }
        .tag-danger { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
        
        /* 开关替换 */
        .toggle input { display: none; }
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0; left: 0; right: 0; bottom: 0;
            background: var(--border);
            border-radius: 12px;
            transition: 0.3s;
        }
        .toggle-slider::before {
            position: absolute;
            content: '';
            height: 20px;
            width: 20px;
            left: 2px;
            bottom: 2px;
            background: white;
            border-radius: 50%;
            transition: 0.3s;
        }
        .toggle input:checked + .toggle-slider {
            background: var(--success);
        }
        .toggle input:checked + .toggle-slider::before {
            transform: translateX(20px);
        }
        
        /* 标签输入 */
        .tag-input-container {
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 8px;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            cursor: text;
        }
        .tag-input-container:focus-within {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
        }
        .tag {
            background: rgba(79, 70, 229, 0.1);
            color: var(--primary);
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .tag-close { cursor: pointer; }
        .tag-input {
            border: none;
            outline: none;
            font-size: 14px;
            flex: 1;
            min-width: 100px;
        }
        
        /* 步骤指示 */
        .steps {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
        }
        .step {
            display: flex;
            align-items: center;
        }
        .step-number {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--border);
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }
        .step.active .step-number {
            background: var(--primary);
            color: white;
        }
        .step.completed .step-number {
            background: var(--success);
            color: white;
        }
        .step-label {
            margin-left: 8px;
            font-size: 14px;
            color: var(--text-secondary);
        }
        .step.active .step-label { color: var(--primary); font-weight: 500; }
        .step-line {
            width: 60px;
            height: 2px;
            background: var(--border);
            margin: 0 16px;
        }
        .step.completed + .step .step-line,
        .step-line.completed { background: var(--success); }
        
        /* 变量预览 */
        .variable-preview {
            background: var(--bg);
            border-radius: 8px;
            padding: 16px;
            margin-top: 12px;
            font-family: monospace;
            font-size: 13px;
            line-height: 1.8;
        }
        .variable-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .variable-key { color: var(--primary); }
        .variable-value { color: var(--text-secondary); }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <header class="header">
        <div class="logo">
            <div class="logo-icon">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M12 2a10 10 0 1 0 10 10H12V2z"/>
                </svg>
            </div>
            <span>AI智能客服系统</span>
        </div>
        <div class="header-right">
            <div class="user-info" onclick="showToast('已打开个人信息')">
                <div class="user-avatar">李</div>
                <div>
                    <div class="user-name">李明</div>
                    <div class="user-status">● 在线</div>
                </div>
            </div>
        </div>
    </header>
    
    <!-- 主容器 -->
    <div class="main-container">
        <!-- 左侧导航 -->
        <nav class="sidebar">
            <div class="nav-group">
                <div class="nav-title">工作台</div>
                <div class="nav-item active" onclick="switchPage('dashboard', this)">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="3" y="3" width="7" height="9"/>
                        <rect x="14" y="3" width="7" height="5"/>
                        <rect x="14" y="12" width="7" height="9"/>
                        <rect x="3" y="16" width="7" height="5"/>
                    </svg>
                    <span>工作台首页</span>
                </div>
            </div>
            
            <div class="nav-group">
                <div class="nav-title">外呼管理</div>
                <div class="nav-item" onclick="switchPage('outbound-task', this)">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
                    </svg>
                    <span>外呼任务</span>
                </div>
                <div class="nav-item" onclick="switchPage('outbound-template', this)">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                        <line x1="16" y1="13" x2="8" y2="13"/>
                        <line x1="16" y1="17" x2="8" y2="17"/>
                    </svg>
                    <span>外呼模板</span>
                </div>
                <div class="nav-item" onclick="switchPage('customer-import', this)">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                        <polyline points="17 8 12 3 7 8"/>
                        <line x1="12" y1="3" x2="12" y2="15"/>
                    </svg>
                    <span>客户导入</span>
                </div>
            </div>
            
            <div class="nav-group">
                <div class="nav-title">AI服务</div>
                <div class="nav-item" onclick="switchPage('ai-answer', this)">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="3"/>
                        <path d="M12 1v4m0 14v4m-9-9h4m14 0h4"/>
                    </svg>
                    <span>AI接听</span>
                </div>
                <div class="nav-item" onclick="switchPage('agent-seat', this)">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                        <circle cx="12" cy="7" r="4"/>
                    </svg>
                    <span>人工坐席</span>
                </div>
                <div class="nav-item" onclick="switchPage('call-record', this)">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
                    </svg>
                    <span>通话记录</span>
                </div>
            </div>
            
            <div class="nav-group">
                <div class="nav-title">客户与工单</div>
                <div class="nav-item" onclick="switchPage('customer', this)">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                        <circle cx="9" cy="7" r="4"/>
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                        <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                    </svg>
                    <span>客户管理</span>
                </div>
                <div class="nav-item" onclick="switchPage('workorder', this)">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M9 11l3 3L22 4"/>
                        <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
                    </svg>
                    <span>工单管理</span>
                    <span class="nav-badge">5</span>
                </div>
            </div>
            
            <div class="nav-group">
                <div class="nav-title">数据与报表</div>
                <div class="nav-item" onclick="switchPage('report', this)">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="20" x2="18" y2="10"/>
                        <line x1="12" y1="20" x2="12" y2="4"/>
                        <line x1="6" y1="20" x2="6" y2="14"/>
                    </svg>
                    <span>数据报表</span>
                </div>
            </div>
        </nav>
        
        <!-- 内容区域 -->
        <main class="content">
            <!-- ==================== 工作台首页 ==================== -->
            <div id="page-dashboard" class="page-content">
                <div class="page-header">
                    <h1 class="page-title">工作台首页</h1>
                    <div style="display: flex; gap: 8px;">
                        <button class="btn btn-primary" onclick="openModal('create-task')">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <line x1="12" y1="5" x2="12" y2="19"/>
                                <line x1="5" y1="12" x2="19" y2="12"/>
                            </svg>
                            新建外呼任务
                        </button>
                    </div>
                </div>
                
                <!-- 今日数据概览 -->
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-label">今日外呼量</div>
                        <div class="stat-value" style="color: var(--primary);">1,286</div>
                        <div class="stat-trend up">
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l8 8h-6v8h-4v-8H4z"/></svg>
                            较昨日 +12%
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-label">今日接听量</div>
                        <div class="stat-value" style="color: var(--success);">856</div>
                        <div class="stat-trend up">
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l8 8h-6v8h-4v-8H4z"/></svg>
                            较昨日 +8%
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-label">接通率</div>
                        <div class="stat-value" style="color: #3B82F6;">68.5%</div>
                        <div class="stat-trend down">
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 20l-8-8h6V4h4v8h6z"/></svg>
                            较昨日 -2.3%
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-label">转人工量</div>
                        <div class="stat-value" style="color: var(--warning);">156</div>
                        <div class="stat-trend" style="color: var(--text-secondary);">占接听量 18.2%</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-label">平均通话时长</div>
                        <div class="stat-value">2m 35s</div>
                        <div class="stat-trend" style="color: var(--success);">● 正常</div>
                    </div>
                </div>
                
                <!-- 快捷操作入口 -->
                <div class="card">
                    <div class="card-header">
                        <span class="card-title">快捷操作</span>
                    </div>
                    <div class="card-body">
                        <div class="quick-actions">
                            <div class="quick-action" onclick="openModal('create-task')">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <line x1="12" y1="5" x2="12" y2="19"/>
                                    <line x1="5" y1="12" x2="19" y2="12"/>
                                </svg>
                                <span>新建外呼</span>
                            </div>
                            <div class="quick-action" onclick="switchNavTo('call-record')">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
                                </svg>
                                <span>通话记录</span>
                            </div>
                            <div class="quick-action" onclick="switchNavTo('customer')">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                                    <circle cx="9" cy="7" r="4"/>
                                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                                    <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                                </svg>
                                <span>客户管理</span>
                            </div>
                            <div class="quick-action" onclick="switchNavTo('workorder')">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M9 11l3 3L22 4"/>
                                    <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
                                </svg>
                                <span>工单管理</span>
                            </div>
                            <div class="quick-action" onclick="switchNavTo('outbound-template')">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                    <polyline points="14 2 14 8 20 8"/>
                                    <line x1="16" y1="13" x2="8" y2="13"/>
                                    <line x1="16" y1="17" x2="8" y2="17"/>
                                </svg>
                                <span>模板管理</span>
                            </div>
                            <div class="quick-action" onclick="switchNavTo('report')">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <line x1="18" y1="20" x2="18" y2="10"/>
                                    <line x1="12" y1="20" x2="12" y2="4"/>
                                    <line x1="6" y1="20" x2="6" y2="14"/>
                                </svg>
                                <span>数据报表</span>
                            </div>
                            <div class="quick-action" onclick="openModal('customer-import-wizard')">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                                    <polyline points="17 8 12 3 7 8"/>
                                    <line x1="12" y1="3" x2="12" y2="15"/>
                                </svg>
                                <span>导入数据</span>
                            </div>
                            <div class="quick-action" onclick="switchNavTo('ai-answer')">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <circle cx="12" cy="12" r="3"/>
                                    <path d="M12 1v4m0 14v4m-9-9h4m14 0h4"/>
                                </svg>
                                <span>AI配置</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 待处理任务 & 实时通话状态 -->
                <div class="two-col">
                    <div class="card">
                        <div class="card-header">
                            <span class="card-title">待处理任务</span>
                            <span style="color: var(--text-secondary); font-size: 13px;">共 3 项</span>
                        </div>
                        <div class="card-body" style="padding: 0 20px;">
                            <ul class="task-list">
                                <li class="task-item">
                                    <div class="task-icon blue">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
                                        </svg>
                                    </div>
                                    <div class="task-content">
                                        <div class="task-title">外呼任务「618促销活动」进行中</div>
                                        <div class="task-meta">已完成 68.5% · 5,000条目标</div>
                                        <div class="progress-bar" style="margin-top: 8px;">
                                            <div class="progress-fill" style="width: 68.5%;"></div>
                                        </div>
                                    </div>
                                    <div>
                                        <span class="status status-success">进行中</span>
                                        <div class="task-action" style="margin-top: 8px; text-align: right;" onclick="showTaskDetail('618')">查看详情</div>
                                    </div>
                                </li>
                                <li class="task-item">
                                    <div class="task-icon orange">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <path d="M9 11l3 3L22 4"/>
                                            <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
                                        </svg>
                                    </div>
                                    <div class="task-content">
                                        <div class="task-title">待跟进工单 #10086</div>
                                        <div class="task-meta">客户：张先生 · 创建于 09:30</div>
                                    </div>
                                    <div>
                                        <span class="status status-danger">紧急</span>
                                        <div class="task-action" style="margin-top: 8px; text-align: right;" onclick="showToast('已打开工单详情')">立即处理</div>
                                    </div>
                                </li>
                                <li class="task-item">
                                    <div class="task-icon green">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                                            <circle cx="9" cy="7" r="4"/>
                                        </svg>
                                    </div>
                                    <div class="task-content">
                                        <div class="task-title">客户「王女士」待跟进</div>
                                        <div class="task-meta">上次联系：3天前 · 意向产品：VIP会员</div>
                                    </div>
                                    <div>
                                        <span class="status status-warning">待跟进</span>
                                        <div class="task-action" style="margin-top: 8px; text-align: right;" onclick="showToast('已打开客户详情')">查看详情</div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <span class="card-title">实时通话状态</span>
                            <span style="color: var(--success); font-size: 13px;">● 正常</span>
                        </div>
                        <div class="card-body">
                            <div class="realtime-stats">
                                <div class="realtime-stat">
                                    <div class="realtime-value" id="calling-count">8</div>
                                    <div class="realtime-label">当前通话中</div>
                                </div>
                                <div class="realtime-stat">
                                    <div class="realtime-value" style="color: #3B82F6;" id="outbound-count">5</div>
                                    <div class="realtime-label">外呼中</div>
                                </div>
                                <div class="realtime-stat">
                                    <div class="realtime-value" style="color: var(--success);" id="inbound-count">3</div>
                                    <div class="realtime-label">接听中</div>
                                </div>
                            </div>
                            <div style="text-align: center; margin-top: 16px;">
                                <button class="btn btn-secondary btn-sm" onclick="refreshRealtimeStats()">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
                                        <polyline points="23 4 23 10 17 10"/>
                                        <polyline points="1 20 1 14 7 14"/>
                                        <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
                                    </svg>
                                    刷新数据
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- ==================== 外呼任务 ==================== -->
            <div id="page-outbound-task" class="page-content hidden">
                <div class="page-header">
                    <h1 class="page-title">外呼任务管理</h1>
                    <button class="btn btn-primary" onclick="openModal('create-task')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <line x1="12" y1="5" x2="12" y2="19"/>
                            <line x1="5" y1="12" x2="19" y2="12"/>
                        </svg>
                        新建外呼任务
                    </button>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <div class="search-box">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <circle cx="11" cy="11" r="8"/>
                                <line x1="21" y1="21" x2="16.65" y2="16.65"/>
                            </svg>
                            <input type="text" placeholder="搜索外呼任务..." id="task-search" onkeyup="filterTasks()">
                        </div>
                        <div style="display: flex; gap: 8px;">
                            <select class="filter-select" id="task-status-filter" onchange="filterTasks()">
                                <option value="">全部状态</option>
                                <option value="running">进行中</option>
                                <option value="paused">已暂停</option>
                                <option value="completed">已完成</option>
                            </select>
                            <select class="filter-select" id="task-template-filter" onchange="filterTasks()">
                                <option value="">全部模板</option>
                                <option value="promotion">促销活动</option>
                                <option value="visit">客户回访</option>
                                <option value="vip">VIP升级</option>
                            </select>
                        </div>
                    </div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th style="width: 40px;"><input type="checkbox" class="checkbox" onchange="toggleAllTasks(this)"></th>
                                <th>任务名称</th>
                                <th>使用模板</th>
                                <th>拨打量</th>
                                <th>接通量</th>
                                <th>接通率</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="task-table-body">
                            <tr data-task-id="1">
                                <td><input type="checkbox" class="checkbox task-checkbox"></td>
                                <td class="task-name-cell">618促销活动</td>
                                <td>促销活动模板</td>
                                <td>5,000</td>
                                <td>3,425</td>
                                <td>68.5%</td>
                                <td><span class="status status-success task-status">进行中</span></td>
                                <td>2026-06-01</td>
                                <td class="table-actions">
                                    <span onclick="showTaskDetail('1')">详情</span>
                                    <span onclick="pauseTask('1')">暂停</span>
                                    <span onclick="deleteTask('1')" style="color: var(--danger);">终止</span>
                                </td>
                            </tr>
                            <tr data-task-id="2">
                                <td><input type="checkbox" class="checkbox task-checkbox"></td>
                                <td class="task-name-cell">客户回访-5月</td>
                                <td>客户回访模板</td>
                                <td>2,000</td>
                                <td>1,456</td>
                                <td>72.8%</td>
                                <td><span class="status status-info task-status">已完成</span></td>
                                <td>2026-05-28</td>
                                <td class="table-actions">
                                    <span onclick="showTaskDetail('2')">详情</span>
                                    <span onclick="showToast('已导出数据')">导出</span>
                                </td>
                            </tr>
                            <tr data-task-id="3">
                                <td><input type="checkbox" class="checkbox task-checkbox"></td>
                                <td class="task-name-cell">会员升级通知</td>
                                <td>VIP升级模板</td>
                                <td>1,000</td>
                                <td>680</td>
                                <td>68.0%</td>
                                <td><span class="status status-warning task-status">已暂停</span></td>
                                <td>2026-05-25</td>
                                <td class="table-actions">
                                    <span onclick="showTaskDetail('3')">详情</span>
                                    <span onclick="resumeTask('3')" style="color: var(--success);">启动</span>
                                </td>
                            </tr>
                            <tr data-task-id="4">
                                <td><input type="checkbox" class="checkbox task-checkbox"></td>
                                <td class="task-name-cell">618预热通知</td>
                                <td>促销活动模板</td>
                                <td>3,000</td>
                                <td>2,150</td>
                                <td>71.7%</td>
                                <td><span class="status status-success task-status">进行中</span></td>
                                <td>2026-05-30</td>
                                <td class="table-actions">
                                    <span onclick="showTaskDetail('4')">详情</span>
                                    <span onclick="pauseTask('4')">暂停</span>
                                    <span onclick="deleteTask('4')" style="color: var(--danger);">终止</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="pagination">
                        <div class="pagination-info">显示 1-4 条，共 12 条</div>
                        <div class="pagination-buttons">
                            <button class="page-btn"><</button>
                            <button class="page-btn active">1</button>
                            <button class="page-btn">2</button>
                            <button class="page-btn">3</button>
                            <button class="page-btn">></button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- ==================== 外呼模板 ==================== -->
            <div id="page-outbound-template" class="page-content hidden">
                <div class="page-header">
                    <h1 class="page-title">外呼模板管理</h1>
                    <button class="btn btn-primary" onclick="openModal('create-template')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <line x1="12" y1="5" x2="12" y2="19"/>
                            <line x1="5" y1="12" x2="19" y2="12"/>
                        </svg>
                        创建模板
                    </button>
                </div>
                
                <div class="template-grid">
                    <div class="template-card" onclick="showTemplateDetail('promotion')">
                        <div class="template-header">
                            <div class="template-name">促销活动模板</div>
                            <span class="status status-info">主用</span>
                        </div>
                        <div class="template-desc">
                            用于618、双11等促销活动的外呼通知，包含开场白、活动介绍、结束语。支持变量替换客户姓名、活动名称、时间等。
                        </div>
                        <div class="template-uses" style="margin-top: 12px;">
                            已使用 12 次 | 总调用量 45,230
                        </div>
                    </div>
                    <div class="template-card" onclick="showTemplateDetail('visit')">
                        <div class="template-header">
                            <div class="template-name">客户回访模板</div>
                        </div>
                        <div class="template-desc">
                            用于客户满意度回访，收集客户反馈和建议。支持满意度评分收集和意见记录。
                        </div>
                        <div class="template-uses" style="margin-top: 12px;">
                            已使用 8 次 | 总调用量 12,560
                        </div>
                    </div>
                    <div class="template-card" onclick="showTemplateDetail('vip')">
                        <div class="template-header">
                            <div class="template-name">VIP升级模板</div>
                        </div>
                        <div class="template-desc">
                            通知会员升级权益，引导会员升级操作。支持新会员等级介绍和专属优惠说明。
                        </div>
                        <div class="template-uses" style="margin-top: 12px;">
                            已使用 5 次 | 总调用量 8,920
                        </div>
                    </div>
                    <div class="template-card" onclick="showTemplateDetail('order')">
                        <div class="template-header">
                            <div class="template-name">订单确认模板</div>
                        </div>
                        <div class="template-desc">
                            确认订单信息，提示发货时间和物流跟踪方式。支持订单号和物流信息变量。
                        </div>
                        <div class="template-uses" style="margin-top: 12px;">
                            已使用 3 次 | 总调用量 3,200
                        </div>
                    </div>
                </div>
                
                <div class="card" style="margin-top: 20px;">
                    <div class="card-header">
                        <span class="card-title">模板分支逻辑示例</span>
                    </div>
                    <div class="card-body">
                        <div style="display: flex; align-items: center; gap: 20px; padding: 20px; background: var(--bg); border-radius: 8px;">
                            <div style="text-align: center;">
                                <div style="width: 60px; height: 60px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; margin: 0 auto;">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24">
                                        <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07"/>
                                    </svg>
                                </div>
                                <div style="font-size: 13px; margin-top: 8px;">开场白</div>
                            </div>
                            <div style="flex: 1; border-top: 2px dashed var(--border);position: relative;">
                                <div style="position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: var(--bg); padding: 0 10px;">客户按键</div>
                            </div>
                            <div style="text-align: center;">
                                <div style="width: 60px; height: 60px; background: var(--success); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; margin: 0 auto;">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24">
                                        <polyline points="20 6 9 17 4 12"/>
                                    </svg>
                                </div>
                                <div style="font-size: 13px; margin-top: 8px;">按1 - 确认参加</div>
                            </div>
                            <div style="text-align: center;">
                                <div style="width: 60px; height: 60px; background: var(--warning); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; margin: 0 auto;">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24">
                                        <line x1="18" y1="6" x2="6" y2="18"/>
                                        <line x1="6" y1="6" x2="18" y2="18"/>
                                    </svg>
                                </div>
                                <div style="font-size: 13px; margin-top: 8px;">按2 - 暂不参加</div>
                            </div>
                            <div style="text-align: center;">
                                <div style="width: 60px; height: 60px; background: #3B82F6; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; margin: 0 auto;">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24">
                                        <path d="M22 16.92v3a2 2 0 0 1-2.18 2"/>
                                        <path d="M5 12.14a18.43 18.43 0 0 1 8.63-3.14"/>
                                    </svg>
                                </div>
                                <div style="font-size: 13px; margin-top: 8px;">按0 - 转人工</div>
                            </div>
                        </div>
                        <div style="margin-top: 16px; display: flex; gap: 12px;">
                            <button class="btn btn-secondary btn-sm" onclick="openModal('template-edit')">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
                                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                                </svg>
                                编辑流程
                            </button>
                            <button class="btn btn-secondary btn-sm" onclick="testTemplate()">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
                                    <polygon points="5 3 19 12 5 21 5 3"/>
                                </svg>
                                试听效果
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- ==================== 客户导入 ==================== -->
            <div id="page-customer-import" class="page-content hidden">
                <div class="page-header">
                    <h1 class="page-title">客户数据导入</h1>
                    <button class="btn btn-primary" onclick="openModal('customer-import-wizard')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                            <polyline points="17 8 12 3 7 8"/>
                            <line x1="12" y1="3" x2="12" y2="15"/>
                        </svg>
                        导入数据
                    </button>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <span class="card-title">导入记录</span>
                    </div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>文件名</th>
                                <th>数据条数</th>
                                <th>成功导入</th>
                                <th>失败</th>
                                <th>关联模板</th>
                                <th>导入时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>618活动客户名单.xlsx</td>
                                <td>5,000</td>
                                <td style="color: var(--success);">4,985</td>
                                <td style="color: var(--danger);">15</td>
                                <td>促销活动模板</td>
                                <td>2026-06-01 14:30</td>
                                <td class="table-actions">
                                    <span>查看详情</span>
                                    <span>重新导入</span>
                                </td>
                            </tr>
                            <tr>
                                <td>VIP客户回访.xlsx</td>
                                <td>2,000</td>
                                <td style="color: var(--success);">1,998</td>
                                <td style="color: var(--danger);">2</td>
                                <td>客户回访模板</td>
                                <td>2026-05-28 10:15</td>
                                <td class="table-actions">
                                    <span>查看详情</span>
                                    <span>重新导入</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <div class="card" style="margin-top: 20px;">
                    <div class="card-header">
                        <span class="card-title">导入说明</span>
                    </div>
                    <div class="card-body">
                        <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;">
                            <div style="text-align: center; padding: 20px;">
                                <div style="width: 50px; height: 50px; border-radius: 50%; background: rgba(79, 70, 229, 0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; color: var(--primary);">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24">
                                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                        <polyline points="14 2 14 8 20 8"/>
                                    </svg>
                                </div>
                                <div style="font-weight: 500;">Excel导入</div>
                                <div style="font-size: 12px; color: var(--text-secondary); margin-top: 4px;">支持.xlsx/.xls格式</div>
                            </div>
                            <div style="text-align: center; padding: 20px;">
                                <div style="width: 50px; height: 50px; border-radius: 50%; background: rgba(16, 185, 129, 0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; color: var(--success);">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24">
                                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                        <polyline points="14 2 14 8 20 8"/>
                                    </svg>
                                </div>
                                <div style="font-weight: 500;">CSV导入</div>
                                <div style="font-size: 12px; color: var(--text-secondary); margin-top: 4px;">支持.csv格式</div>
                            </div>
                            <div style="text-align: center; padding: 20px;">
                                <div style="width: 50px; height: 50px; border-radius: 50%; background: rgba(245, 158, 11, 0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; color: var(--warning);">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24">
                                        <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
                                    </svg>
                                </div>
                                <div style="font-weight: 500;">字段映射</div>
                                <div style="font-size: 12px; color: var(--text-secondary); margin-top: 4px;">导入字段与模板变量映射</div>
                            </div>
                            <div style="text-align: center; padding: 20px;">
                                <div style="width: 50px; height: 50px; border-radius: 50%; background: rgba(59, 130, 246, 0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; color: #3B82F6;">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24">
                                        <path d="M9 11l3 3L22 4"/>
                                        <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
                                    </svg>
                                </div>
                                <div style="font-weight: 500;">数据校验</div>
                                <div style="font-size: 12px; color: var(--text-secondary); margin-top: 4px;">自动校验号码格式和去重</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- ==================== 其他页面占位符（后续模块） ==================== -->
            <!-- AI接听管理页面 -->
            <div id="page-ai-answer" class="page-content hidden">
                <div class="page-header">
                    <h1 class="page-title">AI接听管理</h1>
                    <div class="page-actions">
                        <button class="btn btn-outline" onclick="openModal('ai-config')">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><circle cx="12" cy="12" r="3"/><path d="M12 1v4m0 14v4m-9-9h4m14 0h4m-3.5-7.5l-2.8 2.8m-5.4 5.4l-2.8 2.8m0-11l2.8 2.8m5.4 5.4l2.8 2.8"/></svg>
                            AI参数配置
                        </button>
                        <button class="btn btn-primary" onclick="openModal('template-add')">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                            新建话术模板
                        </button>
                    </div>
                </div>
                
                <!-- AI接听统计卡片 -->
                <div class="stats-grid" style="margin-bottom: 20px;">
                    <div class="stat-card">
                        <div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><path d="M12 2a10 10 0 1 0 10 10H12V2z"/></svg>
                        </div>
                        <div class="stat-content">
                            <div class="stat-value" id="ai-total-calls">12,847</div>
                            <div class="stat-label">AI接听总数</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                        </div>
                        <div class="stat-content">
                            <div class="stat-value" id="ai-resolved-rate">94.2%</div>
                            <div class="stat-label">问题解决率</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                        </div>
                        <div class="stat-content">
                            <div class="stat-value" id="ai-avg-duration">2m 34s</div>
                            <div class="stat-label">平均通话时长</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87m-4-12a4 4 0 0 1 0 7.75"/></svg>
                        </div>
                        <div class="stat-content">
                            <div class="stat-value" id="ai-transfer-count">856</div>
                            <div class="stat-label">转人工次数</div>
                        </div>
                    </div>
                </div>
                
                <!-- AI接听功能Tab -->
                <div class="card">
                    <div class="tabs" style="padding: 0 16px; border-bottom: 1px solid var(--border);">
                        <div class="tab active" onclick="switchTab(this, 'tab-template')">话术模板</div>
                        <div class="tab" onclick="switchTab(this, 'tab-knowledge')">问答知识库</div>
                        <div class="tab" onclick="switchTab(this, 'tab-transfer')">转人工规则</div>
                        <div class="tab" onclick="switchTab(this, 'tab-question')">问题分布</div>
                    </div>
                    
                    <!-- 话术模板Tab -->
                    <div id="tab-template" class="tab-content">
                        <div style="padding: 16px;">
                            <div style="display: flex; gap: 12px; margin-bottom: 16px;">
                                <div class="search-box" style="flex: 1; max-width: 320px;">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                                    <input type="text" placeholder="搜索话术模板..." oninput="filterTemplates(this.value)">
                                </div>
                                <select class="form-input" style="width: 140px;" onchange="filterTemplatesByCategory(this.value)">
                                    <option value="">全部分类</option>
                                    <option value="service">客服咨询</option>
                                    <option value="sales">营销推广</option>
                                    <option value="notice">通知提醒</option>
                                    <option value="survey">满意度调查</option>
                                </select>
                            </div>
                            
                            <!-- 话术模板列表 -->
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th style="width: 40px;"><input type="checkbox"></th>
                                        <th>模板名称</th>
                                        <th>分类</th>
                                        <th>问题数</th>
                                        <th>使用次数</th>
                                        <th>创建时间</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="template-list">
                                    <tr>
                                        <td><input type="checkbox"></td>
                                        <td><a href="javascript:void(0)" onclick="previewTemplate(1)" style="color: var(--primary); text-decoration: none;">智能客服基础话术</a></td>
                                        <td><span class="tag">客服咨询</span></td>
                                        <td>156</td>
                                        <td>8,234</td>
                                        <td>2024-01-15</td>
                                        <td><span class="status status-success">应用中</span></td>
                                        <td>
                                            <button class="btn-text" onclick="editTemplate(1)" title="编辑">
                                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                                            </button>
                                            <button class="btn-text" onclick="copyTemplate(1)" title="复制">
                                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                                            </button>
                                            <button class="btn-text" onclick="deleteTemplate(1)" title="删除">
                                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox"></td>
                                        <td><a href="javascript:void(0)" onclick="previewTemplate(2)" style="color: var(--primary); text-decoration: none;">产品营销推广话术</a></td>
                                        <td><span class="tag tag-warning">营销推广</span></td>
                                        <td>89</td>
                                        <td>4,567</td>
                                        <td>2024-02-20</td>
                                        <td><span class="status status-success">应用中</span></td>
                                        <td>
                                            <button class="btn-text" onclick="editTemplate(2)" title="编辑"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
                                            <button class="btn-text" onclick="copyTemplate(2)" title="复制"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
                                            <button class="btn-text" onclick="deleteTemplate(2)" title="删除"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox"></td>
                                        <td><a href="javascript:void(0)" onclick="previewTemplate(3)" style="color: var(--primary); text-decoration: none;">活动通知提醒话术</a></td>
                                        <td><span class="tag tag-info">通知提醒</span></td>
                                        <td>45</td>
                                        <td>2,891</td>
                                        <td>2024-03-10</td>
                                        <td><span class="status status-warning">待启用</span></td>
                                        <td>
                                            <button class="btn-text" onclick="editTemplate(3)" title="编辑"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
                                            <button class="btn-text" onclick="copyTemplate(3)" title="复制"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
                                            <button class="btn-text" onclick="deleteTemplate(3)" title="删除"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox"></td>
                                        <td><a href="javascript:void(0)" onclick="previewTemplate(4)" style="color: var(--primary); text-decoration: none;">用户满意度调查话术</a></td>
                                        <td><span class="tag" style="background: #f0f9eb; color: #67c23a;">满意度调查</span></td>
                                        <td>32</td>
                                        <td>1,456</td>
                                        <td>2024-04-05</td>
<td><span class="status">已停用</span></td>
                                        <td>
                                            <button class="btn-text" onclick="editTemplate(4)" title="编辑"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
                                            <button class="btn-text" onclick="copyTemplate(4)" title="复制"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
                                            <button class="btn-text" onclick="deleteTemplate(4)" title="删除"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg></button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <!-- 问答知识库Tab -->
                    <div id="tab-knowledge" class="tab-content hidden">
                        <div style="padding: 16px;">
                            <div style="display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;">
                                <div class="search-box" style="flex: 1; min-width: 240px; max-width: 320px;">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                                    <input type="text" placeholder="搜索问答..." id="knowledge-search">
                                </div>
                                <select class="form-input" style="width: 140px;">
                                    <option value="">全部分类</option>
                                    <option value="product">产品咨询</option>
                                    <option value="order">订单问题</option>
                                    <option value="refund">退款售后</option>
                                    <option value="account">账户问题</option>
                                </select>
                                <select class="form-input" style="width: 120px;">
                                    <option value="">全部状态</option>
                                    <option value="enabled">已启用</option>
                                    <option value="disabled">已禁用</option>
                                </select>
                                <button class="btn btn-outline" onclick="openModal('qa-add')">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                                    添加问答
                                </button>
                                <button class="btn btn-outline" onclick="openModal('qa-import')">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                                    批量导入
                                </button>
                            </div>
                            
                            <!-- 问答列表 -->
                            <div id="qa-list">
                                <div class="qa-item">
                                    <div class="qa-question">
                                        <div class="qa-label">问</div>
                                        <div class="qa-content">
                                            <div class="qa-text">产品的售后服务政策是什么？</div>
                                            <div class="qa-meta">
                                                <span class="tag">产品咨询</span>
                                                <span class="qa-views">浏览 1,234 次</span>
                                                <span class="qa-uses">使用 456 次</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="qa-answer">
                                        <div class="qa-label">答</div>
                                        <div class="qa-content">
                                            <div class="qa-text">您好！我们的产品享受七天无理由退换货，一年质保服务。质保期内非人为损坏可免费维修或换货。如有质量问题，请联系客服处理。</div>
                                            <div class="qa-actions">
                                                <button class="btn-text" onclick="editQA(1)">编辑</button>
                                                <button class="btn-text" onclick="deleteQA(1)">删除</button>
                                                <label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="qa-item">
                                    <div class="qa-question">
                                        <div class="qa-label">问</div>
                                        <div class="qa-content">
                                            <div class="qa-text">如何申请退款？</div>
                                            <div class="qa-meta">
                                                <span class="tag tag-warning">订单问题</span>
                                                <span class="qa-views">浏览 2,567 次</span>
                                                <span class="qa-uses">使用 892 次</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="qa-answer">
                                        <div class="qa-label">答</div>
                                        <div class="qa-content">
                                            <div class="qa-text">申请退款请登录您的账户，进入"我的订单"，找到对应订单点击"申请退款"，填写退款原因后提交。客服会在24小时内处理您的申请。</div>
                                            <div class="qa-actions">
                                                <button class="btn-text" onclick="editQA(2)">编辑</button>
                                                <button class="btn-text" onclick="deleteQA(2)">删除</button>
                                                <label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="qa-item">
                                    <div class="qa-question">
                                        <div class="qa-label">问</div>
                                        <div class="qa-content">
                                            <div class="qa-text">忘记密码怎么办？</div>
                                            <div class="qa-meta">
                                                <span class="tag tag-info">账户问题</span>
                                                <span class="qa-views">浏览 3,890 次</span>
                                                <span class="qa-uses">使用 1,234 次</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="qa-answer">
                                        <div class="qa-label">答</div>
                                        <div class="qa-content">
                                            <div class="qa-text">您可以在登录页面点击"忘记密码"，输入注册手机号或邮箱，系统会发送重置链接给您。点击链接即可设置新密码。如未收到邮件，请检查垃圾箱。</div>
                                            <div class="qa-actions">
                                                <button class="btn-text" onclick="editQA(3)">编辑</button>
                                                <button class="btn-text" onclick="deleteQA(3)">删除</button>
                                                <label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 转人工规则Tab -->
                    <div id="tab-transfer" class="tab-content hidden">
                        <div style="padding: 16px;">
                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
                                <div>
                                    <h3 style="margin: 0 0 4px 0; font-size: 15px;">转人工触发规则</h3>
                                    <p style="margin: 0; color: var(--text-secondary); font-size: 13px;">当满足以下任一条件时，自动转接人工客服</p>
                                </div>
                                <button class="btn btn-primary" onclick="openModal('transfer-rule-add')">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                                    添加规则
                                </button>
                            </div>
                            
                            <div class="transfer-rules">
                                <div class="transfer-rule-card">
                                    <div class="transfer-rule-header">
                                        <div class="transfer-rule-title">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20" style="color: var(--danger);"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                                            <span>客户明确要求转人工</span>
                                        </div>
                                        <label class="toggle"><input type="checkbox" checked onchange="toggleRule(1)"><span class="toggle-slider"></span></label>
                                    </div>
                                    <div class="transfer-rule-desc">当客户语音或文字输入"转人工"、"人工客服"、"帮我转人工"等关键词时触发</div>
                                </div>
                                
                                <div class="transfer-rule-card">
                                    <div class="transfer-rule-header">
                                        <div class="transfer-rule-title">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20" style="color: var(--warning);"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                                            <span>连续3次未能理解意图</span>
                                        </div>
                                        <label class="toggle"><input type="checkbox" checked onchange="toggleRule(2)"><span class="toggle-slider"></span></label>
                                    </div>
                                    <div class="transfer-rule-desc">AI连续3次无法理解客户意图时自动转人工，避免客户反复重复问题</div>
                                </div>
                                
                                <div class="transfer-rule-card">
                                    <div class="transfer-rule-header">
                                        <div class="transfer-rule-title">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20" style="color: var(--primary);"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                                            <span>通话时长超过8分钟</span>
                                        </div>
                                        <label class="toggle"><input type="checkbox" checked onchange="toggleRule(3)"><span class="toggle-slider"></span></label>
                                    </div>
                                    <div class="transfer-rule-desc">AI单次通话超过8分钟未能解决问题时转人工，防止问题悬而未决</div>
                                </div>
                                
                                <div class="transfer-rule-card">
                                    <div class="transfer-rule-header">
                                        <div class="transfer-rule-title">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20" style="color: #67c23a;"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                                            <span>客户表达不满情绪</span>
                                        </div>
                                        <label class="toggle"><input type="checkbox" onchange="toggleRule(4)"><span class="toggle-slider"></span></label>
                                    </div>
                                    <div class="transfer-rule-desc">检测到客户情绪激动或表达不满时（如：投诉、不满意、太差了等），转人工安抚</div>
                                </div>
                                
                                <div class="transfer-rule-card">
                                    <div class="transfer-rule-header">
                                        <div class="transfer-rule-title">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20" style="color: #909399;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
                                            <span>涉及敏感业务办理</span>
                                        </div>
                                        <label class="toggle"><input type="checkbox" checked onchange="toggleRule(5)"><span class="toggle-slider"></span></label>
                                    </div>
                                    <div class="transfer-rule-desc">当客户咨询退款、投诉、赔偿等敏感问题时，转人工处理降低风险</div>
                                </div>
                                
                                <div class="transfer-rule-card">
                                    <div class="transfer-rule-header">
                                        <div class="transfer-rule-title">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20" style="color: #e6a23c;"><path d="M12 2a10 10 0 1 0 10 10H12V2z"/></svg>
                                            <span>特定时间段自动转人工</span>
                                        </div>
                                        <label class="toggle"><input type="checkbox" onchange="toggleRule(6)"><span class="toggle-slider"></span></label>
                                    </div>
                                    <div class="transfer-rule-desc">在非工作时间（默认22:00-08:00）或节假日，所有来电自动转人工处理</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 问题分布Tab -->
                    <div id="tab-question" class="tab-content hidden">
                        <div style="padding: 16px;">
                            <div style="display: flex; gap: 24px;">
                                <div style="flex: 1;">
                                    <h4 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-secondary);">问题类型分布</h4>
                                    <div id="question-chart" style="height: 280px; display: flex; align-items: center; justify-content: center;">
                                        <div style="display: flex; gap: 24px; flex-wrap: wrap; justify-content: center;">
                                            <div style="text-align: center;">
                                                <div style="width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(#667eea 0% 35%, #e0e0e0 35%); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;">
                                                    <div style="width: 50px; height: 50px; border-radius: 50%; background: white;"></div>
                                                </div>
                                                <div style="font-size: 12px; color: #667eea; font-weight: 500;">产品咨询 35%</div>
                                            </div>
                                            <div style="text-align: center;">
                                                <div style="width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(#f5576c 0% 25%, #e0e0e0 25%); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;">
                                                    <div style="width: 50px; height: 50px; border-radius: 50%; background: white;"></div>
                                                </div>
                                                <div style="font-size: 12px; color: #f5576c; font-weight: 500;">订单问题 25%</div>
                                            </div>
                                            <div style="text-align: center;">
                                                <div style="width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(#4facfe 0% 20%, #e0e0e0 20%); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;">
                                                    <div style="width: 50px; height: 50px; border-radius: 50%; background: white;"></div>
                                                </div>
                                                <div style="font-size: 12px; color: #4facfe; font-weight: 500;">退款售后 20%</div>
                                            </div>
                                            <div style="text-align: center;">
                                                <div style="width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(#43e97b 0% 15%, #e0e0e0 15%); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;">
                                                    <div style="width: 50px; height: 50px; border-radius: 50%; background: white;"></div>
                                                </div>
                                                <div style="font-size: 12px; color: #43e97b; font-weight: 500;">账户问题 15%</div>
                                            </div>
                                            <div style="text-align: center;">
                                                <div style="width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(#f093fb 0% 5%, #e0e0e0 5%); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;">
                                                    <div style="width: 50px; height: 50px; border-radius: 50%; background: white;"></div>
                                                </div>
                                                <div style="font-size: 12px; color: #f093fb; font-weight: 500;">其他 5%</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div style="flex: 1; border-left: 1px solid var(--border); padding-left: 24px;">
                                    <h4 style="margin: 0 0 16px 0; font-size: 14px; color: var(--text-secondary);">热门问题TOP10</h4>
                                    <div style="font-size: 13px;">
                                        <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border);">
                                            <span>1. 产品价格是多少？</span>
                                            <span style="color: var(--primary);">2,345</span>
                                        </div>
                                        <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border);">
                                            <span>2. 如何申请优惠券？</span>
                                            <span style="color: var(--primary);">1,892</span>
                                        </div>
                                        <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border);">
                                            <span>3. 发货时间是多久？</span>
                                            <span style="color: var(--primary);">1,567</span>
                                        </div>
                                        <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border);">
                                            <span>4. 支持哪些支付方式？</span>
                                            <span style="color: var(--primary);">1,234</span>
                                        </div>
                                        <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border);">
                                            <span>5. 如何修改收货地址？</span>
                                            <span style="color: var(--primary);">987</span>
                                        </div>
                                        <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border);">
                                            <span>6. 运费如何计算？</span>
                                            <span style="color: var(--primary);">876</span>
                                        </div>
                                        <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border);">
                                            <span>7. 积分怎么使用？</span>
                                            <span style="color: var(--primary);">765</span>
                                        </div>
                                        <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border);">
                                            <span>8. 会员有什么权益？</span>
                                            <span style="color: var(--primary);">654</span>
                                        </div>
                                        <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border);">
                                            <span>9. 如何联系客服？</span>
                                            <span style="color: var(--primary);">543</span>
                                        </div>
                                        <div style="display: flex; justify-content: space-between; padding: 8px 0;">
                                            <span>10. 退款多久到账？</span>
                                            <span style="color: var(--primary);">432</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 人工坐席页面 -->
            <div id="page-agent-seat" class="page-content hidden">
                <div class="page-header">
                    <h1 class="page-title">人工坐席工作台</h1>
                    <div class="page-actions">
                        <div class="agent-status-control">
                            <span style="margin-right: 8px; font-size: 13px;">坐席状态：</span>
                            <select class="form-input" style="width: 120px;" id="agent-status-select" onchange="changeAgentStatus(this.value)">
                                <option value="online">在线</option>
                                <option value="busy">忙碌</option>
                                <option value="away">离开</option>
                                <option value="offline">离线</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <div style="display: flex; gap: 16px;">
                    <!-- 左侧：坐席状态和通话控制 -->
                    <div style="width: 320px;">
                        <!-- 坐席状态卡片 -->
                        <div class="card" style="margin-bottom: 16px;">
                            <div class="card-header">
                                <h3 class="card-title">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>
                                    坐席状态
                                </h3>
                            </div>
                            <div class="card-body">
                                <div style="text-align: center; padding: 16px 0;">
                                    <div style="width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" width="40" height="40"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                                    </div>
                                    <div style="font-size: 18px; font-weight: 500; margin-bottom: 4px;">李婷婷</div>
                                    <div style="font-size: 13px; color: var(--text-secondary); margin-bottom: 12px;">当前状态：<span id="agent-status-display" class="status-dot status-online">在线</span></div>
                                    <div style="display: flex; gap: 8px; justify-content: center;">
                                        <button class="btn btn-sm" id="btn-online" onclick="setAgentStatus('online')" style="background: #43e97b; color: white;">在线</button>
                                        <button class="btn btn-sm btn-outline" id="btn-busy" onclick="setAgentStatus('busy')">忙碌</button>
                                        <button class="btn btn-sm btn-outline" id="btn-away" onclick="setAgentStatus('away')">离开</button>
                                    </div>
                                </div>
                                <div style="border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px;">
                                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                                        <span style="color: var(--text-secondary); font-size: 13px;">今日接听</span>
                                        <span style="font-weight: 500;">127 通</span>
                                    </div>
                                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                                        <span style="color: var(--text-secondary); font-size: 13px;">今日呼出</span>
                                        <span style="font-weight: 500;">45 通</span>
                                    </div>
                                    <div style="display: flex; justify-content: space-between;">
                                        <span style="color: var(--text-secondary); font-size: 13px;">平均时长</span>
                                        <span style="font-weight: 500;">3m 24s</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 通话控制面板 -->
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                                    通话控制
                                </h3>
                            </div>
                            <div class="card-body">
                                <div id="call-panel-idle">
                                    <div style="text-align: center; padding: 20px 0;">
                                        <div style="width: 100px; height: 100px; border-radius: 50%; border: 3px dashed var(--border); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="var(--text-secondary)" stroke-width="1.5" width="40" height="40"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                                        </div>
                                        <div style="color: var(--text-secondary); font-size: 14px;">当前无通话</div>
                                    </div>
                                </div>
                                <div id="call-panel-active" class="hidden">
                                    <div style="text-align: center; padding: 16px 0;">
                                        <div style="width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
                                            <div style="width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.2); animation: pulse 1.5s infinite;"></div>
                                        </div>
                                        <div style="font-size: 20px; font-weight: 500; margin-bottom: 4px;">138****1234</div>
                                        <div style="color: var(--text-secondary); font-size: 14px; margin-bottom: 4px;">通话中... <span id="call-duration">00:00</span></div>
                                        <div style="font-size: 12px; color: var(--success);">AI转接</div>
                                    </div>
                                    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px;">
                                        <button class="call-btn" onclick="toggleMute()" title="静音">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><line x1="1" y1="1" x2="23" y2="23"/><path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"/><path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
                                            <span>静音</span>
                                        </button>
                                        <button class="call-btn" onclick="toggleHold()" title="保持">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
                                            <span>保持</span>
                                        </button>
                                        <button class="call-btn" onclick="openModal('keypad')" title="拨号盘">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><rect x="4" y="4" width="4" height="4" rx="1"/><rect x="10" y="4" width="4" height="4" rx="1"/><rect x="16" y="4" width="4" height="4" rx="1"/><rect x="4" y="10" width="4" height="4" rx="1"/><rect x="10" y="10" width="4" height="4" rx="1"/><rect x="16" y="10" width="4" height="4" rx="1"/><rect x="4" y="16" width="4" height="4" rx="1"/><rect x="10" y="16" width="4" height="4" rx="1"/><rect x="16" y="16" width="4" height="4" rx="1"/></svg>
                                            <span>拨号</span>
                                        </button>
                                    </div>
                                    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px;">
                                        <button class="call-btn" onclick="openModal('transfer-call')" title="转接">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/></svg>
                                            <span>转接</span>
                                        </button>
                                        <button class="call-btn" onclick="openModal('internal-call')" title="内部呼叫">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72"/><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 0 2-2"/></svg>
                                            <span>内部</span>
                                        </button>
                                        <button class="call-btn call-btn-danger" onclick="endCall()" title="挂断">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24"><path d="M10.68 13.31a16 16 0 0 0 3.412.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.42 19.42 0 0 1-3.33-2.67m-2.67-3.34a19.79 19.79 0 0 1-3.07-8.63A2 2 0 0 1 4.11 2H3a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3a5 5 0 0 0 5 5 4.99 4.99 0 0 0 3.53-1.28"/></svg>
                                            <span>挂断</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 右侧：来电弹屏和工单 -->
                    <div style="flex: 1;">
                        <!-- 来电弹屏 -->
                        <div class="card" style="margin-bottom: 16px;">
                            <div class="card-header">
                                <h3 class="card-title">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
                                    来电弹屏
                                </h3>
                                <button class="btn btn-sm btn-outline" onclick="simulateIncomingCall()">模拟来电</button>
                            </div>
                            <div class="card-body" id="incoming-call-area" style="min-height: 200px;">
                                <div id="incoming-call-idle" style="text-align: center; padding: 40px 0; color: var(--text-secondary);">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="48" height="48" style="margin: 0 auto 12px; opacity: 0.5;"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                                    <div>暂无来电</div>
                                </div>
                                <div id="incoming-call-active" class="hidden">
                                    <div style="display: flex; gap: 16px;">
                                        <div style="width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center;">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" width="36" height="36"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                                        </div>
                                        <div style="flex: 1;">
                                            <div style="font-size: 18px; font-weight: 500; margin-bottom: 4px;">王先生</div>
                                            <div style="color: var(--text-secondary); font-size: 14px; margin-bottom: 8px;">138****1234</div>
                                            <div style="font-size: 13px;">
                                                <span class="tag">高价值客户</span>
                                                <span class="tag tag-warning">VIP</span>
                                            </div>
                                        </div>
                                        <div style="text-align: right;">
                                            <div style="color: var(--success); font-size: 14px; margin-bottom: 4px;">AI未能解答</div>
                                            <div style="color: var(--text-secondary); font-size: 12px;">转接原因</div>
                                        </div>
                                    </div>
                                    <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);">
                                        <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;">
                                            <button class="btn btn-success" onclick="answerCall()">
                                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72"/></svg>
                                                接听
                                            </button>
                                            <button class="btn btn-outline" onclick="rejectCall()">拒接</button>
                                            <button class="btn btn-outline" onclick="openModal('customer-detail')">查看客户</button>
                                            <button class="btn btn-outline" onclick="openModal('call-note')">添加备注</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 客户信息弹屏 -->
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
                                    客户信息
                                </h3>
                                <button class="btn btn-sm btn-primary" onclick="openModal('quick-create-order')">快速创建工单</button>
                            </div>
                            <div class="card-body">
                                <div id="customer-info-empty" style="text-align: center; padding: 40px 0; color: var(--text-secondary);">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="48" height="48" style="margin: 0 auto 12px; opacity: 0.5;"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
                                    <div>通话时自动显示客户信息</div>
                                </div>
                                <div id="customer-info-display" class="hidden">
                                    <div style="display: flex; gap: 16px; margin-bottom: 16px;">
                                        <div style="width: 60px; height: 60px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center;">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="var(--text-secondary)" stroke-width="1.5" width="28" height="28"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                                        </div>
                                        <div style="flex: 1;">
                                            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
                                                <span style="font-size: 16px; font-weight: 500;">王先生</span>
                                                <span class="tag">高价值客户</span>
                                                <span class="tag tag-warning">VIP</span>
                                            </div>
                                            <div style="color: var(--text-secondary); font-size: 13px;">138****1234</div>
                                        </div>
                                    </div>
                                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
                                        <div style="padding: 12px; background: var(--bg); border-radius: 8px;">
                                            <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 4px;">客户等级</div>
                                            <div style="font-weight: 500; color: var(--warning);">VIP3</div>
                                        </div>
                                        <div style="padding: 12px; background: var(--bg); border-radius: 8px;">
                                            <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 4px;">累计消费</div>
                                            <div style="font-weight: 500;">¥12,580</div>
                                        </div>
                                        <div style="padding: 12px; background: var(--bg); border-radius: 8px;">
                                            <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 4px;">历史工单</div>
                                            <div style="font-weight: 500;">3 个</div>
                                        </div>
                                        <div style="padding: 12px; background: var(--bg); border-radius: 8px;">
                                            <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 4px;">最近联系</div>
                                            <div style="font-weight: 500;">3 天前</div>
                                        </div>
                                    </div>
                                    <div style="margin-top: 16px;">
                                        <div style="font-size: 13px; color: var(--text-secondary); margin-bottom: 8px;">最近通话记录</div>
                                        <div style="font-size: 13px;">
                                            <div style="padding: 8px 0; border-bottom: 1px solid var(--border);">
                                                <div style="display: flex; justify-content: space-between;">
                                                    <span>2024-06-15 14:30</span>
                                                    <span class="status-dot status-success">已解决</span>
                                                </div>
                                                <div style="color: var(--text-secondary); margin-top: 4px;">咨询产品配送时间问题</div>
                                            </div>
                                            <div style="padding: 8px 0;">
                                                <div style="display: flex; justify-content: space-between;">
                                                    <span>2024-06-10 10:15</span>
                                                <span class="status-dot status-warning">处理中</span>
                                                </div>
                                                <div style="color: var(--text-secondary); margin-top: 4px;">申请更换收货地址</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 通话记录页面 -->
            <div id="page-call-record" class="page-content hidden">
                <div class="page-header">
                    <h1 class="page-title">通话记录</h1>
                    <div class="page-actions">
                        <button class="btn btn-outline" onclick="exportCallRecords()">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                            导出记录
                        </button>
                    </div>
                </div>
                
                <!-- 筛选条件 -->
                <div class="card" style="margin-bottom: 16px;">
                    <div class="card-body" style="padding: 12px 16px;">
                        <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
                            <div class="search-box" style="width: 260px;">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                                <input type="text" placeholder="搜索电话号码/客户名...">
                            </div>
                            <select class="form-input" style="width: 130px;">
                                <option value="">通话类型</option>
                                <option value="inbound">呼入</option>
                                <option value="outbound">呼出</option>
                                <option value="ai">AI通话</option>
                            </select>
                            <select class="form-input" style="width: 130px;">
                                <option value="">通话结果</option>
                                <option value="success">已接通</option>
                                <option value="noanswer">未接通</option>
                                <option value="busy">占线</option>
                            </select>
                            <select class="form-input" style="width: 130px;">
                                <option value="">处理状态</option>
                                <option value="resolved">已解决</option>
                                <option value="pending">处理中</option>
                                <option value="escalated">已升级</option>
                            </select>
                            <input type="date" class="form-input" style="width: 140px;" value="2024-06-01">
                            <span style="color: var(--text-secondary);">至</span>
                            <input type="date" class="form-input" style="width: 140px;" value="2024-06-18">
                            <button class="btn btn-primary">查询</button>
                        </div>
                    </div>
                </div>
                
                <!-- 通话记录列表 -->
                <div class="card">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th style="width: 50px;">类型</th>
                                <th>客户信息</th>
                                <th>电话号码</th>
                                <th>通话时间</th>
                                <th>时长</th>
                                <th>处理坐席</th>
<th>通话结果</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr onclick="viewCallDetail(1001)" style="cursor: pointer;">
                                <td><span class="call-type-icon call-type-inbound" title="呼入">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72"/><path d="M14 3h4a2 2 0 0 1 2 2v14"/></svg>
                                </span></td>
                                <td>
                                    <div style="display: flex; align-items: center; gap: 8px;">
                                        <div style="width: 32px; height: 32px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center;">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="var(--text-secondary)" stroke-width="1.5" width="16" height="16"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                                        </div>
                                        <div>
                                            <div style="font-weight: 500;">张伟</div>
                                            <div style="font-size: 12px; color: var(--text-secondary);">VIP客户</div>
                                        </div>
                                    </div>
                                </td>
                                <td>138****1234</td>
                                <td>2024-06-18 14:32:15</td>
                                <td>3m 45s</td>
                                <td>李婷婷</td>
                                <td><span class="status status-success">已解决</span></td>
                                <td><span class="status status-success">已完成</span></td>
                                <td>
                                    <button class="btn-text" onclick="playRecording(event, 1001)" title="播放录音">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg>
                                    </button>
                                    <button class="btn-text" onclick="viewAIChat(event, 1001)" title="AI对话">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M12 2a10 10 0 1 0 10 10H12V2z"/></svg>
                                    </button>
                                    <button class="btn-text" onclick="viewCallDetail(event, 1001)" title="查看详情">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                                    </button>
                                </td>
                            </tr>
                            <tr onclick="viewCallDetail(1002)" style="cursor: pointer;">
                                <td><span class="call-type-icon call-type-outbound" title="呼出">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72"/><path d="M14 3h4a2 2 0 0 1 2 2v14"/></svg>
                                </span></td>
                                <td>
                                    <div style="display: flex; align-items: center; gap: 8px;">
                                        <div style="width: 32px; height: 32px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center;">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="var(--text-secondary)" stroke-width="1.5" width="16" height="16"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                                        </div>
                                        <div>
                                            <div style="font-weight: 500;">李娜</div>
                                            <div style="font-size: 12px; color: var(--text-secondary);">普通客户</div>
                                        </div>
                                    </div>
                                </td>
                                <td>139****5678</td>
                                <td>2024-06-18 13:15:42</td>
                                <td>2m 12s</td>
                                <td>王建国</td>
                                <td><span class="status status-warning">处理中</span></td>
                                <td><span class="status status-warning">待跟进</span></td>
                                <td>
                                    <button class="btn-text" onclick="playRecording(event, 1002)" title="播放录音"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg></button>
                                    <button class="btn-text" onclick="viewAIChat(event, 1002)" title="AI对话"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M12 2a10 10 0 1 0 10 10H12V2z"/></svg></button>
                                    <button class="btn-text" onclick="viewCallDetail(event, 1002)" title="查看详情"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></button>
                                </td>
                            </tr>
                            <tr onclick="viewCallDetail(1003)" style="cursor: pointer;">
                                <td><span class="call-type-icon call-type-ai" title="AI通话" style="background: #667eea;">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14" style="color: white;"><path d="M12 2a10 10 0 1 0 10 10H12V2z"/></svg>
                                </span></td>
                                <td>
                                    <div style="display: flex; align-items: center; gap: 8px;">
                                        <div style="width: 32px; height: 32px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center;">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="var(--text-secondary)" stroke-width="1.5" width="16" height="16"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                                        </div>
                                        <div>
                                            <div style="font-weight: 500;">赵敏</div>
                                            <div style="font-size: 12px; color: var(--text-secondary);">高价值客户</div>
                                        </div>
                                    </div>
                                </td>
                                <td>186****9012</td>
                                <td>2024-06-18 10:05:33</td>
                                <td>5m 28s</td>
                                <td>AI-智能客服</td>
                                <td><span class="status status-success">已解决</span></td>
                                <td><span class="status status-info">AI转人工</span></td>
                                <td>
                                    <button class="btn-text" onclick="playRecording(event, 1003)" title="播放录音"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg></button>
                                    <button class="btn-text" onclick="viewAIChat(event, 1003)" title="AI对话"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M12 2a10 10 0 1 0 10 10H12V2z"/></svg></button>
                                    <button class="btn-text" onclick="viewCallDetail(event, 1003)" title="查看详情"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></button>
                                </td>
                            </tr>
                            <tr onclick="viewCallDetail(1004)" style="cursor: pointer;">
                                <td><span class="call-type-icon call-type-inbound" title="呼入">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72"/><path d="M14 3h4a2 2 0 0 1 2 2v14"/></svg>
                                </span></td>
                                <td>
                                    <div style="display: flex; align-items: center; gap: 8px;">
                                        <div style="width: 32px; height: 32px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center;">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="var(--text-secondary)" stroke-width="1.5" width="16" height="16"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                                        </div>
                                        <div>
                                            <div style="font-weight: 500;">周杰</div>
                                            <div style="font-size: 12px; color: var(--text-secondary);">普通客户</div>
                                        </div>
                                    </div>
                                </td>
                                <td>158****3456</td>
                                <td>2024-06-17 16:45:20</td>
                                <td>0m 0s</td>
                                <td>-</td>
                                <td><span class="status status-danger">未接通</span></td>
                                <td><span class="status status-danger">已放弃</span></td>
                                <td>
                                    <button class="btn-text" onclick="playRecording(event, 1004)" title="播放录音" disabled><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg></button>
                                    <button class="btn-text" onclick="viewAIChat(event, 1004)" title="AI对话" disabled><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M12 2a10 10 0 1 0 10 10H12V2z"/></svg></button>
                                    <button class="btn-text" onclick="viewCallDetail(event, 1004)" title="查看详情"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    
                    <!-- 分页 -->
                    <div style="padding: 16px; display: flex; justify-content: space-between; align-items: center;">
                        <div style="color: var(--text-secondary); font-size: 13px;">共 1,847 条记录，每页显示 10 条</div>
                        <div class="pagination">
                            <button class="page-btn" disabled><</button>
                            <button class="page-btn active">1</button>
                            <button class="page-btn">2</button>
                            <button class="page-btn">3</button>
                            <button class="page-btn">...</button>
                            <button class="page-btn">185</button>
                            <button class="page-btn">></button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 客户管理页面 -->
            <div id="page-customer" class="page-content hidden">
                <div class="page-header">
                    <h1 class="page-title">客户管理</h1>
                    <div class="page-actions">
                        <button class="btn btn-outline" onclick="openModal('customer-import')">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                            批量导入
                        </button>
                        <button class="btn btn-outline" onclick="exportCustomers()">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                            导出客户
                        </button>
                        <button class="btn btn-primary" onclick="openModal('customer-add')">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                            新建客户
                        </button>
                    </div>
                </div>
                
                <!-- 客户统计 -->
                <div class="stats-grid" style="margin-bottom: 16px;">
                    <div class="stat-card">
                        <div class="stat-value">3,847</div>
                        <div class="stat-label">客户总数</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" style="color: var(--success);">2,156</div>
                        <div class="stat-label">活跃客户</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" style="color: var(--warning);">568</div>
                        <div class="stat-label">VIP客户</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" style="color: var(--danger);">123</div>
                        <div class="stat-label">流失风险</div>
                    </div>
                </div>
                
                <!-- 筛选和列表 -->
                <div class="card">
                    <div class="card-body" style="padding: 12px 16px;">
                        <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px;">
                            <div class="search-box" style="width: 240px;">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                                <input type="text" placeholder="搜索客户名称/手机号...">
                            </div>
                            <select class="form-input" style="width: 130px;">
                                <option value="">客户等级</option>
                                <option value="vip3">VIP3</option>
                                <option value="vip2">VIP2</option>
                                <option value="vip1">VIP1</option>
                                <option value="normal">普通</option>
                            </select>
                            <select class="form-input" style="width: 130px;">
                                <option value="">客户状态</option>
                                <option value="active">活跃</option>
                                <option value="inactive">沉默</option>
                                <option value="risk">流失风险</option>
                            </select>
                            <select class="form-input" style="width: 130px;">
                                <option value="">标签筛选</option>
                                <option value="high-value">高价值</option>
                                <option value="new">新客户</option>
                                <option value="old">老客户</option>
                                <option value="blacklist">黑名单</option>
                            </select>
                        </div>
                        
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th style="width: 40px;"><input type="checkbox"></th>
                                    <th>客户信息</th>
                                    <th>联系方式</th>
                                    <th>客户等级</th>
                                    <th>累计消费</th>
                                    <th>最近联系</th>
                                    <th>标签</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>
                                        <div style="display: flex; align-items: center; gap: 10px;">
                                            <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center;">
                                                <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" width="18" height="18"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                                            </div>
                                            <div>
                                                <div style="font-weight: 500;">王先生</div>
                                                <div style="font-size: 12px; color: var(--text-secondary);">ID: C20240001</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div>138****1234</div>
                                        <div style="font-size: 12px; color: var(--text-secondary);">wang@email.com</div>
                                    </td>
                                    <td><span class="tag tag-warning">VIP3</span></td>
                                    <td style="font-weight: 500;">¥12,580</td>
                                    <td>3天前</td>
                                    <td>
                                        <span class="tag">高价值</span>
                                        <span class="tag tag-info">新客户</span>
                                    </td>
                                    <td>
                                        <button class="btn-text" onclick="viewCustomerDetail(1)" title="查看详情">详情</button>
                                        <button class="btn-text" onclick="editCustomer(1)" title="编辑">编辑</button>
                                        <button class="btn-text" onclick="openModal('customer-follow')" title="添加跟进">跟进</button>
                                        <div class="dropdown" style="display: inline-block;">
                                            <button class="btn-text" onclick="toggleDropdown(this)">更多</button>
                                            <div class="dropdown-menu">
                                                <a href="javascript:void(0)" onclick="addToBlacklist(1)">加入黑名单</a>
                                                <a href="javascript:void(0)" onclick="mergeCustomer(1)">合并客户</a>
                                                <a href="javascript:void(0)" onclick="deleteCustomer(1)" style="color: var(--danger);">删除</a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>
                                        <div style="display: flex; align-items: center; gap: 10px;">
                                            <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); display: flex; align-items: center; justify-content: center;">
                                                <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" width="18" height="18"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                                            </div>
                                            <div>
                                                <div style="font-weight: 500;">李女士</div>
                                                <div style="font-size: 12px; color: var(--text-secondary);">ID: C20240002</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div>139****5678</div>
                                        <div style="font-size: 12px; color: var(--text-secondary);">lili@email.com</div>
                                    </td>
                                    <td><span class="tag tag-warning">VIP2</span></td>
                                    <td style="font-weight: 500;">¥8,920</td>
                                    <td>1天前</td>
                                    <td>
                                        <span class="tag">高价值</span>
                                    </td>
                                    <td>
                                        <button class="btn-text" onclick="viewCustomerDetail(2)">详情</button>
                                        <button class="btn-text" onclick="editCustomer(2)">编辑</button>
                                        <button class="btn-text" onclick="openModal('customer-follow')">跟进</button>
                                        <div class="dropdown" style="display: inline-block;">
                                            <button class="btn-text" onclick="toggleDropdown(this)">更多</button>
                                            <div class="dropdown-menu">
                                                <a href="javascript:void(0)" onclick="addToBlacklist(2)">加入黑名单</a>
                                                <a href="javascript:void(0)" onclick="mergeCustomer(2)">合并客户</a>
                                                <a href="javascript:void(0)" onclick="deleteCustomer(2)" style="color: var(--danger);">删除</a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>
                                        <div style="display: flex; align-items: center; gap: 10px;">
                                            <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); display: flex; align-items: center; justify-content: center;">
                                                <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" width="18" height="18"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                                            </div>
                                            <div>
                                                <div style="font-weight: 500;">张先生</div>
                                                <div style="font-size: 12px; color: var(--text-secondary);">ID: C20240003</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div>158****3456</div>
                                        <div style="font-size: 12px; color: var(--text-secondary);">zhang@email.com</div>
                                    </td>
                                    <td><span class="tag">普通</span></td>
                                    <td style="font-weight: 500;">¥2,350</td>
                                    <td>7天前</td>
                                    <td>
                                        <span class="tag tag-info">老客户</span>
                                    </td>
                                    <td>
                                        <button class="btn-text" onclick="viewCustomerDetail(3)">详情</button>
                                        <button class="btn-text" onclick="editCustomer(3)">编辑</button>
                                        <button class="btn-text" onclick="openModal('customer-follow')">跟进</button>
                                        <div class="dropdown" style="display: inline-block;">
                                            <button class="btn-text" onclick="toggleDropdown(this)">更多</button>
                                            <div class="dropdown-menu">
                                                <a href="javascript:void(0)" onclick="addToBlacklist(3)">加入黑名单</a>
                                                <a href="javascript:void(0)" onclick="mergeCustomer(3)">合并客户</a>
                                                <a href="javascript:void(0)" onclick="deleteCustomer(3)" style="color: var(--danger);">删除</a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>
                                        <div style="display: flex; align-items: center; gap: 10px;">
                                            <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center;">
                                                <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" width="18" height="18"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                                            </div>
                                            <div>
                                                <div style="font-weight: 500;">赵女士</div>
                                                <div style="font-size: 12px; color: var(--text-secondary);">ID: C20240004</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div>186****9012</div>
                                        <div style="font-size: 12px; color: var(--text-secondary);">zhao@email.com</div>
                                    </td>
                                    <td><span class="tag tag-warning">VIP1</span></td>
                                    <td style="font-weight: 500;">¥5,680</td>
                                    <td>15天前</td>
                                    <td>
                                        <span class="tag" style="background: #fef0f0; color: var(--danger);">流失风险</span>
                                    </td>
                                    <td>
                                        <button class="btn-text" onclick="viewCustomerDetail(4)">详情</button>
                                        <button class="btn-text" onclick="editCustomer(4)">编辑</button>
                                        <button class="btn-text" onclick="openModal('customer-follow')">跟进</button>
                                        <div class="dropdown" style="display: inline-block;">
                                            <button class="btn-text" onclick="toggleDropdown(this)">更多</button>
                                            <div class="dropdown-menu">
                                                <a href="javascript:void(0)" onclick="addToBlacklist(4)">加入黑名单</a>
                                                <a href="javascript:void(0)" onclick="mergeCustomer(4)">合并客户</a>
                                                <a href="javascript:void(0)" onclick="deleteCustomer(4)" style="color: var(--danger);">删除</a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        
                        <!-- 分页 -->
                        <div style="padding-top: 16px; display: flex; justify-content: space-between; align-items: center;">
                            <div style="color: var(--text-secondary); font-size: 13px;">共 3,847 条记录</div>
                            <div class="pagination">
                                <button class="page-btn" disabled><</button>
                                <button class="page-btn active">1</button>
                                <button class="page-btn">2</button>
                                <button class="page-btn">3</button>
                                <button class="page-btn">...</button>
                                <button class="page-btn">385</button>
                                <button class="page-btn">></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 工单管理页面 -->
            <div id="page-workorder" class="page-content hidden">
                <div class="page-header">
                    <h1 class="page-title">工单管理</h1>
                    <div class="page-actions">
                        <button class="btn btn-outline" onclick="openModal('workorder-import')">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                            批量导入
                        </button>
                        <button class="btn btn-primary" onclick="openModal('workorder-create')">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                            创建工单
                        </button>
                    </div>
                </div>
                
                <!-- 工单统计 -->
                <div class="stats-grid" style="margin-bottom: 16px;">
                    <div class="stat-card">
                        <div class="stat-value" style="color: var(--primary);">847</div>
                        <div class="stat-label">待处理</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" style="color: var(--warning);">256</div>
                        <div class="stat-label">处理中</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" style="color: var(--success);">1,568</div>
                        <div class="stat-label">已完成</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" style="color: var(--danger);">42</div>
                        <div class="stat-label">已超时</div>
                    </div>
                </div>
                
                <!-- 工单列表 -->
                <div class="card">
                    <div class="tabs" style="padding: 0 16px; border-bottom: 1px solid var(--border);">
                        <div class="tab active" onclick="switchTab(this, 'tab-all-orders')">全部工单</div>
                        <div class="tab" onclick="switchTab(this, 'tab-pending-orders')">待处理 <span class="tab-badge">12</span></div>
                        <div class="tab" onclick="switchTab(this, 'tab-inprogress-orders')">处理中 <span class="tab-badge tab-badge-warning">5</span></div>
                        <div class="tab" onclick="switchTab(this, 'tab-overdue-orders')">已超时 <span class="tab-badge tab-badge-danger">3</span></div>
                        <div class="tab" onclick="switchTab(this, 'tab-completed-orders')">已完成</div>
                    </div>
                    
                    <div class="card-body" style="padding: 12px 16px;">
                        <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px;">
                            <div class="search-box" style="width: 240px;">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input type="text" placeholder="搜索工单编号/标题...">
                            </div>
                            <select class="form-input" style="width: 130px;">
                                <option value="">工单类型</option>
                                <option value="complaint">投诉</option>
                                <option value="refund">退款</option>
                                <option value="consult">咨询</option>
                                <option value="suggestion">建议</option>
                            </select>
                            <select class="form-input" style="width: 130px;">
                                <option value="">优先级</option>
                                <option value="urgent">紧急</option>
                                <option value="high">高</option>
                                <option value="normal">普通</option>
                                <option value="low">低</option>
                            </select>
                            <select class="form-input" style="width: 130px;">
                                <option value="">处理人</option>
                                <option value="li">李婷婷</option>
                                <option value="wang">王建国</option>
                                <option value="zhang">张伟</option>
                            </select>
                        </div>
                        
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>工单编号</th>
                                    <th>工单标题</th>
                                    <th>类型</th>
                                    <th>优先级</th>
                                    <th>客户</th>
                                    <th>处理人</th>
                                    <th>状态</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr onclick="viewWorkOrderDetail(1001)" style="cursor: pointer;">
                                    <td><span style="color: var(--primary); font-weight: 500;">WO-20240618-001</span></td>
                                    <td>
                                        <div style="font-weight: 500;">产品质量问题投诉</div>
                                        <div style="font-size: 12px; color: var(--text-secondary);">客户反映购买的商品存在质量问题...</div>
                                    </td>
                                    <td><span class="tag" style="background: #fef0f0; color: var(--danger);">投诉</span></td>
                                    <td><span class="tag tag-danger">紧急</span></td>
                                    <td>王先生</td>
                                    <td>李婷婷</td>
                                    <td><span class="status status-warning">处理中</span></td>
                                    <td>2024-06-18 14:32</td>
                                    <td>
                                        <button class="btn-text" onclick="viewWorkOrderDetail(event, 1001)">查看</button>
                                        <button class="btn-text" onclick="editWorkOrder(event, 1001)">编辑</button>
                                        <button class="btn-text" onclick="transferWorkOrder(event, 1001)">转派</button>
                                    </td>
                                </tr>
                                <tr onclick="viewWorkOrderDetail(1002)" style="cursor: pointer;">
                                    <td><span style="color: var(--primary); font-weight: 500;">WO-20240618-002</span></td>
                                    <td>
                                        <div style="font-weight: 500;">申请退货退款</div>
                                        <div style="font-size: 12px; color: var(--text-secondary);">客户要求对已购买的商品进行退货...</div>
                                    </td>
                                    <td><span class="tag tag-warning">退款</span></td>
                                    <td><span class="tag tag-warning">高</span></td>
                                    <td>李女士</td>
                                    <td>王建国</td>
                                    <td><span class="status status-info">待处理</span></td>
                                    <td>2024-06-18 13:15</td>
                                    <td>
                                        <button class="btn-text" onclick="viewWorkOrderDetail(event, 1002)">查看</button>
                                        <button class="btn-text" onclick="editWorkOrder(event, 1002)">编辑</button>
                                        <button class="btn-text" onclick="transferWorkOrder(event, 1002)">转派</button>
                                    </td>
                                </tr>
                                <tr onclick="viewWorkOrderDetail(1003)" style="cursor: pointer;">
                                    <td><span style="color: var(--primary); font-weight: 500;">WO-20240617-003</span></td>
                                    <td>
                                        <div style="font-weight: 500;">产品功能咨询</div>
                                        <div style="font-size: 12px; color: var(--text-secondary);">咨询产品的使用方法和技术参数...</div>
                                    </td>
                                    <td><span class="tag tag-info">咨询</span></td>
                                    <td><span class="tag">普通</span></td>
                                    <td>张先生</td>
                                    <td>张伟</td>
                                    <td><span class="status status-success">已完成</span></td>
                                    <td>2024-06-17 10:30</td>
                                    <td>
                                        <button class="btn-text" onclick="viewWorkOrderDetail(event, 1003)">查看</button>
                                        <button class="btn-text" onclick="editWorkOrder(event, 1003)">编辑</button>
                                    </td>
                                </tr>
                                <tr onclick="viewWorkOrderDetail(1004)" style="cursor: pointer;">
                                    <td><span style="color: var(--primary); font-weight: 500;">WO-20240617-004</span></td>
                                    <td>
                                        <div style="font-weight: 500;">产品使用建议</div>
                                        <div style="font-size: 12px; color: var(--text-secondary);">客户对产品功能提出改进建议...</div>
                                    </td>
                                    <td><span class="tag tag-success">建议</span></td>
                                    <td><span class="tag" style="background: #f5f5f5; color: #999;">低</span></td>
                                    <td>赵女士</td>
                                    <td>李婷婷</td>
                                    <td><span class="status status-danger">已超时</span></td>
                                    <td>2024-06-17 09:00</td>
                                    <td>
                                        <button class="btn-text" onclick="viewWorkOrderDetail(event, 1004)">查看</button>
                                        <button class="btn-text" onclick="editWorkOrder(event, 1004)">编辑</button>
                                        <button class="btn-text" onclick="transferWorkOrder(event, 1004)">转派</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        
                        <!-- 分页 -->
                        <div style="padding-top: 16px; display: flex; justify-content: space-between; align-items: center;">
                            <div style="color: var(--text-secondary); font-size: 13px;">共 847 条工单</div>
                            <div class="pagination">
                                <button class="page-btn" disabled><</button>
                                <button class="page-btn active">1</button>
                                <button class="page-btn">2</button>
                                <button class="page-btn">3</button>
                                <button class="page-btn">...</button>
                                <button class="page-btn">85</button>
                                <button class="page-btn">></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 数据报表页面 -->
            <div id="page-report" class="page-content hidden">
                <div class="page-header">
                    <h1 class="page-title">数据报表</h1>
                    <div class="page-actions">
                        <select class="form-input" style="width: 140px;">
                            <option value="today">今日</option>
                            <option value="week">本周</option>
                            <option value="month" selected>本月</option>
                            <option value="custom">自定义</option>
                        </select>
                        <button class="btn btn-outline" onclick="openModal('report-export')">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                            导出报表
                        </button>
                    </div>
                </div>
                
                <!-- 报表Tab -->
                <div class="card">
                    <div class="tabs" style="padding: 0 16px; border-bottom: 1px solid var(--border);">
                        <div class="tab active" onclick="switchTab(this, 'tab-outbound-report')">外呼报表</div>
                        <div class="tab" onclick="switchTab(this, 'tab-ai-report')">AI接听报表</div>
                        <div class="tab" onclick="switchTab(this, 'tab-agent-report')">坐席绩效</div>
                        <div class="tab" onclick="switchTab(this, 'tab-workorder-report')">工单报表</div>
                    </div>
                    
                    <!-- 外呼报表Tab -->
                    <div id="tab-outbound-report" class="tab-content">
                        <div style="padding: 16px;">
                            <!-- 外呼统计卡片 -->
                            <div class="stats-grid" style="margin-bottom: 20px;">
                                <div class="stat-card">
                                    <div class="stat-value">12,847</div>
                                    <div class="stat-label">外呼总数</div>
                                    <div style="margin-top: 8px; font-size: 12px; color: var(--success);">↑ 15.2%</div>
                                </div>
                                <div class="stat-card">
                                    <div class="stat-value">9,682</div>
                                    <div class="stat-label">接通数</div>
                                    <div style="margin-top: 8px; font-size: 12px; color: var(--success);">↑ 12.8%</div>
                                </div>
                                <div class="stat-card">
                                    <div class="stat-value" style="color: var(--primary);">75.4%</div>
                                    <div class="stat-label">接通率</div>
                                    <div style="margin-top: 8px; font-size: 12px; color: var(--success);">↑ 2.3%</div>
                                </div>
                                <div class="stat-card">
                                    <div class="stat-value">3m 24s</div>
                                    <div class="stat-label">平均通话时长</div>
                                    <div style="margin-top: 8px; font-size: 12px; color: var(--danger);">↓ 5.1%</div>
                                </div>
                            </div>
                            
                            <!-- 图表区域 -->
                            <div style="display: flex; gap: 24px; margin-bottom: 20px;">
                                <div style="flex: 2; padding: 16px; background: var(--bg); border-radius: 8px;">
                                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
                                        <h4 style="margin: 0; font-size: 14px;">外呼趋势</h4>
                                        <div style="display: flex; gap: 8px;">
                                            <button class="btn btn-sm btn-outline active" onclick="setChartRange(this, 'day')">日</button>
                                            <button class="btn btn-sm btn-outline" onclick="setChartRange(this, 'week')">周</button>
                                            <button class="btn btn-sm btn-outline" onclick="setChartRange(this, 'month')">月</button>
                                        </div>
                                    </div>
                                    <!-- 简单趋势图 -->
                                    <div style="height: 180px; display: flex; align-items: flex-end; justify-content: space-around; padding-bottom: 30px; position: relative;">
                                        <div class="chart-bar-container">
                                            <div class="chart-bar" style="height: 60%; background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);"></div>
                                            <div class="chart-bar-label">周一</div>
                                        </div>
                                        <div class="chart-bar-container">
                                            <div class="chart-bar" style="height: 80%; background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);"></div>
                                            <div class="chart-bar-label">周二</div>
                                        </div>
                                        <div class="chart-bar-container">
                                            <div class="chart-bar" style="height: 70%; background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);"></div>
                                            <div class="chart-bar-label">周三</div>
                                        </div>
                                        <div class="chart-bar-container">
                                            <div class="chart-bar" style="height: 90%; background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);"></div>
                                            <div class="chart-bar-label">周四</div>
                                        </div>
                                        <div class="chart-bar-container">
                                            <div class="chart-bar" style="height: 85%; background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);"></div>
                                            <div class="chart-bar-label">周五</div>
                                        </div>
                                        <div class="chart-bar-container">
                                            <div class="chart-bar" style="height: 45%; background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);"></div>
                                            <div class="chart-bar-label">周六</div>
                                        </div>
                                        <div class="chart-bar-container">
                                            <div class="chart-bar" style="height: 50%; background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);"></div>
                                            <div class="chart-bar-label">周日</div>
                                        </div>
                                    </div>
                                </div>
                                <div style="flex: 1; padding: 16px; background: var(--bg); border-radius: 8px;">
                                    <h4 style="margin: 0 0 16px 0; font-size: 14px;">接通率分布</h4>
                                    <div style="display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;">
                                        <div style="text-align: center;">
                                            <div style="width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(#43e97b 0% 75.4%, #e0e0e0 75.4%); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;">
                                                <div style="width: 50px; height: 50px; border-radius: 50%; background: white;"></div>
                                            </div>
                                            <div style="font-size: 12px; color: #43e97b; font-weight: 500;">75.4% 接通</div>
                                        </div>
                                        <div style="text-align: center;">
                                            <div style="width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(#f5576c 0% 15%, #e0e0e0 15%); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;">
                                                <div style="width: 50px; height: 50px; border-radius: 50%; background: white;"></div>
                                            </div>
                                            <div style="font-size: 12px; color: #f5576c; font-weight: 500;">15% 未接</div>
                                        </div>
                                        <div style="text-align: center;">
                                            <div style="width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(#909399 0% 9.6%, #e0e0e0 9.6%); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;">
                                                <div style="width: 50px; height: 50px; border-radius: 50%; background: white;"></div>
                                            </div>
                                            <div style="font-size: 12px; color: #909399; font-weight: 500;">9.6% 拒接</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 任务明细 -->
                            <h4 style="margin: 0 0 12px 0; font-size: 14px;">任务明细</h4>
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>任务名称</th>
                                        <th>外呼量</th>
                                        <th>接通量</th>
                                        <th>接通率</th>
                                        <th>平均时长</th>
                                        <th>有效通话</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>618促销活动通知</td>
                                        <td>3,450</td>
                                        <td>2,680</td>
                                        <td><span style="color: var(--success);">77.7%</span></td>
                                        <td>2m 45s</td>
                                        <td>2,340</td>
                                    </tr>
                                    <tr>
                                        <td>新品推荐外呼</td>
                                        <td>2,890</td>
                                        <td>2,156</td>
                                        <td><span style="color: var(--success);">74.5%</span></td>
                                        <td>3m 12s</td>
                                        <td>1,890</td>
                                    </tr>
                                    <tr>
                                        <td>老客户回访</td>
                                        <td>1,567</td>
                                        <td>1,245</td>
                                        <td><span style="color: var(--success);">79.4%</span></td>
                                        <td>4m 05s</td>
                                        <td>1,156</td>
                                    </tr>
                                    <tr>
                                        <td>会员升级通知</td>
                                        <td>890</td>
                                        <td>645</td>
                                        <td><span style="color: var(--warning);">72.5%</span></td>
                                        <td>2m 30s</td>
                                        <td>560</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <!-- AI接听报表Tab -->
                    <div id="tab-ai-report" class="tab-content hidden">
                        <div style="padding: 16px;">
                            <div class="stats-grid" style="margin-bottom: 20px;">
                                <div class="stat-card">
                                    <div class="stat-value" style="color: var(--primary);">45,892</div>
                                    <div class="stat-label">AI接听总数</div>
                                </div>
                                <div class="stat-card">
                                    <div class="stat-value" style="color: var(--success);">94.2%</div>
                                    <div class="stat-label">问题解决率</div>
                                </div>
                                <div class="stat-card">
                                    <div class="stat-value">1m 45s</div>
                                    <div class="stat-label">平均通话时长</div>
                                </div>
                                <div class="stat-card">
                                    <div class="stat-value" style="color: var(--warning);">2,847</div>
                                    <div class="stat-label">转人工数</div>
                                </div>
                            </div>
                            
                            <h4 style="margin: 0 0 12px 0; font-size: 14px;">AI对话质量分析</h4>
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>指标</th>
                                        <th>数值</th>
                                        <th>环比</th>
                                        <th>说明</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>语义理解准确率</td>
                                        <td>92.5%</td>
                                        <td><span style="color: var(--success);">↑ 3.2%</span></td>
                                        <td>AI正确理解用户意图的比例</td>
                                    </tr>
                                    <tr>
                                        <td>意图识别成功率</td>
                                        <td>89.7%</td>
                                        <td><span style="color: var(--success);">↑ 2.8%</span></td>
                                        <td>成功匹配到知识库答案的比例</td>
                                    </tr>
                                    <tr>
                                        <td>用户满意度</td>
                                        <td>4.2/5.0</td>
                                        <td><span style="color: var(--success);">↑ 0.3</span></td>
                                        <td>通话结束后的用户评分</td>
                                    </tr>
                                    <tr>
                                        <td>首次解决率</td>
                                        <td>86.3%</td>
                                        <td><span style="color: var(--danger);">↓ 1.2%</span></td>
                                        <td>首次通话解决问题的比例</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <!-- 坐席绩效Tab -->
                    <div id="tab-agent-report" class="tab-content hidden">
                        <div style="padding: 16px;">
                            <div class="stats-grid" style="margin-bottom: 20px;">
                                <div class="stat-card">
                                    <div class="stat-value">8</div>
                                    <div class="stat-label">在线坐席</div>
                                </div>
                                <div class="stat-card">
                                    <div class="stat-value">1,247</div>
                                    <div class="stat-label">今日接听</div>
                                </div>
                                <div class="stat-card">
                                    <div class="stat-value">3m 15s</div>
                                    <div class="stat-label">平均处理时长</div>
                                </div>
                                <div class="stat-card">
<div class="stat-value">4.6/5</div>
                                    <div class="stat-label">满意度评分</div>
                                </div>
                            </div>
                            
                            <h4 style="margin: 0 0 12px 0; font-size: 14px;">坐席绩效排名</h4>
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>坐席</th>
                                        <th>接听量</th>
                                        <th>平均时长</th>
                                        <th>问题解决率</th>
                                        <th>满意度</th>
                                        <th>综合评分</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><span style="display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center; background: #ffd700; border-radius: 4px; font-size: 12px; font-weight: 600;">1</span></td>
                                        <td>李婷婷</td>
                                        <td>156</td>
                                        <td>2m 45s</td>
                                        <td><span style="color: var(--success);">96.5%</span></td>
                                        <td>4.8</td>
                                        <td><span style="font-weight: 600; color: var(--primary);">98.2</span></td>
                                    </tr>
                                    <tr>
                                        <td><span style="display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center; background: #c0c0c0; border-radius: 4px; font-size: 12px; font-weight: 600;">2</span></td>
                                        <td>王建国</td>
                                        <td>142</td>
                                        <td>3m 02s</td>
                                        <td><span style="color: var(--success);">94.8%</span></td>
                                        <td>4.7</td>
                                        <td><span style="font-weight: 600; color: var(--primary);">95.6</span></td>
                                    </tr>
                                    <tr>
                                        <td><span style="display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center; background: #cd7f32; border-radius: 4px; font-size: 12px; font-weight: 600; color: white;">3</span></td>
                                        <td>张伟</td>
                                        <td>138</td>
                                        <td>3m 15s</td>
                                        <td><span style="color: var(--success);">93.2%</span></td>
                                        <td>4.5</td>
                                        <td><span style="font-weight: 600; color: var(--primary);">92.8</span></td>
                                    </tr>
                                    <tr>
                                        <td><td>赵丽</td>
                                        <td>125</td>
                                        <td>3m 30s</td>
                                        <td><span style="color: var(--warning);">91.5%</span></td>
                                        <td>4.3</td>
                                        <td><span style="font-weight: 600;">88.4</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <!-- 工单报表Tab -->
                    <div id="tab-workorder-report" class="tab-content hidden">
                        <div style="padding: 16px;">
                            <div class="stats-grid" style="margin-bottom: 20px;">
                                <div class="stat-card">
                                    <div class="stat-value" style="color: var(--primary);">847</div>
                                    <div class="stat-label">工单总数</div>
                                </div>
                                <div class="stat-card">
                                    <div class="stat-value" style="color: var(--success);">76.5%</div>
                                    <div class="stat-label">解决率</div>
                                </div>
                                <div class="stat-card">
                                    <div class="stat-value">4.2h</div>
                                    <div class="stat-label">平均处理时长</div>
                                </div>
                                <div class="stat-card">
                                    <div class="stat-value" style="color: var(--danger);">42</div>
                                    <div class="stat-label">超时工单</div>
                                </div>
                            </div>
                            
                            <h4 style="margin: 0 0 12px 0; font-size: 14px;">工单类型分布</h4>
                            <div style="display: flex; gap: 24px;">
                                <div style="flex: 1; padding: 16px; background: var(--bg); border-radius: 8px;">
                                    <div style="margin-bottom: 16px;">
                                        <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
                                            <span>投诉</span>
                                            <span style="font-weight: 500;">156 (25.3%)</span>
                                        </div>
                                        <div style="height: 8px; background: #f5f5f5; border-radius: 4px;">
                                            <div style="width: 25.3%; height: 100%; background: linear-gradient(90deg, #f5576c, #f5576c); border-radius: 4px;"></div>
                                        </div>
                                    </div>
                                    <div style="margin-bottom: 16px;">
                                        <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
                                            <span>退款申请</span>
                                            <span style="font-weight: 500;">234 (38.1%)</span>
                                        </div>
                                        <div style="height: 8px; background: #f5f5f5; border-radius: 4px;">
                                            <div style="width: 38.1%; height: 100%; background: linear-gradient(90deg, #4facfe, #00f2fe); border-radius: 4px;"></div>
                                        </div>
                                    </div>
                                    <div style="margin-bottom: 16px;">
                                        <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
                                            <span>产品咨询</span>
                                            <span style="font-weight: 500;">289 (47.0%)</span>
                                        </div>
                                        <div style="height: 8px; background: #f5f5f5; border-radius: 4px;">
                                            <div style="width: 47%; height: 100%; background: linear-gradient(90deg, #43e97b, #38f9d7); border-radius: 4px;"></div>
                                        </div>
                                    </div>
                                    <div>
                                        <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
                                            <span>建议反馈</span>
                                            <span style="font-weight: 500;">168 (27.3%)</span>
                                        </div>
                                        <div style="height: 8px; background: #f5f5f5; border-radius: 4px;">
                                            <div style="width: 27.3%; height: 100%; background: linear-gradient(90deg, #667eea, #764ba2); border-radius: 4px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    
    <!-- ==================== 模态框 ==================== -->
    
    <!-- 创建外呼任务 -->
    <div class="modal-overlay" id="modal-create-task">
        <div class="modal modal-lg">
            <div class="modal-header">
                <span class="modal-title">新建外呼任务</span>
                <button class="modal-close" onclick="closeModal('create-task')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
                        <line x1="18" y1="6" x2="6" y2="18"/>
                        <line x1="6" y1="6" x2="18" y2="18"/>
                    </svg>
                </button>
            </div>
            <div class="modal-body">
                <div class="steps">
                    <div class="step active" id="step1">
                        <div class="step-number">1</div>
                        <span class="step-label">基本信息</span>
                    </div>
                    <div class="step-line"></div>
                    <div class="step" id="step2">
                        <div class="step-number">2</div>
                        <span class="step-label">选择模板</span>
                    </div>
                    <div class="step-line"></div>
                    <div class="step" id="step3">
                        <div class="step-number">3</div>
                        <span class="step-label">导入数据</span>
                    </div>
                    <div class="step-line"></div>
                    <div class="step" id="step4">
                        <div class="step-number">4</div>
                        <span class="step-label">完成</span>
                    </div>
                </div>
                
                <!-- 步骤1：基本信息 -->
                <div id="wizard-step-1">
                    <div class="form-group">
                        <label class="form-label">任务名称 <span>*</span></label>
                        <input type="text" class="form-input" id="task-name" placeholder="请输入任务名称，如：618促销活动">
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">外呼时间</label>
                            <select class="form-input" id="call-time">
                                <option value="now">立即开始</option>
                                <option value="scheduled">定时开始</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label">并发数</label>
                            <input type="number" class="form-input" id="concurrent-count" value="5" min="1" max="20">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">重拨设置</label>
                        <div style="display: flex; gap: 20px; align-items: center;">
                            <label style="display: flex; align-items: center; gap: 8px; font-size: 14px;">
                                <input type="checkbox" checked> 自动重拨
                            </label>
                            <span style="font-size: 14px; color: var(--text-secondary);">重拨次数：</span>
                            <input type="number" class="form-input" style="width: 80px;" value="3" min="0" max="5">
                            <span style="font-size: 14px; color: var(--text-secondary);">间隔：</span>
                            <input type="number" class="form-input" style="width: 80px;" value="30" min="10">
                            <span style="font-size: 14px; color: var(--text-secondary);">秒</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">外呼时间段</label>
                        <div style="display: flex; gap: 16px; align-items: center;">
                            <input type="time" class="form-input" style="width: 150px;" value="09:00" id="start-time">
                            <span style="color: var(--text-secondary);">至</span>
                            <input type="time" class="form-input" style="width: 150px;" value="21:00" id="end-time">
                            <label style="display: flex; align-items: center; gap: 6px; font-size: 14px; margin-left: 20px;">
                                <input type="checkbox" checked> 排除周末
                            </label>
                        </div>
                    </div>
                </div>
                
                <!-- 步骤2：选择模板 -->
                <div id="wizard-step-2" class="hidden">
                    <div class="template-grid">
                        <div class="template-card" onclick="selectTemplate(this, 'promotion')">
                            <div class="template-header">
                                <div class="template-name">促销活动模板</div>
                                <span class="status status-info">主用</span>
                            </div>
                            <div class="template-desc">用于618、双11等促销活动的外呼通知</div>
                        </div>
                        <div class="template-card" onclick="selectTemplate(this, 'visit')">
                            <div class="template-header">
                                <div class="template-name">客户回访模板</div>
                            </div>
                            <div class="template-desc">用于客户满意度回访，收集反馈和建议</div>
                        </div>
                        <div class="template-card" onclick="selectTemplate(this, 'vip')">
                            <div class="template-header">
                                <div class="template-name">VIP升级模板</div>
                            </div>
                            <div class="template-desc">通知会员升级权益，引导升级操作</div>
                        </div>
                        <div class="template-card" onclick="selectTemplate(this, 'order')">
                            <div class="template-header">
                                <div class="template-name">订单确认模板</div>
                            </div>
                            <div class="template-desc">确认订单信息，提示发货时间和物流</div>
                        </div>
                    </div>
                    
                    <div style="margin-top: 20px; padding: 16px; background: var(--bg); border-radius: 8px;">
                        <div style="font-weight: 500; margin-bottom: 8px;">模板变量预览</div>
                        <div class="variable-preview" id="variable-preview">
                            <div class="variable-item"><span class="variable-key">{{客户姓名}}</span> → 张三</div>
                            <div class="variable-item"><span class="variable-key">{{活动名称}}</span> → 618促销活动</div>
                            <div class="variable-item"><span class="variable-key">{{活动时间}}</span> → 6月18日</div>
                            <div class="variable-item"><span class="variable-key">{{优惠内容}}</span> → 全场8折</div>
                        </div>
                    </div>
                </div>
                
                <!-- 步骤3：导入数据 -->
                <div id="wizard-step-3" class="hidden">
                    <div style="border: 2px dashed var(--border); border-radius: 10px; padding: 40px; text-align: center;">
                        <svg viewBox="0 0 24 24" fill="none" stroke="var(--text-secondary)" stroke-width="1.5" width="48" height="48" style="margin: 0 auto 16px;">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                            <polyline points="17 8 12 3 7 8"/>
                            <line x1="12" y1="3" x2="12" y2="15"/>
                        </svg>
                        <div style="font-weight: 500; margin-bottom: 8px;">拖拽文件到此处，或点击上传</div>
                        <div style="color: var(--text-secondary); font-size: 13px;">支持 .xlsx、.xls、.csv 格式</div>
                        <button class="btn btn-primary" style="margin-top: 16px;" onclick="document.getElementById('file-upload').click()">
                            选择文件
                        </button>
                        <input type="file" id="file-upload" accept=".xlsx,.xls,.csv" style="display: none;" onchange="handleFileUpload(this)">
                    </div>
                    
                    <div style="margin-top: 20px;">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                            <span style="font-weight: 500;">已上传文件</span>
                            <span class="status status-success">1234条数据</span>
                        </div>
                        <div style="background: var(--bg); border-radius: 8px; padding: 16px;">
                            <div style="display: flex; align-items: center; gap: 12px;">
                                <svg viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2" width="24" height="24">
                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                    <polyline points="14 2 14 8 20 8"/>
                                </svg>
                                <div>
                                    <div style="font-weight: 500;">客户名单_618.xlsx</div>
                                    <div style="font-size: 12px; color: var(--text-secondary);">1234条数据 · 已完成字段映射</div>
                                </div>
                                <button class="btn btn-secondary btn-sm" style="margin-left: auto;">重新上传</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 步骤4：完成 -->
                <div id="wizard-step-4" class="hidden">
                    <div style="text-align: center; padding: 40px;">
                        <div style="width: 80px; height: 80px; border-radius: 50%; background: rgba(16, 185, 129, 0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;">
                            <svg viewBox="0 0 24 24" fill="none" stroke="var(--success)" stroke-width="2" width="40" height="40">
                                <polyline points="20 6 9 17 4 12"/>
                            </svg>
                        </div>
                        <div style="font-size: 20px; font-weight: 600; margin-bottom: 8px;">任务创建成功！</div>
                        <div style="color: var(--text-secondary);">618促销活动 已创建，将于 09:00 开始执行</div>
                        
                        <div style="background: var(--bg); border-radius: 10px; padding: 20px; margin-top: 24px; text-align: left;">
                            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;">
                                <div>
                                    <div style="color: var(--text-secondary); font-size: 13px;">任务名称</div>
                                    <div style="font-weight: 500;">618促销活动</div>
                                </div>
                                <div>
                                    <div style="color: var(--text-secondary); font-size: 13px;">使用模板</div>
                                    <div style="font-weight: 500;">促销活动模板</div>
                                </div>
                                <div>
                                    <div style="color: var(--text-secondary); font-size: 13px;">拨打量</div>
                                    <div style="font-weight: 500;">1,234 条</div>
                                </div>
                                <div>
                                    <div style="color: var(--text-secondary); font-size: 13px;">并发数</div>
                                    <div style="font-weight: 500;">5 路</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer" id="create-task-footer">
                <button class="btn btn-secondary" onclick="closeModal('create-task')">取消</button>
                <button class="btn btn-secondary" id="btn-prev" onclick="prevStep()" style="display: none;">上一步</button>
                <button class="btn btn-primary" id="btn-next" onclick="nextStep()">下一步</button>
            </div>
        </div>
    </div>
    
    <!-- 创建模板 -->
    <div class="modal-overlay" id="modal-create-template">
        <div class="modal modal-lg">
            <div class="modal-header">
                <span class="modal-title">创建外呼模板</span>
                <button class="modal-close" onclick="closeModal('create-template')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
                        <line x1="18" y1="6" x2="6" y2="18"/>
                        <line x1="6" y1="6" x2="18" y2="18"/>
                    </svg>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">模板名称 <span>*</span></label>
                    <input type="text" class="form-input" placeholder="请输入模板名称">
                </div>
                <div class="form-group">
                    <label class="form-label">开场白</label>
                    <textarea class="form-input" placeholder="请输入AI开场白内容，支持变量替换，如：您好，{{客户姓名}}先生/女士，我是XX公司的客服...">
原因	数量	占比
无人接听	756	70.1%
号码空号	215	19.9%
拒接	89	8.3%
其他	18	1.7%