Projects/antiwear-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(字幕): 添加字幕样式设置面板及拖拽缩放功能

Browse Source 
添加字幕样式设置浮动面板，包含宽度、高度、字体大小等配置项
实现字幕容器的拖拽移动和缩放功能
添加字幕容器自动检测和初始化逻辑
This commit is contained in:
ZF Sun
2026-05-06 14:24:18 +08:00
parent ed21ce8f2c
commit 8b069194aa
3 changed files with 190 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/index.html
View File

@@ -22,6 +22,9 @@
<button id="toggleConfigBtn" class="toolbar-btn" title="连接配置">
⚙️
</button>
<button id="toggleCaptionBtn" class="toolbar-btn" title="字幕样式">
📝
</button>
<button id="toggleLogBtn" class="toolbar-btn" title="事件日志">
📜
</button>
@@ -68,6 +71,37 @@
</div>
</div>
<!-- 浮动面板：字幕样式 -->
<div id="captionPanel" class="floating-panel caption-panel">
<div class="panel-header">
<h2>📝 字幕样式设置</h2>
<button class="panel-close" data-panel="captionPanel">×</button>
</div>
<div class="panel-content">
<div class="form-group">
<label for="captionWidth">宽度 (px)</label>
<input type="number" id="captionWidth" value="400" min="200" max="800">
</div>
<div class="form-group">
<label for="captionHeight">高度 (px)</label>
<input type="number" id="captionHeight" value="200" min="100" max="600">
</div>
<div class="form-group">
<label for="captionFontSize">字体大小 (px)</label>
<input type="number" id="captionFontSize" value="16" min="12" max="32">
</div>
<div class="form-group">
<label for="captionRight">距右侧距离 (px)</label>
<input type="number" id="captionRight" value="20" min="0" max="100">
</div>
<div class="form-group">
<label for="captionBottom">距底部距离 (px)</label>
<input type="number" id="captionBottom" value="20" min="0" max="200">
</div>
<button id="applyCaptionStyleBtn" class="btn btn-primary" style="width: 100%; margin-top: 16px;">应用样式</button>
</div>
</div>
<!-- 浮动面板：事件日志 -->
<div id="logPanel" class="floating-panel log-panel">
<div class="panel-header">