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

- 修复RedeemView订阅刷新失败导致流程中断的问题
  将订阅刷新隔离到独立try/catch,失败时仅显示警告
- 修复DataTable resize事件监听器泄漏问题
  确保添加和移除使用同一个回调引用
- 修复订阅状态缓存导致强制刷新失效的问题
  force=true时绕过activePromise缓存,clear()清空缓存
- 修复图表主题切换后颜色不更新的问题
  添加图表ref并在主题切换时调用update()方法
This commit is contained in:
IanShaw027
2025-12-28 13:20:30 +08:00
parent 4e3499c0d7
commit 5f2d81d154
6 changed files with 42 additions and 13 deletions

View File

@@ -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>

View File

@@ -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