shine-code-submit 0.2.10 → 1.0.0

package/ui/components/App.tsx

@@ -6,6 +6,8 @@ import { EventsModule } from "./EventsModule";
 import { CommitsModule } from "./CommitsModule";
 import { OverviewModule } from "./OverviewModule";
 import { StatsModule } from "./StatsModule";
+import { ReportModule } from "./ReportModule";
+import { SettingsModule } from "./SettingsModule";
 import { SystemModule } from "./SystemModule";
 
 /** 模块路由：按 activeModule 渲染对应模块。 */
@@ -20,8 +22,12 @@ function ModuleRouter() {
     //   return <EventsModule />;        // 暂时屏蔽
     // case "commits":
     //   return <CommitsModule />;       // 暂时屏蔽
-    case "stats":
-      return <StatsModule />;
+    // case "stats":
+    //   return <StatsModule />;        // 暂时屏蔽
+    case "report":
+      return <ReportModule />;
+    case "settings":
+      return <SettingsModule />;
     case "system":
       return <SystemModule />;
     default:

package/ui/components/Icon.tsx

@@ -17,7 +17,8 @@ export type IconName =
   | "home"
   | "git"
   | "chart"
-  | "server";
+  | "server"
+  | "sliders";
 
 const PATHS: Record<IconName, ReactNode> = {
   sessions: (
@@ -84,6 +85,12 @@ const PATHS: Record<IconName, ReactNode> = {
       <path d="M8 7h.01M8 17h.01" />
     </>
   ),
+  sliders: (
+    <>
+      <path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3" />
+      <path d="M1 14h6M9 8h6M17 16h6" />
+    </>
+  ),
 };
 
 export function Icon({

package/ui/components/ReportModule.tsx

@@ -0,0 +1,186 @@
+// 「数据上报」模块:顶部汇总标题 + 左侧项目导航(仅项目名) + 右侧 session 表格(分页,隐藏 0 token)。
+// 表格列:Session / 时间 / 输入 token / 输出 token;标题显示该项目的输入/输出 token 汇总。
+// 数据来自 GET /api/report?since=0(全部)。后期真·上报服务器时,把顶部占位按钮接上即可。
+import { useEffect, useState } from "react";
+import { useApi } from "../hooks/useApi";
+import { useApp } from "../state/AppContext";
+import { Icon } from "./Icon";
+import { Splitter } from "./Splitter";
+import type { ReportProject, ReportResponse } from "../types";
+import { fmtDateTime, fmtTokens, fmtUsageFull, shortDir } from "../lib/util";
+
+const PAGE = 20; // 每页 session 数
+
+export function ReportModule() {
+  const { token } = useApp();
+  const api = useApi(token);
+  const [data, setData] = useState<ReportResponse | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+  const [selCwd, setSelCwd] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setErr(null);
+    api<ReportResponse>(`/api/report?since=0`)
+      .then((d) => !cancelled && setData(d))
+      .catch((e) => !cancelled && setErr(String(e)));
+    return () => {
+      cancelled = true;
+    };
+  }, [api]);
+
+  // 默认选中第一个项目
+  useEffect(() => {
+    if (data && !selCwd && data.projects[0]) setSelCwd(data.projects[0].cwd);
+  }, [data, selCwd]);
+
+  const sel = data?.projects.find((p) => p.cwd === selCwd) ?? null;
+
+  return (
+    <div className="stats-view">
+      {/* 顶部汇总标题 */}
+      <div
+        className="panel-header"
+        style={{ display: "flex", gap: "1.1rem", alignItems: "baseline", flexWrap: "wrap" }}
+      >
+        {data ? (
+          <>
+            <b>报表</b>
+            <span title="软件版本">v{data.version}</span>
+            <span title="git 用户">👤 {data.gitUser ?? "—"}</span>
+            <span>{data.totals.projects} 项目</span>
+            <span>{data.totals.sessions} 会话</span>
+            <span title={fmtUsageFull(data.totals.tokens)}>
+              token {fmtTokens(data.totals.tokens.input + data.totals.tokens.output)}
+            </span>
+            <span>
+              {data.totals.commitCount} 提交 · +{fmtTokens(data.totals.added)}/-{fmtTokens(data.totals.deleted)}
+            </span>
+            {/* 占位:后期接「上报到服务器」(POST 本报告到远端)。现在禁用。 */}
+            <button
+              type="button"
+              className="tab"
+              disabled
+              title="后期接入:把本报告上报到服务器(占位)"
+              style={{ marginLeft: "auto" }}
+            >
+              ☁ 上报(敬请期待)
+            </button>
+          </>
+        ) : (
+          <span>{err ? `加载失败:${err}` : "加载中…"}</span>
+        )}
+      </div>
+
+      {/* 项目导航 | 详情表格 */}
+      <div className="sessions-with-tree">
+        <aside className="sessions-tree-panel panel">
+          <div className="panel-header">
+            <h2>项目 · {data?.projects.length ?? 0}</h2>
+          </div>
+          {!data || data.projects.length === 0 ? (
+            <div className="empty-state" style={{ padding: "2rem 1rem" }}>
+              <span className="es-hint">暂无项目</span>
+              <span className="es-sub">启动 Claude Code 后会出现</span>
+            </div>
+          ) : (
+            <ul className="report-nav">
+              {data.projects.map((p) => (
+                <li
+                  key={p.cwd}
+                  className={p.cwd === selCwd ? "active" : undefined}
+                  title={p.cwd}
+                  onClick={() => setSelCwd(p.cwd)}
+                >
+                  {shortDir(p.cwd) || p.cwd}
+                </li>
+              ))}
+            </ul>
+          )}
+        </aside>
+
+        <Splitter orient="v" varName="--tree-w" />
+
+        <div className="sessions-main">
+          {sel ? (
+            <ProjectDetail key={sel.cwd} p={sel} />
+          ) : (
+            <div className="empty-state">
+              <Icon name="log" size={30} />
+              <span className="es-hint">选左侧项目查看详情</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** 右侧详情:标题(输入/输出 token 汇总 + 提交汇总) + session 表格(分页,隐藏 0 token)。
+ *  key=sel.cwd:换项目时重挂载,分页回到第 1 页。 */
+function ProjectDetail({ p }: { p: ReportProject }) {
+  const [page, setPage] = useState(1);
+  // 过滤掉 0 token 的 session(tokenTotal 为 null 或 input+output=0)
+  const rows = p.sessions.filter((s) => s.tokenTotal && s.tokenTotal.input + s.tokenTotal.output > 0);
+  const pageCount = Math.max(1, Math.ceil(rows.length / PAGE));
+  const cur = Math.min(page, pageCount);
+  const pageRows = rows.slice((cur - 1) * PAGE, cur * PAGE);
+
+  return (
+    <>
+      <div className="report-title">
+        <span className="rt-sum" title={fmtUsageFull(p.totalTokens)}>
+          输入 token <b>{fmtTokens(p.totalTokens.input)}</b>
+        </span>
+        <span className="rt-sum" title={fmtUsageFull(p.totalTokens)}>
+          输出 token <b>{fmtTokens(p.totalTokens.output)}</b>
+        </span>
+        <span className="rt-sum" style={{ marginLeft: "auto" }}>
+          {p.commits.count} 提交 · +{fmtTokens(p.commits.added)}/-{fmtTokens(p.commits.deleted)}
+          {p.commits.lastTime ? ` · 最近 ${fmtDateTime(p.commits.lastTime)}` : ""}
+        </span>
+      </div>
+
+      <div style={{ overflow: "auto", flex: "1 1 0", minHeight: 0 }}>
+        <table className="report-table">
+          <thead>
+            <tr>
+              <th className="rt-idx">#</th>
+              <th>Session</th>
+              <th>时间</th>
+              <th className="rt-num">输入 token</th>
+              <th className="rt-num">输出 token</th>
+            </tr>
+          </thead>
+          <tbody>
+            {pageRows.map((s, idx) => (
+              <tr key={s.sessionId}>
+                <td className="rt-idx">{(cur - 1) * PAGE + idx + 1}</td>
+                <td className="rt-sid" title={s.sessionId}>
+                  {s.sessionId.slice(0, 8)}
+                </td>
+                <td>{fmtDateTime(s.lastActive)}</td>
+                <td className="rt-num">{fmtTokens(s.tokenTotal!.input)}</td>
+                <td className="rt-num">{fmtTokens(s.tokenTotal!.output)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {rows.length === 0 && <div className="sum-empty">无有效会话(均已隐藏 0 token)</div>}
+      </div>
+
+      <div className="report-pager">
+        <button type="button" disabled={cur <= 1} onClick={() => setPage(cur - 1)}>
+          ‹ 上一页
+        </button>
+        <span>
+          第 {cur} / {pageCount} 页
+        </span>
+        <button type="button" disabled={cur >= pageCount} onClick={() => setPage(cur + 1)}>
+          下一页 ›
+        </button>
+        <span style={{ marginLeft: "auto" }}>共 {rows.length} 个会话(已隐藏 0 token)</span>
+      </div>
+    </>
+  );
+}

package/ui/components/SettingsModule.tsx

@@ -0,0 +1,127 @@
+// 「设置」模块:上报地址 + 自动上报间隔(分钟)。
+// GET /api/settings 读、PUT /api/settings 写。daemon 侧按间隔定时 POST 报表到上报地址。
+import { useEffect, useState } from "react";
+import { useApi } from "../hooks/useApi";
+import { useApp } from "../state/AppContext";
+
+interface Settings {
+  reportUrl?: string | null;
+  reportIntervalMin?: number | null;
+}
+
+export function SettingsModule() {
+  const { token } = useApp();
+  const api = useApi(token);
+  const base = location.origin;
+  const [url, setUrl] = useState("");
+  const [intervalStr, setIntervalStr] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [msg, setMsg] = useState<{ kind: "ok" | "err"; text: string } | null>(null);
+
+  useEffect(() => {
+    api<Settings>("/api/settings")
+      .then((s) => {
+        setUrl(s.reportUrl ?? "");
+        setIntervalStr(s.reportIntervalMin != null ? String(s.reportIntervalMin) : "");
+        setLoading(false);
+      })
+      .catch(() => {
+        setMsg({ kind: "err", text: "读取设置失败" });
+        setLoading(false);
+      });
+  }, [api]);
+
+  const save = async () => {
+    setSaving(true);
+    setMsg(null);
+    const iv = parseInt(intervalStr, 10);
+    const body = {
+      reportUrl: url.trim() || null,
+      reportIntervalMin: Number.isFinite(iv) && iv > 0 ? iv : null,
+    };
+    try {
+      const res = await fetch(base + "/api/settings", {
+        method: "PUT",
+        headers: { Authorization: "Bearer " + token, "content-type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      if (!res.ok) throw new Error(String(res.status));
+      const s = (await res.json()) as Settings;
+      setUrl(s.reportUrl ?? "");
+      setIntervalStr(s.reportIntervalMin != null ? String(s.reportIntervalMin) : "");
+      setMsg({ kind: "ok", text: "已保存" });
+      setTimeout(() => setMsg(null), 2000);
+    } catch {
+      setMsg({ kind: "err", text: "保存失败,请重试" });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="stats-view">
+      <div className="panel-header">
+        <h2>设置</h2>
+      </div>
+      <div className="stats-body">
+        {loading ? (
+          <div className="sum-empty">加载中…</div>
+        ) : (
+          <>
+            <section className="sum-section">
+              <div className="sum-head">
+                <h3>上报</h3>
+              </div>
+              <div className="field-row">
+                <label>上报地址</label>
+                <input
+                  className="field-input"
+                  type="url"
+                  placeholder="https://your-server/api/report"
+                  value={url}
+                  onChange={(e) => setUrl(e.target.value)}
+                  spellCheck={false}
+                />
+              </div>
+              <div className="field-row">
+                <label>上报间隔</label>
+                <input
+                  className="field-input"
+                  type="number"
+                  min={1}
+                  placeholder="0 = 不自动上报"
+                  value={intervalStr}
+                  onChange={(e) => setIntervalStr(e.target.value)}
+                  spellCheck={false}
+                  style={{ flex: "0 0 120px" }}
+                />
+                <span className="field-hint" style={{ padding: 0 }}>
+                  分钟(填了地址且间隔大于 0 才会自动上报)
+                </span>
+              </div>
+              <div className="field-row">
+                <label /> {/* 占位对齐 */}
+                <button
+                  type="button"
+                  className="tab"
+                  onClick={save}
+                  disabled={saving}
+                  title="保存设置"
+                >
+                  {saving ? "保存中…" : "保存"}
+                </button>
+                {msg && (
+                  <span className={msg.kind === "ok" ? "field-ok" : "field-err"}>{msg.text}</span>
+                )}
+              </div>
+              <div className="field-hint">
+                daemon 每分钟检查一次:地址 + 间隔都配了,就把「报表」数据 POST 到该地址;留空 / 间隔 0 = 不上报。改完无需重启。
+              </div>
+            </section>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/ui/components/SideNav.tsx

@@ -8,7 +8,9 @@ const ITEMS: Array<{ id: ModuleId; label: string; icon: IconName }> = [
   { id: "sessions", label: "会话", icon: "sessions" },
   // { id: "events", label: "事件", icon: "activity" },   // 暂时屏蔽，恢复取消注释即可
   // { id: "commits", label: "提交", icon: "git" },        // 暂时屏蔽，恢复取消注释即可
-  { id: "stats", label: "统计", icon: "chart" },
+  // { id: "stats", label: "统计", icon: "chart" },   // 暂时屏蔽,恢复取消注释即可
+  { id: "report", label: "报表", icon: "log" },
+  { id: "settings", label: "设置", icon: "sliders" },
   { id: "system", label: "系统", icon: "server" },
 ];
 

package/ui/style.css

@@ -847,3 +847,31 @@ ul { list-style: none; margin: 0; padding: 0; }
 .cf-add { color: #9bcd97; text-align: right; }
 .cf-del { color: #fc533a; text-align: right; }
 .cf-path { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
+
+/* 数据上报模块:表格 + 标题汇总 */
+.report-title { display: flex; gap: 1.2rem; align-items: baseline; flex-wrap: wrap; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
+.report-title h2 { margin: 0; font-size: var(--fs-md); }
+.report-title .rt-sum { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
+.report-title .rt-sum b { color: var(--text); font-family: Consolas, "Courier New", monospace; font-variant-numeric: tabular-nums; }
+.report-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
+.report-table th { position: sticky; top: 0; background: var(--bg); text-align: left; color: var(--muted); font-weight: 600; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border-light); white-space: nowrap; }
+.report-table td { padding: 0.32rem 0.6rem; border-bottom: 1px solid var(--border); color: var(--text); white-space: nowrap; }
+.report-table th.rt-num, .report-table td.rt-num { text-align: right; font-family: Consolas, "Courier New", monospace; font-variant-numeric: tabular-nums; color: var(--muted); }
+.report-table td.rt-sid { font-family: Consolas, "Courier New", monospace; color: var(--c-session); }
+.report-table th.rt-idx, .report-table td.rt-idx { text-align: center; width: 3rem; color: var(--muted); }
+.report-table tr:hover td { background: var(--hover); }
+.report-nav { list-style: none; margin: 0; padding: 0.3rem; }
+.report-nav li { padding: 0.45rem 0.7rem; border-radius: 4px; cursor: pointer; color: var(--text); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.report-nav li:hover { background: var(--hover); }
+.report-nav li.active { background: var(--accent); color: #fff; }
+.report-pager { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.8rem; border-top: 1px solid var(--border); color: var(--muted); font-size: var(--fs-xs); flex: 0 0 auto; }
+.report-pager button { background: none; border: 1px solid var(--border-light); color: var(--text); border-radius: 4px; padding: 0.15rem 0.55rem; cursor: pointer; font-size: var(--fs-xs); }
+.report-pager button:disabled { opacity: 0.4; cursor: default; }
+/* 设置模块:表单输入 */
+.field-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.8rem; }
+.field-row label { flex: 0 0 88px; color: var(--muted); font-size: var(--fs-xs); }
+.field-input { background: var(--bg); border: 1px solid var(--border-light); color: var(--text); border-radius: 4px; padding: 0.4rem 0.6rem; font-size: var(--fs-sm); font-family: Consolas, "Courier New", monospace; min-width: 0; flex: 1 1 auto; }
+.field-input:focus { outline: none; border-color: var(--accent-line); }
+.field-hint { color: var(--muted); font-size: var(--fs-xs); padding: 0.3rem 0.8rem; }
+.field-ok { color: #9bcd97; }
+.field-err { color: var(--c-err, #fc533a); }

package/ui/types.ts

@@ -5,6 +5,9 @@ import type {
   CommitsResponse,
   EventsResponse,
   HookEvent,
+  ReportProject,
+  ReportResponse,
+  ReportSession,
   SessionSummary,
   StatsResponse,
   TokenUsage,
@@ -18,6 +21,9 @@ export type {
   CommitsResponse,
   EventsResponse,
   HookEvent,
+  ReportProject,
+  ReportResponse,
+  ReportSession,
   SessionSummary,
   StatsResponse,
   TokenUsage,
@@ -43,4 +49,4 @@ export type Payload = Record<string, unknown>;
 export type ViewMode = "events" | "conversation" | "commits" | "summary";
 
 /** 左侧导航模块（渐进重构：Step 1 起与 viewMode 并存，selectModule 经映射驱动 viewMode）。 */
-export type ModuleId = "overview" | "sessions" | "events" | "commits" | "stats" | "system";
+export type ModuleId = "overview" | "sessions" | "events" | "commits" | "stats" | "report" | "settings" | "system";