feat: 更新生成条数和配图数量的逻辑

- 将生成条数的最大值从20调整为3
- 配图数量和图片比例的输入项仅在特定模式下显示
- 添加动态计算逻辑以根据选择的模式更新配图数量和图片比例的默认值
- 优化表单验证逻辑,确保在不显示配图配置时跳过相关验证
This commit is contained in:
2026-04-22 13:17:44 +08:00
parent 94882bc9a5
commit 9e45acf60b

View File

@@ -70,16 +70,16 @@
><el-select v-model="formData.style"><el-option v-for="item in styleOptions" :key="item" :label="item" :value="item" /></el-select ><el-select v-model="formData.style"><el-option v-for="item in styleOptions" :key="item" :label="item" :value="item" /></el-select
></el-form-item> ></el-form-item>
<el-form-item label="6. 生成条数" prop="count" class="span-1" <el-form-item label="6. 生成条数" prop="count" class="span-1"
><el-input-number v-model="formData.count" :min="1" :max="20" controls-position="right" class="w100" ><el-input-number v-model="formData.count" :min="1" :max="3" controls-position="right" class="w100"
/></el-form-item> /></el-form-item>
<el-form-item label="7. 每条配图数量" prop="image_per_post" class="span-1" <el-form-item v-if="showImageConfig" label="7. 每条配图数量" prop="image_per_post" class="span-1"
><el-input-number v-model="formData.image_per_post" :min="1" :max="20" controls-position="right" class="w100" ><el-input-number v-model="formData.image_per_post" :min="1" :max="3" controls-position="right" class="w100"
/></el-form-item> /></el-form-item>
<el-form-item label="8. 图片比例" prop="image_ratio" class="span-1" <el-form-item v-if="showImageConfig" label="8. 图片比例" prop="image_ratio" class="span-1"
><el-select v-model="formData.image_ratio" ><el-select v-model="formData.image_ratio"
><el-option v-for="item in imageRatioOptions" :key="item" :label="item" :value="item" /></el-select ><el-option v-for="item in imageRatioOptions" :key="item" :label="item" :value="item" /></el-select
></el-form-item> ></el-form-item>
<el-form-item label="9. 描述" prop="description" class="span-2 description-item" <el-form-item :label="showImageConfig ? '9. 描述' : '7. 描述'" prop="description" class="span-2 description-item"
><el-input v-model="formData.description" type="textarea" :rows="4" placeholder="请输入内容补充描述、重点要求或限制条件" ><el-input v-model="formData.description" type="textarea" :rows="4" placeholder="请输入内容补充描述、重点要求或限制条件"
/></el-form-item> /></el-form-item>
</div> </div>
@@ -100,7 +100,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue'; import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'; import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { import {
createCreation, createCreation,
@@ -144,10 +144,11 @@ const formData = reactive<CreationSubmitParams>({
title: '', title: '',
description: '', description: '',
style: '生活分享 — 亲切自然,像朋友聊天', style: '生活分享 — 亲切自然,像朋友聊天',
count: 3, count: 1,
image_per_post: 1, image_per_post: 1,
image_ratio: '3:4 — 小红书', image_ratio: '3:4 — 小红书',
}); });
const showImageConfig = computed(() => formData.mode === '混合模式(文案 + 图片)' || formData.mode === '纯图片模式');
const modeOptions = ['混合模式(文案 + 图片)', '纯文案模式', '纯图片模式']; const modeOptions = ['混合模式(文案 + 图片)', '纯文案模式', '纯图片模式'];
const contentTypeOptions = ['穿搭分享', '好物推荐', '美妆护肤', '探店分享', '旅行日常', '美食分享']; const contentTypeOptions = ['穿搭分享', '好物推荐', '美妆护肤', '探店分享', '旅行日常', '美食分享'];
const styleOptions = [ const styleOptions = [
@@ -157,6 +158,16 @@ const styleOptions = [
'干货教学 — 条理清晰,步骤明确', '干货教学 — 条理清晰,步骤明确',
]; ];
const imageRatioOptions = ['3:4 — 小红书', '1:1 — 方图', '16:9 — 横版']; const imageRatioOptions = ['3:4 — 小红书', '1:1 — 方图', '16:9 — 横版'];
watch(
() => formData.mode,
() => {
if (!showImageConfig.value) {
formData.image_per_post = 1;
formData.image_ratio = '3:4 — 小红书';
}
},
{ immediate: true }
);
const rules: FormRules = { const rules: FormRules = {
mode: [{ required: true, message: '请选择创作模式', trigger: 'change' }], mode: [{ required: true, message: '请选择创作模式', trigger: 'change' }],
content_type: [{ required: true, message: '请选择内容类型', trigger: 'change' }], content_type: [{ required: true, message: '请选择内容类型', trigger: 'change' }],
@@ -164,8 +175,28 @@ const rules: FormRules = {
title: [{ required: true, message: '请输入标题', trigger: 'blur' }], title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
style: [{ required: true, message: '请选择内容风格', trigger: 'change' }], style: [{ required: true, message: '请选择内容风格', trigger: 'change' }],
count: [{ required: true, message: '请输入生成条数', trigger: 'change' }], count: [{ required: true, message: '请输入生成条数', trigger: 'change' }],
image_per_post: [{ required: true, message: '请输入配图数量', trigger: 'change' }], image_per_post: [{
image_ratio: [{ required: true, message: '请选择图片比例', trigger: 'change' }], required: true,
message: '请输入配图数量',
trigger: 'change',
validator: (rule, value, callback) => {
void rule;
if (!showImageConfig.value) return callback();
if (!value) return callback(new Error('请输入配图数量'));
callback();
},
}],
image_ratio: [{
required: true,
message: '请选择图片比例',
trigger: 'change',
validator: (rule, value, callback) => {
void rule;
if (!showImageConfig.value) return callback();
if (!value) return callback(new Error('请选择图片比例'));
callback();
},
}],
}; };
const joinUrl = (base: string, path: string) => `${base.replace(/\/$/, '')}${path.startsWith('/') ? path : `/${path}`}`; const joinUrl = (base: string, path: string) => `${base.replace(/\/$/, '')}${path.startsWith('/') ? path : `/${path}`}`;
const buildAssetUrl = (path?: string) => { const buildAssetUrl = (path?: string) => {