feat(usage): add auto-refresh interval for usage queries

New Features:
- Users can configure auto-query interval in "Configure Usage Query" dialog
- Interval in minutes (0 = disabled, recommend 5-60 minutes)
- Auto-query only enabled for currently active provider
- Display last query timestamp in relative time format (e.g., "5 min ago")
- Execute first query immediately when enabled, then repeat at intervals

Technical Implementation:
- Backend: Add auto_query_interval field to UsageScript struct
- Frontend: Create useAutoUsageQuery Hook to manage timers and query state
- UI: Add auto-query interval input field in UsageScriptModal
- Integration: Display auto-query results and timestamp in UsageFooter
- i18n: Add Chinese and English translations

UX Improvements:
- Minimum interval protection (1 minute) to prevent API abuse
- Auto-cleanup timers on component unmount
- Silent failure handling for auto-queries, non-intrusive to users
- Prioritize auto-query results, fallback to manual query results
- Timestamp display positioned next to refresh button for better clarity
This commit is contained in:
Jason
2025-11-05 15:48:19 +08:00
parent 254896e5eb
commit 21d29b9c2d
8 changed files with 224 additions and 14 deletions

View File

@@ -368,6 +368,30 @@ const UsageScriptModal: React.FC<UsageScriptModalProps> = ({
className="mt-1 w-full px-3 py-2 border border-border-default dark:border-border-default rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
/>
</label>
{/* 🆕 自动查询间隔 */}
<label className="block">
<span className="text-sm font-medium text-gray-900 dark:text-gray-100">
{t("usageScript.autoQueryInterval")}
</span>
<input
type="number"
min="0"
max="1440"
step="1"
value={script.autoQueryInterval || 0}
onChange={(e) =>
setScript({
...script,
autoQueryInterval: parseInt(e.target.value) || 0,
})
}
className="mt-1 w-full px-3 py-2 border border-border-default dark:border-border-default rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
/>
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
{t("usageScript.autoQueryIntervalHint")}
</p>
</label>
</div>
{/* 脚本说明 */}