feat: 增加no-data组件

src/components/_base/navbar/index.vue

@@ -91,10 +91,6 @@ const handleDopdownClick = (index: any, ind: any) => {
           :selected-keys="selectedKey"
           :default-selected-keys="[`${MENU_GROUP_IDS.WORK_BENCH_ID}`]"
         >
-          <template #collapse-icon>
-            <icon-caret-down size="16" />
-            <icon-caret-up size="16" />
-          </template>
           <a-menu-item :key="`${MENU_GROUP_IDS.WORK_BENCH_ID}`" @click="handleSelect(0)">
             <span class="menu-item-text">工作台</span>
           </a-menu-item>
@@ -102,7 +98,7 @@ const handleDopdownClick = (index: any, ind: any) => {
             <a-dropdown :popup-max-height="false" class="layout-menu-item-dropdown">
               <a-button>
                 <span class="menu-item-text mr-2px"> {{ item.name }}</span>
-                <icon-caret-down size="16" />
+                <icon-caret-down size="16" class="arco-icon-down !mr-0" />
               </a-button>
               <template #content>
                 <a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDopdownClick(index, ind)">
@@ -204,6 +200,12 @@ const handleDopdownClick = (index: any, ind: any) => {
       }
     }
   }
+  .arco-icon-down {
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .arco-dropdown-open .arco-icon-down {
+    transform: rotate(180deg);
+  }
 }
 .cneter-tip {
   font-size: 16px;

src/components/no-data/index.vue

@@ -0,0 +1,49 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-07-01 16:09:21
+-->
+<template>
+  <div class="no-data">
+    <slot name="pic">
+      <img :src="emptyIcon" class="img" alt="" width="106" height="72" />
+    </slot>
+    <slot>
+      <div v-if="text" class="text mt-36px">{{ text }}</div>
+    </slot>
+  </div>
+</template>
+
+<script setup>
+import icon from './img/icon-empty.png';
+
+const props = defineProps({
+  text: {
+    type: String,
+    default: '暂无数据',
+  },
+  emptyIcon: {
+    type: String,
+    default: icon,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.no-data {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding-top: 10%;
+  padding-bottom: 10%;
+  line-height: 1.5em;
+  .text {
+    color: var(--Text-3, #737478);
+    font-family: 'PuHuiTi-Regular';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+}
+</style>

src/main.ts

@@ -1,6 +1,11 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-30 16:03:42
+ */
 import App from './App.vue';
 import router from './router';
 import store from './stores';
+import NoData from '@/components/no-data';
 import '@/api/index';
 
 import './styles';
@@ -13,4 +18,5 @@ import '@arco-design/web-vue/dist/arco.css'; // Arco 默认样式
 const app = createApp(App);
 app.use(store);
 app.use(router);
+app.component('NoData', NoData);
 app.mount('#app');

src/views/components/dataEngine/hotCloud.vue

@@ -13,8 +13,10 @@
         </a-tooltip>
       </div>
 
-      <div class="multi-row-tag-cloud">
+      <div class="multi-row-tag-cloud h-472px">
+        <NoData v-if="tagRows.length === 0" text="暂无数据" />
         <!-- 动态生成多行标签 -->
+        <template v-else>
           <div
             v-for="(row, rowIndex) in tagRows"
             :key="rowIndex"
@@ -47,6 +49,7 @@
               </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行时

src/views/components/dataEngine/hotTranslation.vue

@@ -21,6 +21,9 @@
         :pagination="false"
         @change="handleChange"
       >
+        <template #empty>
+          <NoData />
+        </template>
         <template #hotTitle>
           <a-space>
             <span>热度指数</span>

src/views/components/dataEngine/keyBrandMovement.vue

@@ -24,6 +24,9 @@
         :pagination="false"
         @change="handleChange"
       >
+        <template #empty>
+          <NoData />
+        </template>
         <template #hotTitle>
           <a-space>
             <span>热度指数</span>
@@ -86,6 +89,9 @@
       </div>
 
       <a-table :data="otherList" :columns="columns2" :pagination="false" :scroll="true" style="font-size: 12px">
+        <template #empty>
+          <NoData />
+        </template>
       </a-table>
     </a-space>
   </view>

src/views/components/dataEngine/keyWord.vue

@@ -23,6 +23,9 @@
         :pagination="false"
         @change="handleChange"
       >
+        <template #empty>
+          <NoData />
+        </template>
         <template #heatLevel>
           <a-space>
             <span>热度指数</span>
@@ -110,6 +113,9 @@
           :pagination="false"
           @change="handleChange"
         >
+          <template #empty>
+            <NoData />
+          </template>
           <template #felling="{ record }">
             <div class="flex items-center">
               <img :src="fellingStatus[record.felling].icon" class="w-20px h-20px mr-4px" />
@@ -142,6 +148,9 @@
         :pagination="false"
         @change="handleChange"
       >
+        <template #empty>
+          <NoData />
+        </template>
         <template #rank="{ record }">
           <img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
           <img v-else-if="record.rank == 2" :src="topImages[1]" style="width: 25px; height: 17px" />

src/views/components/dataEngine/userPainPoints.vue

@@ -25,6 +25,9 @@
         :pagination="false"
         @change="handleChange"
       >
+        <template #empty>
+          <NoData />
+        </template>
         <template #rank="{ record }">
           <img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
           <img v-else-if="record.rank == 2" :src="topImages[1]" style="width: 25px; height: 17px" />

src/views/components/dataEngine/userPersona.vue

@@ -11,7 +11,7 @@
             <icon-question-circle size="16" class="!color-#737478" />
           </a-tooltip>
         </div>
-        <a-space>
+        <a-space v-if="genderData.length > 0">
           <div id="container" class="w-300px h-300px"></div>
 
           <a-space direction="vertical" style="font-size: 14px">
@@ -31,6 +31,9 @@
             </a-space>
           </a-space>
         </a-space>
+        <div v-else>
+          <NoData class="w-100% h-100%" />
+        </div>
       </div>
       <!-- 2. 年龄分布 -->
       <div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px flex-1 flex flex-col">
@@ -42,15 +45,17 @@
               <icon-question-circle size="16" class="!color-#737478" />
             </a-tooltip>
           </div>
-          <a-space align="center">
+          <a-space v-if="ageValueData.length > 0" align="center">
             <span style="width: 16px; height: 8px; background-color: #6d4cfe; border-radius: 2px"></span>
             <span style="color: #6d4cfe">占比</span>
             <span style="width: 16px; height: 8px; background-color: #f64b31; border-radius: 2px"></span>
             <span style="color: #f64b31">TGI比</span>
           </a-space>
         </a-space>
-
+        <div v-if="ageValueData.length === 0" class="w-100% flex-1">
-        <div id="age-container" class="w-100% flex-1"></div>
+          <NoData />
+        </div>
+        <div v-else id="age-container" class="w-100% flex-1"></div>
       </div>
     </div>
     <div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px flex-1 pb-20px">
@@ -88,6 +93,9 @@
           <a-tabs default-active-key="1" class="h-100%" @change="tabChange">
             <a-tab-pane key="1" title="省份">
               <a-table :data="geoList" :pagination="false" class="h-100%" :scroll="{ y: '100%' }">
+                <template #empty>
+                  <NoData />
+                </template>
                 <template #columns>
                   <a-table-column title="排名" data-index="rank" />
                   <a-table-column title="省份" data-index="geo" />
@@ -99,6 +107,9 @@
             </a-tab-pane>
             <a-tab-pane key="2" title="城市">
               <a-table :data="geoList" :pagination="false" class="h-100%" :scroll="{ y: '100%' }">
+                <template #empty>
+                  <NoData />
+                </template>
                 <template #columns>
                   <a-table-column title="排名" data-index="rank" />
                   <a-table-column title="城市" data-index="geo" />
@@ -171,7 +182,9 @@ const getAgeDistributionsList = async () => {
   const { code, data } = await fetchAgeDistributionsList(params);
   if (code === 200) {
     ageValueData.value = data;
+    nextTick(() => {
       drawAgeChart();
+    });
   }
 };
 

src/views/components/workplace/index.vue

@@ -14,13 +14,13 @@
           @refresh="getProductList"
         />
       </div>
-      <a-empty v-if="products.length === 0" />
+      <NoData v-if="products.length === 0" />
     </Container>
     <Container title="成功案例" class="body mt-24px">
       <div class="flex flex-wrap">
         <Case v-for="item in cases" :key="item.id" class="mt-20px ml-20px" :data="item"></Case>
       </div>
-      <a-empty v-if="cases.length === 0" />
+      <NoData v-if="cases.length === 0" />
     </Container>
   </div>
 </template>