feat(frontend): 优化弹窗组件架构和用户体验

- 使用 BaseDialog 替代旧版 Modal 组件
- 添加平滑过渡动画和更好的可访问性支持
- 新增 ExportProgressDialog 导出进度弹窗
- 优化所有账号管理和使用记录相关弹窗
- 更新国际化文案，改进用户交互体验
- 精简依赖，减少 package.json 体积

frontend/src/components/common/BaseDialog.vue

@@ -1,53 +1,63 @@
 <template>
   <Teleport to="body">
-    <div
-      v-if="show"
-      class="modal-overlay"
-      aria-labelledby="modal-title"
-      role="dialog"
-      aria-modal="true"
-      @click.self="handleClose"
-    >
-      <!-- Modal panel -->
-      <div :class="['modal-content', widthClasses]" @click.stop>
-        <!-- Header -->
-        <div class="modal-header">
-          <h3 id="modal-title" class="modal-title">
-            {{ title }}
-          </h3>
-          <button
-            @click="emit('close')"
-            class="-mr-2 rounded-xl p-2 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:text-dark-500 dark:hover:bg-dark-700 dark:hover:text-dark-300"
-            aria-label="Close modal"
-          >
-            <svg
-              class="h-5 w-5"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
+    <Transition name="modal">
+      <div
+        v-if="show"
+        class="modal-overlay"
+        :aria-labelledby="dialogId"
+        role="dialog"
+        aria-modal="true"
+        @click.self="handleClose"
+      >
+        <!-- Modal panel -->
+        <div ref="dialogRef" :class="['modal-content', widthClasses]" @click.stop>
+          <!-- Header -->
+          <div class="modal-header">
+            <h3 :id="dialogId" class="modal-title">
+              {{ title }}
+            </h3>
+            <button
+              @click="emit('close')"
+              class="-mr-2 rounded-xl p-2 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:text-dark-500 dark:hover:bg-dark-700 dark:hover:text-dark-300"
+              aria-label="Close modal"
             >
-              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
+              <svg
+                class="h-5 w-5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+              >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
 
-        <!-- Body -->
-        <div class="modal-body">
-          <slot></slot>
-        </div>
+          <!-- Body -->
+          <div class="modal-body">
+            <slot></slot>
+          </div>
 
-        <!-- Footer -->
-        <div v-if="$slots.footer" class="modal-footer">
-          <slot name="footer"></slot>
+          <!-- Footer -->
+          <div v-if="$slots.footer" class="modal-footer">
+            <slot name="footer"></slot>
+          </div>
         </div>
       </div>
-    </div>
+    </Transition>
   </Teleport>
 </template>
 
 <script setup lang="ts">
-import { computed, watch, onMounted, onUnmounted } from 'vue'
+import { computed, watch, onMounted, onUnmounted, ref, nextTick } from 'vue'
+
+// 生成唯一ID以避免多个对话框时ID冲突
+let dialogIdCounter = 0
+const dialogId = `modal-title-${++dialogIdCounter}`
+
+// 焦点管理
+const dialogRef = ref<HTMLElement | null>(null)
+let previousActiveElement: HTMLElement | null = null
 
 type DialogWidth = 'narrow' | 'normal' | 'wide' | 'extra-wide' | 'full'
 
@@ -72,12 +82,15 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<Emits>()
 
 const widthClasses = computed(() => {
+  // Width guidance: narrow=confirm/short prompts, normal=standard forms,
+  // wide=multi-section forms or rich content, extra-wide=analytics/tables,
+  // full=full-screen or very dense layouts.
   const widths: Record<DialogWidth, string> = {
     narrow: 'max-w-md',
     normal: 'max-w-lg',
-    wide: 'max-w-4xl',
-    'extra-wide': 'max-w-6xl',
-    full: 'max-w-7xl'
+    wide: 'w-full sm:max-w-2xl md:max-w-3xl lg:max-w-4xl',
+    'extra-wide': 'w-full sm:max-w-3xl md:max-w-4xl lg:max-w-5xl xl:max-w-6xl',
+    full: 'w-full sm:max-w-4xl md:max-w-5xl lg:max-w-6xl xl:max-w-7xl'
   }
   return widths[props.width]
 })
@@ -94,14 +107,31 @@ const handleEscape = (event: KeyboardEvent) => {
   }
 }
 
-// Prevent body scroll when modal is open
+// Prevent body scroll when modal is open and manage focus
 watch(
   () => props.show,
-  (isOpen) => {
+  async (isOpen) => {
     if (isOpen) {
-      document.body.style.overflow = 'hidden'
+      // 保存当前焦点元素
+      previousActiveElement = document.activeElement as HTMLElement
+      // 使用CSS类而不是直接操作style,更易于管理多个对话框
+      document.body.classList.add('modal-open')
+
+      // 等待DOM更新后设置焦点到对话框
+      await nextTick()
+      if (dialogRef.value) {
+        const firstFocusable = dialogRef.value.querySelector<HTMLElement>(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        )
+        firstFocusable?.focus()
+      }
     } else {
-      document.body.style.overflow = ''
+      document.body.classList.remove('modal-open')
+      // 恢复之前的焦点
+      if (previousActiveElement && typeof previousActiveElement.focus === 'function') {
+        previousActiveElement.focus()
+      }
+      previousActiveElement = null
     }
   },
   { immediate: true }
@@ -113,6 +143,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   document.removeEventListener('keydown', handleEscape)
-  document.body.style.overflow = ''
+  // 确保组件卸载时移除滚动锁定
+  document.body.classList.remove('modal-open')
 })
 </script>