cc-insight 0.1.0

package/README.md

@@ -0,0 +1,106 @@
+# CC Insight
+
+> A local analytics dashboard for [Claude Code](https://claude.ai/code) — understand how you actually use AI.
+
+[中文说明](README.zh.md)
+
+---
+
+## Why
+
+Claude Code's built-in `/insights` command gives you a quick text summary. But it can't answer questions like:
+
+- Which topics take the most back-and-forth before they're resolved?
+- What time of day am I most productive?
+- Which skills did I install and never use?
+- How has my usage changed over the past month?
+
+CC Insight indexes your local session history and presents it as an interactive dashboard — no cloud, no account, no data leaving your machine.
+
+---
+
+## vs `/insights`
+
+| | `/insights` | CC Insight |
+|---|---|---|
+| Output | Static HTML file | Interactive dashboard |
+| History | Current session only | All-time + time range filter |
+| Trends | — | Time patterns, topic trends, efficiency metrics |
+| Skills | — | Usage stats, idle detection, bulk cleanup |
+| MCP Servers | — | Configured servers + tool list |
+
+---
+
+## Features
+
+**Overview** — Session count, duration, peak hours, GitHub-style activity heatmap, 24H distribution, and smart habit insights.
+
+**Efficiency** — Time-consuming topics, tool call density, high-round sessions, project distribution, and a time-of-day × topic heatmap.
+
+**Skills** — Installed Skill / Agent / Plugin list with usage stats, idle detection, one-click bulk cleanup, and security scan.
+
+**MCP Servers** — Configured servers and their tools, parsed from `settings.json` and `claude_desktop_config.json`.
+
+---
+
+## Requirements
+
+- Node.js ≥ 20
+- Claude Code installed (`~/.claude/` directory must exist)
+
+---
+
+## Installation
+
+**npm (recommended)**
+
+```bash
+npm install -g cc-insight
+cc-insight
+```
+
+**From source**
+
+```bash
+git clone https://github.com/hopeee-lab/cc-insight.git
+cd cc-insight
+npm install
+npm start
+```
+
+The dashboard opens automatically at `http://127.0.0.1:3847`.
+
+> macOS: if installation fails, install Xcode Command Line Tools first:
+> `xcode-select --install`
+
+---
+
+## Usage
+
+| Action | How |
+|--------|-----|
+| Switch time range | 7d / 30d / 90d / All — top of each view |
+| Re-scan skills | Restart CC Insight (auto on every launch) |
+| Re-index sessions | "重新检测" on the empty state screen |
+| Bulk clean unused tools | "一键清理" in the Skills → Unused list |
+
+---
+
+## Data & Privacy
+
+CC Insight reads only from `~/.claude/` and builds a local index at `~/.cc-insight/data.db`.
+It runs a local web server at `127.0.0.1:3847` — accessible from your machine only.
+**No data is ever sent anywhere.**
+
+| Data | Source |
+|------|--------|
+| Session history | `~/.claude/projects/**/*.jsonl` |
+| Skills & Agents | `~/.claude/skills/*/SKILL.md` |
+| Plugins | `~/.claude/plugins/cache/` |
+| MCP Servers | `~/.claude/settings.json`, `~/Library/Application Support/Claude/claude_desktop_config.json` |
+
+---
+
+## License
+
+MIT

package/README.zh.md

@@ -0,0 +1,106 @@
+# CC Insight
+
+> 本地 [Claude Code](https://claude.ai/code) 使用数据可视化工具 — 真正了解你在用 AI 做什么。
+
+[English](README.md)
+
+---
+
+## 为什么做这个
+
+Claude Code 内置的 `/insights` 指令会生成一份静态 HTML 报告，但它回答不了这些问题：
+
+- 哪类任务最耗时、需要最多轮对话才能解决？
+- 我在一天中哪个时段最高效？
+- 装了哪些 Skill 从来没用过？
+- 这个月比上个月用得多了还是少了？
+
+CC Insight 把你本地的对话历史建立索引，以交互式仪表盘的形式呈现——无需云端、无需注册、数据不离本机。
+
+---
+
+## 与 `/insights` 的区别
+
+| | `/insights` | CC Insight |
+|---|---|---|
+| 输出形式 | 生成静态 HTML 文件 | 实时交互仪表盘 |
+| 历史范围 | 当前 session | 全量历史 + 时间范围筛选 |
+| 趋势分析 | — | 时段分布、话题趋势、效率指标 |
+| Skill 管理 | — | 使用统计、闲置检测、一键清理 |
+| MCP Server | — | 已配置服务器 + 工具列表 |
+
+---
+
+## 功能
+
+**使用概览** — 对话次数、时长、活跃时段、GitHub 风格热力图、24H 分布图，以及使用习惯智能洞察。
+
+**效率分析** — 耗时话题排名、工具调用密度、高轮次 Session 列表、项目分布、时段 × 话题热力图。
+
+**Skill & Agent 管理** — 已安装工具列表（含使用统计）、闲置检测、一键批量清理、SKILL.md 安全扫描。
+
+**MCP Server** — 自动读取配置文件，展示已配置的 MCP Server 及工具列表。
+
+---
+
+## 环境要求
+
+- Node.js ≥ 20
+- 已安装并使用过 Claude Code（`~/.claude/` 目录存在）
+
+---
+
+## 安装
+
+**npm 安装（推荐）**
+
+```bash
+npm install -g cc-insight
+cc-insight
+```
+
+**从源码运行**
+
+```bash
+git clone https://github.com/hopeee-lab/cc-insight.git
+cd cc-insight
+npm install
+npm start
+```
+
+启动后浏览器自动打开 `http://127.0.0.1:3847`。
+
+> macOS 如果安装失败，先安装 Xcode 命令行工具：
+> `xcode-select --install`
+
+---
+
+## 使用说明
+
+| 操作 | 方式 |
+|------|------|
+| 切换时间范围 | 各视图顶部 7 天 / 30 天 / 90 天 / 全部按钮 |
+| 重新扫描 Skill | 重启 CC Insight（每次启动自动执行） |
+| 重建对话索引 | 空状态页点击「重新检测」 |
+| 一键清理闲置工具 | Skill 页「从未使用」列表 → 「一键清理」 |
+
+---
+
+## 数据与隐私
+
+CC Insight 只读取 `~/.claude/` 目录，在本地建立索引文件 `~/.cc-insight/data.db`。
+Web 服务仅监听 `127.0.0.1:3847`，只有本机可访问。
+**所有数据不会上传到任何服务器。**
+
+| 数据类型 | 来源路径 |
+|----------|----------|
+| 对话记录 | `~/.claude/projects/**/*.jsonl` |
+| Skill / Agent | `~/.claude/skills/*/SKILL.md` |
+| Plugin | `~/.claude/plugins/cache/` |
+| MCP Server | `~/.claude/settings.json`、`~/Library/Application Support/Claude/claude_desktop_config.json` |
+
+---
+
+## License
+
+MIT

package/bin/cc-insight.js

@@ -0,0 +1,51 @@
+#!/usr/bin/env node
+// bin/cc-insight.js
+import { createAppServer } from '../src/server.js'
+import { runFullIndex, syncToolsOnly } from '../src/indexer.js'
+import { startWatcher } from '../src/watcher.js'
+import { getMeta } from '../src/db/db.js'
+import open from 'open'
+
+const PORT = parseInt(process.env.CC_PORT ?? '3847')
+
+async function main() {
+  const srv = createAppServer()
+  const port = await srv.listen(PORT)
+  const url = `http://127.0.0.1:${port}`
+
+  console.log(`\nCC Insight running → ${url}\n`)
+
+  const alreadyIndexed = getMeta('last_full_index')
+
+  // 每次启动都同步工具（检测新安装/删除的 skill & plugin）
+  syncToolsOnly()
+
+  // 先打开浏览器，等待 WS 连接建立后再推送进度
+  await open(url)
+  if (!alreadyIndexed) await new Promise(r => setTimeout(r, 1500))
+
+  if (!alreadyIndexed) {
+    console.log('首次启动，建立索引中...')
+    await runFullIndex((pct) => {
+      process.stdout.write(`\r  索引进度: ${pct}%`)
+      srv.sendProgress(pct)
+    })
+    console.log('\n索引完成。')
+    srv.sendProgress(100)
+    setTimeout(() => srv.sendRefresh(), 600)
+  } else {
+    srv.sendRefresh()
+  }
+
+  startWatcher(() => srv.sendRefresh())
+
+  process.on('SIGINT', () => {
+    console.log('\nCC Insight stopped.')
+    process.exit(0)
+  })
+}
+
+main().catch(err => {
+  console.error('启动失败:', err.message)
+  process.exit(1)
+})

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "cc-insight",
+  "version": "0.1.0",
+  "description": "Local Claude Code usage dashboard — sessions, skills, efficiency, MCP servers, and shareable poster",
+  "type": "module",
+  "bin": {
+    "cc-insight": "bin/cc-insight.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "public",
+    "README.md",
+    "README.zh.md"
+  ],
+  "keywords": [
+    "claude",
+    "claude-code",
+    "ai",
+    "dashboard",
+    "analytics",
+    "skill",
+    "mcp"
+  ],
+  "homepage": "https://github.com/hopeee-lab/cc-insight",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hopeee-lab/cc-insight.git"
+  },
+  "license": "MIT",
+  "scripts": {
+    "start": "node bin/cc-insight.js",
+    "test": "node --experimental-vm-modules node_modules/.bin/jest --testPathPattern=tests/"
+  },
+  "dependencies": {
+    "better-sqlite3": "^9.6.0",
+    "chokidar": "^3.6.0",
+    "express": "^4.19.0",
+    "open": "^10.1.0",
+    "ws": "^8.17.0"
+  },
+  "devDependencies": {
+    "jest": "^29.7.0"
+  },
+  "jest": {
+    "transform": {}
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

package/public/index.html

@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html lang="zh" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CC Insight</title>
+  <style>
+    /* ── Reset & Base ── */
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      --bg:       #0d1117;
+      --bg2:      #111827;
+      --bg3:      #1f2937;
+      --border:   #1f2937;
+      --text:     #e5e7eb;
+      --muted:    #6b7280;
+      --green:    #4ade80;
+      --cyan:     #22d3ee;
+      --amber:    #f59e0b;
+      --red:      #f87171;
+      --purple:   #a78bfa;
+      --font:     'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+      --radius:   6px;
+    }
+
+    [data-theme="light"] {
+      --bg:     #ffffff;
+      --bg2:    #f9fafb;
+      --bg3:    #f3f4f6;
+      --border: #e5e7eb;
+      --text:   #111827;
+      --muted:  #6b7280;
+      --green:  #16a34a;
+      --cyan:   #0891b2;
+    }
+
+    html, body { height: 100%; background: var(--bg); color: var(--text);
+      font-family: var(--font); font-size: 14px; line-height: 1.5; }
+
+    /* ── Layout ── */
+    .layout { display: flex; flex-direction: column; height: 100vh; }
+
+    .topbar {
+      display: flex; align-items: center; gap: 12px;
+      padding: 0 20px; height: 48px;
+      background: var(--bg2); border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
+    }
+    .topbar-brand { color: var(--green); font-weight: bold; font-size: 15px; flex-shrink: 0; }
+    .topbar-spacer { flex: 1; }
+    .topbar-tool  { color: var(--muted); font-size: 13px; flex-shrink: 0; }
+
+    /* ── 海报按钮 ── */
+    .poster-btn {
+      display: flex; align-items: center; gap: 6px;
+      padding: 5px 12px; border-radius: var(--radius);
+      border: 1px solid var(--border); background: transparent;
+      color: var(--muted); font-size: 13px; font-family: var(--font);
+      cursor: pointer; transition: all 0.15s; flex-shrink: 0;
+    }
+    .poster-btn:hover {
+      border-color: var(--green); color: var(--green);
+      background: color-mix(in srgb, var(--green) 8%, transparent);
+    }
+    .poster-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
+
+    /* Segmented tab */
+    .tab-group {
+      display: flex; gap: 2px;
+      background: var(--bg3); border: 1px solid var(--border);
+      border-radius: 8px; padding: 3px;
+    }
+    .tab-btn {
+      padding: 5px 16px; border-radius: 6px; border: none;
+      background: transparent; color: var(--muted);
+      font-size: 14px; font-family: var(--font); cursor: pointer;
+      transition: all 0.15s; white-space: nowrap;
+    }
+    .tab-btn:hover { color: var(--text); }
+    .tab-btn.active { background: var(--bg2); color: var(--text);
+      box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
+
+
+    .main { display: flex; flex: 1; overflow: hidden; }
+
+    /* ── Content ── */
+    .content { flex: 1; min-height: 0; overflow: hidden; padding: 20px; display: flex; flex-direction: column; }
+
+    /* ── Cards ── */
+    .card {
+      background: var(--bg2); border: 1px solid var(--border);
+      border-radius: var(--radius); padding: 16px;
+    }
+    .card-label { font-size: 11px; color: var(--muted);
+      letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
+    .card-value { font-size: 26px; font-weight: bold; }
+    .card-sub   { font-size: 14px; color: var(--muted); margin-top: 2px; }
+
+    .grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
+    .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
+
+    /* ── Time range filter ── */
+    .range-filter { display: flex; gap: 6px; align-items: center;
+      margin-bottom: 16px; }
+    .range-filter span { font-size: 14px; color: var(--muted); }
+    .range-btn {
+      padding: 3px 10px; border-radius: var(--radius); font-size: 14px;
+      cursor: pointer; font-family: var(--font);
+      border: 1px solid var(--border); background: transparent; color: var(--muted);
+    }
+    .range-btn.active {
+      background: color-mix(in srgb, var(--green) 15%, transparent);
+      border-color: var(--green); color: var(--green);
+    }
+    .range-btn:hover:not(.active) { color: var(--text); }
+
+    /* ── Split layout ── */
+    .split { display: grid; grid-template-columns: 280px 1fr; gap: 12px; flex: 1; min-height: 0; overflow: hidden; }
+    .split-left { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; padding-bottom: 20px; }
+    .split-right { min-height: 0; overflow-y: auto; padding-bottom: 20px; }
+
+    /* ── Section header ── */
+    .section-header { display: flex; justify-content: space-between;
+      align-items: center; margin-bottom: 10px; }
+    .section-title { font-size: 12px; color: var(--muted);
+      letter-spacing: 1px; text-transform: uppercase; }
+
+    /* ── Progress screen ── */
+    #progress-screen {
+      position: fixed; inset: 0; background: var(--bg);
+      display: flex; flex-direction: column;
+      align-items: center; justify-content: center; gap: 20px; z-index: 100;
+    }
+    .progress-title { font-size: 16px; color: var(--green); }
+    .progress-bar-wrap { width: 320px; background: var(--bg3);
+      border-radius: 4px; height: 6px; }
+    .progress-bar { height: 6px; background: var(--green);
+      border-radius: 4px; width: 0%; transition: width 0.3s; }
+    .progress-pct { font-size: 14px; color: var(--muted); }
+
+    /* ── Scrollbar ── */
+    ::-webkit-scrollbar { width: 6px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 3px; }
+
+    /* ── Util ── */
+    .green  { color: var(--green);  }
+    .cyan   { color: var(--cyan);   }
+    .amber  { color: var(--amber);  }
+    .red    { color: var(--red);    }
+    .purple { color: var(--purple); }
+    .muted  { color: var(--muted);  }
+    .hidden { display: none !important; }
+  </style>
+</head>
+<body>
+
+<!-- 场景2：未检测到 Claude Code -->
+<div id="empty-no-claude" style="display:none;position:fixed;inset:0;
+  display:none;align-items:center;justify-content:center;
+  background:var(--bg);flex-direction:column;gap:12px;text-align:center;padding:40px;">
+  <div style="font-size:20px;font-weight:700;color:var(--text);">未检测到 Claude Code</div>
+  <div style="font-size:13px;color:var(--muted);line-height:1.8;">
+    使用 Claude Code 后<br>即可生成你的使用画像
+  </div>
+</div>
+
+<!-- 场景1：有 Claude，但暂无数据 -->
+<div id="empty-no-data" style="display:none;position:fixed;inset:0;
+  align-items:center;justify-content:center;
+  background:var(--bg);flex-direction:column;gap:12px;text-align:center;padding:40px;">
+  <div style="font-size:20px;font-weight:700;color:var(--text);">未检测到 Claude Code 使用记录</div>
+  <div style="font-size:13px;color:var(--muted);">请先使用一段时间再查看</div>
+  <div id="empty-scan-paths" style="font-size:12px;color:var(--muted);margin-top:4px;"></div>
+  <button id="empty-reindex-btn" style="margin-top:8px;background:transparent;
+    border:1px solid var(--border);color:var(--muted);border-radius:4px;
+    padding:6px 16px;font-size:13px;cursor:pointer;font-family:var(--font);">
+    重新检测
+  </button>
+</div>
+
+<!-- 首次建库进度屏 -->
+<div id="progress-screen">
+  <div class="progress-title">CC Insight — 正在建立索引</div>
+  <div class="progress-bar-wrap">
+    <div class="progress-bar" id="progress-bar"></div>
+  </div>
+  <div class="progress-pct" id="progress-pct">0%</div>
+</div>
+
+<!-- 主布局 -->
+<div class="layout" id="app">
+  <header class="topbar">
+    <span class="topbar-brand">CC Insight</span>
+    <div class="topbar-spacer"></div>
+    <nav class="tab-group" id="tab-group">
+      <button class="tab-btn active" data-view="overview">Overview</button>
+      <button class="tab-btn" data-view="insights">Insights</button>
+      <button class="tab-btn" data-view="skills">Skill &amp; Agent</button>
+      <button class="tab-btn" data-view="mcp">MCP</button>
+    </nav>
+    <div class="topbar-spacer"></div>
+    <button class="poster-btn" id="poster-btn" title="生成分享海报">
+      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="2" y="2" width="12" height="12" rx="1.5"/>
+        <path d="M8 5v6M5.5 7.5L8 5l2.5 2.5"/>
+      </svg>
+      生成海报
+    </button>
+    <span class="topbar-tool">Claude Code</span>
+  </header>
+
+  <div class="main">
+    <main class="content" id="content"></main>
+  </div>
+</div>
+
+<!-- 删除确认弹窗 -->
+<div id="confirm-modal" style="display:none;position:fixed;inset:0;z-index:200;
+  background:rgba(0,0,0,0.6);align-items:center;justify-content:center;">
+  <div style="background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
+    padding:24px;width:320px;font-family:var(--font);">
+    <div style="font-size:15px;color:var(--text);margin-bottom:8px;">确认删除</div>
+    <div id="confirm-msg" style="font-size:14px;color:var(--muted);margin-bottom:20px;"></div>
+    <div style="display:flex;gap:10px;justify-content:flex-end;">
+      <button id="confirm-cancel" style="background:transparent;border:1px solid var(--border);
+        color:var(--muted);border-radius:3px;padding:5px 16px;font-size:14px;
+        cursor:pointer;font-family:var(--font);">取消</button>
+      <button id="confirm-ok" style="background:color-mix(in srgb,var(--red) 15%,transparent);
+        border:1px solid var(--red);color:var(--red);border-radius:3px;
+        padding:5px 16px;font-size:14px;cursor:pointer;font-family:var(--font);">删除</button>
+    </div>
+  </div>
+</div>
+
+<script type="module" src="js/app.js"></script>
+</body>
+</html>

package/public/js/app.js

@@ -0,0 +1,129 @@
+// public/js/app.js
+import { initTheme } from './theme.js'
+import { renderOverview } from './overview.js'
+import { renderSkills, resetSkillsState } from './skills.js'
+import { renderMcp } from './mcp.js'
+import { renderInsightsPage } from './insights.js'
+import { openPosterModal } from './poster.js'
+
+// 当前时间范围，全局共享
+export let currentRange = '7d'
+
+// 当前视图
+let currentView = 'overview'
+
+// ── WebSocket ──
+function connectWS() {
+  const ws = new WebSocket(`ws://${location.host}`)
+
+  ws.onmessage = (e) => {
+    const msg = JSON.parse(e.data)
+
+    if (msg.type === 'progress') {
+      const pct = msg.pct
+      document.getElementById('progress-bar').style.width = pct + '%'
+      document.getElementById('progress-pct').textContent = pct + '%'
+      if (pct >= 100) {
+        setTimeout(() => {
+          document.getElementById('progress-screen').classList.add('hidden')
+          document.getElementById('app').style.display = ''
+          renderView(currentView)
+        }, 500)
+      }
+    }
+
+    if (msg.type === 'refresh') {
+      document.getElementById('progress-screen').classList.add('hidden')
+      // 重新检测按钮状态重置
+      const btn = document.getElementById('empty-reindex-btn')
+      if (btn) { btn.textContent = '重新检测'; btn.disabled = false }
+      checkStatusAndRender()
+    }
+
+    if (msg.type === 'ready') {
+      document.getElementById('progress-screen').classList.add('hidden')
+      checkStatusAndRender()
+    }
+  }
+
+  ws.onclose = () => setTimeout(connectWS, 2000)
+}
+
+// ── 路由 ──
+function renderView(view) {
+  const isTabSwitch = view !== currentView
+  if (isTabSwitch && view === 'skills') resetSkillsState()
+  currentView = view
+  const content = document.getElementById('content')
+  if (isTabSwitch) content.scrollTop = 0
+
+  document.querySelectorAll('#tab-group .tab-btn').forEach(btn => {
+    btn.classList.toggle('active', btn.dataset.view === view)
+  })
+
+  if (view === 'overview')  renderOverview(content, currentRange, !isTabSwitch)
+  if (view === 'insights')  renderInsightsPage(content, currentRange)
+  if (view === 'skills')    renderSkills(content, currentRange, !isTabSwitch)
+  if (view === 'mcp')       renderMcp(content)
+}
+
+// ── 时间筛选 ──
+export function setRange(range) {
+  currentRange = range
+  renderView(currentView)
+}
+
+// ── 状态检测 & 空视图 ──
+async function checkStatusAndRender() {
+  const res = await fetch('/api/status')
+  const { hasClaude, hasData, scanPaths } = await res.json()
+
+  const elNoClaude = document.getElementById('empty-no-claude')
+  const elNoData   = document.getElementById('empty-no-data')
+  const elApp      = document.getElementById('app')
+
+  // 重置所有视图
+  elNoClaude.style.display = 'none'
+  elNoData.style.display   = 'none'
+  elApp.style.display      = 'none'
+
+  if (!hasClaude) {
+    elNoClaude.style.display = 'flex'
+    return
+  }
+
+  if (!hasData) {
+    document.getElementById('empty-scan-paths').textContent =
+      '检测路径：' + scanPaths.join('、')
+    elNoData.style.display = 'flex'
+    return
+  }
+
+  elApp.style.display = ''
+  renderView(currentView)
+}
+
+// ── 初始化 ──
+document.addEventListener('DOMContentLoaded', async () => {
+  await initTheme()
+  connectWS()
+
+  // 重新检测按钮
+  document.getElementById('empty-reindex-btn')?.addEventListener('click', async (e) => {
+    const btn = e.currentTarget
+    btn.textContent = '检测中…'
+    btn.disabled = true
+    await fetch('/api/reindex', { method: 'POST' })
+    // 结果通过 WS refresh 事件触发，不需要在这里轮询
+  })
+
+  // tab 导航
+  document.querySelectorAll('#tab-group .tab-btn').forEach(btn => {
+    btn.addEventListener('click', () => renderView(btn.dataset.view))
+  })
+
+  // 海报按钮
+  document.getElementById('poster-btn')?.addEventListener('click', () => {
+    openPosterModal(currentRange)
+  })
+})