编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>抖音视频监控小程序</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#f5f5f5;color:#333;max-width:430px;margin:0 auto;min-height:100vh}

/* 顶部导航 */
.header{background:linear-gradient(135deg,#fe2c55,#25f4ee);color:#fff;padding:15px 16px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100}
.header h1{font-size:18px;font-weight:600}
.header-right{display:flex;gap:12px}
.header-icon{width:24px;height:24px;cursor:pointer}

/* 引导页 */
.guide-overlay{position:fixed;top:0;left:50%;transform:translateX(-50%);width:430px;max-width:100%;height:100%;background:linear-gradient(135deg,#fe2c55,#25f4ee);z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:40px}
.guide-overlay h2{font-size:32px;margin-bottom:30px;font-weight:700}
.guide-overlay p{font-size:16px;line-height:1.8;opacity:0.95;margin-bottom:50px;max-width:280px}
.guide-logo{width:100px;height:100px;background:#fff;border-radius:24px;display:flex;align-items:center;justify-content:center;margin:0 auto 40px;box-shadow:0 10px 30px rgba(0,0,0,0.2)}
.guide-logo svg{width:60px;height:60px}
.guide-features{display:flex;flex-direction:column;gap:16px;margin-bottom:50px;width:100%;max-width:300px}
.guide-feature{display:flex;align-items:center;gap:12px;font-size:15px;text-align:left}
.guide-feature-icon{width:36px;height:36px;background:rgba(255,255,255,0.2);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px}
.guide-btn{background:#fff;color:#fe2c55;padding:16px 48px;border:none;border-radius:30px;font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,0.15)}

/* 页面容器 */
.page{display:none;padding-bottom:80px}
.page.active{display:block}

/* 底部导航 */
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:430px;max-width:100%;background:#fff;display:flex;justify-content:space-around;padding:10px 0;border-top:1px solid #eee;z-index:99}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;color:#999;font-size:12px}
.nav-item.active{color:#fe2c55}
.nav-item svg{width:24px;height:24px}

/* 账号列表 */
.account-list{padding:16px}
.account-card{background:#fff;border-radius:12px;margin-bottom:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
.account-header{display:flex;align-items:center;padding:12px;cursor:pointer}
.account-header:active{background:#f9f9f9}
.avatar{width:44px;height:44px;border-radius:50%;background:#eee;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:20px}
.account-info{flex:1}
.account-name{font-size:15px;font-weight:500;margin-bottom:4px}
.account-time{font-size:12px;color:#999}
.account-status{font-size:11px;padding:3px 8px;border-radius:4px}
.status-normal{background:#e6fff4;color:#07c160}
.status-expired{background:#fff2e6;color:#fa8c16}
.account-expand{color:#999;font-size:14px}

.account-videos{padding:0 12px 12px}
.video-item{display:flex;align-items:center;padding:10px;background:#fafafa;border-radius:8px;margin-bottom:8px;cursor:pointer}
.video-item:active{background:#f0f0f0}
.video-thumb{width:80px;height:60px;background:#ddd;border-radius:6px;margin-right:12px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.video-thumb img{width:100%;height:100%;object-fit:cover}
.video-info{flex:1}
.video-title{font-size:14px;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.video-meta{display:flex;gap:12px;font-size:12px;color:#666}
.video-meta span{display:flex;align-items:center;gap:3px}

/* 消息页面 */
.message-list{padding:16px}
.message-item{display:flex;align-items:flex-start;padding:16px;background:#fff;border-radius:12px;margin-bottom:12px;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
.msg-icon{width:40px;height:40px;background:linear-gradient(135deg,#fe2c55,#ff6b8a);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;margin-right:12px;flex-shrink:0}
.msg-content{flex:1}
.msg-title{font-size:15px;font-weight:500;margin-bottom:6px}
.msg-desc{font-size:13px;color:#666;margin-bottom:6px}
.msg-time{font-size:11px;color:#999}
.unread-dot{width:8px;height:8px;background:#fe2c55;border-radius:50%;flex-shrink:0;margin-left:8px}

/* 我的页面 */
.profile{padding:20px;text-align:center}
.profile-avatar{width:80px;height:80px;background:linear-gradient(135deg,#fe2c55,#25f4ee);border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:36px}
.profile-name{font-size:18px;font-weight:600;margin-bottom:8px}
.profile-id{font-size:14px;color:#999}

.menu-list{margin-top:20px}
.menu-item{display:flex;align-items:center;justify-content:space-between;padding:16px;background:#fff;border-radius:12px;margin-bottom:8px;cursor:pointer}
.menu-item:active{background:#f5f5f5}
.menu-item-left{display:flex;align-items:center;gap:12px}
.menu-icon{width:36px;height:36px;background:#f5f5f5;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}
.menu-text{font-size:15px}
.menu-arrow{color:#ccc;font-size:14px}

/* 弹窗 */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:200;display:none;align-items:flex-end;justify-content:center}
.modal-overlay.show{display:flex}
.modal-content{background:#fff;border-radius:16px 16px 0 0;width:100%;max-width:430px;padding:20px}
.modal-title{font-size:17px;font-weight:600;text-align:center;margin-bottom:16px}
.modal-btn{display:block;width:100%;padding:14px;background:#fe2c55;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:500;cursor:pointer;margin-top:12px}
.modal-btn.secondary{background:#f5f5f5;color:#333}
.modal-cancel{text-align:center;color:#999;font-size:14px;margin-top:12px;cursor:pointer}

/* 添加账号页面 */
.add-account-page{padding:20px}
.add-account-page h2{font-size:20px;margin-bottom:24px;text-align:center}
.bind-list{margin-top:20px}
.bind-item{display:flex;align-items:center;padding:16px;background:#fff;border-radius:12px;margin-bottom:10px;cursor:pointer}
.bind-item:active{background:#f5f5f5}
.bind-icon{width:44px;height:44px;background:#f5f5f5;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:14px;font-size:22px}
.bind-text{font-size:15px}

/* 加载状态 */
.loading{text-align:center;padding:40px;color:#999}

/* 空状态 */
.empty-state{text-align:center;padding:60px 20px}
.empty-icon{font-size:48px;margin-bottom:16px}
.empty-text{color:#999;font-size:14px}
</style>
</head>
<body>

<!-- 引导页 -->
<div class="guide-overlay" id="guidePage">
  <div class="guide-logo">
    <svg viewBox="0 0 24 24" fill="#fe2c55"><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>
  </div>
  <h2>抖音视频监控</h2>
  <p>添加抖音账号，自动监测视频播放量<br>达标自动提醒，随时掌握视频动态</p>
  <div class="guide-features">
    <div class="guide-feature">
      <div class="guide-feature-icon">👤</div>
      <span>一键授权绑定抖音账号</span>
    </div>
    <div class="guide-feature">
      <div class="guide-feature-icon">📊</div>
      <span>实时监控视频播放数据</span>
    </div>
    <div class="guide-feature">
      <div class="guide-feature-icon">🔔</div>
      <span>播放量达标自动提醒</span>
    </div>
  </div>
  <button class="guide-btn" onclick="closeGuide()">开始使用</button>
</div>

<!-- 顶部导航 -->
<div class="header">
  <h1>抖音视频监控</h1>
  <div class="header-right">
  </div>
</div>

<!-- 首页-账号列表 -->
<div class="page active" id="homePage">
  <div class="account-list" id="accountList"></div>
</div>

<!-- 消息页面 -->
<div class="page" id="msgPage">
  <div class="message-list" id="messageList">
    <div class="message-item">
      <div class="msg-icon">🎉</div>
      <div class="msg-content">
        <div class="msg-title">视频播放量突破5000！</div>
        <div class="msg-desc">您的视频《夏日穿搭分享》播放量已突破5000</div>
        <div class="msg-time">2小时前</div>
      </div>
      <div class="unread-dot"></div>
    </div>
    <div class="message-item">
      <div class="msg-icon">🔥</div>
      <div class="msg-content">
        <div class="msg-title">爆款预警！</div>
        <div class="msg-desc">您的视频《美食教程》播放量已突破10000</div>
        <div class="msg-time">昨天</div>
      </div>
      <div class="unread-dot"></div>
    </div>
    <div class="message-item">
      <div class="msg-icon">👍</div>
      <div class="msg-content">
        <div class="msg-title">视频播放量突破30000！</div>
        <div class="msg-desc">您的视频《健身打卡》播放量已突破30000</div>
        <div class="msg-time">3天前</div>
      </div>
    </div>
  </div>
</div>

<!-- 我的页面 -->
<div class="page" id="profilePage">
  <div class="profile">
    <div class="profile-avatar">我</div>
    <div class="profile-name">用户小明</div>
    <div class="profile-id">已绑定 2 个账号</div>
  </div>
  <div class="menu-list" style="padding:0 16px">
    <div class="menu-item" onclick="showAddAccount()">
      <div class="menu-item-left">
        <div class="menu-icon">➕</div>
        <span class="menu-text">添加账号</span>
      </div>
      <span class="menu-arrow">›</span>
    </div>
  </div>
</div>

<!-- 添加账号页面 -->
<div class="page" id="addAccountPage">
  <div class="add-account-page">
    <h2>添加抖音账号</h2>
    <div class="bind-list">
      <div class="bind-item" onclick="bindSuccess()">
        <div class="bind-icon">🎵</div>
        <div class="bind-text">抖音一键登录授权</div>
      </div>
    </div>
    <p style="text-align:center;color:#999;font-size:13px;margin-top:20px">点击授权后将跳转至抖音进行身份验证</p>
  </div>
</div>

<!-- 底部导航 -->
<div class="bottom-nav">
  <div class="nav-item active" onclick="switchTab('home')">
    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
    <span>首页</span>
  </div>
  <div class="nav-item" onclick="switchTab('msg')">
    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
    <span>消息</span>
  </div>
  <div class="nav-item" onclick="switchTab('profile')">
    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
    <span>我的</span>
  </div>
</div>

<!-- 解绑确认弹窗 -->
<div class="modal-overlay" id="unbindModal">
  <div class="modal-content">
    <div class="modal-title">确认解绑</div>
    <p style="color:#666;font-size:14px;text-align:center">确定要解绑该账号吗？解绑后该账号的视频数据将不再监测。</p>
    <button class="modal-btn" onclick="confirmUnbind()">确认解绑</button>
    <button class="modal-btn secondary" onclick="closeModal()">取消</button>
  </div>
</div>

<!-- Toast提示 -->
<div id="toast" style="position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.8);color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;z-index:300;display:none"></div>

<script>
// 示例数据
const accounts = [
  {
    id: 1, name: '美食达人小王', time: '2024.01.15 绑定', status: 'normal', avatar: '🍳',
    videos: [
      { title: '家常红烧肉教程，入口即化', time: '2小时前', play: 8562, like: 2341, share: 89 },
      { title: '5分钟早餐三明治合集', time: '昨天', play: 12345, like: 5678, share: 234 },
      { title: '自制奶茶方法分享', time: '3天前', play: 45221, like: 12345, share: 890 }
    ]
  },
  {
    id: 2, name: '健身教练阿杰', time: '2024.02.20 绑定', status: 'normal', avatar: '💪',
    videos: [
      { title: '每天5分钟瘦腹训练', time: '1小时前', play: 3245, like: 892, share: 45 },
      { title: '新手健身入门指南', time: '昨天', play: 15678, like: 4567, share: 321 }
    ]
  }
];

let currentAccountId = null;

// 关闭引导页
function closeGuide() {
  document.getElementById('guidePage').style.display = 'none';
}

// 切换标签页
function switchTab(tab) {
  document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
  document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
  
  if (tab === 'home') {
    document.getElementById('homePage').classList.add('active');
    document.querySelectorAll('.nav-item')[0].classList.add('active');
  } else if (tab === 'msg') {
    document.getElementById('msgPage').classList.add('active');
    document.querySelectorAll('.nav-item')[1].classList.add('active');
  } else if (tab === 'profile') {
    document.getElementById('profilePage').classList.add('active');
    document.querySelectorAll('.nav-item')[2].classList.add('active');
  }
}

// 显示添加账号页面
function showAddAccount() {
  document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
  document.getElementById('addAccountPage').classList.add('active');
}

// 绑定成功
function bindSuccess() {
  showToast('授权成功，账号绑定完成');
  setTimeout(() => switchTab('home'), 1000);
  renderAccounts();
}

// 显示解绑弹窗
function showUnbindModal(id) {
  currentAccountId = id;
  document.getElementById('unbindModal').classList.add('show');
}

// 确认解绑
function confirmUnbind() {
  accounts.splice(accounts.findIndex(a => a.id === currentAccountId), 1);
  renderAccounts();
  closeModal();
  showToast('账号已解绑');
}

// 关闭弹窗
function closeModal() {
  document.getElementById('unbindModal').classList.remove('show');
}

// Toast提示
function showToast(msg) {
  const toast = document.getElementById('toast');
  toast.textContent = msg;
  toast.style.display = 'block';
  setTimeout(() => toast.style.display = 'none', 2000);
}

// 格式化数字
function formatNum(n) {
  if (n >= 10000) return (n / 10000).toFixed(1) + '万';
  return n.toString();
}

// 渲染账号列表
function renderAccounts() {
  const container = document.getElementById('accountList');
  
  if (accounts.length === 0) {
    container.innerHTML = `
      <div class="empty-state">
        <div class="empty-icon">📱</div>
        <div class="empty-text">暂未绑定账号</div>
        <button class="modal-btn" onclick="showAddAccount()" style="margin-top:20px">添加账号</button>
      </div>
    `;
    return;
  }
  
  container.innerHTML = accounts.map(acc => `
    <div class="account-card">
      <div class="account-header" onclick="toggleVideos(${acc.id})">
        <div class="avatar">${acc.avatar}</div>
        <div class="account-info">
          <div class="account-name">${acc.name}</div>
          <div class="account-time">${acc.time}</div>
        </div>
        <span class="account-status ${acc.status === 'normal' ? 'status-normal' : 'status-expired'}">${acc.status === 'normal' ? '正常' : '即将过期'}</span>
        <span class="account-expand" id="expand-${acc.id}">▼</span>
      </div>
      <div class="account-videos" id="videos-${acc.id}">
        ${acc.videos.slice(0,1).map(v => `
          <div class="video-item">
            <div class="video-thumb">
              <div style="font-size:24px">🎬</div>
            </div>
            <div class="video-info">
              <div class="video-title">${v.title}</div>
              <div class="video-meta">
                <span>▶ ${formatNum(v.play)}</span>
                <span>👍 ${formatNum(v.like)}</span>
                <span>↗ ${formatNum(v.share)}</span>
              </div>
            </div>
          </div>
        `).join('')}
        <div style="text-align:center;padding:8px 0">
          <button class="modal-btn secondary" style="font-size:13px;padding:8px 16px;background:#fff;color:#fe2c55;border:1px solid #fe2c55" onclick="showUnbindModal(${acc.id})">解绑账号</button>
        </div>
      </div>
    </div>
  `).join('');
}

// 展开/收起视频列表
function toggleVideos(id) {
  const videos = document.getElementById('videos-' + id);
  const expand = document.getElementById('expand-' + id);
  
  if (videos.style.display === 'none') {
    videos.style.display = 'block';
    expand.textContent = '▼';
  } else {
    videos.style.display = 'none';
    expand.textContent = '▶';
  }
}

// 初始化
renderAccounts();

// 下拉刷新示例
let startY = 0;
document.querySelector('.header').addEventListener('touchstart', e => startY = e.touches[0].clientY);
document.querySelector('.header').addEventListener('touchend', e => {
  if (startY - e.changedTouches[0].clientY > 50) {
    showToast('正在刷新...');
    setTimeout(() => showToast('已更新至最新数据'), 800);
  }
});
</script>
</body>
</html>