Files

rjl 18e3f6f7f2 feat(admin): 优化大屏开发体验并完善用户界面组件

- 新增大屏开发调试指南文档，包含设计基准、调试方法和字体配置说明
- 添加字体大小预览工具，支持多分辨率视口切换（2048x1080/1920x1080/3840x2160）
- 新增字体资源 README 文档和团队标题背景图片
- 优化用户界面背景图片（title-bg3.png、title-bg4.png）
- 更新 ActionButton 和 CompetitionLayout 组件样式
- 完善用户模块各页面布局（分析、封面、抽签、游戏、规则、团队）
- 优化题目渲染器组件和成绩详情页面
- 更新 UnoCSS 配置以支持大屏字体缩放方案

2026-03-20 17:05:23 +08:00

3.0 KiB

Raw Blame History

大屏开发调试指南

项目配置

设计基准: 2048 x 1080
缩放方案: VScaleScreen
目标设备: 超级大屏（投屏显示）

开发调试方法

方法 1: Chrome DevTools 自定义设备（推荐）

打开 Chrome DevTools (F12)
点击设备模拟按钮 (Ctrl/Cmd + Shift + M)
在设备下拉菜单中选择 "Edit..."
添加自定义设备：
- Device Name: Large Screen 2048x1080
- Width: 2048
- Height: 1080
- Device pixel ratio: 1
- User agent string: (保持默认)
选择刚创建的设备进行调试

方法 2: 浏览器窗口缩放

将浏览器窗口调整为合适大小
使用浏览器缩放功能 (Ctrl/Cmd + 鼠标滚轮)
调整到能看到完整布局的比例

方法 3: 响应式设计模式

在 DevTools 中：

选择 "Responsive" 模式
手动输入宽度: 2048
手动输入高度: 1080

字体大小说明

当前字体配置已针对 2048x1080 优化：

Class	实际大小	适用场景
`text-xs`	12.8px	辅助文字、标注
`text-sm`	15.2px	次要文字
`text-base`	17.6px	正文
`text-lg`	20.8px	小标题
`text-xl`	24px	中标题
`text-2xl`	28px	大标题
`text-3xl`	33.6px	特大标题
`text-4xl`	40px	主标题
`text-5xl`	51.2px	超大标题
`text-6xl`	64px	巨大标题

VScaleScreen 工作原理

设计基准 (2048x1080)
    ↓
VScaleScreen 自动缩放
    ↓
实际显示设备 (任意分辨率)

示例：

在 1920x1080 屏幕上：内容会略微缩小
在 3840x2160 (4K) 屏幕上：内容会放大约 2 倍
在更大的 LED 屏上：内容会等比例放大

常见问题

Q: 在我的电脑上字体看起来太大了？

A: 这是正常的！因为你的设计基准 (2048x1080) 比普通电脑屏幕大。请使用上述方法在正确的分辨率下调试。

Q: 如何确认实际大屏的分辨率？

询问现场技术人员
常见大屏分辨率：
- 1920x1080 (Full HD)
- 2560x1440 (2K)
- 3840x2160 (4K)
- 7680x4320 (8K)

Q: 需要修改 VScaleScreen 的尺寸吗？

A: 通常不需要。保持 2048x1080 即可，VScaleScreen 会自动适配。除非：

实际大屏比例不是 16:9
需要针对特定分辨率优化

Q: 如何微调字体大小？

A: 修改 uno.config.ts 中的 fontSize 配置，然后重启开发服务器。

测试清单

部署前请确认：

在 2048x1080 分辨率下所有文字清晰可读
所有布局元素位置正确
动画效果流畅
图片清晰不模糊（建议使用 2x 或 3x 分辨率的图片）
在实际大屏上测试（如果可能）

性能优化建议

图片资源: 使用 WebP 格式，准备高分辨率版本
字体: 使用 Web Font，确保在大屏上渲染清晰
动画: 使用 CSS transform 和 opacity，避免触发重排
测试: 在接近实际大屏的设备上测试性能

联系与支持

如有问题，请联系开发团队。

3.0 KiB Raw Blame History Unescape Escape