feat: 模型使用分布支持自定义时间范围

- 后端：getPublicModelStats 支持 today/24h/7d/30d/all 五种时间范围
- 后端：新增 publicStatsModelDistributionPeriod 设置项
- 前端：设置页面添加横向选项卡式时间范围选择器
- 前端：公开统计组件显示当前数据时间范围标签

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

web/admin-spa/src/components/common/PublicStatsOverview.vue

@@ -52,7 +52,12 @@
       "
       class="mt-4"
     >
-      <div class="section-title">模型使用分布</div>
+      <div class="section-title">
+        模型使用分布
+        <span class="period-label">{{
+          formatPeriodLabel(authStore.publicStats.modelDistributionPeriod)
+        }}</span>
+      </div>
       <div class="model-distribution">
         <div
           v-for="model in authStore.publicStats.modelDistribution"
@@ -384,6 +389,18 @@ function formatTokensShort(tokens) {
   return tokens.toString()
 }
 
+// 格式化时间范围标签
+function formatPeriodLabel(period) {
+  const labels = {
+    today: '今天',
+    '24h': '过去24小时',
+    '7d': '过去7天',
+    '30d': '过去30天',
+    all: '全部'
+  }
+  return labels[period] || labels['today']
+}
+
 // 获取平台图标
 function getPlatformIcon(platform) {
   const icons = {
@@ -450,6 +467,11 @@ function formatDateShort(dateStr) {
   @apply mb-2 text-center text-xs text-gray-600 dark:text-gray-400;
 }
 
+/* 时间范围标签 */
+.period-label {
+  @apply ml-1 rounded bg-gray-100 px-1.5 py-0.5 text-[10px] text-gray-500 dark:bg-gray-700 dark:text-gray-400;
+}
+
 /* 状态徽章 */
 .status-badge {
   @apply inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium;