feat: 增加no-data组件

src/views/components/dataEngine/hotCloud.vue

@@ -13,40 +13,43 @@
         </a-tooltip>
       </div>
 
-      <div class="multi-row-tag-cloud">
+      <div class="multi-row-tag-cloud h-472px">
+        <NoData v-if="tagRows.length === 0" text="暂无数据" />
         <!-- 动态生成多行标签 -->
-        <div
-          v-for="(row, rowIndex) in tagRows"
-          :key="rowIndex"
-          class="tag-row"
-          :style="{ justifyContent: row.align || 'center' }"
-        >
-          <a-tag
-            v-for="(tag, tagIndex) in row.tags"
-            :key="tagIndex"
-            class="cursor-pointer"
-            :style="{
-              fontSize: `${getTagStyle(rowIndex, tagIndex, row.tags.length).fontSize}px`,
-              height: `${getTagStyle(rowIndex, tagIndex, row.tags.length).lineHeight}px`,
-              color: '#6d4cfe',
-              backgroundColor: '#F0EDFF',
-              margin: '0 12px 12px 0',
-              transition: 'all 0.3s',
-              paddingLeft: `${getPaddingLeft(rowIndex, tagIndex)}px`,
-              paddingRight: `${getPaddingLeft(rowIndex, tagIndex)}px`,
-              borderRadius: '32px',
-              fontWeight: 400,
-            }"
-            @mouseenter="hoverTag = tag"
-            @mouseleave="hoverTag = null"
+        <template v-else>
+          <div
+            v-for="(row, rowIndex) in tagRows"
+            :key="rowIndex"
+            class="tag-row"
+            :style="{ justifyContent: row.align || 'center' }"
           >
-            <a-space>
-              <a-tooltip :content="`性价比:${Number(tag.rate * 100)}%`" position="tl">
-                <a-space>{{ tag.term }}</a-space>
-              </a-tooltip>
-            </a-space>
-          </a-tag>
-        </div>
+            <a-tag
+              v-for="(tag, tagIndex) in row.tags"
+              :key="tagIndex"
+              class="cursor-pointer"
+              :style="{
+                fontSize: `${getTagStyle(rowIndex, tagIndex, row.tags.length).fontSize}px`,
+                height: `${getTagStyle(rowIndex, tagIndex, row.tags.length).lineHeight}px`,
+                color: '#6d4cfe',
+                backgroundColor: '#F0EDFF',
+                margin: '0 12px 12px 0',
+                transition: 'all 0.3s',
+                paddingLeft: `${getPaddingLeft(rowIndex, tagIndex)}px`,
+                paddingRight: `${getPaddingLeft(rowIndex, tagIndex)}px`,
+                borderRadius: '32px',
+                fontWeight: 400,
+              }"
+              @mouseenter="hoverTag = tag"
+              @mouseleave="hoverTag = null"
+            >
+              <a-space>
+                <a-tooltip :content="`性价比:${Number(tag.rate * 100)}%`" position="tl">
+                  <a-space>{{ tag.term }}</a-space>
+                </a-tooltip>
+              </a-space>
+            </a-tag>
+          </div>
+        </template>
       </div>
     </a-space>
   </view>
@@ -96,7 +99,7 @@ const getIndustryTerms = async () => {
 };
 
 // 标签数据（按行分组）
-const tagRows = ref();
+const tagRows = ref([]);
 const hoverTag = ref(null);
 
 const lineHeightStart = [28, 52, 58, 72, 58, 52, 28]; // 7行时