perf: lighten dashboard runtime build

web/apps/web-ele/package.json

@@ -50,7 +50,6 @@
     "cron-parser": "^4.9.0",
     "dayjs": "catalog:",
     "element-plus": "catalog:",
-    "grid-layout-plus": "1.1.1",
     "pinia": "catalog:",
     "vue": "catalog:",
     "vue-router": "catalog:"

web/apps/web-ele/src/components/dashboard-design/DashboardRenderer.vue

@@ -6,7 +6,6 @@ import { computed, onMounted, ref, watch } from 'vue';
 import { $t } from '@vben/locales';
 
 import { ElEmpty } from 'element-plus';
-import { GridItem, GridLayout } from 'grid-layout-plus';
 
 import WidgetRenderer from './components/WidgetRenderer.vue';
 
@@ -39,12 +38,15 @@ watch(() => props.config, parseConfig);
 
 const layout = computed(() => {
   if (!dashboardConfig.value) return [];
+  const columns = dashboardConfig.value.columns || 12;
   return dashboardConfig.value.widgets.map((w) => ({
+    ...w,
+    columnEnd: `span ${Math.min(w.w, columns)}`,
+    columnStart: Math.max(1, w.x + 1),
     i: w.i,
-    x: w.x,
+    minHeight: `${w.h * dashboardConfig.value!.rowHeight}px`,
-    y: w.y,
+    rowEnd: `span ${w.h}`,
-    w: w.w,
+    rowStart: Math.max(1, w.y + 1),
-    h: w.h,
   }));
 });
 
@@ -70,6 +72,20 @@ const outerMarginStyle = computed(() => {
     width: `calc(100% + ${margin[0] * 2}px)`,
   };
 });
+
+const gridStyle = computed(() => {
+  const config = dashboardConfig.value;
+  if (!config) return {};
+  const margin = config.margin || [12, 12];
+  return {
+    ...outerMarginStyle.value,
+    display: 'grid',
+    gap: `${margin[1]}px ${margin[0]}px`,
+    gridAutoFlow: 'dense',
+    gridAutoRows: `${config.rowHeight}px`,
+    gridTemplateColumns: `repeat(${config.columns || 12}, minmax(0, 1fr))`,
+  };
+});
 </script>
 
 <template>
@@ -82,35 +98,27 @@ const outerMarginStyle = computed(() => {
     "
   >
     <div v-if="dashboardConfig && layout.length > 0">
-      <GridLayout
+      <div :style="gridStyle">
-        :layout="layout"
+        <div
-        :col-num="dashboardConfig.columns"
+          v-for="item in layout"
-        :row-height="dashboardConfig.rowHeight"
+          :key="item.i"
-        :margin="dashboardConfig.margin"
+          class="dashboard-widget"
-        :is-draggable="false"
+          :style="{
-        :is-resizable="false"
+            gridColumnEnd: item.columnEnd,
-        :vertical-compact="true"
+            gridColumnStart: item.columnStart,
-        :use-css-transforms="true"
+            gridRowEnd: item.rowEnd,
-        :style="outerMarginStyle"
+            gridRowStart: item.rowStart,
-      >
+            minHeight: item.minHeight,
-      <GridItem
+          }"
-        v-for="item in layout"
+        >
-        :key="item.i"
+          <WidgetRenderer
-        :i="item.i"
+            v-if="getWidget(item.i)"
-        :x="item.x"
+            :widget="getWidget(item.i)!"
-        :y="item.y"
+            :is-design-mode="false"
-        :w="item.w"
+            :animation-delay="getAnimationDelay(item.i)"
-        :h="item.h"
+          />
-        class="dashboard-widget"
+        </div>
-      >
+      </div>
-        <WidgetRenderer
-          v-if="getWidget(item.i)"
-          :widget="getWidget(item.i)!"
-          :is-design-mode="false"
-          :animation-delay="getAnimationDelay(item.i)"
-        />
-      </GridItem>
-      </GridLayout>
     </div>
 
     <ElEmpty

web/apps/web-ele/vite.config.mts

@@ -22,6 +22,7 @@ export default defineConfig(async (config) => {
     application: {
       injectMetadata: false,
       license: false,
+      vxeTableLazyImport: false,
     },
     vite: {
       build: {

web/pnpm-lock.yaml

@@ -577,10 +577,10 @@ importers:
         version: link:scripts/vsh
       '@vitejs/plugin-vue':
         specifier: 'catalog:'
-        version: 6.0.2(vite@7.2.6(@types/node@22.19.1)(jiti@1.21.7)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.25(typescript@5.9.3))
+        version: 6.0.2(vite@7.2.6(@types/node@22.19.1)(jiti@2.6.1)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.25(typescript@5.9.3))
       '@vitejs/plugin-vue-jsx':
         specifier: 'catalog:'
-        version: 5.1.2(vite@7.2.6(@types/node@22.19.1)(jiti@1.21.7)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.25(typescript@5.9.3))
+        version: 5.1.2(vite@7.2.6(@types/node@22.19.1)(jiti@2.6.1)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.25(typescript@5.9.3))
       '@vue/test-utils':
         specifier: 'catalog:'
         version: 2.4.6
@@ -622,10 +622,10 @@ importers:
         version: 3.6.1(sass@1.94.2)(typescript@5.9.3)(vue-tsc@2.2.10(typescript@5.9.3))(vue@3.5.25(typescript@5.9.3))
       vite:
         specifier: 'catalog:'
-        version: 7.2.6(@types/node@22.19.1)(jiti@1.21.7)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2)
+        version: 7.2.6(@types/node@22.19.1)(jiti@2.6.1)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2)
       vitest:
         specifier: 'catalog:'
-        version: 3.2.4(@types/debug@4.1.13)(@types/node@22.19.1)(happy-dom@17.6.3)(jiti@1.21.7)(jsdom@26.1.0(canvas@3.2.2))(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2)
+        version: 3.2.4(@types/debug@4.1.13)(@types/node@22.19.1)(happy-dom@17.6.3)(jiti@2.6.1)(jsdom@26.1.0(canvas@3.2.2))(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2)
       vue:
         specifier: ^3.5.17
         version: 3.5.25(typescript@5.9.3)
@@ -707,9 +707,6 @@ importers:
       element-plus:
         specifier: 'catalog:'
         version: 2.11.9(vue@3.5.25(typescript@5.9.3))
-      grid-layout-plus:
-        specifier: 1.1.1
-        version: 1.1.1(vue@3.5.25(typescript@5.9.3))
       pinia:
         specifier: ^3.0.3
         version: 3.0.4(typescript@5.9.3)(vue@3.5.25(typescript@5.9.3))
@@ -3488,9 +3485,6 @@ packages:
       '@types/node':
         optional: true
 
-  '@interactjs/types@1.10.27':
-    resolution: {integrity: sha512-BUdv0cvs4H5ODuwft2Xp4eL8Vmi3LcihK42z0Ft/FbVJZoRioBsxH+LlsBdK4tAie7PqlKGy+1oyOncu1nQ6eA==}
-
   '@internationalized/date@3.10.0':
     resolution: {integrity: sha512-oxDR/NTEJ1k+UFVQElaNIk65E/Z83HK1z1WI3lQyhTtnNg4R5oVXaPzK3jcpKG8UHKDVuDQHzn+wsxSz8RP3aw==}
 
@@ -3596,9 +3590,6 @@ packages:
   '@jspm/import-map@1.2.2':
     resolution: {integrity: sha512-QrM7+lkgVE8t9NZSm9fDSzheguEOVCOxueKxSwgoOt7yUWesWKDFmmL9bQFURl4IqMcpPz7VV2Tvw9s9emaJzQ==}
 
-  '@juggle/resize-observer@3.4.0':
-    resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}
-
   '@keyv/bigmap@1.3.0':
     resolution: {integrity: sha512-KT01GjzV6AQD5+IYrcpoYLkCu1Jod3nau1Z7EsEuViO3TZGRacSbO9MfHmbJ1WaOXFtWLxPVj169cn2WNKPkIg==}
     engines: {node: '>= 18'}
@@ -4538,14 +4529,6 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  '@vexip-ui/hooks@2.9.4':
-    resolution: {integrity: sha512-dGUiBAeHIsnSVigGSPHcuHBVqrSGW8LV+zGohvOpBfXs8Ynn5ZcSmybIWJ3G826NsicPu9rqwcJG8uvSgG4k4Q==}
-    peerDependencies:
-      vue: ^3.5.17
-
-  '@vexip-ui/utils@2.16.4':
-    resolution: {integrity: sha512-KX+Q4EsuwDp6ZlRJ7OAkiYxu52D5CVM8zpqQz/FXYV+JUtzl9T3dvxgtA8gQ0wm5Sh/xT6jp8Wo4X7tLAzRh/A==}
-
   '@vite-pwa/vitepress@1.1.0':
     resolution: {integrity: sha512-enif5C2JmepS69Ak7PSr6K3Eimsg7VyryZo1Z6NiIPNDnjXFlOqxwBYaq8R/d0M7akArJsjos7KmQnEfNFf5nA==}
     peerDependencies:
@@ -6861,11 +6844,6 @@ packages:
     resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
     engines: {node: '>=6.0'}
 
-  grid-layout-plus@1.1.1:
-    resolution: {integrity: sha512-7CWehJubrVC8Ps5QFUlnDsp0kiREvKfi3Pdjp21EyY8BNzSusqI3Utcxvu1Y9UUKe3YExvbhJzIxHK6rorbRaQ==}
-    peerDependencies:
-      vue: ^3.5.17
-
   gzip-size@7.0.0:
     resolution: {integrity: sha512-O1Ld7Dr+nqPnmGpdhzLmMTQ4vAsD+rHwMm1NLUmoUFFymBOMKxCCrtDxqdBRYXdeEPEi3SyoR4TizJLQrnKBNA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -7048,9 +7026,6 @@ packages:
     resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
-  interactjs@1.10.27:
-    resolution: {integrity: sha512-y/8RcCftGAF24gSp76X2JS3XpHiUvDQyhF8i7ujemBz77hwiHDuJzftHx7thY8cxGogwGiPJ+o97kWB6eAXnsA==}
-
   internal-slot@1.1.0:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
@@ -12867,8 +12842,6 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.19.1
 
-  '@interactjs/types@1.10.27': {}
-
   '@internationalized/date@3.10.0':
     dependencies:
       '@swc/helpers': 0.5.17
@@ -13003,8 +12976,6 @@ snapshots:
 
   '@jspm/import-map@1.2.2': {}
 
-  '@juggle/resize-observer@3.4.0': {}
-
   '@keyv/bigmap@1.3.0(keyv@5.5.4)':
     dependencies:
       hashery: 1.3.0
@@ -13986,15 +13957,6 @@ snapshots:
       - rollup
       - supports-color
 
-  '@vexip-ui/hooks@2.9.4(vue@3.5.25(typescript@5.9.3))':
-    dependencies:
-      '@floating-ui/dom': 1.7.6
-      '@juggle/resize-observer': 3.4.0
-      '@vexip-ui/utils': 2.16.4
-      vue: 3.5.25(typescript@5.9.3)
-
-  '@vexip-ui/utils@2.16.4': {}
-
   '@vite-pwa/vitepress@1.1.0(vite-plugin-pwa@1.2.0(vite@5.4.21(@types/node@24.10.1)(less@4.4.2)(sass@1.94.2)(terser@5.44.1))(workbox-build@7.4.0)(workbox-window@7.4.0))':
     dependencies:
       vite-plugin-pwa: 1.2.0(vite@5.4.21(@types/node@24.10.1)(less@4.4.2)(sass@1.94.2)(terser@5.44.1))(workbox-build@7.4.0)(workbox-window@7.4.0)
@@ -14003,14 +13965,14 @@ snapshots:
     dependencies:
       vite: 7.2.6(@types/node@24.10.1)(jiti@2.6.1)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2)
 
-  '@vitejs/plugin-vue-jsx@5.1.2(vite@7.2.6(@types/node@22.19.1)(jiti@1.21.7)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.25(typescript@5.9.3))':
+  '@vitejs/plugin-vue-jsx@5.1.2(vite@7.2.6(@types/node@22.19.1)(jiti@2.6.1)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.25(typescript@5.9.3))':
     dependencies:
       '@babel/core': 7.28.5
       '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.5)
       '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.5)
       '@rolldown/pluginutils': 1.0.0-beta.52
       '@vue/babel-plugin-jsx': 2.0.1(@babel/core@7.28.5)
-      vite: 7.2.6(@types/node@22.19.1)(jiti@1.21.7)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.2.6(@types/node@22.19.1)(jiti@2.6.1)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2)
       vue: 3.5.25(typescript@5.9.3)
     transitivePeerDependencies:
       - supports-color
@@ -14032,10 +13994,10 @@ snapshots:
       vite: 5.4.21(@types/node@24.10.1)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)
       vue: 3.5.25(typescript@5.9.3)
 
-  '@vitejs/plugin-vue@6.0.2(vite@7.2.6(@types/node@22.19.1)(jiti@1.21.7)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.25(typescript@5.9.3))':
+  '@vitejs/plugin-vue@6.0.2(vite@7.2.6(@types/node@22.19.1)(jiti@2.6.1)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.25(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-beta.50
-      vite: 7.2.6(@types/node@22.19.1)(jiti@1.21.7)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.2.6(@types/node@22.19.1)(jiti@2.6.1)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2)
       vue: 3.5.25(typescript@5.9.3)
 
   '@vitejs/plugin-vue@6.0.2(vite@7.2.6(@types/node@24.10.1)(jiti@2.6.1)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.25(typescript@5.9.3))':
@@ -14052,13 +14014,13 @@ snapshots:
       chai: 5.3.3
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.2.4(vite@7.2.6(@types/node@22.19.1)(jiti@1.21.7)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2))':
+  '@vitest/mocker@3.2.4(vite@7.2.6(@types/node@22.19.1)(jiti@2.6.1)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 7.2.6(@types/node@22.19.1)(jiti@1.21.7)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.2.6(@types/node@22.19.1)(jiti@2.6.1)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2)
 
   '@vitest/pretty-format@3.2.4':
     dependencies:
@@ -16683,13 +16645,6 @@ snapshots:
       section-matter: 1.0.0
       strip-bom-string: 1.0.0
 
-  grid-layout-plus@1.1.1(vue@3.5.25(typescript@5.9.3)):
-    dependencies:
-      '@vexip-ui/hooks': 2.9.4(vue@3.5.25(typescript@5.9.3))
-      '@vexip-ui/utils': 2.16.4
-      interactjs: 1.10.27
-      vue: 3.5.25(typescript@5.9.3)
-
   gzip-size@7.0.0:
     dependencies:
       duplexer: 0.1.2
@@ -16883,10 +16838,6 @@ snapshots:
 
   ini@4.1.1: {}
 
-  interactjs@1.10.27:
-    dependencies:
-      '@interactjs/types': 1.10.27
-
   internal-slot@1.1.0:
     dependencies:
       es-errors: 1.3.0
@@ -20234,13 +20185,13 @@ snapshots:
     dependencies:
       vite: 7.2.6(@types/node@24.10.1)(jiti@2.6.1)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2)
 
-  vite-node@3.2.4(@types/node@22.19.1)(jiti@1.21.7)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2):
+  vite-node@3.2.4(@types/node@22.19.1)(jiti@2.6.1)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 7.2.6(@types/node@22.19.1)(jiti@1.21.7)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.2.6(@types/node@22.19.1)(jiti@2.6.1)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -20409,7 +20360,7 @@ snapshots:
       sass: 1.94.2
       terser: 5.44.1
 
-  vite@7.2.6(@types/node@22.19.1)(jiti@1.21.7)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2):
+  vite@7.2.6(@types/node@22.19.1)(jiti@2.6.1)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2):
     dependencies:
       esbuild: 0.25.3
       fdir: 6.5.0(picomatch@4.0.3)
@@ -20420,7 +20371,7 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.19.1
       fsevents: 2.3.3
-      jiti: 1.21.7
+      jiti: 2.6.1
       less: 4.4.2
       sass: 1.94.2
       terser: 5.44.1
@@ -20500,11 +20451,11 @@ snapshots:
       - typescript
       - universal-cookie
 
-  vitest@3.2.4(@types/debug@4.1.13)(@types/node@22.19.1)(happy-dom@17.6.3)(jiti@1.21.7)(jsdom@26.1.0(canvas@3.2.2))(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2):
+  vitest@3.2.4(@types/debug@4.1.13)(@types/node@22.19.1)(happy-dom@17.6.3)(jiti@2.6.1)(jsdom@26.1.0(canvas@3.2.2))(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2):
     dependencies:
       '@types/chai': 5.2.3
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@7.2.6(@types/node@22.19.1)(jiti@1.21.7)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2))
+      '@vitest/mocker': 3.2.4(vite@7.2.6(@types/node@22.19.1)(jiti@2.6.1)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4
@@ -20522,8 +20473,8 @@ snapshots:
       tinyglobby: 0.2.15
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 7.2.6(@types/node@22.19.1)(jiti@1.21.7)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.2.6(@types/node@22.19.1)(jiti@2.6.1)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2)
-      vite-node: 3.2.4(@types/node@22.19.1)(jiti@1.21.7)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2)
+      vite-node: 3.2.4(@types/node@22.19.1)(jiti@2.6.1)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/debug': 4.1.13
@@ -20548,7 +20499,7 @@ snapshots:
     dependencies:
       '@types/chai': 5.2.3
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@7.2.6(@types/node@22.19.1)(jiti@1.21.7)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2))
+      '@vitest/mocker': 3.2.4(vite@7.2.6(@types/node@22.19.1)(jiti@2.6.1)(less@4.4.2)(sass@1.94.2)(terser@5.44.1)(yaml@2.8.2))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4