commons-proxy 2.0.0

package/public/js/components/dashboard/filters.js

@@ -0,0 +1,362 @@
+/**
+ * Dashboard Filters Module
+ * 职责：管理图表筛选器的状态和持久化
+ *
+ * 功能：
+ *   1. 时间范围筛选（1h/6h/24h/7d/all）
+ *   2. 显示模式切换（按家族/按模型）
+ *   3. 模型/家族多选筛选
+ *   4. 筛选器状态持久化到 localStorage
+ *
+ * 调用时机：
+ *   - 组件初始化时加载用户偏好
+ *   - 筛选器变化时保存并触发图表更新
+ *
+ * 持久化键：
+ *   - localStorage['dashboard_chart_prefs']
+ *
+ * @module DashboardFilters
+ */
+window.DashboardFilters = window.DashboardFilters || {};
+
+/**
+ * Get initial filter state
+ * @returns {object} Initial state for filter properties
+ */
+window.DashboardFilters.getInitialState = function() {
+    return {
+        timeRange: '24h',  // '1h', '6h', '24h', '7d', 'all'
+        displayMode: 'model',
+        selectedFamilies: [],
+        selectedModels: {},
+        showModelFilter: false,
+        showTimeRangeDropdown: false,
+        showDisplayModeDropdown: false
+    };
+};
+
+/**
+ * Load filter preferences from localStorage
+ * @param {object} component - Dashboard component instance
+ */
+window.DashboardFilters.loadPreferences = function(component) {
+    try {
+        const saved = localStorage.getItem('dashboard_chart_prefs');
+        if (saved) {
+            const prefs = JSON.parse(saved);
+            component.timeRange = prefs.timeRange || '24h';
+            component.displayMode = prefs.displayMode || 'model';
+            component.selectedFamilies = prefs.selectedFamilies || [];
+            component.selectedModels = prefs.selectedModels || {};
+        }
+    } catch (e) {
+        if (window.UILogger) window.UILogger.debug('Failed to load dashboard preferences:', e.message);
+    }
+};
+
+/**
+ * Save filter preferences to localStorage
+ * @param {object} component - Dashboard component instance
+ */
+window.DashboardFilters.savePreferences = function(component) {
+    try {
+        localStorage.setItem('dashboard_chart_prefs', JSON.stringify({
+            timeRange: component.timeRange,
+            displayMode: component.displayMode,
+            selectedFamilies: component.selectedFamilies,
+            selectedModels: component.selectedModels
+        }));
+    } catch (e) {
+        if (window.UILogger) window.UILogger.debug('Failed to save dashboard preferences:', e.message);
+    }
+};
+
+/**
+ * Set display mode (family or model)
+ * @param {object} component - Dashboard component instance
+ * @param {string} mode - 'family' or 'model'
+ */
+window.DashboardFilters.setDisplayMode = function(component, mode) {
+    component.displayMode = mode;
+    component.showDisplayModeDropdown = false;
+    window.DashboardFilters.savePreferences(component);
+    // updateTrendChart uses debounce internally, call directly
+    component.updateTrendChart();
+};
+
+/**
+ * Set time range filter
+ * @param {object} component - Dashboard component instance
+ * @param {string} range - '1h', '6h', '24h', '7d', 'all'
+ */
+window.DashboardFilters.setTimeRange = function(component, range) {
+    component.timeRange = range;
+    component.showTimeRangeDropdown = false;
+    window.DashboardFilters.savePreferences(component);
+    component.updateTrendChart();
+};
+
+/**
+ * Get time range cutoff timestamp
+ * @param {string} range - Time range code
+ * @returns {number|null} Cutoff timestamp or null for 'all'
+ */
+window.DashboardFilters.getTimeRangeCutoff = function(range) {
+    const now = Date.now();
+    switch (range) {
+        case '1h': return now - 1 * 60 * 60 * 1000;
+        case '6h': return now - 6 * 60 * 60 * 1000;
+        case '24h': return now - 24 * 60 * 60 * 1000;
+        case '7d': return now - 7 * 24 * 60 * 60 * 1000;
+        default: return null; // 'all'
+    }
+};
+
+/**
+ * Get filtered history data based on time range
+ * @param {object} component - Dashboard component instance
+ * @returns {object} Filtered history data
+ */
+window.DashboardFilters.getFilteredHistoryData = function(component) {
+    const history = component.historyData;
+    if (!history || Object.keys(history).length === 0) return {};
+
+    const cutoff = window.DashboardFilters.getTimeRangeCutoff(component.timeRange);
+    if (!cutoff) return history; // 'all' - return everything
+
+    const filtered = {};
+    Object.entries(history).forEach(([iso, data]) => {
+        const timestamp = new Date(iso).getTime();
+        if (timestamp >= cutoff) {
+            filtered[iso] = data;
+        }
+    });
+    return filtered;
+};
+
+/**
+ * Get time range label for display
+ * @param {object} component - Dashboard component instance
+ * @returns {string} Translated label
+ */
+window.DashboardFilters.getTimeRangeLabel = function(component) {
+    const store = Alpine.store('global');
+    switch (component.timeRange) {
+        case '1h': return store.t('last1Hour');
+        case '6h': return store.t('last6Hours');
+        case '24h': return store.t('last24Hours');
+        case '7d': return store.t('last7Days');
+        default: return store.t('allTime');
+    }
+};
+
+/**
+ * Toggle family selection
+ * @param {object} component - Dashboard component instance
+ * @param {string} family - Family name (e.g., 'claude', 'gemini')
+ */
+window.DashboardFilters.toggleFamily = function(component, family) {
+    const index = component.selectedFamilies.indexOf(family);
+    if (index > -1) {
+        component.selectedFamilies.splice(index, 1);
+    } else {
+        component.selectedFamilies.push(family);
+    }
+    window.DashboardFilters.savePreferences(component);
+    // updateTrendChart uses debounce internally, call directly
+    component.updateTrendChart();
+};
+
+/**
+ * Toggle model selection within a family
+ * @param {object} component - Dashboard component instance
+ * @param {string} family - Family name
+ * @param {string} model - Model name
+ */
+window.DashboardFilters.toggleModel = function(component, family, model) {
+    if (!component.selectedModels[family]) {
+        component.selectedModels[family] = [];
+    }
+    const index = component.selectedModels[family].indexOf(model);
+    if (index > -1) {
+        component.selectedModels[family].splice(index, 1);
+    } else {
+        component.selectedModels[family].push(model);
+    }
+    window.DashboardFilters.savePreferences(component);
+    // updateTrendChart uses debounce internally, call directly
+    component.updateTrendChart();
+};
+
+/**
+ * Check if family is selected
+ * @param {object} component - Dashboard component instance
+ * @param {string} family - Family name
+ * @returns {boolean}
+ */
+window.DashboardFilters.isFamilySelected = function(component, family) {
+    return component.selectedFamilies.includes(family);
+};
+
+/**
+ * Check if model is selected
+ * @param {object} component - Dashboard component instance
+ * @param {string} family - Family name
+ * @param {string} model - Model name
+ * @returns {boolean}
+ */
+window.DashboardFilters.isModelSelected = function(component, family, model) {
+    return component.selectedModels[family]?.includes(model) || false;
+};
+
+/**
+ * Select all families and models
+ * @param {object} component - Dashboard component instance
+ */
+window.DashboardFilters.selectAll = function(component) {
+    component.selectedFamilies = [...component.families];
+    component.families.forEach(family => {
+        component.selectedModels[family] = [...(component.modelTree[family] || [])];
+    });
+    window.DashboardFilters.savePreferences(component);
+    // updateTrendChart uses debounce internally, call directly
+    component.updateTrendChart();
+};
+
+/**
+ * Deselect all families and models
+ * @param {object} component - Dashboard component instance
+ */
+window.DashboardFilters.deselectAll = function(component) {
+    component.selectedFamilies = [];
+    component.selectedModels = {};
+    window.DashboardFilters.savePreferences(component);
+    // updateTrendChart uses debounce internally, call directly
+    component.updateTrendChart();
+};
+
+/**
+ * Get color for a family
+ * @param {string} family - Family name
+ * @returns {string} Color value
+ */
+window.DashboardFilters.getFamilyColor = function(family) {
+    const FAMILY_COLORS = window.DashboardConstants?.FAMILY_COLORS || {};
+    return FAMILY_COLORS[family] || FAMILY_COLORS.other;
+};
+
+/**
+ * Get color for a model (with index for variation within family)
+ * @param {string} family - Family name
+ * @param {number} modelIndex - Index of model within family
+ * @returns {string} Color value
+ */
+window.DashboardFilters.getModelColor = function(family, modelIndex) {
+    const MODEL_COLORS = window.DashboardConstants?.MODEL_COLORS || [];
+    const baseIndex = family === 'claude' ? 0 : (family === 'gemini' ? 4 : (family === 'gpt' ? 8 : (family === 'o1' ? 12 : 8)));
+    return MODEL_COLORS[(baseIndex + modelIndex) % MODEL_COLORS.length];
+};
+
+/**
+ * Get count of selected items for display
+ * @param {object} component - Dashboard component instance
+ * @returns {string} Selected count string (e.g., "3/5")
+ */
+window.DashboardFilters.getSelectedCount = function(component) {
+    if (component.displayMode === 'family') {
+        return `${component.selectedFamilies.length}/${component.families.length}`;
+    }
+    let selected = 0, total = 0;
+    component.families.forEach(family => {
+        const models = component.modelTree[family] || [];
+        total += models.length;
+        selected += (component.selectedModels[family] || []).length;
+    });
+    return `${selected}/${total}`;
+};
+
+/**
+ * Auto-select new families/models that haven't been configured
+ * @param {object} component - Dashboard component instance
+ */
+window.DashboardFilters.autoSelectNew = function(component) {
+    // If no preferences saved, select all
+    if (component.selectedFamilies.length === 0 && Object.keys(component.selectedModels).length === 0) {
+        component.selectedFamilies = [...component.families];
+        component.families.forEach(family => {
+            component.selectedModels[family] = [...(component.modelTree[family] || [])];
+        });
+        window.DashboardFilters.savePreferences(component);
+        return;
+    }
+
+    // Add new families/models that appeared
+    component.families.forEach(family => {
+        if (!component.selectedFamilies.includes(family)) {
+            component.selectedFamilies.push(family);
+        }
+        if (!component.selectedModels[family]) {
+            component.selectedModels[family] = [];
+        }
+        (component.modelTree[family] || []).forEach(model => {
+            if (!component.selectedModels[family].includes(model)) {
+                component.selectedModels[family].push(model);
+            }
+        });
+    });
+};
+
+/**
+ * Auto-select top N models by usage (past 24 hours)
+ * @param {object} component - Dashboard component instance
+ * @param {number} n - Number of models to select (default: 5)
+ */
+window.DashboardFilters.autoSelectTopN = function(component, n = 5) {
+    // Calculate usage for each model over past 24 hours
+    const usage = {};
+    const now = Date.now();
+    const dayAgo = now - 24 * 60 * 60 * 1000;
+
+    Object.entries(component.historyData).forEach(([iso, hourData]) => {
+        const timestamp = new Date(iso).getTime();
+        if (timestamp < dayAgo) return;
+
+        Object.entries(hourData).forEach(([family, familyData]) => {
+            if (typeof familyData === 'object' && family !== '_total') {
+                Object.entries(familyData).forEach(([model, count]) => {
+                    if (model !== '_subtotal') {
+                        const key = `${family}:${model}`;
+                        usage[key] = (usage[key] || 0) + count;
+                    }
+                });
+            }
+        });
+    });
+
+    // Sort by usage and take top N
+    const sorted = Object.entries(usage)
+        .sort((a, b) => b[1] - a[1])
+        .slice(0, n);
+
+    // Clear current selection
+    component.selectedFamilies = [];
+    component.selectedModels = {};
+
+    // Select top models and their families
+    sorted.forEach(([key, _]) => {
+        const [family, model] = key.split(':');
+        if (!component.selectedFamilies.includes(family)) {
+            component.selectedFamilies.push(family);
+        }
+        if (!component.selectedModels[family]) {
+            component.selectedModels[family] = [];
+        }
+        if (!component.selectedModels[family].includes(model)) {
+            component.selectedModels[family].push(model);
+        }
+    });
+
+    window.DashboardFilters.savePreferences(component);
+    // updateTrendChart uses debounce internally, call directly
+    component.updateTrendChart();
+};

package/public/js/components/dashboard/stats.js

@@ -0,0 +1,110 @@
+/**
+ * Dashboard Stats Module
+ * 职责：根据 Alpine.store('data') 计算账号统计数据
+ *
+ * 调用时机：
+ *   - dashboard 组件 init() 时
+ *   - $store.data 更新时（通过 $watch 监听）
+ *
+ * 统计维度：
+ *   - total: 启用账号总数（排除禁用账号）
+ *   - active: 有可用配额的账号数
+ *   - limited: 配额受限或失效的账号数
+ *   - subscription: 按订阅级别分类（ultra/pro/free）
+ *
+ * @module DashboardStats
+ */
+window.DashboardStats = window.DashboardStats || {};
+
+/**
+ * 更新账号统计数据
+ *
+ * 统计逻辑：
+ *   1. 仅统计启用的账号（enabled !== false）
+ *   2. 检查账号下所有追踪模型的配额
+ *   3. 如果任一追踪模型配额 <= 5%，则标记为 limited (Rate Limited Cooldown)
+ *   4. 如果所有追踪模型配额 > 5%，则标记为 active
+ *   5. 状态非 'ok' 的账号归为 limited
+ *
+ * @param {object} component - Dashboard 组件实例（Alpine.js 上下文）
+ * @param {object} component.stats - 统计数据对象（会被修改）
+ * @param {number} component.stats.total - 启用账号总数
+ * @param {number} component.stats.active - 活跃账号数
+ * @param {number} component.stats.limited - 受限账号数
+ * @param {object} component.stats.subscription - 订阅级别分布
+ * @returns {void}
+ */
+window.DashboardStats.updateStats = function(component) {
+    const accounts = Alpine.store('data').accounts;
+    let active = 0, limited = 0;
+
+    // Only count enabled accounts in statistics
+    const enabledAccounts = accounts.filter(acc => acc.enabled !== false);
+
+    enabledAccounts.forEach(acc => {
+        if (acc.status === 'ok') {
+            const limits = Object.entries(acc.limits || {});
+
+            if (limits.length === 0) {
+                // No limit data available, consider limited to be safe
+                limited++;
+                return;
+            }
+
+            // Check if ANY tracked model is rate limited (<= 5%)
+            // We consider all models in the limits object as "tracked"
+            const hasRateLimitedModel = limits.some(([_, l]) => {
+                // Treat null/undefined fraction as 0 (limited)
+                if (!l || l.remainingFraction === null || l.remainingFraction === undefined) return true;
+                return l.remainingFraction <= 0.05;
+            });
+
+            if (hasRateLimitedModel) {
+                limited++;
+            } else {
+                active++;
+            }
+        } else {
+            limited++;
+        }
+    });
+
+    // TOTAL shows only enabled accounts
+    // Disabled accounts are excluded from all statistics
+    component.stats.total = enabledAccounts.length;
+    component.stats.active = active;
+    component.stats.limited = limited;
+
+    // Calculate model usage for rate limit details
+    let totalLimitedModels = 0;
+    let totalTrackedModels = 0;
+
+    enabledAccounts.forEach(acc => {
+         const limits = Object.entries(acc.limits || {});
+         limits.forEach(([id, l]) => {
+             totalTrackedModels++;
+             if (!l || l.remainingFraction == null || l.remainingFraction <= 0.05) {
+                 totalLimitedModels++;
+             }
+         });
+    });
+    
+    component.stats.modelUsage = {
+        limited: totalLimitedModels,
+        total: totalTrackedModels
+    };
+
+    // Calculate subscription tier distribution
+    const subscription = { ultra: 0, pro: 0, free: 0 };
+    enabledAccounts.forEach(acc => {
+        const tier = acc.subscription?.tier || 'free';
+        if (tier === 'ultra') {
+            subscription.ultra++;
+        } else if (tier === 'pro') {
+            subscription.pro++;
+        } else {
+            subscription.free++;
+        }
+    });
+    component.stats.subscription = subscription;
+};

package/public/js/components/dashboard.js

@@ -0,0 +1,236 @@
+/**
+ * Dashboard Component (Refactored)
+ * Orchestrates stats, charts, and filters modules
+ * Registers itself to window.Components for Alpine.js to consume
+ */
+window.Components = window.Components || {};
+
+window.Components.dashboard = () => ({
+    // Core state
+    stats: { total: 0, active: 0, limited: 0, overallHealth: 0, hasTrendData: false },
+    hasFilteredTrendData: true,
+    charts: { quotaDistribution: null, usageTrend: null },
+    usageStats: { total: 0, today: 0, thisHour: 0 },
+    historyData: {},
+    modelTree: {},
+    families: [],
+
+    // Filter state (from module)
+    ...window.DashboardFilters.getInitialState(),
+
+    // Debounced chart update to prevent rapid successive updates
+    _debouncedUpdateTrendChart: null,
+
+    init() {
+        // Create debounced version of updateTrendChart (300ms delay for stability)
+        this._debouncedUpdateTrendChart = window.utils.debounce(() => {
+            window.DashboardCharts.updateTrendChart(this);
+        }, 300);
+
+        // Load saved preferences from localStorage
+        window.DashboardFilters.loadPreferences(this);
+
+        // Update stats when dashboard becomes active (skip initial trigger)
+        this.$watch('$store.global.activeTab', (val, oldVal) => {
+            if (val === 'dashboard' && oldVal !== undefined) {
+                this.$nextTick(() => {
+                    this.updateStats();
+                    this.updateCharts();
+                    this.updateTrendChart();
+                });
+            }
+        });
+
+        // Watch for data changes
+        this.$watch('$store.data.accounts', () => {
+            if (this.$store.global.activeTab === 'dashboard') {
+                this.updateStats();
+                // Debounce chart updates to prevent rapid flickering
+                if (this._debouncedUpdateCharts) {
+                    this._debouncedUpdateCharts();
+                } else {
+                    this._debouncedUpdateCharts = window.utils.debounce(() => this.updateCharts(), 100);
+                    this._debouncedUpdateCharts();
+                }
+            }
+        });
+
+        // Watch for history updates from data-store (automatically loaded with account data)
+        this.$watch('$store.data.usageHistory', (newHistory) => {
+            if (this.$store.global.activeTab === 'dashboard' && newHistory && Object.keys(newHistory).length > 0) {
+                // Optimization: Skip if data hasn't changed (prevents double render on load)
+                if (this.historyData && JSON.stringify(newHistory) === JSON.stringify(this.historyData)) {
+                    return;
+                }
+
+                this.historyData = newHistory;
+                this.processHistory(newHistory);
+                this.stats.hasTrendData = true;
+            }
+        });
+
+        // Initial update if already on dashboard
+        // Note: Alpine.store('data') may already have data from cache if initialized before this component
+        if (this.$store.global.activeTab === 'dashboard') {
+            this.$nextTick(() => {
+                this.updateStats();
+                this.updateCharts();
+
+                // Optimization: Only process history if it hasn't been processed yet
+                // The usageHistory watcher above will handle updates if data changes
+                const history = Alpine.store('data').usageHistory;
+                if (history && Object.keys(history).length > 0) {
+                    // Check if we already have this data to avoid redundant chart update
+                    if (!this.historyData || JSON.stringify(history) !== JSON.stringify(this.historyData)) {
+                        this.historyData = history;
+                        this.processHistory(history);
+                        this.stats.hasTrendData = true;
+                    }
+                }
+            });
+        }
+    },
+
+    processHistory(history) {
+        // Build model tree from hierarchical data
+        const tree = {};
+        let total = 0, today = 0, thisHour = 0;
+
+        const now = new Date();
+        const todayStart = new Date(now);
+        todayStart.setHours(0, 0, 0, 0);
+        const currentHour = new Date(now);
+        currentHour.setMinutes(0, 0, 0);
+
+        Object.entries(history).forEach(([iso, hourData]) => {
+            const timestamp = new Date(iso);
+
+            // Process each family in the hour data
+            Object.entries(hourData).forEach(([key, value]) => {
+                // Skip metadata keys
+                if (key === '_total' || key === 'total') return;
+
+                // Handle hierarchical format: { claude: { "opus-4-5": 10, "_subtotal": 10 } }
+                if (typeof value === 'object' && value !== null) {
+                    if (!tree[key]) tree[key] = new Set();
+
+                    Object.keys(value).forEach(modelName => {
+                        if (modelName !== '_subtotal') {
+                            tree[key].add(modelName);
+                        }
+                    });
+                }
+            });
+
+            // Calculate totals
+            const hourTotal = hourData._total || hourData.total || 0;
+            total += hourTotal;
+
+            if (timestamp >= todayStart) {
+                today += hourTotal;
+            }
+            if (timestamp.getTime() === currentHour.getTime()) {
+                thisHour = hourTotal;
+            }
+        });
+
+        this.usageStats = { total, today, thisHour };
+
+        // Convert Sets to sorted arrays
+        this.modelTree = {};
+        Object.entries(tree).forEach(([family, models]) => {
+            this.modelTree[family] = Array.from(models).sort();
+        });
+        this.families = Object.keys(this.modelTree).sort();
+
+        // Auto-select new families/models that haven't been configured
+        this.autoSelectNew();
+
+        this.updateTrendChart();
+    },
+
+    // Delegation methods for stats
+    updateStats() {
+        window.DashboardStats.updateStats(this);
+    },
+
+    // Delegation methods for charts
+    updateCharts() {
+        window.DashboardCharts.updateCharts(this);
+    },
+
+    updateTrendChart() {
+        // Use debounced version to prevent rapid successive updates
+        if (this._debouncedUpdateTrendChart) {
+            this._debouncedUpdateTrendChart();
+        } else {
+            // Fallback if debounced version not initialized
+            window.DashboardCharts.updateTrendChart(this);
+        }
+    },
+
+    // Delegation methods for filters
+    loadPreferences() {
+        window.DashboardFilters.loadPreferences(this);
+    },
+
+    savePreferences() {
+        window.DashboardFilters.savePreferences(this);
+    },
+
+    setDisplayMode(mode) {
+        window.DashboardFilters.setDisplayMode(this, mode);
+    },
+
+    setTimeRange(range) {
+        window.DashboardFilters.setTimeRange(this, range);
+    },
+
+    getTimeRangeLabel() {
+        return window.DashboardFilters.getTimeRangeLabel(this);
+    },
+
+    toggleFamily(family) {
+        window.DashboardFilters.toggleFamily(this, family);
+    },
+
+    toggleModel(family, model) {
+        window.DashboardFilters.toggleModel(this, family, model);
+    },
+
+    isFamilySelected(family) {
+        return window.DashboardFilters.isFamilySelected(this, family);
+    },
+
+    isModelSelected(family, model) {
+        return window.DashboardFilters.isModelSelected(this, family, model);
+    },
+
+    selectAll() {
+        window.DashboardFilters.selectAll(this);
+    },
+
+    deselectAll() {
+        window.DashboardFilters.deselectAll(this);
+    },
+
+    getFamilyColor(family) {
+        return window.DashboardFilters.getFamilyColor(family);
+    },
+
+    getModelColor(family, modelIndex) {
+        return window.DashboardFilters.getModelColor(family, modelIndex);
+    },
+
+    getSelectedCount() {
+        return window.DashboardFilters.getSelectedCount(this);
+    },
+
+    autoSelectNew() {
+        window.DashboardFilters.autoSelectNew(this);
+    },
+
+    autoSelectTopN(n = 5) {
+        window.DashboardFilters.autoSelectTopN(this, n);
+    }
+});