## 任务目标

在管理后台项目中实现一个无需登录、效果炫酷的“天梯排行”数字大屏页面。支持切换不同门店（羽毛球馆）查看实时排名。

## 技术实现方案

### 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. **整体视觉优化**: 调整色彩、光效和动画细节。

确认此方案后，我将开始代码编写。