签入版本

RXThinkCMF_Laravel13_NaiveVue/zh/frontend/excel-components.md

@@ -8,7 +8,7 @@
 
 ```vue
 <template>
-  <el-button @click="handleImport">导入</el-button>
+  <n-button @click="handleImport">导入</n-button>
   <ImportExcel @success="onImportSuccess" />
 </template>
 
@@ -24,38 +24,57 @@ const onImportSuccess = (data) => {
 
 :::tip 前端解析 vs 后端导入
 - **前端解析（本组件）**：`xlsx` 库本地解析，适合导入前预览、无业务校验的场景；
-- **后端导入（推荐）**：`el-upload` 直传 `/api/{module}/import`，由 Service 逐行 `add()`（字典反查、唯一校验、事务隔离、错误行明细），见 [7.4 数据导入导出](/zh/tools/excel.html)。
+- **后端导入（推荐）**：`fileUpload` 导入弹窗（内部 `n-upload` 直传 `/api/{module}/import`，自动携带 Bearer 头），由 Service 逐行 `add()`（字典反查、唯一校验、事务隔离、错误行明细），见 [7.4 数据导入导出](/zh/tools/excel.html)。
 :::
 
 ### 后端导入对接
 
 ```vue
 <template>
-  <el-upload
-    :action="'/api/example/import'"
-    :headers="{ Authorization: `Bearer ${token}` }"
-    :on-success="handleImportSuccess"
-    accept=".xls,.xlsx"
-  >
-    <el-button type="primary">导入</el-button>
-  </el-upload>
+  <!-- 导入按钮 -->
+  <n-button @click="importVisible = true" v-perm="['sys:example:import']">导入</n-button>
+
+  <!-- 导入弹窗，templateCode 对应后端模板编码（来自项目实际的 example 模块） -->
+  <fileUpload
+    v-if="importVisible"
+    v-model:visible="importVisible"
+    api="/api/example/import"
+    templateCode="example_import"
+    dialogTitle="导入案例演示"
+    @success="reloadTable()"
+  />
 </template>
 
 <script setup>
-const handleImportSuccess = (response) => {
-  if (response.code === 0) {
-    const { count, errors } = response.data;
-    if (errors.length === 0) {
-      ElMessage.success(`成功导入 ${count} 条数据`);
-    } else {
-      ElMessage.warning(`成功 ${count} 条，失败 ${errors.length} 条`);
-      // errors: [{ row: 3, name: '...', reason: '...' }]
-    }
-  }
-};
+import { ref } from 'vue';
+import fileUpload from '@/components/importFile/index.vue';
+
+const importVisible = ref(false);
 </script>
 ```
 
+`fileUpload` 组件（`ui/src/components/importFile/index.vue`）核心为 NaiveUI 上传弹窗：
+
+```vue
+<n-modal v-model:show="props.visible" preset="dialog">
+  <n-upload
+    :action="props.api"
+    :headers="uploadHeaders"
+    name="file"
+    :max="1"
+    v-model:file-list="fileList"
+    @before-upload="beforeUpload"
+  >
+    <n-upload-dragger>
+      <!-- 点击或将文件拖拽到这里上传 -->
+    </n-upload-dragger>
+  </n-upload>
+  <n-button quaternary type="info" @click="handleDownload">下载模板</n-button>
+</n-modal>
+```
+
+导入结果由组件统一反馈（`useMessage` 提示成功条数 / 失败明细，`errors: [{ row, name, reason }]`），成功后触发 `@success` 回调刷新列表。
+
 ## 导出功能（前端导出）
 
 ```typescript