feat(web): 重做轮播图编辑弹窗

src/styles/business/banner-management.css

@@ -19,31 +19,206 @@
   font-size: 12px;
 }
 
-.banner-field {
+.banner-editor-dialog {
   display: flex;
-  gap: 12px;
-  align-items: flex-start;
-  width: 100%;
+  max-height: calc(100vh - 40px);
+  overflow: hidden;
+  flex-direction: column;
+  border-radius: var(--app-radius-lg) !important;
 }
-.banner-field-actions {
+
+.banner-editor-dialog .el-dialog__body {
+  flex: 1 1 auto;
+  padding: 8px 24px 0;
+  overflow-y: auto;
+}
+
+.banner-editor-dialog .el-dialog__footer {
+  flex: 0 0 auto;
+  padding: 14px 24px;
+  background: var(--el-bg-color-overlay);
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+.banner-editor-dialog .el-dialog__footer .el-button {
+  min-width: 88px;
+  height: 36px;
+}
+
+.banner-editor-section {
+  padding: 4px 0 18px;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+
+.banner-editor-section + .banner-editor-section {
+  padding-top: 18px;
+}
+
+.banner-editor-section:last-child {
+  padding-bottom: 4px;
+  border-bottom: 0;
+}
+
+.banner-editor-section-title {
+  margin: 0 0 14px;
+  color: var(--el-text-color-primary);
+  font-size: 15px;
+  font-weight: 650;
+  line-height: 1.4;
+}
+
+.banner-editor-grid {
+  display: grid;
+  gap: 0 16px;
+}
+
+.banner-editor-grid--two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.banner-editor-number {
+  width: 180px !important;
+}
+
+.banner-image-editor {
+  display: flex;
+  gap: 18px;
+  width: 100%;
+  align-items: flex-start;
+}
+
+.banner-image-preview-card {
+  position: relative;
+  flex: 0 0 240px;
+  width: 240px;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border: 1px solid var(--el-border-color);
+  border-radius: 8px;
+  background: var(--el-fill-color-lighter);
+}
+
+.banner-image-preview-card > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.banner-image-empty {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  color: var(--el-text-color-placeholder);
+  font-size: 12px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border: 1px dashed var(--el-border-color);
+  border-radius: 8px;
+}
+
+.banner-image-upload-mask {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  color: #fff;
+  font-size: 12px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  background: color-mix(in srgb, var(--el-color-primary) 78%, transparent);
+}
+
+.banner-image-upload-mask b {
+  font-size: 16px;
+}
+
+.banner-image-meta {
+  display: flex;
   flex: 1 1 auto;
   min-width: 0;
+  flex-direction: column;
+  gap: 10px;
 }
-/* 编辑弹窗里的轮播图预览：和上传控件并排，控制弹窗高度 */
-.form-banner-preview {
-  display: block;
-  width: 200px;
-  height: 112px;
-  flex: 0 0 200px;
-  object-fit: contain;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: var(--app-radius-md);
-  background: #f0f2f4 !important;
+
+.banner-image-status {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.banner-image-filename {
+  overflow: hidden;
+  color: var(--el-text-color-regular);
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.banner-image-hint {
+  margin: 0;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+
+.banner-image-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.banner-image-actions .el-button {
+  height: 36px;
+}
+
+.banner-original-link {
+  color: var(--el-color-primary);
+  font-size: 13px;
+  text-decoration: none;
+}
+
+.banner-original-link:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 600px) {
+  .banner-editor-dialog {
+    width: calc(100vw - 24px) !important;
+    margin: 12px auto !important;
+  }
+
+  .banner-editor-dialog .el-dialog__body {
+    padding-right: 18px;
+    padding-left: 18px;
+  }
+
+  .banner-editor-grid--two {
+    grid-template-columns: 1fr;
+  }
+
+  .banner-image-editor {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .banner-image-preview-card {
+    flex-basis: 135px;
+  }
+
+  .banner-image-meta {
+    width: 100%;
+  }
 }
 
 .dark .banner-thumb,
 .dark .banner-thumb-empty,
-.dark .form-banner-preview {
+.dark .banner-image-preview-card,
+.dark .banner-image-empty {
   background: #353b45 !important;
   color: #b9c1cb;
 }

src/views/contentManagement/BannerManagementView.vue

@@ -1,7 +1,7 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { AppIcons } from '@/constants/icons'
 import { AppImage } from '@/components/AppImage'
@@ -33,7 +33,10 @@ const dialogVisible = ref(false)
 const saving = ref(false)
 const uploadingImage = ref(false)
 const imagePercent = ref(0)
+const imageError = ref('')
+const imageFileName = ref('')
 const editingId = ref(null)
+const formRef = ref()
 const form = reactive({
   imageUrl: '',
   position: 'HOME_TOP',
@@ -54,12 +57,47 @@ const linkTypeOptions = [
   { code: 'URL', text: '打开链接' }
 ]
 
+const MAX_BANNER_IMAGE_SIZE = 5 * 1024 * 1024
+const BANNER_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/webp']
+const formRules = {
+  imageUrl: [{ required: true, message: '请上传轮播图片', trigger: 'change' }],
+  position: [{ required: true, message: '请选择展示位置', trigger: 'change' }],
+  linkValue: [
+    {
+      validator: (_rule, value, callback) => {
+        if (form.linkType === 'DRAMA' && !value) {
+          callback(new Error('请选择要跳转的短剧'))
+        } else if (form.linkType === 'URL' && !String(value || '').trim()) {
+          callback(new Error('请填写跳转地址'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'change'
+    }
+  ]
+}
+
 const bannerPreviewList = computed(() => list.value.map((item) => item.imageUrl).filter(Boolean))
+const imageDisplayName = computed(
+  () => imageFileName.value || (form.imageUrl ? bannerBasename(form.imageUrl) : '尚未选择图片')
+)
 
 function bannerPreviewIndex(row) {
   return Math.max(0, bannerPreviewList.value.indexOf(row.imageUrl))
 }
 
+function bannerBasename(path) {
+  if (!path) return ''
+  const clean = path.split('?')[0].split('#')[0]
+  return decodeURIComponent(clean.split('/').pop() || clean)
+}
+
+async function resetValidation() {
+  await nextTick()
+  formRef.value?.clearValidate()
+}
+
 async function load() {
   loading.value = true
   try {
@@ -107,7 +145,10 @@ function openCreate() {
     sort: nextSort(),
     status: 1
   })
+  imageFileName.value = ''
+  imageError.value = ''
   dialogVisible.value = true
+  resetValidation()
 }
 
 function openEdit(row) {
@@ -120,7 +161,10 @@ function openEdit(row) {
     sort: row.sort ?? 0,
     status: row.status
   })
+  imageFileName.value = row.imageUrl ? bannerBasename(row.imageUrl) : ''
+  imageError.value = ''
   dialogVisible.value = true
+  resetValidation()
 }
 
 function nextSort() {
@@ -128,12 +172,11 @@ function nextSort() {
 }
 
 async function saveBanner() {
-  if (!form.imageUrl.trim()) return ElMessage.warning('请上传轮播图片')
-  if (form.linkType === 'DRAMA' && !form.linkValue) {
-    return ElMessage.warning('请选择要跳转的短剧')
-  }
-  if (form.linkType === 'URL' && !form.linkValue.trim()) {
-    return ElMessage.warning('请填写跳转地址')
+  if (saving.value || uploadingImage.value) return
+  try {
+    await formRef.value?.validate()
+  } catch {
+    return
   }
   const payload = {
     ...form,
@@ -157,21 +200,55 @@ async function saveBanner() {
   }
 }
 
+function beforeImageUpload(file) {
+  imageError.value = ''
+  if (!BANNER_IMAGE_TYPES.includes(file.type)) {
+    imageError.value = '图片仅支持 JPG、PNG 或 WebP 格式'
+    return false
+  }
+  if (file.size > MAX_BANNER_IMAGE_SIZE) {
+    imageError.value = '图片大小不能超过 5MB'
+    return false
+  }
+  return true
+}
+
 async function uploadImage(options) {
   uploadingImage.value = true
   imagePercent.value = 0
+  imageError.value = ''
   try {
     const asset = await uploadFile(options.file, {
       bizType: 'BANNER',
       onProgress: (percent) => (imagePercent.value = percent)
     })
     form.imageUrl = asset.url
+    imageFileName.value = options.file.name
+    await resetValidation()
     ElMessage.success('图片已上传')
+  } catch {
+    imageError.value = '图片上传失败，请检查网络后重试'
   } finally {
     uploadingImage.value = false
   }
 }
 
+function removeImage() {
+  if (uploadingImage.value) return
+  form.imageUrl = ''
+  imageFileName.value = ''
+  imageError.value = ''
+  resetValidation()
+}
+
+function beforeDialogClose(done) {
+  if (saving.value || uploadingImage.value) {
+    ElMessage.warning(saving.value ? '正在保存，请稍候' : '图片正在上传，请稍候')
+    return
+  }
+  done()
+}
+
 async function toggleStatus(row) {
   const next = row.status === 1 ? 0 : 1
   await updateBannerStatusApi(row.id, next)
@@ -350,75 +427,160 @@ onMounted(async () => {
     </div>
   </section>
 
-  <el-dialog v-model="dialogVisible" :title="editingId ? '编辑轮播图' : '新建轮播图'" width="620px">
-    <el-form label-position="top">
-      <el-form-item label="轮播图片" required>
-        <div class="banner-field">
-          <div class="banner-field-actions">
-            <el-upload
-              :show-file-list="false"
-              accept="image/*"
-              :http-request="uploadImage"
-              :disabled="uploadingImage"
-            >
-              <el-button :loading="uploadingImage">{{
-                form.imageUrl ? '更换图片' : '选择图片'
-              }}</el-button>
-            </el-upload>
-            <p v-if="uploadingImage" class="selected-file">上传中 {{ imagePercent }}%</p>
-            <p v-else-if="form.imageUrl" class="selected-file">图片已上传</p>
-            <el-input v-model="form.imageUrl" placeholder="也可以直接填写图片地址" />
+  <el-dialog
+    v-model="dialogVisible"
+    :title="editingId ? '编辑轮播图' : '新建轮播图'"
+    width="680px"
+    class="banner-editor-dialog"
+    :close-on-click-modal="false"
+    :before-close="beforeDialogClose"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="formRules"
+      label-position="top"
+      class="banner-editor-form"
+    >
+      <section class="banner-editor-section">
+        <h3 class="banner-editor-section-title">轮播图片</h3>
+        <el-form-item prop="imageUrl">
+          <div class="banner-image-editor">
+            <div class="banner-image-preview-card">
+              <img v-if="form.imageUrl" :src="form.imageUrl" alt="轮播图预览" />
+              <div v-else class="banner-image-empty">
+                <AppIcon :icon="AppIcons.content" :size="28" />
+                <span>暂无图片</span>
+              </div>
+              <div v-if="uploadingImage" class="banner-image-upload-mask">
+                <span>上传中</span>
+                <b>{{ imagePercent }}%</b>
+              </div>
+            </div>
+
+            <div class="banner-image-meta">
+              <div class="banner-image-status">
+                <el-tag :type="form.imageUrl ? 'success' : 'info'" effect="light">
+                  {{ form.imageUrl ? '已上传' : '未上传' }}
+                </el-tag>
+                <span class="banner-image-filename" :title="imageDisplayName">
+                  {{ imageDisplayName }}
+                </span>
+              </div>
+              <p class="banner-image-hint">支持 JPG、PNG、WebP，单张不超过 5MB。</p>
+              <el-alert
+                v-if="imageError"
+                :title="imageError"
+                type="error"
+                :closable="false"
+                show-icon
+              />
+              <div class="banner-image-actions">
+                <el-upload
+                  :show-file-list="false"
+                  accept="image/jpeg,image/png,image/webp"
+                  :before-upload="beforeImageUpload"
+                  :http-request="uploadImage"
+                  :disabled="uploadingImage"
+                >
+                  <el-button :loading="uploadingImage" :disabled="uploadingImage">
+                    <AppIcon :icon="AppIcons.upload" />
+                    {{ form.imageUrl ? '更换图片' : '选择图片' }}
+                  </el-button>
+                </el-upload>
+                <el-button
+                  v-if="form.imageUrl"
+                  type="danger"
+                  :disabled="uploadingImage"
+                  @click="removeImage"
+                >
+                  移除
+                </el-button>
+                <a
+                  v-if="form.imageUrl"
+                  class="banner-original-link"
+                  :href="form.imageUrl"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  查看原图
+                </a>
+              </div>
+            </div>
           </div>
-          <img v-if="form.imageUrl" :src="form.imageUrl" class="form-banner-preview" />
+        </el-form-item>
+      </section>
+
+      <section class="banner-editor-section">
+        <h3 class="banner-editor-section-title">跳转配置</h3>
+        <div class="banner-editor-grid banner-editor-grid--two">
+          <el-form-item label="展示位置" prop="position">
+            <el-select v-model="form.position" placeholder="请选择展示位置">
+              <el-option
+                v-for="item in positionOptions"
+                :key="item.code"
+                :label="item.text"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="跳转类型">
+            <el-select v-model="form.linkType">
+              <el-option
+                v-for="item in linkTypeOptions"
+                :key="item.code"
+                :label="item.text"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
         </div>
-      </el-form-item>
-      <div class="form-row">
-        <el-form-item label="展示位置" required>
-          <el-select v-model="form.position">
+        <el-form-item v-if="form.linkType === 'DRAMA'" label="跳转短剧" prop="linkValue">
+          <el-select v-model="form.linkValue" filterable placeholder="搜索短剧">
             <el-option
-              v-for="item in positionOptions"
-              :key="item.code"
-              :label="item.text"
-              :value="item.code"
+              v-for="item in dramas"
+              :key="item.id"
+              :label="`${item.title}（${item.statusText}）`"
+              :value="String(item.id)"
             />
           </el-select>
         </el-form-item>
-        <el-form-item label="跳转类型">
-          <el-select v-model="form.linkType">
-            <el-option
-              v-for="item in linkTypeOptions"
-              :key="item.code"
-              :label="item.text"
-              :value="item.code"
+        <el-form-item v-if="form.linkType === 'URL'" label="跳转地址" prop="linkValue">
+          <el-input v-model="form.linkValue" placeholder="https://..." />
+        </el-form-item>
+      </section>
+
+      <section class="banner-editor-section">
+        <h3 class="banner-editor-section-title">排序与状态</h3>
+        <div class="banner-editor-grid banner-editor-grid--two">
+          <el-form-item label="排序">
+            <el-input-number
+              v-model="form.sort"
+              class="banner-editor-number"
+              controls-position="right"
+              :min="0"
+              :max="999"
             />
-          </el-select>
-        </el-form-item>
-      </div>
-      <el-form-item v-if="form.linkType === 'DRAMA'" label="跳转短剧" required>
-        <el-select v-model="form.linkValue" filterable placeholder="搜索短剧">
-          <el-option
-            v-for="item in dramas"
-            :key="item.id"
-            :label="`${item.title}（${item.statusText}）`"
-            :value="String(item.id)"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item v-if="form.linkType === 'URL'" label="跳转地址" required>
-        <el-input v-model="form.linkValue" placeholder="https://..." />
-      </el-form-item>
-      <div class="form-row">
-        <el-form-item label="排序">
-          <el-input-number v-model="form.sort" :min="0" :max="999" />
-        </el-form-item>
-        <el-form-item label="状态">
-          <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
-        </el-form-item>
-      </div>
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
+          </el-form-item>
+        </div>
+      </section>
     </el-form>
+
     <template #footer>
-      <el-button @click="dialogVisible = false">取消</el-button>
-      <el-button type="primary" :loading="saving" @click="saveBanner">保存</el-button>
+      <el-button :disabled="saving || uploadingImage" @click="dialogVisible = false">
+        取消
+      </el-button>
+      <el-button
+        type="primary"
+        :loading="saving"
+        :disabled="saving || uploadingImage"
+        @click="saveBanner"
+      >
+        保存
+      </el-button>
     </template>
   </el-dialog>
 </template>