店铺信息卡片样式修改,useResponse增加loading; 平台详情页增加总览卡片和基础表格; vxe-table版本升级, vite配置对应的按需导入;

package-lock.json

@@ -56,7 +56,7 @@
 				"vue-grid-layout": "^3.0.0-beta1",
 				"vue-i18n": "^9.2.2",
 				"vue-router": "^4.1.6",
-				"vxe-table": "^4.4.1",
+				"vxe-table": "^4.7.81",
 				"xe-utils": "^3.5.7"
 			},
 			"devDependencies": {
@@ -75,6 +75,7 @@
 				"unplugin-auto-import": "^0.18.3",
 				"unplugin-vue-components": "^0.27.4",
 				"vite": "^4.5.3",
+				"vite-plugin-lazy-import": "^1.0.7",
 				"vite-plugin-vue-setup-extend": "^0.4.0",
 				"vue-eslint-parser": "^9.1.0"
 			},
@@ -2524,6 +2525,230 @@
 				}
 			}
 		},
+		"node_modules/@rollup/rollup-android-arm-eabi": {
+			"version": "4.22.4",
+			"resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz",
+			"integrity": "sha512-Fxamp4aEZnfPOcGA8KSNEohV8hX7zVHOemC8jVBoBUHu5zpJK/Eu3uJwt6BMgy9fkvzxDaurgj96F/NiLukF2w==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			]
+		},
+		"node_modules/@rollup/rollup-android-arm64": {
+			"version": "4.22.4",
+			"resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.4.tgz",
+			"integrity": "sha512-VXoK5UMrgECLYaMuGuVTOx5kcuap1Jm8g/M83RnCHBKOqvPPmROFJGQaZhGccnsFtfXQ3XYa4/jMCJvZnbJBdA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			]
+		},
+		"node_modules/@rollup/rollup-darwin-arm64": {
+			"version": "4.22.4",
+			"resolved": "https://registry.npmmirror.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.4.tgz",
+			"integrity": "sha512-xMM9ORBqu81jyMKCDP+SZDhnX2QEVQzTcC6G18KlTQEzWK8r/oNZtKuZaCcHhnsa6fEeOBionoyl5JsAbE/36Q==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			]
+		},
+		"node_modules/@rollup/rollup-darwin-x64": {
+			"version": "4.22.4",
+			"resolved": "https://registry.npmmirror.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.4.tgz",
+			"integrity": "sha512-aJJyYKQwbHuhTUrjWjxEvGnNNBCnmpHDvrb8JFDbeSH3m2XdHcxDd3jthAzvmoI8w/kSjd2y0udT+4okADsZIw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+			"version": "4.22.4",
+			"resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.4.tgz",
+			"integrity": "sha512-j63YtCIRAzbO+gC2L9dWXRh5BFetsv0j0va0Wi9epXDgU/XUi5dJKo4USTttVyK7fGw2nPWK0PbAvyliz50SCQ==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-arm-musleabihf": {
+			"version": "4.22.4",
+			"resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.4.tgz",
+			"integrity": "sha512-dJnWUgwWBX1YBRsuKKMOlXCzh2Wu1mlHzv20TpqEsfdZLb3WoJW2kIEsGwLkroYf24IrPAvOT/ZQ2OYMV6vlrg==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-arm64-gnu": {
+			"version": "4.22.4",
+			"resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.4.tgz",
+			"integrity": "sha512-AdPRoNi3NKVLolCN/Sp4F4N1d98c4SBnHMKoLuiG6RXgoZ4sllseuGioszumnPGmPM2O7qaAX/IJdeDU8f26Aw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-arm64-musl": {
+			"version": "4.22.4",
+			"resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.4.tgz",
+			"integrity": "sha512-Gl0AxBtDg8uoAn5CCqQDMqAx22Wx22pjDOjBdmG0VIWX3qUBHzYmOKh8KXHL4UpogfJ14G4wk16EQogF+v8hmA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+			"version": "4.22.4",
+			"resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.4.tgz",
+			"integrity": "sha512-3aVCK9xfWW1oGQpTsYJJPF6bfpWfhbRnhdlyhak2ZiyFLDaayz0EP5j9V1RVLAAxlmWKTDfS9wyRyY3hvhPoOg==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-riscv64-gnu": {
+			"version": "4.22.4",
+			"resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.4.tgz",
+			"integrity": "sha512-ePYIir6VYnhgv2C5Xe9u+ico4t8sZWXschR6fMgoPUK31yQu7hTEJb7bCqivHECwIClJfKgE7zYsh1qTP3WHUA==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-s390x-gnu": {
+			"version": "4.22.4",
+			"resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.4.tgz",
+			"integrity": "sha512-GqFJ9wLlbB9daxhVlrTe61vJtEY99/xB3C8e4ULVsVfflcpmR6c8UZXjtkMA6FhNONhj2eA5Tk9uAVw5orEs4Q==",
+			"cpu": [
+				"s390x"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-x64-gnu": {
+			"version": "4.22.4",
+			"resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.4.tgz",
+			"integrity": "sha512-87v0ol2sH9GE3cLQLNEy0K/R0pz1nvg76o8M5nhMR0+Q+BBGLnb35P0fVz4CQxHYXaAOhE8HhlkaZfsdUOlHwg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-x64-musl": {
+			"version": "4.22.4",
+			"resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.4.tgz",
+			"integrity": "sha512-UV6FZMUgePDZrFjrNGIWzDo/vABebuXBhJEqrHxrGiU6HikPy0Z3LfdtciIttEUQfuDdCn8fqh7wiFJjCNwO+g==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-win32-arm64-msvc": {
+			"version": "4.22.4",
+			"resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.4.tgz",
+			"integrity": "sha512-BjI+NVVEGAXjGWYHz/vv0pBqfGoUH0IGZ0cICTn7kB9PyjrATSkX+8WkguNjWoj2qSr1im/+tTGRaY+4/PdcQw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
+		"node_modules/@rollup/rollup-win32-ia32-msvc": {
+			"version": "4.22.4",
+			"resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.4.tgz",
+			"integrity": "sha512-SiWG/1TuUdPvYmzmYnmd3IEifzR61Tragkbx9D3+R8mzQqDBz8v+BvZNDlkiTtI9T15KYZhP0ehn3Dld4n9J5g==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
+		"node_modules/@rollup/rollup-win32-x64-msvc": {
+			"version": "4.22.4",
+			"resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.4.tgz",
+			"integrity": "sha512-j8pPKp53/lq9lMXN57S8cFz0MynJk8OWNuUnXct/9KCpKU7DgU3bYMJhwWmcqC0UU29p8Lr0/7KEVcaM6bf47Q==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
 		"node_modules/@smithy/abort-controller": {
 			"version": "3.1.2",
 			"resolved": "https://registry.npmmirror.com/@smithy/abort-controller/-/abort-controller-3.1.2.tgz",
@@ -3863,6 +4088,16 @@
 				}
 			}
 		},
+		"node_modules/@vxe-ui/core": {
+			"version": "4.0.12",
+			"resolved": "https://registry.npmmirror.com/@vxe-ui/core/-/core-4.0.12.tgz",
+			"integrity": "sha512-ft8f874eQSv4N9+oulFKeg8APgd8RMHeFeUUUTNckIRJ/cNi0dbR0Fe2+ZZpRl3BwRtbE2hHb2FKWmL2oyZkfw==",
+			"license": "MIT",
+			"dependencies": {
+				"dom-zindex": "^1.0.6",
+				"xe-utils": "^3.5.30"
+			}
+		},
 		"node_modules/@wangeditor/basic-modules": {
 			"version": "1.1.7",
 			"resolved": "https://registry.npmmirror.com/@wangeditor/basic-modules/-/basic-modules-1.1.7.tgz",
@@ -5222,6 +5457,13 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/es-module-lexer": {
+			"version": "1.5.4",
+			"resolved": "https://registry.npmmirror.com/es-module-lexer/-/es-module-lexer-1.5.4.tgz",
+			"integrity": "sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/es5-ext": {
 			"version": "0.10.64",
 			"resolved": "https://registry.npmmirror.com/es5-ext/-/es5-ext-0.10.64.tgz",
@@ -9482,6 +9724,55 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/vite-plugin-lazy-import": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmmirror.com/vite-plugin-lazy-import/-/vite-plugin-lazy-import-1.0.7.tgz",
+			"integrity": "sha512-mE6oAObOb4wqso4AoUGi9cLjdR+4vay1RCaKJvziBuFPlziZl7J0aw2hsqRTokLVRx3bli0a0VyjMOwsNDv58A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@rollup/pluginutils": "^5.1.0",
+				"es-module-lexer": "^1.5.3",
+				"rollup": "^4.18.0",
+				"xe-utils": "^3.5.26"
+			}
+		},
+		"node_modules/vite-plugin-lazy-import/node_modules/rollup": {
+			"version": "4.22.4",
+			"resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.22.4.tgz",
+			"integrity": "sha512-vD8HJ5raRcWOyymsR6Z3o6+RzfEPCnVLMFJ6vRslO1jt4LO6dUo5Qnpg7y4RkZFM2DMe3WUirkI5c16onjrc6A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/estree": "1.0.5"
+			},
+			"bin": {
+				"rollup": "dist/bin/rollup"
+			},
+			"engines": {
+				"node": ">=18.0.0",
+				"npm": ">=8.0.0"
+			},
+			"optionalDependencies": {
+				"@rollup/rollup-android-arm-eabi": "4.22.4",
+				"@rollup/rollup-android-arm64": "4.22.4",
+				"@rollup/rollup-darwin-arm64": "4.22.4",
+				"@rollup/rollup-darwin-x64": "4.22.4",
+				"@rollup/rollup-linux-arm-gnueabihf": "4.22.4",
+				"@rollup/rollup-linux-arm-musleabihf": "4.22.4",
+				"@rollup/rollup-linux-arm64-gnu": "4.22.4",
+				"@rollup/rollup-linux-arm64-musl": "4.22.4",
+				"@rollup/rollup-linux-powerpc64le-gnu": "4.22.4",
+				"@rollup/rollup-linux-riscv64-gnu": "4.22.4",
+				"@rollup/rollup-linux-s390x-gnu": "4.22.4",
+				"@rollup/rollup-linux-x64-gnu": "4.22.4",
+				"@rollup/rollup-linux-x64-musl": "4.22.4",
+				"@rollup/rollup-win32-arm64-msvc": "4.22.4",
+				"@rollup/rollup-win32-ia32-msvc": "4.22.4",
+				"@rollup/rollup-win32-x64-msvc": "4.22.4",
+				"fsevents": "~2.3.2"
+			}
+		},
 		"node_modules/vite-plugin-vue-setup-extend": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmmirror.com/vite-plugin-vue-setup-extend/-/vite-plugin-vue-setup-extend-0.4.0.tgz",
@@ -9680,17 +9971,22 @@
 			"integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==",
 			"license": "MIT"
 		},
+		"node_modules/vxe-pc-ui": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmmirror.com/vxe-pc-ui/-/vxe-pc-ui-4.2.0.tgz",
+			"integrity": "sha512-iBgb9823AkU2r4UcFFT42V3kXFs9fHP03U+v4n3FaUXuhdQKtaEW8JW1ICN/TCjUzcz5Oo7I9s8JZnQWq0Lo5A==",
+			"license": "MIT",
+			"dependencies": {
+				"@vxe-ui/core": "^4.0.12"
+			}
+		},
 		"node_modules/vxe-table": {
-			"version": "4.6.19",
-			"resolved": "https://registry.npmmirror.com/vxe-table/-/vxe-table-4.6.19.tgz",
-			"integrity": "sha512-vUwcqbK0CBAWlEssAvpeWgxZLx4C9bWM94EwTZm2RE6GQQ1SSkjcdwaSqHO576LLZROWomG/7DQ8yAXB5O5CMw==",
+			"version": "4.7.81",
+			"resolved": "https://registry.npmmirror.com/vxe-table/-/vxe-table-4.7.81.tgz",
+			"integrity": "sha512-RRBRa9gJzz+Ui8mtYDy8Qh+OTrEUiu2FXXveWqXqUkdmVqdqZNooizupAForNffztKJf8PfhD+JPVLSTWw/r2w==",
 			"license": "MIT",
 			"dependencies": {
-				"dom-zindex": "^1.0.6",
-				"xe-utils": "^3.5.30"
-			},
-			"peerDependencies": {
-				"vue": "^3.2.28"
+				"vxe-pc-ui": "^4.2.0"
 			}
 		},
 		"node_modules/webpack-virtual-modules": {

package.json

@@ -57,7 +57,7 @@
 		"vue-grid-layout": "^3.0.0-beta1",
 		"vue-i18n": "^9.2.2",
 		"vue-router": "^4.1.6",
-		"vxe-table": "^4.4.1",
+		"vxe-table": "^4.7.81",
 		"xe-utils": "^3.5.7"
 	},
 	"devDependencies": {
@@ -76,6 +76,7 @@
 		"unplugin-auto-import": "^0.18.3",
 		"unplugin-vue-components": "^0.27.4",
 		"vite": "^4.5.3",
+		"vite-plugin-lazy-import": "^1.0.7",
 		"vite-plugin-vue-setup-extend": "^0.4.0",
 		"vue-eslint-parser": "^9.1.0"
 	},

src/utils/useResponse.ts

@@ -1,7 +1,11 @@
-export async function useResponse(parameter: any = {}, requestApi: any) {
+export async function useResponse(parameter: any = {}, requestApi: any, loading?: Ref<boolean>) {
+  const loadingRef = loading ?? ref(false);
   try {
+    loadingRef.value = true;
     return await requestApi(parameter);
   } catch (error) {
     console.log('Error==>', error);
+  } finally {
+    loadingRef.value = false;
   }
 }

src/views/shop-information/components/InfoCard.vue

@@ -1,19 +1,17 @@
 <script lang="ts" setup>
 /**
  * @Name: InfoCard.vue
- * @Description:
+ * @Description: 店铺信息卡片
  * @Author: Cheney
  */
 
 const router = useRouter();
 const cardData = inject<Ref>('cardData', ref({}));
 
-function handleJump(item: any) {
-  console.log('router=> ', router);
-
+function handleNavigate(item: any) {
   router.push({
     path: '/shop/platform/detail',
-    query: { platform: item.platform } // 将 platform 作为查询参数传递
+    query: { platform: item.platform }  // 将 platform 作为查询参数传递
   });
 }
 </script>
@@ -21,11 +19,11 @@ function handleJump(item: any) {
 <template>
   <el-row :gutter="10">
     <el-col v-for="(item, index) in cardData" :key="index" :lg="6" :md="6" :sm="8" :xl="4" :xs="12" class="mt-2.5">
-      <el-card>
+      <el-card shadow="hover">
         <el-descriptions>
           <template #title>
             <el-link :underline="false" style="font-size: 1.25rem; font-weight: 500" type="primary"
-                     @click="handleJump(item)">
+                     @click="handleNavigate(item)">
               {{ item.platform }}
             </el-link>
           </template>
@@ -36,8 +34,7 @@ function handleJump(item: any) {
           </el-descriptions-item>
           <el-descriptions-item label="公司">
             <span class="font-bold">
-              
-            {{ item.countCompany }}
+              {{ item.countCompany }}
             </span>
           </el-descriptions-item>
         </el-descriptions>

src/views/shop-information/components/PlatformDetail.vue

@@ -6,11 +6,28 @@
 
 import { useResponse } from '/@/utils/useResponse';
 import * as api from '../api';
-
+import { Picture as IconPicture } from '@element-plus/icons-vue';
+// import img from '/src/assets/img/headerImage.png'
 
 const route = useRoute();
 const platform = route.query.platform;
 
+const gridOptions = reactive<any>({
+  border: 'inner',
+  columns: [
+    { type: 'seq', width: 50, align: 'center' },
+    { field: 'name', title: 'Name' },
+    { field: 'sex', title: 'Sex' },
+    { field: 'age', title: 'Age' }
+  ],
+  data: [
+    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
+    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
+    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
+    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
+  ]
+})
+
 onBeforeMount(() => {
   fetchPlatformDetail();
 });
@@ -23,8 +40,48 @@ async function fetchPlatformDetail() {
 
 <template>
   <div class="mb-2">
-    <el-card class="m-2 h-full" shadow="never" style="border: none">
-      <el-card class="w-fit">{{ platform }} 的详细信息</el-card>
+    <el-card class="m-2 h-full" shadow="never" style="border: none;">
+      <el-card body-class="flex items-center" class="w-1/4">
+        <!-- 设置父容器的 display 为 flex，并使用 items-center 使图片和文本对齐 -->
+        <el-image
+            class="mr-4"
+            style="height: 100px; width: 100px; object-fit: cover;"
+        >
+          <template #error>
+            <div class="mr-3.5 flex items-center justify-center text-5xl" style="height: 100px; width: 100px; background-color: #f5f5f5;">
+              <el-icon>
+                <icon-picture/>
+              </el-icon>
+            </div>
+          </template>
+        </el-image>
+        <div>
+          <div class="font-semibold">店铺编号/名称:
+            <span class="font-medium italic" style="color: #64748b">
+              123456789
+            </span>
+          </div>
+          <div class="font-semibold">所属公司:
+            <span class="font-medium italic" style="color: #64748b">
+              123456789
+            </span>
+          </div>
+          <div class="font-semibold">平台数:
+            <span class="font-medium italic" style="color: #64748b">
+              123456789
+            </span>
+          </div>
+          <div class="font-semibold">电脑数:
+            <span class="font-medium italic" style="color: #64748b">
+              123456789
+            </span>
+          </div>
+        </div>
+      </el-card>
+      
+      <el-card class="mt-5">
+        <vxe-grid v-bind="gridOptions"></vxe-grid>
+      </el-card>
     </el-card>
   </div>
 

src/views/shop-information/index.vue

@@ -13,19 +13,21 @@ import { useResponse } from '/@/utils/useResponse';
 const cardData = ref();
 provide('cardData', cardData);
 
+const loading = ref();
+
 onBeforeMount(() => {
   initData();
 });
 
 async function initData() {
-  const res = await useResponse({}, api.getCardData);
+  const res = await useResponse({}, api.getCardData, loading);
   cardData.value = res.data;
 }
 </script>
 
 <template>
   <div class="mb-2.5">
-    <el-card class="m-2 h-full" shadow="never" style="border: none;">
+    <el-card v-loading="loading" class="m-2 h-full" shadow="never" style="border: none;">
       <InfoCard></InfoCard>
     </el-card>
   </div>

vite.config.ts

@@ -6,6 +6,8 @@ import compression from 'vite-plugin-compression';
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import { lazyImport, VxeResolver } from 'vite-plugin-lazy-import'
+
 
 const pathResolve = (dir: string) => {
   return resolve(__dirname, '.', dir);
@@ -49,6 +51,16 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
       Components({
         // resolvers: [ElementPlusResolver()],
       }),
+      lazyImport({
+        resolvers: [
+          VxeResolver({
+            libraryName: 'vxe-table'
+          }),
+          VxeResolver({
+            libraryName: 'vxe-pc-ui'
+          })
+        ]
+      })
     ],
     root: process.cwd(),
     resolve: { alias },