fix: update style

src/views/dashboard/Edit.vue

@@ -14,16 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="dashboard-tool">
-    <el-button size="mini" @click="dashboardStore.addWidget">
-      Add Widget
-    </el-button>
+    <el-button size="mini" @click="addWidget"> Add Widget </el-button>
     <el-button size="mini">Dashboard Settings</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>
   </div>
   <div class="flex-h ds-main">
-    <GridLayout />
+    <div class="layout">
+      <div class="grids">
+        <GridLayout />
+      </div>
+    </div>
     <div
       class="ds-config"
       v-show="dashboardStore.showConfig"
@@ -66,6 +68,10 @@ document.addEventListener("click", setConfig, true);
 function setConfig() {
   dashboardStore.setConfigPanel(false);
 }
+function addWidget() {
+  dashboardStore.setConfigPanel(true);
+  dashboardStore.addWidget();
+}
 </script>
 <style lang="scss" scoped>
 .dashboard-tool {
@@ -77,7 +83,17 @@ function setConfig() {
 
 .ds-main {
   height: calc(100% - 40px);
-  overflow: auto;
+}
+
+.layout {
+  height: 100%;
+  flex-grow: 2;
+  overflow: hidden;
+}
+
+.grids {
+  height: 100%;
+  overflow-y: auto;
 }
 
 .ds-config {
@@ -86,6 +102,5 @@ function setConfig() {
   box-shadow: 2px 0 2px 0 #ccc;
   text-align: center;
   border-left: 1px solid #eee;
-  margin: 10px 0;
 }
 </style>

src/views/dashboard/data.ts

@@ -25,40 +25,30 @@ export const EntityType = [
 ];
 export const SelectOpt = [
   {
-    value: "guide",
-    label: "Guide",
+    value: "service1",
+    label: "Service1",
     children: [
       {
-        value: "disciplines",
-        label: "Disciplines",
-        children: [
-          {
-            value: "consistency",
-            label: "Consistency",
-          },
-          {
-            value: "feedback",
-            label: "Feedback",
-          },
-          {
-            value: "efficiency",
-            label: "Efficiency",
-          },
-        ],
+        value: "instance1",
+        label: "Instance1",
       },
       {
-        value: "navigation",
-        label: "Navigation",
-        children: [
-          {
-            value: "side nav",
-            label: "Side Navigation",
-          },
-          {
-            value: "top nav",
-            label: "Top Navigation",
-          },
-        ],
+        value: "instance2",
+        label: "Instance2",
+      },
+    ],
+  },
+  {
+    value: "service2",
+    label: "Service2",
+    children: [
+      {
+        value: "instance1",
+        label: "Instance1",
+      },
+      {
+        value: "instance2",
+        label: "Instance2",
       },
     ],
   },

src/views/dashboard/panel/Layout.vue

@@ -47,7 +47,6 @@ function layoutUpdatedEvent(newLayout: GridItemData) {
 <style lang="scss" scoped>
 .vue-grid-layout {
   background: #f7f9fa;
-  flex-grow: 2;
   height: auto !important;
 }