编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抖音视频监控 - 用户端</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif; background: #f5f7fa; color: #333; font-size: 14px; }
.container { max-width: 414px; margin: 0 auto; min-height: 100vh; background: #f5f7fa; padding-bottom: 80px; }
.header { background: linear-gradient(135deg, #fe2c55, #ff6b8a); color: #fff; padding: 20px 16px; position: sticky; top: 0; z-index: 100; }
.header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.header-title { font-size: 18px; font-weight: 600; }
.header-icons { display: flex; gap: 16px; }
.header-icons span { cursor: pointer; }
.user-info { display: flex; align-items: center; gap: 12px; }
.avatar { width: 48px; height: 48px; border-radius: 50%; background: #fff; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-text h3 { font-size: 16px; margin-bottom: 4px; }
.user-text p { font-size: 12px; opacity: 0.9; }
.card { background: #fff; border-radius: 12px; margin: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.card-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; }
.card-title .more { font-size: 12px; color: #999; font-weight: normal; cursor: pointer; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat-item { text-align: center; padding: 12px 8px; background: #fafafa; border-radius: 8px; cursor: pointer; transition: all 0.3s; }
.stat-item:hover { background: #fff0f3; }
.stat-item .num { font-size: 20px; font-weight: 700; color: #fe2c55; margin-bottom: 4px; }
.stat-item .label { font-size: 12px; color: #666; }
.stat-item .trend { font-size: 10px; color: #4caf50; margin-top: 4px; }
.stat-item .trend.down { color: #f44336; }
.video-list { display: flex; flex-direction: column; }
.video-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background 0.2s; }
.video-item:hover { background: #fafafa; }
.video-item:last-child { border-bottom: none; }
.video-cover { width: 100px; height: 60px; border-radius: 8px; background: linear-gradient(135deg, #1a1a1a, #333); flex-shrink: 0; position: relative; overflow: hidden; }
.video-cover .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; background: rgba(255,255,255,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.video-cover .play-icon::after { content: ''; width: 0; height: 0; border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.video-info { flex: 1; min-width: 0; }
.video-title { font-size: 14px; font-weight: 500; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-meta { display: flex; gap: 16px; font-size: 12px; color: #999; }
.video-meta span { display: flex; align-items: center; gap: 4px; }
.video-meta .icon { width: 14px; height: 14px; opacity: 0.7; }
.tab-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 414px; background: #fff; display: flex; padding: 8px 0; padding-bottom: max(8px, env(safe-area-inset-bottom)); box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 99; }
.tab-item { flex: 1; text-align: center; cursor: pointer; }
.tab-item.active svg { fill: #fe2c55; }
.tab-item svg { width: 24px; height: 24px; fill: #999; margin-bottom: 4px; }
.tab-item span { font-size: 11px; color: #999; }
.tab-item.active span { color: #fe2c55; }
.section-title { font-size: 16px; font-weight: 600; margin: 16px 16px 12px; display: flex; align-items: center; gap: 8px; }
.back-btn { cursor: pointer; padding: 4px 8px; }
.page { display: none; }
.page.active { display: block; }
.chart-container { background: #fff; border-radius: 12px; margin: 12px; padding: 16px; height: 200px; position: relative; }
.chart-placeholder { width: 100%; height: 100%; background: linear-gradient(90deg, #fafafa 1px, transparent 1px) repeating-linear-gradient(90deg, #f0f0f0 1px, transparent 1px), linear-gradient(#fff0f3 0%, #ffe4e9 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 12px; }
.chart-line { position: absolute; bottom: 40px; left: 16px; right: 16px; height: 100px; display: flex; align-items: flex-end; }
.chart-bar { flex: 1; margin: 0 2px; background: linear-gradient(to top, #fe2c55, #ff8a9e); border-radius: 4px 4px 0 0; transition: all 0.3s; cursor: pointer; }
.chart-bar:hover { opacity: 0.8; }
.comment-item { padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.comment-user { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.comment-avatar { width: 32px; height: 32px; border-radius: 50%; background: #ddd; }
.comment-name { font-size: 13px; font-weight: 500; }
.comment-time { font-size: 11px; color: #999; margin-left: auto; }
.comment-content { font-size: 14px; color: #333; line-height: 1.5; margin-bottom: 8px; }
.comment-video { font-size: 12px; color: #666; background: #f5f5f5; padding: 6px 10px; border-radius: 4px; display: inline-block; }
.comment-actions { display: flex; gap: 20px; font-size: 12px; color: #999; }
.comment-action { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.detail-header { padding: 20px 16px; background: linear-gradient(135deg, #fe2c55, #ff6b8a); color: #fff; }
.detail-video { width: 100%; height: 200px; background: linear-gradient(135deg, #1a1a1a, #333); border-radius: 12px; position: relative; margin-bottom: 16px; }
.detail-video .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.detail-video .play-icon::after { content: ''; width: 0; height: 0; border-left: 24px solid #fff; border-top: 14px solid transparent; border-bottom: 14px solid transparent; margin-left: 6px; }
.detail-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.detail-meta { font-size: 12px; opacity: 0.8; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.stats-row .stat { text-align: center; }
.stats-row .stat .value { font-size: 16px; font-weight: 600; }
.stats-row .stat .key { font-size: 11px; opacity: 0.8; margin-top: 2px; }
.bottom-nav { display: flex; gap: 8px; padding: 12px 16px; background: #fff; border-top: 1px solid #f0f0f0; margin-top: 12px; }
.nav-btn { flex: 1; padding: 10px; text-align: center; border-radius: 8px; font-size: 13px; cursor: pointer; }
.nav-btn.primary { background: #fe2c55; color: #fff; }
.nav-btn.secondary { background: #f5f5f5; color: #333; }
.modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
.modal.active { display: flex; }
.modal-content { background: #fff; border-radius: 16px; width: 90%; max-width: 360px; padding: 24px; animation: slideUp 0.3s ease; }
@keyframes slideUp { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-title { font-size: 18px; font-weight: 600; text-align: center; margin-bottom: 16px; }
.modal-desc { font-size: 13px; color: #666; text-align: center; line-height: 1.6; margin-bottom: 24px; }
.modal-btns { display: flex; gap: 12px; }
.modal-btn { flex: 1; padding: 12px; border-radius: 24px; text-align: center; cursor: pointer; font-size: 15px; }
.modal-btn.cancel { background: #f5f5f5; color: #333; }
.modal-btn.confirm { background: #fe2c55; color: #fff; }
.setting-item { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
.setting-item:last-child { border-bottom: none; }
.setting-left { display: flex; align-items: center; gap: 12px; }
.setting-icon { width: 40px; height: 40px; background: #fff0f3; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.setting-icon svg { width: 20px; height: 20px; fill: #fe2c55; }
.setting-label { font-size: 15px; }
.setting-right { color: #999; }
.toggle { width: 48px; height: 28px; background: #ddd; border-radius: 14px; position: relative; cursor: pointer; transition: background 0.3s; }
.toggle.active { background: #fe2c55; }
.toggle::after { content: ''; position: absolute; width: 24px; height: 24px; background: #fff; border-radius: 50%; top: 2px; left: 2px; transition: transform 0.3s; }
.toggle.active::after { transform: translateX(20px); }
.search-bar { padding: 12px 16px; background: #fff; }
.search-input { width: 100%; padding: 10px 16px; border: none; background: #f5f5f5; border-radius: 20px; font-size: 14px; outline: none; }
.time-filter { display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto; }
.time-btn { padding: 6px 12px; background: #f5f5f5; border-radius: 16px; font-size: 12px; white-space: nowrap; cursor: pointer; transition: all 0.2s; }
.time-btn.active { background: #fe2c55; color: #fff; }
.export-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px 0; }
.export-option { padding: 16px; background: #fafafa; border-radius: 12px; text-align: center; cursor: pointer; border: 2px solid transparent; transition: all 0.2s; }
.export-option.selected { border-color: #fe2c55; background: #fff0f3; }
.export-icon { font-size: 32px; margin-bottom: 8px; }
.export-name { font-size: 14px; font-weight: 500; }
.toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.8); color: #fff; padding: 16px 24px; border-radius: 8px; font-size: 14px; z-index: 300; display: none; }
.toast.show { display: block; animation: fadeIn 0.3s; }
@keyframes fadeIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.progress-ring { width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(#fe2c55 0% 75%, #f0f0f0 75% 100%); display: flex; align-items: center; justify-content: center; }
.progress-ring::before { content: ''; width: 60px; height: 60px; background: #fff; border-radius: 50%; }
.report-preview { background: #fff; padding: 16px; border-radius: 12px; margin: 12px; }
.report-header { text-align: center; margin-bottom: 20px; }
.report-title { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.report-period { font-size: 12px; color: #999; }
.report-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.report-card { background: #fafafa; padding: 12px; border-radius: 8px; text-align: center; }
.report-card .value { font-size: 18px; font-weight: 700; color: #fe2c55; }
.report-card .label { font-size: 11px; color: #666; margin-top: 4px; }
.report-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.report-table th { background: #f5f5f5; padding: 10px 8px; text-align: left; font-weight: 500; }
.report-table td { padding: 10px 8px; border-bottom: 1px solid #f0f0f0; }
.filter-tabs { display: flex; padding: 12px 16px; gap: 8px; border-bottom: 1px solid #f0f0f0; background: #fff; }
.filter-tab { padding: 6px 12px; border-radius: 16px; font-size: 12px; cursor: pointer; transition: all 0.2s; }
.filter-tab.active { background: #fe2c55; color: #fff; }
</style>
</head>
<body>
<div class="container">
  <!-- 首页 -->
  <div id="page-home" class="page active">
    <div class="header">
      <div class="header-top">
        <div class="header-title">抖音视频监控</div>
        <div class="header-icons">
          <span onclick="showPage('notifications')">🔔</span>
          <span onclick="showPage('settings')">⚙️</span>
        </div>
      </div>
      <div class="user-info">
        <div class="avatar">
          <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%23ffd5dc'/%3E%3Ccircle cx='24' cy='20' r='8' fill='%23fe2c55'/%3E%3Cellipse cx='24' cy='40' rx='14' ry='10' fill='%23fe2c55'/%3E%3C/svg%3E" alt="头像">
        </div>
        <div class="user-text">
          <h3>抖音创作者</h3>
          <p>抖音号: douyin_creator</p>
        </div>
      </div>
    </div>
    
    <div class="time-filter">
      <div class="time-btn active" onclick="selectTime(this)">今日</div>
      <div class="time-btn" onclick="selectTime(this)">近7天</div>
      <div class="time-btn" onclick="selectTime(this)">近30天</div>
      <div class="time-btn" onclick="selectTime(this)">本月</div>
      <div class="time-btn" onclick="selectTime(this)">上月</div>
    </div>
    
    <div class="card">
      <div class="card-title">
        核心数据概览
        <span class="more" onclick="showPage('analytics')">更多 →</span>
      </div>
      <div class="stats-grid">
        <div class="stat-item" onclick="showPage('video-detail')">
          <div class="num">128.5W</div>
          <div class="label">总播放量</div>
          <div class="trend">↑ 12.3%</div>
        </div>
        <div class="stat-item" onclick="showPage('video-detail')">
          <div class="num">8.6W</div>
          <div class="label">总点赞数</div>
          <div class="trend">↑ 8.7%</div>
        </div>
        <div class="stat-item" onclick="showPage('video-detail')">
          <div class="num">1.2W</div>
          <div class="label">总评论数</div>
          <div class="trend down">↓ 3.2%</div>
        </div>
        <div class="stat-item" onclick="showPage('video-detail')">
          <div class="num">6.3W</div>
          <div class="label">总收藏数</div>
          <div class="trend">↑ 15.6%</div>
        </div>
        <div class="stat-item" onclick="showPage('video-detail')">
          <div class="num">4.2W</div>
          <div class="label">总分享数</div>
          <div class="trend">↑ 5.1%</div>
        </div>
        <div class="stat-item" onclick="showPage('video-detail')">
          <div class="num">6.7%</div>
          <div class="label">平均互动率</div>
          <div class="trend">↑ 0.8%</div>
        </div>
      </div>
    </div>
    
    <div class="card">
      <div class="card-title">
        播放量趋势
        <span class="more" onclick="showPage('analytics')">查看详情 →</span>
      </div>
      <div class="chart-container">
        <div class="chart-line">
          <div class="chart-bar" style="height: 45%;" onclick="showPage('video-detail')"></div>
          <div class="chart-bar" style="height: 60%;" onclick="showPage('video-detail')"></div>
          <div class="chart-bar" style="height: 40%;" onclick="showPage('video-detail')"></div>
          <div class="chart-bar" style="height: 75%;" onclick="showPage('video-detail')"></div>
          <div class="chart-bar" style="height: 55%;" onclick="showPage('video-detail')"></div>
          <div class="chart-bar" style="height: 85%;" onclick="showPage('video-detail')"></div>
          <div class="chart-bar" style="height: 70%;" onclick="showPage('video-detail')"></div>
        </div>
      </div>
    </div>
    
    <div class="section-title">
      <span>📹</span> 视频列表
      <span style="font-weight: normal; font-size: 13px; color: #999; margin-left: auto;" onclick="showPage('videos')">查看全部</span>
    </div>
    
    <div class="card">
      <div class="video-list">
        <div class="video-item" onclick="showPage('video-detail')">
          <div class="video-cover">
            <div class="play-icon"></div>
          </div>
          <div class="video-info">
            <div class="video-title">如何用手机拍出爆款视频？新手必看教程</div>
            <div class="video-meta">
              <span>👁 25.6万播放</span>
              <span>👍 1.8万</span>
              <span>💬 2,340</span>
            </div>
          </div>
        </div>
        <div class="video-item" onclick="showPage('video-detail')">
          <div class="video-cover">
            <div class="play-icon"></div>
          </div>
          <div class="video-info">
            <div class="video-title">抖音涨粉必学的5个技巧🔥</div>
            <div class="video-meta">
              <span>👁 18.3万播放</span>
              <span>👍 9,200</span>
              <span>💬 1,156</span>
            </div>
          </div>
        </div>
        <div class="video-item" onclick="showPage('video-detail')">
          <div class="video-cover">
            <div class="play-icon"></div>
          </div>
          <div class="video-info">
            <div class="video-title">我的第一支10万+播放是怎么做到的</div>
            <div class="video-meta">
              <span>👁 32.7万播放</span>
              <span>👍 2.1万</span>
              <span>💬 3,890</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 视频列表页 -->
  <div id="page-videos" class="page">
    <div class="header" style="position: sticky; top: 0;">
      <div style="display: flex; align-items: center; padding-bottom: 12px;">
        <span class="back-btn" onclick="showPage('home')">← 返回</span>
        <span style="flex: 1; text-align: center; font-size: 16px; font-weight: 600;">视频列表</span>
        <span style="width: 40px;"></span>
      </div>
    </div>
    
    <div class="search-bar">
      <input type="text" class="search-input" placeholder="🔍 搜索视频标题...">
    </div>
    
    <div class="filter-tabs">
      <div class="filter-tab active" onclick="selectFilter(this)">全部</div>
      <div class="filter-tab" onclick="selectFilter(this)">近7天</div>
      <div class="filter-tab" onclick="selectFilter(this)">近30天</div>
      <div class="filter-tab" onclick="selectFilter(this)">未读评论</div>
    </div>
    
    <div class="card" style="margin-top: 12px;">
      <div class="video-list">
        <div class="video-item" onclick="showPage('video-detail')">
          <div class="video-cover">
            <div class="play-icon"></div>
            <span style="position: absolute; top: 4px; right: 4px; background: #fe2c55; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px;">新</span>
          </div>
          <div class="video-info">
            <div class="video-title">如何用手机拍出爆款视频？新手必看教程</div>
            <div class="video-meta">
              <span>👁 25.6万播放</span>
              <span>↑ 15%</span>
            </div>
          </div>
        </div>
        <div class="video-item" onclick="showPage('video-detail')">
          <div class="video-cover"><div class="play-icon"></div></div>
          <div class="video-info">
            <div class="video-title">抖音涨粉必学的5个技巧🔥</div>
            <div class="video-meta">
              <span>👁 18.3万播放</span>
              <span>↑ 8%</span>
            </div>
          </div>
        </div>
        <div class="video-item" onclick="showPage('video-detail')">
          <div class="video-cover"><div class="play-icon"></div></div>
          <div class="video-info">
            <div class="video-title">我的第一支10万+播放是怎么做到的</div>
            <div class="video-meta">
              <span>👁 32.7万播放</span>
              <span>↑ 22%</span>
            </div>
          </div>
        </div>
        <div class="video-item" onclick="showPage('video-detail')">
          <div class="video-cover"><div class="play-icon"></div></div>
          <div class="video-info">
            <div class="video-title">短视频剪辑入门指南 #教程</div>
            <div class="video-meta">
              <span>👁 12.4万播放</span>
              <span>↓ 5%</span>
            </div>
          </div>
        </div>
        <div class="video-item" onclick="showPage('video-detail')">
          <div class="video-cover"><div class="play-icon"></div></div>
          <div class="video-info">
            <div class="video-title">揭秘抖音算法：如何获得更多曝光</div>
            <div class="video-meta">
              <span>👁 8.9万播放</span>
              <span>↑ 33%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 视频详情页 -->
  <div id="page-video-detail" class="page">
    <div class="detail-header">
      <div style="display: flex; align-items: center; padding-bottom: 12px;">
        <span class="back-btn" onclick="showPage('videos')">← 返回</span>
        <span style="flex: 1; text-align: center; font-size: 16px; font-weight: 600;">视频详情</span>
        <span style="width: 40px;">📤</span>
      </div>
      <div class="detail-video">
        <div class="play-icon"></div>
        <div style="position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; padding: 4px 8px; border-radius: 4px;">2:35</div>
      </div>
      <div class="detail-title">如何用手机拍出爆款视频？新手必看教程</div>
      <div class="detail-meta">发布于 2026-05-10 · 互动率 7.8%</div>
    </div>
    
    <div class="card" style="margin-top: 0; border-radius: 0;">
      <div class="stats-row">
        <div class="stat"><div class="value">25.6W</div><div class="key">播放</div></div>
        <div class="stat"><div class="value">1.8W</div><div class="key">点赞</div></div>
        <div class="stat"><div class="value">2,340</div><div class="key">评论</div></div>
        <div class="stat"><div class="value">6.3W</div><div class="key">收藏</div></div>
      </div>
    </div>
    
    <div class="card">
      <div class="card-title">数据趋势 (近7天)</div>
      <div class="chart-container" style="margin: 0 -16px; height: 160px;">
        <div class="chart-line">
          <div class="chart-bar" style="height: 55%;"></div>
          <div class="chart-bar" style="height: 70%;"></div>
          <div class="chart-bar" style="height: 45%;"></div>
          <div class="chart-bar" style="height: 80%;"></div>
          <div class="chart-bar" style="height: 65%;"></div>
          <div class="chart-bar" style="height: 90%;"></div>
          <div class="chart-bar" style="height: 75%;"></div>
        </div>
      </div>
    </div>
    
    <div class="card">
      <div class="card-title">监控设置</div>
      <div class="setting-item" onclick="toggleThreshold()">
        <div class="setting-left">
          <div class="setting-icon">🎯</div>
          <div>
            <div class="setting-label">播放量阈值提醒</div>
            <div style="font-size: 12px; color: #999;">当前: 10万</div>
          </div>
        </div>
        <div class="setting-right">→</div>
      </div>
      <div class="setting-item" onclick="toggleThreshold()">
        <div class="setting-left">
          <div class="setting-icon">🔔</div>
          <div>
            <div class="setting-label">互动数据波动提醒</div>
            <div style="font-size: 12px; color: #999;">当前: 30%</div>
          </div>
        </div>
        <div class="setting-right">→</div>
      </div>
    </div>
    
    <div class="bottom-nav">
      <div class="nav-btn secondary" onclick="showPage('comments')">查看评论</div>
      <div class="nav-btn primary" onclick="showPage('export')">导出数据</div>
    </div>
  </div>
  
  <!-- 评论管理页 -->
  <div id="page-comments" class="page">
    <div class="header" style="position: sticky; top: 0;">
      <div style="display: flex; align-items: center; padding-bottom: 12px;">
        <span class="back-btn" onclick="showPage('video-detail')">← 返回</span>
        <span style="flex: 1; text-align: center; font-size: 16px; font-weight: 600;">评论管理</span>
        <span style="width: 40px;"></span>
      </div>
    </div>
    
    <div class="filter-tabs">
      <div class="filter-tab active">全部</div>
      <div class="filter-tab">未回复</div>
      <div class="filter-tab">已回复</div>
      <div class="filter-tab">正面</div>
      <div class="filter-tab">负面</div>
    </div>
    
    <div class="card">
      <div class="comment-item">
        <div class="comment-user">
          <div class="comment-avatar" style="background: linear-gradient(135deg, #667eea, #764ba2);"></div>
          <div>
            <div class="comment-name">视频爱好者</div>
            <div style="font-size: 11px; color: #999;">抖音号: dy_123456</div>
          </div>
          <div class="comment-time">2小时前</div>
        </div>
        <div class="comment-content">这个教程太实用了！我按照步骤操作后，播放量真的涨了很多，感谢博主分享！🙏</div>
        <div class="comment-video">📹 如何用手机拍出爆款视频？新手必看教程</div>
        <div class="comment-actions">
          <div class="comment-action">👍 128</div>
          <div class="comment-action" onclick="showReplyModal()">💬 回复</div>
          <div class="comment-action">📋 快捷模板</div>
        </div>
      </div>
      
      <div class="comment-item">
        <div class="comment-user">
          <div class="comment-avatar" style="background: linear-gradient(135deg, #f093fb, #f5576c);"></div>
          <div>
            <div class="comment-name">新手小白</div>
            <div style="font-size: 11px; color: #999;">抖音号: xc_789012</div>
          </div>
          <div class="comment-time">5小时前</div>
        </div>
        <div class="comment-content">请问博主，用什么手机拍摄比较好？iPhone可以吗？</div>
        <div class="comment-video">📹 如何用手机拍出爆款视频？新手必看教程</div>
        <div class="comment-actions">
          <div class="comment-action">👍 45</div>
          <div class="comment-action" onclick="showReplyModal()">💬 回复</div>
          <div class="comment-action">📋 快捷模板</div>
        </div>
      </div>
      
      <div class="comment-item">
        <div class="comment-user">
          <div class="comment-avatar" style="background: linear-gradient(135deg, #4facfe, #00f2fe);"></div>
          <div>
            <div class="comment-name">创作者小王</div>
            <div style="font-size: 11px; color: #999;">抖音号: wang_345678</div>
          </div>
          <div class="comment-time">昨天</div>
        </div>
        <div class="comment-content">内容不错，但是感觉缺少一些进阶技巧，希望能有后续教程！</div>
        <div class="comment-video">📹 如何用手机拍出爆款视频？新手必看教程</div>
        <div class="comment-actions">
          <div class="comment-action">👍 23</div>
          <div class="comment-action" onclick="showReplyModal()">💬 回复</div>
          <div class="comment-action">📋 快捷模板</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 数据分析页 -->
  <div id="page-analytics" class="page">
    <div class="header" style="position: sticky; top: 0;">
      <div style="display: flex; align-items: center; padding-bottom: 12px;">
        <span class="back-btn" onclick="showPage('home')">← 返回</span>
        <span style="flex: 1; text-align: center; font-size: 16px; font-weight: 600;">数据分析</span>
        <span style="width: 40px;"></span>
      </div>
    </div>
    
    <div class="time-filter">
      <div class="time-btn" onclick="selectTime(this)">今日</div>
      <div class="time-btn active" onclick="selectTime(this)">近7天</div>
      <div class="time-btn" onclick="selectTime(this)">近30天</div>
      <div class="time-btn" onclick="selectTime(this)">自定义</div>
    </div>
    
    <div class="card">
      <div class="card-title">播放量趋势</div>
      <div class="chart-container" style="margin: 0 -16px;">
        <div class="chart-line" style="height: 120px;">
          <div class="chart-bar" style="height: 40%;"></div>
          <div class="chart-bar" style="height: 55%;"></div>
          <div class="chart-bar" style="height: 35%;"></div>
          <div class="chart-bar" style="height: 70%;"></div>
          <div class="chart-bar" style="height: 50%;"></div>
          <div class="chart-bar" style="height: 85%;"></div>
          <div class="chart-bar" style="height: 65%;"></div>
        </div>
      </div>
    </div>
    
    <div class="card">
      <div class="card-title">互动数据趋势</div>
      <div style="display: flex; justify-content: center; gap: 16px; margin-bottom: 12px;">
        <div style="display: flex; align-items: center; gap: 6px; font-size: 12px;">
          <div style="width: 12px; height: 3px; background: #fe2c55; border-radius: 2px;"></div>
          <span>点赞</span>
        </div>
        <div style="display: flex; align-items: center; gap: 6px; font-size: 12px;">
          <div style="width: 12px; height: 3px; background: #4caf50; border-radius: 2px;"></div>
          <span>评论</span>
        </div>
        <div style="display: flex; align-items: center; gap: 6px; font-size: 12px;">
          <div style="width: 12px; height: 3px; background: #2196f3; border-radius: 2px;"></div>
          <span>收藏</span>
        </div>
      </div>
      <div class="chart-container" style="margin: 0 -16px;">
        <div class="chart-line" style="height: 80px;">
          <div class="chart-bar" style="height: 60%; background: linear-gradient(to top, #fe2c55, #ff8a9e);"></div>
          <div class="chart-bar" style="height: 35%; background: linear-gradient(to top, #4caf50, #81c784);"></div>
          <div class="chart-bar" style="height: 50%; background: linear-gradient(to top, #2196f3, #64b5f6);"></div>
          <div class="chart-bar" style="height: 75%; background: linear-gradient(to top, #fe2c55, #ff8a9e);"></div>
          <div class="chart-bar" style="height: 45%; background: linear-gradient(to top, #4caf50, #81c784);"></div>
          <div class="chart-bar" style="height: 90%; background: linear-gradient(to top, #fe2c55, #ff8a9e);"></div>
          <div class="chart-bar" style="height: 55%; background: linear-gradient(to top, #4caf50, #81c784);"></div>
        </div>
      </div>
    </div>
    
    <div class="card">
      <div class="card-title">数据对比</div>
      <div style="text-align: center; padding: 20px;">
        <div style="font-size: 14px; color: #666; margin-bottom: 12px;">选择视频进行横向对比</div>
        <div class="nav-btn primary" style="display: inline-block; width: auto; padding: 10px 24px;" onclick="showPage('video-detail')">选择视频</div>
      </div>
    </div>
  </div>
  
  <!-- 导出报表页 -->
  <div id="page-export" class="page">
    <div class="header" style="position: sticky; top: 0;">
      <div style="display: flex; align-items: center; padding-bottom: 12px;">
        <span class="back-btn" onclick="showPage('video-detail')">← 返回</span>
        <span style="flex: 1; text-align: center; font-size: 16px; font-weight: 600;">导出数据</span>
        <span style="width: 40px;"></span>
      </div>
    </div>
    
    <div class="card">
      <div class="card-title">选择格式</div>
      <div class="export-options">
        <div class="export-option selected" onclick="selectExport(this, 'excel')">
          <div class="export-icon">📊</div>
          <div class="export-name">Excel</div>
        </div>
        <div class="export-option" onclick="selectExport(this, 'pdf')">
          <div class="export-icon">📄</div>
          <div class="export-name">PDF</div>
        </div>
      </div>
    </div>
    
    <div class="card">
      <div class="card-title">选择时间范围</div>
      <div class="time-filter" style="padding: 0; margin-bottom: 12px;">
        <div class="time-btn active">近7天</div>
        <div class="time-btn">近30天</div>
        <div class="time-btn">本月</div>
        <div class="time-btn">上月</div>
      </div>
    </div>
    
    <div class="card">
      <div class="card-title">选择导出字段</div>
      <div style="display: flex; flex-wrap: wrap; gap: 8px;">
        <label style="display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #fff0f3; border-radius: 16px; font-size: 13px;">
          <input type="checkbox" checked style="accent-color: #fe2c55;"> 播放量
        </label>
        <label style="display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #f5f5f5; border-radius: 16px; font-size: 13px;">
          <input type="checkbox" checked style="accent-color: #fe2c55;"> 点赞数
        </label>
        <label style="display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #fff0f3; border-radius: 16px; font-size: 13px;">
          <input type="checkbox" checked style="accent-color: #fe2c55;"> 评论数
        </label>
        <label style="display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #f5f5f5; border-radius: 16px; font-size: 13px;">
          <input type="checkbox" checked style="accent-color: #fe2c55;"> 收藏数
        </label>
        <label style="display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #f5f5f5; border-radius: 16px; font-size: 13px;">
          <input type="checkbox" checked style="accent-color: #fe2c55;"> 分享数
        </label>
      </div>
    </div>
    
    <div style="padding: 12px;">
      <div class="nav-btn primary" style="width: 100%;" onclick="doExport()">确认导出</div>
    </div>
  </div>
  
  <!-- 报表生成页 -->
  <div id="page-report" class="page">
    <div class="header" style="position: sticky; top: 0;">
      <div style="display: flex; align-items: center; padding-bottom: 12px;">
        <span class="back-btn" onclick="showPage('home')">← 返回</span>
        <span style="flex: 1; text-align: center; font-size: 16px; font-weight: 600;">报表中心</span>
        <span style="width: 40px;"></span>
      </div>
    </div>
    
    <div class="card">
      <div class="card-title">自动报表</div>
      <div class="setting-item" onclick="showModal('pushModal')">
        <div class="setting-left">
          <div class="setting-icon">📨</div>
          <div>
            <div class="setting-label">定时报表推送</div>
            <div style="font-size: 12px; color: #999;">每日 09:00 发送至微信</div>
          </div>
        </div>
        <div class="setting-right">→</div>
      </div>
    </div>
    
    <div class="section-title">📈 生成报表</div>
    
    <div class="card">
      <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;">
        <div style="text-align: center; padding: 16px; background: linear-gradient(135deg, #fe2c55, #ff6b8a); border-radius: 12px; color: #fff; cursor: pointer;" onclick="generateReport('daily')">
          <div style="font-size: 28px; margin-bottom: 8px;">📅</div>
          <div style="font-size: 14px; font-weight: 500;">日报</div>
        </div>
        <div style="text-align: center; padding: 16px; background: linear-gradient(135deg, #ff9800, #ffb74d); border-radius: 12px; color: #fff; cursor: pointer;" onclick="generateReport('weekly')">
          <div style="font-size: 28px; margin-bottom: 8px;">📆</div>
          <div style="font-size: 14px; font-weight: 500;">周报</div>
        </div>
        <div style="text-align: center; padding: 16px; background: linear-gradient(135deg, #4caf50, #81c784); border-radius: 12px; color: #fff; cursor: pointer;" onclick="generateReport('monthly')">
          <div style="font-size: 28px; margin-bottom: 8px;">🗓</div>
          <div style="font-size: 14px; font-weight: 500;">月报</div>
        </div>
      </div>
    </div>
    
    <div class="report-preview">
      <div class="report-header">
        <div class="report-title">视频数据周报</div>
        <div class="report-period">2026.05.08 - 2026.05.14</div>
      </div>
      <div class="report-summary">
        <div class="report-card">
          <div class="value">256.8W</div>
          <div class="label">总播放</div>
        </div>
        <div class="report-card">
          <div class="value">18.2W</div>
          <div class="label">总点赞</div>
        </div>
        <div class="report-card">
          <div class="value">6.7%</div>
          <div class="label">互动率</div>
        </div>
      </div>
      <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid #f0f0f0;">
        <span style="font-size: 12px; color: #666;">数据较上周 ↑ 12.5%</span>
        <span style="font-size: 13px; color: #fe2c55; cursor: pointer;">查看详情 →</span>
      </div>
    </div>
  </div>
  
  <!-- 消息通知页 -->
  <div id="page-notifications" class="page">
    <div class="header" style="position: sticky; top: 0;">
      <div style="display: flex; align-items: center; padding-bottom: 12px;">
        <span class="back-btn" onclick="showPage('home')">← 返回</span>
        <span style="flex: 1; text-align: center; font-size: 16px; font-weight: 600;">消息通知</span>
        <span style="width: 40px; font-size: 12px; color: #999;">全部已读</span>
      </div>
    </div>
    
    <div class="card">
      <div class="comment-item" style="padding: 16px 0;">
        <div style="display: flex; align-items: flex-start; gap: 12px;">
          <div style="width: 40px; height: 40px; background: #fff0f3; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px;">📈</div>
          <div style="flex: 1;">
            <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
              <span style="font-weight: 500;">播放量突破提醒</span>
              <span style="font-size: 11px; color: #999;">刚刚</span>
            </div>
            <div style="font-size: 13px; color: #666; line-height: 1.5;">
              您的视频「如何用手机拍出爆款视频」播放量突破 <span style="color: #fe2c55; font-weight: 600;">25万</span>！
            </div>
          </div>
        </div>
      </div>
      
      <div class="comment-item" style="padding: 16px 0; border-top: 1px solid #f0f0f0;">
        <div style="display: flex; align-items: flex-start; gap: 12px;">
          <div style="width: 40px; height: 40px; background: #fff3e0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px;">⚠️</div>
          <div style="flex: 1;">
            <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
              <span style="font-weight: 500;">数据异常预警</span>
              <span style="font-size: 11px; color: #999;">10分钟前</span>
            </div>
            <div style="font-size: 13px; color: #666; line-height: 1.5;">
              视频「抖音涨粉必学的5个技巧」评论量较日常波动 <span style="color: #ff9800; font-weight: 600;">+35%</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="comment-item" style="padding: 16px 0; border-top: 1px solid #f0f0f0;">
        <div style="display: flex; align-items: flex-start; gap: 12px;">
          <div style="width: 40px; height: 40px; background: #e3f2fd; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px;">🔔</div>
          <div style="flex: 1;">
            <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
              <span style="font-weight: 500;">授权即将到期</span>
              <span style="font-size: 11px; color: #999;">昨天</span>
            </div>
            <div style="font-size: 13px; color: #666; line-height: 1.5;">
              您的抖音授权将在 <span style="color: #2196f3; font-weight: 600;">7天后</span> 到期，请及时续期。
            </div>
          </div>
        </div>
      </div>
      
      <div class="comment-item" style="padding: 16px 0; border-top: 1px solid #f0f0f0;">
        <div style="display: flex; align-items: flex-start; gap: 12px;">
          <div style="width: 40px; height: 40px; background: #f3e5f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px;">📬</div>
          <div style="flex: 1;">
            <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
              <span style="font-weight: 500;">周报已生成</span>
              <span style="font-size: 11px; color: #999;">2天前</span>
            </div>
            <div style="font-size: 13px; color: #666; line-height: 1.5;">
              您上周的数据报告已生成，点击查看详细分析。
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 设置页 -->
  <div id="page-settings" class="page">
    <div class="header" style="position: sticky; top: 0;">
      <div style="display: flex; align-items: center; padding-bottom: 12px;">
        <span class="back-btn" onclick="showPage('home')">← 返回</span>
        <span style="flex: 1; text-align: center; font-size: 16px; font-weight: 600;">设置</span>
        <span style="width: 40px;"></span>
      </div>
    </div>
    
    <div class="card">
      <div class="card-title">账号</div>
      <div class="setting-item">
        <div class="setting-left">
          <div class="setting-icon">👤</div>
          <div>
            <div class="setting-label">账号信息</div>
            <div style="font-size: 12px; color: #999;">微信: 创作者小王</div>
          </div>
        </div>
        <div class="setting-right">→</div>
      </div>
      <div class="setting-item">
        <div class="setting-left">
          <div class="setting-icon">🎵</div>
          <div>
            <div class="setting-label">抖音账号绑定</div>
            <div style="font-size: 12px; color: #4caf50;">已绑定 · 在线</div>
          </div>
        </div>
        <div class="setting-right">解绑</div>
      </div>
    </div>
    
    <div class="card">
      <div class="card-title">消息设置</div>
      <div class="setting-item">
        <div class="setting-left">
          <div class="setting-icon">🔔</div>
          <div class="setting-label">推送通知</div>
        </div>
        <div class="toggle active"></div>
      </div>
      <div class="setting-item" onclick="showPage('notifications')">
        <div class="setting-left">
          <div class="setting-icon">📳</div>
          <div>
            <div class="setting-label">免打扰时段</div>
            <div style="font-size: 12px; color: #999;">22:00 - 08:00</div>
          </div>
        </div>
        <div class="setting-right">→</div>
      </div>
    </div>
    
    <div class="card">
      <div class="card-title">数据同步</div>
      <div class="setting-item">
        <div class="setting-left">
          <div class="setting-icon">🔄</div>
          <div>
            <div class="setting-label">自动同步频率</div>
            <div style="font-size: 12px; color: #999;">当前: 15分钟</div>
          </div>
        </div>
        <div class="setting-right">→</div>
      </div>
      <div class="setting-item">
        <div class="setting-left">
          <div class="setting-icon">⏰</div>
          <div>
            <div class="setting-label">最后同步时间</div>
            <div style="font-size: 12px; color: #999;">2026-05-15 15:30:45</div>
          </div>
        </div>
        <div class="nav-btn secondary" style="padding: 6px 12px; font-size: 12px;">刷新</div>
      </div>
    </div>
    
    <div class="card">
      <div class="card-title">隐私与安全</div>
      <div class="setting-item">
        <div class="setting-left">
          <div class="setting-icon">🔒</div>
          <div class="setting-label">隐私政策</div>
        </div>
        <div class="setting-right">→</div>
      </div>
      <div class="setting-item">
        <div class="setting-left">
          <div class="setting-icon">📋</div>
          <div class="setting-label">用户协议</div>
        </div>
        <div class="setting-right">→</div>
      </div>
      <div class="setting-item">
        <div class="setting-left">
          <div class="setting-icon">🛡</div>
          <div class="setting-label">数据安全说明</div>
        </div>
        <div class="setting-right">→</div>
      </div>
    </div>
    
    <div class="card">
      <div class="card-title">关于</div>
      <div class="setting-item">
        <div class="setting-left">
          <div class="setting-icon">ℹ️</div>
          <div>
            <div class="setting-label">关于我们</div>
            <div style="font-size: 12px; color: #999;">版本 1.0.0</div>
          </div>
        </div>
        <div class="setting-right">→</div>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="tab-bar">
    <div class="tab-item active" onclick="showPage('home')">
      <svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
      <span>首页</span>
    </div>
    <div class="tab-item" onclick="showPage('videos')">
      <svg viewBox="0 0 24 24"><path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"/></svg>
      <span>视频</span>
    </div>
    <div class="tab-item" onclick="showPage('analytics')">
      <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/></svg>
      <span>分析</span>
    </div>
    <div class="tab-item" onclick="showPage('report')">
      <svg viewBox="0 0 24 24"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
      <span>报表</span>
    </div>
    <div class="tab-item" onclick="showPage('settings')">
      <svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
      <span>设置</span>
    </div>
  </div>
  
  <!-- 回复弹窗 -->
  <div id="replyModal" class="modal">
    <div class="modal-content">
      <div class="modal-title">回复评论</div>
      <textarea style="width: 100%; height: 100px; border: 1px solid #f0f0f0; border-radius: 8px; padding: 12px; font-size: 14px; resize: none;" placeholder="输入回复内容...">
感谢支持 🙏
稍后回复
已回复