super/yaoayanui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

11

Browse Source
This commit is contained in:
949036910@qq.com
2026-05-27 20:40:22 +08:00
parent b43118112a
commit 8fc42958c3
4 changed files with 418 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/subtitle/TitleLineStyleEditor.vue
View File

@@ -20,6 +20,13 @@ const enableBackground = computed({
},
});
const backgroundOpacityPercent = computed({
get: () => Math.round((Number(line.value.backgroundOpacity) || 0) * 100),
set: (value) => {
line.value.backgroundOpacity = Math.max(0, Math.min(100, Number(value) || 0)) / 100;
},
});
const enableShadow = computed({
get: () => (line.value.shadowOffset ?? 0) > 0,
set: (on) => {
@@ -44,7 +51,7 @@ const previewStyle = computed(() => {
}
return {
fontFamily: line.value.fontName ? `'${line.value.fontName}'` : "优设标题黑",
fontSize: `${Math.min(Number(line.value.fontSize) || 80, 48)}px`,
fontSize: `${Number(line.value.fontSize) || 80}px`,
color: line.value.fontColor || "#fff",
backgroundColor:
enableBackground.value && line.value.backgroundColor !== "transparent"
@@ -52,6 +59,8 @@ const previewStyle = computed(() => {
: "transparent",
textShadow: shadows.join(", ") || "none",
padding: "8px 16px",
display: "inline-block",
lineHeight: 1.12,
};
});
</script>
@@ -108,6 +117,22 @@ const previewStyle = computed(() => {
<Checkbox v-model="enableBackground" binary />
启用背景
</label>
<div v-if="enableBackground" class="mt-2 grid grid-cols-2 gap-3">
<div>
<label class="mb-1 block text-xs text-slate-500">背景颜色</label>
<div class="flex items-center gap-2">
<input v-model="line.backgroundColor" type="color" class="h-8 w-10" />
<InputText v-model="line.backgroundColor" size="small" class="flex-1" />
</div>
</div>
<div>
<label class="mb-1 block text-xs text-slate-500">背景透明度</label>
<div class="flex items-center gap-2">
<Slider v-model="backgroundOpacityPercent" :min="0" :max="100" class="flex-1" />
<span class="w-10 text-right text-xs">{{ backgroundOpacityPercent }}%</span>
</div>
</div>
</div>
</div>
<div>
@@ -116,17 +141,26 @@ const previewStyle = computed(() => {
<Checkbox v-model="enableShadow" binary />
启用阴影
</label>
<div v-if="enableShadow" class="flex items-center gap-2">
<label class="text-xs text-slate-500">阴影偏移</label>
<Slider v-model="line.shadowOffset" :min="1" :max="10" class="flex-1" />
<input v-model="line.shadowColor" type="color" class="h-8 w-10" />
<div v-if="enableShadow" class="space-y-2">
<div class="flex items-center gap-2">
<label class="text-xs text-slate-500">阴影偏移</label>
<Slider v-model="line.shadowOffset" :min="1" :max="10" class="flex-1" />
<span class="w-8 text-right text-xs">{{ line.shadowOffset }}</span>
</div>
<div class="flex items-center gap-2">
<label class="text-xs text-slate-500">阴影颜色</label>
<input v-model="line.shadowColor" type="color" class="h-8 w-10" />
<InputText v-model="line.shadowColor" size="small" class="flex-1" />
</div>
</div>
</div>
<div>
<div class="mb-2 text-sm font-medium text-slate-700">效果预览</div>
<div class="rounded bg-slate-100 py-4 text-center" :style="previewStyle">
{{ line.text || "标题文字" }}
<div class="overflow-hidden rounded bg-slate-100 py-4 text-center">
<div :style="previewStyle">
{{ line.text || "标题文字" }}
</div>
</div>
</div>
</div>