wukong-gitlog-cli 1.0.14 → 1.0.16

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 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.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)
+
+
+### Features
+
+* 🎸 dayDetailSidebar ([21b99fd](https://github.com/tomatobybike/wukong-gitlog-cli/commit/21b99fd859af45641987dfd5f50a8c5604a380c5))
+* 🎸 each day ([ffa3d5e](https://github.com/tomatobybike/wukong-gitlog-cli/commit/ffa3d5e6192a69a727c747ffa325b56ae5bf78d4))
+* 🎸 hourlyOvertimeChart ([93f62b7](https://github.com/tomatobybike/wukong-gitlog-cli/commit/93f62b7b9906154a16bdcf38bd7b0979d44bebfe))
+* 🎸 latestOvertimeDay ([40cb157](https://github.com/tomatobybike/wukong-gitlog-cli/commit/40cb15788411441306e0c838108817fa36268624))
+* 🎸 next day cutof ([efe6a5f](https://github.com/tomatobybike/wukong-gitlog-cli/commit/efe6a5f41e54ca0fdadb3c0071f1fcf7a286e6c2))
+* 🎸 onDayClick ([9132b54](https://github.com/tomatobybike/wukong-gitlog-cli/commit/9132b5423449ceb8a964d813dfd4931834993913))
+* 🎸 renderKpi ([e26cc0d](https://github.com/tomatobybike/wukong-gitlog-cli/commit/e26cc0deac83a7e9bccaae81ba572da0e39e82b3))
+* 🎸 week range ([cd565da](https://github.com/tomatobybike/wukong-gitlog-cli/commit/cd565dac98b6c38442eeacdd6dd423b93d657ab0))
+
 ### [1.0.14](https://github.com/tomatobybike/wukong-gitlog-cli/compare/v1.0.13...v1.0.14) (2025-12-02)
 
 

package/README.md

@@ -53,6 +53,10 @@ wukong-gitlog-cli --help
 
 ## Usage
 
+```bash
+wukong-gitlog-cli --overtime  --serve --port 5555
+```
+
 ```bash
 wukong-gitlog-cli [options]
 ```

package/README.zh-CN.md

@@ -55,6 +55,10 @@ wukong-gitlog-cli --help
 
 ## 🚀 使用方法
 
+```bash
+wukong-gitlog-cli --overtime  --serve --port 5555
+```
+
 ```bash
 wukong-gitlog-cli [options]
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wukong-gitlog-cli",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "description": "Advanced Git commit log exporter with Excel/JSON/TXT output, grouping, stats and CLI.",
   "keywords": [
     "git",

package/src/cli.mjs

@@ -1,6 +1,7 @@
 import chalk from 'chalk'
 import { Command } from 'commander'
 import dayjs from 'dayjs'
+import isoWeek from 'dayjs/plugin/isoWeek.js'
 import fs from 'fs'
 import path from 'path'
 import { fileURLToPath } from 'url'
@@ -31,6 +32,8 @@ const pkg = JSON.parse(
   fs.readFileSync(path.resolve(__dirname, '../package.json'), 'utf8')
 )
 
+dayjs.extend(isoWeek)
+
 const PKG_NAME = pkg.name
 const VERSION = pkg.version
 
@@ -51,6 +54,21 @@ const version = async () => {
   process.exit(0)
 }
 
+/** 将 "2025-W48" → { start: '2025-11-24', end: '2025-11-30' } */
+export function getWeekRange(periodStr) {
+  // periodStr = "2025-W48"
+  const [year, w] = periodStr.split('-W')
+  const week = parseInt(w, 10)
+
+  const start = dayjs().year(year).isoWeek(week).startOf('week') // Monday
+  const end = dayjs().year(year).isoWeek(week).endOf('week') // Sunday
+
+  return {
+    start: start.format('YYYY-MM-DD'),
+    end: end.format('YYYY-MM-DD')
+  }
+}
+
 const main = async () => {
   const program = new Command()
 
@@ -343,6 +361,7 @@ const main = async () => {
           })
           return {
             period: k,
+            range: getWeekRange(k),
             total: s.total,
             outsideWorkCount: s.outsideWorkCount,
             outsideWorkRate: s.outsideWorkRate,
@@ -380,7 +399,10 @@ const main = async () => {
             nonWorkdayRate: s.nonWorkdayRate
           }
         })
-        const dataMonthlyFile = outputFilePath('data/overtime-monthly.mjs', outDir)
+        const dataMonthlyFile = outputFilePath(
+          'data/overtime-monthly.mjs',
+          outDir
+        )
         const monthlyModule = `export default ${JSON.stringify(monthlySeries, null, 2)};\n`
         writeTextFile(dataMonthlyFile, monthlyModule)
         console.log(chalk.green(`Monthly series 已导出: ${dataMonthlyFile}`))
@@ -388,29 +410,92 @@ const main = async () => {
         // 新增：每日最晚提交小时（用于显著展示加班严重程度）
         const dayGroups2 = groupRecords(records, 'day')
         const dayKeys2 = Object.keys(dayGroups2).sort()
-        const overnightCutoff = Number.isFinite(opts.overnightCutoff) ? opts.overnightCutoff : 6
-        const latestByDay = dayKeys2.map((k) => {
-          const list = dayGroups2[k]
-          const vals = list
-            .map((r) => ({ r, _dt: new Date(r.date) }))
-            .filter((x) => x._dt && !Number.isNaN(x._dt.valueOf()))
-            .sort((a, b) => a._dt.valueOf() - b._dt.valueOf())
-          const last = vals.length > 0 ? vals[vals.length - 1] : null
-          const hour = last ? new Date(last.r.date).getHours() : null
+
+        // 次日凌晨归并窗口（默认 6 点前仍算前一天的加班）
+        const overnightCutoff = Number.isFinite(opts.overnightCutoff)
+          ? opts.overnightCutoff
+          : 6
+        // 次日上班时间（默认按 workStart，若未指定则 9 点）
+        const workStartHour =
+          opts.workStart || opts.workStart === 0 ? opts.workStart : 9
+        const workEndHour =
+          opts.workEnd || opts.workEnd === 0 ? opts.workEnd : 18
+
+        // 有些日期「本身没有 commit」，但第二天凌晨有提交要归并到这一天，
+        // 需要补出这些“虚拟日期”，否则 latestByDay 会漏掉这天。
+        const virtualPrevDays = new Set()
+        records.forEach((r) => {
+          const d = new Date(r.date)
+          if (Number.isNaN(d.valueOf())) return
+          const h = d.getHours()
+          if (h < 0 || h >= overnightCutoff || h >= workStartHour) return
+          const curDay = dayjs(d).format('YYYY-MM-DD')
+          const prevDay = dayjs(curDay).subtract(1, 'day').format('YYYY-MM-DD')
+          if (!dayGroups2[prevDay]) {
+            virtualPrevDays.add(prevDay)
+          }
+        })
+
+        const allDayKeys = Array.from(
+          new Set([...dayKeys2, ...virtualPrevDays])
+        ).sort()
+
+        const latestByDay = allDayKeys.map((k) => {
+          const list = dayGroups2[k] || []
+
+          // 1) 当天「下班后」的提交：只统计 >= workEndHour 的小时
+          const sameDayHours = list
+            .map((r) => new Date(r.date))
+            .filter((d) => !Number.isNaN(d.valueOf()))
+            .map((d) => d.getHours())
+            .filter((h) => h >= workEndHour && h < 24)
+
+          // 2) 次日凌晨、但仍算前一日加班的提交
           const nextKey = dayjs(k).add(1, 'day').format('YYYY-MM-DD')
           const early = dayGroups2[nextKey] || []
           const earlyHours = early
             .map((r) => new Date(r.date))
             .filter((d) => !Number.isNaN(d.valueOf()))
             .map((d) => d.getHours())
-            .filter((h) => h >= 0 && h < overnightCutoff)
-          const earlyMax = earlyHours.length > 0 ? Math.max(...earlyHours) : null
-          const normalized = typeof earlyMax === 'number' ? 24 + earlyMax : null
-          const latestHourNormalized = Math.max(
-            typeof hour === 'number' ? hour : -1,
-            typeof normalized === 'number' ? normalized : -1
-          )
-          return { date: k, latestHour: hour, latestHourNormalized: latestHourNormalized >= 0 ? latestHourNormalized : null }
+            // 只看 [0, overnightCutoff) 之间的小时，
+            // 并且默认认为 < workStartHour 属于「次日上班前」
+            .filter(
+              (h) =>
+                h >= 0 &&
+                h < overnightCutoff &&
+                // 保护性判断：若有人把 overnightCutoff 设得大于上班时间，
+                // 我们仍然只统计到上班时间为止
+                h < workStartHour
+            )
+
+          // 3) 计算「逻辑上的最晚加班时间」
+          //    - 当天晚上的用原始小时（如 22 点）
+          //    - 次日凌晨的用 24 + 小时（如 1 点 → 25）
+          const overtimeValues = [
+            ...sameDayHours.map((h) => h),
+            ...earlyHours.map((h) => 24 + h)
+          ]
+
+          if (overtimeValues.length === 0) {
+            // 这一天没有任何「下班后到次日上班前」的提交
+            return {
+              date: k,
+              latestHour: null,
+              latestHourNormalized: null
+            }
+          }
+
+          const latestHourNormalized = Math.max(...overtimeValues)
+
+          // latestHour 保留「当天自然日内」的最晚提交通常小时数，供前端需要时参考
+          const sameDayMax =
+            sameDayHours.length > 0 ? Math.max(...sameDayHours) : null
+
+          return {
+            date: k,
+            latestHour: sameDayMax,
+            latestHourNormalized
+          }
         })
         const dataLatestByDayFile = outputFilePath(
           'data/overtime-latest-by-day.mjs',
@@ -432,7 +517,10 @@ const main = async () => {
             lunchEnd: opts.lunchEnd || 14,
             overnightCutoff
           }
-          writeTextFile(configFile, `export default ${JSON.stringify(cfg, null, 2)};\n`)
+          writeTextFile(
+            configFile,
+            `export default ${JSON.stringify(cfg, null, 2)};\n`
+          )
           console.log(chalk.green(`Config 已导出: ${configFile}`))
         } catch (e) {
           console.warn('Export config failed:', e && e.message ? e.message : e)

package/web/app.js

@@ -129,7 +129,7 @@ function drawHourlyOvertime(stats, onHourClick) {
       trigger: 'axis',
       formatter(params) {
         const p = params[0]
-        const h = parseInt(p.axisValue,10)
+        const h = parseInt(p.axisValue, 10)
         const count = p.value
         const rate = (percent[h] * 100).toFixed(1)
         return `
@@ -184,14 +184,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 +211,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])
     })
   }
@@ -212,9 +229,11 @@ function drawHourlyOvertime(stats, onHourClick) {
 // showSideBarForHour 实现
 function showSideBarForHour(hour, commitsOrCount) {
   // 支持传入 number（仅次数）或 array（详细 commit 列表）
-  const sidebar = document.getElementById('hourDetailSidebar')
-  const titleEl = document.getElementById('hourSidebarTitle')
-  const contentEl = document.getElementById('hourSidebarContent')
+  // 统一复用通用详情侧栏 DOM
+  const sidebar = document.getElementById('dayDetailSidebar')
+  const backdrop = document.getElementById('sidebarBackdrop')
+  const titleEl = document.getElementById('sidebarTitle')
+  const contentEl = document.getElementById('sidebarContent')
 
   // 兼容未传入侧栏 DOM 的情况（优雅降级）
   if (!sidebar || !titleEl || !contentEl) {
@@ -234,19 +253,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
@@ -256,18 +278,11 @@ function showSideBarForHour(hour, commitsOrCount) {
     contentEl.innerHTML = `<div style="font-size:14px;">无可展示数据</div>`
   }
 
-  // 打开侧栏
+  // 打开侧栏 + 遮罩
   sidebar.classList.add('show')
+  if (backdrop) backdrop.classList.add('show')
 }
 
-// 关闭按钮绑定（只需运行一次）
-;(function bindHourSidebarClose() {
-  const btn = document.getElementById('hourSidebarClose')
-  const sidebar = document.getElementById('hourDetailSidebar')
-  if (!btn || !sidebar) return
-  btn.addEventListener('click', () => sidebar.classList.remove('show'))
-})()
-
 // 简单的 HTML 转义，防止 XSS 与布局断裂
 function escapeHtml(str = '') {
   return String(str)
@@ -301,7 +316,7 @@ function drawOutsideVsInside(stats) {
   return chart
 }
 
-function drawDailyTrend(commits) {
+function drawDailyTrend(commits, onDayClick) {
   if (!Array.isArray(commits) || commits.length === 0) return null
 
   // 聚合每日提交数量
@@ -398,10 +413,66 @@ function drawDailyTrend(commits) {
     ]
   })
 
+  // 点击某一天，打开抽屉显示当日 commits
+  if (typeof onDayClick === 'function') {
+    chart.on('click', (params) => {
+      const idx = params.dataIndex
+      const date = labels[idx]
+      const count = data[idx]
+      const dayCommits = commits.filter(
+        (c) => new Date(c.date).toISOString().slice(0, 10) === date
+      )
+      onDayClick(date, count, dayCommits)
+    })
+  }
+
   return chart
 }
 
-function drawWeeklyTrend(weekly) {
+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')
+
+  titleEl.innerHTML = `📅 周期：<b>${period}</b>`
+
+  let html = `
+    <div style="padding:6px 0;">
+      加班次数：<b>${weeklyItem.outsideWorkCount}</b><br/>
+      占比：<b>${(weeklyItem.outsideWorkRate * 100).toFixed(1)}%</b>
+    </div>
+    <hr/>
+  `
+
+  if (!commits.length) {
+    html += `<div style="padding:10px;color:#777;">该周无提交记录</div>`
+  } else {
+    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="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('')}</div>`
+  }
+
+  contentEl.innerHTML = html
+  sidebar.classList.add('show')
+  if (backdrop) backdrop.classList.add('show')
+}
+
+function drawWeeklyTrend(weekly, commits, onWeekClick) {
   if (!Array.isArray(weekly) || weekly.length === 0) return null
 
   const labels = weekly.map((w) => w.period)
@@ -409,13 +480,16 @@ function drawWeeklyTrend(weekly) {
   const dataCount = weekly.map((w) => w.outsideWorkCount)
 
   const el = document.getElementById('weeklyTrendChart')
-  // eslint-disable-next-line no-undef
   const chart = echarts.init(el)
 
   chart.setOption({
     tooltip: {
       trigger: 'axis',
       formatter: (params) => {
+        const pp = params[0]
+        const weekItem = weekly[pp.dataIndex]
+        const { start, end } = weekItem.range
+
         const rate = params.find((p) => p.seriesName.includes('%'))?.data
         const count = params.find((p) => p.seriesName.includes('次数'))?.data
 
@@ -425,22 +499,20 @@ function drawWeeklyTrend(weekly) {
         if (rate >= 20) level = '🔴 严重（≥20%）'
 
         return `
-        <div style="font-size:13px; line-height:1.5;">
-          <b>${params[0].axisValue}</b><br/>
-          加班占比：<b>${rate}%</b><br/>
-          加班次数：${count} 次<br/>
-          等级：${level}
-        </div>
-      `
+          <div style="font-size:13px; line-height:1.5;">
+            <b>${params[0].axisValue}</b><br/>
+            📅 周区间：<b>${start} ~ ${end}</b><br/>
+            加班占比：<b>${rate}%</b><br/>
+            加班次数：${count} 次<br/>
+            等级：${level}
+          </div>
+        `
       }
     },
 
-    legend: {
-      top: 10
-    },
+    legend: { top: 10 },
 
     xAxis: { type: 'category', data: labels },
-
     yAxis: [
       { type: 'value', min: 0, max: 100, name: '占比(%)' },
       { type: 'value', name: '次数', min: 0 }
@@ -451,26 +523,22 @@ function drawWeeklyTrend(weekly) {
         type: 'line',
         name: '加班占比(%)',
         data: dataRate,
-
-        // ⭐ 区间背景（与 monthly/daily 对齐）
         markArea: {
           data: [
             [
               { yAxis: 0 },
-              { yAxis: 10, itemStyle: { color: 'rgba(76, 175, 80, 0.15)' } } // 绿色
+              { yAxis: 10, itemStyle: { color: 'rgba(76, 175, 80, 0.15)' } }
             ],
             [
               { yAxis: 10 },
-              { yAxis: 20, itemStyle: { color: 'rgba(251, 140, 0, 0.15)' } } // 橙色
+              { yAxis: 20, itemStyle: { color: 'rgba(251, 140, 0, 0.15)' } }
             ],
             [
               { yAxis: 20 },
-              { yAxis: 100, itemStyle: { color: 'rgba(211, 47, 47, 0.15)' } } // 红色
+              { yAxis: 100, itemStyle: { color: 'rgba(211, 47, 47, 0.15)' } }
             ]
           ]
         },
-
-        // ⭐ 阈值线
         markLine: {
           symbol: ['none', 'arrow'],
           data: [
@@ -493,17 +561,35 @@ function drawWeeklyTrend(weekly) {
         name: '加班次数',
         data: dataCount,
         yAxisIndex: 1,
-
-        // 次数线使用默认蓝色，避免干扰等级颜色区间
         smooth: true
       }
     ]
   })
 
+  // ⭐ 点击事件：从 commits 过滤该周提交
+  chart.on('click', (p) => {
+    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) // 包含当天
+
+    const weeklyCommits = commits.filter((c) => {
+      const d = new Date(c.date)
+      return d >= start && d <= end
+    })
+
+    // 回调交给外面决定如何打开侧栏
+    if (typeof onWeekClick === 'function') {
+      onWeekClick(w.period, w, weeklyCommits)
+    }
+  })
+
   return chart
 }
 
-function drawMonthlyTrend(monthly) {
+function drawMonthlyTrend(monthly, commits, onMonthClick) {
   if (!Array.isArray(monthly) || monthly.length === 0) return null
 
   const labels = monthly.map((m) => m.period)
@@ -599,10 +685,27 @@ function drawMonthlyTrend(monthly) {
     ]
   })
 
+  // 点击某个月份，打开抽屉显示该月的所有 commits
+  if (typeof onMonthClick === 'function' && Array.isArray(commits)) {
+    chart.on('click', (params) => {
+      const idx = params.dataIndex
+      const ym = labels[idx] // 'YYYY-MM'
+      const monthCommits = commits.filter((c) => {
+        const d = new Date(c.date)
+        const m = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(
+          2,
+          '0'
+        )}`
+        return m === ym
+      })
+      onMonthClick(ym, monthCommits.length, monthCommits)
+    })
+  }
+
   return chart
 }
 
-function drawLatestHourDaily(latestByDay) {
+function drawLatestHourDaily(latestByDay, commits, onDayClick) {
   if (!Array.isArray(latestByDay) || latestByDay.length === 0) return null
 
   const labels = latestByDay.map((d) => d.date)
@@ -680,6 +783,8 @@ function drawLatestHourDaily(latestByDay) {
         type: 'line',
         name: '每日最晚提交小时',
         data,
+        // 让折线在 null 点之间连起来，避免视觉上“断裂”
+        connectNulls: true,
         markLine: {
           symbol: ['none', 'arrow'],
           data: [
@@ -715,10 +820,28 @@ function drawLatestHourDaily(latestByDay) {
     ]
   })
 
+  // 点击某一天的最晚提交时间点，打开抽屉显示该日 commits
+  if (typeof onDayClick === 'function' && Array.isArray(commits)) {
+    // 预聚合：按天收集 commits
+    const dayCommitsMap = {}
+    commits.forEach((c) => {
+      const d = new Date(c.date).toISOString().slice(0, 10)
+      if (!dayCommitsMap[d]) dayCommitsMap[d] = []
+      dayCommitsMap[d].push(c)
+    })
+
+    chart.on('click', (params) => {
+      const idx = params.dataIndex
+      const date = labels[idx]
+      const list = dayCommitsMap[date] || []
+      onDayClick(date, list.length, list)
+    })
+  }
+
   return chart
 }
 
-function drawDailySeverity(latestByDay) {
+function drawDailySeverity(latestByDay, commits, onDayClick) {
   if (!Array.isArray(latestByDay) || latestByDay.length === 0) return null
 
   const labels = latestByDay.map((d) => d.date)
@@ -730,7 +853,9 @@ function drawDailySeverity(latestByDay) {
       : (d.latestHour ?? null)
   )
 
-  const sev = raw.map((v) => (v == null ? null : Math.max(0, Number(v) - endH)))
+  // 若某天 latestHourNormalized 为空，表示「没有下班后到次日上班前的提交」，
+  // 这里按 0 小时加班处理，保证折线连续。
+  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
@@ -746,15 +871,6 @@ function drawDailySeverity(latestByDay) {
         const overtime = p.data
         const rawHour = raw[p.dataIndex] // 原始 latestHour 或 latestHourNormalized
 
-        if (overtime == null) {
-          return `
-        <div style="font-size:13px;">
-          <b>${date}</b><br/>
-          无数据
-        </div>
-      `
-        }
-
         return `
       <div style="font-size:13px;">
         <b>${date}</b><br/>
@@ -781,6 +897,8 @@ function drawDailySeverity(latestByDay) {
         type: 'line',
         name: '超过下班小时数',
         data: sev,
+        // 连续显示 0 小时加班的日期，避免折线断开
+        connectNulls: true,
 
         // ⭐ 加班区域背景
         markArea: {
@@ -828,6 +946,23 @@ function drawDailySeverity(latestByDay) {
     ]
   })
 
+  // 点击某一天的「超过下班小时数」点，打开抽屉显示该日 commits
+  if (typeof onDayClick === 'function' && Array.isArray(commits)) {
+    const dayCommitsMap = {}
+    commits.forEach((c) => {
+      const d = new Date(c.date).toISOString().slice(0, 10)
+      if (!dayCommitsMap[d]) dayCommitsMap[d] = []
+      dayCommitsMap[d].push(c)
+    })
+
+    chart.on('click', (params) => {
+      const idx = params.dataIndex
+      const date = labels[idx]
+      const list = dayCommitsMap[date] || []
+      onDayClick(date, list.length, list)
+    })
+  }
+
   return chart
 }
 
@@ -991,6 +1126,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')
 
@@ -1000,22 +1136,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}</div>
-      <div>💬 ${c.msg}</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')
-}
-
-// 关闭按钮
-document.getElementById('sidebarClose').onclick = () => {
-  document.getElementById('dayDetailSidebar').classList.remove('show')
+  if (backdrop) backdrop.classList.add('show')
 }
 
 function renderKpi(stats) {
@@ -1023,11 +1156,54 @@ function renderKpi(stats) {
   if (!el || !stats) return
   const latest = stats.latestCommit
   const latestHour = stats.latestCommitHour
-  const latestOut = stats.latestOutsideCommit
-  const latestOutHour =
-    stats.latestOutsideCommitHour ??
-    (latestOut ? new Date(latestOut.date).getHours() : null)
+
+  // 使用 cutoff + 上下班时间，重新在全部 commits 中计算「加班最晚一次提交」
   const cutoff = window.__overnightCutoff ?? 6
+  const startHour =
+    typeof stats.startHour === 'number' && stats.startHour >= 0
+      ? stats.startHour
+      : 9
+  const endHour =
+    typeof stats.endHour === 'number' && stats.endHour >= 0
+      ? stats.endHour
+      : (window.__overtimeEndHour ?? 18)
+
+  let latestOut = null
+  let latestOutHour = null
+  let maxSeverity = -1
+
+  if (Array.isArray(commitsAll) && commitsAll.length > 0) {
+    commitsAll.forEach((c) => {
+      const d = new Date(c.date)
+      if (!d || Number.isNaN(d.valueOf())) return
+      const h = d.getHours()
+
+      // 只看「当日下班后」以及「次日凌晨 cutoff 之前，且仍在上班前」的提交
+      let sev = null
+      if (h >= endHour && h < 24) {
+        // 当晚：直接按 h - endHour 计算
+        sev = h - endHour
+      } else if (h >= 0 && h < cutoff && h < startHour) {
+        // 次日凌晨：视作跨天，加上 24
+        sev = 24 - endHour + h
+      }
+
+      if (sev != null && sev >= 0 && sev > maxSeverity) {
+        maxSeverity = sev
+        latestOut = c
+        latestOutHour = h
+      }
+    })
+  }
+
+  // 若按 cutoff 没算出结果，则退回到原来的 stats.latestOutsideCommit
+  if (!latestOut && stats.latestOutsideCommit) {
+    latestOut = stats.latestOutsideCommit
+    latestOutHour =
+      stats.latestOutsideCommitHour ??
+      (latestOut ? new Date(latestOut.date).getHours() : null)
+  }
+
   const html = [
     `<div>最晚一次提交时间：${latest ? formatDate(latest.date) : '-'}${typeof latestHour === 'number' ? `（${String(latestHour).padStart(2, '0')}:00）` : ''} <div class="author">${latest.author}</div> <div> ${latest.message} <div></div>`,
     `<div class="hr"></div>`,
@@ -1050,7 +1226,7 @@ function groupCommitsByHour(commits) {
   return byHour
 }
 
-;(async function main() {
+async function main() {
   const { commits, stats, weekly, monthly, latestByDay, config } =
     await loadData()
   commitsAll = commits
@@ -1064,21 +1240,155 @@ function groupCommitsByHour(commits) {
   initTableControls()
   updatePager()
   renderCommitsTablePage()
-  // 使用举例
-  const hourCommitsDetail = groupCommitsByHour(commits)
 
   drawHourlyOvertime(stats, (hour, count) => {
+    // 使用举例
+    const hourCommitsDetail = groupCommitsByHour(commits)
     // 将 commit 列表传给侧栏（若没有详情，则传空数组）
     showSideBarForHour(hour, hourCommitsDetail[hour] || [])
   })
   drawOutsideVsInside(stats)
-  drawDailyTrend(commits)
-  drawWeeklyTrend(weekly)
-  drawMonthlyTrend(monthly)
-  drawLatestHourDaily(latestByDay)
-  drawDailySeverity(latestByDay)
+
+  // 按日提交趋势：点击某天打开抽屉，显示当日所有 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) {
+  if (!Array.isArray(latestByDay) || latestByDay.length === 0) return
+
+  const endH = window.__overtimeEndHour || 18
+
+  // 每天的 latestHourNormalized → 超出下班的小时数
+  const dailyOvertime = latestByDay
+    .map((d) => {
+      const v =
+        typeof d.latestHourNormalized === 'number'
+          ? d.latestHourNormalized
+          : typeof d.latestHour === 'number'
+            ? d.latestHour
+            : null
+      if (v == null) return null
+      const overtime = Math.max(0, Number(v) - endH)
+      return { date: d.date, overtime, raw: v }
+    })
+    .filter(Boolean)
+
+  if (!dailyOvertime.length) return
+
+  // 1) 最晚加班的一天（超出下班小时数最大，若相同取日期更晚）
+  const dailySorted = [...dailyOvertime].sort((a, b) => {
+    if (b.overtime !== a.overtime) return b.overtime - a.overtime
+    return new Date(b.date) - new Date(a.date)
+  })
+  const worstDay = dailySorted[0]
+  const dayEl = document.getElementById('latestOvertimeDay')
+  if (dayEl) {
+    dayEl.innerHTML = `⏰ 最晚加班的一天：<b>${worstDay.date}</b>（超过下班 <b>${worstDay.overtime.toFixed(
+      2
+    )}</b> 小时，逻辑时间约 ${worstDay.raw.toFixed(2)} 点）`
+  }
+
+  // 工具：根据日期字符串计算 ISO 周 key：YYYY-Www
+  const getIsoWeekKey = (dStr) => {
+    const d = new Date(dStr)
+    if (Number.isNaN(d.valueOf())) return null
+    const target = new Date(
+      Date.UTC(d.getFullYear(), d.getMonth(), d.getDate())
+    )
+    const dayNum = target.getUTCDay() || 7 // Sunday=0
+    target.setUTCDate(target.getUTCDate() + 4 - dayNum)
+    const yearStart = new Date(Date.UTC(target.getUTCFullYear(), 0, 1))
+    const weekNo = Math.ceil(((target - yearStart) / 86400000 + 1) / 7)
+    const year = target.getUTCFullYear()
+    return `${year}-W${String(weekNo).padStart(2, '0')}`
+  }
+
+  // 2) 按周聚合：每周取「该周内任意一天的最大加班时长」
+  const weekMap = new Map()
+  dailyOvertime.forEach((d) => {
+    const key = getIsoWeekKey(d.date)
+    if (!key) return
+    const cur = weekMap.get(key)
+    if (!cur || d.overtime > cur.overtime) {
+      weekMap.set(key, d)
+    }
+  })
+
+  if (weekMap.size) {
+    const weeks = Array.from(weekMap.entries()).sort((a, b) => {
+      if (b[1].overtime !== a[1].overtime) return b[1].overtime - a[1].overtime
+      return new Date(b[1].date) - new Date(a[1].date)
+    })
+    const [weekKey, weekInfo] = weeks[0]
+    const weekEl = document.getElementById('latestOvertimeWeek')
+    if (weekEl) {
+      weekEl.innerHTML = `⏰ 最晚加班的一周：<b>${weekKey}</b>（代表日期 ${weekInfo.date}，超过下班 <b>${weekInfo.overtime.toFixed(
+        2
+      )}</b> 小时）`
+    }
+  }
+
+  // 3) 按月聚合：每月取「该月任意一天的最大加班时长」
+  const monthMap = new Map()
+  dailyOvertime.forEach((d) => {
+    const dt = new Date(d.date)
+    if (Number.isNaN(dt.valueOf())) return
+    const key = `${dt.getFullYear()}-${String(dt.getMonth() + 1).padStart(
+      2,
+      '0'
+    )}`
+    const cur = monthMap.get(key)
+    if (!cur || d.overtime > cur.overtime) {
+      monthMap.set(key, d)
+    }
+  })
+
+  if (monthMap.size) {
+    const months = Array.from(monthMap.entries()).sort((a, b) => {
+      if (b[1].overtime !== a[1].overtime) return b[1].overtime - a[1].overtime
+      return new Date(b[1].date) - new Date(a[1].date)
+    })
+    const [monthKey, monthInfo] = months[0]
+    const monthEl = document.getElementById('latestOvertimeMonth')
+    if (monthEl) {
+      monthEl.innerHTML = `⏰ 最晚加班的月份：<b>${monthKey}</b>（代表日期 ${monthInfo.date}，超过下班 <b>${monthInfo.overtime.toFixed(
+        2
+      )}</b> 小时）`
+    }
+  }
+}
+
+// 抽屉关闭交互（按钮 + 点击遮罩）
+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

@@ -56,6 +56,9 @@
         <div id="mostTiredDay"></div>
         <div id="mostTiredWeek"></div>
         <div id="mostTiredMonth"></div>
+        <div id="latestOvertimeDay"></div>
+        <div id="latestOvertimeWeek"></div>
+        <div id="latestOvertimeMonth"></div>
       </section>
 
       <section class="table-card">
@@ -98,26 +101,17 @@
         <code>/data/</code>.</small
       >
     </footer>
-    <!-- 右侧滑出的详情侧栏 -->
+    <!-- 通用：右侧滑出的详情侧栏（小时 / 天 / 周 复用同一个 DOM） -->
+    <!-- 背景遮罩，点击可关闭侧栏 -->
+    <div id="sidebarBackdrop" class="sidebar-backdrop"></div>
     <div id="dayDetailSidebar" class="sidebar">
       <div class="sidebar-header">
         <span id="sidebarTitle"></span>
         <button id="sidebarClose">×</button>
       </div>
-
       <div id="sidebarContent" class="sidebar-content"></div>
     </div>
 
-    <!-- 小时详情侧栏（独立） -->
-    <div id="hourDetailSidebar" class="sidebar">
-      <div class="sidebar-header">
-        <span id="hourSidebarTitle"> </span>
-        <button id="hourSidebarClose">×</button>
-      </div>
-
-      <div id="hourSidebarContent" class="sidebar-content"></div>
-    </div>
-
     <script type="module" src="/app.js"></script>
   </body>
 </html>

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;
 }