修复 bug,优化界面

This commit is contained in:
eafonyang
2026-08-13 16:48:05 +08:00
parent d01b0c8f47
commit f99f622977
15 changed files with 205 additions and 28 deletions
@@ -678,7 +678,7 @@ onMounted(loadData);
<ColorInput v-model:value="formData.body_color" />
</NFormItem>
</div>
<NFormItem v-if="formData.bg_type === 'image' || formData.bg_type === 'video'" label="背景显示模式">
<NFormItem v-if="formData.layout !== 'split_content' && (formData.bg_type === 'image' || formData.bg_type === 'video')" label="背景显示模式">
<NRadioGroup :value="(formData.config.bg_fit as string) ?? 'cover'" @update:value="v => (formData.config.bg_fit = v)">
<NRadio v-for="opt in bgFitOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</NRadio>
</NRadioGroup>
@@ -699,22 +699,36 @@ onMounted(loadData);
<span v-if="formData.layout === 'title_media'" class="text-12px opacity-60">标题+媒体布局仅水平方向生效左对齐/居中/右对齐垂直位置忽略</span>
</div>
</NFormItem>
<NFormItem v-if="formData.layout === 'split_content'" label="媒体位置">
<NRadioGroup :value="(formData.config.media_position as string) ?? 'left'" @update:value="v => (formData.config.media_position = v)">
<NRadio value="left">素材文案</NRadio>
<NRadio value="right">文案素材</NRadio>
</NRadioGroup>
</NFormItem>
<NFormItem v-if="formData.layout === 'split_content'" label="分栏比例">
<div class="w-full flex flex-col gap-8px">
<NSelect
:value="(formData.config.split_ratio as number) ?? 50"
:options="splitRatioOptions"
@update:value="v => (formData.config.split_ratio = v)"
/>
<span class="text-12px opacity-60">按页面视觉左右顺序标注{{ formData.config.media_position === 'right' ? '文案 : 素材' : '素材 : 文案' }}默认五五等分移动端小屏始终单列堆叠不受影响</span>
</div>
</NFormItem>
<!-- 图文分栏背景显示模式仅图片/视频背景/ 媒体位置 / 分栏比例 同一行 -->
<div
v-if="formData.layout === 'split_content'"
class="grid gap-x-16px"
:class="formData.bg_type === 'image' || formData.bg_type === 'video' ? 'grid-cols-3' : 'grid-cols-2'"
>
<NFormItem v-if="formData.bg_type === 'image' || formData.bg_type === 'video'" label="背景显示模式" label-placement="top">
<NRadioGroup :value="(formData.config.bg_fit as string) ?? 'cover'" @update:value="v => (formData.config.bg_fit = v)">
<NRadio v-for="opt in bgFitOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</NRadio>
</NRadioGroup>
</NFormItem>
<NFormItem label="媒体位置" label-placement="top">
<NRadioGroup :value="(formData.config.media_position as string) ?? 'left'" @update:value="v => (formData.config.media_position = v)">
<NRadio value="left">素材文案</NRadio>
<NRadio value="right">文案素材</NRadio>
</NRadioGroup>
</NFormItem>
<NFormItem label="分栏比例" label-placement="top">
<NTooltip trigger="focus" placement="top">
<template #trigger>
<NSelect
:value="(formData.config.split_ratio as number) ?? 50"
:options="splitRatioOptions"
@update:value="v => (formData.config.split_ratio = v)"
/>
</template>
按页面视觉左右顺序标注{{ formData.config.media_position === 'right' ? '文案 : 素材' : '素材 : 文案' }}默认五五等分移动端小屏始终单列堆叠不受影响
</NTooltip>
</NFormItem>
</div>
<NFormItem v-if="formData.layout === 'mosaic'" label="拼贴版式">
<div class="w-full flex flex-col gap-8px">
<NRadioGroup :value="(formData.config.mosaic_pattern as string) ?? 'big_3'" @update:value="handleMosaicPatternChange">