feat: add config panel

src/store/modules/dashboard.ts

@@ -19,6 +19,7 @@ import { store } from "@/store";
 import { GridItemData } from "@/types/dashboard";
 
 interface DashboardState {
+  showConfig: boolean;
   layout: GridItemData[];
 }
 
@@ -26,6 +27,7 @@ export const dashboardStore = defineStore({
   id: "dashboard",
   state: (): DashboardState => ({
     layout: [],
+    showConfig: false,
   }),
   actions: {
     setLayout(data: GridItemData[]) {
@@ -36,11 +38,11 @@ export const dashboardStore = defineStore({
         x: 0,
         y: 0,
         w: 12,
-        h: 3,
+        h: 12,
         i: String(this.layout.length),
       };
       this.layout = this.layout.map((d: GridItemData) => {
-        d.y = d.y + 3;
+        d.y = d.y + newWidget.h;
         return d;
       });
       this.layout.push(newWidget);
@@ -48,6 +50,9 @@ export const dashboardStore = defineStore({
     removeWidget(item: GridItemData) {
       this.layout = this.layout.filter((d: GridItemData) => d.i !== item.i);
     },
+    setConfigPanel(show: boolean) {
+      this.showConfig = show;
+    },
   },
 });
 

src/views/dashboard/Edit.vue

@@ -24,39 +24,48 @@ limitations under the License. -->
   </div>
   <div class="flex-h ds-main">
     <GridLayout />
-    <div class="ds-config">Configurations</div>
+    <div
+      class="ds-config"
+      v-show="dashboardStore.showConfig"
+      @click="dashboardStore.setConfigPanel(true)"
+    >
+      Configurations
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
+import { ref } from "vue";
 import { ElButton } from "element-plus";
 import GridLayout from "./panel/Layout.vue";
 import { GridItemData } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
 
 const dashboardStore = useDashboardStore();
+// fetch layout data from serve side
 const layout: GridItemData[] = [
-  { x: 0, y: 0, w: 2, h: 2, i: "0" },
+  { x: 0, y: 0, w: 2, h: 12, i: "0" },
-  { x: 2, y: 0, w: 2, h: 4, i: "1" },
+  { x: 2, y: 0, w: 2, h: 12, i: "1" },
-  { x: 4, y: 0, w: 2, h: 5, i: "2" },
+  { x: 4, y: 0, w: 2, h: 15, i: "2" },
-  { x: 6, y: 0, w: 2, h: 3, i: "3" },
+  { x: 6, y: 0, w: 2, h: 9, i: "3" },
-  { x: 8, y: 0, w: 2, h: 3, i: "4" },
+  { x: 8, y: 0, w: 2, h: 9, i: "4" },
-  { x: 10, y: 0, w: 2, h: 3, i: "5" },
+  { x: 10, y: 0, w: 2, h: 9, i: "5" },
-  { x: 0, y: 5, w: 2, h: 5, i: "6" },
+  { x: 0, y: 5, w: 2, h: 15, i: "6" },
-  { x: 2, y: 5, w: 2, h: 5, i: "7" },
+  { x: 2, y: 5, w: 2, h: 15, i: "7" },
-  { x: 4, y: 5, w: 2, h: 5, i: "8" },
+  { x: 4, y: 5, w: 2, h: 15, i: "8" },
-  { x: 6, y: 3, w: 2, h: 4, i: "9" },
+  { x: 6, y: 3, w: 2, h: 12, i: "9" },
-  { x: 8, y: 4, w: 2, h: 4, i: "10" },
+  { x: 8, y: 4, w: 2, h: 12, i: "10" },
-  { x: 10, y: 4, w: 2, h: 4, i: "11" },
+  { x: 10, y: 4, w: 2, h: 12, i: "11" },
-  { x: 0, y: 10, w: 2, h: 5, i: "12" },
+  { x: 0, y: 10, w: 2, h: 15, i: "12" },
-  { x: 2, y: 10, w: 2, h: 5, i: "13" },
+  { x: 2, y: 10, w: 2, h: 15, i: "13" },
-  { x: 4, y: 8, w: 2, h: 4, i: "14" },
+  { x: 4, y: 8, w: 2, h: 12, i: "14" },
-  { x: 6, y: 8, w: 2, h: 4, i: "15" },
+  { x: 6, y: 8, w: 2, h: 12, i: "15" },
-  { x: 8, y: 10, w: 2, h: 5, i: "16" },
+  { x: 8, y: 10, w: 2, h: 15, 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.setLayout(layout);
+document.addEventListener("click", setConfig, true);
+function setConfig() {
+  dashboardStore.setConfigPanel(false);
+}
 </script>
 <style lang="scss" scoped>
 .dashboard-tool {
@@ -68,22 +77,15 @@ dashboardStore.setLayout(layout);
 
 .ds-main {
   height: calc(100% - 40px);
+  overflow: auto;
 }
 
 .ds-config {
-  width: 360px;
+  width: 340px;
-  margin: 5px 0;
   background-color: #fff;
   box-shadow: 2px 0 2px 0 #ccc;
   text-align: center;
   border-left: 1px solid #eee;
-}
+  margin: 10px 0;
-
-.panel {
-  width: 300px;
-  height: 300px;
-  background-color: #fff;
-  margin: 5px;
-  text-align: center;
 }
 </style>

src/views/dashboard/panel/Layout.vue

@@ -16,12 +16,9 @@ limitations under the License. -->
   <grid-layout
     v-model:layout="dashboardStore.layout"
     :col-num="12"
-    :row-height="30"
+    :row-height="10"
     :is-draggable="true"
     :is-resizable="true"
-    :is-mirrored="false"
-    :vertical-compact="true"
-    :use-css-transforms="true"
     @layout-updated="layoutUpdatedEvent"
   >
     <grid-item
@@ -51,7 +48,7 @@ function layoutUpdatedEvent(newLayout: GridItemData) {
 .vue-grid-layout {
   background: #f7f9fa;
   flex-grow: 2;
-  overflow: auto;
+  height: auto !important;
 }
 
 .vue-grid-item:not(.vue-grid-placeholder) {
@@ -59,54 +56,4 @@ function layoutUpdatedEvent(newLayout: GridItemData) {
   box-shadow: 0px 1px 4px 0px #00000029;
   border-radius: 5px;
 }
-
-.vue-grid-item .resizing {
-  opacity: 0.9;
-}
-
-.vue-grid-item .static {
-  background: #cce;
-}
-
-.vue-grid-item .text {
-  font-size: 24px;
-  text-align: center;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
-  height: 100%;
-  width: 100%;
-}
-
-.vue-grid-item .no-drag {
-  height: 100%;
-  width: 100%;
-}
-
-.vue-grid-item .minMax {
-  font-size: 12px;
-}
-
-.vue-grid-item .add {
-  cursor: pointer;
-}
-
-.vue-draggable-handle {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  top: 0;
-  left: 0;
-  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>")
-    no-repeat;
-  background-position: bottom right;
-  padding: 0 8px 8px 0;
-  background-repeat: no-repeat;
-  background-origin: content-box;
-  box-sizing: border-box;
-  cursor: pointer;
-}
 </style>

src/views/dashboard/panel/Widget.vue

@@ -17,7 +17,12 @@ limitations under the License. -->
     <div class="header flex-h">
       <div>title</div>
       <div class="operations">
-        <Icon class="mr-5" size="sm" iconName="createmode_editedit" />
+        <Icon
+          class="mr-5"
+          size="sm"
+          iconName="createmode_editedit"
+          @click="setConfig"
+        />
         <Icon size="sm" iconName="clearclose" @click="removeWidget" />
       </div>
     </div>
@@ -37,6 +42,9 @@ const dashboardStore = useDashboardStore();
 function removeWidget() {
   dashboardStore.removeWidget(props.item);
 }
+function setConfig() {
+  dashboardStore.setConfigPanel(true);
+}
 </script>
 <style lang="scss" scoped>
 .widget {