ethanfly
e0713c3fd8
- 新增无需登录的数字大屏页面，包含蓝色和橙色主题 - 在管理后台仪表盘添加大屏入口快速按钮 - 扩展天梯排名接口，支持大屏显示模式（绕过最低参赛场次限制） - 统一将项目品牌名称从“影杀/羽动俱乐部”更新为“英飒俱乐部” - 更新相关配置文件、文档和界面中的品牌名称 - 添加公开数据接口用于获取门店列表和天梯排名
2.4 KiB
2.4 KiB
任务目标
在管理后台项目中实现一个无需登录、效果炫酷的“天梯排行”数字大屏页面。支持切换不同门店（羽毛球馆）查看实时排名。
技术实现方案
1. 路由与权限配置
-
新建路由: 在 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 分钟自动拉取一次最新数据，确保排名实时性。
实施步骤
- 创建 API 模块: 定义公共访问接口。
- 编写大屏组件: 实现 HTML/CSS 结构与动画效果。
- 配置路由: 注册页面并开启免登权限。
- 集成门店切换: 实现手动切换与数据联动逻辑。
- 整体视觉优化: 调整色彩、光效和动画细节。
确认此方案后，我将开始代码编写。