fix: 修复大包文件引入报错

src/views/business/project/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="business_project_wrap">
     <Breadcrumb :items="['menu.business', 'menu.business.project']" />
-    <a-card class="general-card">
+    <a-card class="general-card full_height">
       <template #title>
         <div class="card-title_between">
           <p class="title">{{ t('menu.business.project') }}</p>
@@ -33,7 +33,6 @@
           </div>
         </div>
       </template>
-
       <!-- 使用新的 DataTable 组件 -->
       <DataTable
         :data="renderData"
@@ -45,18 +44,14 @@
         @page-change="onPageChange"
         @page-size-change="onPageSizeChange"
       >
-        <template #type="{ record }">
+        <!-- <template #type="{ record }">
           <a-tag checkable :color="getTypeColor(record.type)">{{
             getTypeText(record.type)
-          }}</a-tag>
+            }}</a-tag>
         </template>
         <template #rate="{ record }">
-          <a-progress
-            :percent="record.rate"
-            color="green"
-            :style="{ width: '100px' }"
-          />
-        </template>
+          <a-progress :percent="record.rate" color="green" :style="{ width: '100px' }" />
+        </template> -->
         <template #operate>
           <a-space>
             <a-button>查看</a-button>
@@ -70,25 +65,19 @@
 </template>
 
 <script lang="ts" setup>
-  import { onMounted } from 'vue';
+  import { ref, onMounted } from 'vue';
   import useLoading from '@/hooks/loading';
   import { useI18n } from 'vue-i18n';
   import type { TableColumnData } from '@arco-design/web-vue';
-  import {
-    ProjectRecord,
-    ProjectType,
-    PROJECT_TYPE,
-    PROJECT_TYPE_COLORS,
-    PROJECT_TYPE_LABELS,
-  } from '@/types/business';
-  // import { getAllProjectList } from '@/api/business';
   import useDataTable from '@/composables/useDataTable';
+  import { ProjectItem } from '@/types/business';
+  import { getProjectList } from '@/api/business';
 
   const { t } = useI18n();
   const { loading } = useLoading(false);
-  // setLoading
 
-  // 使用 DataTable composable
+  const projectList = ref<ProjectItem[]>([]);
+
   const {
     data: renderData,
     columns: projectColumn,
@@ -100,46 +89,13 @@
     setTotal,
     setCurrent,
     setPageSize,
+    setLoading,
   } = useDataTable({
     initialPage: 1,
     initialPageSize: 10,
     pageSizeOptions: [10, 20, 50, 100],
   });
 
-  // 模拟数据
-  const mockData: ProjectRecord[] = [
-    {
-      id: '1',
-      name: '星河商务中心',
-      type: PROJECT_TYPE.COMMERCIAL_COMPLEX,
-      size: '1200m²',
-      kezu: '1000m²',
-      rate: 0.2,
-      count: '90',
-      create_time: '2025-06-24 00:51',
-    },
-    {
-      id: '2',
-      name: '南山科学科学院',
-      type: PROJECT_TYPE.OFFICE_BUILDING,
-      size: '120m²',
-      kezu: '100m²',
-      rate: 0.6,
-      count: '10',
-      create_time: '2025-06-24 00:58',
-    },
-    {
-      id: '3',
-      name: '前海科学科学院',
-      type: PROJECT_TYPE.INDUSTRIAL_PARK,
-      size: '1520m²',
-      kezu: '1500m²',
-      rate: 0.91,
-      count: '120',
-      create_time: '2025-06-24 01:16',
-    },
-  ];
-
   // 列配置
   const columns: TableColumnData[] = [
     { title: '项目信息', dataIndex: 'name', key: 'name' },
@@ -152,42 +108,32 @@
     { title: '操作', key: 'operate', slotName: 'operate', width: 200 },
   ];
 
-  // 初始化数据
-  onMounted(() => {
-    setColumns(columns);
-    setData(mockData);
-    setTotal(mockData.length);
-  });
-
-  const getTypeColor = (type: ProjectType): string => {
-    return PROJECT_TYPE_COLORS[type] || 'default';
-  };
-
-  const getTypeText = (type: ProjectType): string => {
-    return PROJECT_TYPE_LABELS[type] || '未知';
+  const getProjectListData = async () => {
+    const params = {
+      page: current.value,
+      page_size: pageSize.value,
+    };
+    setLoading(true);
+    const { code, data } = await getProjectList(params);
+    if (code === 200 && data) {
+      const { projectsList, page } = data;
+      projectList.value = Array.isArray(projectsList) ? projectsList : [];
+      setTotal(page?.total ? page.total : 0);
+    }
+    setLoading(false);
   };
 
   // 分页事件处理
   const onPageChange = (page: number) => {
     setCurrent(page);
-    // TODO: 这里应该调用API获取对应页码的数据
+    current.value = page;
   };
-
-  const onPageSizeChange = (newPageSize: number) => {
-    setPageSize(newPageSize);
-    // TODO: 这里应该调用API获取对应页码的数据
+  const onPageSizeChange = (size: number) => {
+    setPageSize(size);
+    pageSize.value = size;
   };
-
-  // const getAllProjectListData = async () => {
-  //   setLoading(true);
-  //   try {
-  //     await getAllProjectList();
-  //     // 处理数据
-  //   } catch (err) {
-  //     // you can report use errorHandler or other
-  //   } finally {
-  //     setLoading(false);
-  //   }
-  // };
-  // getAllProjectListData()
+  onMounted(() => {
+    setColumns(columns);
+    getProjectListData();
+  });
 </script>