red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 将生成条数的最大值从20调整为3
- 配图数量和图片比例的输入项仅在特定模式下显示
- 添加动态计算逻辑以根据选择的模式更新配图数量和图片比例的默认值
- 优化表单验证逻辑，确保在不显示配图配置时跳过相关验证
This commit is contained in:
吴思建
2026-04-22 13:17:44 +08:00
parent 94882bc9a5
commit 9e45acf60b
1 changed files with 40 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/views/digitalHuman/creation/index.vue
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-form-item>
<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 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-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="3" controls-position="right" class="w100"
/></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-option v-for="item in imageRatioOptions" :key="item" :label="item" :value="item" /></el-select
></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-form-item>
</div>
@@ -100,7 +100,7 @@
</template>
<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 {
createCreation,
@@ -144,10 +144,11 @@ const formData = reactive<CreationSubmitParams>({
title: '',
description: '',
style: '生活分享 — 亲切自然，像朋友聊天',
count: 3,
count: 1,
image_per_post: 1,
image_ratio: '3:4 — 小红书',
});
const showImageConfig = computed(() => formData.mode === '混合模式（文案 + 图片）' || formData.mode === '纯图片模式');
const modeOptions = ['混合模式（文案 + 图片）', '纯文案模式', '纯图片模式'];
const contentTypeOptions = ['穿搭分享', '好物推荐', '美妆护肤', '探店分享', '旅行日常', '美食分享'];
const styleOptions = [
@@ -157,6 +158,16 @@ const styleOptions = [
'干货教学 — 条理清晰，步骤明确',
];
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 = {
mode: [{ 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' }],
style: [{ required: true, message: '请选择内容风格', trigger: 'change' }],
count: [{ required: true, message: '请输入生成条数', trigger: 'change' }],
image_per_post: [{ required: true, message: '请输入配图数量', trigger: 'change' }],
image_ratio: [{ required: true, message: '请选择图片比例', trigger: 'change' }],
image_per_post: [{
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 buildAssetUrl = (path?: string) => {