feat: add config component

src/layout/components/SideBar.vue

@@ -127,38 +127,46 @@ const filterMenus = (menus: any[]) => {
   font-weight: bold;
   // box-shadow: 1px 5px 3px #888;
 }
+
 .el-menu-vertical:not(.el-menu--collapse) {
   width: 210px;
   font-size: 18px;
 }
+
 .logo-icon-collapse {
   width: 65px;
   margin: 15px 0 30px 0;
 }
+
 .logo-icon {
   margin: 15px 0 30px 15px;
   width: 110px;
 }
+
 .el-sub-menu .el-icon {
   height: 26px;
   margin-right: 0;
 }
+
 .el-sub-menu__title {
   font-size: 16px;
   font-weight: bold;
 }
+
 .menu-control {
   position: absolute;
   top: 8px;
   left: 215px;
   cursor: pointer;
   transition: all 0.2s linear;
-  z-index: 9999;
+  z-index: 99;
   color: #252a2f;
 }
+
 .menu-control.collapse {
   left: 70px;
 }
+
 .el-icon.el-sub-menu__icon-arrow {
   height: 12px;
 }

src/views/dashboard/Edit.vue

@@ -18,11 +18,10 @@ limitations under the License. -->
     <grid-layout />
     <el-dialog
       v-model="dashboardStore.showConfig"
-      title="Configurations"
-      width="95%"
+      fullscreen
       @closed="dashboardStore.setConfigPanel(false)"
     >
-      <div class="configuration">xxxx</div>
+      <widget-config />
     </el-dialog>
   </div>
 </template>
@@ -31,6 +30,7 @@ import { ElDialog } from "element-plus";
 import GridLayout from "./panel/Layout.vue";
 import { LayoutConfig } from "@/types/dashboard";
 import Tool from "./panel/Tool.vue";
+import WidgetConfig from "./configuration/WidgetConfig.vue";
 import { useDashboardStore } from "@/store/modules/dashboard";
 
 const dashboardStore = useDashboardStore();
@@ -69,16 +69,4 @@ dashboardStore.setLayout(layout);
   height: 100%;
   overflow-y: auto;
 }
-
-.ds-config {
-  width: 340px;
-  background-color: #fff;
-  box-shadow: 2px 0 2px 0 #ccc;
-  text-align: center;
-  border-left: 1px solid #eee;
-}
-
-.configuration {
-  height: 600px;
-}
 </style>

src/views/dashboard/configuration/WidgetConfig.vue

@@ -0,0 +1,59 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="graph">No Data</div>
+  <div class="config">
+    <div class="metric">
+      <label>Graph your metric</label>
+    </div>
+    <div class="visualization">
+      <label>Select you visualization</label>
+    </div>
+    <div class="graph-styles">
+      <label>Graph styles</label>
+    </div>
+    <div>
+      <label>Widget options</label>
+    </div>
+    <div>
+      <label>Standard options</label>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+</script>
+<style lang="scss" scoped>
+.ds-config {
+  width: 340px;
+  background-color: #fff;
+  box-shadow: 2px 0 2px 0 #ccc;
+  text-align: center;
+  border-left: 1px solid #eee;
+}
+
+.configuration {
+  z-index: 9999;
+}
+
+.graph {
+  width: 100%;
+  height: 350px;
+}
+
+label {
+  font-weight: bold;
+}
+</style>

src/views/dashboard/panel/Tool.vue

@@ -130,7 +130,7 @@ function changeService(val: { value: string; label: string }) {
 .label {
   font-size: 12px;
   display: inline-block;
-  padding: 4px;
+  padding: 4px 2px;
   border: var(--el-input-border, var(--el-border-base));
   border-right: none;
   border-radius: 2px;

src/views/dashboard/panel/Widget.vue

@@ -15,7 +15,7 @@ limitations under the License. -->
 <template>
   <div class="widget">
     <div class="header flex-h">
-      <div>title</div>
+      <div>Title</div>
       <div class="operations">
         <Icon
           class="mr-5"
@@ -26,7 +26,7 @@ limitations under the License. -->
         <Icon size="sm" iconName="clearclose" @click="removeWidget" />
       </div>
     </div>
-    <div class="body">chart</div>
+    <div class="body">No Data</div>
   </div>
 </template>
 <script lang="ts" setup>