hookehuyr

feat(ui): 统一使用 nut-empty 组件优化空状态显示

替换多个页面的自定义空状态为 NutUI 的 Empty 组件,提升 UI 一致性和用户体验。涉及页面包括:搜索页、知识库页、资料列表页、计划书页、收藏页和意见反馈页。
...@@ -5,6 +5,33 @@ ...@@ -5,6 +5,33 @@
5 5
6 --- 6 ---
7 7
8 +## [2026-02-03] - 优化列表空状态显示
9 +
10 +### 优化
11 +- 统一使用 `nut-empty` 组件替换自定义的空状态展示,提升 UI 一致性
12 + - 搜索页 (`src/pages/search/index.vue`):搜索无结果时显示
13 + - 知识库页 (`src/pages/knowledge-base/index.vue`):产品列表为空时显示
14 + - 资料列表页 (`src/pages/material-list/index.vue`):资料列表为空时显示
15 + - 计划书页 (`src/pages/plan/index.vue`):计划书列表为空时显示
16 + - 收藏页 (`src/pages/favorites/index.vue`):收藏列表为空时显示
17 + - 意见反馈页 (`src/pages/feedback-list/index.vue`):反馈记录为空时显示
18 +- 为空状态添加合适的描述文字,如"暂无搜索结果"、"暂无相关产品"等
19 +
20 +---
21 +
22 +**详细信息**
23 +- **影响文件**:
24 + - `src/pages/search/index.vue`
25 + - `src/pages/knowledge-base/index.vue`
26 + - `src/pages/material-list/index.vue`
27 + - `src/pages/plan/index.vue`
28 + - `src/pages/favorites/index.vue`
29 + - `src/pages/feedback-list/index.vue`
30 +- **技术栈**: Vue 3, NutUI
31 +- **测试状态**: ✅ 已完成 (代码逻辑验证)
32 +
33 +---
34 +
8 ## [2026-02-03] - 更新项目文档结构 35 ## [2026-02-03] - 更新项目文档结构
9 36
10 ### 文档 37 ### 文档
......
...@@ -71,10 +71,8 @@ ...@@ -71,10 +71,8 @@
71 </view> 71 </view>
72 72
73 <!-- Empty State --> 73 <!-- Empty State -->
74 - <view v-if="filteredList.length === 0" 74 + <view v-if="filteredList.length === 0">
75 - class="flex flex-col items-center justify-center py-[100rpx] text-gray-400"> 75 + <nut-empty description="暂无收藏内容" image="empty" />
76 - <IconFont name="star" size="48" class="mb-[24rpx] opacity-50" />
77 - <text class="text-[28rpx]">暂无收藏内容</text>
78 </view> 76 </view>
79 </view> 77 </view>
80 78
......
...@@ -77,9 +77,9 @@ ...@@ -77,9 +77,9 @@
77 77
78 <!-- Empty State --> 78 <!-- Empty State -->
79 <view v-else class="empty-state"> 79 <view v-else class="empty-state">
80 - <view class="empty-icon">💬</view> 80 + <nut-empty description="暂无反馈记录" image="empty">
81 - <view class="empty-title">暂无反馈记录</view> 81 + <view class="text-[#9ca3af] text-[24rpx] mt-[10rpx]">您还没有提交过任何意见反馈</view>
82 - <view class="empty-desc">您还没有提交过任何意见反馈</view> 82 + </nut-empty>
83 </view> 83 </view>
84 84
85 <!-- Load More --> 85 <!-- Load More -->
......
...@@ -94,8 +94,8 @@ ...@@ -94,8 +94,8 @@
94 </view> 94 </view>
95 95
96 <!-- 空状态 --> 96 <!-- 空状态 -->
97 - <view v-if="!loading && products.length === 0" class="flex flex-col items-center justify-center py-[100rpx]"> 97 + <view v-if="!loading && products.length === 0">
98 - <text class="text-gray-400 text-[28rpx] w-full text-center">暂无相关产品</text> 98 + <nut-empty description="暂无相关产品" image="empty" />
99 </view> 99 </view>
100 </scroll-view> 100 </scroll-view>
101 </view> 101 </view>
......
...@@ -90,8 +90,8 @@ ...@@ -90,8 +90,8 @@
90 </view> 90 </view>
91 91
92 <!-- 空状态 --> 92 <!-- 空状态 -->
93 - <view v-if="currentList.length === 0" class="flex flex-col items-center justify-center py-[100rpx]"> 93 + <view v-if="currentList.length === 0">
94 - <text class="text-gray-400 text-[28rpx]">暂无相关资料</text> 94 + <nut-empty description="暂无相关资料" image="empty" />
95 </view> 95 </view>
96 </view> 96 </view>
97 </view> 97 </view>
......
...@@ -84,10 +84,8 @@ ...@@ -84,10 +84,8 @@
84 </view> 84 </view>
85 85
86 <!-- Empty State --> 86 <!-- Empty State -->
87 - <view v-if="filteredList.length === 0" 87 + <view v-if="filteredList.length === 0">
88 - class="flex flex-col items-center justify-center py-[100rpx] text-gray-400"> 88 + <nut-empty description="暂无相关计划书" image="empty" />
89 - <IconFont name="order" size="48" class="mb-[24rpx] opacity-50" />
90 - <text class="text-[28rpx]">暂无相关计划书</text>
91 </view> 89 </view>
92 </view> 90 </view>
93 91
......
...@@ -111,14 +111,10 @@ ...@@ -111,14 +111,10 @@
111 </view> 111 </view>
112 112
113 <!-- Empty State (已搜索但无结果) --> 113 <!-- Empty State (已搜索但无结果) -->
114 - <view v-else-if="hasSearched && searchResults.length === 0" class="flex flex-col items-center justify-center py-[120rpx]"> 114 + <view v-else-if="hasSearched && searchResults.length === 0" class="flex flex-col items-center justify-center py-[40rpx]">
115 - <!-- <image 115 + <nut-empty description="暂无搜索结果" image="empty">
116 - class="w-[320rpx] h-[320rpx] mb-[40rpx]"
117 - src="https://picsum.photos/seed/empty/320/320"
118 - mode="aspectFit"
119 - /> -->
120 - <view class="text-[#6B7280] text-[28rpx]">暂无搜索结果</view>
121 <view class="text-[#9CA3AF] text-[24rpx] mt-[12rpx]">试试其他关键词吧</view> 116 <view class="text-[#9CA3AF] text-[24rpx] mt-[12rpx]">试试其他关键词吧</view>
117 + </nut-empty>
122 </view> 118 </view>
123 119
124 <!-- Initial State (从未搜索过) --> 120 <!-- Initial State (从未搜索过) -->
......