ethanfly
e0713c3fd8
- 新增无需登录的数字大屏页面，包含蓝色和橙色主题 - 在管理后台仪表盘添加大屏入口快速按钮 - 扩展天梯排名接口，支持大屏显示模式（绕过最低参赛场次限制） - 统一将项目品牌名称从“影杀/羽动俱乐部”更新为“英飒俱乐部” - 更新相关配置文件、文档和界面中的品牌名称 - 添加公开数据接口用于获取门店列表和天梯排名
70 lines
2.4 KiB
Markdown
70 lines
2.4 KiB
Markdown
## 任务目标
|
||
|
||
在管理后台项目中实现一个无需登录、效果炫酷的“天梯排行”数字大屏页面。支持切换不同门店（羽毛球馆）查看实时排名。
|
||
|
||
## 技术实现方案
|
||
|
||
### 1. 路由与权限配置
|
||
|
||
* **新建路由**: 在 [router/index.js](file:///e:/workspace/yingsha/admin/src/router/index.js) 中添加顶级路由 `/display/ranking`。
|
||
|
||
* **免登访问**: 设置 `meta: { public: true }`，使其绕过全局路由守卫的登录检查。
|
||
|
||
* **独立布局**: 不使用 `MainLayout`，采用全新的全屏容器。
|
||
|
||
### 2. 公共数据接口
|
||
|
||
* **新建接口定义**: 创建 `src/api/display.js`，封装后端公开的 API 接口：
|
||
|
||
* `getPublicStores()`: 调用 `/store/list` 获取门店列表。
|
||
|
||
* `getPublicRanking(params)`: 调用 `/ladder/ranking` 获取天梯实时排行。
|
||
|
||
### 3. 数字大屏 UI 设计
|
||
|
||
* **视觉风格**:
|
||
|
||
* 采用深色系背景（科技感深蓝/纯黑），搭配青色、橙色、紫色等荧光色点缀。
|
||
|
||
* 使用大尺寸字体，增强远距离阅读性。
|
||
|
||
* 添加背景粒子效果或动态渐变背景。
|
||
|
||
* **页面布局**:
|
||
|
||
* **顶部**: 动态时间显示 + 酷炫的标题装饰（英飒俱乐部天梯战力榜）。
|
||
|
||
* **侧边/浮动**: 门店切换菜单，采用科技感按钮或自动轮播逻辑。
|
||
|
||
* **主体**: 排行榜列表。
|
||
|
||
* **前三名**: 特殊动效和皇冠/奖牌图标。
|
||
|
||
* **列表项**: 包含排名、头像、昵称、战力值（大字显示）、胜率及等级标识。
|
||
|
||
* **交互动效**:
|
||
|
||
* 列表入场时的交替淡入效果。
|
||
|
||
* 排名数据变动时的数字滚动动画。
|
||
|
||
* 自动轮播排行榜（如果数据超过一屏）。
|
||
|
||
### 4. 关键功能实现
|
||
|
||
* **门店切换**: 顶部或侧边提供门店选择器，并且url也要能够接受门店参数，实现每个门店单独的url。
|
||
|
||
* **自适应适配**: 采用 `transform: scale()` 或 `vw/vh` 方案，确保在各种分辨率的大屏电视或显示器上都能完美展示。
|
||
|
||
* **自动刷新**: 页面每 5 分钟自动拉取一次最新数据，确保排名实时性。
|
||
|
||
## 实施步骤
|
||
|
||
1. **创建 API 模块**: 定义公共访问接口。
|
||
2. **编写大屏组件**: 实现 HTML/CSS 结构与动画效果。
|
||
3. **配置路由**: 注册页面并开启免登权限。
|
||
4. **集成门店切换**: 实现手动切换与数据联动逻辑。
|
||
5. **整体视觉优化**: 调整色彩、光效和动画细节。
|
||
|
||
确认此方案后，我将开始代码编写。
|