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

- 新增通用的 `useBlobExport` 组合式函数,封装导出逻辑,支持加载状态和取消操作
- 在用户管理页面使用新的导出函数替换原有的 `commonDownloadExcel` 调用
- 添加中英文国际化文案,包括导出标题、加载提示和取消提示
- 为通用页面文案补充“取消”按钮的翻译
This commit is contained in:
dap
2026-01-28 14:47:59 +08:00
parent 157fb22820
commit 703cdf4125
6 changed files with 106 additions and 9 deletions

View File

@@ -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,
};
}