feat(导出): 重构导出功能并添加国际化支持

- 新增通用的 `useBlobExport` 组合式函数，封装导出逻辑，支持加载状态和取消操作
- 在用户管理页面使用新的导出函数替换原有的 `commonDownloadExcel` 调用
- 添加中英文国际化文案，包括导出标题、加载提示和取消提示
- 为通用页面文案补充“取消”按钮的翻译

apps/web-antd/src/locales/langs/en-US/common.json

@@ -0,0 +1,7 @@
+{
+  "export": {
+    "title": "Export",
+    "loading": "Exporting...",
+    "canceled": "Export has been cancelled."
+  }
+}

apps/web-antd/src/locales/langs/en-US/pages.json

@@ -22,6 +22,7 @@
     "tip": "Tip",
     "enable": "On",
     "disable": "Off",
-    "beforeCloseTip": "You have unsaved changes. Are you sure you want to exit?"
+    "beforeCloseTip": "You have unsaved changes. Are you sure you want to exit?",
+    "cancel": "Cancel"
   }
 }

apps/web-antd/src/locales/langs/zh-CN/common.json

@@ -0,0 +1,7 @@
+{
+  "export": {
+    "title": "导出",
+    "loading": "导出中...",
+    "canceled": "导出已取消"
+  }
+}

apps/web-antd/src/locales/langs/zh-CN/pages.json

@@ -22,6 +22,7 @@
     "tip": "提示",
     "enable": "启用",
     "disable": "禁用",
-    "beforeCloseTip": "您有未保存的更改，确认要退出吗？"
+    "beforeCloseTip": "您有未保存的更改，确认要退出吗？",
+    "cancel": "取消"
   }
 }

apps/web-antd/src/utils/file/export.tsx

@@ -0,0 +1,76 @@
+import type { loginInfoExport } from '#/api/monitor/logininfo';
+
+import { ref } from 'vue';
+
+import { useRequest } from 'alova/client';
+import { Button } from 'antdv-next';
+import dayjs from 'dayjs';
+
+import { $t } from '#/locales';
+
+import { downloadByData } from './download';
+
+// TODO: 这里的泛型实在难写 且基本都是统一按格式
+export type ExportBlobApi = typeof loginInfoExport;
+
+export interface ExportBlobFuncOptions {
+  fileName: string;
+  data?: any;
+}
+
+export function useBlobExport(api: ExportBlobApi) {
+  const exportLoading = ref(false);
+
+  const { send, abort } = useRequest(api, { immediate: false });
+
+  async function exportBlob(options: ExportBlobFuncOptions) {
+    const { fileName, data } = options;
+
+    const hide = window.message.loading({
+      content: (
+        <div class="flex items-center gap-10">
+          <span>{$t('common.export.loading')}</span>
+          <Button
+            color="default"
+            onClick={() => {
+              abort();
+              hide();
+              window.message.info($t('common.export.canceled'));
+            }}
+            size="small"
+            variant="outlined"
+          >
+            {$t('pages.common.cancel')}
+          </Button>
+        </div>
+      ),
+      duration: 9999,
+    });
+
+    exportLoading.value = true;
+    try {
+      const blob = await send(data ?? {});
+      downloadByData(blob, fileName);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      hide();
+      exportLoading.value = false;
+    }
+  }
+
+  /**
+   * 构建导出文件名  放在这里的好处是可以做国际化文案
+   * @param module 模块名称
+   * @returns 导出文件名
+   */
+  function buildExportFileName(module: string, extension = 'xlsx') {
+    return `${module} ${$t('common.export.title')} - ${dayjs().valueOf()}.${extension}`;
+  }
+
+  return {
+    exportBlob,
+    exportLoading,
+    buildExportFileName,
+  };
+}

apps/web-antd/src/views/system/user/index.vue

@@ -24,7 +24,7 @@ import {
   userStatusChange,
 } from '#/api/system/user';
 import ApiSwitch from '#/components/global/api-switch.vue';
-import { commonDownloadExcel } from '#/utils/file/download';
+import { useBlobExport } from '#/utils/file/export';
 
 import { columns, querySchema } from './data';
 import DeptTree from './dept-tree.vue';
@@ -156,10 +156,14 @@ function handleMultiDelete() {
   });
 }
 
-function handleDownloadExcel() {
+const { exportBlob, exportLoading, buildExportFileName } =
-  commonDownloadExcel(userExport, '用户管理', tableApi.formApi.form.values, {
+  useBlobExport(userExport);
-    fieldMappingTime: formOptions.fieldMappingTime,
+async function handleExport() {
-  });
+  // 构建表单请求参数
+  const formValues = await tableApi.formApi.getValues();
+  // 文件名
+  const fileName = buildExportFileName('用户信息');
+  exportBlob({ data: formValues, fileName });
 }
 
 const [UserInfoModal, userInfoModalApi] = useVbenModal({
@@ -202,7 +206,6 @@ function handleMenuClick(key: string, row: any) {
 }
 
 async function handleChangeStatus(checked: boolean, row: User) {
-  console.log(checked);
   await userStatusChange({
     userId: row.userId,
     status: checked ? EnableStatus.Enable : EnableStatus.Disable,
@@ -224,7 +227,9 @@ async function handleChangeStatus(checked: boolean, row: User) {
           <Space>
             <a-button
               v-access:code="['system:user:export']"
-              @click="handleDownloadExcel"
+              :loading="exportLoading"
+              :disabled="exportLoading"
+              @click="handleExport"
             >
               {{ $t('pages.common.export') }}
             </a-button>