wukong-gitlog-cli 1.0.5 → 1.0.7

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.7](https://github.com/tomatobybike/wukong-gitlog-cli/compare/v1.0.6...v1.0.7) (2025-11-29)
+
+
+### Features
+
+* 🎸 charts 2 echarts ([6d6d780](https://github.com/tomatobybike/wukong-gitlog-cli/commit/6d6d780c053cd094a3a59ee58249d55bec504655))
+
+### [1.0.6](https://github.com/tomatobybike/wukong-gitlog-cli/compare/v1.0.5...v1.0.6) (2025-11-29)
+
+
+### Features
+
+* 🎸 auto open ([380e013](https://github.com/tomatobybike/wukong-gitlog-cli/commit/380e01386300342b5b4009f4ddf5463a19cf1be8))
+
 ### [1.0.5](https://github.com/tomatobybike/wukong-gitlog-cli/compare/v1.0.4...v1.0.5) (2025-11-29)
 
 ### [1.0.4](https://github.com/tomatobybike/wukong-gitlog-cli/compare/v1.0.3...v1.0.4) (2025-11-29)

package/package.json

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

package/src/server.mjs

@@ -1,8 +1,9 @@
-import http from 'http';
-import fs from 'fs';
-import path from 'path';
-import chalk from 'chalk';
-import { fileURLToPath } from 'url';
+import chalk from 'chalk'
+import { exec } from 'child_process'
+import fs from 'fs'
+import http from 'http'
+import path from 'path'
+import { fileURLToPath } from 'url'
 
 const mime = new Map([
   ['.html', 'text/html; charset=utf-8'],
@@ -14,74 +15,116 @@ const mime = new Map([
   ['.png', 'image/png'],
   ['.jpg', 'image/jpeg'],
   ['.jpeg', 'image/jpeg'],
-  ['.map', 'application/json; charset=utf-8'],
-]);
+  ['.map', 'application/json; charset=utf-8']
+])
+
+// --------------------------------
+// 打开浏览器（跨平台）
+// --------------------------------
+function openBrowser(url) {
+  const { platform } = process
+
+  let cmd
+  if (platform === 'win32') {
+    cmd = `start "" "${url}"`
+  } else if (platform === 'darwin') {
+    cmd = `open "${url}"`
+  } else {
+    cmd = `xdg-open "${url}"`
+  }
+
+  exec(cmd, (err) => {
+    if (err) {
+      console.log(chalk.yellow(`Failed to auto-open browser: ${err.message}`))
+    }
+  })
+}
 
 // eslint-disable-next-line default-param-last
 export function startServer(port = 3000, outputDir) {
   // 解析包根目录，确保 web 资源在全局安装后也能找到
-  const __dirname = path.dirname(fileURLToPath(import.meta.url));
-  const pkgRoot = path.resolve(__dirname, '..');
-  const webRoot = path.resolve(pkgRoot, 'web');
-  const dataRoot = outputDir ? path.resolve(outputDir) : path.resolve(process.cwd(), 'output');
+  const __dirname = path.dirname(fileURLToPath(import.meta.url))
+  const pkgRoot = path.resolve(__dirname, '..')
+  const webRoot = path.resolve(pkgRoot, 'web')
+  const dataRoot = outputDir
+    ? path.resolve(outputDir)
+    : path.resolve(process.cwd(), 'output')
 
   // warn if web directory or data directory doesn't exist
   if (!fs.existsSync(webRoot)) {
-    console.warn(chalk.yellow(`Warning: web/ directory not found at ${webRoot}. Server will still run but no UI will be available.`));
+    console.warn(
+      chalk.yellow(
+        `Warning: web/ directory not found at ${webRoot}. Server will still run but no UI will be available.`
+      )
+    )
   }
   if (!fs.existsSync(dataRoot)) {
-    console.warn(chalk.yellow(`Warning: output data directory not found at ${dataRoot}. Server will still run but data endpoints (/data/) may 404.`));
+    console.warn(
+      chalk.yellow(
+        `Warning: output data directory not found at ${dataRoot}. Server will still run but data endpoints (/data/) may 404.`
+      )
+    )
   }
 
   const server = http.createServer((req, res) => {
     try {
       // Normalize URL path
-      const u = new URL(req.url, `http://localhost`);
-      let pathname = decodeURIComponent(u.pathname);
+      const u = new URL(req.url, `http://localhost`)
+      let pathname = decodeURIComponent(u.pathname)
 
       // Serve data files under /data/* mapped to dataRoot/data/*
       if (pathname.startsWith('/data/')) {
-        const relative = pathname.replace(/^\/data\//, '');
-        const fileLocal = path.join(dataRoot, 'data', relative);
+        const relative = pathname.replace(/^\/data\//, '')
+        const fileLocal = path.join(dataRoot, 'data', relative)
         if (fs.existsSync(fileLocal) && fs.statSync(fileLocal).isFile()) {
-          const ext = path.extname(fileLocal).toLowerCase();
-          res.setHeader('Content-Type', mime.get(ext) || 'application/octet-stream');
-          res.setHeader('Access-Control-Allow-Origin', '*');
-          const stream = fs.createReadStream(fileLocal);
-          stream.pipe(res);
-          return;
+          const ext = path.extname(fileLocal).toLowerCase()
+          res.setHeader(
+            'Content-Type',
+            mime.get(ext) || 'application/octet-stream'
+          )
+          res.setHeader('Access-Control-Allow-Origin', '*')
+          const stream = fs.createReadStream(fileLocal)
+          stream.pipe(res)
+          return
         }
       }
 
       // Resolve web assets
-      if (pathname === '/') pathname = '/index.html';
-      const fileLocal = path.join(webRoot, pathname);
+      if (pathname === '/') pathname = '/index.html'
+      const fileLocal = path.join(webRoot, pathname)
       if (fs.existsSync(fileLocal) && fs.statSync(fileLocal).isFile()) {
-        const ext = path.extname(fileLocal).toLowerCase();
-        res.setHeader('Content-Type', mime.get(ext) || 'application/octet-stream');
-        const stream = fs.createReadStream(fileLocal);
-        stream.pipe(res);
-        return;
+        const ext = path.extname(fileLocal).toLowerCase()
+        res.setHeader(
+          'Content-Type',
+          mime.get(ext) || 'application/octet-stream'
+        )
+        const stream = fs.createReadStream(fileLocal)
+        stream.pipe(res)
+        return
       }
 
       // file not found
-      res.statusCode = 404;
-      res.setHeader('Content-Type', 'text/plain; charset=utf-8');
-      res.end('Not Found');
+      res.statusCode = 404
+      res.setHeader('Content-Type', 'text/plain; charset=utf-8')
+      res.end('Not Found')
     } catch (err) {
-      res.statusCode = 500;
-      res.end('Server error');
+      res.statusCode = 500
+      res.end('Server error')
     }
-  });
+  })
 
   return new Promise((resolve, reject) => {
-    server.on('error', (err) => reject(err));
+    server.on('error', (err) => reject(err))
     server.listen(port, () => {
-      console.log(chalk.green(`Server started at http://localhost:${port}`));
-      console.log(chalk.green(`Serving web/ and output/data/`));
-      resolve(server);
-    });
-  });
+      const url = `http://localhost:${port}`
+      console.log(chalk.green(`Server started at ${url}`))
+      console.log(chalk.green(`Serving web/ and output/data/`))
+
+      // ====== 自动打开浏览器 ======
+      openBrowser(url)
+      resolve(server)
+    })
+  })
 }
 
-export default startServer;
+export default startServer

package/web/app.js

@@ -1,4 +1,3 @@
-/* global Chart */
 /* eslint-disable import/no-absolute-path */
 const formatDate = (d) => new Date(d).toLocaleString();
 
@@ -19,38 +18,103 @@ async function loadData() {
   }
 }
 
-function renderCommitsTable(commits) {
+let commitsAll = [];
+let filtered = [];
+let page = 1;
+let pageSize = 10;
+
+function renderCommitsTablePage() {
   const tbody = document.querySelector('#commitsTable tbody');
   tbody.innerHTML = '';
-  commits.forEach((c) => {
+  const start = (page - 1) * pageSize;
+  const end = start + pageSize;
+  filtered.slice(start, end).forEach((c) => {
     const tr = document.createElement('tr');
     tr.innerHTML = `<td>${c.hash.slice(0, 8)}</td><td>${c.author}</td><td>${formatDate(c.date)}</td><td>${c.message}</td>`;
     tbody.appendChild(tr);
   });
 }
 
+function updatePager() {
+  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
+  if (page > totalPages) page = totalPages;
+  const pageInfo = document.getElementById('pageInfo');
+  pageInfo.textContent = `${page} / ${totalPages}`;
+  document.getElementById('prevPage').disabled = page <= 1;
+  document.getElementById('nextPage').disabled = page >= totalPages;
+}
+
+function applySearch() {
+  const q = document.getElementById('searchInput').value.trim().toLowerCase();
+  if (!q) {
+    filtered = commitsAll.slice();
+  } else {
+    filtered = commitsAll.filter((c) => {
+      const h = c.hash.toLowerCase();
+      const a = String(c.author || '').toLowerCase();
+      const m = String(c.message || '').toLowerCase();
+      const d = formatDate(c.date).toLowerCase();
+      return h.includes(q) || a.includes(q) || m.includes(q) || d.includes(q);
+    });
+  }
+  page = 1;
+  updatePager();
+  renderCommitsTablePage();
+}
+
+function initTableControls() {
+  document.getElementById('searchInput').addEventListener('input', applySearch);
+  document.getElementById('pageSize').addEventListener('change', (e) => {
+    pageSize = parseInt(e.target.value, 10) || 10;
+    page = 1;
+    updatePager();
+    renderCommitsTablePage();
+  });
+  document.getElementById('prevPage').addEventListener('click', () => {
+    if (page > 1) {
+      page -= 1;
+      updatePager();
+      renderCommitsTablePage();
+    }
+  });
+  document.getElementById('nextPage').addEventListener('click', () => {
+    const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
+    if (page < totalPages) {
+      page += 1;
+      updatePager();
+      renderCommitsTablePage();
+    }
+  });
+}
+
 function drawHourlyOvertime(stats) {
-  const ctx = document.getElementById('hourlyOvertimeChart').getContext('2d');
+  const el = document.getElementById('hourlyOvertimeChart');
+  const chart = echarts.init(el);
   const data = stats.hourlyOvertimeCommits || [];
   const labels = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'));
-  const chartHourly = new Chart(ctx, {
-    type: 'bar',
-    data: { labels, datasets: [{ label: 'Overtime commits', data }] },
-    options: { responsive: true }
+  chart.setOption({
+    tooltip: {},
+    xAxis: { type: 'category', data: labels },
+    yAxis: { type: 'value' },
+    series: [{ type: 'bar', name: 'Overtime commits', data }]
   });
-  return chartHourly;
+  return chart;
 }
 
 function drawOutsideVsInside(stats) {
-  const ctx = document.getElementById('outsideVsInsideChart').getContext('2d');
+  const el = document.getElementById('outsideVsInsideChart');
+  const chart = echarts.init(el);
   const outside = stats.outsideWorkCount || 0;
   const total = stats.total || 0;
   const inside = Math.max(0, total - outside);
-  const chartPie = new Chart(ctx, {
-    type: 'pie',
-    data: { labels: ['Inside work', 'Outside work'], datasets: [{ data: [inside, outside], backgroundColor: ['#36a2eb', '#ff6384'] }] },
+  chart.setOption({
+    tooltip: {},
+    series: [{ type: 'pie', radius: '55%', data: [
+      { value: inside, name: '工作时间内' },
+      { value: outside, name: '下班时间' }
+    ] }]
   });
-  return chartPie;
+  return chart;
 }
 
 function drawDailyTrend(commits) {
@@ -61,42 +125,45 @@ function drawDailyTrend(commits) {
   });
   const labels = Array.from(map.keys()).sort();
   const data = labels.map(l => map.get(l));
-  const ctx = document.getElementById('dailyTrendChart').getContext('2d');
-  const chartDaily = new Chart(ctx, {
-    type: 'line',
-    data: { labels, datasets: [{ label: 'Commits per day', data, fill: true, tension: 0.3 }] },
+  const el = document.getElementById('dailyTrendChart');
+  const chart = echarts.init(el);
+  chart.setOption({
+    tooltip: {},
+    xAxis: { type: 'category', data: labels },
+    yAxis: { type: 'value' },
+    series: [{ type: 'line', name: '每日提交', data, areaStyle: {} }]
   });
-  return chartDaily;
+  return chart;
 }
 
 function drawWeeklyTrend(weekly) {
   const labels = weekly.map(w => w.period);
   const dataRate = weekly.map(w => +(w.outsideWorkRate * 100).toFixed(1));
   const dataCount = weekly.map(w => w.outsideWorkCount);
-  const ctx = document.getElementById('weeklyTrendChart').getContext('2d');
-  const chartWeekly = new Chart(ctx, {
-    type: 'line',
-    data: {
-      labels,
-      datasets: [
-        { label: '加班占比(%)', data: dataRate, borderColor: '#ff6384', yAxisID: 'y1' },
-        { label: '加班次数', data: dataCount, borderColor: '#36a2eb', yAxisID: 'y2' },
-      ]
-    },
-    options: {
-      responsive: true,
-      scales: {
-        y1: { type: 'linear', position: 'left', min: 0, max: 100 },
-        y2: { type: 'linear', position: 'right' }
-      }
-    }
+  const el = document.getElementById('weeklyTrendChart');
+  const chart = echarts.init(el);
+  chart.setOption({
+    tooltip: {},
+    xAxis: { type: 'category', data: labels },
+    yAxis: [
+      { type: 'value', min: 0, max: 100 },
+      { type: 'value' }
+    ],
+    series: [
+      { type: 'line', name: '加班占比(%)', data: dataRate, yAxisIndex: 0 },
+      { type: 'line', name: '加班次数', data: dataCount, yAxisIndex: 1 }
+    ]
   });
-  return chartWeekly;
+  return chart;
 }
 
 (async function main() {
   const { commits, stats, weekly } = await loadData();
-  renderCommitsTable(commits);
+  commitsAll = commits;
+  filtered = commitsAll.slice();
+  initTableControls();
+  updatePager();
+  renderCommitsTablePage();
   drawHourlyOvertime(stats);
   drawOutsideVsInside(stats);
   drawDailyTrend(commits);

package/web/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <title>wukong-gitlog-cli — Overtime Dashboard</title>
     <link rel="stylesheet" href="/style.css" />
-    <script src="./static/chart.js"></script>
+    <script src="./static/echarts.min.js"></script>
   </head>
   <body>
     <header>
@@ -15,28 +15,43 @@
       <section id="chartsHalf">
         <div class="chart-card">
           <h2>下班时间 vs 工作时间提交占比</h2>
-          <canvas id="outsideVsInsideChart"></canvas>
+          <div id="outsideVsInsideChart" class="echart"></div>
         </div>
         <div class="chart-card"></div>
       </section>
       <section id="charts">
         <div class="chart-card">
           <h2>每小时加班分布 (小时 -> 提交数)</h2>
-          <canvas id="hourlyOvertimeChart"></canvas>
+          <div id="hourlyOvertimeChart" class="echart"></div>
         </div>
 
         <div class="chart-card">
           <h2>按日提交趋势</h2>
-          <canvas id="dailyTrendChart"></canvas>
+          <div id="dailyTrendChart" class="echart"></div>
         </div>
         <div class="chart-card">
           <h2>每周趋势（加班占比）</h2>
-          <canvas id="weeklyTrendChart"></canvas>
+          <div id="weeklyTrendChart" class="echart"></div>
         </div>
       </section>
 
       <section class="table-card">
         <h2>提交清单</h2>
+        <div id="tableControls">
+          <input id="searchInput" type="search" placeholder="搜索作者/信息/Hash" />
+          <label for="pageSize">每页显示</label>
+          <select id="pageSize">
+            <option value="10">10</option>
+            <option value="20">20</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+          </select>
+          <div class="pager">
+            <button id="prevPage">上一页</button>
+            <span id="pageInfo"></span>
+            <button id="nextPage">下一页</button>
+          </div>
+        </div>
         <table id="commitsTable">
           <thead>
             <tr>