feat: add widgets

src/store/modules/dashboard.ts

@@ -31,6 +31,20 @@ export const dashboardStore = defineStore({
     setLayouts(data: GridItemData[]) {
       this.layouts = data;
     },
+    addWidget() {
+      const newWidget: GridItemData = {
+        x: 0,
+        y: 0,
+        w: 12,
+        h: 3,
+        i: String(this.layouts.length),
+      };
+      this.layouts = this.layouts.map((d: GridItemData) => {
+        d.y = d.y + 3;
+        return d;
+      });
+      this.layouts.push(newWidget);
+    },
   },
 });
 

src/views/dashboard/Edit.vue

@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="dashboard-tool">
-    <el-button size="mini">Add Widget</el-button>
+    <el-button size="mini" @click="dashboardStore.addWidget">
+      Add Widget
+    </el-button>
     <el-button size="mini">Save As</el-button>
     <el-button size="mini">Discard</el-button>
     <el-button size="mini" type="primary">Apply</el-button>
@@ -27,7 +29,34 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { toRefs, defineComponent, reactive, ref } from "vue";
 import { ElButton } from "element-plus";
-import GridLayout from "./widget/GridLayout.vue";
+import GridLayout from "./widget/Layout.vue";
+import { GridItemData } from "@/types/dashboard";
+import { useDashboardStore } from "@/store/modules/dashboard";
+
+const dashboardStore = useDashboardStore();
+const layouts: GridItemData[] = [
+  { x: 0, y: 0, w: 2, h: 2, i: "0" },
+  { x: 2, y: 0, w: 2, h: 4, i: "1" },
+  { x: 4, y: 0, w: 2, h: 5, i: "2" },
+  { x: 6, y: 0, w: 2, h: 3, i: "3" },
+  { x: 8, y: 0, w: 2, h: 3, i: "4" },
+  { x: 10, y: 0, w: 2, h: 3, i: "5" },
+  { x: 0, y: 5, w: 2, h: 5, i: "6" },
+  { x: 2, y: 5, w: 2, h: 5, i: "7" },
+  { x: 4, y: 5, w: 2, h: 5, i: "8" },
+  { x: 6, y: 3, w: 2, h: 4, i: "9" },
+  { x: 8, y: 4, w: 2, h: 4, i: "10" },
+  { x: 10, y: 4, w: 2, h: 4, i: "11" },
+  { x: 0, y: 10, w: 2, h: 5, i: "12" },
+  { x: 2, y: 10, w: 2, h: 5, i: "13" },
+  { x: 4, y: 8, w: 2, h: 4, i: "14" },
+  { x: 6, y: 8, w: 2, h: 4, i: "15" },
+  { x: 8, y: 10, w: 2, h: 5, i: "16" },
+  { x: 10, y: 4, w: 2, h: 2, i: "17" },
+  { x: 0, y: 9, w: 2, h: 3, i: "18" },
+  { x: 2, y: 6, w: 2, h: 2, i: "19" },
+];
+dashboardStore.setLayouts(layouts);
 </script>
 <style lang="scss" scoped>
 .dashboard-tool {

src/views/dashboard/widget/Layout.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <grid-layout
-    v-model:layout="layout"
+    v-model:layout="dashboardStore.layouts"
     :col-num="12"
     :row-height="30"
     :is-draggable="true"
@@ -24,7 +24,7 @@ limitations under the License. -->
     :use-css-transforms="true"
   >
     <grid-item
-      v-for="item in layout"
+      v-for="item in dashboardStore.layouts"
       :x="item.x"
       :y="item.y"
       :w="item.w"
@@ -37,30 +37,9 @@ limitations under the License. -->
   </grid-layout>
 </template>
 <script lang="ts" setup>
-import { GridItemData } from "@/types/dashboard";
+import { useDashboardStore } from "@/store/modules/dashboard";
 
-const layout: GridItemData[] = [
+const dashboardStore = useDashboardStore();
-  { x: 0, y: 0, w: 2, h: 2, i: "0" },
-  { x: 2, y: 0, w: 2, h: 4, i: "1" },
-  { x: 4, y: 0, w: 2, h: 5, i: "2" },
-  { x: 6, y: 0, w: 2, h: 3, i: "3" },
-  { x: 8, y: 0, w: 2, h: 3, i: "4" },
-  { x: 10, y: 0, w: 2, h: 3, i: "5" },
-  { x: 0, y: 5, w: 2, h: 5, i: "6" },
-  { x: 2, y: 5, w: 2, h: 5, i: "7" },
-  { x: 4, y: 5, w: 2, h: 5, i: "8" },
-  { x: 6, y: 3, w: 2, h: 4, i: "9" },
-  { x: 8, y: 4, w: 2, h: 4, i: "10" },
-  { x: 10, y: 4, w: 2, h: 4, i: "11" },
-  { x: 0, y: 10, w: 2, h: 5, i: "12" },
-  { x: 2, y: 10, w: 2, h: 5, i: "13" },
-  { x: 4, y: 8, w: 2, h: 4, i: "14" },
-  { x: 6, y: 8, w: 2, h: 4, i: "15" },
-  { x: 8, y: 10, w: 2, h: 5, i: "16" },
-  { x: 10, y: 4, w: 2, h: 2, i: "17" },
-  { x: 0, y: 9, w: 2, h: 3, i: "18" },
-  { x: 2, y: 6, w: 2, h: 2, i: "19" },
-];
 </script>
 <style lang="scss" scoped>
 .vue-grid-layout {
@@ -70,8 +49,10 @@ const layout: GridItemData[] = [
 }
 
 .vue-grid-item:not(.vue-grid-placeholder) {
-  background: #ccc;
+  background: #fff;
-  border: 1px solid black;
+  box-shadow: 0px 1px 4px 0px #00000029;
+  border-radius: 5px;
+  // border: 1px solid black;
 }
 
 .vue-grid-item .resizing {