refactor(frontend): UI/UX改进和组件优化

- DataTable组件操作列自适应
- 优化各种Modal弹窗
- 统一API调用方式（AbortSignal）
- 添加全局订阅状态管理
- 优化各管理视图的交互和布局
- 修复国际化翻译问题

frontend/src/components/account/SyncFromCrsModal.vue

@@ -1,12 +1,12 @@
 <template>
-  <Modal
+  <BaseDialog
     :show="show"
     :title="t('admin.accounts.syncFromCrsTitle')"
-    size="lg"
+    width="normal"
     close-on-click-outside
     @close="handleClose"
   >
-    <div class="space-y-4">
+    <form id="sync-from-crs-form" class="space-y-4" @submit.prevent="handleSync">
       <div class="text-sm text-gray-600 dark:text-dark-300">
         {{ t('admin.accounts.syncFromCrsDesc') }}
       </div>
@@ -84,25 +84,30 @@
           </div>
         </div>
       </div>
-    </div>
+    </form>
 
     <template #footer>
       <div class="flex justify-end gap-3">
-        <button class="btn btn-secondary" :disabled="syncing" @click="handleClose">
+        <button class="btn btn-secondary" type="button" :disabled="syncing" @click="handleClose">
           {{ t('common.cancel') }}
         </button>
-        <button class="btn btn-primary" :disabled="syncing" @click="handleSync">
+        <button
+          class="btn btn-primary"
+          type="submit"
+          form="sync-from-crs-form"
+          :disabled="syncing"
+        >
           {{ syncing ? t('admin.accounts.syncing') : t('admin.accounts.syncNow') }}
         </button>
       </div>
     </template>
-  </Modal>
+  </BaseDialog>
 </template>
 
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import Modal from '@/components/common/Modal.vue'
+import BaseDialog from '@/components/common/BaseDialog.vue'
 import { useAppStore } from '@/stores/app'
 import { adminAPI } from '@/api/admin'