fix(frontend): 修复UI改进分支中的关键问题

- 修复RedeemView订阅刷新失败导致流程中断的问题
  将订阅刷新隔离到独立try/catch，失败时仅显示警告
- 修复DataTable resize事件监听器泄漏问题
  确保添加和移除使用同一个回调引用
- 修复订阅状态缓存导致强制刷新失效的问题
  force=true时绕过activePromise缓存，clear()清空缓存
- 修复图表主题切换后颜色不更新的问题
  添加图表ref并在主题切换时调用update()方法

frontend/src/components/common/DataTable.vue

@@ -211,6 +211,7 @@ const checkActionsColumnWidth = () => {
 
 // 监听尺寸变化
 let resizeObserver: ResizeObserver | null = null
+let resizeHandler: (() => void) | null = null
 
 onMounted(() => {
   checkScrollable()
@@ -223,17 +224,20 @@ onMounted(() => {
     resizeObserver.observe(tableWrapperRef.value)
   } else {
     // 降级方案：不支持 ResizeObserver 时使用 window resize
-    const handleResize = () => {
+    resizeHandler = () => {
       checkScrollable()
       checkActionsColumnWidth()
     }
-    window.addEventListener('resize', handleResize)
+    window.addEventListener('resize', resizeHandler)
   }
 })
 
 onUnmounted(() => {
   resizeObserver?.disconnect()
-  window.removeEventListener('resize', checkScrollable)
+  if (resizeHandler) {
+    window.removeEventListener('resize', resizeHandler)
+    resizeHandler = null
+  }
 })
 
 interface Props {

frontend/src/i18n/locales/en.ts

@@ -410,7 +410,8 @@ export default {
     subscriptionDays: '{days} days',
     days: ' days',
     codeRedeemSuccess: 'Code redeemed successfully!',
-    failedToRedeem: 'Failed to redeem code. Please check the code and try again.'
+    failedToRedeem: 'Failed to redeem code. Please check the code and try again.',
+    subscriptionRefreshFailed: 'Redeemed successfully, but failed to refresh subscription status.'
   },
 
   // Profile

frontend/src/i18n/locales/zh.ts

@@ -406,7 +406,8 @@ export default {
     subscriptionDays: '{days} 天',
     days: '天',
     codeRedeemSuccess: '兑换成功！',
-    failedToRedeem: '兑换失败，请检查兑换码后重试。'
+    failedToRedeem: '兑换失败，请检查兑换码后重试。',
+    subscriptionRefreshFailed: '兑换成功，但订阅状态刷新失败。'
   },
 
   // Profile

frontend/src/stores/subscriptions.ts

@@ -48,7 +48,7 @@ export const useSubscriptionStore = defineStore('subscriptions', () => {
     }
 
     // Return in-flight request if exists (deduplication)
-    if (activePromise) {
+    if (activePromise && !force) {
       return activePromise
     }
 
@@ -56,7 +56,7 @@ export const useSubscriptionStore = defineStore('subscriptions', () => {
 
     // Start new request
     loading.value = true
-    activePromise = subscriptionsAPI
+    const requestPromise = subscriptionsAPI
       .getActiveSubscriptions()
       .then((data) => {
         if (currentGeneration === requestGeneration) {
@@ -71,10 +71,14 @@ export const useSubscriptionStore = defineStore('subscriptions', () => {
         throw error
       })
       .finally(() => {
-        loading.value = false
+        if (activePromise === requestPromise) {
-        activePromise = null
+          loading.value = false
+          activePromise = null
+        }
       })
 
+    activePromise = requestPromise
+
     return activePromise
   }
 
@@ -106,6 +110,7 @@ export const useSubscriptionStore = defineStore('subscriptions', () => {
    */
   function clear() {
     requestGeneration++
+    activePromise = null
     activeSubscriptions.value = []
     loaded.value = false
     lastFetchedAt.value = null

frontend/src/views/user/DashboardView.vue

@@ -336,6 +336,7 @@
                 <div class="h-48 w-48">
                   <Doughnut
                     v-if="modelChartData"
+                    ref="modelChartRef"
                     :data="modelChartData"
                     :options="doughnutOptions"
                   />
@@ -400,7 +401,12 @@
                 {{ t('dashboard.tokenUsageTrend') }}
               </h3>
               <div class="h-48">
-                <Line v-if="trendChartData" :data="trendChartData" :options="lineOptions" />
+                <Line
+                  v-if="trendChartData"
+                  ref="trendChartRef"
+                  :data="trendChartData"
+                  :options="lineOptions"
+                />
                 <div
                   v-else
                   class="flex h-full items-center justify-center text-sm text-gray-500 dark:text-gray-400"
@@ -657,7 +663,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, onMounted, watch, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useAuthStore } from '@/stores/auth'
@@ -710,9 +716,13 @@ const loading = ref(false)
 const loadingUsage = ref(false)
 const loadingCharts = ref(false)
 
+type ChartComponentRef = { chart?: ChartJS }
+
 // Chart data
 const trendData = ref<TrendDataPoint[]>([])
 const modelStats = ref<ModelStat[]>([])
+const modelChartRef = ref<ChartComponentRef | null>(null)
+const trendChartRef = ref<ChartComponentRef | null>(null)
 
 // Recent usage
 const recentUsage = ref<UsageLog[]>([])
@@ -1036,7 +1046,10 @@ onMounted(async () => {
 
 // Watch for dark mode changes
 watch(isDarkMode, () => {
-  // Force chart re-render on theme change
+  nextTick(() => {
+    modelChartRef.value?.chart?.update()
+    trendChartRef.value?.chart?.update()
+  })
 })
 </script>
 

frontend/src/views/user/RedeemView.vue

@@ -548,7 +548,12 @@ const handleRedeem = async () => {
 
     // If subscription type, immediately refresh subscription status
     if (result.type === 'subscription') {
-      await subscriptionStore.fetchActiveSubscriptions(true) // force refresh
+      try {
+        await subscriptionStore.fetchActiveSubscriptions(true) // force refresh
+      } catch (error) {
+        console.error('Failed to refresh subscriptions after redeem:', error)
+        appStore.showWarning(t('redeem.subscriptionRefreshFailed'))
+      }
     }
 
     // Clear the input