From bd348e7aeb652554db647a639a81af4e651be966 Mon Sep 17 00:00:00 2001
From: TongTongStudio <tongtongstudios@gmail.com>
Date: Thu, 30 Jul 2026 18:55:57 +0800
Subject: [PATCH] =?UTF-8?q?perf(DeviceSn):=20=E6=87=92=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=20exceljs=20=E5=B9=B6=E4=BF=AE=E6=AD=A3=E6=9D=83=E9=99=90?=
 =?UTF-8?q?=E6=A0=87=E8=AF=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将 exceljs 改为动态导入以避免打入主包
- 修正 add、search、edit 按钮的 perm 值
- 修正 PageResult 类型的导入路径
---
 src/components/DeviceSn/DevicePageContent.vue | 32 ++++++++++---------
 src/components/DeviceSn/types.ts              |  2 +-
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/components/DeviceSn/DevicePageContent.vue b/src/components/DeviceSn/DevicePageContent.vue
index 31be5bf7..27cec77b 100644
--- a/src/components/DeviceSn/DevicePageContent.vue
+++ b/src/components/DeviceSn/DevicePageContent.vue
@@ -366,7 +366,7 @@ import {
   type UploadUserFile,
   type TableInstance,
 } from "element-plus";
-import ExcelJS from "exceljs";
+import type { Column, Workbook } from "exceljs";
 import { reactive, ref, computed } from "vue";
 import type { IContentConfig, IObject, IOperateData } from "./types";
 import type { IToolsButton } from "./types";
@@ -387,17 +387,17 @@ const emit = defineEmits<{
 // 表格工具栏按钮配置
 const config = computed(() => props.contentConfig);
 const buttonConfig = reactive<Record<string, IObject>>({
-  add: { text: "新增", attrs: { icon: "plus", type: "success" }, perm: "add" },
+  add: { text: "新增", attrs: { icon: "plus", type: "success" }, perm: "create" },
   delete: { text: "删除", attrs: { icon: "delete", type: "danger" }, perm: "delete" },
   import: { text: "导入", attrs: { icon: "upload", type: "" }, perm: "import" },
   export: { text: "导出", attrs: { icon: "download", type: "" }, perm: "export" },
   refresh: { text: "刷新", attrs: { icon: "refresh", type: "" }, perm: "*:*:*" },
   filter: { text: "筛选列", attrs: { icon: "operation", type: "" }, perm: "*:*:*" },
-  search: { text: "搜索", attrs: { icon: "search", type: "" }, perm: "search" },
+  search: { text: "搜索", attrs: { icon: "search", type: "" }, perm: "list" },
   imports: { text: "批量导入", attrs: { icon: "upload", type: "" }, perm: "imports" },
   exports: { text: "批量导出", attrs: { icon: "download", type: "" }, perm: "exports" },
   view: { text: "查看", attrs: { icon: "view", type: "primary" }, perm: "view" },
-  edit: { text: "编辑", attrs: { icon: "edit", type: "primary" }, perm: "edit" },
+  edit: { text: "编辑", attrs: { icon: "edit", type: "primary" }, perm: "update" },
 });
 
 // 主键
@@ -613,15 +613,21 @@ function handleCloseExportsModal() {
     exportsFormRef.value?.clearValidate();
   });
 }
+// 创建 Workbook 实例（懒加载 exceljs，避免打入主包）
+async function createWorkbook(): Promise<Workbook> {
+  const ExcelJS = await import("exceljs");
+  return new ExcelJS.Workbook();
+}
+
 // 导出
-function handleExports() {
+async function handleExports() {
   const filename = exportsFormData.filename
     ? exportsFormData.filename
     : props.contentConfig.permPrefix || "export";
   const sheetname = exportsFormData.sheetname ? exportsFormData.sheetname : "sheet";
-  const workbook = new ExcelJS.Workbook();
+  const workbook = await createWorkbook();
   const worksheet = workbook.addWorksheet(sheetname);
-  const columns: Partial<ExcelJS.Column>[] = [];
+  const columns: Partial<Column>[] = [];
   cols.value.forEach((col) => {
     if (col.label && col.prop && exportsFormData.fields.includes(col.prop)) {
       columns.push({ header: col.label, key: col.prop });
@@ -731,7 +737,7 @@ function handleImport() {
   });
 }
 // 导入
-function handleImports() {
+async function handleImports() {
   const importsAction = props.contentConfig.importsAction;
   if (importsAction === undefined) {
     ElMessage.error("未配置importsAction");
@@ -739,8 +745,8 @@ function handleImports() {
   }
   // 获取选择的文件
   const file = importFormData.files[0].raw as File;
-  // 创建Workbook实例
-  const workbook = new ExcelJS.Workbook();
+  // 创建 Workbook 实例（懒加载 exceljs）
+  const workbook = await createWorkbook();
   // 使用FileReader对象来读取文件内容
   const fileReader = new FileReader();
   // 二进制字符串的形式加载文件
@@ -841,11 +847,7 @@ function handleOperate(data: IOperateData) {
 }
 
 // 属性修改
-function handleModify(
-  field: string,
-  value: boolean | string | number,
-  row: Record<string, IObject>
-) {
+function handleModify(field: string, value: boolean | string | number, row: Record<string, any>) {
   if (props.contentConfig.modifyAction) {
     props.contentConfig.modifyAction({
       [pk]: row[pk],
diff --git a/src/components/DeviceSn/types.ts b/src/components/DeviceSn/types.ts
index d0043173..24712f80 100644
--- a/src/components/DeviceSn/types.ts
+++ b/src/components/DeviceSn/types.ts
@@ -5,7 +5,7 @@ import type PageModal from "./DevicePageModal.vue";
 import type PageSearch from "./DevicePageSearch.vue";
 import type SnDetail from "./DeviceSnDetail.vue";
 import type { CSSProperties } from "vue";
-import type { PageResult } from "@/types/api/common";
+import type { PageResult } from "@/api/common";
 
 export type PageSearchInstance = InstanceType<typeof PageSearch>;
 export type PageContentInstance = InstanceType<typeof PageContent>;