feat: add grid items

package-lock.json

@@ -18789,24 +18789,16 @@
       }
     },
     "vue-grid-layout": {
-      "version": "3.0.0-beta1",
+      "version": "2.3.12",
-      "resolved": "https://registry.npmjs.org/vue-grid-layout/-/vue-grid-layout-3.0.0-beta1.tgz",
+      "resolved": "https://registry.npmjs.org/vue-grid-layout/-/vue-grid-layout-2.3.12.tgz",
-      "integrity": "sha512-MsW0yfYNtnAO/uDhfZvkP6effxSJxvhAFbIL37x6Rn3vW9xf0WHVefKaSbQMLpSq3mXnR6ut0pg2Cd5lqIIZzg==",
+      "integrity": "sha512-x9l4KxfH0MeB4xImanrnnTihksq8LYk3f40hm1sdiTHF2bYM+Xhae6eQsvFWEFwbYq7RVNvB80qwis1vInB+WQ==",
       "requires": {
         "@interactjs/actions": "^1.10.2",
         "@interactjs/auto-start": "^1.10.2",
         "@interactjs/dev-tools": "^1.10.2",
         "@interactjs/interactjs": "^1.10.2",
         "@interactjs/modifiers": "^1.10.2",
-        "element-resize-detector": "^1.2.1",
+        "element-resize-detector": "^1.2.1"
-        "mitt": "^2.1.0"
-      },
-      "dependencies": {
-        "mitt": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
-          "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
-        }
       }
     },
     "vue-hot-reload-api": {

package.json

@@ -16,7 +16,7 @@
     "three": "^0.131.3",
     "three-orbit-controls": "^82.1.0",
     "vue": "^3.0.0",
-    "vue-grid-layout": "^3.0.0-beta1",
+    "vue-grid-layout": "^2.3.12",
     "vue-i18n": "^9.1.9",
     "vue-router": "^4.0.0-0",
     "vue-types": "^4.1.1",

src/store/modules/app.ts

@@ -27,7 +27,7 @@ interface AppState {
   utcHour: number;
   utcMin: number;
   eventStack: (() => unknown)[];
-  timer: ReturnType<typeof setInterval> | null;
+  timer: Nullable<any>;
 }
 
 export const appStore = defineStore({

src/views/dashboard/Edit.vue

@@ -20,7 +20,7 @@ limitations under the License. -->
   </div>
   <div class="flex-h ds-main">
     <div class="ds-layout">
-      <grid-layout
+      <GridLayout
         v-model="layout"
         :col-num="12"
         :row-height="30"
@@ -29,7 +29,7 @@ limitations under the License. -->
         :vertical-compact="true"
         :use-css-transforms="true"
       >
-        <grid-item
+        <GridItem
           v-for="item in layout"
           :static="item.static"
           :x="item.x"
@@ -40,20 +40,29 @@ limitations under the License. -->
           :key="item.i"
         >
           <span class="text">{{ itemTitle(item) }}</span>
-        </grid-item>
+        </GridItem>
-      </grid-layout>
+      </GridLayout>
     </div>
     <div class="ds-config">Configurations</div>
   </div>
 </template>
-<script lang="ts" setup>
+<script lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive, defineComponent } from "vue";
 import { ElButton } from "element-plus";
-import { GridLayout, GridItem, GridItemData } from "vue-grid-layout";
+import VueGridLayout, { GridItemData } from "vue-grid-layout";
 interface CustomData extends GridItemData {
-  label?: string;
   static: boolean;
 }
+
+console.log(VueGridLayout.GridLayout);
+export default defineComponent({
+  name: "dashboardEdit",
+  components: {
+    ElButton,
+    GridLayout: VueGridLayout.GridLayout,
+    GridItem: VueGridLayout.GridItem,
+  },
+  setup() {
     const layout = reactive<CustomData[]>([
       { x: 0, y: 0, w: 2, h: 2, i: "0", static: false },
       { x: 2, y: 0, w: 2, h: 4, i: "1", static: true },
@@ -77,6 +86,7 @@ const layout = reactive<CustomData[]>([
       { x: 2, y: 6, w: 2, h: 2, i: "19", static: false },
     ]);
     console.log(layout);
+
     const draggable = ref(true);
     const resizable = ref(true);
     const index = ref(0);
@@ -87,6 +97,9 @@ function itemTitle(item: any) {
       }
       return result;
     }
+    return { draggable, resizable, index, layout, itemTitle };
+  },
+});
 </script>
 <style lang="scss" scoped>
 .dashboard-tool {