<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>TSP智能助手 - 综合管理平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.css" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/design-system.css') }}?v=1.0.0" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/style.css') }}?v=1.0.0" rel="stylesheet">
    <style>

        .sidebar {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        }

        .sidebar .nav-link {
            color: rgba(255,255,255,0.8);
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            margin: 0.25rem 0;
            transition: all 0.3s ease;
        }

        .sidebar .nav-link:hover,
        .sidebar .nav-link.active {
            color: white;
            background-color: rgba(255,255,255,0.1);
            transform: translateX(5px);
        }

        .sidebar .nav-link i {
            width: 20px;
            margin-right: 0.5rem;
        }

        .main-content {
            padding: 2rem;
        }

        .card {
            border: none;
            border-radius: 1rem;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }

        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 1rem;
            padding: 1.5rem;
            margin-bottom: 1rem;
        }

        .stat-card.success {
            background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
        }

        .stat-card.warning {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .stat-card.danger {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        .stat-card.info {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }

        .stat-label {
            font-size: 0.9rem;
            opacity: 0.9;
        }

        .chat-container {
            height: 500px;
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .chat-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1rem;
        }

        .chat-messages {
            height: 350px;
            overflow-y: auto;
            padding: 1rem;
            background-color: #f8f9fa;
        }

        .message {
            margin-bottom: 1rem;
            display: flex;
            align-items: flex-start;
        }

        .message.user {
            justify-content: flex-end;
        }

        .message.assistant {
            justify-content: flex-start;
        }

        .message-content {
            max-width: 70%;
            padding: 0.75rem 1rem;
            border-radius: 1rem;
            position: relative;
        }

        .message.user .message-content {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-bottom-right-radius: 0.25rem;
        }

        .message.assistant .message-content {
            background: white;
            color: #333;
            border: 1px solid #dee2e6;
            border-bottom-left-radius: 0.25rem;
        }

        .message-time {
            font-size: 0.75rem;
            opacity: 0.7;
            margin-top: 0.25rem;
        }

        .chat-input {
            padding: 1rem;
            background: white;
            border-top: 1px solid #dee2e6;
        }

        .alert-item {
            border-left: 4px solid;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
            padding: 1rem;
            background: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .alert-item.critical {
            border-left-color: var(--danger-color);
        }

        .alert-item.warning {
            border-left-color: var(--warning-color);
        }

        .alert-item.info {
            border-left-color: var(--info-color);
        }

        .health-indicator {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .health-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        .health-dot.excellent { background-color: #28a745; }
        .health-dot.good { background-color: #17a2b8; }
        .health-dot.fair { background-color: #ffc107; }
        .health-dot.poor { background-color: #fd7e14; }
        .health-dot.critical { background-color: #dc3545; }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }

        .agent-status {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 1rem;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        .agent-mode-toggle {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .agent-mode-toggle input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: #2196F3;
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }

        .knowledge-item {
            background: white;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-left: 4px solid var(--info-color);
        }

        .work-order-item {
            background: white;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-left: 4px solid var(--success-color);
        }

        .tab-content {
            min-height: 400px;
        }

        .loading-spinner {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
        }

        .empty-state {
            text-align: center;
            padding: 3rem;
            color: #6c757d;
        }

        .empty-state i {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        .btn-agent {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            color: white;
            border-radius: 0.5rem;
            padding: 0.5rem 1rem;
            transition: all 0.3s ease;
        }

        .btn-agent:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            color: white;
        }

        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            min-width: 300px;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .chart-container {
            position: relative;
            height: 300px;
            margin: 1rem 0;
        }

        .quick-actions {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
            flex-wrap: wrap;
        }

        .quick-action-btn {
            padding: 0.5rem 1rem;
            border: 1px solid var(--primary-color);
            background: white;
            color: var(--primary-color);
            border-radius: 0.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.875rem;
        }

        .quick-action-btn:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-2px);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <i class="fas fa-robot me-2"></i>
                <span data-i18n="nav-title">TSP智能助手</span>
            </a>
            <div class="navbar-nav ms-auto">
                <div class="btn-group me-3" role="group">
                    <button type="button" class="btn btn-outline-light btn-sm" id="lang-zh" onclick="switchLanguage('zh')">
                        <i class="fas fa-globe me-1"></i>中文
                    </button>
                    <button type="button" class="btn btn-outline-light btn-sm" id="lang-en" onclick="switchLanguage('en')">
                        <i class="fas fa-globe me-1"></i>English
                    </button>
                </div>
                <div class="health-indicator">
                    <div class="health-dot" id="health-dot"></div>
                    <span id="health-status" data-i18n="nav-health-checking">检查中...</span>
                </div>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-2 sidebar p-0">
                <div class="p-3">
                    <h5 class="text-white mb-3">
                        <i class="fas fa-tachometer-alt me-2"></i>
                        控制面板
                    </h5>
                    <nav class="nav flex-column">
                        <a class="nav-link active" href="/dashboard" data-i18n="sidebar-dashboard">
                            <i class="fas fa-home"></i>
                            仪表板
                        </a>
                        <a class="nav-link" href="/chat" data-i18n="sidebar-conversations">
                            <i class="fas fa-comments"></i>
                            智能对话
                        </a>
                        <a class="nav-link" href="#agent" data-tab="agent" data-i18n="sidebar-agent">
                            <i class="fas fa-brain"></i>
                            Agent管理
                        </a>
                        <a class="nav-link" href="/alerts" data-i18n="sidebar-alerts">
                            <i class="fas fa-exclamation-triangle"></i>
                            预警管理
                        </a>
                        <a class="nav-link" href="#knowledge" data-tab="knowledge" data-i18n="sidebar-knowledge">
                            <i class="fas fa-database"></i>
                            知识库
                        </a>
                        <a class="nav-link" href="#workorders" data-tab="workorders" data-i18n="sidebar-workorders">
                            <i class="fas fa-tasks"></i>
                            工单管理
                        </a>
                        <a class="nav-link" href="#feishu-sync" data-tab="feishu-sync" data-i18n="sidebar-feishu-sync">
                            <i class="fas fa-sync"></i>
                            飞书同步
                        </a>
                        <a class="nav-link" href="/chat-http" data-i18n="sidebar-conversation-history">
                            <i class="fas fa-comment-dots"></i>
                            HTTP对话
                        </a>
                        <a class="nav-link" href="#token-monitor" data-tab="token-monitor" data-i18n="sidebar-token-monitor">
                            <i class="fas fa-coins"></i>
                            Token监控
                        </a>
                        <a class="nav-link" href="#ai-monitor" data-tab="ai-monitor" data-i18n="sidebar-ai-monitor">
                            <i class="fas fa-brain"></i>
                            AI监控
                        </a>
                        <a class="nav-link" href="#system-optimizer" data-tab="system-optimizer" data-i18n="sidebar-system-optimizer">
                            <i class="fas fa-tools"></i>
                            系统优化
                        </a>
                        <a class="nav-link" href="#analytics" data-tab="analytics" data-i18n="sidebar-analytics">
                            <i class="fas fa-chart-line"></i>
                            数据分析
                        </a>
                        <a class="nav-link" href="#settings" data-tab="settings" data-i18n="sidebar-system">
                            <i class="fas fa-sliders-h"></i>
                            系统设置
                        </a>
                    </nav>
                </div>
            </div>

            <!-- 主内容区 -->
            <div class="col-md-10 main-content">
                <!-- 仪表板标签页 -->
                <div id="dashboard-tab" class="tab-content">
                    <div class="row mb-4">
                        <div class="col-6 col-md-3">
                            <div class="stat-card success">
                                <div class="stat-number" id="total-sessions">0</div>
                                <div class="stat-label">活跃会话</div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="stat-card warning">
                                <div class="stat-number" id="total-alerts">0</div>
                                <div class="stat-label">活跃预警</div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="stat-card danger">
                                <div class="stat-number" id="total-workorders">0</div>
                                <div class="stat-label">待处理工单</div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="stat-card info">
                                <div class="stat-number" id="knowledge-count">0</div>
                                <div class="stat-label">知识条目</div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-chart-line me-2"></i>系统性能趋势</h5>
                                </div>
                                <div class="card-body">
                                    <div class="chart-container">
                                        <canvas id="performanceChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-heartbeat me-2"></i>系统健康状态</h5>
                                </div>
                                <div class="card-body">
                                    <div class="health-indicator mb-3">
                                        <div class="health-dot" id="system-health-dot"></div>
                                        <span id="system-health-text">检查中...</span>
                                    </div>
                                    <div class="mb-2">
                                        <small class="text-muted">健康分数</small>
                                        <div class="progress">
                                            <div class="progress-bar" id="health-progress" role="progressbar" style="width: 0%"></div>
                                        </div>
                                    </div>
                                    <div class="mb-2">
                                        <small class="text-muted">内存使用</small>
                                        <div class="progress">
                                            <div class="progress-bar bg-info" id="memory-progress" role="progressbar" style="width: 0%"></div>
                                        </div>
                                    </div>
                                    <div class="mb-2">
                                        <small class="text-muted">CPU使用</small>
                                        <div class="progress">
                                            <div class="progress-bar bg-warning" id="cpu-progress" role="progressbar" style="width: 0%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-server me-2"></i>服务运行状态</h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="text-muted">Web服务端口</span>
                                            <span class="badge bg-success" id="web-port-status">5000</span>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="text-muted">WebSocket端口</span>
                                            <span class="badge bg-info" id="ws-port-status">8765</span>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="text-muted">日志级别</span>
                                            <span class="badge bg-secondary" id="log-level-status">INFO</span>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="text-muted">运行时间</span>
                                            <span class="text-primary" id="uptime-status">计算中...</span>
                                        </div>
                                    </div>
                                    <div class="d-grid">
                                        <button class="btn btn-outline-primary btn-sm" onclick="dashboard.refreshServiceStatus()">
                                            <i class="fas fa-sync-alt me-1"></i>刷新状态
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 智能对话标签页 -->
                <div id="chat-tab" class="tab-content" style="display: none;">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-cog me-2"></i>对话控制</h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label class="form-label">用户ID</label>
                                        <input type="text" class="form-control" id="user-id" value="user_001">
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label">工单ID (可选)</label>
                                        <input type="number" class="form-control" id="work-order-id" placeholder="留空则自动创建">
                                    </div>

                                    <div class="d-grid gap-2">
                                        <button class="btn btn-primary" id="start-chat">
                                            <i class="fas fa-play me-2"></i>开始对话
                                        </button>
                                        <button class="btn btn-secondary" id="end-chat" disabled>
                                            <i class="fas fa-stop me-2"></i>结束对话
                                        </button>
                                        <button class="btn btn-info" id="create-work-order">
                                            <i class="fas fa-plus me-2"></i>创建工单
                                        </button>
                                    </div>

                                    <hr>

                                    <div class="mb-3">
                                        <h6>快速操作</h6>
                                        <div class="quick-actions">
                                            <button class="quick-action-btn" data-message="我的车辆无法远程启动">远程启动问题</button>
                                            <button class="quick-action-btn" data-message="APP显示车辆信息错误">APP显示问题</button>
                                            <button class="quick-action-btn" data-message="蓝牙授权失败">蓝牙授权问题</button>
                                            <button class="quick-action-btn" data-message="如何解绑车辆">解绑车辆</button>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <h6>会话信息</h6>
                                        <div id="session-info" class="text-muted">
                                            未开始对话
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-9">
                            <div class="card chat-container">
                                <div class="chat-header">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h4><i class="fas fa-robot me-2"></i>TSP智能助手</h4>
                                            <small>基于知识库的智能客服系统</small>
                                        </div>
                                        <div id="connection-status" class="badge bg-secondary">
                                            <i class="fas fa-circle me-1"></i>未连接
                                        </div>
                                    </div>
                                </div>

                                <div class="chat-messages" id="chat-messages">
                                    <div class="text-center text-muted py-5">
                                        <i class="fas fa-comments fa-3x mb-3"></i>
                                        <h5>欢迎使用TSP智能助手</h5>
                                        <p>请点击"开始对话"按钮开始聊天</p>
                                    </div>
                                </div>

                                <div class="chat-input">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="message-input"
                                               placeholder="请输入您的问题..." disabled>
                                        <button class="btn btn-primary" id="send-button" disabled>
                                            <i class="fas fa-paper-plane"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Agent管理标签页 -->
                <div id="agent-tab" class="tab-content" style="display: none;">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="agent-status">
                                <h5><i class="fas fa-brain me-2"></i>Agent状态</h5>
                                <div class="mb-3">
                                    <label class="form-label text-white">Agent模式</label>
                                    <div class="agent-mode-toggle">
                                        <input type="checkbox" id="agent-mode-toggle">
                                        <span class="slider"></span>
                                    </div>
                                </div>
                                <div class="mb-2">
                                    <small class="text-white-50">当前状态: <span id="agent-current-state">空闲</span></small>
                                </div>
                                <div class="mb-2">
                                    <small class="text-white-50">活跃目标: <span id="agent-active-goals">0</span></small>
                                </div>
                                <div class="mb-2">
                                    <small class="text-white-50">可用工具: <span id="agent-available-tools">0</span></small>
                                </div>
                            </div>

                            <div class="card mb-3">
                                <div class="card-header">
                                    <h5><i class="fas fa-tools me-2"></i>工具管理</h5>
                                </div>
                                <div class="card-body">
                                    <div id="tools-list">
                                        <div class="loading-spinner">
                                            <i class="fas fa-spinner fa-spin"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-plus me-2"></i>添加自定义工具</h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <input type="text" class="form-control" id="tool-name" placeholder="工具名称">
                                    </div>
                                    <div class="mb-3">
                                        <textarea class="form-control" id="tool-description" rows="3" placeholder="工具描述"></textarea>
                                    </div>
                                    <button class="btn btn-primary w-100" id="register-tool">
                                        <i class="fas fa-plus me-1"></i>注册工具
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-cogs me-2"></i>Agent控制</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <button class="btn btn-agent w-100" id="start-agent-monitoring">
                                                <i class="fas fa-play me-2"></i>启动Agent监控
                                            </button>
                                        </div>
                                        <div class="col-md-6">
                                            <button class="btn btn-agent w-100" id="stop-agent-monitoring">
                                                <i class="fas fa-stop me-2"></i>停止Agent监控
                                            </button>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <button class="btn btn-agent w-100" id="proactive-monitoring">
                                                <i class="fas fa-search me-2"></i>主动监控检查
                                            </button>
                                        </div>
                                        <div class="col-md-6">
                                            <button class="btn btn-agent w-100" id="intelligent-analysis">
                                                <i class="fas fa-chart-line me-2"></i>智能分析
                                            </button>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <button class="btn btn-secondary w-100" id="trigger-sample-action">
                                                <i class="fas fa-play-circle me-2"></i>执行示例动作
                                            </button>
                                        </div>
                                        <div class="col-md-6">
                                            <button class="btn btn-outline-danger w-100" id="clear-agent-history">
                                                <i class="fas fa-trash me-2"></i>清空历史
                                            </button>
                                        </div>
                                    </div>

                                    <div class="card mb-3">
                                        <div class="card-header">
                                            <h5><i class="fas fa-comments me-2"></i>Agent对话</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <textarea class="form-control" id="agent-message-input" rows="3" placeholder="向Agent发送指令或问题..."></textarea>
                                            </div>
                                            <div class="d-flex gap-2">
                                                <button class="btn btn-primary" id="send-agent-message">
                                                    <i class="fas fa-paper-plane me-1"></i>发送
                                                </button>
                                                <button class="btn btn-outline-secondary" id="clear-agent-chat">
                                                    <i class="fas fa-eraser me-1"></i>清空
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card">
                                        <div class="card-header d-flex justify-content-between align-items-center">
                                            <h6><i class="fas fa-list me-2"></i>Agent执行历史</h6>
                                            <div class="btn-group btn-group-sm" role="group">
                                                <button type="button" class="btn btn-outline-primary" onclick="dashboard.triggerSampleAction()">
                                                    <i class="fas fa-play me-1"></i>触发示例
                                                </button>
                                                <button type="button" class="btn btn-outline-secondary" onclick="dashboard.refreshAgentHistory()">
                                                    <i class="fas fa-sync-alt me-1"></i>刷新
                                                </button>
                                                <button type="button" class="btn btn-outline-danger" onclick="dashboard.clearAgentHistory()">
                                                    <i class="fas fa-trash me-1"></i>清空
                                                </button>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div id="agent-execution-history">
                                                <div class="empty-state">
                                                    <i class="fas fa-history"></i>
                                                    <p>暂无执行历史</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 预警管理标签页 -->
                <div id="alerts-tab" class="tab-content" style="display: none;">
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="card bg-danger text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h4 id="critical-alerts" class="clickable-stat" data-type="alert" data-level="critical" style="cursor: pointer;">0</h4>
                                            <p class="mb-0" data-i18n="alerts-critical">严重预警</p>
                                        </div>
                                        <div class="align-self-center">
                                            <i class="fas fa-exclamation-triangle fa-2x"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-warning text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h4 id="warning-alerts" class="clickable-stat" data-type="alert" data-level="warning" style="cursor: pointer;">0</h4>
                                            <p class="mb-0" data-i18n="alerts-warning">警告预警</p>
                                        </div>
                                        <div class="align-self-center">
                                            <i class="fas fa-exclamation-circle fa-2x"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-info text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h4 id="info-alerts" class="clickable-stat" data-type="alert" data-level="info" style="cursor: pointer;">0</h4>
                                            <p class="mb-0" data-i18n="alerts-info">信息预警</p>
                                        </div>
                                        <div class="align-self-center">
                                            <i class="fas fa-info-circle fa-2x"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-success text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h4 id="total-alerts-count">0</h4>
                                            <p class="mb-0" data-i18n="alerts-total">总预警数</p>
                                        </div>
                                        <div class="align-self-center">
                                            <i class="fas fa-chart-line fa-2x"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5><i class="fas fa-bell me-2"></i>活跃预警</h5>
                            <div class="d-flex gap-2">
                                <select class="form-select form-select-sm" id="alert-filter" style="width: auto;">
                                    <option value="all">全部预警</option>
                                    <option value="critical">严重</option>
                                    <option value="warning">警告</option>
                                    <option value="info">信息</option>
                                </select>
                                <button class="btn btn-sm btn-outline-primary" id="refresh-alerts">
                                    <i class="fas fa-sync-alt me-1"></i>刷新
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div id="alerts-container">
                                <div class="loading-spinner">
                                    <i class="fas fa-spinner fa-spin"></i>
                                </div>
                            </div>
                            <div id="alerts-pagination" class="mt-3">
                                <!-- 分页控件将在这里显示 -->
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 知识库标签页 -->
                <div id="knowledge-tab" class="tab-content" style="display: none;">
                    <div class="row mb-4">
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h5><i class="fas fa-database me-2"></i>知识库管理</h5>
                                    <div class="btn-group">
                                        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addKnowledgeModal">
                                            <i class="fas fa-plus me-1"></i>添加知识
                                        </button>
                                        <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#uploadFileModal">
                                            <i class="fas fa-upload me-1"></i>上传文件
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="knowledge-search" placeholder="搜索知识库...">
                                            <button class="btn btn-outline-secondary" id="search-knowledge">
                                                <i class="fas fa-search"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div id="knowledge-list">
                                        <div class="loading-spinner">
                                            <i class="fas fa-spinner fa-spin"></i>
                                        </div>
                                    </div>
                                    <div id="knowledge-pagination" class="mt-3">
                                        <!-- 分页控件将在这里显示 -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-chart-pie me-2"></i>知识库统计</h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <small class="text-muted">总条目数</small>
                                        <h4 id="knowledge-total">0</h4>
                                    </div>
                                    <div class="mb-3">
                                        <small class="text-muted">活跃条目</small>
                                        <h4 id="knowledge-active">0</h4>
                                    </div>
                                    <div class="mb-3">
                                        <small class="text-muted">平均置信度</small>
                                        <div class="progress">
                                            <div class="progress-bar" id="knowledge-confidence" role="progressbar" style="width: 0%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 工单管理标签页 -->
                <div id="workorders-tab" class="tab-content" style="display: none;">
                    <div class="row mb-4">
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h5><i class="fas fa-tasks me-2"></i>工单管理</h5>
                                    <div class="btn-group" role="group">
                                        <button class="btn btn-success btn-sm" onclick="dashboard.downloadTemplate()">
                                            <i class="fas fa-download me-1"></i>下载模板
                                        </button>
                                        <button class="btn btn-info btn-sm" onclick="dashboard.showImportModal()">
                                            <i class="fas fa-upload me-1"></i>导入工单
                                        </button>
                                        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#createWorkOrderModal">
                                            <i class="fas fa-plus me-1"></i>创建工单
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <select class="form-select" id="workorder-status-filter">
                                                    <option value="all">全部状态</option>
                                                    <option value="open">待处理</option>
                                                    <option value="in_progress">处理中</option>
                                                    <option value="resolved">已解决</option>
                                                    <option value="closed">已关闭</option>
                                                </select>
                                            </div>
                                            <div class="col-md-4">
                                                <select class="form-select" id="workorder-priority-filter">
                                                    <option value="all">全部优先级</option>
                                                    <option value="low">低</option>
                                                    <option value="medium">中</option>
                                                    <option value="high">高</option>
                                                    <option value="urgent">紧急</option>
                                                </select>
                                            </div>
                                            <div class="col-md-4">
                                                <button class="btn btn-outline-secondary w-100" id="refresh-workorders">
                                                    <i class="fas fa-sync-alt me-1"></i>刷新
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="workorders-list">
                                        <div class="loading-spinner">
                                            <i class="fas fa-spinner fa-spin"></i>
                                        </div>
                                    </div>
                                    <div id="workorders-pagination" class="mt-3">
                                        <!-- 分页控件将在这里显示 -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-chart-bar me-2"></i>工单统计</h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <small class="text-muted">总工单数</small>
                                        <h4 id="workorders-total" class="clickable-stat" data-type="workorder" data-status="all" style="cursor: pointer; color: #0d6efd;">0</h4>
                                    </div>
                                    <div class="mb-3">
                                        <small class="text-muted">待处理</small>
                                        <h4 id="workorders-open" class="clickable-stat" data-type="workorder" data-status="open" style="cursor: pointer; color: #fd7e14;">0</h4>
                                    </div>
                                    <div class="mb-3">
                                        <small class="text-muted">处理中</small>
                                        <h4 id="workorders-progress" class="clickable-stat" data-type="workorder" data-status="in_progress" style="cursor: pointer; color: #0dcaf0;">0</h4>
                                    </div>
                                    <div class="mb-3">
                                        <small class="text-muted">已解决</small>
                                        <h4 id="workorders-resolved" class="clickable-stat" data-type="workorder" data-status="resolved" style="cursor: pointer; color: #198754;">0</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 飞书同步标签页 -->
                <div id="feishu-sync-tab" class="tab-content" style="display: none;">
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-sync me-2"></i>飞书同步管理
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <!-- 配置区域 -->
                                    <div class="row mb-4">
                                        <div class="col-12">
                                            <h6 class="text-muted mb-3">飞书配置</h6>
                                            <form id="feishuConfigForm">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <label for="appId" class="form-label">应用ID</label>
                                                            <input type="text" class="form-control" id="appId" placeholder="cli_xxxxxxxxxx">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <label for="appSecret" class="form-label">应用密钥</label>
                                                            <input type="password" class="form-control" id="appSecret" placeholder="输入应用密钥">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <label for="appToken" class="form-label">应用Token</label>
                                                            <input type="text" class="form-control" id="appToken" placeholder="XXnEbiCmEaMblSs6FDJcFCqsnIg">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <label for="tableId" class="form-label">表格ID</label>
                                                            <input type="text" class="form-control" id="tableId" placeholder="tblnl3vJPpgMTSiP">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="d-flex gap-2 flex-wrap">
                                                    <button type="button" class="btn btn-primary" onclick="feishuSync.saveConfig()">
                                                        <i class="fas fa-save me-1"></i>保存配置
                                                    </button>
                                                    <button type="button" class="btn btn-outline-secondary" onclick="feishuSync.testConnection()">
                                                        <i class="fas fa-plug me-1"></i>测试连接
                                                    </button>
                                                    <button type="button" class="btn btn-outline-info" onclick="feishuSync.exportConfig()">
                                                        <i class="fas fa-download me-1"></i>导出配置
                                                    </button>
                                                    <button type="button" class="btn btn-outline-warning" onclick="feishuSync.showImportModal()">
                                                        <i class="fas fa-upload me-1"></i>导入配置
                                                    </button>
                                                    <button type="button" class="btn btn-outline-danger" onclick="feishuSync.resetConfig()">
                                                        <i class="fas fa-undo me-1"></i>重置配置
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>

                                    <!-- 同步状态 -->
                                    <div class="row mb-4">
                                        <div class="col-md-4">
                                            <div class="card text-center">
                                                <div class="card-body">
                                                    <h5 class="card-title text-primary" id="totalLocalWorkorders">0</h5>
                                                    <p class="card-text">本地工单总数</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="card text-center">
                                                <div class="card-body">
                                                    <h5 class="card-title text-success" id="syncedWorkorders">0</h5>
                                                    <p class="card-text">已同步工单</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="card text-center">
                                                <div class="card-body">
                                                    <h5 class="card-title text-warning" id="unsyncedWorkorders">0</h5>
                                                    <p class="card-text">未同步工单</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 同步操作 -->
                                    <div class="row mb-4">
                                        <div class="col-12">
                                            <h6 class="text-muted mb-3">同步操作</h6>
                                            <div class="d-flex gap-2 mb-3">
                                                <button class="btn btn-success" onclick="feishuSync.syncFromFeishu()">
                                                    <i class="fas fa-download me-1"></i>从飞书同步
                                                </button>
                                                <button class="btn btn-primary" onclick="feishuSync.syncWithAI()">
                                                    <i class="fas fa-robot me-1"></i>同步+AI建议
                                                </button>
                                                <button class="btn btn-info" onclick="feishuSync.previewFeishuData()">
                                                    <i class="fas fa-eye me-1"></i>预览飞书数据
                                                </button>
                                                <button class="btn btn-warning" onclick="feishuSync.openFieldMapping()">
                                                    <i class="fas fa-exchange-alt me-1"></i>字段映射管理
                                                </button>
                                                <button class="btn btn-outline-danger" onclick="feishuSync.checkPermissions()">
                                                    <i class="fas fa-shield-alt me-1"></i>权限检查
                                                </button>
                                                <button class="btn btn-secondary" onclick="feishuSync.refreshStatus()">
                                                    <i class="fas fa-refresh me-1"></i>刷新状态
                                                </button>
                                            </div>

                                            <!-- 字段映射管理区域 -->
                                            <div class="row mb-4" id="fieldMappingSection" style="display: none;">
                                                <div class="col-12">
                                                    <div class="card">
                                                        <div class="card-header">
                                                            <h6 class="card-title mb-0">
                                                                <i class="fas fa-exchange-alt me-2"></i>字段映射管理
                                                            </h6>
                                                        </div>
                                                        <div class="card-body">
                                                            <div class="row mb-3">
                                                                <div class="col-md-6">
                                                                    <button class="btn btn-primary btn-sm" onclick="feishuSync.discoverFields()">
                                                                        <i class="fas fa-search"></i> 发现字段
                                                                    </button>
                                                                    <button class="btn btn-info btn-sm" onclick="feishuSync.loadMappingStatus()">
                                                                        <i class="fas fa-sync"></i> 刷新状态
                                                                    </button>
                                                                </div>
                                                                <div class="col-md-6 text-end">
                                                                    <button class="btn btn-success btn-sm" onclick="feishuSync.showAddMappingModal()">
                                                                        <i class="fas fa-plus"></i> 添加映射
                                                                    </button>
                                                                </div>
                                                            </div>
                                                            <div id="fieldMappingContent"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="mb-3">
                                                <label for="syncLimit" class="form-label">同步数量限制:</label>
                                                <select class="form-select" id="syncLimit" style="width: auto; display: inline-block;">
                                                    <option value="10">前10条</option>
                                                    <option value="20">前20条</option>
                                                    <option value="50">前50条</option>
                                                    <option value="100">前100条</option>
                                                </select>
                                            </div>

                                            <!-- 同步进度 -->
                                            <div class="progress mb-3" id="syncProgress" style="display: none;">
                                                <div class="progress-bar progress-bar-striped progress-bar-animated"
                                                     role="progressbar" style="width: 0%"></div>
                                            </div>

                                            <!-- 同步日志 -->
                                            <div class="mt-3">
                                                <h6>同步日志</h6>
                                                <div id="syncLog" class="bg-light p-3 rounded" style="max-height: 300px; overflow-y: auto;">
                                                    <div class="text-muted">暂无同步记录</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 预览数据 -->
                                    <div class="row" id="previewSection" style="display: none;">
                                        <div class="col-12">
                                            <div class="card">
                                                <div class="card-header">
                                                    <h5 class="card-title mb-0">
                                                        <i class="fas fa-table me-2"></i>飞书数据预览
                                                    </h5>
                                                </div>
                                                <div class="card-body">
                                                    <div class="table-responsive">
                                                        <table class="table table-striped" id="previewTable">
                                                            <thead>
                                                                <tr>
                                                                    <th>记录ID</th>
                                                                    <th>TR编号</th>
                                                                    <th>TR描述</th>
                                                                    <th>问题类型</th>
                                                                    <th>来源</th>
                                                                    <th>优先级/状态</th>
                                                                    <th>操作</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 对话历史标签页 -->
                <div id="conversation-history-tab" class="tab-content" style="display: none;">
                    <div class="row mb-4">
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h5><i class="fas fa-history me-2"></i>对话历史管理</h5>
                                    <div class="btn-group" role="group">
                                        <button class="btn btn-outline-primary btn-sm" onclick="dashboard.refreshConversationHistory()">
                                            <i class="fas fa-sync-alt me-1"></i>刷新
                                        </button>
                                        <button class="btn btn-outline-danger btn-sm" onclick="dashboard.clearAllConversations()">
                                            <i class="fas fa-trash me-1"></i>清空历史
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <input type="text" class="form-control" id="conversation-search" placeholder="搜索对话内容...">
                                            </div>
                                            <div class="col-md-3">
                                                <select class="form-select" id="conversation-user-filter">
                                                    <option value="">全部用户</option>
                                                </select>
                                            </div>
                                            <div class="col-md-3">
                                                <select class="form-select" id="conversation-date-filter">
                                                    <option value="">全部时间</option>
                                                    <option value="today">今天</option>
                                                    <option value="week">本周</option>
                                                    <option value="month">本月</option>
                                                </select>
                                            </div>
                                            <div class="col-md-2">
                                                <button class="btn btn-outline-secondary w-100" onclick="dashboard.filterConversations()">
                                                    <i class="fas fa-search"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="conversation-list">
                                        <div class="loading-spinner">
                                            <i class="fas fa-spinner fa-spin"></i>
                                        </div>
                                    </div>
                                    <div id="conversations-pagination" class="mt-3">
                                        <!-- 分页控件将在这里显示 -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-chart-pie me-2"></i>对话统计</h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <small class="text-muted">总对话数</small>
                                        <h4 id="conversation-total">0</h4>
                                    </div>
                                    <div class="mb-3">
                                        <small class="text-muted">今日对话</small>
                                        <h4 id="conversation-today">0</h4>
                                    </div>
                                    <div class="mb-3">
                                        <small class="text-muted">平均响应时间</small>
                                        <h4 id="conversation-avg-response">0ms</h4>
                                    </div>
                                    <div class="mb-3">
                                        <small class="text-muted">活跃用户</small>
                                        <h4 id="conversation-active-users">0</h4>
                                    </div>
                                </div>
                            </div>

                            <div class="card mt-3">
                                <div class="card-header">
                                    <h5><i class="fas fa-memory me-2"></i>对话记忆</h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label class="form-label">记忆类型</label>
                                        <select class="form-select" id="memory-type">
                                            <option value="short">短期记忆 (1小时)</option>
                                            <option value="medium">中期记忆 (1天)</option>
                                            <option value="long">长期记忆 (7天)</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">记忆容量</label>
                                        <div class="progress">
                                            <div class="progress-bar" id="memory-usage" role="progressbar" style="width: 0%"></div>
                                        </div>
                                        <small class="text-muted" id="memory-usage-text">0 / 1000 条</small>
                                    </div>
                                    <div class="d-grid gap-2">
                                        <button class="btn btn-outline-primary btn-sm" onclick="dashboard.optimizeMemory()">
                                            <i class="fas fa-compress me-1"></i>优化记忆
                                        </button>
                                        <button class="btn btn-outline-secondary btn-sm" onclick="dashboard.exportMemory()">
                                            <i class="fas fa-download me-1"></i>导出记忆
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Token监控标签页 -->
                <div id="token-monitor-tab" class="tab-content" style="display: none;">
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="stat-card success">
                                <div class="stat-number" id="token-today">0</div>
                                <div class="stat-label">今日消耗</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-card warning">
                                <div class="stat-number" id="token-month">0</div>
                                <div class="stat-label">本月消耗</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-card danger">
                                <div class="stat-number" id="token-cost">¥0</div>
                                <div class="stat-label">总成本</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-card info">
                                <div class="stat-number" id="token-budget">¥1000</div>
                                <div class="stat-label">预算限制</div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h5><i class="fas fa-chart-line me-2"></i>Token使用趋势</h5>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <button type="button" class="btn btn-outline-primary" onclick="dashboard.updateTokenChart('hour')">
                                            小时
                                        </button>
                                        <button type="button" class="btn btn-outline-primary active" onclick="dashboard.updateTokenChart('day')">
                                            天
                                        </button>
                                        <button type="button" class="btn btn-outline-primary" onclick="dashboard.updateTokenChart('week')">
                                            周
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="chart-container">
                                        <canvas id="tokenChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-exclamation-triangle me-2"></i>阈值预警</h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label class="form-label">日消耗预警</label>
                                        <div class="input-group">
                                            <input type="number" class="form-control" id="daily-threshold" value="10000">
                                            <span class="input-group-text">tokens</span>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">月预算预警</label>
                                        <div class="input-group">
                                            <input type="number" class="form-control" id="monthly-budget" value="1000">
                                            <span class="input-group-text">元</span>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="enable-alerts" checked>
                                            <label class="form-check-label">启用预警通知</label>
                                        </div>
                                    </div>
                                    <div class="d-grid">
                                        <button class="btn btn-primary" onclick="dashboard.saveTokenSettings()">
                                            <i class="fas fa-save me-1"></i>保存设置
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h5><i class="fas fa-list me-2"></i>详细使用记录</h5>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <button type="button" class="btn btn-outline-primary" onclick="dashboard.exportTokenData()">
                                            <i class="fas fa-download me-1"></i>导出数据
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary" onclick="dashboard.refreshTokenData()">
                                            <i class="fas fa-sync-alt me-1"></i>刷新
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-hover">
                                            <thead>
                                                <tr>
                                                    <th>时间</th>
                                                    <th>用户</th>
                                                    <th>模型</th>
                                                    <th>输入Token</th>
                                                    <th>输出Token</th>
                                                    <th>总Token</th>
                                                    <th>成本</th>
                                                    <th>响应时间</th>
                                                </tr>
                                            </thead>
                                            <tbody id="token-records">
                                                <tr>
                                                    <td colspan="8" class="text-center text-muted">
                                                        <i class="fas fa-spinner fa-spin me-2"></i>加载中...
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- AI监控标签页 -->
                <div id="ai-monitor-tab" class="tab-content" style="display: none;">
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="stat-card success">
                                <div class="stat-number" id="ai-success-rate">0%</div>
                                <div class="stat-label">成功率</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-card warning">
                                <div class="stat-number" id="ai-response-time">0ms</div>
                                <div class="stat-label">平均响应</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-card danger">
                                <div class="stat-number" id="ai-error-rate">0%</div>
                                <div class="stat-label">错误率</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stat-card info">
                                <div class="stat-number" id="ai-total-calls">0</div>
                                <div class="stat-label">总调用数</div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-chart-bar me-2"></i>模型性能对比</h5>
                                </div>
                                <div class="card-body">
                                    <div class="chart-container">
                                        <canvas id="modelComparisonChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-chart-pie me-2"></i>错误类型分布</h5>
                                </div>
                                <div class="card-body">
                                    <div class="chart-container">
                                        <canvas id="errorDistributionChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h5><i class="fas fa-exclamation-circle me-2"></i>错误监控</h5>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <button type="button" class="btn btn-outline-primary" onclick="dashboard.refreshErrorLog()">
                                            <i class="fas fa-sync-alt me-1"></i>刷新
                                        </button>
                                        <button type="button" class="btn btn-outline-danger" onclick="dashboard.clearErrorLog()">
                                            <i class="fas fa-trash me-1"></i>清空日志
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-hover">
                                            <thead>
                                                <tr>
                                                    <th>时间</th>
                                                    <th>错误类型</th>
                                                    <th>错误信息</th>
                                                    <th>模型</th>
                                                    <th>用户</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody id="error-log">
                                                <tr>
                                                    <td colspan="6" class="text-center text-muted">
                                                        <i class="fas fa-spinner fa-spin me-2"></i>加载中...
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 系统优化标签页 -->
                <div id="system-optimizer-tab" class="tab-content" style="display: none;">
                    <div class="row mb-4">
                        <div class="col-6 col-md-3">
                            <div class="stat-card success">
                                <div class="stat-number" id="cpu-usage">0%</div>
                                <div class="stat-label">CPU使用率</div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="stat-card warning">
                                <div class="stat-number" id="memory-usage-percent">0%</div>
                                <div class="stat-label">内存使用率</div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="stat-card danger">
                                <div class="stat-number" id="disk-usage">0%</div>
                                <div class="stat-label">磁盘使用率</div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="stat-card info">
                                <div class="stat-number" id="network-latency">0ms</div>
                                <div class="stat-label">网络延迟</div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-tachometer-alt me-2"></i>性能优化</h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label class="form-label">CPU优化</label>
                                        <div class="progress mb-2">
                                            <div class="progress-bar bg-success" id="cpu-optimization" role="progressbar" style="width: 0%"></div>
                                        </div>
                                        <button class="btn btn-outline-primary btn-sm" onclick="dashboard.optimizeCPU()">
                                            <i class="fas fa-cog me-1"></i>优化CPU
                                        </button>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">内存优化</label>
                                        <div class="progress mb-2">
                                            <div class="progress-bar bg-info" id="memory-optimization" role="progressbar" style="width: 0%"></div>
                                        </div>
                                        <button class="btn btn-outline-primary btn-sm" onclick="dashboard.optimizeMemory()">
                                            <i class="fas fa-memory me-1"></i>优化内存
                                        </button>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">磁盘优化</label>
                                        <div class="progress mb-2">
                                            <div class="progress-bar bg-warning" id="disk-optimization" role="progressbar" style="width: 0%"></div>
                                        </div>
                                        <button class="btn btn-outline-primary btn-sm" onclick="dashboard.optimizeDisk()">
                                            <i class="fas fa-hdd me-1"></i>优化磁盘
                                        </button>
                                    </div>
                                    <div class="mt-3 d-flex gap-2">
                                        <button class="btn btn-success btn-sm" onclick="dashboard.optimizeAll()">
                                            <i class="fas fa-magic me-1"></i>一键优化
                                        </button>
                                        <button class="btn btn-outline-secondary btn-sm" onclick="dashboard.clearCache()">
                                            <i class="fas fa-broom me-1"></i>清理缓存
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-shield-alt me-2"></i>安全优化</h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="input-validation" checked>
                                            <label class="form-check-label">输入验证</label>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="rate-limiting" checked>
                                            <label class="form-check-label">频率限制</label>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="sql-injection-protection" checked>
                                            <label class="form-check-label">SQL注入防护</label>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="xss-protection" checked>
                                            <label class="form-check-label">XSS防护</label>
                                        </div>
                                    </div>
                                    <div class="d-grid">
                                        <button class="btn btn-primary" onclick="dashboard.saveSecuritySettings()">
                                            <i class="fas fa-save me-1"></i>保存安全设置
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-traffic-light me-2"></i>流量保护</h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label class="form-label">请求限制 (每分钟)</label>
                                        <input type="number" class="form-control" id="request-limit" value="100">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">并发控制</label>
                                        <input type="number" class="form-control" id="concurrent-limit" value="50">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">IP白名单</label>
                                        <textarea class="form-control" id="ip-whitelist" rows="3" placeholder="每行一个IP地址"></textarea>
                                    </div>
                                    <div class="d-grid">
                                        <button class="btn btn-primary" onclick="dashboard.saveTrafficSettings()">
                                            <i class="fas fa-save me-1"></i>保存流量设置
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-dollar-sign me-2"></i>成本优化</h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label class="form-label">预算控制 (每月)</label>
                                        <div class="input-group">
                                            <input type="number" class="form-control" id="monthly-budget-limit" value="1000">
                                            <span class="input-group-text">元</span>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">成本限制 (每次调用)</label>
                                        <div class="input-group">
                                            <input type="number" class="form-control" id="per-call-cost-limit" value="0.1">
                                            <span class="input-group-text">元</span>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="auto-cost-control" checked>
                                            <label class="form-check-label">自动成本控制</label>
                                        </div>
                                    </div>
                                    <div class="d-grid">
                                        <button class="btn btn-primary" onclick="dashboard.saveCostSettings()">
                                            <i class="fas fa-save me-1"></i>保存成本设置
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h5><i class="fas fa-heartbeat me-2"></i>稳定性监控</h5>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <button type="button" class="btn btn-outline-primary" onclick="dashboard.runHealthCheck()">
                                            <i class="fas fa-stethoscope me-1"></i>健康检查
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary" onclick="dashboard.refreshSystemStatus()">
                                            <i class="fas fa-sync-alt me-1"></i>刷新状态
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="text-center">
                                                <div class="health-dot excellent" id="system-health-indicator"></div>
                                                <h6>系统健康</h6>
                                                <span id="system-health-score">95%</span>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="text-center">
                                                <div class="health-dot good" id="database-health-indicator"></div>
                                                <h6>数据库</h6>
                                                <span id="database-health-score">98%</span>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="text-center">
                                                <div class="health-dot fair" id="api-health-indicator"></div>
                                                <h6>API服务</h6>
                                                <span id="api-health-score">92%</span>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="text-center">
                                                <div class="health-dot excellent" id="cache-health-indicator"></div>
                                                <h6>缓存服务</h6>
                                                <span id="cache-health-score">99%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 数据分析标签页 -->
                <div id="analytics-tab" class="tab-content" style="display: none;">
                    <!-- 图表控制面板 -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-chart-bar me-2"></i>数据分析控制面板</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label class="form-label">时间范围</label>
                                            <select class="form-select" id="timeRange">
                                                <option value="7">最近7天</option>
                                                <option value="30" selected>最近30天</option>
                                                <option value="90">最近90天</option>
                                                <option value="365">最近1年</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">图表类型</label>
                                            <select class="form-select" id="chartType">
                                                <option value="line">折线图</option>
                                                <option value="bar" selected>柱状图</option>
                                                <option value="pie">饼图</option>
                                                <option value="doughnut">环形图</option>
                                                <option value="radar">雷达图</option>
                                                <option value="polar">极坐标图</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">数据维度</label>
                                            <select class="form-select" id="dataDimension">
                                                <option value="workorders" selected>工单统计</option>
                                                <option value="alerts">预警统计</option>
                                                <option value="performance">性能指标</option>
                                                <option value="satisfaction">满意度分析</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">操作</label>
                                            <div class="d-grid">
                                                <button class="btn btn-primary" onclick="dashboard.updateCharts()">
                                                    <i class="fas fa-sync-alt me-1"></i>刷新图表
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 主要图表区域 -->
                    <div class="row mb-4">
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h5><i class="fas fa-chart-line me-2"></i>主要趋势分析</h5>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <button type="button" class="btn btn-outline-primary" onclick="dashboard.exportChart('mainChart')">
                                            <i class="fas fa-download me-1"></i>导出
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary" onclick="dashboard.fullscreenChart('mainChart')">
                                            <i class="fas fa-expand me-1"></i>全屏
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="chart-container" style="position: relative; height: 400px;">
                                        <canvas id="mainChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-chart-pie me-2"></i>分布分析</h5>
                                </div>
                                <div class="card-body">
                                    <div class="chart-container" style="position: relative; height: 300px;">
                                        <canvas id="distributionChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 详细统计卡片 -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="card text-center">
                                <div class="card-body">
                                    <div class="d-flex align-items-center justify-content-center mb-2">
                                        <i class="fas fa-tasks fa-2x text-primary me-3"></i>
                                        <div>
                                            <h3 class="mb-0" id="totalWorkorders">0</h3>
                                            <small class="text-muted">总工单数</small>
                                        </div>
                                    </div>
                                    <div class="progress" style="height: 4px;">
                                        <div class="progress-bar bg-primary" role="progressbar" style="width: 100%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card text-center">
                                <div class="card-body">
                                    <div class="d-flex align-items-center justify-content-center mb-2">
                                        <i class="fas fa-exclamation-triangle fa-2x text-warning me-3"></i>
                                        <div>
                                            <h3 class="mb-0" id="openWorkorders">0</h3>
                                            <small class="text-muted">待处理</small>
                                        </div>
                                    </div>
                                    <div class="progress" style="height: 4px;">
                                        <div class="progress-bar bg-warning" role="progressbar" id="openProgress" style="width: 0%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card text-center">
                                <div class="card-body">
                                    <div class="d-flex align-items-center justify-content-center mb-2">
                                        <i class="fas fa-check-circle fa-2x text-success me-3"></i>
                                        <div>
                                            <h3 class="mb-0" id="resolvedWorkorders">0</h3>
                                            <small class="text-muted">已解决</small>
                                        </div>
                                    </div>
                                    <div class="progress" style="height: 4px;">
                                        <div class="progress-bar bg-success" role="progressbar" id="resolvedProgress" style="width: 0%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card text-center">
                                <div class="card-body">
                                    <div class="d-flex align-items-center justify-content-center mb-2">
                                        <i class="fas fa-star fa-2x text-info me-3"></i>
                                        <div>
                                            <h3 class="mb-0" id="avgSatisfaction">0</h3>
                                            <small class="text-muted">平均满意度</small>
                                        </div>
                                    </div>
                                    <div class="progress" style="height: 4px;">
                                        <div class="progress-bar bg-info" role="progressbar" id="satisfactionProgress" style="width: 0%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 多维度分析图表 -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-chart-area me-2"></i>时间趋势分析</h5>
                                </div>
                                <div class="card-body">
                                    <div class="chart-container" style="position: relative; height: 300px;">
                                        <canvas id="trendChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-chart-bar me-2"></i>优先级分布</h5>
                                </div>
                                <div class="card-body">
                                    <div class="chart-container" style="position: relative; height: 300px;">
                                        <canvas id="priorityChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 详细分析报告 -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h5><i class="fas fa-table me-2"></i>详细分析报告</h5>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <button type="button" class="btn btn-outline-primary" onclick="dashboard.exportReport()">
                                            <i class="fas fa-file-excel me-1"></i>导出Excel
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary" onclick="dashboard.printReport()">
                                            <i class="fas fa-print me-1"></i>打印报告
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div id="analytics-report">
                                        <div class="loading-spinner text-center">
                                            <i class="fas fa-spinner fa-spin fa-2x"></i>
                                            <p class="mt-2">正在生成分析报告...</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 系统设置标签页 -->
                <div id="settings-tab" class="tab-content" style="display: none;">
                    <div class="row mb-4">
                        <div class="col-12">
                            <h2><i class="fas fa-cog me-2"></i><span data-i18n="settings-title">系统设置</span></h2>
                        </div>
                    </div>
                    <div class="row">
                        <!-- 基础系统配置 -->
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-cog me-2"></i><span data-i18n="settings-basic">基础系统配置</span></h5>
                                </div>
                                <div class="card-body">
                                    <form id="system-settings-form">
                                        <div class="mb-3">
                                            <label class="form-label">API超时时间(秒)</label>
                                            <input type="number" class="form-control" id="api-timeout" value="30">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">最大历史记录数</label>
                                            <input type="number" class="form-control" id="max-history" value="10">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">自动刷新间隔(秒)</label>
                                            <input type="number" class="form-control" id="refresh-interval" value="10">
                                        </div>
                                        <div class="mb-3">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="auto-monitoring" checked>
                                                <label class="form-check-label">自动监控</label>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="agent-mode" checked>
                                                <label class="form-check-label">启用Agent模式</label>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-save me-2"></i>保存设置
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <!-- 系统信息显示 -->
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-info-circle me-2"></i><span data-i18n="settings-system-info">系统信息</span></h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="text-center">
                                                <h6 class="text-muted" data-i18n="settings-current-port">当前服务端口</h6>
                                                <h4 class="text-primary" id="current-server-port-display">5000</h4>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="text-center">
                                                <h6 class="text-muted" data-i18n="settings-websocket-port">WebSocket端口</h6>
                                                <h4 class="text-info" id="current-websocket-port-display">8765</h4>
                                            </div>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="alert alert-info">
                                        <i class="fas fa-info-circle me-2"></i>
                                        <strong>注意：</strong><span data-i18n="settings-port-note">服务端口配置需要在配置文件中修改，前端页面仅显示当前状态。</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-4">
                        <!-- 日志级别配置 -->
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-file-alt me-2"></i><span data-i18n="settings-log-config">日志配置</span></h5>
                                </div>
                                <div class="card-body">
                                    <form id="log-settings-form">
                                        <div class="mb-3">
                                            <label class="form-label" data-i18n="settings-log-level">日志级别</label>
                                            <select class="form-select" id="log-level">
                                                <option value="DEBUG">DEBUG</option>
                                                <option value="INFO" selected>INFO</option>
                                                <option value="WARNING">WARNING</option>
                                                <option value="ERROR">ERROR</option>
                                                <option value="CRITICAL">CRITICAL</option>
                                            </select>
                                            <div class="form-text" data-i18n="settings-log-note">调整系统日志的详细程度</div>
                                        </div>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-save me-2"></i><span data-i18n="settings-save">保存日志设置</span>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <!-- 系统信息与状态 -->
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5><i class="fas fa-info-circle me-2"></i>系统信息与状态</h5>
                                </div>
                                <div class="card-body">
                                    <div id="system-info">
                                        <div class="loading-spinner">
                                            <i class="fas fa-spinner fa-spin"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框 -->
    <!-- 创建工单模态框 -->
    <div class="modal fade" id="createWorkOrderModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">创建工单</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="work-order-form">
                        <div class="mb-3">
                            <label class="form-label">工单标题</label>
                            <input type="text" class="form-control" id="wo-title" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">问题描述</label>
                            <textarea class="form-control" id="wo-description" rows="3" required></textarea>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">问题分类</label>
                                    <select class="form-select" id="wo-category">
                                        <option value="技术问题">技术问题</option>
                                        <option value="APP功能">APP功能</option>
                                        <option value="远程控制">远程控制</option>
                                        <option value="车辆绑定">车辆绑定</option>
                                        <option value="其他">其他</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">优先级</label>
                                    <select class="form-select" id="wo-priority">
                                        <option value="low">低</option>
                                        <option value="medium" selected>中</option>
                                        <option value="high">高</option>
                                        <option value="urgent">紧急</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="create-work-order-btn">创建工单</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 工单导入模态框 -->
    <div class="modal fade" id="importWorkOrderModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">导入工单</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        请先下载模板文件，按照模板格式填写工单信息，然后上传Excel文件进行导入。
                    </div>

                    <div class="mb-3">
                        <label class="form-label">选择Excel文件</label>
                        <input type="file" class="form-control" id="excel-file-input" accept=".xlsx,.xls">
                        <div class="form-text">支持 .xlsx 和 .xls 格式，文件大小不超过16MB</div>
                    </div>

                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <span>Excel文件列名说明：</span>
                            <button class="btn btn-outline-primary btn-sm" onclick="dashboard.downloadTemplate()">
                                <i class="fas fa-download me-1"></i>下载模板
                            </button>
                        </div>
                        <div class="table-responsive mt-2">
                            <table class="table table-sm table-bordered">
                                <thead class="table-light">
                                    <tr>
                                        <th>列名</th>
                                        <th>说明</th>
                                        <th>必填</th>
                                        <th>示例</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>标题</td>
                                        <td>工单标题</td>
                                        <td><span class="badge bg-danger">是</span></td>
                                        <td>车辆无法启动</td>
                                    </tr>
                                    <tr>
                                        <td>描述</td>
                                        <td>工单详细描述</td>
                                        <td><span class="badge bg-danger">是</span></td>
                                        <td>用户反映车辆无法正常启动</td>
                                    </tr>
                                    <tr>
                                        <td>分类</td>
                                        <td>工单分类</td>
                                        <td><span class="badge bg-secondary">否</span></td>
                                        <td>技术问题</td>
                                    </tr>
                                    <tr>
                                        <td>优先级</td>
                                        <td>工单优先级</td>
                                        <td><span class="badge bg-secondary">否</span></td>
                                        <td>high</td>
                                    </tr>
                                    <tr>
                                        <td>状态</td>
                                        <td>工单状态</td>
                                        <td><span class="badge bg-secondary">否</span></td>
                                        <td>open</td>
                                    </tr>
                                    <tr>
                                        <td>解决方案</td>
                                        <td>解决方案描述</td>
                                        <td><span class="badge bg-secondary">否</span></td>
                                        <td>检查电池和启动系统</td>
                                    </tr>
                                    <tr>
                                        <td>满意度</td>
                                        <td>满意度评分(1-5)</td>
                                        <td><span class="badge bg-secondary">否</span></td>
                                        <td>5</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div id="import-progress" class="d-none">
                        <div class="progress mb-3">
                            <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                        </div>
                        <div class="text-center">
                            <i class="fas fa-spinner fa-spin me-2"></i>
                            <span id="import-status">正在导入工单...</span>
                        </div>
                    </div>

                    <div id="import-result" class="d-none">
                        <div class="alert alert-success">
                            <i class="fas fa-check-circle me-2"></i>
                            <span id="import-success-message"></span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="import-workorder-btn" onclick="dashboard.importWorkOrders()">
                        <i class="fas fa-upload me-1"></i>开始导入
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加知识模态框 -->
    <div class="modal fade" id="addKnowledgeModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加知识</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="knowledge-form">
                        <div class="mb-3">
                            <label class="form-label">问题</label>
                            <input type="text" class="form-control" id="knowledge-question" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">答案</label>
                            <textarea class="form-control" id="knowledge-answer" rows="3" required></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">分类</label>
                            <select class="form-select" id="knowledge-category">
                                <option value="技术问题">技术问题</option>
                                <option value="APP功能">APP功能</option>
                                <option value="远程控制">远程控制</option>
                                <option value="车辆绑定">车辆绑定</option>
                                <option value="其他">其他</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">置信度</label>
                            <input type="range" class="form-range" id="knowledge-confidence" min="0" max="1" step="0.1" value="0.8">
                            <div class="d-flex justify-content-between">
                                <small>0</small>
                                <small id="confidence-value">0.8</small>
                                <small>1</small>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="add-knowledge-btn">添加知识</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 文件上传模态框 -->
    <div class="modal fade" id="uploadFileModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">上传文件生成知识库</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="file-upload-form" enctype="multipart/form-data">
                        <div class="mb-3">
                            <label class="form-label">选择文件</label>
                            <input type="file" class="form-control" id="file-input" accept=".txt,.pdf,.doc,.docx,.md" required>
                            <div class="form-text">支持的文件格式：TXT, PDF, DOC, DOCX, MD</div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">处理方式</label>
                            <select class="form-select" id="process-method">
                                <option value="auto">自动提取Q&A</option>
                                <option value="manual">手动指定问题</option>
                                <option value="summary">生成摘要</option>
                            </select>
                        </div>
                        <div class="mb-3" id="manual-question-div" style="display: none;">
                            <label class="form-label">指定问题</label>
                            <input type="text" class="form-control" id="manual-question" placeholder="请输入要提取的问题">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">分类</label>
                            <select class="form-select" id="file-category">
                                <option value="技术问题">技术问题</option>
                                <option value="APP功能">APP功能</option>
                                <option value="远程控制">远程控制</option>
                                <option value="车辆绑定">车辆绑定</option>
                                <option value="其他">其他</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">置信度</label>
                            <input type="range" class="form-range" id="file-confidence" min="0" max="1" step="0.1" value="0.7">
                            <div class="d-flex justify-content-between">
                                <small>0</small>
                                <small id="file-confidence-value">0.7</small>
                                <small>1</small>
                            </div>
                        </div>
                    </form>
                    <div id="upload-progress" class="mt-3" style="display: none;">
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                        </div>
                        <div class="text-center mt-2">
                            <small id="upload-status">正在处理文件...</small>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success" id="upload-file-btn">上传处理</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 飞书配置导入模态框 -->
    <div class="modal fade" id="importConfigModal" tabindex="-1" aria-labelledby="importConfigModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="importConfigModalLabel">导入配置</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="configJson" class="form-label">配置JSON数据:</label>
                        <textarea class="form-control" id="configJson" rows="10" placeholder="粘贴导出的配置JSON数据..."></textarea>
                    </div>
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        导入配置将覆盖当前所有配置，请谨慎操作！
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="feishuSync.importConfig()">导入</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 通知容器 -->
    <div id="notificationContainer" class="position-fixed top-0 end-0 p-3" style="z-index: 1050;"></div>

    <!-- 脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <script src="{{ url_for('static', filename='js/navigation.js') }}"></script>
    <script src="{{ url_for('static', filename='js/dashboard.js') }}?v=1.0.9"></script>
</body>
</html>
