feat(ui): 统一使用 nut-empty 组件优化空状态显示
替换多个页面的自定义空状态为 NutUI 的 Empty 组件,提升 UI 一致性和用户体验。涉及页面包括:搜索页、知识库页、资料列表页、计划书页、收藏页和意见反馈页。
Showing
7 changed files
with
41 additions
and
22 deletions
| ... | @@ -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 (从未搜索过) --> | ... | ... |
-
Please register or login to post a comment