feat: add no data tips

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>