best_yunwei
/
ai_images
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 模版bug修改 

1、去除测试充值
2、模版图片url调整为上传图片返回url
3、官网主页模版图片展示调整
This commit is contained in:
old burden 2026-01-21 10:50:05 +08:00
parent 63df4f07ec
commit 899635eaf5
3 changed files with 102 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
admin-ui/src/views/ai/template/index.vue
View File

@ -121,8 +121,19 @@
<el-form-item label="模版英文"> <el-form-item label="模版英文">
<el-input v-model="form.englishContent" placeholder="请输入模版英文"/> <el-input v-model="form.englishContent" placeholder="请输入模版英文"/>
</el-form-item> </el-form-item>
<el-form-item label="模版图片URL" prop="imageUrl"> <el-form-item label="模版图片" prop="imageUrl">
<el-input v-model="form.imageUrl" type="textarea" placeholder="图片URL" /> <div style="display: flex; align-items: center; gap: 12px;">
<el-upload
class="avatar-uploader"
action="#"
:show-file-list="false"
:http-request="handleUpload"
>
<img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<span style="color: #909399; font-size: 12px;">支持jpg、png格式，建议尺寸：800 * 400</span>
</div>
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status"> <el-radio-group v-model="form.status">
@ -144,6 +155,7 @@
<script> <script>
import { listTemplate, getTemplate, delTemplate, addTemplate, updateTemplate } from "@/api/ai/template" import { listTemplate, getTemplate, delTemplate, addTemplate, updateTemplate } from "@/api/ai/template"
import { uploadFile } from "@/api/file/file"
import axios from 'axios' import axios from 'axios'
export default { export default {
@ -192,7 +204,7 @@ export default {
{ required: true, message: "模版英文不能为空", trigger: "blur" }, { required: true, message: "模版英文不能为空", trigger: "blur" },
], ],
imageUrl: [ imageUrl: [
{ required: true, message: "模版图片URL不能为空", trigger: "blur" }, { required: true, message: "模版图片不能为空", trigger: "change" },
], ],
status: [ status: [
{ required: true, message: "状态不能为空", trigger: "blur" }, { required: true, message: "状态不能为空", trigger: "blur" },
@ -304,6 +316,24 @@ export default {
...this.queryParams ...this.queryParams
}, `template_${new Date().getTime()}.xlsx`) }, `template_${new Date().getTime()}.xlsx`)
}, },
/** 处理图片上传 */
handleUpload(params) {
const { file } = params; // 获取上传的文件对象
let formData = new FormData();
formData.append("file", file);
this.$modal.loading("正在上传图片，请稍候...");
uploadFile(formData).then(response => {
this.form.imageUrl = response.url; // 获取S3 CDN URL
this.$modal.closeLoading();
this.$modal.msgSuccess("图片上传成功");
// 触发表单验证
this.$refs["form"].validateField("imageUrl");
}).catch(error => {
this.$modal.closeLoading();
this.$modal.msgError("图片上传失败，请重试");
console.error('上传图片失败:', error);
});
},
/** 下载图片到本地（支持AWS CDN） */ /** 下载图片到本地（支持AWS CDN） */
async handleDownloadImage(imageUrl) { async handleDownloadImage(imageUrl) {
if (!imageUrl) { if (!imageUrl) {
@ -384,3 +414,30 @@ export default {
} }
} }
</script> </script>
<style scoped>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
object-fit: contain;
}
</style>

7
portal-ui/src/components/RechargePc.vue
View File

@ -33,13 +33,6 @@
:loading="loading"> :loading="loading">
{{ $t('common.recharge') }} {{ $t('common.recharge') }}
</mf-button> </mf-button>
<mf-button
v-if="showPay"
size="large"
type="primary"
@click="goTestPay">
{{ $t('common.testRecharge') }}
</mf-button>
<!-- <mf-button <!-- <mf-button
v-show="rechargeUrl" v-show="rechargeUrl"
size="large" size="large"

74
portal-ui/src/views/Image.vue
View File

@ -123,28 +123,30 @@
v-model:visible="templateDialogVisible" v-model:visible="templateDialogVisible"
:title="$t('common.selectTemplate')" :title="$t('common.selectTemplate')"
:footer="false" :footer="false"
width="80%" width="50%"
@cancel="handleTemplateDialogClose"> @cancel="handleTemplateDialogClose">
<div class="template-dialog-content"> <div class="template-dialog-wrapper">
<a-spin :loading="templateLoading"> <div class="template-dialog-content">
<div class="template-grid"> <a-spin :loading="templateLoading">
<div <div class="template-grid">
class="template-item" <div
v-for="template in templateList" class="template-item"
:key="template.id" v-for="template in templateList"
:class="{ 'selected': selectedTemplate && selectedTemplate.id === template.id }" :key="template.id"
@click="selectTemplate(template)"> :class="{ 'selected': selectedTemplate && selectedTemplate.id === template.id }"
<a-image @click="selectTemplate(template)">
:src="getImageUrl(template.imageUrl || template.img_url)" <a-image
:preview="false" :src="getImageUrl(template.imageUrl || template.img_url)"
fit="cover" /> :preview="false"
<div class="template-name">{{ getTemplateName(template) }}</div> fit="cover" />
<div class="template-name">{{ getTemplateName(template) }}</div>
</div>
</div> </div>
</div> <div v-if="templateList.length === 0" class="empty-template">
<div v-if="templateList.length === 0" class="empty-template"> {{ $t('common.noTemplates') }}
{{ $t('common.noTemplates') }} </div>
</div> </a-spin>
</a-spin> </div>
<div class="template-dialog-footer"> <div class="template-dialog-footer">
<a-button @click="handleTemplateDialogClose">{{ $t('common.cancel') }}</a-button> <a-button @click="handleTemplateDialogClose">{{ $t('common.cancel') }}</a-button>
<a-button type="primary" :disabled="!selectedTemplate" @click="handleConfirmTemplate">{{ $t('common.confirm') }}</a-button> <a-button type="primary" :disabled="!selectedTemplate" @click="handleConfirmTemplate">{{ $t('common.confirm') }}</a-button>
@ -646,14 +648,21 @@ export default {
} }
// 模版选择弹窗样式 // 模版选择弹窗样式
.template-dialog-content { .template-dialog-wrapper {
display: flex;
flex-direction: column;
max-height: 70vh;
min-height: 350px; min-height: 350px;
max-height: 500px; }
.template-dialog-content {
flex: 1;
overflow-y: auto; overflow-y: auto;
min-height: 0;
.template-grid { .template-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-template-columns: repeat(4, 20%);
gap: 16px; gap: 16px;
padding: 10px 0; padding: 10px 0;
@ -678,7 +687,7 @@ export default {
:deep(.arco-image) { :deep(.arco-image) {
width: 100%; width: 100%;
height: 150px; height: 300px;
display: block; display: block;
.arco-image-img { .arco-image-img {
@ -707,15 +716,16 @@ export default {
color: var(--color-text-3); color: var(--color-text-3);
font-size: 14px; font-size: 14px;
} }
}
.template-dialog-footer { .template-dialog-footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 12px; gap: 12px;
margin-top: 20px; padding: 16px 0 0 0;
padding-top: 20px; border-top: 1px solid var(--color-border-2);
border-top: 1px solid var(--color-border-2); flex-shrink: 0;
} background: var(--color-bg-1);
} }
@media (max-width: 576px) { @media (max-width: 576px) {