perf: lighten dashboard runtime build

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,
-    y: w.y,
-    w: w.w,
-    h: w.h,
+    minHeight: `${w.h * dashboardConfig.value!.rowHeight}px`,
+    rowEnd: `span ${w.h}`,
+    rowStart: Math.max(1, w.y + 1),
   }));
 });
 
@@ -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
-        :layout="layout"
-        :col-num="dashboardConfig.columns"
-        :row-height="dashboardConfig.rowHeight"
-        :margin="dashboardConfig.margin"
-        :is-draggable="false"
-        :is-resizable="false"
-        :vertical-compact="true"
-        :use-css-transforms="true"
-        :style="outerMarginStyle"
-      >
-      <GridItem
-        v-for="item in layout"
-        :key="item.i"
-        :i="item.i"
-        :x="item.x"
-        :y="item.y"
-        :w="item.w"
-        :h="item.h"
-        class="dashboard-widget"
-      >
-        <WidgetRenderer
-          v-if="getWidget(item.i)"
-          :widget="getWidget(item.i)!"
-          :is-design-mode="false"
-          :animation-delay="getAnimationDelay(item.i)"
-        />
-      </GridItem>
-      </GridLayout>
+      <div :style="gridStyle">
+        <div
+          v-for="item in layout"
+          :key="item.i"
+          class="dashboard-widget"
+          :style="{
+            gridColumnEnd: item.columnEnd,
+            gridColumnStart: item.columnStart,
+            gridRowEnd: item.rowEnd,
+            gridRowStart: item.rowStart,
+            minHeight: item.minHeight,
+          }"
+        >
+          <WidgetRenderer
+            v-if="getWidget(item.i)"
+            :widget="getWidget(item.i)!"
+            :is-design-mode="false"
+            :animation-delay="getAnimationDelay(item.i)"
+          />
+        </div>
+      </div>
     </div>
 
     <ElEmpty