wukong-gitlog-cli 1.0.15 → 1.0.17

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.0.17](https://github.com/tomatobybike/wukong-gitlog-cli/compare/v1.0.16...v1.0.17) (2025-12-05)
+
+
+### Features
+
+* 🎸 change line total ([bf01655](https://github.com/tomatobybike/wukong-gitlog-cli/commit/bf01655f3721b87d4bb36e74a7ce6dadf5e7ee94))
+* 🎸 develop Changes totals ([fb64986](https://github.com/tomatobybike/wukong-gitlog-cli/commit/fb64986cfde215fc58ce7b1b66cbc8bdbf280627))
+
+### [1.0.16](https://github.com/tomatobybike/wukong-gitlog-cli/compare/v1.0.15...v1.0.16) (2025-12-03)
+
+
+### Features
+
+* 🎸 sider bar UI ([e3a48ab](https://github.com/tomatobybike/wukong-gitlog-cli/commit/e3a48abe5b0148fe0d9dcd42b7b028cad53d4c94))
+* 🎸 ui show ([e9eba58](https://github.com/tomatobybike/wukong-gitlog-cli/commit/e9eba5823333545d598be363b58eca1f6ecfa6ed))
+
+
+### Bug Fixes
+
+* 🐛 makeline clickEvent ([4ad6378](https://github.com/tomatobybike/wukong-gitlog-cli/commit/4ad6378d88aca2dde6083efde844730443228e48))
+
 ### [1.0.15](https://github.com/tomatobybike/wukong-gitlog-cli/compare/v1.0.14...v1.0.15) (2025-12-03)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wukong-gitlog-cli",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "Advanced Git commit log exporter with Excel/JSON/TXT output, grouping, stats and CLI.",
   "keywords": [
     "git",
@@ -90,20 +90,19 @@
     ]
   },
   "dependencies": {
+    "boxen": "8.0.1",
+    "chalk": "5.6.2",
     "commander": "12.1.0",
-    "dayjs": "1.11.19",
     "date-holidays": "2.1.1",
-    "string-width": "5.1.2",
+    "dayjs": "1.11.19",
     "exceljs": "4.4.0",
-    "zx": "7.2.4",
     "is-online": "12.0.2",
-    "boxen": "8.0.1",
-    "chalk": "5.6.2"
+    "ora": "9.0.0",
+    "string-width": "5.1.2",
+    "zx": "7.2.4"
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "5.2.2",
-    "husky": "^9.1.7",
-    "lint-staged": "^16.2.7",
     "eslint": "8.57.1",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "10.1.8",
@@ -111,6 +110,8 @@
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-prettier": "5.5.4",
     "eslint-plugin-simple-import-sort": "12.1.1",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
     "prettier": "3.6.2",
     "prettier-plugin-packagejson": "2.5.19",
     "sort-package-json": "3.4.0",

package/src/cli.mjs

@@ -3,12 +3,18 @@ import { Command } from 'commander'
 import dayjs from 'dayjs'
 import isoWeek from 'dayjs/plugin/isoWeek.js'
 import fs from 'fs'
+import ora from 'ora'
 import path from 'path'
 import { fileURLToPath } from 'url'
 
 import { CLI_NAME } from './constants/index.mjs'
-import { exportExcel, exportExcelPerPeriodSheets } from './excel.mjs'
+import {
+  exportExcel,
+  exportExcelAuthorChangeStats,
+  exportExcelPerPeriodSheets
+} from './excel.mjs'
 import { getGitLogs } from './git.mjs'
+import { renderAuthorChangesJson } from './json.mjs'
 import {
   analyzeOvertime,
   renderOvertimeCsv,
@@ -16,7 +22,7 @@ import {
   renderOvertimeText
 } from './overtime.mjs'
 import { startServer } from './server.mjs'
-import { renderText } from './text.mjs'
+import { renderChangedLinesText, renderText } from './text.mjs'
 import { checkUpdateWithPatch } from './utils/checkUpdate.mjs'
 import {
   groupRecords,
@@ -194,6 +200,8 @@ const main = async () => {
     return
   }
 
+  const spinner = ora('Loading...').start()
+
   let records = await getGitLogs(opts)
 
   // compute output directory root if user provided one or wants parent
@@ -342,6 +350,13 @@ const main = async () => {
         const dataCommitsFile = outputFilePath('data/commits.mjs', outDir)
         const commitsModule = `export default ${JSON.stringify(records, null, 2)};\n`
         writeTextFile(dataCommitsFile, commitsModule)
+
+        const dataCommitsChangedFile = outputFilePath('data/author-changes.mjs', outDir)
+        const jsonText = renderAuthorChangesJson(records)
+
+        const commitsChangedModule = `export default ${JSON.stringify(jsonText, null, 2)};\n`
+        writeTextFile(dataCommitsChangedFile, commitsChangedModule)
+
         const dataStatsFile = outputFilePath('data/overtime-stats.mjs', outDir)
         const statsModule = `export default ${JSON.stringify(stats, null, 2)};\n`
         writeTextFile(dataStatsFile, statsModule)
@@ -770,7 +785,10 @@ const main = async () => {
     const file = opts.out || 'commits.json'
     const filepath = outputFilePath(file, outDir)
     writeJSON(filepath, groups || records)
+    const jsonText = renderAuthorChangesJson(records)
+    writeJSON(outputFilePath('author-changes.json', outDir), jsonText)
     console.log(chalk.green(`JSON 已导出: ${filepath}`))
+    spinner.succeed('Done')
     return
   }
 
@@ -779,8 +797,13 @@ const main = async () => {
     const filepath = outputFilePath(file, outDir)
     const text = renderText(records, groups, { showGerrit: !!opts.gerrit })
     writeTextFile(filepath, text)
+    writeTextFile(
+      outputFilePath('author-changes.text', outDir),
+      renderChangedLinesText(records)
+    )
     console.log(text)
     console.log(chalk.green(`文本已导出: ${filepath}`))
+    spinner.succeed('Done')
     return
   }
 
@@ -794,11 +817,17 @@ const main = async () => {
       stats: opts.stats,
       gerrit: opts.gerrit
     })
+    await exportExcelAuthorChangeStats(
+      records,
+      outputFilePath('author_stats.xlsx', outDir)
+    )
     const text = renderText(records, groups)
     writeTextFile(txtPath, text)
     console.log(chalk.green(`Excel 已导出: ${excelPath}`))
     console.log(chalk.green(`文本已自动导出: ${txtPath}`))
+    spinner.succeed('Done')
   }
+
   await autoCheckUpdate()
 }
 

package/src/excel.mjs

@@ -1,97 +1,167 @@
-import ExcelJS from 'exceljs';
-import dayjs from 'dayjs';
+import dayjs from 'dayjs'
+import ExcelJS from 'exceljs'
+import { buildAuthorChangeStats } from './stats.mjs'
+
 
 export async function exportExcel(records, groups, options = {}) {
-  const { file, stats, gerrit } = options;
+  const { file, stats, gerrit } = options
 
-  const wb = new ExcelJS.Workbook();
-  const ws = wb.addWorksheet('Commits');
+  const wb = new ExcelJS.Workbook()
+  const ws = wb.addWorksheet('Commits')
 
   const cols = [
     { header: 'Hash', key: 'hash', width: 12 },
     { header: 'Author', key: 'author', width: 20 },
     { header: 'Email', key: 'email', width: 30 },
     { header: 'Date', key: 'date', width: 20 },
-    { header: 'Message', key: 'message', width: 80 }
-  ];
+    { header: 'Message', key: 'message', width: 80 },
+    { header: 'Changed', key: 'changed', width: 12 } // ★ 新增 changed 列
+  ]
 
   if (gerrit) {
-    cols.push({ header: 'Gerrit', key: 'gerrit', width: 50 });
+    cols.push({ header: 'Gerrit', key: 'gerrit', width: 50 })
   }
 
-  ws.columns = cols;
+  ws.columns = cols
 
-  (groups ? Object.values(groups).flat() : records).forEach(r =>
+  ;(groups ? Object.values(groups).flat() : records).forEach((r) =>
     ws.addRow(r)
-  );
+  )
 
-  ws.autoFilter = { from: { row: 1, column: 1 }, to: { row: 1, column: cols.length } };
+  ws.autoFilter = {
+    from: { row: 1, column: 1 },
+    to: { row: 1, column: cols.length }
+  }
 
   // --- stats sheet ---
   if (stats) {
-    const statWs = wb.addWorksheet('Stats');
+    const statWs = wb.addWorksheet('Stats')
 
-    const map = {};
+    const map = {}
 
-    records.forEach(r => {
-      const d = dayjs(r.date).format('YYYY-MM-DD');
-      map[d] = (map[d] || 0) + 1;
-    });
+    records.forEach((r) => {
+      const d = dayjs(r.date).format('YYYY-MM-DD')
+      map[d] = (map[d] || 0) + 1
+    })
 
     statWs.columns = [
       { header: 'Date', key: 'date', width: 15 },
       { header: 'Commits', key: 'count', width: 15 }
-    ];
+    ]
 
     Object.entries(map).forEach(([d, cnt]) =>
       statWs.addRow({ date: d, count: cnt })
-    );
+    )
   }
 
-  await wb.xlsx.writeFile(file);
+  await wb.xlsx.writeFile(file)
 }
 
 export async function exportExcelPerPeriodSheets(groups, file, options = {}) {
-  // groups: { periodKey: [records] }
-  const { stats, gerrit } = options;
+  const { stats, gerrit } = options
 
-  const wb = new ExcelJS.Workbook();
+  const wb = new ExcelJS.Workbook()
 
   const cols = [
     { header: 'Hash', key: 'hash', width: 12 },
     { header: 'Author', key: 'author', width: 20 },
     { header: 'Email', key: 'email', width: 30 },
     { header: 'Date', key: 'date', width: 20 },
-    { header: 'Message', key: 'message', width: 80 }
-  ];
-  if (gerrit) cols.push({ header: 'Gerrit', key: 'gerrit', width: 50 });
+    { header: 'Message', key: 'message', width: 80 },
+    { header: 'Changed', key: 'changed', width: 12 } // ★ 新增 changed 列
+  ]
+
+  if (gerrit) cols.push({ header: 'Gerrit', key: 'gerrit', width: 50 })
+
+  const keys = Object.keys(groups).sort()
 
-  const keys = Object.keys(groups).sort();
   keys.forEach((k) => {
-    const ws = wb.addWorksheet(String(k).slice(0, 31)); // Excel sheet name limit 31
-    ws.columns = cols;
-    groups[k].forEach(r => ws.addRow(r));
-    ws.autoFilter = { from: { row: 1, column: 1 }, to: { row: 1, column: cols.length } };
-  });
-
-  // summary sheet with counts per period
-  const summary = wb.addWorksheet('Summary');
+    const ws = wb.addWorksheet(String(k).slice(0, 31))
+    ws.columns = cols
+    groups[k].forEach((r) => ws.addRow(r))
+
+    ws.autoFilter = {
+      from: { row: 1, column: 1 },
+      to: { row: 1, column: cols.length }
+    }
+  })
+
+  // summary sheet
+  const summary = wb.addWorksheet('Summary')
   summary.columns = [
     { header: 'Period', key: 'period', width: 20 },
     { header: 'Commits', key: 'count', width: 12 }
-  ];
-  keys.forEach(k => summary.addRow({ period: k, count: groups[k].length }));
+  ]
+  keys.forEach((k) => summary.addRow({ period: k, count: groups[k].length }))
 
-  await wb.xlsx.writeFile(file);
+  await wb.xlsx.writeFile(file)
 }
 
-export async function exportExcelPerPeriodFiles(groups, dir, filePrefix, options = {}) {
-  // groups: { periodKey: [records] }
-  // dir: output directory path, filePrefix: base name without extension
-  // For each key, call exportExcel with that key's records
-  const keys = Object.keys(groups).sort();
+export async function exportExcelPerPeriodFiles(
+  groups,
+  dir,
+  filePrefix,
+  options = {}
+) {
+  const keys = Object.keys(groups).sort()
   for (const k of keys) {
-    const perFile = `${dir}/overtime_${filePrefix}_${k}.xlsx`;
-    await exportExcel(groups[k], null, { file: perFile, stats: options.stats, gerrit: options.gerrit });
+    const perFile = `${dir}/overtime_${filePrefix}_${k}.xlsx`
+    await exportExcel(groups[k], null, {
+      file: perFile,
+      stats: options.stats,
+      gerrit: options.gerrit
+    })
   }
 }
+
+/**
+ * 导出作者的日/周/月 changed 统计
+ * @param {*} records 原始 commits（包含 author/date/changed）
+ * @param {*} file 输出文件
+ */
+export async function exportExcelAuthorChangeStats(records, file) {
+  const stats = buildAuthorChangeStats(records)
+
+  const wb = new ExcelJS.Workbook()
+
+  //-------------------------------------------
+  // 工具方法：创建一个统计 sheet
+  //-------------------------------------------
+  function addStatSheet(title, dataMap) {
+    const ws = wb.addWorksheet(title)
+
+    ws.columns = [
+      { header: 'Author', key: 'author', width: 20 },
+      { header: 'Period', key: 'period', width: 20 },
+      { header: 'Changed', key: 'changed', width: 12 }
+    ]
+
+    for (const [author, periodMap] of Object.entries(dataMap)) {
+      const periods = Object.keys(periodMap).sort()
+      for (const p of periods) {
+        ws.addRow({
+          author,
+          period: p,
+          changed: periodMap[p]
+        })
+      }
+    }
+
+    ws.autoFilter = {
+      from: { row: 1, column: 1 },
+      to: { row: 1, column: 3 }
+    }
+  }
+
+  //-------------------------------------------
+  // 创建 3 个 Sheet
+  //-------------------------------------------
+  addStatSheet('Author Daily', stats.daily)
+  addStatSheet('Author Weekly', stats.weekly)
+  addStatSheet('Author Monthly', stats.monthly)
+
+  //-------------------------------------------
+  // 保存文件
+  //-------------------------------------------
+  await wb.xlsx.writeFile(file)
+}

package/src/git.mjs

@@ -1,12 +1,9 @@
 import { $ } from 'zx'
 
-
 export async function getGitLogs(opts) {
   const { author, email, since, until, limit, merges } = opts
 
-  // include subject and full body so we can extract Change-Id from commit message
   const pretty = '%H%x1f%an%x1f%ae%x1f%ad%x1f%s%x1f%B%x1e'
-
   const args = ['log', `--pretty=format:${pretty}`, '--date=iso']
 
   if (author) args.push(`--author=${author}`)
@@ -16,15 +13,13 @@ export async function getGitLogs(opts) {
   if (merges === false) args.push(`--no-merges`)
   if (limit) args.push(`-n`, `${limit}`)
 
-  // 使用 spread 形式传参，ZX 才会正确处理
   const { stdout } = await $`git ${args}`.quiet()
 
-  return stdout
+  const commits = stdout
     .split('\x1e')
     .filter(Boolean)
     .map((r) => {
       const f = r.split('\x1f').map((s) => (s || '').trim())
-
       const hash = f[0]
       const authorName = f[1]
       const emailAddr = f[2]
@@ -32,7 +27,6 @@ export async function getGitLogs(opts) {
       const subject = f[4]
       const body = f[5] || ''
 
-      // extract Change-Id from commit body (line like "Change-Id: Iabc123...")
       const [, changeId] = body.match(/Change-Id:\s*(I[0-9a-fA-F]+)/) || []
 
       return {
@@ -45,4 +39,36 @@ export async function getGitLogs(opts) {
         changeId
       }
     })
+
+  // === 新增：为每个 commit 计算代码增量 ===
+  for (const c of commits) {
+    try {
+      const { stdout: diffOut } = await $`git show --numstat --format= ${c.hash}`.quiet()
+      // numstat 格式:  "12 5 path/file.js"
+      const lines = diffOut
+        .split('\n')
+        .map((l) => l.trim())
+        .filter((l) => l && /^\d+\s+\d+/.test(l))
+
+      let added = 0
+      let deleted = 0
+
+      for (const line of lines) {
+        const [a, d] = line.split(/\s+/)
+        added += parseInt(a, 10) || 0
+        deleted += parseInt(d, 10) || 0
+      }
+
+      c.added = added
+      c.deleted = deleted
+      c.changed = added + deleted
+    } catch (err) {
+      // 避免阻塞，异常时改动量设置为0
+      c.added = 0
+      c.deleted = 0
+      c.changed = 0
+    }
+  }
+
+  return commits
 }

package/src/json.mjs

@@ -0,0 +1,5 @@
+import { buildAuthorChangeStats } from './stats.mjs'
+
+export function renderAuthorChangesJson(records) {
+  return buildAuthorChangeStats(records)
+}

package/src/stats-text.mjs

@@ -0,0 +1,51 @@
+export function renderAuthorChangeStatsText(stats, opts = {}) {
+  const {
+    section = 'all', // 'daily' | 'weekly' | 'monthly' | 'all'
+  } = opts;
+
+  const pad = (s, n) =>
+    s.length >= n ? `${s.slice(0, n - 1)}…` : s + ' '.repeat(n - s.length);
+
+  const buildSection = (title, obj, unitLabel) => {
+    if (!obj || !Object.keys(obj).length) return '';
+
+    const lines = [];
+
+    const header =
+      `${pad('Author', 18)} | ${pad(unitLabel, 12)} | ${pad('Changed', 10)}`;
+    const line = '-'.repeat(header.length);
+
+    lines.push(`\n=== ${title} ===`);
+    lines.push(header);
+    lines.push(line);
+
+    for (const [author, periodMap] of Object.entries(obj)) {
+      const keys = Object.keys(periodMap).sort();
+      for (const key of keys) {
+        lines.push(
+          [
+            pad(author, 18),
+            pad(key, 12),
+            pad(String(periodMap[key]), 10),
+          ].join(' | ')
+        );
+      }
+    }
+
+    return lines.join('\n');
+  };
+
+  let output = '';
+
+  if (section === 'all' || section === 'daily') {
+    output += buildSection('Daily Changed', stats.daily, 'Date');
+  }
+  if (section === 'all' || section === 'weekly') {
+    output += buildSection('Weekly Changed', stats.weekly, 'Week');
+  }
+  if (section === 'all' || section === 'monthly') {
+    output += buildSection('Monthly Changed', stats.monthly, 'Month');
+  }
+
+  return `${output.trim()  }\n`;
+}

package/src/stats.mjs

@@ -0,0 +1,44 @@
+import dayjs from 'dayjs'
+import isoWeek from 'dayjs/plugin/isoWeek.js'
+
+dayjs.extend(isoWeek)
+
+/**
+ * 自动统计每个作者的日/周/月 changed
+ *
+ * records: [{
+ *   author: 'Tom',
+ *   date: '2025-01-01T12:00:00Z',
+ *   changed: 123
+ * }]
+ */
+export function buildAuthorChangeStats(records) {
+  const result = {
+    daily: {}, // { author: { 'YYYY-MM-DD': x } }
+    weekly: {}, // { author: { 'YYYY-WW': x } }
+    monthly: {} // { author: { 'YYYY-MM': x } }
+  }
+
+  for (const r of records) {
+    const author = r.author || 'Unknown'
+    const changed = Number(r.changed || 0)
+
+    const d = dayjs(r.date)
+
+    const dayKey = d.format('YYYY-MM-DD')
+    const weekKey = `${d.format('GGGG')}-W${d.isoWeek().toString().padStart(2, '0')}`
+    const monthKey = d.format('YYYY-MM')
+
+    if (!result.daily[author]) result.daily[author] = {}
+    if (!result.weekly[author]) result.weekly[author] = {}
+    if (!result.monthly[author]) result.monthly[author] = {}
+
+    result.daily[author][dayKey] = (result.daily[author][dayKey] || 0) + changed
+    result.weekly[author][weekKey] =
+      (result.weekly[author][weekKey] || 0) + changed
+    result.monthly[author][monthKey] =
+      (result.monthly[author][monthKey] || 0) + changed
+  }
+
+  return result
+}

package/src/text.mjs

@@ -1,56 +1,51 @@
+import { renderAuthorChangeStatsText } from './stats-text.mjs'
+import { buildAuthorChangeStats } from './stats.mjs'
+
 export function renderText(records, groups = null, opts = {}) {
-  const { showGerrit = false } = opts;
+  const { showGerrit = false } = opts
   const pad = (s, n) =>
-    s.length >= n ? `${s.slice(0, n - 1)  }…` : s + ' '.repeat(n - s.length);
+    s.length >= n ? `${s.slice(0, n - 1)}…` : s + ' '.repeat(n - s.length)
+
+  const baseHeader = `${pad('Hash', 10)} | ${pad('Author', 18)} | ${pad(
+    'Date',
+    20
+  )} | ${pad('Message', 40)} | ${pad('Changed', 8)}` // ★ 新增 changed 列
 
-  const baseHeader =
-    `${pad('Hash', 10) 
-    } | ${ 
-    pad('Author', 18) 
-    } | ${ 
-    pad('Date', 20) 
-    } | ${ 
-    pad('Message', 60)}`;
+  const gerritHeader = showGerrit ? ` | ${pad('Gerrit', 50)}` : ''
+  const header = baseHeader + gerritHeader
 
-  const gerritHeader = showGerrit ? ` | ${  pad('Gerrit', 50)}` : '';
-  const header = baseHeader + gerritHeader;
+  const line = '-'.repeat(header.length)
 
-  const line = '-'.repeat(header.length);
+  const rows = []
 
-  const rows = [];
+  const buildRow = (r) => {
+    return (
+      [
+        pad(r.hash.slice(0, 8), 10),
+        pad(r.author, 18),
+        pad(r.date.replace(/ .+/, ''), 20),
+        pad(r.message, 40),
+        pad(String(r.changed ?? 0), 8) // ★ 输出 changed 数量
+      ].join(' | ') + (showGerrit ? ` | ${pad(r.gerrit || '', 50)}` : '')
+    )
+  }
 
   if (groups) {
     for (const [g, list] of Object.entries(groups)) {
-      rows.push(`\n=== ${g} ===\n`);
-      list.forEach(r => {
-        rows.push(
-          (
-            [
-              pad(r.hash.slice(0, 8), 10),
-              pad(r.author, 18),
-              pad(r.date.replace(/ .+/, ''), 20),
-              pad(r.message, 60)
-            ].join(' | ') +
-            (showGerrit ? ` | ${  pad(r.gerrit || '', 50)}` : '')
-          )
-        );
-      });
+      rows.push(`\n=== ${g} ===\n`)
+      list.forEach((r) => rows.push(buildRow(r)))
     }
   } else {
-    records.forEach(r => {
-      rows.push(
-        (
-          [
-            pad(r.hash.slice(0, 8), 10),
-            pad(r.author, 18),
-            pad(r.date.replace(/ .+/, ''), 20),
-            pad(r.message, 60)
-          ].join(' | ') +
-          (showGerrit ? ` | ${  pad(r.gerrit || '', 50)}` : '')
-        )
-      );
-    });
+    records.forEach((r) => rows.push(buildRow(r)))
   }
 
-  return [header, line, ...rows].join('\n');
+  return [header, line, ...rows].join('\n')
+}
+
+export function renderChangedLinesText(records, opts = {}) {
+  const stats = buildAuthorChangeStats(records)
+
+  const result = renderAuthorChangeStatsText(stats, opts)
+
+  return result
 }

package/web/app.js

@@ -9,14 +9,16 @@ async function loadData() {
       weeklyModule,
       monthlyModule,
       latestByDayModule,
-      configModule
+      configModule,
+      authorChangesModule
     ] = await Promise.all([
       import('/data/commits.mjs'),
       import('/data/overtime-stats.mjs'),
       import('/data/overtime-weekly.mjs'),
       import('/data/overtime-monthly.mjs').catch(() => ({ default: [] })),
       import('/data/overtime-latest-by-day.mjs').catch(() => ({ default: [] })),
-      import('/data/config.mjs').catch(() => ({ default: {} }))
+      import('/data/config.mjs').catch(() => ({ default: {} })),
+      import('/data/author-changes.mjs').catch(() => ({ default: {} }))
     ])
     const commits = commitsModule.default || []
     const stats = statsModule.default || {}
@@ -24,7 +26,8 @@ async function loadData() {
     const monthly = monthlyModule.default || []
     const latestByDay = latestByDayModule.default || []
     const config = configModule.default || {}
-    return { commits, stats, weekly, monthly, latestByDay, config }
+    const authorChanges = authorChangesModule.default || {}
+    return { commits, stats, weekly, monthly, latestByDay, config, authorChanges }
   } catch (err) {
     console.error('Load data failed', err)
     return { commits: [], stats: {}, weekly: [], monthly: [], latestByDay: [] }
@@ -184,14 +187,24 @@ function drawHourlyOvertime(stats, onHourClick) {
           data: [
             {
               name: '上班开始',
+              nameValue: String(stats.startHour).padStart(2, '0'),
               xAxis: String(stats.startHour).padStart(2, '0')
             },
-            { name: '下班时间', xAxis: String(stats.endHour).padStart(2, '0') },
+            {
+              name: '下班时间',
+              nameValue: String(stats.endHour).padStart(2, '0'),
+              xAxis: String(stats.endHour).padStart(2, '0')
+            },
             {
               name: '午休开始',
+              nameValue: String(stats.lunchStart).padStart(2, '0'),
               xAxis: String(stats.lunchStart).padStart(2, '0')
             },
-            { name: '午休结束', xAxis: String(stats.lunchEnd).padStart(2, '0') }
+            {
+              name: '午休结束',
+              nameValue: String(stats.lunchEnd).padStart(2, '0'),
+              xAxis: String(stats.lunchEnd).padStart(2, '0')
+            }
           ]
         }
       }
@@ -201,7 +214,14 @@ function drawHourlyOvertime(stats, onHourClick) {
   // 点击事件（点击某小时 → 打开侧栏）
   if (typeof onHourClick === 'function') {
     chart.on('click', (p) => {
-      const hour = Number(p.name)
+      let hour = Number(p.name)
+      if(p.componentType === 'markLine') {
+        hour = Number(p.data.xAxis)
+      }
+      // FIXME: remove debug log before production
+      console.log('❌', 'hour', hour, p)
+      document.getElementById('dayDetailSidebar').classList.remove('show')
+      if (Object.is(hour, NaN)) return
       onHourClick(hour, commits[hour])
     })
   }
@@ -214,6 +234,7 @@ function showSideBarForHour(hour, commitsOrCount) {
   // 支持传入 number（仅次数）或 array（详细 commit 列表）
   // 统一复用通用详情侧栏 DOM
   const sidebar = document.getElementById('dayDetailSidebar')
+  const backdrop = document.getElementById('sidebarBackdrop')
   const titleEl = document.getElementById('sidebarTitle')
   const contentEl = document.getElementById('sidebarContent')
 
@@ -235,19 +256,22 @@ function showSideBarForHour(hour, commitsOrCount) {
   } else if (Array.isArray(commitsOrCount)) {
     // commits 列表：展示作者/时间/消息（最多前 50 条，避免性能问题）
     const commits = commitsOrCount.slice(0, 50)
-    contentEl.innerHTML = commits
+    contentEl.innerHTML = `<div class="sidebar-list">${commits
       .map((c) => {
         const author = c.author ?? c.name ?? 'unknown'
         const time = c.date ?? c.time ?? ''
         const msg = (c.message ?? c.msg ?? c.body ?? '').replace(/\n/g, ' ')
         return `
-        <div class="hour-commit">
-          <div class="meta">👤 <b>${escapeHtml(author)}</b> · 🕒 ${escapeHtml(time)}</div>
-          <div class="msg">${escapeHtml(msg)}</div>
-        </div>
-      `
+          <div class="sidebar-item">
+            <div class="sidebar-item-header">
+              <span class="author">👤 ${escapeHtml(author)}</span>
+              <span class="time">🕒 ${escapeHtml(time)}</span>
+            </div>
+            <div class="sidebar-item-message">${escapeHtml(msg)}</div>
+          </div>
+        `
       })
-      .join('')
+      .join('')}</div>`
 
     if (commitsOrCount.length > 50) {
       const more = commitsOrCount.length - 50
@@ -257,8 +281,9 @@ function showSideBarForHour(hour, commitsOrCount) {
     contentEl.innerHTML = `<div style="font-size:14px;">无可展示数据</div>`
   }
 
-  // 打开侧栏
+  // 打开侧栏 + 遮罩
   sidebar.classList.add('show')
+  if (backdrop) backdrop.classList.add('show')
 }
 
 // 简单的 HTML 转义，防止 XSS 与布局断裂
@@ -410,6 +435,7 @@ function drawDailyTrend(commits, onDayClick) {
 function showSideBarForWeek(period, weeklyItem, commits = []) {
   // 统一复用通用详情侧栏 DOM
   const sidebar = document.getElementById('dayDetailSidebar')
+  const backdrop = document.getElementById('sidebarBackdrop')
   const titleEl = document.getElementById('sidebarTitle')
   const contentEl = document.getElementById('sidebarContent')
 
@@ -426,22 +452,27 @@ function showSideBarForWeek(period, weeklyItem, commits = []) {
   if (!commits.length) {
     html += `<div style="padding:10px;color:#777;">该周无提交记录</div>`
   } else {
-    html += commits
+    html += `<div class="sidebar-list">${commits
       .map((c) => {
+        const author = escapeHtml(c.author || 'unknown')
+        const time = escapeHtml(c.date || '')
+        const msg = escapeHtml((c.message || '').replace(/\n/g, ' '))
         return `
-          <div class="week-commit">
-            <div class="meta">👤 <b>${escapeHtml(c.author || 'unknown')}</b> · 🕒 ${
-              c.date
-            }</div>
-            <div class="msg">${escapeHtml((c.message || '').replace(/\n/g, ' '))}</div>
+          <div class="sidebar-item">
+            <div class="sidebar-item-header">
+              <span class="author">👤 ${author}</span>
+              <span class="time">🕒 ${time}</span>
+            </div>
+            <div class="sidebar-item-message">${msg}</div>
           </div>
         `
       })
-      .join('')
+      .join('')}</div>`
   }
 
   contentEl.innerHTML = html
   sidebar.classList.add('show')
+  if (backdrop) backdrop.classList.add('show')
 }
 
 function drawWeeklyTrend(weekly, commits, onWeekClick) {
@@ -543,7 +574,6 @@ function drawWeeklyTrend(weekly, commits, onWeekClick) {
     const idx = p.dataIndex
     const w = weekly[idx]
 
-
     const start = new Date(w.range.start)
     const end = new Date(w.range.end)
     end.setHours(23, 59, 59, 999) // 包含当天
@@ -828,9 +858,7 @@ function drawDailySeverity(latestByDay, commits, onDayClick) {
 
   // 若某天 latestHourNormalized 为空，表示「没有下班后到次日上班前的提交」，
   // 这里按 0 小时加班处理，保证折线连续。
-  const sev = raw.map((v) =>
-    v == null ? 0 : Math.max(0, Number(v) - endH)
-  )
+  const sev = raw.map((v) => (v == null ? 0 : Math.max(0, Number(v) - endH)))
 
   const el = document.getElementById('dailySeverityChart')
   // eslint-disable-next-line no-undef
@@ -1101,6 +1129,7 @@ function drawDailyTrendSeverity(commits, weekly, onDayClick) {
 
 function showDayDetailSidebar(date, count, commits) {
   const sidebar = document.getElementById('dayDetailSidebar')
+  const backdrop = document.getElementById('sidebarBackdrop')
   const title = document.getElementById('sidebarTitle')
   const content = document.getElementById('sidebarContent')
 
@@ -1110,17 +1139,19 @@ function showDayDetailSidebar(date, count, commits) {
   content.innerHTML = commits
     .map(
       (c) => `
-    <div style="margin-bottom:12px;">
-      <div>👤 <b>${c.author}</b></div>
-      <div>🕒 ${c.time || c.date}</div>
-      <div>💬 ${c.msg ||c.message}</div>
+    <div class="sidebar-item">
+      <div class="sidebar-item-header">
+        <span class="author">👤 ${escapeHtml(c.author || 'unknown')}</span>
+        <span class="time">🕒 ${escapeHtml(c.time || c.date || '')}</span>
+      </div>
+      <div class="sidebar-item-message">${escapeHtml(c.msg || c.message || '')}</div>
     </div>
-    <hr/>
   `
     )
     .join('')
 
   sidebar.classList.add('show')
+  if (backdrop) backdrop.classList.add('show')
 }
 
 function renderKpi(stats) {
@@ -1132,13 +1163,13 @@ function renderKpi(stats) {
   // 使用 cutoff + 上下班时间，重新在全部 commits 中计算「加班最晚一次提交」
   const cutoff = window.__overnightCutoff ?? 6
   const startHour =
-    (typeof stats.startHour === 'number' && stats.startHour >= 0
+    typeof stats.startHour === 'number' && stats.startHour >= 0
       ? stats.startHour
-      : 9)
+      : 9
   const endHour =
-    (typeof stats.endHour === 'number' && stats.endHour >= 0
+    typeof stats.endHour === 'number' && stats.endHour >= 0
       ? stats.endHour
-      : window.__overtimeEndHour ?? 18)
+      : (window.__overtimeEndHour ?? 18)
 
   let latestOut = null
   let latestOutHour = null
@@ -1198,50 +1229,6 @@ function groupCommitsByHour(commits) {
   return byHour
 }
 
-async function main() {
-  const { commits, stats, weekly, monthly, latestByDay, config } =
-    await loadData()
-  commitsAll = commits
-  filtered = commitsAll.slice()
-  window.__overtimeEndHour =
-    stats && typeof stats.endHour === 'number'
-      ? stats.endHour
-      : (config.endHour ?? 18)
-  window.__overnightCutoff =
-    typeof config.overnightCutoff === 'number' ? config.overnightCutoff : 6
-  initTableControls()
-  updatePager()
-  renderCommitsTablePage()
-
-  drawHourlyOvertime(stats, (hour, count) => {
-    // 使用举例
-    const hourCommitsDetail = groupCommitsByHour(commits)
-    // 将 commit 列表传给侧栏（若没有详情，则传空数组）
-    showSideBarForHour(hour, hourCommitsDetail[hour] || [])
-  })
-  drawOutsideVsInside(stats)
-
-  // 按日提交趋势：点击某天打开抽屉，显示当日所有 commits
-  drawDailyTrend(commits, showDayDetailSidebar)
-
-  // 周趋势：保持原有点击行为（显示该周详情）
-  drawWeeklyTrend(weekly, commits, showSideBarForWeek)
-
-  // 月趋势（加班占比）：点击某个月打开抽屉，显示该月所有 commits
-  drawMonthlyTrend(monthly, commits, showDayDetailSidebar)
-
-  // 每日最晚提交时间（小时）：点击某天打开抽屉，显示当日所有 commits
-  drawLatestHourDaily(latestByDay, commits, showDayDetailSidebar)
-
-  // 每日超过下班的小时数：点击某天打开抽屉，显示当日所有 commits
-  drawDailySeverity(latestByDay, commits, showDayDetailSidebar)
-
-  const daily = drawDailyTrendSeverity(commits, weekly, showDayDetailSidebar)
-
-  console.log('最累的一天：', daily.analysis.mostTiredDay)
-  computeAndRenderLatestOvertime(latestByDay)
-  renderKpi(stats)
-}
 
 // 基于 latestByDay + cutoff/endHour 统计「最晚加班的一天 / 一周 / 一月」
 function computeAndRenderLatestOvertime(latestByDay) {
@@ -1349,8 +1336,119 @@ function computeAndRenderLatestOvertime(latestByDay) {
   }
 }
 
-// 关闭按钮
+function buildDataset(stats, type) {
+  const dataMap = stats[type]; // { author: { period: changed } }
+
+  const authors = Object.keys(dataMap);
+  const allPeriods = Array.from(new Set(
+    authors.flatMap(a => Object.keys(dataMap[a]))
+  )).sort();
+
+  const series = authors.map(a => ({
+    name: a,
+    type: 'line',
+    smooth: true,
+    data: allPeriods.map(p => dataMap[a][p] || 0)
+  }));
+
+  return { authors, allPeriods, series };
+}
+
+const drawChangeTrends = (stats, type = 'daily') => {
+  const el = document.getElementById("chartAuthorChanges");
+  if (!el) return null;
+  // FIXME: remove debug log before production
+  console.log('❌', 'el', el);
+  const chart = echarts.init(el);
+
+  function render(type) {
+    const { authors, allPeriods, series } = buildDataset(stats, type);
+
+    chart.setOption({
+      tooltip: { trigger: 'axis' },
+      legend: { data: authors },
+      xAxis: { type: 'category', data: allPeriods },
+      yAxis: { type: 'value' },
+      series
+    });
+  }
+
+  // 初次渲染：日
+  render('daily');
+
+  // tabs 切换
+  document.querySelectorAll('#tabs button').forEach(btn => {
+    btn.onclick = () => {
+      document.querySelectorAll('#tabs button').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+
+      render(btn.dataset.type);
+    };
+  });
+
+  return chart;
+}
+
+async function main() {
+  const { commits, stats, weekly, monthly, latestByDay, config,authorChanges } =
+    await loadData()
+  commitsAll = commits
+  filtered = commitsAll.slice()
+  window.__overtimeEndHour =
+    stats && typeof stats.endHour === 'number'
+      ? stats.endHour
+      : (config.endHour ?? 18)
+  window.__overnightCutoff =
+    typeof config.overnightCutoff === 'number' ? config.overnightCutoff : 6
+  initTableControls()
+  updatePager()
+  renderCommitsTablePage()
+
+  drawHourlyOvertime(stats, (hour, count) => {
+    // 使用举例
+    const hourCommitsDetail = groupCommitsByHour(commits)
+    // 将 commit 列表传给侧栏（若没有详情，则传空数组）
+    showSideBarForHour(hour, hourCommitsDetail[hour] || [])
+  })
+  drawOutsideVsInside(stats)
+
+  // 按日提交趋势：点击某天打开抽屉，显示当日所有 commits
+  drawDailyTrend(commits, showDayDetailSidebar)
+
+  // 周趋势：保持原有点击行为（显示该周详情）
+  drawWeeklyTrend(weekly, commits, showSideBarForWeek)
+
+  // 月趋势（加班占比）：点击某个月打开抽屉，显示该月所有 commits
+  drawMonthlyTrend(monthly, commits, showDayDetailSidebar)
+
+  // 每日最晚提交时间（小时）：点击某天打开抽屉，显示当日所有 commits
+  drawLatestHourDaily(latestByDay, commits, showDayDetailSidebar)
+
+  // 每日超过下班的小时数：点击某天打开抽屉，显示当日所有 commits
+  drawDailySeverity(latestByDay, commits, showDayDetailSidebar)
+
+  const daily = drawDailyTrendSeverity(commits, weekly, showDayDetailSidebar)
+
+  console.log('最累的一天：', daily.analysis.mostTiredDay)
+
+  drawChangeTrends(authorChanges, 'daily');
+  computeAndRenderLatestOvertime(latestByDay)
+  renderKpi(stats)
+}
+
+
+// 抽屉关闭交互（按钮 + 点击遮罩）
 document.getElementById('sidebarClose').onclick = () => {
   document.getElementById('dayDetailSidebar').classList.remove('show')
+  const backdrop = document.getElementById('sidebarBackdrop')
+  if (backdrop) backdrop.classList.remove('show')
+}
+
+const sidebarBackdropEl = document.getElementById('sidebarBackdrop')
+if (sidebarBackdropEl) {
+  sidebarBackdropEl.addEventListener('click', () => {
+    document.getElementById('dayDetailSidebar').classList.remove('show')
+    sidebarBackdropEl.classList.remove('show')
+  })
 }
 main()

package/web/index.html

@@ -61,6 +61,17 @@
         <div id="latestOvertimeMonth"></div>
       </section>
 
+      <div class="chart-card">
+        <h2>开发者 Changed 工作量趋势</h2>
+
+        <div id="tabs">
+          <button data-type="daily" class="active">按日</button>
+          <button data-type="weekly">按周</button>
+          <button data-type="monthly">按月</button>
+        </div>
+        <div id="chartAuthorChanges" class="echart"></div>
+      </div>
+
       <section class="table-card">
         <h2>提交清单</h2>
         <div id="tableControls">
@@ -102,6 +113,8 @@
       >
     </footer>
     <!-- 通用：右侧滑出的详情侧栏（小时 / 天 / 周 复用同一个 DOM） -->
+    <!-- 背景遮罩，点击可关闭侧栏 -->
+    <div id="sidebarBackdrop" class="sidebar-backdrop"></div>
     <div id="dayDetailSidebar" class="sidebar">
       <div class="sidebar-header">
         <span id="sidebarTitle"></span>

package/web/static/style.css

@@ -189,20 +189,40 @@ td {
   margin-bottom: 8px;
   color: #00a76f;
 }
+/* 抽屉 & 遮罩（参考 Material UI Drawer） -------------------- */
+.sidebar-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.38); /* 深色半透明遮罩 */
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.25s ease;
+  z-index: 1200;
+}
+
+.sidebar-backdrop.show {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .sidebar {
   position: fixed;
   top: 0;
-  right: -400px;
-  width: 400px;
+  right: -460px;
+  width: min(460px, 100%);
   height: 100%;
   background: #fff;
-  box-shadow: -2px 0 6px rgba(0, 0, 0, 0.15);
-  transition: right 0.35s ease;
-  z-index: 9999;
-  padding: 16px;
+  box-shadow:
+    0 10px 15px rgba(0, 0, 0, 0.1),
+    0 4px 6px rgba(0, 0, 0, 0.08);
+  transition: right 0.3s ease;
+  z-index: 1300;
+  padding: 20px 20px 16px;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
+  border-radius: 12px 0 0 12px;
+  border-left: 1px solid rgba(145, 158, 171, 0.24);
 }
 
 .sidebar.show {
@@ -213,35 +233,115 @@ td {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  font-size: 18px;
-  margin-bottom: 16px;
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 12px;
+  color: #111827;
+}
+
+.sidebar-header span {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
 }
 
 .sidebar-header button {
-  background: none;
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(148, 163, 184, 0.12);
   border: none;
-  font-size: 24px;
+  border-radius: 999px;
+  font-size: 18px;
   cursor: pointer;
+  color: #4b5563;
+  transition:
+    background 0.2s ease,
+    color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.sidebar-header button:hover {
+  background: rgba(148, 163, 184, 0.22);
+  color: #111827;
+  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
 }
 
 .sidebar-content {
   overflow-y: auto;
-  font-size: 14px;
+  font-size: 13px;
+  line-height: 1.6;
+  padding-right: 4px;
 }
-/* 小块提交记录样式 */
-.hour-commit {
-  padding: 10px 8px;
-  border-radius: 6px;
-  background: #fafafa;
-  margin-bottom: 10px;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
+
+.sidebar-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sidebar-content::-webkit-scrollbar-thumb {
+  background: rgba(148, 163, 184, 0.6);
+  border-radius: 999px;
 }
-.hour-commit .meta {
-  color: #666;
+
+.sidebar-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* 抽屉中的提交列表（参考 MUI List / ListItem） ------------- */
+.sidebar-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 4px 0;
+}
+
+.sidebar-item,
+.hour-commit,
+.week-commit {
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: #f9fafb;
+  border: 1px solid rgba(148, 163, 184, 0.25);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+  transition:
+    background 0.18s ease,
+    box-shadow 0.18s ease,
+    transform 0.1s ease;
+  margin: 8px 0;
+}
+
+.sidebar-item:hover,
+.hour-commit:hover,
+.week-commit:hover {
+  background: #f3f4ff;
+  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.12);
+  transform: translateY(-1px);
+}
+
+.sidebar-item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   font-size: 12px;
-  margin-bottom: 6px;
+  color: #64748b;
+  margin-bottom: 4px;
 }
-.hour-commit .msg {
+
+.sidebar-item-header .author {
+  font-weight: 600;
+  color: #111827;
+}
+
+.sidebar-item-header .time {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+}
+
+.sidebar-item-message {
+  font-size: 13px;
+  color: #111827;
   font-weight: 500;
   word-break: break-word;
 }