From c615a4264d3fa1ec5d68e9b3e5e89da43884d023 Mon Sep 17 00:00:00 2001
From: IanShaw027 <131567472+IanShaw027@users.noreply.github.com>
Date: Sat, 27 Dec 2025 16:04:16 +0800
Subject: [PATCH] =?UTF-8?q?refactor(frontend):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E9=80=9A=E7=94=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 改进ConfirmDialog对话框组件
- 增强DataTable表格组件功能和响应式布局
- 优化EmptyState空状态组件
- 完善SubscriptionProgressMini订阅进度组件
---
 .../src/components/common/ConfirmDialog.vue   | 11 +++--
 frontend/src/components/common/DataTable.vue  | 44 +++++++++++++++++--
 frontend/src/components/common/EmptyState.vue | 11 +++--
 .../common/SubscriptionProgressMini.vue       |  2 +-
 4 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/common/ConfirmDialog.vue b/frontend/src/components/common/ConfirmDialog.vue
index 267e397c..8de77837 100644
--- a/frontend/src/components/common/ConfirmDialog.vue
+++ b/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>(), {
-  confirmText: 'Confirm',
-  cancelText: 'Cancel',
+const props = withDefaults(defineProps<Props>(), {
   danger: false
 })
 
+const confirmText = computed(() => props.confirmText || t('common.confirm'))
+const cancelText = computed(() => props.cancelText || t('common.cancel'))
+
 const emit = defineEmits<Emits>()
 
 const handleConfirm = () => {
diff --git a/frontend/src/components/common/DataTable.vue b/frontend/src/components/common/DataTable.vue
index 927eb042..2dae2d4c 100644
--- a/frontend/src/components/common/DataTable.vue
+++ b/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
+  )
 })
 
 // 切换操作列展开/折叠状态
diff --git a/frontend/src/components/common/EmptyState.vue b/frontend/src/components/common/EmptyState.vue
index 98dab0de..9fcfed14 100644
--- a/frontend/src/components/common/EmptyState.vue
+++ b/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>(), {
-  title: 'No data found',
+const props = withDefaults(defineProps<Props>(), {
   description: '',
   actionIcon: true
 })
 
+const displayTitle = computed(() => props.title || t('common.noData'))
+
 defineEmits(['action'])
 </script>
diff --git a/frontend/src/components/common/SubscriptionProgressMini.vue b/frontend/src/components/common/SubscriptionProgressMini.vue
index aefbf6fe..180ffed7 100644
--- a/frontend/src/components/common/SubscriptionProgressMini.vue
+++ b/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 })
 }