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))`, + }; +});