编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI宠物后台管理系统</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #f0f2f5; }
        
        .header { background: #001529; color: #fff; padding: 0 20px; height: 60px; display: flex; align-items: center; justify-content: space-between; }
        .logo { font-size: 20px; font-weight: bold; display: flex; align-items: center; gap: 10px; }
        .header-right { display: flex; align-items: center; gap: 20px; }
        .header-user { display: flex; align-items: center; gap: 10px; cursor: pointer; }
        .avatar { width: 36px; height: 36px; background: #1890ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
        
        .main-container { display: flex; height: calc(100vh - 60px); }
        .sidebar { width: 220px; background: #fff; border-right: 1px solid #e8e8e8; overflow-y: auto; }
        .menu-item { padding: 12px 24px; cursor: pointer; display: flex; align-items: center; gap: 10px; color: #333; transition: all 0.3s; border-left: 3px solid transparent; }
        .menu-item:hover { background: #f0f2f5; }
        .menu-item.active { background: #e6f7ff; color: #1890ff; border-left-color: #1890ff; }
        .menu-icon { width: 20px; height: 20px; }
        .submenu { padding-left: 54px; display: none; }
        .submenu.show { display: block; }
        .submenu .menu-item { padding: 10px 24px; font-size: 14px; }
        
        .content { flex: 1; padding: 20px; overflow-y: auto; }
        .page { display: none; }
        .page.active { display: block; }
        
        .card { background: #fff; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
        .card-title { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #e8e8e8; display: flex; justify-content: space-between; align-items: center; }
        
        .stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
        .stat-card { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
        .stat-card .label { font-size: 14px; color: #666; margin-bottom: 8px; }
        .stat-card .value { font-size: 28px; font-weight: bold; color: #333; }
        .stat-card .trend { font-size: 12px; color: #52c41a; margin-top: 4px; }
        
        .table { width: 100%; border-collapse: collapse; }
        .table th, .table td { padding: 12px; text-align: left; border-bottom: 1px solid #e8e8e8; }
        .table th { background: #fafafa; font-weight: 600; color: #333; }
        .table tr:hover { background: #fafafa; }
        
        .btn { padding: 6px 16px; border-radius: 4px; border: none; cursor: pointer; font-size: 14px; transition: all 0.3s; }
        .btn-primary { background: #1890ff; color: #fff; }
        .btn-primary:hover { background: #40a9ff; }
        .btn-default { background: #fff; border: 1px solid #d9d9d9; color: #333; }
        .btn-default:hover { border-color: #1890ff; color: #1890ff; }
        .btn-danger { background: #ff4d4f; color: #fff; }
        .btn-success { background: #52c41a; color: #fff; }
        
        .form-group { margin-bottom: 16px; }
        .form-label { display: block; margin-bottom: 8px; color: #333; font-weight: 500; }
        .form-input { width: 100%; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; }
        .form-input:focus { border-color: #1890ff; outline: none; }
        
        .tabs { display: flex; gap: 20px; border-bottom: 1px solid #e8e8e8; margin-bottom: 20px; }
        .tab { padding: 12px 0; cursor: pointer; color: #666; border-bottom: 2px solid transparent; }
        .tab.active { color: #1890ff; border-bottom-color: #1890ff; }
        
        .search-bar { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
        .search-input { padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px; width: 200px; }
        
        .badge { background: #ff4d4f; color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
        
        .pagination { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 20px; }
        .page-btn { padding: 6px 12px; border: 1px solid #d9d9d9; background: #fff; cursor: pointer; border-radius: 4px; }
        .page-btn.active { background: #1890ff; color: #fff; border-color: #1890ff; }
        
        .back-btn { display: inline-flex; align-items: center; gap: 6px; color: #1890ff; cursor: pointer; margin-bottom: 16px; font-size: 14px; }
        .back-btn:hover { text-decoration: underline; }
        
        .tag { padding: 2px 8px; border-radius: 4px; font-size: 12px; }
        .tag-green { background: #f6ffed; color: #52c41a; }
        .tag-blue { background: #e6f7ff; color: #1890ff; }
        .tag-orange { background: #fff7e6; color: #fa8c16; }
        .tag-red { background: #fff1f0; color: #ff4d4f; }
        
        .chart-area { height: 250px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; position: relative; overflow: hidden; }
        .chart-area::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255,255,255,0.1) 50px, rgba(255,255,255,0.1) 100px); }
        .chart-label { position: relative; z-index: 1; }
        
        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
        
        .user-avatar { width: 48px; height: 48px; border-radius: 50%; background: #1890ff; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
        
        .video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
        .video-item { background: #333; border-radius: 8px; overflow: hidden; position: relative; }
        .video-header { padding: 12px; background: rgba(0,0,0,0.5); color: #fff; display: flex; justify-content: space-between; position: absolute; top: 0; left: 0; right: 0; }
        .video-placeholder { height: 200px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; }
        
        .progress-bar { height: 8px; background: #e8e8e8; border-radius: 4px; overflow: hidden; }
        .progress-fill { height: 100%; background: linear-gradient(90deg, #1890ff, #69c0ff); border-radius: 4px; }
        
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 3px; }
        ::-webkit-scrollbar-track { background: #f0f0f0; }
        
        @media (max-width: 1200px) {
            .stat-cards { grid-template-columns: repeat(2, 1fr); }
            .grid-2, .grid-3, .video-grid { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="logo">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor"><path d="M16 4c-5.5 0-10 4.5-10 10s4.5 10 10 10 10-4.5 10-10S21.5 4 16 4zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm-3-8c0 1.7 1.3 3 3 3s3-1.3 3-3-1.3-3-3-3-3 1.3-3 3z"/></svg>
            AI宠物后台管理系统
        </div>
        <div class="header-right">
            <span>🔔</span>
            <div class="header-user">
                <div class="avatar">管</div>
                <span>管理员</span>
            </div>
        </div>
    </header>
    
    <div class="main-container">
        <aside class="sidebar">
            <div class="menu-item active" onclick="showPage('dashboard')">工作台</div>
            
            <div class="menu-item" onclick="toggleSubmenu(this)">用户管理 <span style="margin-left:auto">▶</span></div>
            <div class="submenu">
                <div class="menu-item" onclick="showPage('user-list')">用户列表</div>
                <div class="menu-item" onclick="showPage('user-detail')">用户详情</div>
                <div class="menu-item" onclick="showPage('user-export')">用户导出</div>
            </div>
            
            <div class="menu-item" onclick="toggleSubmenu(this)">宠物管理 <span style="margin-left:auto">▶</span></div>
            <div class="submenu">
                <div class="menu-item" onclick="showPage('pet-list')">宠物列表</div>
                <div class="menu-item" onclick="showPage('pet-档案')">宠物档案</div>
                <div class="menu-item" onclick="showPage('pet-category')">宠物分类</div>
            </div>
            
            <div class="menu-item" onclick="toggleSubmenu(this)">兽医管理 <span style="margin-left:auto">▶</span></div>
            <div class="submenu">
                <div class="menu-item" onclick="showPage('vet-list')">兽医列表</div>
                <div class="menu-item" onclick="showPage('vet-add')">添加兽医</div>
                <div class="menu-item" onclick="showPage('vet-edit')">兽医编辑</div>
                <div class="menu-item" onclick="showPage('vet-schedule')">兽医排班</div>
                <div class="menu-item" onclick="showPage('vet-stat')">兽医统计</div>
            </div>
            
            <div class="menu-item" onclick="toggleSubmenu(this)">宠物病情管理 <span style="margin-left:auto">▶</span></div>
            <div class="submenu">
                <div class="menu-item" onclick="showPage('case-list')">病情列表</div>
                <div class="menu-item" onclick="showPage('case-detail')">病情详情</div>
                <div class="menu-item" onclick="showPage('case-classify')">分类分级</div>
                <div class="menu-item" onclick="showPage('case-stat')">病情统计</div>
            </div>
            
            <div class="menu-item" onclick="toggleSubmenu(this)">AI诊断管理 <span style="margin-left:auto">▶</span></div>
            <div class="submenu">
                <div class="menu-item" onclick="showPage('diag-config')">诊断配置</div>
                <div class="menu-item" onclick="showPage('diag-record')">诊断记录</div>
                <div class="menu-item" onclick="showPage('diag-stat')">诊断统计</div>
                <div class="menu-item" onclick="showPage('diag-review')">复核管理</div>
            </div>
            
            <div class="menu-item" onclick="toggleSubmenu(this)">AI问诊管理 <span style="margin-left:auto">▶</span></div>
            <div class="submenu">
                <div class="menu-item" onclick="showPage('consult-record')">问诊记录</div>
                <div class="menu-item" onclick="showPage('consult-stat')">问诊统计</div>
                <div class="menu-item" onclick="showPage('knowledge-base')">知识库</div>
            </div>
            
            <div class="menu-item" onclick="toggleSubmenu(this)">ICU管理 <span style="margin-left:auto">▶</span></div>
            <div class="submenu">
                <div class="menu-item" onclick="showPage('icu-list')">ICU列表</div>
                <div class="menu-item" onclick="showPage('icu-monitor')">ICU监控</div>
                <div class="menu-item" onclick="showPage('icu-video')">视频管理</div>
            </div>
            
            <div class="menu-item" onclick="toggleSubmenu(this)">订单管理 <span style="margin-left:auto">▶</span></div>
            <div class="submenu">
                <div class="menu-item" onclick="showPage('order-list')">订单列表</div>
                <div class="menu-item" onclick="showPage('order-detail')">订单详情</div>
                <div class="menu-item" onclick="showPage('order-refund')">退款处理</div>
                <div class="menu-item" onclick="showPage('order-stat')">订单统计</div>
            </div>
            
            <div class="menu-item" onclick="toggleSubmenu(this)">数据统计 <span style="margin-left:auto">▶</span></div>
            <div class="submenu">
                <div class="menu-item" onclick="showPage('biz-stat')">营业统计</div>
                <div class="menu-item" onclick="showPage('user-stat')">用户统计</div>
                <div class="menu-item" onclick="showPage('pet-stat')">宠物统计</div>
            </div>
            
            <div class="menu-item" onclick="toggleSubmenu(this)">内容管理 <span style="margin-left:auto">▶</span></div>
            <div class="submenu">
                <div class="menu-item" onclick="showPage('banner')">轮播图</div>
                <div class="menu-item" onclick="showPage('announcement')">公告管理</div>
            </div>
            
            <div class="menu-item" onclick="toggleSubmenu(this)">系统管理 <span style="margin-left:auto">▶</span></div>
            <div class="submenu">
                <div class="menu-item" onclick="showPage('role-permission')">角色权限</div>
                <div class="menu-item" onclick="showPage('system-setting')">系统设置</div>
            </div>
        </aside>
        
        <main class="content">
            <!-- 工作台 -->
            <div id="dashboard" class="page active">
                <h2 style="margin-bottom:20px;">数据概览</h2>
                <div class="stat-cards">
                    <div class="stat-card"><div class="label">用户总数</div><div class="value">12,856</div><div class="trend">↑ 12.5%</div></div>
                    <div class="stat-card"><div class="label">宠物总数</div><div class="value">18,234</div><div class="trend">↑ 8.3%</div></div>
                    <div class="stat-card"><div class="label">问诊量</div><div class="value">3,456</div><div class="trend">↑ 15.2%</div></div>
                    <div class="stat-card"><div class="label">本月营收</div><div class="value">¥256,890</div><div class="trend">↑ 10.8%</div></div>
                </div>
                <div class="grid-2">
                    <div class="card">
                        <div class="card-title">待办事项 <span class="badge">8</span></div>
                        <div style="padding:16px 0;border-bottom:1px solid #e8e8e8;display:flex;justify-content:space-between;"><span>待处理问诊</span><span class="badge">5</span></div>
                        <div style="padding:16px 0;border-bottom:1px solid #e8e8e8;display:flex;justify-content:space-between;"><span>待复核报告</span><span class="badge">2</span></div>
                        <div style="padding:16px 0;border-bottom:1px solid #e8e8e8;display:flex;justify-content:space-between;"><span>待复诊提醒</span><span style="background:#faad14;color:#fff;padding:2px 8px;border-radius:10px;font-size:12px;">12</span></div>
                        <div style="padding:16px 0;display:flex;justify-content:space-between;"><span>待退款申请</span><span style="background:#ff4d4f;color:#fff;padding:2px 8px;border-radius:10px;font-size:12px;">1</span></div>
                    </div>
                    <div class="card">
                        <div class="card-title">实时动态</div>
                        <div style="padding:12px 0;border-bottom:1px solid #e8e8e8;"><strong>用户张三</strong> 的宠物「旺财」发起AI问诊<span style="float:right;color:#999;font-size:12px;">2分钟前</span></div>
                        <div style="padding:12px 0;border-bottom:1px solid #e8e8e8;"><strong>兽医李医生</strong> 完成问诊回复<span style="float:right;color:#999;font-size:12px;">5分钟前</span></div>
                        <div style="padding:12px 0;border-bottom:1px solid #e8e8e8;"><strong>订单#20240525001</strong> 已完成支付 ¥128<span style="float:right;color:#999;font-size:12px;">8分钟前</span></div>
                        <div style="padding:12px 0;"><strong>ICU设备#03</strong> 宠物「大白」体温异常<span style="float:right;color:#999;font-size:12px;">12分钟前</span></div>
                    </div>
                </div>
            </div>
            
            <!-- 用户导出 -->
            <div id="user-export" class="page">
                <div class="back-btn" onclick="showPage('user-list')">← 返回用户列表</div>
                <div class="card">
                    <div class="card-title">用户导出 <span style="font-size:12px;color:#666;font-weight:normal;">（共 12,856 条记录）</span></div>
                    <div class="search-bar">
                        <select class="form-input" style="width:150px;"><option>全部用户</option><option>近一个月</option><option>近三个月</option></select>
                        <input type="date" class="form-input" style="width:150px;">
                        <span>至</span>
                        <input type="date" class="form-input" style="width:150px;">
                        <button class="btn btn-primary">搜索</button>
                    </div>
                </div>
                <div class="card">
                    <div class="card-title">导出字段选择</div>
                    <div style="display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap;">
                        <label style="display:flex;align-items:center;gap:6px;"><input type="checkbox" checked> 全选</label>
                        <label style="display:flex;align-items:center;gap:6px;"><input type="checkbox" checked> 用户ID</label>
                        <label style="display:flex;align-items:center;gap:6px;"><input type="checkbox" checked> 昵称</label>
                        <label style="display:flex;align-items:center;gap:6px;"><input type="checkbox" checked> 手机号</label>
                        <label style="display:flex;align-items:center;gap:6px;"><input type="checkbox" checked> 宠物数</label>
                        <label style="display:flex;align-items:center;gap:6px;"><input type="checkbox" checked> 积分</label>
                        <label style="display:flex;align-items:center;gap:6px;"><input type="checkbox" checked> 注册时间</label>
                        <label style="display:flex;align-items:center;gap:6px;"><input type="checkbox"> 最后登录</label>
                    </div>
                    <table class="table">
                        <thead><tr><th><input type="checkbox"></th><th>用户ID</th><th>昵称</th><th>手机号</th><th>宠物数</th><th>积分</th><th>注册时间</th><th>最后登录</th><th>状态</th></tr></thead>
                        <tbody>
                            <tr><td><input type="checkbox" checked></td><td>10001</td><td>张三</td><td>13812348888</td><td>2</td><td>1,250</td><td>2024-01-15</td><td>2024-05-25 10:30</td><td><span class="tag tag-green">正常</span></td></tr>
                            <tr><td><input type="checkbox" checked></td><td>10002</td><td>李四</td><td>13912346666</td><td>1</td><td>800</td><td>2024-02-20</td><td>2024-05-24 15:20</td><td><span class="tag tag-green">正常</span></td></tr>
                            <tr><td><input type="checkbox" checked></td><td>10003</td><td>王五</td><td>13712345555</td><td>3</td><td>2,300</td><td>2024-03-10</td><td>2024-05-23 09:15</td><td><span class="tag tag-green">正常</span></td></tr>
                            <tr><td><input type="checkbox" checked></td><td>10004</td><td>赵六</td><td>13612342222</td><td>1</td><td>500</td><td>2024-03-15</td><td>2024-05-22 18:45</td><td><span class="tag tag-green">正常</span></td></tr>
                            <tr><td><input type="checkbox" checked></td><td>10005</td><td>钱七</td><td>13512341111</td><td>4</td><td>3,600</td><td>2024-04-01</td><td>2024-05-21 14:30</td><td><span class="tag tag-green">正常</span></td></tr>
                        </tbody>
                    </table>
                    <div style="margin-top:16px;display:flex;justify-content:space-between;align-items:center;">
                        <span style="color:#666;">已选择 5 条记录</span>
                        <div style="display:flex;gap:12px;">
                            <select class="form-input" style="width:120px;"><option>Excel (.xlsx)</option><option>CSV (.csv)</option><option>PDF (.pdf)</option></select>
                            <button class="btn btn-primary">导出选中</button>
                            <button class="btn btn-default">导出全部</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 用户列表 -->
            <div id="user-list" class="page">
                <div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div>
                <div class="card">
                    <div class="card-title">用户列表</div>
                    <div class="search-bar">
                        <input type="text" class="search-input" placeholder="搜索用户名/手机号">
                        <button class="btn btn-primary">搜索</button>
                        <button class="btn btn-default">导出</button>
                    </div>
                    <table class="table">
                        <thead><tr><th>用户ID</th><th>昵称</th><th>手机号</th><th>宠物数</th><th>积分</th><th>注册时间</th><th>状态</th><th>操作</th></tr></thead>
                        <tbody>
                            <tr><td>10001</td><td>张三</td><td>138****8888</td><td>2</td><td>1,250</td><td>2024-01-15</td><td><span class="tag tag-green">正常</span></td><td><button class="btn btn-default" onclick="showPage('user-detail')">查看</button></td></tr>
                            <tr><td>10002</td><td>李四</td><td>139****6666</td><td>1</td><td>800</td><td>2024-02-20</td><td><span class="tag tag-green">正常</span></td><td><button class="btn btn-default" onclick="showPage('user-detail')">查看</button></td></tr>
                            <tr><td>10003</td><td>王五</td><td>137****5555</td><td>3</td><td>0</td><td>2024-03-10</td><td><span class="tag tag-red">禁用</span></td><td><button class="btn btn-default" onclick="showPage('user-detail')">查看</button></td></tr>
                        </tbody>
                    </table>
                    <div class="pagination">
                        <button class="page-btn">上一页</button>
                        <button class="page-btn active">1</button>
                        <button class="page-btn">2</button>
                        <button class="page-btn">下一页</button>
                    </div>
                </div>
            </div>
            
            <!-- 用户详情 -->
            <div id="user-detail" class="page">
                <div class="back-btn" onclick="showPage('user-list')">← 返回用户列表</div>
                <div class="card">
                    <div class="card-title">用户详情</div>
                    <div style="display:flex;gap:40px;margin-bottom:30px;">
                        <div class="user-avatar">张</div>
                        <div><h3>张三</h3><p style="color:#666;">手机号：138****8888</p><p style="color:#666;">注册时间：2024-01-15</p></div>
                    </div>
                    <div class="tabs"><div class="tab active">宠物信息</div><div class="tab">订单记录</div><div class="tab">积分明细</div></div>
                    <table class="table">
                        <thead><tr><th>宠物名</th><th>种类</th><th>品种</th><th>年龄</th><th>健康状态</th><th>操作</th></tr></thead>
                        <tbody>
                            <tr><td>旺财</td><td>狗</td><td>金毛</td><td>3岁</td><td><span class="tag tag-green">健康</span></td><td><button class="btn btn-default" onclick="showPage('pet-档案')">档案</button></td></tr>
                            <tr><td>小白</td><td>猫</td><td>英短</td><td>2岁</td><td><span class="tag tag-orange">需复查</span></td><td><button class="btn btn-default" onclick="showPage('pet-档案')">档案</button></td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 宠物分类 -->
            <div id="pet-category" class="page">
                <div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div>
                <div class="card">
                    <div class="card-title">宠物分类统计</div>
                    <div class="stat-cards" style="grid-template-columns:repeat(4,1fr);">
                        <div class="stat-card"><div class="label">狗</div><div class="value">8,234</div><div class="trend">占比 45.2%</div></div>
                        <div class="stat-card"><div class="label">猫</div><div class="value">6,890</div><div class="trend">占比 37.8%</div></div>
                        <div class="stat-card"><div class="label">鸟类</div><div class="value">1,234</div><div class="trend">占比 6.8%</div></div>
                        <div class="stat-card"><div class="label">其他</div><div class="value">1,876</div><div class="trend">占比 10.2%</div></div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-title">按品种分布统计</div>
                    <table class="table">
                        <thead><tr><th>种类</th><th>品种</th><th>数量</th><th>占比</th><th>环比</th></tr></thead>
                        <tbody>
                            <tr><td>狗</td><td>金毛</td><td>1,890</td><td>23%</td><td style="color:#52c41a;">↑5%</td></tr>
                            <tr><td>狗</td><td>拉布拉多</td><td>1,456</td><td>18%</td><td style="color:#52c41a;">↑3%</td></tr>
                            <tr><td>狗</td><td>泰迪</td><td>1,234</td><td>15%</td><td style="color:#ff4d4f;">↓2%</td></tr>
                            <tr><td>猫</td><td>英短</td><td>2,100</td><td>30%</td><td style="color:#52c41a;">↑4%</td></tr>
                            <tr><td>猫</td><td>美短</td><td>1,450</td><td>21%</td><td style="color:#52c41a;">↑6%</td></tr>
                            <tr><td>猫</td><td>布偶猫</td><td>1,200</td><td>17%</td><td style="color:#52c41a;">↑10%</td></tr>
                            <tr><td>鸟类</td><td>鹦鹉</td><td>456</td><td>37%</td><td style="color:#52c41a;">↑2%</td></tr>
                            <tr><td>其他</td><td>兔子</td><td>678</td><td>36%</td><td style="color:#52c41a;">↑4%</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 病情统计 -->
            <div id="case-stat" class="page">
                <div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div>
                <div class="card">
                    <div class="card-title">病情分类统计报表</div>
                    <div class="stat-cards" style="grid-template-columns:repeat(4,1fr);">
                        <div class="stat-card"><div class="label">本月记录</div><div class="value">456</div><div class="trend">↑15%</div></div>
                        <div class="stat-card"><div class="label">皮肤病</div><div class="value">156</div><div class="trend">占比 34%</div></div>
                        <div class="stat-card"><div class="label">消化系统</div><div class="value">98</div><div class="trend">占比 22%</div></div>
                        <div class="stat-card"><div class="label">骨科疾病</div><div class="value">67</div><div class="trend">占比 15%</div></div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-title">病情分类统计详情</div>
                    <table class="table">
                        <thead><tr><th>分类</th><th>病种</th><th>本月数量</th><th>上月数量</th><th>环比</th><th>占比</th><th>治愈率</th></tr></thead>
                        <tbody>
                            <tr><td><span class="tag tag-blue">皮肤病</span></td><td>过敏性皮炎</td><td>89</td><td>78</td><td style="color:#52c41a;">↑14%</td><td>19.5%</td><td>92%</td></tr>
                            <tr><td><span class="tag tag-blue">皮肤病</span></td><td>真菌感染</td><td>45</td><td>42</td><td style="color:#52c41a;">↑7%</td><td>9.9%</td><td>88%</td></tr>
                            <tr><td><span class="tag tag-green">消化系统</span></td><td>胃肠炎</td><td>56</td><td>48</td><td style="color:#52c41a;">↑17%</td><td>12.3%</td><td>90%</td></tr>
                            <tr><td><span class="tag tag-green">消化系统</span></td><td>便秘</td><td>28</td><td>30</td><td style="color:#ff4d4f;">↓7%</td><td>6.1%</td><td>94%</td></tr>
                            <tr><td><span class="tag tag-orange">骨科</span></td><td>骨折</td><td>32</td><td>35</td><td style="color:#ff4d4f;">↓9%</td><td>7.0%</td><td>78%</td></tr>
                            <tr><td><span class="tag tag-orange">骨科</span></td><td>关节炎</td><td>21</td><td>18</td><td style="color:#52c41a;">↑17%</td><td>4.6%</td><td>82%</td></tr>
                            <tr><td><span class="tag tag-red">呼吸系统</span></td><td>感冒发烧</td><td>45</td><td>38</td><td style="color:#52c41a;">↑18%</td><td>9.9%</td><td>96%</td></tr>
                            <tr><td><span class="tag tag-red">呼吸系统</span></td><td>肺炎</td><td>18</td><td>22</td><td style="color:#ff4d4f;">↓18%</td><td>3.9%</td><td>72%</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 诊断统计 -->
            <div id="diag-stat" class="page">
                <div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div>
                <div class="card">
                    <div class="card-title">AI诊断统计</div>
                    <div class="stat-cards" style="grid-template-columns:repeat(4,1fr);">
                        <div class="stat-card"><div class="label">总诊断数</div><div class="value">5,678</div><div class="trend">↑18%</div></div>
                        <div class="stat-card"><div class="label">本月诊断</div><div class="value">456</div><div class="trend">今日 23</div></div>
                        <div class="stat-card"><div class="label">准确率</div><div class="value">94.2%</div><div class="trend">↑2.1%</div></div>
                        <div class="stat-card"><div class="label">复核通过率</div><div class="value">98.5%</div><div class="trend">↑0.8%</div></div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-title">诊断记录统计</div>
                    <table class="table">
                        <thead><tr><th>日期</th><th>照片诊断</th><th>视频诊断</th><th>粪便诊断</th><th>总计</th><th>准确数</th><th>准确率</th></tr></thead>
                        <tbody>
                            <tr><td>2024-05-25</td><td>12</td><td>5</td><td>6</td><td>23</td><td>22</td><td>95.7%</td></tr>
                            <tr><td>2024-05-24</td><td>18</td><td>8</td><td>7</td><td>33</td><td>31</td><td>93.9%</td></tr>
                            <tr><td>2024-05-23</td><td>15</td><td>6</td><td>5</td><td>26</td><td>25</td><td>96.2%</td></tr>
                            <tr><td>2024-05-22</td><td>20</td><td>7</td><td>8</td><td>35</td><td>33</td><td>94.3%</td></tr>
                            <tr><td>2024-05-21</td><td>16</td><td>9</td><td>6</td><td>31</td><td>29</td><td>93.5%</td></tr>
                            <tr><td>2024-05-20</td><td>14</td><td>5</td><td>7</td><td>26</td><td>25</td><td>96.2%</td></tr>
                        </tbody>
                    </table>
                    <div class="pagination">
                        <button class="page-btn">上一页</button>
                        <button class="page-btn active">1</button>
                        <button class="page-btn">2</button>
                        <button class="page-btn">下一页</button>
                    </div>
                </div>
            </div>
            
            <!-- 问诊统计 -->
            <div id="consult-stat" class="page">
                <div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div>
                <div class="card">
                    <div class="card-title">AI问诊统计</div>
                    <div class="stat-cards" style="grid-template-columns:repeat(4,1fr);">
                        <div class="stat-card"><div class="label">总问诊量</div><div class="value">3,456</div><div class="trend">↑22%</div></div>
                        <div class="stat-card"><div class="label">今日问诊</div><div class="value">89</div><div class="trend">较昨日 +12</div></div>
                        <div class="stat-card"><div class="label">响应率</div><div class="value">98.5%</div><div class="trend">↑1.2%</div></div>
                        <div class="stat-card"><div class="label">科室数</div><div class="value">12</div></div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-title">问诊记录统计</div>
                    <table class="table">
                        <thead><tr><th>日期</th><th>问诊总数</th><th>已回复</th><th>处理中</th><th>平均响应时间</th><th>满意度</th></tr></thead>
                        <tbody>
                            <tr><td>2024-05-25</td><td>89</td><td>78</td><td>11</td><td>2.3分钟</td><td>95.2%</td></tr>
                            <tr><td>2024-05-24</td><td>95</td><td>92</td><td>3</td><td>2.1分钟</td><td>96.8%</td></tr>
                            <tr><td>2024-05-23</td><td>86</td><td>85</td><td>1</td><td>1.9分钟</td><td>97.1%</td></tr>
                            <tr><td>2024-05-22</td><td>102</td><td>99</td><td>3</td><td>2.5分钟</td><td>94.5%</td></tr>
                            <tr><td>2024-05-21</td><td>98</td><td>96</td><td>2</td><td>2.0分钟</td><td>96.2%</td></tr>
                            <tr><td>2024-05-20</td><td>88</td><td>87</td><td>1</td><td>1.8分钟</td><td>97.5%</td></tr>
                        </tbody>
                    </table>
                </div>
                <div class="card">
                    <div class="card-title">科室问诊分布</div>
                    <table class="table">
                        <thead><tr><th>科室</th><th>问诊量</th><th>占比</th><th>环比</th></tr></thead>
                        <tbody>
                            <tr><td>内科</td><td>1,234</td><td>35.7%</td><td style="color:#52c41a;">↑8%</td></tr>
                            <tr><td>皮肤科</td><td>856</td><td>24.8%</td><td style="color:#52c41a;">↑12%</td></tr>
                            <tr><td>外科</td><td>567</td><td>16.4%</td><td style="color:#ff4d4f;">↓3%</td></tr>
                            <tr><td>眼科</td><td>345</td><td>10.0%</td><td style="color:#52c41a;">↑5%</td></tr>
                            <tr><td>营养科</td><td>234</td><td>6.8%</td><td style="color:#52c41a;">↑15%</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- ICU监控 -->
            <div id="icu-monitor" class="page">
                <div class="back-btn" onclick="showPage('icu-list')">← 返回ICU列表</div>
                <div class="card">
                    <div class="card-title">ICU宠物监控</div>
                    <div style="display:flex;gap:40px;margin-bottom:20px;">
                        <div style="width:280px;height:200px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;flex-direction:column;">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                            <span style="margin-top:8px;">● 直播中</span>
                        </div>
                        <div>
                            <h3>宠物：小白</h3>
                            <p style="color:#666;margin:8px 0;">品种：萨摩耶 | 性别：公 | 年龄：5岁</p>
                            <p style="color:#666;margin:8px 0;">主人：张三 | 手机：138****8888</p>
                            <p style="color:#666;margin:8px 0;">入住时间：2024-05-23 14:30</p>
                            <p style="color:#666;margin:8px 0;">入住天数：<span style="color:#1890ff;font-weight:bold;">3天</span></p>
                            <p style="color:#666;margin:8px 0;">主治兽医：<span style="color:#52c41a;">李医生</span></p>
                        </div>
                    </div>
                    <div class="stat-cards" style="grid-template-columns:repeat(4,1fr);">
                        <div class="stat-card"><div class="label">体温</div><div class="value">38.5°C</div><div class="trend" style="color:#52c41a;">正常</div></div>
                        <div class="stat-card"><div class="label">心率</div><div class="value">85 BPM</div><div class="trend" style="color:#52c41a;">正常</div></div>
                        <div class="stat-card"><div class="label">呼吸率</div><div class="value">22/min</div><div class="trend" style="color:#52c41a;">正常</div></div>
                        <div class="stat-card"><div class="label">血氧</div><div class="value">98%</div><div class="trend" style="color:#52c41a;">正常</div></div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-title">实时视频监控</div>
                    <div class="video-grid">
                        <div style="background:#333;border-radius:8px;overflow:hidden;">
                            <div style="padding:12px;background:rgba(0,0,0,0.5);color:#fff;display:flex;justify-content:space-between;"><strong>摄像头 1 - 全景</strong><span class="tag tag-green">● 正常</span></div>
                            <div style="height:180px;display:flex;align-items:center;justify-content:center;color:#fff;">实时画面</div>
                        </div>
                        <div style="background:#333;border-radius:8px;overflow:hidden;">
                            <div style="padding:12px;background:rgba(0,0,0,0.5);color:#fff;display:flex;justify-content:space-between;"><strong>摄像头 2 - 特写</strong><span class="tag tag-green">● 正常</span></div>
                            <div style="height:180px;display:flex;align-items:center;justify-content:center;color:#fff;">实时画面</div>
                        </div>
                    </div>
                    <div style="margin-top:16px;display:flex;gap:12px;">
                        <button class="btn btn-primary">全屏</button>
                        <button class="btn btn-default">截图</button>
                        <button class="btn btn-default">录制</button>
                        <button class="btn btn-default">回放</button>
                    </div>
                </div>
            </div>
            
            <!-- 视频管理 -->
            <div id="icu-video" class="page">
                <div class="back-btn" onclick="showPage('icu-list')">← 返回ICU列表</div>
                <div class="card">
                    <div class="card-title">ICU视频直播管理</div>
                    <div style="display:flex;gap:20px;margin-bottom:20px;padding:16px;background:#fafafa;border-radius:8px;flex-wrap:wrap;">
                        <div style="flex:1;min-width:200px;">
                            <div style="color:#666;font-size:12px;margin-bottom:4px;">直播总开关</div>
                            <label style="display:flex;align-items:center;gap:8px;"><input type="checkbox" checked> 启用直播功能</label>
                        </div>
                        <div style="flex:1;min-width:200px;">
                            <div style="color:#666;font-size:12px;margin-bottom:4px;">观看密码</div>
                            <input type="text" class="form-input" style="width:150px;" value="123456">
                        </div>
                        <div style="flex:1;min-width:200px;">
                            <div style="color:#666;font-size:12px;margin-bottom:4px;">自动录制</div>
                            <label style="display:flex;align-items:center;gap:8px;"><input type="checkbox" checked> 启用自动录制</label>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-title">设备视频列表</div>
                    <table class="table">
                        <thead><tr><th>设备</th><th>状态</th><th>当前宠物</th><th>摄像头</th><th>最后活动</th><th>录制状态</th><th>操作</th></tr></thead>
                        <tbody>
                            <tr><td>ICU-01</td><td><span class="tag tag-green">在线</span></td><td>小白</td><td><span style="color:#52c41a;">●</span> 2路</td><td>2024-05-25 10:45</td><td><span class="tag tag-green">录制中</span></td><td><button class="btn btn-default">查看</button><button class="btn btn-default">回放</button></td></tr>
                            <tr><td>ICU-02</td><td><span class="tag tag-green">在线</span></td><td>大黄</td><td><span style="color:#52c41a;">●</span> 2路</td><td>2024-05-25 10:42</td><td><span class="tag tag-green">录制中</span></td><td><button class="btn btn-default">查看</button><button class="btn btn-default">回放</button></td></tr>
                            <tr><td>ICU-03</td><td><span class="tag tag-orange">待机</span></td><td>-</td><td><span style="color:#faad14;">●</span> 2路</td><td>2024-05-25 08:00</td><td><span class="tag tag-blue">待机</span></td><td><button class="btn btn-default">查看</button><button class="btn btn-default">回放</button></td></tr>
                            <tr><td>ICU-04</td><td><span class="tag tag-red">离线</span></td><td>-</td><td><span style="color:#ff4d4f;">●</span> 0路</td><td>2024-05-24 18:00</td><td><span class="tag tag-red">离线</span></td><td><button class="btn btn-default" disabled>查看</button><button class="btn btn-default" disabled>回放</button></td></tr>
                        </tbody>
                    </table>
                </div>
                <div class="card">
                    <div class="card-title">视频回放记录</div>
                    <table class="table">
                        <thead><tr><th>设备</th><th>宠物</th><th>开始时间</th><th>结束时间</th><th>时长</th><th>文件大小</th><th>操作</th></tr></thead>
                        <tbody>
                            <tr><td>ICU-01</td><td>小白</td><td>2024-05-25 08:00</td><td>2024-05-25 10:45</td><td>2小时45分</td><td>2.3GB</td><td><button class="btn btn-primary">播放</button><button class="btn btn-default">下载</button></td></tr>
                            <tr><td>ICU-02</td><td>大黄</td><td>2024-05-25 07:00</td><td>2024-05-25 10:42</td><td>3小时42分</td><td>3.1GB</td><td><button class="btn btn-primary">播放</button><button class="btn btn-default">下载</button></td></tr>
                            <tr><td>ICU-01</td><td>小白</td><td>2024-05-24 14:00</td><td>2024-05-24 20:00</td><td>6小时0分</td><td>5.2GB</td><td><button class="btn btn-primary">播放</button><button class="btn btn-default">下载</button></td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 订单详情 -->
            <div id="order-detail" class="page">
                <div class="back-btn" onclick="showPage('order-list')">← 返回订单列表</div>
                <div class="card">
                    <div class="card-title">订单详情 - ORD20240525001</div>
                    <div class="grid-2">
                        <div>
                            <h4 style="margin-bottom:12px;color:#333;">订单信息</h4>
                            <p style="margin:8px 0;"><strong>订单号：</strong>ORD20240525001</p>
                            <p style="margin:8px 0;"><strong>用户：</strong>张三</p>
                            <p style="margin:8px 0;"><strong>手机：</strong>13812348888</p>
                            <p style="margin:8px 0;"><strong>宠物：</strong>旺财（金毛）</p>
                            <p style="margin:8px 0;"><strong>服务项目：</strong>疫苗接种</p>
                            <p style="margin:8px 0;"><strong>兽医：</strong>李医生</p>
                            <p style="margin:8px 0;"><strong>预约时间：</strong>2024-05-25 14:00</p>
                        </div>
                        <div>
                            <h4 style="margin-bottom:12px;color:#333;">支付信息</h4>
                            <p style="margin:8px 0;"><strong>订单金额：</strong>¥128.00</p>
                            <p style="margin:8px 0;"><strong>优惠金额：</strong>¥0.00</p>
                            <p style="margin:8px 0;"><strong>实付金额：</strong><span style="color:#ff4d4f;font-size:18px;font-weight:bold;">¥128.00</span></p>
                            <p style="margin:8px 0;"><strong>支付方式：</strong>微信支付</p>
                            <p style="margin:8px 0;"><strong>支付时间：</strong>2024-05-25 10:30:22</p>
                            <p style="margin:8px 0;"><strong>订单状态：</strong><span class="tag tag-green">已完成</span></p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-title">订单商品明细</div>
                    <table class="table">
                        <thead><tr><th>商品/服务</th><th>单价</th><th>数量</th><th>小计</th></tr></thead>
                        <tbody>
                            <tr><td>犬类疫苗接种（进口）</td><td>¥80.00</td><td>1</td><td>¥80.00</td></tr>
                            <tr><td>疫苗接种服务费</td><td>¥48.00</td><td>1</td><td>¥48.00</td></tr>
                        </tbody>
                    </table>
                </div>
                <div class="card">
                    <div class="card-title">订单操作记录</div>
                    <table class="table">
                        <thead><tr><th>时间</th><th>操作</th><th>操作人</th><th>备注</th></tr></thead>
                        <tbody>
                            <tr><td>2024-05-25 10:30:22</td><td>创建订单</td><td>系统</td><td>用户下单</td></tr>
                            <tr><td>2024-05-25 10:30:25</td><td>支付成功</td><td>微信支付</td><td>支付金额¥128.00</td></tr>
                            <tr><td>2024-05-25 14:00:00</td><td>服务完成</td><td>李医生</td><td>疫苗接种完成</td></tr>
                            <tr><td>2024-05-25 14:05:30</td><td>订单完成</td><td>系统</td><td>自动确认完成</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 订单统计 -->
            <div id="order-stat" class="page">
                <div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div>
                <div class="card">
                    <div class="card-title">订单统计</div>
                    <div class="stat-cards">
                        <div class="stat-card"><div class="label">总订单量</div><div class="value">1,234</div><div class="trend">↑18%</div></div>
                        <div class="stat-card"><div class="label">本月订单</div><div class="value">156</div><div class="trend">今日 23</div></div>
                        <div class="stat-card"><div class="label">总销售额</div><div class="value">¥89,456</div><div class="trend">↑15%</div></div>
                        <div class="stat-card"><div class="label">退款率</div><div class="value">2.3%</div><div class="trend">↓0.5%</div></div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-title">订单统计明细</div>
                    <table class="table">
                        <thead><tr><th>日期</th><th>订单数</th><th>销售额</th><th>已完成</th><th>进行中</th><th>已退款</th><th>客单价</th></tr></thead>
                        <tbody>
                            <tr><td>2024-05-25</td><td>23</td><td>¥3,456</td><td>18</td><td>5</td><td>0</td><td>¥150.26</td></tr>
                            <tr><td>2024-05-24</td><td>28</td><td>¥4,123</td><td>25</td><td>2</td><td>1</td><td>¥147.25</td></tr>
                            <tr><td>2024-05-23</td><td>25</td><td>¥3,890</td><td>23</td><td>2</td><td>0</td><td>¥155.60</td></tr>
                            <tr><td>2024-05-22</td><td>32</td><td>¥4,567</td><td>28</td><td>3</td><td>1</td><td>¥142.72</td></tr>
                            <tr><td>2024-05-21</td><td>26</td><td>¥3,980</td><td>24</td><td>2</td><td>0</td><td>¥153.08</td></tr>
                            <tr><td>2024-05-20</td><td>22</td><td>¥3,340</td><td>20</td><td>2</td><td>0</td><td>¥151.82</td></tr>
                        </tbody>
                    </table>
                </div>
                <div class="card">
                    <div class="card-title">服务类型分布</div>
                    <table class="table">
                        <thead><tr><th>服务类型</th><th>订单数</th><th>销售额</th><th>占比</th><th>环比</th></tr></thead>
                        <tbody>
                            <tr><td>疫苗接种</td><td>456</td><td>¥36,480</td><td>40.8%</td><td style="color:#52c41a;">↑5%</td></tr>
                            <tr><td>体检服务</td><td>289</td><td>¥28,900</td><td>25.6%</td><td style="color:#52c41a;">↑12%</td></tr>
                            <tr><td>诊疗服务</td><td>234</td><td>¥12,340</td><td>13.8%</td><td style="color:#ff4d4f;">↓3%</td></tr>
<tr><td>美容护理</td><td>156</td><td>¥7,800</td><td>8.7%</td><td style="color:#52c41a;">↑8%</td></tr>
                            <tr><td>商品销售</td><td>99</td><td>¥4,356</td><td>4.9%</td><td style="color:#52c41a;">↑15%</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 营业统计 -->
            <div id="biz-stat" class="page">
                <div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div>
                <div class="card">
                    <div class="card-title">每日/每月营业额统计</div>
                    <div class="stat-cards" style="grid-template-columns:repeat(2,1fr);">
                        <div class="stat-card"><div class="label">今日营收</div><div class="value">¥8,560</div><div class="trend">↑12%</div></div>
                        <div class="stat-card"><div class="label">本月累计</div><div class="value">¥256,890</div><div class="trend">↑15%</div></div>
                    </div>
                    <div style="height:250px;background:#fafafa;border-radius:8px;padding:20px;position:relative;">
                        <div style="display:flex;justify-content:space-between;margin-bottom:10px;">
                            <span style="font-weight:600;">近30天营收趋势</span>
                            <div style="display:flex;gap:20px;font-size:12px;">
                                <span><span style="display:inline-block;width:12px;height:12px;background:#1890ff;border-radius:2px;margin-right:4px;vertical-align:middle;"></span>日营收</span>
                                <span><span style="display:inline-block;width:12px;height:12px;background:#52c41a;border-radius:2px;margin-right:4px;vertical-align:middle;"></span>月累计</span>
                            </div>
                        </div>
                        <svg width="100%" height="180" viewBox="0 0 800 180">
                            <defs>
                                <linearGradient id="blueGrad" x1="0%" y1="0%" x2="0%" y2="100%">
                                    <stop offset="0%" style="stop-color:#1890ff;stop-opacity:0.3"/>
                                    <stop offset="100%" style="stop-color:#1890ff;stop-opacity:0"/>
                                </linearGradient>
                                <linearGradient id="greenGrad" x1="0%" y1="0%" x2="0%" y2="100%">
                                    <stop offset="0%" style="stop-color:#52c41a;stop-opacity:0.3"/>
                                    <stop offset="100%" style="stop-color:#52c41a;stop-opacity:0"/>
                                </linearGradient>
                            </defs>
                            <!-- Y轴 -->
                            <line x1="40" y1="20" x2="40" y2="150" stroke="#e8e8e8" stroke-width="1"/>
                            <!-- X轴 -->
                            <line x1="40" y1="150" x2="780" y2="150" stroke="#e8e8e8" stroke-width="1"/>
                            <!-- Y轴刻度 -->
                            <text x="35" y="25" font-size="10" fill="#999" text-anchor="end">50k</text>
                            <text x="35" y="55" font-size="10" fill="#999" text-anchor="end">40k</text>
                            <text x="35" y="85" font-size="10" fill="#999" text-anchor="end">30k</text>
                            <text x="35" y="115" font-size="10" fill="#999" text-anchor="end">20k</text>
                            <text x="35" y="145" font-size="10" fill="#999" text-anchor="end">10k</text>
                            <!-- 日营收折线(蓝色) -->
                            <path d="M50,120 L80,110 L110,100 L140,95 L170,105 L200,90 L230,85 L260,80 L290,88 L320,75 L350,82 L380,70 L410,78 L440,65 L470,72 L500,68 L530,60 L560,65 L590,55 L620,62 L650,50 L680,58 L710,48 L740,52 L770,45" fill="none" stroke="#1890ff" stroke-width="2"/>
                            <path d="M50,120 L80,110 L110,100 L140,95 L170,105 L200,90 L230,85 L260,80 L290,88 L320,75 L350,82 L380,70 L410,78 L440,65 L470,72 L500,68 L530,60 L560,65 L590,55 L620,62 L650,50 L680,58 L710,48 L740,52 L770,45 L770,150 L50,150 Z" fill="url(#blueGrad)"/>
                            <!-- 数据点 -->
                            <circle cx="50" cy="120" r="4" fill="#1890ff"/>
                            <circle cx="170" cy="105" r="4" fill="#1890ff"/>
                            <circle cx="290" cy="88" r="4" fill="#1890ff"/>
                            <circle cx="410" cy="78" r="4" fill="#1890ff"/>
                            <circle cx="530" cy="60" r="4" fill="#1890ff"/>
                            <circle cx="650" cy="50" r="4" fill="#1890ff"/>
                            <circle cx="770" cy="45" r="4" fill="#1890ff"/>
                            <!-- X轴日期 -->
                            <text x="50" y="165" font-size="9" fill="#999">5/1</text>
                            <text x="170" y="165" font-size="9" fill="#999">5/7</text>
                            <text x="290" y="165" font-size="9" fill="#999">5/13</text>
                            <text x="410" y="165" font-size="9" fill="#999">5/19</text>
                            <text x="530" y="165" font-size="9" fill="#999">5/25</text>
                            <text x="650" y="165" font-size="9" fill="#999">5/30</text>
                            <text x="770" y="165" font-size="9" fill="#999">6/4</text>
                        </svg>
                    </div>
                </div>
                <div class="card">
                    <div class="card-title">近7天营收明细</div>
                    <table class="table">
                        <thead><tr><th>日期</th><th>订单数</th><th>营业额</th><th>环比</th></tr></thead>
                        <tbody>
                            <tr><td>2024-05-25</td><td>23</td><td>¥8,560</td><td style="color:#52c41a;">↑5%</td></tr>
                            <tr><td>2024-05-24</td><td>28</td><td>¥10,230</td><td style="color:#52c41a;">↑12%</td></tr>
                            <tr><td>2024-05-23</td><td>25</td><td>¥9,150</td><td style="color:#ff4d4f;">↓3%</td></tr>
                            <tr><td>2024-05-22</td><td>32</td><td>¥11,890</td><td style="color:#52c41a;">↑18%</td></tr>
                            <tr><td>2024-05-21</td><td>26</td><td>¥9,340</td><td style="color:#52c41a;">↑8%</td></tr>
                            <tr><td>2024-05-20</td><td>22</td><td>¥8,670</td><td style="color:#52c41a;">↑4%</td></tr>
                            <tr><td>2024-05-19</td><td>20</td><td>¥8,330</td><td style="color:#52c41a;">↑2%</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 用户统计 -->
            <div id="user-stat" class="page">
                <div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div>
                <div class="card">
                    <div class="card-title">用户增长/活跃度统计</div>
                    <div class="stat-cards" style="grid-template-columns:repeat(3,1fr);">
                        <div class="stat-card"><div class="label">总用户</div><div class="value">12,856</div><div class="trend">↑12.5%</div></div>
                        <div class="stat-card"><div class="label">月活用户</div><div class="value">8,234</div><div class="trend">↑8.3%</div></div>
                        <div class="stat-card"><div class="label">新增用户</div><div class="value">456</div><div class="trend">↑15.2%</div></div>
                    </div>
                    <div style="height:250px;background:#fafafa;border-radius:8px;padding:20px;position:relative;">
                        <div style="display:flex;justify-content:space-between;margin-bottom:10px;">
                            <span style="font-weight:600;">用户增长趋势（近30天）</span>
                            <div style="display:flex;gap:20px;font-size:12px;">
                                <span><span style="display:inline-block;width:12px;height:12px;background:#1890ff;border-radius:2px;margin-right:4px;vertical-align:middle;"></span>总用户</span>
                                <span><span style="display:inline-block;width:12px;height:12px;background:#52c41a;border-radius:2px;margin-right:4px;vertical-align:middle;"></span>月活</span>
                                <span><span style="display:inline-block;width:12px;height:12px;background:#faad14;border-radius:2px;margin-right:4px;vertical-align:middle;"></span>新增</span>
                            </div>
                        </div>
                        <svg width="100%" height="180" viewBox="0 0 800 180">
                            <defs>
                                <linearGradient id="userBlueGrad" x1="0%" y1="0%" x2="0%" y2="100%">
                                    <stop offset="0%" style="stop-color:#1890ff;stop-opacity:0.3"/>
                                    <stop offset="100%" style="stop-color:#1890ff;stop-opacity:0"/>
                                </linearGradient>
                                <linearGradient id="userGreenGrad" x1="0%" y1="0%" x2="0%" y2="100%">
                                    <stop offset="0%" style="stop-color:#52c41a;stop-opacity:0.3"/>
                                    <stop offset="100%" style="stop-color:#52c41a;stop-opacity:0"/>
                                </linearGradient>
                            </defs>
                            <!-- Y轴 -->
                            <line x1="50" y1="20" x2="50" y2="150" stroke="#e8e8e8" stroke-width="1"/>
                            <!-- X轴 -->
                            <line x1="50" y1="150" x2="780" y2="150" stroke="#e8e8e8" stroke-width="1"/>
                            <!-- Y轴刻度 -->
                            <text x="45" y="25" font-size="10" fill="#999" text-anchor="end">14k</text>
                            <text x="45" y="65" font-size="10" fill="#999" text-anchor="end">12k</text>
                            <text x="45" y="105" font-size="10" fill="#999" text-anchor="end">10k</text>
                            <text x="45" y="145" font-size="10" fill="#999" text-anchor="end">8k</text>
                            <!-- 总用户折线(蓝色) -->
                            <path d="M60,120 L100,115 L140,108 L180,100 L220,92 L260,85 L300,78 L340,72 L380,65 L420,60 L460,55 L500,50 L540,48 L580,42 L620,38 L660,35 L700,32 L740,28 L780,25" fill="none" stroke="#1890ff" stroke-width="2"/>
                            <path d="M60,120 L100,115 L140,108 L180,100 L220,92 L260,85 L300,78 L340,72 L380,65 L420,60 L460,55 L500,50 L540,48 L580,42 L620,38 L660,35 L700,32 L740,28 L780,25 L780,150 L60,150 Z" fill="url(#userBlueGrad)"/>
                            <!-- 月活折线(绿色) -->
                            <path d="M60,130 L100,125 L140,120 L180,112 L220,105 L260,98 L300,92 L340,88 L380,82 L420,78 L460,72 L500,68 L540,65 L580,60 L620,58 L660,55 L700,52 L740,50 L780,48" fill="none" stroke="#52c41a" stroke-width="2"/>
                            <path d="M60,130 L100,125 L140,120 L180,112 L220,105 L260,98 L300,92 L340,88 L380,82 L420,78 L460,72 L500,68 L540,65 L580,60 L620,58 L660,55 L700,52 L740,50 L780,48 L780,150 L60,150 Z" fill="url(#userGreenGrad)"/>
                            <!-- 新增柱状(橙色) -->
                            <rect x="55" y="140" width="15" height="10" fill="#faad14" opacity="0.8"/>
                            <rect x="95" y="135" width="15" height="15" fill="#faad14" opacity="0.8"/>
                            <rect x="135" y="138" width="15" height="12" fill="#faad14" opacity="0.8"/>
                            <rect x="175" y="132" width="15" height="18" fill="#faad14" opacity="0.8"/>
                            <rect x="215" y="130" width="15" height="20" fill="#faad14" opacity="0.8"/>
                            <rect x="255" y="135" width="15" height="15" fill="#faad14" opacity="0.8"/>
                            <rect x="295" y="128" width="15" height="22" fill="#faad14" opacity="0.8"/>
                            <rect x="335" y="125" width="15" height="25" fill="#faad14" opacity="0.8"/>
                            <rect x="375" y="130" width="15" height="20" fill="#faad14" opacity="0.8"/>
                            <rect x="415" y="122" width="15" height="28" fill="#faad14" opacity="0.8"/>
                            <rect x="455" y="118" width="15" height="32" fill="#faad14" opacity="0.8"/>
                            <rect x="495" y="125" width="15" height="25" fill="#faad14" opacity="0.8"/>
                            <rect x="535" y="120" width="15" height="30" fill="#faad14" opacity="0.8"/>
                            <rect x="575" y="115" width="15" height="35" fill="#faad14" opacity="0.8"/>
                            <rect x="615" y="118" width="15" height="32" fill="#faad14" opacity="0.8"/>
                            <rect x="655" y="112" width="15" height="38" fill="#faad14" opacity="0.8"/>
                            <rect x="695" y="108" width="15" height="42" fill="#faad14" opacity="0.8"/>
                            <rect x="735" y="105" width="15" height="45" fill="#faad14" opacity="0.8"/>
                            <rect x="775" y="100" width="15" height="50" fill="#faad14"/>
                            <!-- 数据点 -->
                            <circle cx="60" cy="120" r="3" fill="#1890ff"/>
                            <circle cx="220" cy="92" r="3" fill="#1890ff"/>
                            <circle cx="380" cy="65" r="3" fill="#1890ff"/>
                            <circle cx="540" cy="48" r="3" fill="#1890ff"/>
                            <circle cx="700" cy="32" r="3" fill="#1890ff"/>
                            <circle cx="780" cy="25" r="3" fill="#1890ff"/>
                            <!-- X轴日期 -->
                            <text x="60" y="165" font-size="9" fill="#999">5/1</text>
                            <text x="220" y="165" font-size="9" fill="#999">5/7</text>
                            <text x="380" y="165" font-size="9" fill="#999">5/13</text>
                            <text x="540" y="165" font-size="9" fill="#999">5/19</text>
                            <text x="700" y="165" font-size="9" fill="#999">5/25</text>
                            <text x="780" y="165" font-size="9" fill="#999">6/4</text>
                        </svg>
                    </div>
                </div>
                <div class="card">
                    <div class="card-title">用户活跃度分析</div>
                    <table class="table">
                        <thead><tr><th>活跃度</th><th>用户数</th><th>占比</th><th>趋势</th></tr></thead>
                        <tbody>
                            <tr><td>高度活跃（每天）</td><td>2,345</td><td>18.2%</td><td style="color:#52c41a;">↑5%</td></tr>
                            <tr><td>中度活跃（每周）</td><td>3,890</td><td>30.3%</td><td style="color:#52c41a;">↑8%</td></tr>
                            <tr><td>轻度活跃（每月）</td><td>4,234</td><td>32.9%</td><td style="color:#52c41a;">↑3%</td></tr>
                            <tr><td>沉默用户（3月+）</td><td>2,387</td><td>18.6%</td><td style="color:#ff4d4f;">↓2%</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 宠物统计 -->
            <div id="pet-stat" class="page">
                <div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div>
                <div class="card">
                    <div class="card-title">宠物数量/种类分布统计</div>
                    <div class="stat-cards" style="grid-template-columns:repeat(3,1fr);">
                        <div class="stat-card"><div class="label">宠物总数</div><div class="value">18,234</div><div class="trend">↑8.3%</div></div>
                        <div class="stat-card"><div class="label">本月新增</div><div class="value">1,234</div><div class="trend">↑12%</div></div>
                        <div class="stat-card"><div class="label">种类数</div><div class="value">89</div></div>
                    </div>
                    <div style="height:250px;background:#fafafa;border-radius:8px;padding:20px;position:relative;">
                        <div style="display:flex;justify-content:space-between;margin-bottom:10px;">
                            <span style="font-weight:600;">宠物种类分布（近6个月）</span>
                            <div style="display:flex;gap:20px;font-size:12px;">
                                <span><span style="display:inline-block;width:12px;height:12px;background:#1890ff;border-radius:2px;margin-right:4px;vertical-align:middle;"></span>狗</span>
                                <span><span style="display:inline-block;width:12px;height:12px;background:#52c41a;border-radius:2px;margin-right:4px;vertical-align:middle;"></span>猫</span>
                                <span><span style="display:inline-block;width:12px;height:12px;background:#faad14;border-radius:2px;margin-right:4px;vertical-align:middle;"></span>其他</span>
                            </div>
                        </div>
                        <svg width="100%" height="180" viewBox="0 0 800 180">
                            <defs>
                                <linearGradient id="petBlueGrad" x1="0%" y1="0%" x2="0%" y2="100%">
                                    <stop offset="0%" style="stop-color:#1890ff;stop-opacity:0.3"/>
                                    <stop offset="100%" style="stop-color:#1890ff;stop-opacity:0"/>
                                </linearGradient>
                                <linearGradient id="petGreenGrad" x1="0%" y1="0%" x2="0%" y2="100%">
                                    <stop offset="0%" style="stop-color:#52c41a;stop-opacity:0.3"/>
                                    <stop offset="100%" style="stop-color:#52c41a;stop-opacity:0"/>
                                </linearGradient>
                            </defs>
                            <!-- Y轴 -->
                            <line x1="60" y1="20" x2="60" y2="150" stroke="#e8e8e8" stroke-width="1"/>
                            <!-- X轴 -->
                            <line x1="60" y1="150" x2="780" y2="150" stroke="#e8e8e8" stroke-width="1"/>
                            <!-- Y轴刻度 -->
                            <text x="55" y="25" font-size="10" fill="#999" text-anchor="end">20k</text>
                            <text x="55" y="55" font-size="10" fill="#999" text-anchor="end">15k</text>
                            <text x="55" y="85" font-size="10" fill="#999" text-anchor="end">10k</text>
                            <text x="55" y="115" font-size="10" fill="#999" text-anchor="end">5k</text>
                            <text x="55" y="145" font-size="10" fill="#999" text-anchor="end">0</text>
                            <!-- 狗数量折线(蓝色) - 从7k增长到8.2k -->
                            <path d="M80,115 L180,108 L280,100 L380,92 L480,85 L580,78 L680,70 L780,62" fill="none" stroke="#1890ff" stroke-width="2"/>
                            <path d="M80,115 L180,108 L280,100 L380,92 L480,85 L580,78 L680,70 L780,62 L780,150 L80,150 Z" fill="url(#petBlueGrad)"/>
                            <!-- 猫数量折线(绿色) - 从5.5k增长到6.9k -->
                            <path d="M80,128 L180,122 L280,115 L380,108 L480,100 L580,92 L680,85 L780,78" fill="none" stroke="#52c41a" stroke-width="2"/>
                            <path d="M80,128 L180,122 L280,115 L380,108 L480,100 L580,92 L680,85 L780,78 L780,150 L80,150 Z" fill="url(#petGreenGrad)"/>
                            <!-- 其他数量柱状(橙色) -->
                            <rect x="75" y="135" width="25" height="15" fill="#faad14" opacity="0.8"/>
                            <rect x="175" y="132" width="25" height="18" fill="#faad14" opacity="0.8"/>
                            <rect x="275" y="130" width="25" height="20" fill="#faad14" opacity="0.8"/>
                            <rect x="375" y="128" width="25" height="22" fill="#faad14" opacity="0.8"/>
                            <rect x="475" y="125" width="25" height="25" fill="#faad14" opacity="0.8"/>
                            <rect x="575" y="122" width="25" height="28" fill="#faad14" opacity="0.8"/>
                            <rect x="675" y="118" width="25" height="32" fill="#faad14" opacity="0.8"/>
                            <rect x="775" y="115" width="25" height="35" fill="#faad14"/>
                            <!-- 数据点 -->
                            <circle cx="80" cy="115" r="3" fill="#1890ff"/>
                            <circle cx="280" cy="100" r="3" fill="#1890ff"/>
                            <circle cx="480" cy="85" r="3" fill="#1890ff"/>
                            <circle cx="680" cy="70" r="3" fill="#1890ff"/>
                            <circle cx="780" cy="62" r="3" fill="#1890ff"/>
                            <!-- X轴月份 -->
                            <text x="80" y="165" font-size="10" fill="#999" text-anchor="middle">1月</text>
                            <text x="180" y="165" font-size="10" fill="#999" text-anchor="middle">2月</text>
                            <text x="280" y="165" font-size="10" fill="#999" text-anchor="middle">3月</text>
                            <text x="380" y="165" font-size="10" fill="#999" text-anchor="middle">4月</text>
                            <text x="480" y="165" font-size="10" fill="#999" text-anchor="middle">5月</text>
                            <text x="580" y="165" font-size="10" fill="#999" text-anchor="middle">6月</text>
                            <text x="680" y="165" font-size="10" fill="#999" text-anchor="middle">7月</text>
                            <text x="780" y="165" font-size="10" fill="#999" text-anchor="middle">8月</text>
                        </svg>
                    </div>
                </div>
                <div class="card">
                    <div class="card-title">宠物增长趋势</div>
                    <table class="table">
                        <thead><tr><th>月份</th><th>新增宠物</th><th>累计总数</th><th>环比增长</th></tr></thead>
                        <tbody>
                            <tr><td>2024-05</td><td>1,234</td><td>18,234</td><td style="color:#52c41a;">↑8.3%</td></tr>
                            <tr><td>2024-04</td><td>1,156</td><td>17,000</td><td style="color:#52c41a;">↑7.5%</td></tr>
                            <tr><td>2024-03</td><td>1,089</td><td>15,844</td><td style="color:#52c41a;">↑6.2%</td></tr>
                            <tr><td>2024-02</td><td>980</td><td>14,755</td><td style="color:#52c41a;">↑5.8%</td></tr>
                            <tr><td>2024-01</td><td>920</td><td>13,775</td><td style="color:#52c41a;">↑4.5%</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 其他页面保持原有结构 -->
            <div id="pet-list" class="page"><div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div><div class="card"><div class="card-title">宠物列表</div><div class="search-bar"><input type="text" class="search-input" placeholder="搜索宠物名/主人"><button class="btn btn-primary">搜索</button></div><table class="table"><thead><tr><th>宠物ID</th><th>宠物名</th><th>种类</th><th>品种</th><th>主人</th><th>年龄</th><th>健康状态</th><th>操作</th></tr></thead><tbody><tr><td>P001</td><td>旺财</td><td>狗</td><td>金毛</td><td>张三</td><td>3岁</td><td><span class="tag tag-green">健康</span></td><td><button class="btn btn-default" onclick="showPage('pet-档案')">查看</button></td></tr><tr><td>P002</td><td>小白</td><td>猫</td><td>英短</td><td>张三</td><td>2岁</td><td><span class="tag tag-orange">需复查</span></td><td><button class="btn btn-default" onclick="showPage('pet-档案')">查看</button></td></tr></tbody></table></div></div>
            
            <div id="pet-档案" class="page"><div class="back-btn" onclick="showPage('pet-list')">← 返回宠物列表</div><div class="card"><div class="card-title">宠物档案 - 旺财</div><div style="display:flex;gap:40px;margin-bottom:20px;"><div style="width:120px;height:120px;background:#f0f0f0;border-radius:8px;display:flex;align-items:center;justify-content:center;">宠物照片</div><div><h3>旺财</h3><p style="color:#666;">种类：狗 | 品种：金毛 | 性别：公</p><p style="color:#666;">年龄：3岁 | 体重：25kg</p><p style="color:#666;">主人：张三 | 手机：138****8888</p></div></div><div class="tabs"><div class="tab active">健康档案</div><div class="tab">病史记录</div></div><table class="table"><thead><tr><th>日期</th><th>项目</th><th>结果</th><th>兽医</th></tr></thead><tbody><tr><td>2024-05-10</td><td>疫苗接种</td><td>已接种</td><td>李医生</td></tr><tr><td>2024-04-15</td><td>体检</td><td>正常</td><td>王医生</td></tr></tbody></table></div></div>
            
            <div id="vet-list" class="page"><div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div><div class="card"><div class="card-title">兽医列表</div><div style="margin-bottom:16px;"><button class="btn btn-primary" onclick="showPage('vet-add')">+ 添加兽医</button></div><table class="table"><thead><tr><th>姓名</th><th>科室</th><th>擅长</th><th>接诊量</th><th>好评率</th><th>操作</th></tr></thead><tbody><tr><td>李医生</td><td>内科</td><td>消化系统疾病</td><td>256</td><td>98.5%</td><td><button class="btn btn-default" onclick="showPage('vet-edit')">编辑</button></td></tr><tr><td>王医生</td><td>外科</td><td>骨科手术</td><td>189</td><td>96.2%</td><td><button class="btn btn-default" onclick="showPage('vet-edit')">编辑</button></td></tr></tbody></table></div></div>
            
            <div id="vet-add" class="page"><div class="back-btn" onclick="showPage('vet-list')">← 返回兽医列表</div><div class="card"><div class="card-title">添加兽医</div><div class="form-group"><label class="form-label">姓名</label><input type="text" class="form-input" placeholder="请输入兽医姓名"></div><div class="form-group"><label class="form-label">科室</label><select class="form-input"><option>内科</option><option>外科</option></select></div><button class="btn btn-primary">保存</button></div></div>
            
            <div id="vet-edit" class="page"><div class="back-btn" onclick="showPage('vet-list')">← 返回兽医列表</div><div class="card"><div class="card-title">编辑兽医信息</div><div class="form-group"><label class="form-label">姓名</label><input type="text" class="form-input" value="李医生"></div><div class="form-group"><label class="form-label">科室</label><select class="form-input"><option selected>内科</option><option>外科</option></select></div><button class="btn btn-primary">保存</button></div></div>
            
            <div id="vet-schedule" class="page"><div class="back-btn" onclick="showPage('vet-list')">← 返回兽医列表</div><div class="card"><div class="card-title">兽医排班</div><table class="table"><thead><tr><th>日期</th><th>班次</th><th>时间</th></tr></thead><tbody><tr><td>周一 5/20</td><td>白班</td><td>09:00-18:00</td></tr><tr><td>周二 5/21</td><td>夜班</td><td>14:00-22:00</td></tr></tbody></table></div></div>
            
            <div id="vet-stat" class="page">
                <div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div>
                <div class="card">
                    <div class="card-title">兽医统计</div>
                    <div class="stat-cards" style="grid-template-columns:repeat(4,1fr);">
                        <div class="stat-card"><div class="label">总接诊量</div><div class="value">1,234</div><div class="trend">↑18%</div></div>
                        <div class="stat-card"><div class="label">本月接诊</div><div class="value">156</div><div class="trend">今日 12</div></div>
                        <div class="stat-card"><div class="label">在线兽医</div><div class="value">8</div><div class="trend">↑2</div></div>
                        <div class="stat-card"><div class="label">平均好评率</div><div class="value">97.2%</div><div class="trend">↑1.5%</div></div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-title">兽医接诊排行</div>
                    <table class="table">
                        <thead><tr><th>排名</th><th>兽医姓名</th><th>科室</th><th>本月接诊</th><th>总接诊</th><th>好评率</th><th>响应时间</th><th>状态</th></tr></thead>
                        <tbody>
                            <tr><td><span style="background:#ff4d4f;color:#fff;padding:2px 8px;border-radius:4px;">1</span></td><td>李医生</td><td>内科</td><td>45</td><td>512</td><td style="color:#52c41a;">98.5%</td><td>2.3分钟</td><td><span class="tag tag-green">在线</span></td></tr>
                            <tr><td><span style="background:#fa8c16;color:#fff;padding:2px 8px;border-radius:4px;">2</span></td><td>王医生</td><td>外科</td><td>38</td><td>423</td><td style="color:#52c41a;">96.2%</td><td>3.1分钟</td><td><span class="tag tag-green">在线</span></td></tr>
                            <tr><td><span style="background:#1890ff;color:#fff;padding:2px 8px;border-radius:4px;">3</span></td><td>张医生</td><td>皮肤科</td><td>32</td><td>356</td><td style="color:#52c41a;">97.8%</td><td>2.8分钟</td><td><span class="tag tag-green">在线</span></td></tr>
                            <tr><td>4</td><td>赵医生</td><td>眼科</td><td>28</td><td>298</td><td style="color:#52c41a;">95.5%</td><td>3.5分钟</td><td><span class="tag tag-green">在线</span></td></tr>
                            <tr><td>5</td><td>陈医生</td><td>骨科</td><td>25</td><td>267</td><td style="color:#52c41a;">94.8%</td><td>4.2分钟</td><td><span class="tag tag-orange">忙碌</span></td></tr>
                            <tr><td>6</td><td>周医生</td><td>营养科</td><td>22</td><td>234</td><td style="color:#52c41a;">96.5%</td><td>2.9分钟</td><td><span class="tag tag-green">在线</span></td></tr>
                            <tr><td>7</td><td>吴医生</td><td>内科</td><td>18</td><td>198</td><td style="color:#52c41a;">93.2%</td><td>5.1分钟</td><td><span class="tag tag-blue">休息</span></td></tr>
                            <tr><td>8</td><td>郑医生</td><td>外科</td><td>15</td><td>167</td><td style="color:#52c41a;">91.5%</td><td>4.8分钟</td><td><span class="tag tag-blue">休息</span></td></tr>
                        </tbody>
                    </table>
                </div>
                <div class="card">
                    <div class="card-title">接诊趋势分析</div>
                    <table class="table">
                        <thead><tr><th>日期</th><th>总接诊</th><th>内科</th><th>外科</th><th>皮肤科</th><th>其他</th><th>满意度</th></tr></thead>
                        <tbody>
                            <tr><td>2024-05-25</td><td>12</td><td>5</td><td>3</td><td>2</td><td>2</td><td>96.2%</td></tr>
                            <tr><td>2024-05-24</td><td>15</td><td>6</td><td>4</td><td>3</td><td>2</td><td>95.8%</td></tr>
                            <tr><td>2024-05-23</td><td>14</td><td>5</td><td>4</td><td>3</td><td>2</td><td>97.1%</td></tr>
                            <tr><td>2024-05-22</td><td>18</td><td>7</td><td>5</td><td>4</td><td>2</td><td>94.5%</td></tr>
                            <tr><td>2024-05-21</td><td>16</td><td>6</td><td>4</td><td>4</td><td>2</td><td>96.8%</td></tr>
                            <tr><td>2024-05-20</td><td>13</td><td>5</td><td>3</td><td>3</td><td>2</td><td>97.5%</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <div id="case-list" class="page"><div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div><div class="card"><div class="card-title">病情列表</div><table class="table"><thead><tr><th>记录ID</th><th>宠物名</th><th>病情描述</th><th>严重程度</th><th>创建时间</th><th>操作</th></tr></thead><tbody><tr><td>C001</td><td>旺财</td><td>食欲不振，精神萎靡</td><td><span class="tag tag-orange">中等</span></td><td>2024-05-25</td><td><button class="btn btn-default" onclick="showPage('case-detail')">详情</button></td></tr></tbody></table></div></div>
            
            <div id="case-detail" class="page"><div class="back-btn" onclick="showPage('case-list')">← 返回病情列表</div><div class="card"><div class="card-title">病情详情</div><div class="form-group"><label class="form-label">宠物：旺财</label></div><div class="form-group"><label class="form-label">病情描述</label><p>宠物近期出现食欲不振的症状，精神萎靡。</p></div></div></div>
            
            <div id="case-classify" class="page"><div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div><div class="card"><div class="card-title">病情分类分级管理</div><table class="table"><thead><tr><th>分类名称</th><th>级别</th><th>描述</th><th>数量</th></tr></thead><tbody><tr><td>消化系统</td><td><span class="tag tag-orange">中等</span></td><td>胃肠问题</td><td>156</td></tr><tr><td>皮肤病</td><td><span class="tag tag-green">轻微</span></td><td>皮肤过敏、感染</td><td>234</td></tr></tbody></table></div></div>
            
            <div id="diag-config" class="page"><div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div><div class="card"><div class="card-title">AI诊断参数配置</div><div class="form-group"><label class="form-label">照片诊断灵敏度</label><input type="range" style="width:100%;"></div><div class="form-group"><label class="form-label">自动复核阈值</label><input type="text" class="form-input" value="85%"></div><button class="btn btn-primary">保存配置</button></div></div>
            
            <div id="diag-record" class="page"><div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div><div class="card"><div class="card-title">AI诊断记录</div><table class="table"><thead><tr><th>记录ID</th><th>类型</th><th>宠物</th><th>诊断结果</th><th>置信度</th><th>状态</th></tr></thead><tbody><tr><td>D001</td><td>照片诊断</td><td>旺财</td><td>皮肤炎症</td><td>92%</td><td><span class="tag tag-green">已复核</span></td></tr></tbody></table></div></div>
            
            <div id="diag-review" class="page"><div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div><div class="card"><div class="card-title">复核任务分配</div><table class="table"><thead><tr><th>任务ID</th><th>诊断内容</th><th>AI置信度</th><th>分配兽医</th><th>状态</th></tr></thead><tbody><tr><td>R001</td><td>粪便检测-寄生虫</td><td>78%</td><td>李医生</td><td><span class="tag tag-orange">待复核</span></td></tr></tbody></table></div></div>
            
            <div id="consult-record" class="page"><div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div><div class="card"><div class="card-title">AI问诊记录</div><table class="table"><thead><tr><th>问诊ID</th><th>用户</th><th>宠物</th><th>问题类型</th><th>状态</th><th>时间</th></tr></thead><tbody><tr><td>Q001</td><td>张三</td><td>旺财</td><td>食欲问题</td><td><span class="tag tag-green">已回复</span></td><td>2024-05-25 10:30</td></tr></tbody></table></div></div>
            
            <div id="knowledge-base" class="page"><div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div><div class="card"><div class="card-title">AI问诊知识库</div><table class="table"><thead><tr><th>ID</th><th>问题关键词</th><th>标准回复</th><th>科室</th></tr></thead><tbody><tr><td>1</td><td>食欲不振</td><td>建议检查饮食情况...</td><td>内科</td></tr></tbody></table></div></div>
            
            <div id="icu-list" class="page"><div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div><div class="card"><div class="card-title">ICU设备列表</div><table class="table"><thead><tr><th>设备ID</th><th>设备名称</th><th>位置</th><th>状态</th><th>当前宠物</th><th>操作</th></tr></thead><tbody><tr><td>ICU-01</td><td>ICU监护舱-1</td><td>A区 101</td><td><span class="tag tag-green">空闲</span></td><td>-</td><td><button class="btn btn-default" onclick="showPage('icu-monitor')">监控</button></td></tr><tr><td>ICU-02</td><td>ICU监护舱-2</td><td>A区 102</td><td><span class="tag tag-red">使用中</span></td><td>大白</td><td><button class="btn btn-default" onclick="showPage('icu-monitor')">监控</button></td></tr></tbody></table></div></div>
            
            <div id="order-list" class="page"><div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div><div class="card"><div class="card-title">订单列表</div><table class="table"><thead><tr><th>订单号</th><th>用户</th><th>商品/服务</th><th>金额</th><th>状态</th><th>操作</th></tr></thead><tbody><tr><td>ORD20240525001</td><td>张三</td><td>疫苗接种服务</td><td>¥128.00</td><td><span class="tag tag-green">已完成</span></td><td><button class="btn btn-default" onclick="showPage('order-detail')">详情</button></td></tr></tbody></table></div></div>
            
            <div id="order-refund" class="page"><div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div><div class="card"><div class="card-title">退款处理</div><table class="table"><thead><tr><th>申请ID</th><th>订单号</th><th>用户</th><th>金额</th><th>原因</th><th>状态</th></tr></thead><tbody><tr><td>RFD001</td><td>ORD20240524003</td><td>王五</td><td>¥88.00</td><td>服务不满意</td><td><span class="tag tag-green">已处理</span></td></tr></tbody></table></div></div>
            
            <div id="banner" class="page"><div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div><div class="card"><div class="card-title">首页轮播图配置</div><table class="table"><thead><tr><th>排序</th><th>图片</th><th>标题</th><th>状态</th></tr></thead><tbody><tr><td>1</td><td><div style="width:60px;height:40px;background:#f0f0f0;border-radius:4px;"></div></td><td>宠物健康讲座</td><td><span class="tag tag-green">启用</span></td></tr></tbody></table></div></div>
            
            <div id="announcement" class="page"><div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div><div class="card"><div class="card-title">发布平台公告</div><table class="table"><thead><tr><th>标题</th><th>内容摘要</th><th>发布时间</th><th>状态</th></tr></thead><tbody><tr><td>系统升级通知</td><td>将于5月30日进行系统升级...</td><td>2024-05-25</td><td><span class="tag tag-green">已发布</span></td></tr></tbody></table></div></div>
            
            <div id="role-permission" class="page"><div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div><div class="card"><div class="card-title">设置角色和权限</div><table class="table"><thead><tr><th>角色</th><th>描述</th><th>用户数</th></tr></thead><tbody><tr><td>超级管理员</td><td>拥有所有权限</td><td>2</td></tr></tbody></table></div></div>
            
            <div id="system-setting" class="page"><div class="back-btn" onclick="showPage('dashboard')">← 返回工作台</div><div class="card"><div class="card-title">平台基础配置</div><div class="form-group"><label class="form-label">平台名称</label><input type="text" class="form-input" value="AI宠物后台管理系统"></div><button class="btn btn-primary">保存设置</button></div></div>
        </main>
    </div>
    
    <script>
        function showPage(pageId) {
            document.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
            const targetPage = document.getElementById(pageId);
            if (targetPage) targetPage.classList.add('active');
            updateMenuHighlight(pageId);
        }
        
        function updateMenuHighlight(pageId) {
            document.querySelectorAll('.menu-item').forEach(item => item.classList.remove('active'));
            const pageNames = {
                'dashboard': '工作台', 'user-list': '用户列表', 'user-detail': '用户详情', 'user-export': '用户导出',
                'pet-list': '宠物列表', 'pet-档案': '宠物档案', 'pet-category': '宠物分类',
                'vet-list': '兽医列表', 'vet-add': '添加兽医', 'vet-edit': '兽医编辑', 'vet-schedule': '兽医排班', 'vet-stat': '兽医统计',
                'case-list': '病情列表', 'case-detail': '病情详情', 'case-classify': '分类分级', 'case-stat': '病情统计',
                'diag-config': '诊断配置', 'diag-record': '诊断记录', 'diag-stat': '诊断统计', 'diag-review': '复核管理',
                'consult-record': '问诊记录', 'consult-stat': '问诊统计', 'knowledge-base': '知识库',
                'icu-list': 'ICU列表', 'icu-monitor': 'ICU监控', 'icu-video': '视频管理',
                'order-list': '订单列表', 'order-detail': '订单详情', 'order-refund': '退款处理', 'order-stat': '订单统计',
                'biz-stat': '营业统计', 'user-stat': '用户统计', 'pet-stat': '宠物统计',
                'banner': '轮播图', 'announcement': '公告管理', 'role-permission': '角色权限', 'system-setting': '系统设置'
            };
            
            document.querySelectorAll('.menu-item').forEach(item => {
                if (pageNames[pageId] === item.textContent.trim().replace('▶','').trim()) {
                    item.classList.add('active');
                    const submenu = item.parentElement;
                    if (submenu && submenu.classList.contains('submenu')) {
                        submenu.classList.add('show');
                    }
                }
            });
        }
        
        function toggleSubmenu(element) {
            const submenu = element.nextElementSibling;
            if (submenu && submenu.classList.contains('submenu')) {
                const isHidden = !submenu.classList.contains('show');
                document.querySelectorAll('.submenu').forEach(sm => sm.classList.remove('show'));
                document.querySelectorAll('.menu-item span').forEach(sp => sp.textContent = '▶');
                if (isHidden) {
                    submenu.classList.add('show');
                    element.querySelector('span').textContent = '▼';
                }
            }
        }
        
        document.addEventListener('DOMContentLoaded', function() {
            showPage('dashboard');
        });
    </script>
</body>
</html>