feat: dashboard init

Author: ziyujiahao

frontend/package.json

@@ -9,18 +9,19 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "lodash": "^4.17.21",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
     "web-storage-cache": "^1.1.1"
   },
   "devDependencies": {
     "@element-plus/icons-vue": "^2.3.1",
     "@types/crypto-js": "^4.2.2",
-    "crypto-js": "^4.2.0",
     "@types/node": "^22.14.1",
     "@vitejs/plugin-vue": "^5.2.2",
     "@vue/tsconfig": "^0.7.0",
     "axios": "^1.8.4",
+    "crypto-js": "^4.2.0",
     "element-plus": "^2.9.7",
     "less": "^4.3.0",
     "pinia": "^3.0.2",

frontend/src/views/dashboard/PreviewDashboard.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import DsCanvasCore from '@/views/dashboard/canvas/DsCanvasCore.vue'
+import { nextTick, onMounted, ref } from 'vue'
+const cyGridster = ref(null)
+const baseWidth = ref(0)
+const baseHeight = ref(0)
+const baseMarginLeft = ref(0)
+const baseMarginTop = ref(0)
+const componentData = [
+  {
+    id: 4,
+    x: 1,
+    y: 1,
+    sizex: 2,
+    sizey: 2
+  },
+  {
+    id: 10,
+    x: 2,
+    y: 1,
+    sizex: 2,
+    sizey: 2
+  },
+  {
+    id: 7,
+    x: 1,
+    y: 2,
+    sizex: 2,
+    sizey: 3
+  }
+]
+
+onMounted(() => {
+  const screenWidth = window.innerWidth
+  const screenHeight = window.innerHeight
+  baseWidth.value = 90.8333 * (screenWidth / 1366)
+  baseHeight.value = 100 * (screenHeight / 638)
+  baseMarginLeft.value = 20 * (screenWidth / 1366)
+  baseMarginTop.value = 20 * (screenHeight / 638)
+
+  nextTick(() => {
+    if (cyGridster.value) {
+      cyGridster.value.init()
+    }
+  })
+})
+</script>
+
+<template>
+  <DsCanvasCore ref="cyGridster" :canvas-component-data="componentData"></DsCanvasCore>
+</template>
+
+<style scoped lang="less"></style>