wukong-gitlog-cli 1.0.15 → 1.0.16

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 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)
 
 

package/package.json

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

package/web/app.js

@@ -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])
     })
   }
@@ -214,6 +231,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 +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
@@ -257,8 +278,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 +432,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 +449,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 +571,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 +855,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 +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')
 
@@ -1110,17 +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 || 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 +1160,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
@@ -1349,8 +1377,18 @@ function computeAndRenderLatestOvertime(latestByDay) {
   }
 }
 
-// 关闭按钮
+// 抽屉关闭交互（按钮 + 点击遮罩）
 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

@@ -102,6 +102,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;
 }