feat(web): 重做短剧编辑弹窗

src/styles/business/drama-management.css

@@ -91,29 +91,192 @@
   font-size: 13px;
 }
 
-/* 编辑弹窗里的封面预览：固定竖版尺寸，和上传控件并排，避免弹窗过高 */
+/* 短剧编辑弹窗：固定宽度、内容区滚动、底部操作固定。 */
-.cover-field {
+.drama-editor-dialog {
   display: flex;
-  gap: 12px;
+  max-height: calc(100vh - 40px);
-  align-items: flex-start;
+  overflow: hidden;
-  width: 100%;
+  flex-direction: column;
+  border-radius: var(--app-radius-lg) !important;
 }
-.cover-field-actions {
+
+.drama-editor-dialog .el-dialog__body {
+  flex: 1 1 auto;
+  padding: 8px 24px 0;
+  overflow-y: auto;
+}
+
+.drama-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);
+}
+
+.drama-editor-dialog .el-dialog__footer .el-button {
+  min-width: 88px;
+  height: 36px;
+}
+
+.editor-section {
+  padding: 4px 0 18px;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+
+.editor-section + .editor-section {
+  padding-top: 18px;
+}
+
+.editor-section:last-child {
+  padding-bottom: 4px;
+  border-bottom: 0;
+}
+
+.editor-section-title {
+  margin: 0 0 14px;
+  color: var(--el-text-color-primary);
+  font-size: 15px;
+  font-weight: 650;
+  line-height: 1.4;
+}
+
+.editor-grid {
+  display: grid;
+  gap: 0 16px;
+}
+
+.editor-grid--two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.editor-number {
+  width: 180px !important;
+}
+
+.cover-editor {
+  display: flex;
+  gap: 18px;
+  align-items: flex-start;
+}
+
+.cover-preview-card {
+  position: relative;
+  display: grid;
+  flex: 0 0 96px;
+  width: 96px;
+  height: 128px;
+  overflow: hidden;
+  border: 1px solid var(--el-border-color);
+  border-radius: 8px;
+  background: var(--el-fill-color-lighter);
+}
+
+.cover-preview-card img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cover-preview-empty {
+  display: flex;
+  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;
+}
+
+.cover-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);
+}
+
+.cover-upload-mask b {
+  font-size: 16px;
+}
+
+.cover-editor-meta {
+  display: flex;
   flex: 1 1 auto;
   min-width: 0;
+  flex-direction: column;
+  gap: 10px;
 }
-.form-cover-preview {
+
-  display: block;
+.cover-status-line {
-  width: 84px;
+  display: flex;
-  height: 112px;
+  align-items: center;
-  flex: 0 0 84px;
+  gap: 10px;
-  object-fit: cover;
+  min-width: 0;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: var(--app-radius-md);
-  background: #f0f2f4 !important;
 }
-.dark .form-cover-preview {
+
-  background: #353b45 !important;
+.cover-filename {
+  overflow: hidden;
+  color: var(--el-text-color-regular);
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cover-hint {
+  margin: 0;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+
+.cover-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.cover-actions .el-button {
+  height: 36px;
+}
+
+.cover-original-link {
+  color: var(--el-color-primary);
+  font-size: 13px;
+  text-decoration: none;
+}
+
+.cover-original-link:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 600px) {
+  .drama-editor-dialog {
+    width: calc(100vw - 24px) !important;
+    margin: 12px auto !important;
+  }
+
+  .drama-editor-dialog .el-dialog__body {
+    padding-right: 18px;
+    padding-left: 18px;
+  }
+
+  .editor-grid--two {
+    grid-template-columns: 1fr;
+  }
+
+}
+
+html.dark .cover-preview-card,
+html.dark .cover-preview-empty {
+  background: var(--el-fill-color-light);
 }
 
 /* 编辑弹窗里的视频预览 */
@@ -163,7 +326,7 @@
 /* 列表里点视频即放大播放，给个悬停反馈 */
 .episode-video-thumb:hover {
   border-color: var(--el-color-primary);
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.25);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--el-color-primary) 25%, transparent);
 }
 .dark .table-result-count {
   color: #a6aeb9;
@@ -233,8 +396,8 @@
 .table-actions .el-button--primary {
   --el-button-bg-color: var(--el-color-primary);
   --el-button-border-color: var(--el-color-primary);
-  --el-button-hover-bg-color: var(--el-color-primary-light-3);
+  --el-button-hover-bg-color: var(--el-color-primary-dark-2);
-  --el-button-hover-border-color: var(--el-color-primary-light-3);
+  --el-button-hover-border-color: var(--el-color-primary-dark-2);
 }
 .table-actions .el-button--success {
   --el-button-bg-color: #4d866a;

src/views/contentManagement/DramaManagementView.vue

@@ -1,7 +1,7 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { onMounted, reactive, ref } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { AppIcons } from '@/constants/icons'
@@ -37,16 +37,32 @@ const dialogVisible = ref(false)
 const saving = ref(false)
 const uploadingCover = ref(false)
 const coverPercent = ref(0)
+const coverError = ref('')
+const coverFileName = ref('')
 const editingId = ref(null)
+const formRef = ref()
 const form = reactive({
   title: '',
   categoryId: undefined,
   description: '',
   freeEpisodes: 3,
   unlockCoin: 0,
+  isHot: false,
   cover: ''
 })
 
+const MAX_COVER_SIZE = 5 * 1024 * 1024
+const COVER_TYPES = ['image/jpeg', 'image/png', 'image/webp']
+
+const formRules = {
+  title: [{ required: true, message: '请输入短剧名称', trigger: 'blur' }],
+  categoryId: [{ required: true, message: '请选择短剧类型', trigger: 'change' }]
+}
+
+const coverDisplayName = computed(
+  () => coverFileName.value || (form.cover ? coverBasename(form.cover) : '尚未选择封面')
+)
+
 const statusOptions = [
   { code: 'draft', text: '草稿' },
   { code: 'reviewing', text: '审核中' },
@@ -104,6 +120,17 @@ function handleSizeChange() {
   load()
 }
 
+function coverBasename(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()
+}
+
 function openCreate() {
   editingId.value = null
   Object.assign(form, {
@@ -115,7 +142,10 @@ function openCreate() {
     isHot: false,
     cover: ''
   })
+  coverFileName.value = ''
+  coverError.value = ''
   dialogVisible.value = true
+  resetValidation()
 }
 
 function openEdit(row) {
@@ -129,12 +159,19 @@ function openEdit(row) {
     isHot: !!row.isHot,
     cover: row.cover || ''
   })
+  coverFileName.value = row.cover ? coverBasename(row.cover) : ''
+  coverError.value = ''
   dialogVisible.value = true
+  resetValidation()
 }
 
 async function saveDrama() {
-  if (!form.title.trim()) return ElMessage.warning('请填写短剧名称')
+  if (saving.value || uploadingCover.value) return
-  if (!form.categoryId) return ElMessage.warning('请选择短剧类型')
+  try {
+    await formRef.value?.validate()
+  } catch {
+    return
+  }
   const category = categories.value.find((item) => item.id === form.categoryId)
   const payload = {
     ...form,
@@ -158,22 +195,54 @@ async function saveDrama() {
   }
 }
 
+function beforeCoverUpload(file) {
+  coverError.value = ''
+  if (!COVER_TYPES.includes(file.type)) {
+    coverError.value = '封面仅支持 JPG、PNG 或 WebP 格式'
+    return false
+  }
+  if (file.size > MAX_COVER_SIZE) {
+    coverError.value = '封面大小不能超过 5MB'
+    return false
+  }
+  return true
+}
+
 /** 封面走分片上传（图片只有一个分片），成功后回填地址。 */
 async function uploadCover(options) {
   uploadingCover.value = true
   coverPercent.value = 0
+  coverError.value = ''
   try {
     const asset = await uploadFile(options.file, {
       bizType: 'DRAMA_COVER',
       onProgress: (percent) => (coverPercent.value = percent)
     })
     form.cover = asset.url
+    coverFileName.value = options.file.name
     ElMessage.success('封面已上传')
+  } catch {
+    coverError.value = '封面上传失败，请检查网络后重试'
   } finally {
     uploadingCover.value = false
   }
 }
 
+function removeCover() {
+  if (uploadingCover.value) return
+  form.cover = ''
+  coverFileName.value = ''
+  coverError.value = ''
+}
+
+function beforeDialogClose(done) {
+  if (saving.value || uploadingCover.value) {
+    ElMessage.warning(saving.value ? '正在保存，请稍候' : '封面正在上传，请稍候')
+    return
+  }
+  done()
+}
+
 async function confirmDelete(row) {
   try {
     await ElMessageBox.confirm(`确定删除短剧「${row.title}」吗？删除后无法恢复。`, '删除确认', {
@@ -375,56 +444,155 @@ onMounted(async () => {
         @size-change="handleSizeChange"
     /></div>
   </section>
-  <el-dialog v-model="dialogVisible" :title="editingId ? '编辑短剧' : '新建短剧'" width="600px"
+  <el-dialog
-    ><el-form label-position="top"
+    v-model="dialogVisible"
-      ><div class="form-row"
+    :title="editingId ? '编辑短剧' : '新建短剧'"
-        ><el-form-item label="短剧名称" required
+    width="680px"
-          ><el-input v-model="form.title" placeholder="请输入短剧名称" /></el-form-item
+    class="drama-editor-dialog"
-        ><el-form-item label="类型" required
+    :close-on-click-modal="false"
-          ><el-select v-model="form.categoryId" placeholder="请选择"
+    :before-close="beforeDialogClose"
-            ><el-option
-              v-for="item in categories"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id" /></el-select></el-form-item></div
-      ><el-form-item label="简介"
-        ><el-input
-          v-model="form.description"
-          type="textarea"
-          :rows="2"
-          maxlength="200"
-          show-word-limit /></el-form-item
-      ><div class="form-row"
-        ><el-form-item label="免费集数"
-          ><el-input-number v-model="form.freeEpisodes" :min="0" :max="200" /></el-form-item
-        ><el-form-item label="单集解锁金币"
-          ><el-input-number v-model="form.unlockCoin" :min="0" :max="9999" /></el-form-item
-      ></div>
-      <el-form-item label="是否热门"><el-switch v-model="form.isHot" /></el-form-item>
-      <el-form-item label="短剧封面"
-        ><div class="cover-field"
-          ><div class="cover-field-actions"
-            ><el-upload
-              v-if="can('cover:upload')"
-              :show-file-list="false"
-              accept="image/*"
-              :http-request="uploadCover"
-              :disabled="uploadingCover"
-              ><el-button :loading="uploadingCover">{{
-                form.cover ? '更换封面' : '选择封面'
-              }}</el-button></el-upload
-            ><p v-if="uploadingCover" class="selected-file">上传中 {{ coverPercent }}%</p
-            ><p v-else-if="form.cover" class="selected-file">封面已上传</p
-            ><el-input v-model="form.cover" placeholder="也可以直接填写图片地址" /></div
-          ><img
-            v-if="form.cover"
-            :src="form.cover"
-            class="form-cover-preview" /></div></el-form-item></el-form
-    ><template #footer
-      ><el-button @click="dialogVisible = false">取消</el-button
-      ><el-button type="primary" :loading="saving" @click="saveDrama">{{
-        editingId ? '保存修改' : '保存草稿'
-      }}</el-button></template
-    ></el-dialog
   >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="formRules"
+      label-position="top"
+      class="drama-editor-form"
+    >
+      <section class="editor-section">
+        <h3 class="editor-section-title">基础信息</h3>
+        <div class="editor-grid editor-grid--two">
+          <el-form-item label="短剧名称" prop="title">
+            <el-input v-model="form.title" maxlength="80" placeholder="请输入短剧名称" />
+          </el-form-item>
+          <el-form-item label="类型" prop="categoryId">
+            <el-select v-model="form.categoryId" placeholder="请选择类型">
+              <el-option
+                v-for="item in categories"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </div>
+        <el-form-item label="简介">
+          <el-input
+            v-model="form.description"
+            type="textarea"
+            :rows="3"
+            maxlength="200"
+            show-word-limit
+            placeholder="简要介绍剧情"
+          />
+        </el-form-item>
+      </section>
+
+      <section class="editor-section">
+        <h3 class="editor-section-title">付费设置</h3>
+        <div class="editor-grid editor-grid--two">
+          <el-form-item label="免费集数">
+            <el-input-number
+              v-model="form.freeEpisodes"
+              class="editor-number"
+              controls-position="right"
+              :min="0"
+              :max="200"
+            />
+          </el-form-item>
+          <el-form-item label="单集解锁金币">
+            <el-input-number
+              v-model="form.unlockCoin"
+              class="editor-number"
+              controls-position="right"
+              :min="0"
+              :max="9999"
+            />
+          </el-form-item>
+        </div>
+        <el-form-item label="是否热门">
+          <el-switch v-model="form.isHot" />
+        </el-form-item>
+      </section>
+
+      <section class="editor-section">
+        <h3 class="editor-section-title">封面</h3>
+        <div class="cover-editor">
+          <div class="cover-preview-card">
+            <img v-if="form.cover" :src="form.cover" alt="短剧封面" />
+            <div v-else class="cover-preview-empty">
+              <AppIcon :icon="AppIcons.content" :size="28" />
+              <span>暂无封面</span>
+            </div>
+            <div v-if="uploadingCover" class="cover-upload-mask">
+              <span>上传中</span>
+              <b>{{ coverPercent }}%</b>
+            </div>
+          </div>
+
+          <div class="cover-editor-meta">
+            <div class="cover-status-line">
+              <el-tag :type="form.cover ? 'success' : 'info'" effect="light">
+                {{ form.cover ? '已上传' : '未上传' }}
+              </el-tag>
+              <span class="cover-filename" :title="coverDisplayName">{{ coverDisplayName }}</span>
+            </div>
+            <p class="cover-hint">支持 JPG、PNG、WebP，单张不超过 5MB。</p>
+            <el-alert
+              v-if="coverError"
+              :title="coverError"
+              type="error"
+              :closable="false"
+              show-icon
+            />
+            <div class="cover-actions">
+              <el-upload
+                v-if="can('cover:upload')"
+                :show-file-list="false"
+                accept="image/jpeg,image/png,image/webp"
+                :before-upload="beforeCoverUpload"
+                :http-request="uploadCover"
+                :disabled="uploadingCover"
+              >
+                <el-button :loading="uploadingCover" :disabled="uploadingCover">
+                  <AppIcon :icon="AppIcons.upload" />
+                  {{ form.cover ? '更换封面' : '选择封面' }}
+                </el-button>
+              </el-upload>
+              <el-button
+                v-if="can('cover:upload') && form.cover"
+                :disabled="uploadingCover"
+                @click="removeCover"
+              >
+                移除
+              </el-button>
+              <a
+                v-if="form.cover"
+                class="cover-original-link"
+                :href="form.cover"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                查看原图
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+    </el-form>
+
+    <template #footer>
+      <el-button :disabled="saving || uploadingCover" @click="dialogVisible = false"
+        >取消</el-button
+      >
+      <el-button
+        type="primary"
+        :loading="saving"
+        :disabled="saving || uploadingCover"
+        @click="saveDrama"
+      >
+        {{ editingId ? '保存修改' : '保存草稿' }}
+      </el-button>
+    </template>
+  </el-dialog>
 </template>