feat: add config panel

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 {