You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
广播系统需求文档
1. 系统概述
开发一个基于Tauri v2框架的同步屏应用程序, 用于显示可滚动的标尺刻度界面。
2. 技术栈
框架: Tauri v2
前端: HTML/CSS/JavaScript、vue3
3. 功能需求
3.1 窗口管理
窗口类型:无边框窗口
初始位置:窗口左上角固定在屏幕左上角坐标(0,0)
窗口行为:程序启动时自动打开
3.2 主要显示区域
主容器: 高64px, 宽5000px的div元素
显示逻辑:
当屏幕宽度小于5000px时( 例如1080px) , 需要将主div按屏幕高度分段显示
分段规则: 每个分段高度为64px, 宽度等于屏幕宽度
分段位置:
第一段:位置(0, 0), 尺寸1080px × 64px
第二段:位置(0, 64), 尺寸1080px × 64px
第三段:位置(0, 128), 尺寸1080px × 64px
依此类推, 直到完整显示整个5000px宽度的内容
3.3 标尺刻度显示
大格: 每100px一个大刻度标记
小格: 每10px一个小刻度标记
显示范围: 覆盖整个5000px宽度区域
3.4 子元素处理
子div支持: 主div内可包含子div元素
切断处理: 当子div位于分段切断位置时, 同样需要进行切断显示
渲染一致性:确保子元素在各分段中的显示保持视觉连续性
4. 非功能需求
性能要求: 流畅渲染5000px宽度的标尺内容
兼容性:适配不同屏幕分辨率
用户体验:无边框设计,精确的刻度显示
5. 验收标准
程序启动时创建无边框窗口并定位到屏幕左上角
正确显示5000px × 64px的主div内容
读取主屏幕的宽度并正确分段显示( 每段64px高度)
标尺刻度按100px大格、10px小格准确显示
子div在切断处正确处理显示