前端-组件渲染-AI推荐空数据误报加载失败

问题现象

• 进入"AI 推荐"页面，列表无数据时弹出 toast："加载推荐列表失败"
• 实际并非加载失败，只是没有评分数据（本地环境无 cron job 自动评分）
• 用户误以为服务故障，体验差

核心问题

• fetchRecommendations() 的 catch 块对两类场景不做区分：
• 无数据：API 返回空 { items: [], total: 0 } → 走空判断逻辑
• 真错误：API 异常 / 网络故障 → catch 弹出 ElMessage.error('加载推荐列表失败')
• 当本地或新日期无评分记录时，空数据的空表格无任何引导提示

解决方法

1. 新增 loadError 状态区分无数据 vs 加载失败

在 web/src/views/AIRecommend.vue 中：

const loadError = ref(false)

2. 改造 fetchRecommendations 的 catch 块

async function fetchRecommendations() {
  loading.value = true
  loadError.value = false       // 重置
  try {
    const res = await recommendationApi.getArticles({ ... })
    items.value = res?.data?.items ?? []
    total.value = res?.data?.total ?? 0
  } catch (e) {
    console.error(e)
    loadError.value = true      // 标记错误，不弹 toast
    items.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

3. el-table 添加 #empty 插槽

<el-table :data="items" ...>
  <template #empty>
    <el-empty :description="loadError ? '加载失败，请稍后重试' : '暂无推荐数据'">
      <el-button v-if="!loadError" type="primary" @click="handleScore" :loading="scoring">
        点击进行 AI 综合评分
      </el-button>
      <el-button v-else @click="fetchRecommendations">重新加载</el-button>
    </el-empty>
  </template>
  ...
</el-table>

下次防错措施

列表组件空状态开发规范

• 禁止在 catch 中用 ElMessage.error 提示空数据 — 用组件内空占位替代
• 每个列表组件必须提供 #empty 插槽，根据是否加载失败展示不同引导
• 空状态模板：无错误时引导触发数据生成（如评分按钮），有错误时提供重试按钮

检查已有列表组件空状态

# 检查其他 Vue 页面是否缺少 #empty 处理
grep -r "ElMessage.error.*加载\|ElMessage.warning.*暂无" web/src/views/