first commit

front/src/components/common/export-button.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { downloadExcel } from '@/utils/download';
+
+defineOptions({ name: 'ExportButton' });
+
+interface Props {
+  /** 导出接口地址 */
+  exportApi: string;
+  /** 导出参数 */
+  exportParams?: Record<string, any>;
+  /** 按钮文本 */
+  text?: string;
+  /** 默认文件名 */
+  filename?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  exportParams: () => ({}),
+  text: '导出',
+  filename: '导出数据.xlsx'
+});
+
+const loading = ref(false);
+
+async function handleExport() {
+  if (loading.value) return;
+
+  loading.value = true;
+  try {
+    await downloadExcel(props.exportApi, props.exportParams, props.filename);
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <NButton size="small" ghost type="success" :loading="loading" @click="handleExport">
+    <template #icon>
+      <SvgIcon icon="si:file-download-fill" />
+    </template>
+    {{ props.text }}
+  </NButton>
+</template>
+
+<style scoped></style>