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 15:31:06 +08:00
parent 240861f933
commit 633ce3014f
3 changed files with 288 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
frontend/index.html
View File

@@ -77,7 +77,33 @@
<h2>📝 字幕样式设置</h2>
<button class="panel-close" data-panel="captionPanel">×</button>
</div>
<div class="panel-content" style="max-height: 500px; overflow-y: auto;">
<div class="panel-content" style="max-height: 600px; overflow-y: auto;">
<!-- 字幕容器样式 -->
<div class="caption-style-section">
<h3>字幕容器 (container)</h3>
<div class="form-group">
<label for="containerBgColor">背景颜色</label>
<input type="color" id="containerBgColor" value="#1a1a2e">
</div>
<div class="form-group">
<label for="containerBgOpacity">背景透明度</label>
<input type="range" id="containerBgOpacity" value="85" min="0" max="100">
<span class="range-value">85%</span>
</div>
<div class="form-group">
<label for="containerBorderColor">边框颜色</label>
<input type="color" id="containerBorderColor" value="#333333">
</div>
<div class="form-group">
<label for="containerBorderRadius">圆角 (px)</label>
<input type="number" id="containerBorderRadius" value="8" min="0" max="20">
</div>
<div class="form-group">
<label for="containerPadding">内边距 (px)</label>
<input type="number" id="containerPadding" value="10" min="0" max="30">
</div>
</div>
<!-- 提示文字样式 -->
<div class="caption-style-section">
<h3>提示文字 (tip)</h3>
@@ -100,6 +126,23 @@
<label for="tipLineHeight">行高</label>
<input type="number" id="tipLineHeight" value="1.5" min="1" max="3" step="0.1">
</div>
<div class="form-group">
<label for="tipBgColor">背景颜色</label>
<input type="color" id="tipBgColor" value="#2a2a3e">
</div>
<div class="form-group">
<label for="tipBgOpacity">背景透明度</label>
<input type="range" id="tipBgOpacity" value="60" min="0" max="100">
<span class="range-value">60%</span>
</div>
<div class="form-group">
<label for="tipBorderRadius">圆角 (px)</label>
<input type="number" id="tipBorderRadius" value="4" min="0" max="15">
</div>
<div class="form-group">
<label for="tipPadding">内边距 (px)</label>
<input type="number" id="tipPadding" value="6" min="0" max="20">
</div>
</div>
<!-- 消息文字样式 -->
@@ -124,6 +167,23 @@
<label for="messageLineHeight">行高</label>
<input type="number" id="messageLineHeight" value="1.5" min="1" max="3" step="0.1">
</div>
<div class="form-group">
<label for="messageBgColor">背景颜色</label>
<input type="color" id="messageBgColor" value="#2a2a3e">
</div>
<div class="form-group">
<label for="messageBgOpacity">背景透明度</label>
<input type="range" id="messageBgOpacity" value="60" min="0" max="100">
<span class="range-value">60%</span>
</div>
<div class="form-group">
<label for="messageBorderRadius">圆角 (px)</label>
<input type="number" id="messageBorderRadius" value="4" min="0" max="15">
</div>
<div class="form-group">
<label for="messagePadding">内边距 (px)</label>
<input type="number" id="messagePadding" value="8" min="0" max="20">
</div>
</div>
<!-- 热词标题样式 -->
@@ -148,6 +208,23 @@
<label for="hotTitleLineHeight">行高</label>
<input type="number" id="hotTitleLineHeight" value="1.5" min="1" max="3" step="0.1">
</div>
<div class="form-group">
<label for="hotTitleBgColor">背景颜色</label>
<input type="color" id="hotTitleBgColor" value="#3a3a4e">
</div>
<div class="form-group">
<label for="hotTitleBgOpacity">背景透明度</label>
<input type="range" id="hotTitleBgOpacity" value="60" min="0" max="100">
<span class="range-value">60%</span>
</div>
<div class="form-group">
<label for="hotTitleBorderRadius">圆角 (px)</label>
<input type="number" id="hotTitleBorderRadius" value="4" min="0" max="15">
</div>
<div class="form-group">
<label for="hotTitlePadding">内边距 (px)</label>
<input type="number" id="hotTitlePadding" value="6" min="0" max="20">
</div>
</div>
<!-- 热词问题样式 -->
@@ -172,6 +249,23 @@
<label for="hotIssuesLineHeight">行高</label>
<input type="number" id="hotIssuesLineHeight" value="1.5" min="1" max="3" step="0.1">
</div>
<div class="form-group">
<label for="hotIssuesBgColor">背景颜色</label>
<input type="color" id="hotIssuesBgColor" value="#2a2a3e">
</div>
<div class="form-group">
<label for="hotIssuesBgOpacity">背景透明度</label>
<input type="range" id="hotIssuesBgOpacity" value="60" min="0" max="100">
<span class="range-value">60%</span>
</div>
<div class="form-group">
<label for="hotIssuesBorderRadius">圆角 (px)</label>
<input type="number" id="hotIssuesBorderRadius" value="4" min="0" max="15">
</div>
<div class="form-group">
<label for="hotIssuesPadding">内边距 (px)</label>
<input type="number" id="hotIssuesPadding" value="6" min="0" max="20">
</div>
</div>
<button id="applyCaptionStyleBtn" class="btn btn-primary" style="width: 100%; margin-top: 16px;">应用样式</button>