hookehuyr

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

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