From 899635eaf5031b20a8e7a53e7ccc88df86e32865 Mon Sep 17 00:00:00 2001
From: old burden <hejianbin1995@gmail.com>
Date: Wed, 21 Jan 2026 10:50:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=A8=A1=E7=89=88bug=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=201=E3=80=81=E5=8E=BB=E9=99=A4=E6=B5=8B=E8=AF=95=E5=85=85?=
 =?UTF-8?q?=E5=80=BC=202=E3=80=81=E6=A8=A1=E7=89=88=E5=9B=BE=E7=89=87url?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E4=B8=BA=E4=B8=8A=E4=BC=A0=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E8=BF=94=E5=9B=9Eurl=203=E3=80=81=E5=AE=98=E7=BD=91=E4=B8=BB?=
 =?UTF-8?q?=E9=A1=B5=E6=A8=A1=E7=89=88=E5=9B=BE=E7=89=87=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin-ui/src/views/ai/template/index.vue | 63 +++++++++++++++++++-
 portal-ui/src/components/RechargePc.vue  |  7 ---
 portal-ui/src/views/Image.vue            | 74 ++++++++++++++----------
 3 files changed, 102 insertions(+), 42 deletions(-)

diff --git a/admin-ui/src/views/ai/template/index.vue b/admin-ui/src/views/ai/template/index.vue
index 72f1e01..be155ce 100644
--- a/admin-ui/src/views/ai/template/index.vue
+++ b/admin-ui/src/views/ai/template/index.vue
@@ -121,8 +121,19 @@
         <el-form-item label="模版英文">
           <el-input v-model="form.englishContent" placeholder="请输入模版英文"/>
         </el-form-item>
-        <el-form-item label="模版图片URL" prop="imageUrl">
-          <el-input v-model="form.imageUrl" type="textarea" placeholder="图片URL" />
+        <el-form-item label="模版图片" prop="imageUrl">
+          <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 label="状态" prop="status">
           <el-radio-group v-model="form.status">
@@ -144,6 +155,7 @@
 
 <script>
 import { listTemplate, getTemplate, delTemplate, addTemplate, updateTemplate } from "@/api/ai/template"
+import { uploadFile } from "@/api/file/file"
 import axios from 'axios'
 
 export default {
@@ -192,7 +204,7 @@ export default {
           { required: true, message: "模版英文不能为空", trigger: "blur" },
         ],
         imageUrl: [
-          { required: true, message: "模版图片URL不能为空", trigger: "blur" },
+          { required: true, message: "模版图片不能为空", trigger: "change" },
         ],
         status: [
           { required: true, message: "状态不能为空", trigger: "blur" },
@@ -304,6 +316,24 @@ export default {
         ...this.queryParams
       }, `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） */
     async handleDownloadImage(imageUrl) {
       if (!imageUrl) {
@@ -384,3 +414,30 @@ export default {
   }
 }
 </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>
diff --git a/portal-ui/src/components/RechargePc.vue b/portal-ui/src/components/RechargePc.vue
index 9cdd3f4..3df52d2 100644
--- a/portal-ui/src/components/RechargePc.vue
+++ b/portal-ui/src/components/RechargePc.vue
@@ -33,13 +33,6 @@
 			:loading="loading">
 			{{ $t('common.recharge') }}
 		</mf-button>
-		<mf-button
-			v-if="showPay"
-			size="large"
-			type="primary"
-			@click="goTestPay">
-			{{ $t('common.testRecharge') }}
-		</mf-button>
 		<!-- <mf-button
 			v-show="rechargeUrl"
 			size="large"
diff --git a/portal-ui/src/views/Image.vue b/portal-ui/src/views/Image.vue
index d22a43d..7268d9a 100644
--- a/portal-ui/src/views/Image.vue
+++ b/portal-ui/src/views/Image.vue
@@ -123,28 +123,30 @@
 			v-model:visible="templateDialogVisible"
 			:title="$t('common.selectTemplate')"
 			:footer="false"
-			width="80%"
+			width="50%"
 			@cancel="handleTemplateDialogClose">
-			<div class="template-dialog-content">
-				<a-spin :loading="templateLoading">
-					<div class="template-grid">
-						<div
-							class="template-item"
-							v-for="template in templateList"
-							:key="template.id"
-							:class="{ 'selected': selectedTemplate && selectedTemplate.id === template.id }"
-							@click="selectTemplate(template)">
-							<a-image
-								:src="getImageUrl(template.imageUrl || template.img_url)"
-								:preview="false"
-								fit="cover" />
-							<div class="template-name">{{ getTemplateName(template) }}</div>
+			<div class="template-dialog-wrapper">
+				<div class="template-dialog-content">
+					<a-spin :loading="templateLoading">
+						<div class="template-grid">
+							<div
+								class="template-item"
+								v-for="template in templateList"
+								:key="template.id"
+								:class="{ 'selected': selectedTemplate && selectedTemplate.id === template.id }"
+								@click="selectTemplate(template)">
+								<a-image
+									:src="getImageUrl(template.imageUrl || template.img_url)"
+									:preview="false"
+									fit="cover" />
+								<div class="template-name">{{ getTemplateName(template) }}</div>
+							</div>
 						</div>
-					</div>
-					<div v-if="templateList.length === 0" class="empty-template">
-						{{ $t('common.noTemplates') }}
-					</div>
-				</a-spin>
+						<div v-if="templateList.length === 0" class="empty-template">
+							{{ $t('common.noTemplates') }}
+						</div>
+					</a-spin>
+				</div>
 				<div class="template-dialog-footer">
 					<a-button @click="handleTemplateDialogClose">{{ $t('common.cancel') }}</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;
-	max-height: 500px;
+}
+
+.template-dialog-content {
+	flex: 1;
 	overflow-y: auto;
+	min-height: 0;
 
 	.template-grid {
 		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+		grid-template-columns: repeat(4, 20%);
 		gap: 16px;
 		padding: 10px 0;
 
@@ -678,7 +687,7 @@ export default {
 
 			:deep(.arco-image) {
 				width: 100%;
-				height: 150px;
+				height: 300px;
 				display: block;
 
 				.arco-image-img {
@@ -707,15 +716,16 @@ export default {
 		color: var(--color-text-3);
 		font-size: 14px;
 	}
+}
 
-	.template-dialog-footer {
-		display: flex;
-		justify-content: flex-end;
-		gap: 12px;
-		margin-top: 20px;
-		padding-top: 20px;
-		border-top: 1px solid var(--color-border-2);
-	}
+.template-dialog-footer {
+	display: flex;
+	justify-content: flex-end;
+	gap: 12px;
+	padding: 16px 0 0 0;
+	border-top: 1px solid var(--color-border-2);
+	flex-shrink: 0;
+	background: var(--color-bg-1);
 }
 
 @media (max-width: 576px) {