# 赛事中心赛程、直播、赔率组件设计 ## 目标 赛事中心在当前页面内提供“赛程 / 直播 / 赔率”三个内容 Tab。点击 Tab 只切换赛事列表区域，不再切换到世界杯主题组件。 蓝色世界杯专题卡继续保留，点击专题卡仍可进入原世界杯专题页；本次不删除或改变世界杯专题页原有功能。 ## 页面结构 `MatchCenterPanel.vue` 保留赛事中心标题、AI 助手入口和世界杯专题卡。 新增通用赛事中心内容组件 `MatchCenterTabsPanel.vue`，统一负责： - 赛程、直播、赔率 Tab 状态。 - 赛程 Tab 的运动分类和联赛筛选。 - 三类数据的加载、空状态和错误提示。 - 赛事详情、直播播放等交互。 世界杯专题卡与三个内容 Tab 分离：只有专题卡触发 `open-worldcup`，三个内容 Tab 不再向 `MatchShellPage.vue` 发送世界杯视图切换事件。 ## 赛程 Tab - 默认选中赛程。 - 沿用当前赛事中心的赛事列表样式和分组方式。 - 保留运动分类、联赛筛选、进行中/未开始/已结束分组、折叠状态和已结束赛事分页加载。 - 点击赛事卡继续进入现有比赛详情页。 ## 直播 Tab - 新增通用赛事直播接口，不复用只过滤世界杯的 `worldCupLiveCards`。 - 从 `la_match_live` 关联可见赛事，返回未结束且存在可播放地址的直播卡。 - 不显示运动分类或联赛分类筛选，直接展示当前可用的全部直播。 - 直播卡保留赛事名称、主播、观看数、关注数、公告、封面和播放地址。 - H5、App 的视频播放和海报模式继续复用现有世界杯直播卡的兼容处理。 ## 赔率 Tab - 新增通用赛事赔率接口，不再依赖世界杯赛事映射。 - 继续读取 `la_match_odds`，保留滚球盘、今日盘、早盘筛选。 - 保留联赛/球队关键词搜索。 - 不显示赛程的运动分类或联赛分类筛选。 - 仅保留盘口类型筛选，以及按联赛名、主队、客队进行关键词搜索。 - 赔率记录与站内普通赛事匹配成功时补充赛事 ID、队徽、比分和状态，允许进入比赛详情；未匹配时只展示赔率。 - 继续过滤没有任何有效盘口值的空赔率记录。 ## 后端接口 在现有 `MatchController` 和赛事服务中增加通用接口： - `GET /api/match/liveCards` - 参数：`sport_type`、`league_name` - 返回通用直播卡列表。 - `GET /api/match/odds` - 参数：`sport_type`、`league_name`、`show_type`、`source_site`、`keyword`、`include_special`、`limit` - 返回按比赛聚合的赔率列表。 世界杯原接口继续保留，避免影响世界杯专题页： - `/api/match/worldCupLiveCards` - `/api/match/worldCupOdds` 通用与世界杯接口复用服务层的查询、格式化和赛事匹配方法，避免复制赔率盘口组装与直播地址解析逻辑。 ## 状态与交互 - 切换 Tab 时按需加载对应数据，已加载数据可缓存，筛选条件改变后重新请求。 - 赛程、直播、赔率分别展示独立加载状态和空状态。 - 接口失败时保留当前筛选条件并展示无数据/提示，不影响切回其他 Tab。 - 赔率搜索确认、清除关键词和盘口切换均只刷新赔率数据。 ## 改动范围 预计涉及： - `uniapp/src/packages_match/components/MatchCenterPanel.vue` - `uniapp/src/packages_match/components/MatchCenterTabsPanel.vue` - `uniapp/src/api/match.ts` - `server/app/api/controller/MatchController.php` - `server/app/common/service/match/MatchLiveService.php` - 赔率通用查询相关服务或控制器辅助方法 - `业务进度管理.md` - `设计稿映射.md` 不修改数据库表结构，不新增页面路由。 ## 验收标准 1. 赛事中心默认显示赛程内容。 2. 点击赛程、直播、赔率只切换当前页面列表区域。 3. 三个 Tab 切换时不出现世界杯主题头部。 4. 赛程保持现有赛事列表、运动分类、联赛筛选和分页行为。 5. 直播展示通用赛事直播，不局限于世界杯。 6. 赔率保留盘口分类和联赛/球队搜索筛选。 7. 世界杯专题卡仍能进入原世界杯专题页。 8. 原世界杯专题页的赛程、直播、赔率等功能不受影响。