feat: add no data tips

src/store/modules/dashboard.ts

@@ -51,22 +51,12 @@ export const dashboardStore = defineStore({
         w: 24,
         h: 12,
         i: String(this.layout.length),
-        metrics: ["service_resp_time"],
-        queryMetricType: "readMetricsValues",
         type: "Widget",
         widget: {
-          title: "Title123",
+          title: "Title",
-          tips: "Tooltip123",
-        },
-        graph: {
-          showBackground: true,
-          barWidth: 30,
-          type: "Line",
-        },
-        standard: {
-          sortOrder: "DEC",
-          unit: "s",
         },
+        graph: {},
+        standard: {},
       };
       this.layout = this.layout.map((d: LayoutConfig) => {
         d.y = d.y + newWidget.h;
@@ -131,22 +121,12 @@ export const dashboardStore = defineStore({
         w: 24,
         h: 12,
         i: String(children.length),
-        metrics: ["service_resp_time"],
-        queryMetricType: "readMetricsValues",
         type: "Widget",
         widget: {
-          title: "Title123",
+          title: "Title",
-          tips: "Tooltip123",
-        },
-        graph: {
-          showBackground: true,
-          barWidth: 30,
-          type: "Line",
-        },
-        standard: {
-          sortOrder: "DEC",
-          unit: "s",
         },
+        graph: {},
+        standard: {},
       };
       if (this.layout[idx].children) {
         const items = children.map((d: LayoutConfig) => {

src/views/dashboard/controls/Tab.vue

@@ -51,6 +51,7 @@ limitations under the License. -->
   </div>
   <div class="tab-layout">
     <grid-layout
+      v-if="state.layout.length"
       v-model:layout="state.layout"
       :col-num="24"
       :row-height="10"
@@ -72,6 +73,7 @@ limitations under the License. -->
         <Widget :data="item" :active="activeTabWidget === item.i" />
       </grid-item>
     </grid-layout>
+    <div class="no-data-tips" v-else>No widgets, plase add widgets</div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -243,4 +245,12 @@ watch(
 .vue-grid-item.active {
   border: 1px solid #409eff;
 }
+
+.no-data-tips {
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+  padding-top: 30px;
+  color: #888;
+}
 </style>

src/views/dashboard/controls/Widget.vue

@@ -32,13 +32,14 @@ limitations under the License. -->
         </div>
       </el-popover>
     </div>
-    <div class="body" v-loading="loading">
+    <div class="body" v-if="data.graph.type" v-loading="loading">
       <component
         :is="data.graph.type"
         :intervalTime="appStoreWithOut.intervalTime"
         :data="state.source"
       />
     </div>
+    <div v-else class="no-data">No data</div>
   </div>
 </template>
 <script lang="ts">
@@ -149,4 +150,12 @@ export default defineComponent({
   width: 100%;
   height: calc(100% - 30px);
 }
+
+.no-data {
+  font-size: 14px;
+  color: #888;
+  width: 100%;
+  text-align: center;
+  padding-top: 20px;
+}
 </style>