feat(home): 持久化 Activity/Command 图表设置

MarkShawn2020 · claude · MarkShawn2020 · commit 3f2eaeff86b1 · 2025-12-29T02:25:41.000+07:00
- 添加 Features 按钮到 collapsed layout 导航栏 - 新增 home atoms 支持图表偏好持久化 - Activity 默认显示 Hour 视图 - Command 默认显示 3M 范围和 Cumulative 模式 - 修复 Command 排序只计算选中范围内的数据 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
diff --git a/src/components/GlobalHeader/GlobalHeader.tsx b/src/components/GlobalHeader/GlobalHeader.tsx
@@ -72,6 +72,12 @@ export function GlobalHeader({
               icon={<img src="/logo.svg" alt="Lovcode" className="w-4 h-4" />}
               label="Lovcode"
             />
+            <NavButton
+              isActive={primaryFeature === "features"}
+              onClick={() => handleMainNavClick("features")}
+              icon={<LayersIcon className="w-4 h-4" />}
+              label="Features"
+            />
             <NavButton
               isActive={primaryFeature === "workspace"}
               onClick={() => handleMainNavClick("workspace")}
diff --git a/src/components/home/ActivityHeatmap.tsx b/src/components/home/ActivityHeatmap.tsx
@@ -1,6 +1,6 @@
-import { useMemo, useRef, useEffect, useState } from "react";
-
-type ViewMode = "weekday" | "hour";
+import { useMemo, useRef, useEffect } from "react";
+import { useAtom } from "jotai";
+import { activityViewModeAtom } from "@/store";
 
 interface ActivityHeatmapProps {
   /** Map of date (YYYY-MM-DD) to count */
@@ -10,7 +10,7 @@ interface ActivityHeatmapProps {
 }
 
 export function ActivityHeatmap({ daily, detailed }: ActivityHeatmapProps) {
-  const [mode, setMode] = useState<ViewMode>("weekday");
+  const [mode, setMode] = useAtom(activityViewModeAtom);
   const scrollRef = useRef<HTMLDivElement>(null);
 
   const dailyMap = useMemo(() => new Map(Object.entries(daily)), [daily]);
diff --git a/src/components/home/CommandTrendChart.tsx b/src/components/home/CommandTrendChart.tsx
@@ -1,4 +1,5 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
+import { useAtom } from "jotai";
 import {
   LineChart,
   Line,
@@ -8,60 +9,125 @@ import {
   ResponsiveContainer,
   Legend,
 } from "recharts";
+import { commandRangeAtom, commandModeAtom } from "@/store";
 
 interface CommandTrendChartProps {
   /** Map of command_name -> { week_key -> count } */
   data: Record<string, Record<string, number>>;
   weeks?: number;
 }
 
-// Color palette for commands (using primary variations)
+// Color palette for commands
 const COLORS = [
-  "hsl(var(--primary))",
-  "hsl(var(--primary) / 0.7)",
-  "hsl(var(--primary) / 0.5)",
-  "hsl(25, 50%, 55%)",
-  "hsl(25, 40%, 65%)",
-  "hsl(25, 30%, 75%)",
-  "hsl(200, 40%, 55%)",
-  "hsl(160, 40%, 50%)",
+  "#CC785C", // primary (陶土色)
+  "#D4896D",
+  "#DC9A7E",
+  "#B86A4E",
+  "#5B8A72", // 绿
+  "#4A7B9D", // 蓝
+  "#8B7355", // 棕
+  "#7D6B8A", // 紫
 ];
 
-const MAX_COMMANDS = 8; // Only show top N commands in chart
+const MAX_COMMANDS = 8;
+
+interface HoverData {
+  label: string;
+  items: { name: string; value: number; color: string }[];
+}
+
+// Get ISO week number
+function getISOWeek(date: Date): { year: number; week: number } {
+  const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+  const dayNum = d.getUTCDay() || 7;
+  d.setUTCDate(d.getUTCDate() + 4 - dayNum);
+  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+  const weekNo = Math.ceil((((d.getTime() - yearStart.getTime()) / 86400000) + 1) / 7);
+  return { year: d.getUTCFullYear(), week: weekNo };
+}
+
+type ChartMode = "weekly" | "cumulative";
+type TimeRange = "1m" | "3m" | "all";
+
+const RANGE_WEEKS: Record<TimeRange, number | null> = {
+  "1m": 5,   // ~1 month
+  "3m": 13,  // ~3 months
+  "all": null,
+};
+
+export function CommandTrendChart({ data, weeks = 13 }: CommandTrendChartProps) {
+  const [hoverData, setHoverData] = useState<HoverData | null>(null);
+  const [mode, setMode] = useAtom(commandModeAtom);
+  const [range, setRange] = useAtom(commandRangeAtom);
 
-export function CommandTrendChart({ data, weeks = 12 }: CommandTrendChartProps) {
   const { chartData, commands, totalCommands } = useMemo(() => {
-    // Collect all week keys from the actual data
-    const weekKeySet = new Set<string>();
-    Object.values(data).forEach((weekData) => {
-      Object.keys(weekData).forEach((week) => weekKeySet.add(week));
-    });
+    // Generate week keys based on range
+    const weekKeys: string[] = [];
+    const rangeWeeks = RANGE_WEEKS[range];
 
-    // Sort week keys chronologically and take last N weeks
-    const allWeekKeys = Array.from(weekKeySet).sort();
-    const weekKeys = allWeekKeys.slice(-weeks);
+    if (rangeWeeks === null) {
+      // "all" mode: extract all unique weeks from data, sorted
+      const allWeeks = new Set<string>();
+      Object.values(data).forEach(weekData => {
+        Object.keys(weekData).forEach(w => allWeeks.add(w));
+      });
+      weekKeys.push(...Array.from(allWeeks).sort());
+    } else {
+      // Fixed range: generate week keys for the last N weeks
+      const now = new Date();
+      for (let i = rangeWeeks - 1; i >= 0; i--) {
+        const d = new Date(now);
+        d.setDate(d.getDate() - i * 7);
+        const { year, week } = getISOWeek(d);
+        weekKeys.push(`${year}-W${week.toString().padStart(2, "0")}`);
+      }
+    }
 
-    // Get all commands and sort by total usage
+    // Get all commands and sort by total usage within the selected range
+    const weekKeySet = new Set(weekKeys);
     const commandTotals: [string, number][] = Object.entries(data).map(([cmd, weekData]) => [
       cmd,
-      Object.values(weekData).reduce((sum, count) => sum + count, 0),
+      Object.entries(weekData)
+        .filter(([w]) => weekKeySet.has(w))
+        .reduce((sum, [, count]) => sum + count, 0),
     ]);
     commandTotals.sort((a, b) => b[1] - a[1]);
     const totalCommands = commandTotals.length;
     // Only take top N commands for display
     const commands = commandTotals.slice(0, MAX_COMMANDS).map(([cmd]) => cmd);
 
-    // Build chart data
-    const chartData = weekKeys.map((week) => {
-      const point: Record<string, string | number> = { week: week.replace(/^\d{4}-W/, "W") };
-      commands.forEach((cmd) => {
-        point[cmd] = data[cmd]?.[week] || 0;
-      });
+    // Build chart data based on mode
+    const chartData = weekKeys.map((week, idx) => {
+      const isCurrentWeek = idx === weekKeys.length - 1;
+      const point: Record<string, string | number | null> = {
+        week: week.replace(/^\d{4}-W/, "W"),
+      };
+
+      if (mode === "cumulative") {
+        // Cumulative: sum all weeks up to this point
+        commands.forEach((cmd) => {
+          let cumulative = 0;
+          for (let i = 0; i <= idx; i++) {
+            cumulative += data[cmd]?.[weekKeys[i]] || 0;
+          }
+          point[cmd] = cumulative;
+        });
+      } else {
+        // Weekly: show each week's data, current week as dot
+        commands.forEach((cmd) => {
+          if (isCurrentWeek) {
+            point[cmd] = null; // Break the line
+            point[`${cmd}_current`] = data[cmd]?.[week] || 0;
+          } else {
+            point[cmd] = data[cmd]?.[week] || 0;
+          }
+        });
+      }
       return point;
     });
 
     return { chartData, commands, totalCommands };
-  }, [data, weeks]);
+  }, [data, range, mode]);
 
   if (commands.length === 0) {
     return (
@@ -74,17 +140,63 @@ export function CommandTrendChart({ data, weeks = 12 }: CommandTrendChartProps)
   return (
     <div className="space-y-2">
       <div className="flex items-center justify-between">
-        <span className="text-xs text-muted-foreground uppercase tracking-wide">
-          Command Trends
-        </span>
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-muted-foreground uppercase tracking-wide">
+            Command Trends
+          </span>
+          {/* Time range toggle */}
+          <div className="flex rounded-md border border-border/60 overflow-hidden">
+            {(["1m", "3m", "all"] as TimeRange[]).map((r) => (
+              <button
+                key={r}
+                onClick={() => setRange(r)}
+                className={`px-2 py-0.5 text-[10px] transition-colors ${
+                  range === r
+                    ? "bg-primary text-primary-foreground"
+                    : "bg-transparent text-muted-foreground hover:bg-accent"
+                }`}
+              >
+                {r === "1m" ? "1M" : r === "3m" ? "3M" : "All"}
+              </button>
+            ))}
+          </div>
+          {/* Mode toggle */}
+          <div className="flex rounded-md border border-border/60 overflow-hidden">
+            <button
+              onClick={() => setMode("weekly")}
+              className={`px-2 py-0.5 text-[10px] transition-colors ${
+                mode === "weekly"
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-transparent text-muted-foreground hover:bg-accent"
+              }`}
+            >
+              Weekly
+            </button>
+            <button
+              onClick={() => setMode("cumulative")}
+              className={`px-2 py-0.5 text-[10px] transition-colors ${
+                mode === "cumulative"
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-transparent text-muted-foreground hover:bg-accent"
+              }`}
+            >
+              Cumulative
+            </button>
+          </div>
+        </div>
         <span className="text-xs text-muted-foreground">
           Top {commands.length} of {totalCommands}
         </span>
       </div>
 
-      <div className="h-40">
-        <ResponsiveContainer width="100%" height="100%">
-          <LineChart data={chartData} margin={{ top: 5, right: 5, bottom: 5, left: -20 }}>
+      {/* Chart */}
+      <div className="h-36 w-full min-w-0">
+        <ResponsiveContainer width="100%" height={144} minWidth={0}>
+          <LineChart
+            data={chartData}
+            margin={{ top: 5, right: 5, bottom: 5, left: -20 }}
+            onMouseLeave={() => setHoverData(null)}
+          >
             <XAxis
               dataKey="week"
               tick={{ fontSize: 10, fill: "hsl(var(--muted-foreground))" }}
@@ -99,13 +211,32 @@ export function CommandTrendChart({ data, weeks = 12 }: CommandTrendChartProps)
               allowDecimals={false}
             />
             <Tooltip
-              contentStyle={{
-                backgroundColor: "hsl(var(--card))",
-                border: "1px solid hsl(var(--border))",
-                borderRadius: "8px",
-                fontSize: "12px",
+              content={({ active, payload, label }) => {
+                // Update external state when tooltip is active
+                if (active && payload && payload.length > 0) {
+                  // Merge _current entries with main entries
+                  const merged = new Map<string, { value: number; color: string }>();
+                  payload.forEach((p) => {
+                    const name = (p.name as string).replace(/_current$/, "");
+                    const value = (p.value as number) ?? 0;
+                    const existing = merged.get(name);
+                    if (!existing || value > 0) {
+                      merged.set(name, { value, color: (p.color as string) || "#999" });
+                    }
+                  });
+                  const newData: HoverData = {
+                    label: label as string,
+                    items: Array.from(merged.entries()).map(([name, { value, color }]) => ({
+                      name,
+                      value,
+                      color,
+                    })),
+                  };
+                  // Use setTimeout to avoid setState during render
+                  setTimeout(() => setHoverData(newData), 0);
+                }
+                return null; // Don't render tooltip
               }}
-              labelStyle={{ color: "hsl(var(--foreground))" }}
             />
             <Legend
               wrapperStyle={{ fontSize: "10px", paddingTop: "8px" }}
@@ -120,11 +251,48 @@ export function CommandTrendChart({ data, weeks = 12 }: CommandTrendChartProps)
                 strokeWidth={1.5}
                 dot={false}
                 activeDot={{ r: 3 }}
+                connectNulls={false}
+              />
+            ))}
+            {/* Current week points - shown as dots only in weekly mode */}
+            {mode === "weekly" && commands.map((cmd, i) => (
+              <Line
+                key={`${cmd}_current`}
+                type="monotone"
+                dataKey={`${cmd}_current`}
+                stroke={COLORS[i % COLORS.length]}
+                strokeWidth={0}
+                dot={{ r: 3, fill: COLORS[i % COLORS.length], strokeWidth: 0 }}
+                activeDot={{ r: 4 }}
+                legendType="none"
               />
             ))}
           </LineChart>
         </ResponsiveContainer>
       </div>
+
+      {/* Details below chart */}
+      <div className="min-h-[60px] pt-2 border-t border-border/40">
+        {hoverData ? (
+          <div className="flex flex-wrap gap-x-4 gap-y-1">
+            <span className="text-sm font-medium w-full mb-1">{hoverData.label}</span>
+            {[...hoverData.items].sort((a, b) => b.value - a.value).map((entry, i) => (
+              <div key={i} className="flex items-center gap-1.5 text-xs">
+                <span
+                  className="w-2 h-2 rounded-full flex-shrink-0"
+                  style={{ backgroundColor: entry.color }}
+                />
+                <span className="text-muted-foreground">{entry.name}:</span>
+                <span className="font-medium">{entry.value}</span>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-xs text-muted-foreground italic">
+            Hover chart to see week details
+          </div>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/src/store/atoms/home.ts b/src/store/atoms/home.ts
@@ -0,0 +1,5 @@
+import { atomWithStorage } from "jotai/utils";
+
+export const activityViewModeAtom = atomWithStorage<"weekday" | "hour">("lovcode:home:activityViewMode", "hour");
+export const commandRangeAtom = atomWithStorage<"1m" | "3m" | "all">("lovcode:home:commandRange", "3m");
+export const commandModeAtom = atomWithStorage<"weekly" | "cumulative">("lovcode:home:commandMode", "cumulative");
diff --git a/src/store/index.ts b/src/store/index.ts
@@ -37,3 +37,6 @@ export {
 
 // Component atoms
 export { collapsibleStatesAtom, docReaderCollapsedGroupsAtom } from "./atoms/components";
+
+// Home atoms
+export { activityViewModeAtom, commandRangeAtom, commandModeAtom } from "./atoms/home";
