前端页面历史记录列表实现

Debate_front/src/components/ConversationHistory.vue

@@ -175,14 +175,14 @@ export default {
 }
 
 .no-data-icon {
-  width: 80px;
-  height: 80px;
+  width: 200px;
+  height: 200px;
   opacity: 0.6;
 }
 
 .no-data-text {
   margin-top: 15px;
-  font-size: 16px;
+  font-size: 24px;
   color: #999;
 }
 

Debate_front/src/components/HomeCom.vue

@@ -91,28 +91,43 @@
       </view>
 
       <view class="activity-list">
-        <view
-          class="activity-item"
-          v-for="(activity, index) in recentActivities.slice(0, 3)"
-          :key="index"
-        >
-          <view class="activity-icon" :class="activity.type">
-            <image
-              :src="getActivityIcon(activity.type)"
-              mode="aspectFit"
-            ></image>
-          </view>
-          <view class="activity-content">
-            <view class="activity-title">{{ activity.title?activity.title:activity.preview }}</view>
-            <view class="activity-time">{{ formatDate(activity.updateTime) }}</view>
-          </view>
-          <view class="activity-arrow">
-            <image
-              src="/static/icons/arrow-right-s-line.png"
-              mode="aspectFit"
-            ></image>
+        <view v-if="recentActivities.length > 0">
+          <view
+            class="activity-item"
+            v-for="(activity, index) in recentActivities.slice(0, 3)"
+            :key="index"
+          >
+            <view class="activity-icon" :class="activity.type">
+              <image
+                :src="getActivityIcon(activity.type)"
+                mode="aspectFit"
+              ></image>
+            </view>
+            <view class="activity-content">
+              <view class="activity-title">{{
+                activity.title ? activity.title : activity.preview
+              }}</view>
+              <view class="activity-time">{{
+                formatDate(activity.updateTime)
+              }}</view>
+            </view>
+            <view class="activity-arrow">
+              <image
+                src="/static/icons/arrow-right-s-line.png"
+                mode="aspectFit"
+              ></image>
+            </view>
           </view>
         </view>
+        <!-- 没有数据时显示提示信息 -->
+        <div v-else class="no-data">
+          <image
+            src="/static/icons/no-data.png"
+            mode="aspectFit"
+            class="no-data-icon"
+          />
+          <p class="no-data-text">暂无数据</p>
+        </div>
       </view>
     </view>
 
@@ -288,6 +303,25 @@ export default {
 </script>
 
 <style scoped>
+.no-data {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-top: 50px;
+}
+
+.no-data-icon {
+  width: 200px;
+  height: 100px;
+  opacity: 0.6;
+}
+
+.no-data-text {
+  margin-top: 15px;
+  font-size: 24px;
+  color: #999;
+}
 .slide-enter-active,
 .slide-leave-active {
   transition: all 0.3s ease-in-out;