编辑页面

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: #6366f1;
            --primary-dark: #4f46e5;
            --primary-light: #e0e7ff;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --gray-50: #f9fafb;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-300: #d1d5db;
            --gray-400: #9ca3af;
            --gray-500: #6b7280;
            --gray-600: #4b5563;
            --gray-700: #374151;
            --gray-800: #1f2937;
            --gray-900: #111827;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: var(--gray-100);
            color: var(--gray-800);
            min-height: 100vh;
        }
        
        /* 整体布局 */
        .app-container {
            display: flex;
            min-height: 100vh;
        }
        
        /* 侧边栏 */
        .sidebar {
            width: 260px;
            background: linear-gradient(180deg, var(--gray-900) 0%, var(--gray-800) 100%);
            color: white;
            padding: 20px 0;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
            z-index: 100;
            transition: transform 0.3s ease;
        }
        
        .sidebar-header {
            padding: 0 20px 20px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            margin-bottom: 20px;
        }
        
        .sidebar-logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .sidebar-logo svg {
            width: 40px;
            height: 40px;
            background: var(--primary);
            border-radius: 10px;
            padding: 8px;
        }
        
        .sidebar-logo span {
            font-size: 18px;
            font-weight: 700;
        }
        
        .sidebar-subtitle {
            font-size: 12px;
            color: var(--gray-400);
            margin-top: 4px;
        }
        
        .nav-section {
            margin-bottom: 20px;
        }
        
        .nav-section-title {
            font-size: 11px;
            text-transform: uppercase;
            color: var(--gray-500);
            padding: 0 20px;
            margin-bottom: 8px;
            letter-spacing: 0.5px;
        }
        
        .nav-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 20px;
            color: var(--gray-300);
            cursor: pointer;
            transition: all 0.2s ease;
            border-left: 3px solid transparent;
        }
        
        .nav-item:hover {
            background: rgba(255,255,255,0.05);
            color: white;
        }
        
        .nav-item.active {
            background: rgba(99, 102, 241, 0.15);
            color: white;
            border-left-color: var(--primary);
        }
        
        .nav-item svg {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
        }
        
        .nav-item .badge {
            margin-left: auto;
            background: var(--primary);
            color: white;
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 10px;
        }
        
        .nav-item .badge.out {
            background: var(--gray-600);
        }
        
        /* 主内容区 */
        .main-content {
            flex: 1;
            margin-left: 260px;
            min-height: 100vh;
        }
        
        /* 顶部导航 */
        .topbar {
            background: white;
            padding: 16px 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--gray-200);
            position: sticky;
            top: 0;
            z-index: 50;
        }
        
        .topbar-left {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        
        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: var(--gray-500);
        }
        
        .breadcrumb a {
            color: var(--gray-500);
            text-decoration: none;
            transition: color 0.2s;
        }
        
        .breadcrumb a:hover {
            color: var(--primary);
        }
        
        .breadcrumb span {
            color: var(--gray-800);
            font-weight: 500;
        }
        
        .topbar-right {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .search-box {
            display: flex;
            align-items: center;
            background: var(--gray-100);
            border-radius: 8px;
            padding: 8px 12px;
            gap: 8px;
            width: 280px;
        }
        
        .search-box input {
            border: none;
            background: transparent;
            outline: none;
            width: 100%;
            font-size: 14px;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 12px;
            background: var(--gray-50);
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .user-info:hover {
            background: var(--gray-100);
        }
        
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
        }
        
        .user-details {
            font-size: 13px;
        }
        
        .user-details .name {
            font-weight: 600;
            color: var(--gray-800);
        }
        
        .user-details .role {
            color: var(--gray-500);
            font-size: 12px;
        }
        
        /* 页面内容 */
        .page-content {
            padding: 30px;
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .page {
            display: none;
        }
        
        .page.active {
            display: block;
        }
        
        /* 统计卡片 */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background: white;
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 24px rgba(0,0,0,0.1);
        }
        
        .stat-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        
        .stat-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .stat-icon.primary { background: var(--primary-light); color: var(--primary); }
        .stat-icon.success { background: #d1fae5; color: var(--success); }
        .stat-icon.warning { background: #fef3c7; color: var(--warning); }
        .stat-icon.danger { background: #fee2e2; color: var(--danger); }
        
        .stat-icon svg {
            width: 24px;
            height: 24px;
        }
        
        .stat-trend {
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 20px;
        }
        
        .stat-trend.up {
            background: #d1fae5;
            color: var(--success);
        }
        
        .stat-trend.down {
            background: #fee2e2;
            color: var(--danger);
        }
        
        .stat-value {
            font-size: 32px;
            font-weight: 700;
            color: var(--gray-900);
            margin-bottom: 4px;
        }
        
        .stat-label {
            font-size: 14px;
            color: var(--gray-500);
        }
        
        /* 卡片组件 */
        .card {
            background: white;
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            margin-bottom: 20px;
        }
        
        .card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        
        .card-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--gray-800);
        }
        
        .card-actions {
            display: flex;
            gap: 12px;
        }
        
        /* 按钮 */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            border: none;
            text-decoration: none;
        }
        
        .btn-primary {
            background: var(--primary);
            color: white;
        }
        
        .btn-primary:hover {
            background: var(--primary-dark);
            transform: translateY(-1px);
        }
        
        .btn-outline {
            background: transparent;
            border: 1px solid var(--gray-300);
            color: var(--gray-700);
        }
        
        .btn-outline:hover {
            background: var(--gray-50);
            border-color: var(--gray-400);
        }
        
        .btn-sm {
            padding: 6px 12px;
            font-size: 13px;
        }
        
        .btn svg {
            width: 18px;
            height: 18px;
        }
        
        /* 表格 */
        .table-container {
            overflow-x: auto;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        th, td {
            padding: 14px 16px;
            text-align: left;
            border-bottom: 1px solid var(--gray-100);
        }
        
        th {
            font-size: 12px;
            text-transform: uppercase;
            color: var(--gray-500);
            font-weight: 600;
background: var(--gray-50);
        }
        
        td {
            font-size: 14px;
            color: var(--gray-700);
        }
        
        tr:hover td {
            background: var(--gray-50);
        }
        
        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .status-badge.new { background: #dbeafe; color: #1d4ed8; }
        .status-badge.active { background: #d1fae5; color: #059669; }
        .status-badge.waiting { background: #fef3c7; color: #d97706; }
        .status-badge.sleeping { background: #f3f4f6; color: #6b7280; }
        .status-badge.lost { background: #fee2e2; color: #dc2626; }
        
        .priority-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
        }
        
        .priority-badge.mvp {
            background: var(--primary-light);
            color: var(--primary);
        }
        
        .priority-badge.out {
            background: var(--gray-100);
            color: var(--gray-500);
        }
        
        .action-btns {
            display: flex;
            gap: 8px;
        }
        
        .action-btn {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            background: var(--gray-100);
            color: var(--gray-600);
        }
        
        .action-btn:hover {
            background: var(--primary);
            color: white;
        }
        
        .action-btn svg {
            width: 16px;
            height: 16px;
        }
        
        /* 标签页 */
        .tabs {
            display: flex;
            gap: 4px;
            background: var(--gray-100);
            padding: 4px;
            border-radius: 10px;
            margin-bottom: 24px;
        }
        
        .tab {
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            color: var(--gray-600);
            border: none;
            background: transparent;
        }
        
        .tab:hover {
            color: var(--gray-800);
        }
        
        .tab.active {
            background: white;
            color: var(--primary);
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        /* 功能模块列表 */
        .module-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .module-card {
            background: white;
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            cursor: pointer;
            border: 2px solid transparent;
        }
        
        .module-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 24px rgba(0,0,0,0.1);
            border-color: var(--primary);
        }
        
        .module-icon {
            width: 56px;
            height: 56px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
        }
        
        .module-icon svg {
            width: 28px;
            height: 28px;
        }
        
        .module-icon.crm { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
        .module-icon.ai { background: linear-gradient(135deg, #10b981, #059669); }
        .module-icon.schedule { background: linear-gradient(135deg, #f59e0b, #d97706); }
        .module-icon.security { background: linear-gradient(135deg, #ef4444, #dc2626); }
        .module-icon.shop { background: linear-gradient(135deg, #3b82f6, #2563eb); }
        .module-icon.system { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
        
        .module-card h3 {
            font-size: 18px;
            font-weight: 600;
            color: var(--gray-800);
            margin-bottom: 8px;
        }
        
        .module-card p {
            font-size: 14px;
            color: var(--gray-500);
            margin-bottom: 16px;
        }
        
        .module-features {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .feature-tag {
            padding: 4px 10px;
            background: var(--gray-100);
            border-radius: 6px;
            font-size: 12px;
            color: var(--gray-600);
        }
        
        /* AI推荐列表 */
        .ai-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .ai-item {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px;
            background: var(--gray-50);
            border-radius: 12px;
            transition: all 0.2s;
            cursor: pointer;
        }
        
        .ai-item:hover {
            background: var(--primary-light);
        }
        
        .ai-item-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 18px;
        }
        
        .ai-item-info {
            flex: 1;
        }
        
        .ai-item-name {
            font-weight: 600;
            color: var(--gray-800);
            margin-bottom: 4px;
        }
        
        .ai-item-desc {
            font-size: 13px;
            color: var(--gray-500);
        }
        
        .ai-item-tag {
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .ai-item-tag.urgent { background: #fee2e2; color: #dc2626; }
        .ai-item-tag.normal { background: #dbeafe; color: #1d4ed8; }
        .ai-item-tag.remind { background: #fef3c7; color: #d97706; }
        
        /* 话术卡片 */
        .script-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 16px;
        }
        
        .script-card {
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: 12px;
            padding: 20px;
            transition: all 0.2s;
            cursor: pointer;
        }
        
        .script-card:hover {
            border-color: var(--primary);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
        }
        
        .script-card-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }
        
        .script-card-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--primary-light);
            color: var(--primary);
        }
        
        .script-card-title {
            font-weight: 600;
            color: var(--gray-800);
        }
        
        .script-card-content {
            font-size: 14px;
            color: var(--gray-600);
            line-height: 1.6;
            padding: 12px;
            background: var(--gray-50);
            border-radius: 8px;
        }
        
        .script-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 12px;
        }
        
        .script-style {
            display: flex;
            gap: 8px;
        }
        
        .style-tag {
            padding: 4px 8px;
            background: var(--gray-100);
            border-radius: 4px;
            font-size: 11px;
            color: var(--gray-600);
        }
        
        .style-tag.active {
            background: var(--primary);
            color: white;
        }
        
        /* 日历/排班 */
        .schedule-calendar {
            background: white;
            border-radius: 16px;
            padding: 24px;
        }
        
        .calendar-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        
        .calendar-nav {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .calendar-nav button {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            border: 1px solid var(--gray-200);
            background: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        
        .calendar-nav button:hover {
            background: var(--gray-50);
            border-color: var(--gray-300);
        }
        
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 8px;
        }
        
        .calendar-weekday {
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            color: var(--gray-500);
            padding: 8px;
        }
        
        .calendar-day {
            aspect-ratio: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 14px;
            position: relative;
        }
        
        .calendar-day:hover {
            background: var(--gray-100);
        }
        
        .calendar-day.today {
            background: var(--primary);
            color: white;
        }
        
        .calendar-day.has-event::after {
            content: '';
            position: absolute;
            bottom: 6px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--success);
        }
        
        .calendar-day.today.has-event::after {
            background: white;
        }
        
        /* 角色权限 */
        .role-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 16px;
        }
        
        .role-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            border: 2px solid var(--gray-200);
            transition: all 0.2s;
            cursor: pointer;
        }
        
        .role-card:hover {
            border-color: var(--primary);
        }
        
        .role-card.active {
            border-color: var(--primary);
            background: var(--primary-light);
        }
        
        .role-avatar {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            margin: 0 auto 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .role-avatar.boss { background: linear-gradient(135deg, #f59e0b, #d97706); }
        .role-avatar.manager { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
        .role-avatar.stylist { background: linear-gradient(135deg, #10b981, #059669); }
        
        .role-avatar svg {
            width: 32px;
            height: 32px;
            color: white;
        }
        
        .role-name {
            font-weight: 600;
            color: var(--gray-800);
            margin-bottom: 4px;
        }
        
        .role-count {
            font-size: 13px;
            color: var(--gray-500);
        }
        
        /* 快捷操作 */
        .quick-actions {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 12px;
            margin-top: 20px;
        }
        
        .quick-action {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 16px;
            background: var(--gray-50);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .quick-action:hover {
            background: var(--primary-light);
        }
        
        .quick-action-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
            color: var(--primary);
        }
        
        .quick-action span {
            font-size: 13px;
            color: var(--gray-700);
        }
        
        /* 列表项 */
        .list-item {
display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px;
            background: white;
            border-radius: 12px;
            margin-bottom: 12px;
            transition: all 0.2s;
            cursor: pointer;
            border: 1px solid var(--gray-100);
        }
        
        .list-item:hover {
            border-color: var(--primary);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
        }
        
        .list-item-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: linear-gradient(135deg, #f59e0b, #d97706);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 16px;
        }
        
        .list-item-content {
            flex: 1;
        }
        
        .list-item-title {
            font-weight: 600;
            color: var(--gray-800);
            margin-bottom: 4px;
        }
        
        .list-item-meta {
            font-size: 13px;
            color: var(--gray-500);
        }
        
        /* 手机模拟器 */
        .phone-frame {
            width: 375px;
            height: 812px;
            background: var(--gray-900);
            border-radius: 50px;
            padding: 12px;
            margin: 0 auto;
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
        }
        
        .phone-screen {
            width: 100%;
            height: 100%;
            background: white;
            border-radius: 40px;
            overflow: hidden;
            position: relative;
        }
        
        .phone-notch {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 150px;
            height: 30px;
            background: var(--gray-900);
            border-radius: 0 0 20px 20px;
            z-index: 10;
        }
        
        .mobile-header {
            padding: 40px 20px 10px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white;
        }
        
        .mobile-header h3 {
            font-size: 20px;
            margin-bottom: 4px;
        }
        
        .mobile-header p {
            font-size: 13px;
            opacity: 0.9;
        }
        
        /* 分栏布局 */
        .split-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }
        
        /* 图表占位 */
        .chart-placeholder {
            height: 200px;
            background: linear-gradient(135deg, var(--gray-100), var(--gray-50));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gray-400);
        }
        
        /* Toast 提示 */
        .toast {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background: var(--gray-800);
            color: white;
            padding: 14px 24px;
            border-radius: 10px;
            font-size: 14px;
            opacity: 0;
            transition: all 0.3s ease;
            z-index: 1000;
        }
        
        .toast.show {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
        }
        
        /* 响应式 */
        @media (max-width: 1024px) {
            .sidebar {
                transform: translateX(-100%);
            }
            
            .sidebar.open {
                transform: translateX(0);
            }
            
            .main-content {
                margin-left: 0;
            }
            
            .split-layout {
                grid-template-columns: 1fr;
            }
        }
        
        /* 移动端头部 */
        .mobile-nav-toggle {
            display: none;
            width: 40px;
            height: 40px;
            border-radius: 8px;
            border: none;
            background: var(--gray-100);
            cursor: pointer;
        }
        
        @media (max-width: 1024px) {
            .mobile-nav-toggle {
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        
        /* AI助手悬浮球 */
        .ai-float-btn {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white;
            border: none;
            cursor: pointer;
            box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 99;
        }
        
        .ai-float-btn:hover {
            transform: scale(1.1);
        }
        
        .ai-float-btn svg {
            width: 28px;
            height: 28px;
        }
        
        /* 模态框 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 200;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .modal-overlay.show {
            opacity: 1;
            visibility: visible;
        }
        
        .modal {
            background: white;
            border-radius: 20px;
            padding: 30px;
            max-width: 500px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            transform: scale(0.9);
            transition: all 0.3s ease;
        }
        
        .modal-overlay.show .modal {
            transform: scale(1);
        }
        
        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        
        .modal-title {
            font-size: 20px;
            font-weight: 600;
        }
        
        .modal-close {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: none;
            background: var(--gray-100);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .modal-close:hover {
            background: var(--gray-200);
        }
        
        /* 表单 */
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            font-size: 14px;
            font-weight: 500;
            color: var(--gray-700);
            margin-bottom: 8px;
        }
        
        .form-input {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid var(--gray-300);
            border-radius: 10px;
            font-size: 14px;
            transition: all 0.2s;
        }
        
        .form-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        }
        
        .form-select {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid var(--gray-300);
            border-radius: 10px;
            font-size: 14px;
            background: white;
            cursor: pointer;
        }
        
        /* 预览面板 */
        .preview-section {
            display: grid;
            grid-template-columns: 1fr 400px;
            gap: 30px;
            align-items: start;
        }
        
        @media (max-width: 1200px) {
            .preview-section {
                grid-template-columns: 1fr;
            }
        }
        
        .preview-info {
            position: sticky;
            top: 100px;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 侧边栏 -->
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <div class="sidebar-logo">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
                        <path d="M2 17l10 5 10-5"/>
                        <path d="M2 12l10 5 10-5"/>
                    </svg>
                    <span>美业AI店长</span>
                </div>
                <div class="sidebar-subtitle">智能体版 V2.0</div>
            </div>
            
            <nav>
                <div class="nav-section">
                    <div class="nav-section-title">工作台</div>
                    <div class="nav-item active" data-page="dashboard" onclick="navigateTo('dashboard')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="3" y="3" width="7" height="7" rx="1"/>
                            <rect x="14" y="3" width="7" height="7" rx="1"/>
                            <rect x="3" y="14" width="7" height="7" rx="1"/>
                            <rect x="14" y="14" width="7" height="7" rx="1"/>
                        </svg>
                        <span>首页概览</span>
                    </div>
                </div>
                
                <div class="nav-section">
                    <div class="nav-section-title">核心功能</div>
                    <div class="nav-item" data-page="customers" onclick="navigateTo('customers')">
                        <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>
                        <span class="badge">MVP</span>
                    </div>
                    <div class="nav-item" data-page="ai-followup" onclick="navigateTo('ai-followup')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                            <circle cx="12" cy="10" r="1"/>
                            <circle cx="8" cy="10" r="1"/>
                            <circle cx="16" cy="10" r="1"/>
                        </svg>
                        <span>AI跟进</span>
                        <span class="badge">MVP</span>
                    </div>
                    <div class="nav-item" data-page="ai-scripts" onclick="navigateTo('ai-scripts')">
                        <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"/>
                            <polyline points="10 9 9 9 8 9"/>
                        </svg>
                        <span>AI话术</span>
                        <span class="badge">MVP</span>
                    </div>
                    <div class="nav-item" data-page="schedule" onclick="navigateTo('schedule')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                            <line x1="16" y1="2" x2="16" y2="6"/>
                            <line x1="8" y1="2" x2="8" y2="6"/>
                            <line x1="3" y1="10" x2="21" y2="10"/>
                        </svg>
                        <span>预约排班</span>
                        <span class="badge">MVP</span>
                    </div>
                </div>
                
                <div class="nav-section">
                    <div class="nav-section-title">管理功能</div>
                    <div class="nav-item" data-page="security" onclick="navigateTo('security')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                        </svg>
                        <span>权限安全</span>
                        <span class="badge">MVP</span>
                    </div>
                    <div class="nav-item" data-page="shop" onclick="navigateTo('shop')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                            <polyline points="9 22 9 12 15 12 15 22"/>
                        </svg>
                        <span>店铺管理</span>
                        <span class="badge">MVP</span>
                    </div>
                    <div class="nav-item" data-page="system" onclick="navigateTo('system')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <circle cx="12" cy="12" r="3"/>
                            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
                        </svg>
                        <span>系统管理</span>
                        <span class="badge">MVP</span>
                    </div>
                </div>
                
                <div class="nav-section">
                    <div class="nav-section-title">扩展功能</div>
                    <div class="nav-item" data-page="commission" onclick="navigateTo('commission')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <line x1="12" y1="1" x2="12" y2="23"/>
                            <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
                        </svg>
                        <span>提成工资</span>
                        <span class="badge out">范围外</span>
                    </div>
                    <div class="nav-item" data-page="analysis" onclick="navigateTo('analysis')">
                        <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>
                        <span class="badge out">范围外</span>
                    </div>
                </div>
            </nav>
        </aside>
        
        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 顶部导航 -->
            <header class="topbar">
                <div class="topbar-left">
                    <button class="mobile-nav-toggle" onclick="toggleSidebar()">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <line x1="3" y1="12" x2="21" y2="12"/>
                            <line x1="3" y1="6" x2="21" y2="6"/>
                            <line x1="3" y1="18" x2="21" y2="18"/>
                        </svg>
                    </button>
                    <div class="breadcrumb">
                        <a href="#" onclick="navigateTo('dashboard'); return false;">首页</a>
                        <span>/</span>
                        <span id="current-page-name">概览</span>
                    </div>
                </div>
                <div class="topbar-right">
                    <div class="search-box">
                        <svg width="18" height="18" 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="搜索客户、功能...">
                    </div>
                    <div class="user-info">
                        <div class="user-avatar">李</div>
                        <div class="user-details">
                            <div class="name">李店长</div>
                            <div class="role">完美门店·美容店</div>
                        </div>
                    </div>
                </div>
            </header>
            
            <!-- 页面内容 -->
            <div class="page-content">
                <!-- 首页概览 -->
                <div class="page active" id="page-dashboard">
                    <div class="stats-grid">
                        <div class="stat-card" onclick="navigateTo('customers')">
                            <div class="stat-header">
                                <div class="stat-icon primary">
                                    <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>
                                <span class="stat-trend up">+12</span>
                            </div>
                            <div class="stat-value">386</div>
                            <div class="stat-label">客户总数</div>
                        </div>
                        <div class="stat-card" onclick="navigateTo('ai-followup')">
                            <div class="stat-header">
                                <div class="stat-icon warning">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                                    </svg>
                                </div>
                                <span class="stat-trend up">今日</span>
                            </div>
                            <div class="stat-value">8</div>
                            <div class="stat-label">待跟进客户</div>
                        </div>
                        <div class="stat-card" onclick="navigateTo('schedule')">
                            <div class="stat-header">
                                <div class="stat-icon success">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                                        <line x1="16" y1="2" x2="16" y2="6"/>
                                        <line x1="8" y1="2" x2="8" y2="6"/>
                                    </svg>
                                </div>
                                <span class="stat-trend up">本周</span>
                            </div>
                            <div class="stat-value">23</div>
                            <div class="stat-label">预约人数</div>
                        </div>
                        <div class="stat-card" onclick="navigateTo('commission')">
                            <div class="stat-header">
                                <div class="stat-icon danger">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <line x1="12" y1="1" x2="12" y2="23"/>
                                        <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
                                    </svg>
                                </div>
                                <span class="stat-trend up">本月</span>
                            </div>
                            <div class="stat-value">¥86,420</div>
                            <div class="stat-label">本月业绩</div>
                        </div>
                    </div>
                    
                    <div class="split-layout">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">AI智能提醒</h3>
                                <span class="priority-badge mvp">AI驱动</span>
                            </div>
                            <div class="ai-list">
                                <div class="ai-item">
                                    <div class="ai-item-avatar">王</div>
                                    <div class="ai-item-info">
                                        <div class="ai-item-name">王美丽 女士</div>
                                        <div class="ai-item-desc">护肤疗程第3天回访 · 建议今日跟进</div>
                                    </div>
                                    <span class="ai-item-tag urgent">紧急</span>
                                </div>
                                <div class="ai-item">
                                    <div class="ai-item-avatar">张</div>
                                    <div class="ai-item-info">
                                        <div class="ai-item-name">张晓婷 女士</div>
                                        <div class="ai-item-desc">生日关怀 · 明天生日，提前祝福</div>
                                    </div>
                                    <span class="ai-item-tag remind">提醒</span>
                                </div>
                                <div class="ai-item">
                                    <div class="ai-item-avatar">陈</div>
                                    <div class="ai-item-info">
                                        <div class="ai-item-name">陈雅琴 女士</div>
                                        <div class="ai-item-desc">沉睡客户唤醒 · 超过30天未到店</div>
                                    </div>
                                    <span class="ai-item-tag normal">关注</span>
                                </div>
                                <div class="ai-item">
                                    <div class="ai-item-avatar">李</div>
                                    <div class="ai-item-info">
                                        <div class="ai-item-name">李小姐 女士</div>
                                        <div class="ai-item-desc">新客待添加 · 分配超过24小时未添加</div>
                                    </div>
                                    <span class="ai-item-tag urgent">预警</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">快捷操作</h3>
                            </div>
                            <div class="quick-actions">
                                <div class="quick-action" onclick="navigateTo('customers')">
                                    <div class="quick-action-icon">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                                            <circle cx="8.5" cy="7" r="4"/>
                                            <line x1="20" y1="8" x2="20" y2="14"/>
                                            <line x1="23" y1="11" x2="17" y2="11"/>
                                        </svg>
                                    </div>
                                    <span>添加客户</span>
                                </div>
                                <div class="quick-action" onclick="navigateTo('schedule')">
                                    <div class="quick-action-icon">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                                            <line x1="16" y1="2" x2="16" y2="6"/>
                                            <line x1="8" y1="2" x2="8" y2="6"/>
                                            <line x1="3" y1="10" x2="21" y2="10"/>
                                        </svg>
                                    </div>
                                    <span>新建预约</span>
                                </div>
                                <div class="quick-action" onclick="navigateTo('ai-scripts')">
                                    <div class="quick-action-icon">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                                        </svg>
                                    </div>
                                    <span>AI话术</span>
                                </div>
                                <div class="quick-action" onclick="navigateTo('ai-followup')">
                                    <div class="quick-action-icon">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <polyline points="9 11 12 14 22 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>
                                    <span>跟进记录</span>
                                </div>
                            </div>
                            
                            <div style="margin-top: 24px;">
                                <h4 style="font-size: 14px; color: var(--gray-600); margin-bottom: 12px;">功能模块</h4>
                                <div class="module-grid" style="grid-template-columns: 1fr 1fr;">
                                    <div class="module-card" onclick="navigateTo('customers')">
                                        <div class="module-icon crm">
                                            <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>
                                        <h3>客户管理</h3>
                                        <p>CRM + AI智能</p>
                                    </div>
                                    <div class="module-card" onclick="navigateTo('ai-followup')">
                                        <div class="module-icon ai">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                                            </svg>
                                        </div>
                                        <h3>AI跟进</h3>
                                        <p>智能客户跟进</p>
                                    </div>
                                    <div class="module-card" onclick="navigateTo('ai-scripts')">
                                        <div class="module-icon ai">
                                            <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"/>
                                            </svg>
                                        </div>
                                        <h3>AI话术</h3>
                                        <p>智能话术库</p>
                                    </div>
                                    <div class="module-card" onclick="navigateTo('schedule')">
                                        <div class="module-icon schedule">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                                                <line x1="16" y1="2" x2="16" y2="6"/>
                                                <line x1="8" y1="2" x2="8" y2="6"/>
                                            </svg>
                                        </div>
                                        <h3>预约排班</h3>
                                        <p>智能预约管理</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 客户管理 -->
                <div class="page" id="page-customers">
                    <div class="stats-grid" style="grid-template-columns: repeat(5, 1fr);">
                        <div class="stat-card" style="padding: 16px;">
                            <div class="stat-value" style="font-size: 24px;">386</div>
                            <div class="stat-label">全部客户</div>
                        </div>
                        <div class="stat-card" style="padding: 16px;">
                            <div class="stat-value" style="font-size: 24px; color: #1d4ed8;">12</div>
                            <div class="stat-label">新客</div>
                        </div>
                        <div class="stat-card" style="padding: 16px;">
                            <div class="stat-value" style="font-size: 24px; color: #059669;">245</div>
                            <div class="stat-label">服务中</div>
                        </div>
                        <div class="stat-card" style="padding: 16px;">
                            <div class="stat-value" style="font-size: 24px; color: #6b7280;">89</div>
                            <div class="stat-label">沉睡</div>
                        </div>
                        <div class="stat-card" style="padding: 16px;">
                            <div class="stat-value" style="font-size: 24px; color: #dc2626;">40</div>
                            <div class="stat-label">流失</div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="tabs">
                            <button class="tab active">全部客户</button>
                            <button class="tab">公海池</button>
                            <button class="tab">我的客户</button>
                            <button class="tab">待添加</button>
                        </div>
                        
                        <div class="card-header">
                            <div style="display: flex; gap: 12px;">
                                <button class="btn btn-primary" onclick="showToast('新建客户')">
                                    <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>
                                <button class="btn btn-outline">
                                    <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>
                                    Excel导入
                                </button>
                            </div>
                            <button class="btn btn-outline btn-sm">筛选</button>
                        </div>
                        
                        <div class="table-container">
                            <table>
                                <thead>
                                    <tr>
                                        <th>客户信息</th>
                                        <th>联系方式</th>
                                        <th>客户等级</th>
                                        <th>归属美容师</th>
                                        <th>最近到店</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr onclick="showToast('查看客户详情')">
                                        <td>
                                            <div style="display: flex; align-items: center; gap: 12px;">
                                                <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #d97706); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600;">王</div>
                                                <div>
                                                    <div style="font-weight: 600;">王美丽</div>
                                                    <div style="font-size: 12px; color: var(--gray-500);">女 · 32岁</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>138****8888</td>
                                        <td><span style="color: #dc2626; font-weight: 600;">A</span> 级客户</td>
                                        <td>李美容师</td>
                                        <td>2026-04-20</td>
                                        <td><span class="status-badge active">服务中</span></td>
                                        <td>
                                            <div class="action-btns">
                                                <button class="action-btn" title="跟进">
                                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                                                    </svg>
                                                </button>
                                                <button class="action-btn" title="更多">
                                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                        <circle cx="12" cy="12" r="1"/>
                                                        <circle cx="12" cy="5" r="1"/>
                                                        <circle cx="12" cy="19" r="1"/>
                                                    </svg>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr onclick="showToast('查看客户详情')">
                                        <td>
                                            <div style="display: flex; align-items: center; gap: 12px;">
                                                <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #10b981, #059669); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600;">张</div>
                                                <div>
                                                    <div style="font-weight: 600;">张晓婷</div>
                                                    <div style="font-size: 12px; color: var(--gray-500);">女 · 28岁</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>139****6666</td>
                                        <td><span style="color: #f59e0b; font-weight: 600;">B</span> 级客户</td>
                                        <td>王美容师</td>
                                        <td>2026-04-18</td>
                                        <td><span class="status-badge waiting">待跟进</span></td>
                                        <td>
                                            <div class="action-btns">
                                                <button class="action-btn" title="跟进">
                                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                                                    </svg>
                                                </button>
                                                <button class="action-btn" title="更多">
                                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                        <circle cx="12" cy="12" r="1"/>
                                                        <circle cx="12" cy="5" r="1"/>
                                                        <circle cx="12" cy="19" r="1"/>
                                                    </svg>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr onclick="showToast('查看客户详情')">
                                        <td>
                                            <div style="display: flex; align-items: center; gap: 12px;">
                                                <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #8b5cf6); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600;">陈</div>
                                                <div>
                                                    <div style="font-weight: 600;">陈雅琴</div>
                                                    <div style="font-size: 12px; color: var(--gray-500);">女 · 45岁</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>136****2222</td>
                                        <td><span style="color: #6b7280; font-weight: 600;">C</span> 级客户</td>
                                        <td>李美容师</td>
                                        <td>2026-03-15</td>
                                        <td><span class="status-badge sleeping">沉睡</span></td>
                                        <td>
                                            <div class="action-btns">
                                                <button class="action-btn" title="跟进">
                                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                                                    </svg>
                                                </button>
                                                <button class="action-btn" title="更多">
                                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                        <circle cx="12" cy="12" r="1"/>
                                                        <circle cx="12" cy="5" r="1"/>
                                                        <circle cx="12" cy="19" r="1"/>
                                                    </svg>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr onclick="showToast('查看客户详情')">
                                        <td>
                                            <div style="display: flex; align-items: center; gap: 12px;">
                                                <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #ec4899, #db2777); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600;">林</div>
                                                <div>
                                                    <div style="font-weight: 600;">林小姐</div>
                                                    <div style="font-size: 12px; color: var(--gray-500);">女 · 26岁</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>158****1111</td>
                                        <td><span style="color: #dc2626; font-weight: 600;">A</span> 级客户</td>
                                        <td>未分配</td>
                                        <td>2026-04-22</td>
                                        <td><span class="status-badge new">新客</span></td>
                                        <td>
                                            <div class="action-btns">
                                                <button class="action-btn" title="分配" onclick="event.stopPropagation(); showToast('分配美容师')">
                                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                        <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                                                        <circle cx="8.5" cy="7" r="4"/>
                                                        <line x1="20" y1="8" x2="20" y2="14"/>
                                                        <line x1="23" y1="11" x2="17" y2="11"/>
                                                    </svg>
                                                </button>
                                                <button class="action-btn" title="更多">
                                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                        <circle cx="12" cy="12" r="1"/>
                                                        <circle cx="12" cy="5" r="1"/>
                                                        <circle cx="12" cy="19" r="1"/>
                                                    </svg>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- AI跟进 -->
                <div class="page" id="page-ai-followup">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">AI智能跟进</h3>
                            <span class="priority-badge mvp">AI驱动</span>
                        </div>
                        
                        <div class="tabs">
                            <button class="tab active">今日待办</button>
                            <button class="tab">跟进记录</button>
                            <button class="tab">客户画像</button>
                            <button class="tab">自动提醒</button>
                        </div>
                        
                        <div class="ai-list">
                            <div class="ai-item">
                                <div class="ai-item-avatar">王</div>
                                <div class="ai-item-info">
                                    <div class="ai-item-name">王美丽 女士 · A级客户</div>
                                    <div class="ai-item-desc">护理后3天回访 · 上次服务：深层清洁 | 建议询问皮肤状态</div>
                                </div>
                                <span class="ai-item-tag urgent">紧急</span>
                            </div>
                            <div class="ai-item">
                                <div class="ai-item-avatar">张</div>
                                <div class="ai-item-info">
                                    <div class="ai-item-name">张晓婷 女士 · B级客户</div>
                                    <div class="ai-item-desc">生日关怀 · 明天(4月26日)是客户生日</div>
                                </div>
                                <span class="ai-item-tag remind">提醒</span>
                            </div>
                            <div class="ai-item">
                                <div class="ai-item-avatar">陈</div>
                                <div class="ai-item-info">
                                    <div class="ai-item-name">陈雅琴 女士 · C级客户</div>
                                    <div class="ai-item-desc">沉睡唤醒 · 已35天未到店，建议发送优惠活动</div>
                                </div>
                                <span class="ai-item-tag normal">关注</span>
                            </div>
                            <div class="ai-item">
                                <div class="ai-item-avatar">李</div>
<div class="ai-item-info">
                                    <div class="ai-item-name">李小姐 女士 · 新客</div>
                                    <div class="ai-item-desc">新客首次沟通 · 分配超过24小时未添加微信</div>
                                </div>
                                <span class="ai-item-tag urgent">预警</span>
                            </div>
                            <div class="ai-item">
                                <div class="ai-item-avatar">周</div>
                                <div class="ai-item-info">
                                    <div class="ai-item-name">周婷 女士 · 高价值</div>
                                    <div class="ai-item-desc">周期到店提醒 · 距上次服务已14天，建议预约护理</div>
                                </div>
                                <span class="ai-item-tag remind">提醒</span>
                            </div>
                        </div>
                        
                        <div style="margin-top: 24px; padding: 16px; background: var(--gray-50); border-radius: 12px;">
                            <h4 style="font-size: 14px; color: var(--gray-700); margin-bottom: 12px;">AI推荐话术</h4>
                            <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                                <button class="btn btn-primary btn-sm" onclick="showToast('复制话术成功')">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <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 btn-outline btn-sm" onclick="showToast('复制话术成功')">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <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 btn-outline btn-sm" onclick="showToast('复制话术成功')">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <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 btn-outline btn-sm" onclick="showToast('复制话术成功')">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <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>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- AI话术 -->
                <div class="page" id="page-ai-scripts">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">AI话术库</h3>
                            <span class="priority-badge mvp">MVP</span>
                        </div>
                        
                        <div class="script-cards">
                            <div class="script-card" onclick="showToast('查看话术详情')">
                                <div class="script-card-header">
                                    <div class="script-card-icon">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                                        </svg>
                                    </div>
                                    <div class="script-card-title">欢迎话术</div>
                                </div>
                                <div class="script-card-content">
                                    "亲爱的小主~您好呀！我是您的专属美容师[姓名]，感谢您选择[门店名称]，期待为您提供最贴心的服务！请问今天方便打扰几分钟吗？"
                                </div>
                                <div class="script-card-footer">
                                    <div class="script-style">
                                        <span class="style-tag active">温柔</span>
                                        <span class="style-tag">专业</span>
                                        <span class="style-tag">亲切</span>
                                    </div>
                                    <button class="btn btn-primary btn-sm" onclick="event.stopPropagation(); showToast('已复制到剪贴板')">复制</button>
                                </div>
                            </div>
                            
                            <div class="script-card" onclick="showToast('查看话术详情')">
                                <div class="script-card-header">
                                    <div class="script-card-icon">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
                                        </svg>
                                    </div>
                                    <div class="script-card-title">护理回访</div>
                                </div>
                                <div class="script-card-content">
                                    "[客户名]姐~我是[美容师]，昨天给您做的[项目名]效果怎么样呀？皮肤有没有什么不适感？记得早晚做好补水保湿哦，有什么问题随时联系我~"
                                </div>
                                <div class="script-card-footer">
                                    <div class="script-style">
                                        <span class="style-tag">温柔</span>
                                        <span class="style-tag active">专业</span>
                                        <span class="style-tag">亲切</span>
                                    </div>
                                    <button class="btn btn-primary btn-sm" onclick="event.stopPropagation(); showToast('已复制到剪贴板')">复制</button>
                                </div>
                            </div>
                            
                            <div class="script-card" onclick="showToast('查看话术详情')">
                                <div class="script-card-header">
                                    <div class="script-card-icon">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                                        </svg>
                                    </div>
                                    <div class="script-card-title">生日祝福</div>
                                </div>
                                <div class="script-card-content">
                                    "[客户名]姐~祝您生日快乐呀！🎂 感谢您一直以来的支持和信任，新的一岁，希望您越来越美！我们为您准备了专属生日礼包，随时来店领取哦~"
                                </div>
                                <div class="script-card-footer">
                                    <div class="script-style">
                                        <span class="style-tag">温柔</span>
                                        <span class="style-tag">专业</span>
                                        <span class="style-tag active">亲切</span>
                                    </div>
                                    <button class="btn btn-primary btn-sm" onclick="event.stopPropagation(); showToast('已复制到剪贴板')">复制</button>
                                </div>
                            </div>
                            
                            <div class="script-card" onclick="showToast('查看话术详情')">
                                <div class="script-card-header">
                                    <div class="script-card-icon">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <circle cx="12" cy="12" r="10"/>
                                            <polyline points="12 6 12 12 16 14"/>
                                        </svg>
                                    </div>
                                    <div class="script-card-title">沉睡唤醒</div>
                                </div>
                                <div class="script-card-content">
                                    "[客户名]姐~好久不见呀！最近工作忙吗？我们店刚引进了[新项目]，很多老客户都在做，效果特别好。想念您的皮肤了吗？给您预留了VIP时段，随时约起来~"
                                </div>
                                <div class="script-card-footer">
                                    <div class="script-style">
                                        <span class="style-tag active">温柔</span>
                                        <span class="style-tag">专业</span>
                                        <span class="style-tag">亲切</span>
                                    </div>
                                    <button class="btn btn-primary btn-sm" onclick="event.stopPropagation(); showToast('已复制到剪贴板')">复制</button>
                                </div>
                            </div>
                            
                            <div class="script-card" onclick="showToast('查看话术详情')">
                                <div class="script-card-header">
                                    <div class="script-card-icon">
                                        <svg width="20" height="20" 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"/>
                                        </svg>
                                    </div>
                                    <div class="script-card-title">项目介绍</div>
                                </div>
                                <div class="script-card-content">
                                    "我们店目前最受欢迎的是[热门项目]，专门针对[肌肤问题]，很多和您肤质相似的客户做了之后反馈都特别好。要不要给您详细介绍一下？"
                                </div>
                                <div class="script-card-footer">
                                    <div class="script-style">
                                        <span class="style-tag">温柔</span>
                                        <span class="style-tag active">专业</span>
                                        <span class="style-tag">亲切</span>
                                    </div>
                                    <button class="btn btn-primary btn-sm" onclick="event.stopPropagation(); showToast('已复制到剪贴板')">复制</button>
                                </div>
                            </div>
                            
                            <div class="script-card" onclick="showToast('查看话术详情')">
                                <div class="script-card-header">
                                    <div class="script-card-icon">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
                                        </svg>
                                    </div>
                                    <div class="script-card-title">邀约到店</div>
                                </div>
                                <div class="script-card-content">
                                    "[客户名]姐~您上次做的[项目名]效果保持得很好哦！建议您[时间]左右过来做下一次护理，这样效果会更持久。我帮您预约[时间]可以吗？"
                                </div>
                                <div class="script-card-footer">
                                    <div class="script-style">
                                        <span class="style-tag active">温柔</span>
                                        <span class="style-tag">专业</span>
                                        <span class="style-tag">亲切</span>
                                    </div>
                                    <button class="btn btn-primary btn-sm" onclick="event.stopPropagation(); showToast('已复制到剪贴板')">复制</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 预约排班 -->
                <div class="page" id="page-schedule">
                    <div class="split-layout">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">预约日历</h3>
                                <div style="display: flex; gap: 8px;">
                                    <button class="btn btn-primary" onclick="showToast('新建预约')">
                                        <svg width="18" height="18" 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="schedule-calendar">
                                <div class="calendar-header">
                                    <div class="calendar-nav">
                                        <button><</button>
                                        <span style="font-size: 16px; font-weight: 600;">2026年4月</span>
                                        <button>></button>
                                    </div>
                                    <div class="tabs" style="margin: 0; padding: 0; background: transparent;">
                                        <button class="tab active" style="padding: 8px 16px;">月</button>
                                        <button class="tab" style="padding: 8px 16px;">周</button>
                                        <button class="tab" style="padding: 8px 16px;">日</button>
                                    </div>
                                </div>
                                
                                <div class="calendar-grid">
                                    <div class="calendar-weekday">周日</div>
                                    <div class="calendar-weekday">周一</div>
                                    <div class="calendar-weekday">周二</div>
                                    <div class="calendar-weekday">周三</div>
                                    <div class="calendar-weekday">周四</div>
                                    <div class="calendar-weekday">周五</div>
                                    <div class="calendar-weekday">周六</div>
                                    
                                    <div class="calendar-day">29</div>
                                    <div class="calendar-day">30</div>
                                    <div class="calendar-day">31</div>
                                    <div class="calendar-day">1</div>
                                    <div class="calendar-day has-event">2</div>
                                    <div class="calendar-day has-event">3</div>
                                    <div class="calendar-day has-event">4</div>
                                    
                                    <div class="calendar-day has-event">5</div>
                                    <div class="calendar-day has-event">6</div>
                                    <div class="calendar-day">7</div>
                                    <div class="calendar-day has-event">8</div>
                                    <div class="calendar-day has-event">9</div>
                                    <div class="calendar-day has-event">10</div>
                                    <div class="calendar-day has-event">11</div>
                                    
                                    <div class="calendar-day has-event">12</div>
                                    <div class="calendar-day has-event">13</div>
                                    <div class="calendar-day has-event">14</div>
                                    <div class="calendar-day has-event">15</div>
                                    <div class="calendar-day has-event">16</div>
                                    <div class="calendar-day has-event">17</div>
                                    <div class="calendar-day has-event">18</div>
                                    
                                    <div class="calendar-day has-event">19</div>
                                    <div class="calendar-day has-event">20</div>
                                    <div class="calendar-day has-event">21</div>
                                    <div class="calendar-day has-event">22</div>
                                    <div class="calendar-day has-event">23</div>
                                    <div class="calendar-day has-event">24</div>
                                    <div class="calendar-day has-event">25</div>
                                    
                                    <div class="calendar-day today has-event">26</div>
                                    <div class="calendar-day">27</div>
                                    <div class="calendar-day">28</div>
                                    <div class="calendar-day">29</div>
                                    <div class="calendar-day">30</div>
                                    <div class="calendar-day">1</div>
                                    <div class="calendar-day">2</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">今日预约</h3>
                                <span style="font-size: 14px; color: var(--gray-500);">4月25日 周六</span>
                            </div>
                            
                            <div class="ai-list">
                                <div class="ai-item" style="background: white; border: 1px solid var(--gray-200);">
                                    <div style="width: 48px; height: 48px; border-radius: 10px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 600;">10:00</div>
                                    <div class="ai-item-info">
                                        <div class="ai-item-name">王美丽 女士</div>
                                        <div class="ai-item-desc">深层清洁 · 李美容师</div>
                                    </div>
                                    <span class="status-badge active">已确认</span>
                                </div>
                                <div class="ai-item" style="background: white; border: 1px solid var(--gray-200);">
                                    <div style="width: 48px; height: 48px; border-radius: 10px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 600;">11:30</div>
                                    <div class="ai-item-info">
                                        <div class="ai-item-name">张晓婷 女士</div>
                                        <div class="ai-item-desc">面部补水 · 王美容师</div>
                                    </div>
                                    <span class="status-badge waiting">待确认</span>
                                </div>
                                <div class="ai-item" style="background: white; border: 1px solid var(--gray-200);">
                                    <div style="width: 48px; height: 48px; border-radius: 10px; background: #fef3c7; color: #d97706; display: flex; align-items: center; justify-content: center; font-weight: 600;">14:00</div>
                                    <div class="ai-item-info">
                                        <div class="ai-item-name">陈雅琴 女士</div>
                                        <div class="ai-item-desc">抗衰护理 · 李美容师</div>
                                    </div>
                                    <span class="status-badge active">已确认</span>
                                </div>
                                <div class="ai-item" style="background: white; border: 1px solid var(--gray-200);">
                                    <div style="width: 48px; height: 48px; border-radius: 10px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 600;">15:30</div>
                                    <div class="ai-item-info">
                                        <div class="ai-item-name">周婷 女士</div>
                                        <div class="ai-item-desc">眼部护理 · 王美容师</div>
                                    </div>
                                    <span class="status-badge active">已确认</span>
                                </div>
                                <div class="ai-item" style="background: white; border: 1px solid var(--gray-200);">
                                    <div style="width: 48px; height: 48px; border-radius: 10px; background: #fee2e2; color: #dc2626; display: flex; align-items: center; justify-content: center; font-weight: 600;">17:00</div>
                                    <div class="ai-item-info">
                                        <div class="ai-item-name">林小姐 女士</div>
                                        <div class="ai-item-desc">新客体验 · 待分配</div>
                                    </div>
                                    <span class="status-badge new">新客</span>
                                </div>
                            </div>
                            
                            <div style="margin-top: 24px;">
                                <h4 style="font-size: 14px; color: var(--gray-700); margin-bottom: 12px;">美容师排班</h4>
                                <div style="display: flex; gap: 12px;">
                                    <div style="flex: 1; padding: 12px; background: var(--gray-50); border-radius: 10px; text-align: center;">
                                        <div style="font-weight: 600; color: var(--gray-800);">李美容师</div>
                                        <div style="font-size: 12px; color: var(--gray-500); margin-top: 4px;">10:00-18:00</div>
                                        <div style="font-size: 11px; color: var(--primary); margin-top: 4px;">今日已约 3 位</div>
                                    </div>
                                    <div style="flex: 1; padding: 12px; background: var(--gray-50); border-radius: 10px; text-align: center;">
                                        <div style="font-weight: 600; color: var(--gray-800);">王美容师</div>
                                        <div style="font-size: 12px; color: var(--gray-500); margin-top: 4px;">09:00-17:00</div>
                                        <div style="font-size: 11px; color: var(--primary); margin-top: 4px;">今日已约 2 位</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 权限安全 -->
                <div class="page" id="page-security">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">角色权限管理</h3>
                            <span class="priority-badge mvp">MVP</span>
                        </div>
                        
                        <div class="role-grid">
                            <div class="role-card active">
                                <div class="role-avatar boss">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
                                        <path d="M2 17l10 5 10-5"/>
                                        <path d="M2 12l10 5 10-5"/>
                                    </svg>
                                </div>
                                <div class="role-name">老板</div>
                                <div class="role-count">1 人</div>
                            </div>
                            <div class="role-card">
                                <div class="role-avatar manager">
                                    <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="role-name">店长</div>
                                <div class="role-count">1 人</div>
                            </div>
                            <div class="role-card">
                                <div class="role-avatar stylist">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <circle cx="12" cy="8" r="5"/>
                                        <path d="M20 21a8 8 0 1 0-16 0"/>
                                    </svg>
                                </div>
                                <div class="role-name">美容师</div>
                                <div class="role-count">3 人</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">安全设置</h3>
                        </div>
                        
                        <div style="display: grid; gap: 16px;">
                            <div class="list-item" style="cursor: default;">
                                <div style="width: 40px; height: 40px; border-radius: 10px; background: var(--primary-light); display: flex; align-items: center; justify-content: center;">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2">
                                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                                    </svg>
                                </div>
                                <div class="list-item-content">
                                    <div class="list-item-title">数据脱敏</div>
                                    <div class="list-item-meta">客户电话等隐私信息脱敏展示</div>
                                </div>
                                <span class="status-badge active">已开启</span>
                            </div>
                            
                            <div class="list-item" style="cursor: default;">
                                <div style="width: 40px; height: 40px; border-radius: 10px; background: #d1fae5; display: flex; align-items: center; justify-content: center;">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#059669" 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"/>
                                    </svg>
                                </div>
                                <div class="list-item-content">
                                    <div class="list-item-title">操作日志</div>
                                    <div class="list-item-meta">所有操作全程留痕，可追溯</div>
                                </div>
                                <span class="status-badge active">已开启</span>
                            </div>
                            
                            <div class="list-item" style="cursor: default;">
                                <div style="width: 40px; height: 40px; border-radius: 10px; background: #fef3c7; display: flex; align-items: center; justify-content: center;">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#d97706" 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>
                                </div>
                                <div class="list-item-content">
                                    <div class="list-item-title">数据备份</div>
                                    <div class="list-item-meta">自动备份，云端存储</div>
                                </div>
                                <span class="status-badge active">已开启</span>
                            </div>
                            
                            <div class="list-item" style="cursor: default;">
                                <div style="width: 40px; height: 40px; border-radius: 10px; background: #dbeafe; display: flex; align-items: center; justify-content: center;">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1d4ed8" stroke-width="2">
                                        <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
                                        <line x1="8" y1="21" x2="16" y2="21"/>
                                        <line x1="12" y1="17" x2="12" y2="21"/>
                                    </svg>
                                </div>
                                <div class="list-item-content">
                                    <div class="list-item-title">多端支持</div>
                                    <div class="list-item-meta">PC管理后台 · 微信小程序 · AI智能体对话端</div>
                                </div>
                                <span class="status-badge active">已开启</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 店铺管理 -->
                <div class="page" id="page-shop">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">店铺列表</h3>
                            <span class="priority-badge mvp">MVP</span>
                        </div>
                        
                        <div class="list-item" style="cursor: default;">
                            <div style="width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); display: flex; align-items: center; justify-content: center;">
                                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                                    <polyline points="9 22 9 12 15 12 15 22"/>
                                </svg>
                            </div>
                            <div class="list-item-content">
                                <div class="list-item-title">完美门店·美容店</div>
                                <div class="list-item-meta">地址：北京市朝阳区建国路88号 · 员工：4人</div>
                            </div>
                            <span class="status-badge active">营业中</span>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">员工管理</h3>
                            <button class="btn btn-primary" onclick="showToast('添加员工')">
                                <svg width="18" height="18" 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="table-container">
                            <table>
                                <thead>
                                    <tr>
                                        <th>员工信息</th>
                                        <th>角色</th>
                                        <th>联系电话</th>
                                        <th>入职时间</th>
                                        <th>客户数量</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <div style="display: flex; align-items: center; gap: 12px;">
                                                <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #d97706); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600;">李</div>
                                                <div>
                                                    <div style="font-weight: 600;">李美容师</div>
                                                    <div style="font-size: 12px; color: var(--gray-500);">员工编号：001</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>美容师</td>
                                        <td>138****8888</td>
                                        <td>2024-01-15</td>
                                        <td>156人</td>
                                        <td><span class="status-badge active">在职</span></td>
                                        <td>
                                            <div class="action-btns">
                                                <button class="action-btn" title="编辑">
                                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                        <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="action-btn" title="更多">
                                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                        <circle cx="12" cy="12" r="1"/>
                                                        <circle cx="12" cy="5" r="1"/>
                                                        <circle cx="12" cy="19" r="1"/>
                                                    </svg>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div style="display: flex; align-items: center; gap: 12px;">
                                                <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #10b981, #059669); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600;">王</div>
                                                <div>
                                                    <div style="font-weight: 600;">王美容师</div>
                                                    <div style="font-size: 12px; color: var(--gray-500);">员工编号：002</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>美容师</td>
                                        <td>139****6666</td>
                                        <td>2024-03-20</td>
                                        <td>98人</td>
                                        <td><span class="status-badge active">在职</span></td>
                                        <td>
                                            <div class="action-btns">
                                                <button class="action-btn" title="编辑">
                                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                        <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="action-btn" title="更多">
                                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                        <circle cx="12" cy="12" r="1"/>
                                                        <circle cx="12" cy="5" r="1"/>
                                                        <circle cx="12" cy="19" r="1"/>
                                                    </svg>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div style="display: flex; align-items: center; gap: 12px;">
                                                <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #8b5cf6); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600;">陈</div>
                                                <div>
                                                    <div style="font-weight: 600;">陈店长</div>
                                                    <div style="font-size: 12px; color: var(--gray-500);">员工编号：003</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>店长</td>
                                        <td>136****2222</td>
                                        <td>2023-06-01</td>
                                        <td>管理</td>
                                        <td><span class="status-badge active">在职</span></td>
                                        <td>
                                            <div class="action-btns">
                                                <button class="action-btn" title="编辑">
                                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                        <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="action-btn" title="更多">
                                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                        <circle cx="12" cy="12" r="1"/>
                                                        <circle cx="12" cy="5" r="1"/>
                                                        <circle cx="12" cy="19" r="1"/>
                                                    </svg>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- 系统管理 -->
                <div class="page" id="page-system">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">系统管理</h3>
                            <span class="priority-badge mvp">MVP</span>
                        </div>
                        
                        <div class="module-grid">
                            <div class="module-card">
                                <div class="module-icon system">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <line x1="3" y1="12" x2="21" y2="12"/>
                                        <line x1="3" y1="6" x2="21" y2="6"/>
                                        <line x1="3" y1="18" x2="21" y2="18"/>
                                    </svg>
                                </div>
                                <h3>菜单管理</h3>
                                <p>配置系统功能菜单</p>
                            </div>
                            <div class="module-card">
                                <div class="module-icon system">
                                    <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"/>
                                    </svg>
                                </div>
                                <h3>日志管理</h3>
                                <p>查看系统操作日志</p>
                            </div>
                            <div class="module-card">
                                <div class="module-icon security">
                                    <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>
                                </div>
                                <h3>角色管理</h3>
                                <p>管理用户角色和权限</p>
                            </div>
                            <div class="module-card">
                                <div class="module-icon shop">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                                    </svg>
                                </div>
                                <h3>租户管理</h3>
                                <p>多门店租户配置</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 提成工资 -->
                <div class="page" id="page-commission">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">提成与工资核算</h3>
                            <span class="priority-badge out">范围外</span>
                        </div>
                        <div style="padding: 40px; text-align: center; color: var(--gray-500);">
                            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" style="margin-bottom: 16px; opacity: 0.5;">
                                <line x1="12" y1="1" x2="12" y2="23"/>
                                <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
                            </svg>
                            <p>此功能模块在当前版本中为范围外功能</p>
                            <p style="font-size: 13px; margin-top: 8px;">计划在下一版本中实现</p>
                        </div>
                    </div>
                </div>
                
                <!-- 数据分析 -->
                <div class="page" id="page-analysis">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">整店AI数据分析</h3>
                            <span class="priority-badge out">范围外</span>
                        </div>
                        <div style="padding: 40px; text-align: center; color: var(--gray-500);">
                            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" style="margin-bottom: 16px; opacity: 0.5;">
                                <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>
                            <p>此功能模块在当前版本中为范围外功能</p>
                            <p style="font-size: 13px; margin-top: 8px;">包括数据看板、指标分析、经营报告等</p>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    
    <!-- AI助手悬浮按钮 -->
    <button class="ai-float-btn" onclick="showToast('AI助手功能开发中...')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
        </svg>
    </button>
    
    <!-- Toast提示 -->
    <div class="toast" id="toast"></div>
    
    <script>
        // 页面名称映射
        const pageNames = {
            'dashboard': '概览',
            'customers': '客户管理',
            'ai-followup': 'AI跟进',
            'ai-scripts': 'AI话术',
            'schedule': '预约排班',
            'security': '权限安全',
            'shop': '店铺管理',
            'system': '系统管理',
            'commission': '提成工资',
            'analysis': '数据分析'
        };
        
        // 导航函数
        function navigateTo(page) {
            // 隐藏所有页面
            document.querySelectorAll('.page').forEach(p => {
                p.classList.remove('active');
            });
            
            // 显示目标页面
            const targetPage = document.getElementById('page-' + page);
            if (targetPage) {
                targetPage.classList.add('active');
            }
            
            // 更新侧边栏导航状态
            document.querySelectorAll('.nav-item').forEach(item => {
                item.classList.remove('active');
                if (item.dataset.page === page) {
                    item.classList.add('active');
                }
            });
            
            // 更新面包屑
            document.getElementById('current-page-name').textContent = pageNames[page] || page;
            
            // 移动端关闭侧边栏
            document.getElementById('sidebar').classList.remove('open');
            
            // 滚动到顶部
            window.scrollTo(0, 0);
        }
        
        // 移动端侧边栏切换
        function toggleSidebar() {
            document.getElementById('sidebar').classList.toggle('open');
        }
        
        // Toast提示
        function showToast(message) {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.classList.add('show');
            
            setTimeout(() => {
                toast.classList.remove('show');
            }, 2000);
        }
        
        // Tab切换事件
        document.querySelectorAll('.tabs').forEach(tabContainer => {
            tabContainer.addEventListener('click', function(e) {
                if (e.target.classList.contains('tab')) {
                    this.querySelectorAll('.tab').forEach(tab => {
                        tab.classList.remove('active');
                    });
                    e.target.classList.add('active');
                }
            });
        });
        
        // 角色卡片点击
        document.querySelectorAll('.role-card').forEach(card => {
            card.addEventListener('click', function() {
                document.querySelectorAll('.role-card').forEach(c => {
                    c.classList.remove('active');
                });
                this.classList.add('active');
            });
        });
        
        // 风格切换
        document.querySelectorAll('.script-style').forEach(styleContainer => {
            styleContainer.addEventListener('click', function(e) {
                if (e.target.classList.contains('style-tag')) {
                    this.querySelectorAll('.style-tag').forEach(tag => {
                        tag.classList.remove('active');
                    });
                    e.target.classList.add('active');
                }
            });
        });
        
        // 点击模态框外部关闭
        document.querySelectorAll('.modal-overlay').forEach(overlay => {
            overlay.addEventListener('click', function(e) {
                if (e.target === this) {
                    this.classList.remove('show');
                }
            });
        });
    </script>
</body>
</html>