Add timeline zoom, pan & preset navigation for time series chart

Replace the fixed 3-segment TimeRangePicker with a continuous TimeWindow
model that supports scroll-wheel zoom, drag-to-pan, preset buttons
(1H/6H/1D/7D/30D), and a Live mode that auto-scrolls to now.

Granularity (minute/hourly/daily) is derived automatically from window
duration. Tooltip selection preserved via simultaneousGesture and
hit-test-transparent scroll wheel overlay.

Author: yishuiliunian

Sources/CCMonitor/Utilities/Constants.swift

@@ -58,4 +58,32 @@ enum Constants {
     // MARK: - 聚合
 
     static let burnRateWindowMinutes: Int = 30
+
+    // MARK: - 时间窗口
+
+    /// 粒度切换阈值（秒）
+    static let granularityMinuteThreshold: TimeInterval = 2 * 3600        // ≤ 2h → minute
+    static let granularityHourlyThreshold: TimeInterval = 3 * 24 * 3600   // ≤ 3d → hourly, > 3d → daily
+
+    /// 窗口缩放极限（秒）
+    static let timeWindowMinDuration: TimeInterval = 10 * 60              // 10 分钟
+    static let timeWindowMaxDuration: TimeInterval = 30 * 24 * 3600       // 30 天
+
+    /// 默认窗口宽度（秒）
+    static let timeWindowDefaultDuration: TimeInterval = 6 * 3600         // 6 小时
+
+    /// 缩放步进因子（滚轮 deltaY=1 时）
+    static let zoomStepFactor: Double = 0.15
+
+    /// 滚轮灵敏度缩放系数
+    static let scrollWheelSensitivity: Double = 1.0
+
+    /// 预设窗口列表 (label, 秒数)
+    static let timeWindowPresets: [(label: String, duration: TimeInterval)] = [
+        ("1H",  3600),
+        ("6H",  6 * 3600),
+        ("1D",  24 * 3600),
+        ("7D",  7 * 24 * 3600),
+        ("30D", 30 * 24 * 3600),
+    ]
 }

Sources/CCMonitor/ViewModels/DashboardViewModel.swift

@@ -1,7 +1,7 @@
 import Foundation
 import Observation
 
-/// 选择的时间范围
+/// 选择的时间范围（保留用于兼容粒度标签显示）
 enum TimeRange: String, CaseIterable, Sendable {
     case minutes = "Minutes"
     case hours = "Hours"
@@ -14,6 +14,82 @@ enum ChartStyle: String, CaseIterable, Sendable {
     case line = "Line"
 }
 
+/// 可见时间窗口模型
+struct TimeWindow: Equatable {
+    var start: Date
+    var end: Date
+
+    var duration: TimeInterval { end.timeIntervalSince(start) }
+
+    /// 根据窗口宽度自动判定粒度
+    var granularity: AggregationGranularity {
+        let d = duration
+        if d <= Constants.granularityMinuteThreshold { return .minute }
+        if d <= Constants.granularityHourlyThreshold { return .hourly }
+        return .daily
+    }
+
+    /// 对应的 TimeRange（用于 X 轴格式化等兼容场景）
+    var timeRange: TimeRange {
+        switch granularity {
+        case .minute: return .minutes
+        case .hourly: return .hours
+        case .daily:  return .days
+        }
+    }
+
+    /// 以中心为锚点缩放，clamp 到 [minDuration, maxDuration]
+    func zoomed(by factor: Double) -> TimeWindow {
+        let center = start.addingTimeInterval(duration / 2)
+        let newDuration = (duration * factor).clamped(
+            to: Constants.timeWindowMinDuration...Constants.timeWindowMaxDuration
+        )
+        let halfNew = newDuration / 2
+        return TimeWindow(
+            start: center.addingTimeInterval(-halfNew),
+            end: center.addingTimeInterval(halfNew)
+        )
+    }
+
+    /// 平移指定秒数
+    func shifted(by seconds: TimeInterval) -> TimeWindow {
+        TimeWindow(
+            start: start.addingTimeInterval(seconds),
+            end: end.addingTimeInterval(seconds)
+        )
+    }
+
+    /// 限制在数据可用范围内
+    func clamped(to bounds: ClosedRange<Date>) -> TimeWindow {
+        let dur = duration
+        var s = start
+        var e = end
+
+        if s < bounds.lowerBound {
+            s = bounds.lowerBound
+            e = s.addingTimeInterval(dur)
+        }
+        if e > bounds.upperBound {
+            e = bounds.upperBound
+            s = e.addingTimeInterval(-dur)
+        }
+        // 再次确保 start 不越过 lower bound
+        if s < bounds.lowerBound {
+            s = bounds.lowerBound
+        }
+        return TimeWindow(start: s, end: e)
+    }
+
+    /// 默认窗口：最近 N 秒
+    static func defaultWindow() -> TimeWindow {
+        let now = Date()
+        return TimeWindow(
+            start: now.addingTimeInterval(-Constants.timeWindowDefaultDuration),
+            end: now
+        )
+    }
+}
+
 /// 时间序列数据点
 struct TimeSeriesPoint: Identifiable {
     let id: Date
@@ -46,9 +122,23 @@ struct TimeSeriesPoint: Identifiable {
 /// Dashboard 主 ViewModel
 @Observable
 final class DashboardViewModel {
-    var selectedTimeRange: TimeRange = .hours
+    /// 可见时间窗口
+    var timeWindow: TimeWindow = .defaultWindow()
+
+    /// 兼容属性：基于 timeWindow 自动推导
+    var selectedTimeRange: TimeRange { timeWindow.timeRange }
+
     var selectedChartStyle: ChartStyle = .bar
 
+    /// 实时模式：窗口右端跟随 now 自动滚动
+    var isLive: Bool = true
+
+    /// 拖拽中标记（拖拽时忽略 tooltip selection）
+    var isDragging: Bool = false
+
+    /// 全部数据的时间极值
+    var dataBounds: ClosedRange<Date>?
+
     // 摘要数据
     var todayCost: Double = 0
     var todayInputTokens: Int = 0
@@ -82,6 +172,55 @@ final class DashboardViewModel {
     // 项目列表
     var projects: [ProjectInfo] = []
 
+    // MARK: - 时间窗口操作
+
+    /// 缩放：factor > 1 缩小（看到更多数据），< 1 放大（看到更少数据）
+    func zoom(by factor: Double) {
+        isLive = false
+        var newWindow = timeWindow.zoomed(by: factor)
+        if let bounds = dataBounds {
+            newWindow = newWindow.clamped(to: bounds)
+        }
+        timeWindow = newWindow
+    }
+
+    /// 平移：正值向右（未来），负值向左（过去）
+    func pan(by seconds: TimeInterval) {
+        isLive = false
+        var newWindow = timeWindow.shifted(by: seconds)
+        if let bounds = dataBounds {
+            newWindow = newWindow.clamped(to: bounds)
+        }
+        timeWindow = newWindow
+    }
+
+    /// 应用预设窗口宽度
+    func applyPreset(duration: TimeInterval) {
+        let now = Date()
+        timeWindow = TimeWindow(
+            start: now.addingTimeInterval(-duration),
+            end: now
+        )
+        if let bounds = dataBounds {
+            timeWindow = timeWindow.clamped(to: bounds)
+        }
+        // 预设始终回到实时模式
+        isLive = true
+    }
+
+    /// 恢复实时跟随
+    func goLive() {
+        isLive = true
+        let dur = timeWindow.duration
+        let now = Date()
+        timeWindow = TimeWindow(
+            start: now.addingTimeInterval(-dur),
+            end: now
+        )
+    }
+
+    // MARK: - 数据更新
+
     /// 更新所有面板数据
     func update(from aggregator: UsageAggregator) {
         let today = aggregator.todayUsage
@@ -93,6 +232,19 @@ final class DashboardViewModel {
         activeSessions = aggregator.activeSessionCount
         burnRate = BurnRateCalculator.calculate(minuteUsage: aggregator.minuteUsage)
 
+        // 计算数据时间边界
+        updateDataBounds(from: aggregator)
+
+        // isLive 时自动右移窗口
+        if isLive {
+            let dur = timeWindow.duration
+            let now = Date()
+            timeWindow = TimeWindow(
+                start: now.addingTimeInterval(-dur),
+                end: now
+            )
+        }
+
         // 更新时间序列
         updateTimeSeries(from: aggregator)
 
@@ -106,20 +258,41 @@ final class DashboardViewModel {
             .sorted { $0.totalCostUSD > $1.totalCostUSD }
     }
 
+    private func updateDataBounds(from aggregator: UsageAggregator) {
+        // 收集所有数据源的时间极值
+        var allDates: [Date] = []
+
+        for bucket in aggregator.minuteUsage.keys { allDates.append(bucket.date) }
+        for bucket in aggregator.hourlyUsage.keys { allDates.append(bucket.date) }
+        for bucket in aggregator.dailyUsage.keys { allDates.append(bucket.date) }
+
+        guard let minDate = allDates.min(), let maxDate = allDates.max() else {
+            dataBounds = nil
+            return
+        }
+        // 右边界扩展一点，确保最新数据点不被裁掉
+        dataBounds = minDate...maxDate.addingTimeInterval(3600)
+    }
+
     private func updateTimeSeries(from aggregator: UsageAggregator) {
         let bucketData: [(DateBucket, UsageSummary)]
 
-        switch selectedTimeRange {
-        case .minutes:
+        switch timeWindow.granularity {
+        case .minute:
             bucketData = aggregator.minuteUsage.sorted { $0.key < $1.key }
-        case .hours:
+        case .hourly:
             bucketData = aggregator.hourlyUsage.sorted { $0.key < $1.key }
-        case .days:
+        case .daily:
             bucketData = aggregator.dailyUsage.sorted { $0.key < $1.key }
         }
 
-        timeSeriesData = bucketData.map { bucket, summary in
-            TimeSeriesPoint(
+        // 按时间窗口过滤
+        let windowStart = timeWindow.start
+        let windowEnd = timeWindow.end
+
+        timeSeriesData = bucketData.compactMap { bucket, summary in
+            guard bucket.date >= windowStart && bucket.date <= windowEnd else { return nil }
+            return TimeSeriesPoint(
                 date: bucket.date,
                 cost: summary.totalCostUSD,
                 inputTokens: summary.inputTokens,
@@ -130,3 +303,11 @@ final class DashboardViewModel {
         }
     }
 }
+
+// MARK: - Comparable clamping helper
+
+extension Comparable {
+    func clamped(to range: ClosedRange<Self>) -> Self {
+        min(max(self, range.lowerBound), range.upperBound)
+    }
+}

Sources/CCMonitor/Views/Components/TimeRangePicker.swift

@@ -16,20 +16,26 @@ struct DashboardView: View {
                     // 时间序列图表
                     TimeSeriesPanel()
                         .frame(minHeight: 350)
+                        .clipped()
 
                     // 模型分布
                     ModelDistributionPanel()
                         .frame(minWidth: 300, maxWidth: 300, minHeight: 350)
+                        .clipped()
                 }
+                .fixedSize(horizontal: false, vertical: true)
 
                 // 底部: 项目 + 预算（横向排列）
                 HStack(alignment: .top, spacing: 16) {
                     ProjectPanel()
                         .frame(minHeight: 250)
+                        .clipped()
 
                     BudgetPanel()
                         .frame(minWidth: 300, maxWidth: 300, minHeight: 250)
+                        .clipped()
                 }
+                .fixedSize(horizontal: false, vertical: true)
             }
             .padding()
         }