From 246ca0ffaed1659041ce6d85caf396bceec22886 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?cls=5F=E5=AE=81=E6=B3=A2=E6=9C=AC=E6=9C=BA?= <908705107@qq.com> Date: Thu, 11 Jun 2026 13:16:32 +0800 Subject: [PATCH] perf: lighten dashboard runtime build --- web/apps/web-ele/package.json | 1 - .../dashboard-design/DashboardRenderer.vue | 76 ++++++++-------- web/apps/web-ele/vite.config.mts | 1 + web/pnpm-lock.yaml | 87 ++++--------------- 4 files changed, 62 insertions(+), 103 deletions(-) diff --git a/web/apps/web-ele/package.json b/web/apps/web-ele/package.json index fb11d5a..5b2b65b 100644 --- a/web/apps/web-ele/package.json +++ b/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:" diff --git a/web/apps/web-ele/src/components/dashboard-design/DashboardRenderer.vue b/web/apps/web-ele/src/components/dashboard-design/DashboardRenderer.vue index 5546dc5..9781359 100644 --- a/web/apps/web-ele/src/components/dashboard-design/DashboardRenderer.vue +++ b/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))`, + }; +});