refactor(frontend): 优化通用组件

- 改进ConfirmDialog对话框组件
- 增强DataTable表格组件功能和响应式布局
- 优化EmptyState空状态组件
- 完善SubscriptionProgressMini订阅进度组件

frontend/src/components/common/ConfirmDialog.vue

@@ -31,8 +31,12 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import Modal from './Modal.vue'
 
+const { t } = useI18n()
+
 interface Props {
   show: boolean
   title: string
@@ -47,12 +51,13 @@ interface Emits {
   (e: 'cancel'): void
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
-  confirmText: 'Confirm',
-  cancelText: 'Cancel',
   danger: false
 })
 
+const confirmText = computed(() => props.confirmText || t('common.confirm'))
+const cancelText = computed(() => props.cancelText || t('common.cancel'))
+
 const emit = defineEmits<Emits>()
 
 const handleConfirm = () => {

frontend/src/components/common/DataTable.vue

@@ -152,6 +152,7 @@ const { t } = useI18n()
 // 表格容器引用
 const tableWrapperRef = ref<HTMLElement | null>(null)
 const isScrollable = ref(false)
+const actionsColumnNeedsExpanding = ref(false)
 
 // 检查是否可滚动
 const checkScrollable = () => {
@@ -160,17 +161,49 @@ const checkScrollable = () => {
   }
 }
 
+// 检查操作列是否需要展开
+const checkActionsColumnWidth = () => {
+  if (!tableWrapperRef.value) return
+
+  // 查找操作列的表头单元格
+  const actionsHeader = tableWrapperRef.value.querySelector('th:has(button[title*="Expand"], button[title*="展开"])')
+  if (!actionsHeader) return
+
+  // 查找第一行的操作列单元格
+  const firstActionCell = tableWrapperRef.value.querySelector('tbody tr:first-child td:last-child')
+  if (!firstActionCell) return
+
+  // 获取操作列内容的实际宽度
+  const actionsContent = firstActionCell.querySelector('div')
+  if (!actionsContent) return
+
+  // 比较内容宽度和单元格宽度
+  const contentWidth = actionsContent.scrollWidth
+  const cellWidth = (firstActionCell as HTMLElement).clientWidth
+
+  // 如果内容宽度超过单元格宽度，说明需要展开
+  actionsColumnNeedsExpanding.value = contentWidth > cellWidth
+}
+
 // 监听尺寸变化
 let resizeObserver: ResizeObserver | null = null
 
 onMounted(() => {
   checkScrollable()
+  checkActionsColumnWidth()
   if (tableWrapperRef.value && typeof ResizeObserver !== 'undefined') {
-    resizeObserver = new ResizeObserver(checkScrollable)
+    resizeObserver = new ResizeObserver(() => {
+      checkScrollable()
+      checkActionsColumnWidth()
+    })
     resizeObserver.observe(tableWrapperRef.value)
   } else {
     // 降级方案：不支持 ResizeObserver 时使用 window resize
-    window.addEventListener('resize', checkScrollable)
+    const handleResize = () => {
+      checkScrollable()
+      checkActionsColumnWidth()
+    }
+    window.addEventListener('resize', handleResize)
   }
 })
 
@@ -205,6 +238,7 @@ watch(
   async () => {
     await nextTick()
     checkScrollable()
+    checkActionsColumnWidth()
   },
   { flush: 'post' }
 )
@@ -234,7 +268,11 @@ const sortedData = computed(() => {
 
 // 检查是否有可展开的操作列
 const hasExpandableActions = computed(() => {
-  return props.expandableActions && props.columns.some((col) => col.key === 'actions')
+  return (
+    props.expandableActions &&
+    props.columns.some((col) => col.key === 'actions') &&
+    actionsColumnNeedsExpanding.value
+  )
 })
 
 // 切换操作列展开/折叠状态

frontend/src/components/common/EmptyState.vue

@@ -25,7 +25,7 @@
 
     <!-- Title -->
     <h3 class="empty-state-title">
-      {{ title }}
+      {{ displayTitle }}
     </h3>
 
     <!-- Description -->
@@ -61,8 +61,12 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import type { Component } from 'vue'
 
+const { t } = useI18n()
+
 interface Props {
   icon?: Component | string
   title?: string
@@ -73,11 +77,12 @@ interface Props {
   message?: string
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
-  title: 'No data found',
   description: '',
   actionIcon: true
 })
 
+const displayTitle = computed(() => props.title || t('common.noData'))
+
 defineEmits(['action'])
 </script>

frontend/src/components/common/SubscriptionProgressMini.vue

@@ -246,7 +246,7 @@ function formatDaysRemaining(expiresAt: string): string {
   const diff = expires.getTime() - now.getTime()
   if (diff < 0) return t('subscriptionProgress.expired')
   const days = Math.ceil(diff / (1000 * 60 * 60 * 24))
-  if (days === 0) return t('subscriptionProgress.expirestoday')
+  if (days === 0) return t('subscriptionProgress.expiresToday')
   if (days === 1) return t('subscriptionProgress.expiresTomorrow')
   return t('subscriptionProgress.daysRemaining', { days })
 }