61 lines
2.2 KiB
Vue
61 lines
2.2 KiB
Vue
<script setup>
|
|
import { computed } from "vue";
|
|
import SubtitlePreviewCard from "./SubtitlePreviewCard.vue";
|
|
import SubtitleStyleSelector from "./SubtitleStyleSelector.vue";
|
|
import TitleSubtitleSettings from "./TitleSubtitleSettings.vue";
|
|
import KeywordEffectsSettings from "./KeywordEffectsSettings.vue";
|
|
|
|
const draft = defineModel("draft", { type: Object, required: true });
|
|
|
|
defineProps({
|
|
referenceTitle: { type: String, default: "" },
|
|
});
|
|
|
|
const config = computed({
|
|
get: () => draft.value.config,
|
|
set: (v) => {
|
|
draft.value.config = v;
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex h-full min-h-0 flex-col">
|
|
<div class="shrink-0 border-b border-slate-700/80 pb-3">
|
|
<div class="flex flex-wrap items-center justify-between gap-2">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<span class="font-medium text-blue-400">正在编辑: {{ draft.name }}</span>
|
|
<Tag value="编辑模式" severity="info" />
|
|
</div>
|
|
</div>
|
|
<p class="mt-1 text-xs text-slate-500">修改完成后请点击底部的「保存模板」按钮</p>
|
|
</div>
|
|
|
|
<div class="mt-4 flex min-h-0 flex-1 gap-6">
|
|
<div class="sticky top-0 z-10 w-[320px] shrink-0 self-start">
|
|
<div class="mb-2 text-center text-xs font-medium text-slate-500">实时预览</div>
|
|
<SubtitlePreviewCard
|
|
:template-name="draft.name"
|
|
:subtitle-style="config.subtitleStyle"
|
|
:title-subtitle-config="config.titleSubtitleConfig"
|
|
:keyword-groups-styles="config.keywordGroupsStyles"
|
|
:keyword-render-mode="config.keywordRenderMode"
|
|
:preview-config="config.previewConfig"
|
|
:preview-scale="0.42"
|
|
:show-actions="false"
|
|
:show-meta="false"
|
|
:card-clickable="false"
|
|
/>
|
|
</div>
|
|
|
|
<div class="min-w-0 flex-1 space-y-6 overflow-y-auto pb-4 pr-1">
|
|
<SubtitleStyleSelector v-model:config="config" />
|
|
<hr class="border-slate-700" />
|
|
<TitleSubtitleSettings v-model:config="config" :reference-title="referenceTitle" />
|
|
<hr class="border-slate-700" />
|
|
<KeywordEffectsSettings v-model:config="config" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|