refactor(frontend): UI/UX改进和组件优化

- DataTable组件操作列自适应
- 优化各种Modal弹窗
- 统一API调用方式（AbortSignal）
- 添加全局订阅状态管理
- 优化各管理视图的交互和布局
- 修复国际化翻译问题

frontend/src/views/user/DashboardView.vue

@@ -322,7 +322,13 @@
           <!-- Charts Grid -->
           <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
             <!-- Model Distribution Chart -->
-            <div class="card p-4">
+            <div class="card relative overflow-hidden p-4">
+              <div
+                v-if="loadingCharts"
+                class="absolute inset-0 z-10 flex items-center justify-center bg-white/50 backdrop-blur-sm dark:bg-dark-800/50"
+              >
+                <LoadingSpinner size="md" />
+              </div>
               <h3 class="mb-4 text-sm font-semibold text-gray-900 dark:text-white">
                 {{ t('dashboard.modelDistribution') }}
               </h3>
@@ -383,7 +389,13 @@
             </div>
 
             <!-- Token Usage Trend Chart -->
-            <div class="card p-4">
+            <div class="card relative overflow-hidden p-4">
+              <div
+                v-if="loadingCharts"
+                class="absolute inset-0 z-10 flex items-center justify-center bg-white/50 backdrop-blur-sm dark:bg-dark-800/50"
+              >
+                <LoadingSpinner size="md" />
+              </div>
               <h3 class="mb-4 text-sm font-semibold text-gray-900 dark:text-white">
                 {{ t('dashboard.tokenUsageTrend') }}
               </h3>
@@ -694,6 +706,7 @@ const user = computed(() => authStore.user)
 const stats = ref<UserDashboardStats | null>(null)
 const loading = ref(false)
 const loadingUsage = ref(false)
+const loadingCharts = ref(false)
 
 // Chart data
 const trendData = ref<TrendDataPoint[]>([])
@@ -964,6 +977,7 @@ const loadDashboardStats = async () => {
 }
 
 const loadChartData = async () => {
+  loadingCharts.value = true
   try {
     const params = {
       start_date: startDate.value,
@@ -981,14 +995,16 @@ const loadChartData = async () => {
     modelStats.value = modelResponse.models || []
   } catch (error) {
     console.error('Error loading chart data:', error)
+  } finally {
+    loadingCharts.value = false
   }
 }
 
 const loadRecentUsage = async () => {
   loadingUsage.value = true
   try {
-    const endDate = new Date().toISOString()
-    const startDate = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString()
+    const endDate = new Date().toISOString().split('T')[0]
+    const startDate = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]
     const usageResponse = await usageAPI.getByDateRange(startDate, endDate)
     recentUsage.value = usageResponse.items.slice(0, 5)
   } catch (error) {
@@ -998,11 +1014,17 @@ const loadRecentUsage = async () => {
   }
 }
 
-onMounted(() => {
-  loadDashboardStats()
+onMounted(async () => {
+  // Load critical data first
+  await loadDashboardStats()
+
+  // Initialize date range (synchronous)
   initializeDateRange()
-  loadChartData()
-  loadRecentUsage()
+
+  // Load chart data and recent usage in parallel (non-critical)
+  Promise.all([loadChartData(), loadRecentUsage()]).catch((error) => {
+    console.error('Error loading secondary data:', error)
+  })
 })
 
 // Watch for dark mode changes