From 7f77b663f52d7639f02e4a18d1d6e3c271ddc948 Mon Sep 17 00:00:00 2001
From: rd <1344903914@qq.com>
Date: Tue, 12 Aug 2025 13:53:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=BE=E7=89=87=E6=8B=96=E6=8B=BD?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=E5=A4=84=E7=90=86=EF=BC=8CVueDraggable?=
 =?UTF-8?q?=E4=B8=8D=E6=94=AF=E6=8C=81jsx=E5=86=99=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../explore/detail/index.vue                  |  6 +-
 .../explore/detail/style.scss                 |  1 +
 .../explore/list/index.vue                    | 12 +--
 .../explore/list/style.scss                   |  1 +
 .../components/edit-form/img-box.vue          | 99 +++++++++++++++++++
 .../components/edit-form/index.vue            | 69 +++----------
 .../components/edit-form/img-box.vue          | 99 +++++++++++++++++++
 .../manuscript/components/edit-form/index.vue | 69 +++----------
 8 files changed, 237 insertions(+), 119 deletions(-)
 create mode 100644 src/views/creative-generation-workshop/manuscript-writer/components/edit-form/img-box.vue
 create mode 100644 src/views/creative-generation-workshop/manuscript/components/edit-form/img-box.vue

diff --git a/src/views/creative-generation-workshop/explore/detail/index.vue b/src/views/creative-generation-workshop/explore/detail/index.vue
index aa97556..da84dd6 100644
--- a/src/views/creative-generation-workshop/explore/detail/index.vue
+++ b/src/views/creative-generation-workshop/explore/detail/index.vue
@@ -220,9 +220,9 @@ export default {
             </div>
           </header>
           {loading.value ? (
-            <Spin spinning={loading.value} class="h-500px w-full flex justify-center items-center" size={60} />
+            <Spin spinning={loading.value} class="flex-1 w-full flex justify-center items-center" size={60} />
           ) : (
-            <div class={`page-wrap relative ${isExpand.value ? 'expand' : ''}`}>
+            <section class={`page-wrap relative ${isExpand.value ? 'expand' : ''}`}>
               <div class="fold-box cursor-pointer" onClick={() => (isExpand.value = true)}>
                 <icon-menu-fold size={20} class="color-#55585F hover:color-#6D4CFE" />
               </div>
@@ -261,7 +261,7 @@ export default {
                   onDeleteComment={onDeleteComment}
                 />
               )}
-            </div>
+            </section>
           )}
         </div>
       );
diff --git a/src/views/creative-generation-workshop/explore/detail/style.scss b/src/views/creative-generation-workshop/explore/detail/style.scss
index c842ee8..01e8a64 100644
--- a/src/views/creative-generation-workshop/explore/detail/style.scss
+++ b/src/views/creative-generation-workshop/explore/detail/style.scss
@@ -34,6 +34,7 @@
     flex: 1;
     display: flex;
     justify-content: center;
+    background: #fff;
     .explore-detail-wrap {
       min-height: 500px;
       width: 684px;
diff --git a/src/views/creative-generation-workshop/explore/list/index.vue b/src/views/creative-generation-workshop/explore/list/index.vue
index 9b45f01..aea464a 100644
--- a/src/views/creative-generation-workshop/explore/list/index.vue
+++ b/src/views/creative-generation-workshop/explore/list/index.vue
@@ -50,10 +50,10 @@ export default {
               </div>
             </div>
           </header>
-          {loading.value ? (
-            <Spin spinning={loading.value} class="h-500px w-full flex justify-center items-center" size={60} />
-          ) : (
-            <section class="page-wrapper flex justify-center">
+          <section class="page-wrapper flex justify-center">
+            {loading.value ? (
+              <Spin spinning={loading.value} class="w-full flex justify-center items-center" size={60} />
+            ) : (
               <div class="explore-container">
                 <div class="explore-list-wrap pt-24px pb-28px">
                   <TextOverTips context={`${works.value[0]?.title}等${works.value.length}个文件`} class="mb-8px" />
@@ -99,8 +99,8 @@ export default {
                   </div>
                 </div>
               </div>
-            </section>
-          )}
+            )}
+          </section>
         </div>
       );
     };
diff --git a/src/views/creative-generation-workshop/explore/list/style.scss b/src/views/creative-generation-workshop/explore/list/style.scss
index 76cf130..b315e92 100644
--- a/src/views/creative-generation-workshop/explore/list/style.scss
+++ b/src/views/creative-generation-workshop/explore/list/style.scss
@@ -26,6 +26,7 @@
     }
   }
   .page-wrapper {
+    background: #fff;
     min-height: calc(100vh - $navbar-height);
     .explore-container {
       width: 1200px;
diff --git a/src/views/creative-generation-workshop/manuscript-writer/components/edit-form/img-box.vue b/src/views/creative-generation-workshop/manuscript-writer/components/edit-form/img-box.vue
new file mode 100644
index 0000000..0746114
--- /dev/null
+++ b/src/views/creative-generation-workshop/manuscript-writer/components/edit-form/img-box.vue
@@ -0,0 +1,99 @@
+<template>
+  <a-form-item field="files">
+    <template #label>
+      <div class="flex items-center">
+        <span class="cts !color-#211F24 mr-4px">图片</span>
+        <span class="cts mr-8px !color-#939499">{{ `(${files.length ?? 0}/18)` }}</span>
+        <span class="cts !color-#939499">第一张为首图，支持拖拽排序</span>
+      </div>
+    </template>
+    <div class="flex items-center">
+      <VueDraggable v-model="files" class="grid grid-cols-7 gap-y-8px" @end="handleChange" draggable=".group">
+        <div
+          v-for="(file, index) in files"
+          :key="file.url"
+          class="group relative cursor-move overflow-visible py-8px pr-8px"
+        >
+          <div class="group-container relative rounded-8px w-100px h-100px">
+            <img :src="file.url" class="object-cover w-full h-full border-1px border-#E6E6E8 rounded-8px" />
+            <icon-close-circle-fill
+              :size="16"
+              class="absolute top--8px right--8px cursor-pointer hidden color-#939499 hidden group-hover:block z-50"
+              @click="() => handleDeleteFile(index)"
+            />
+          </div>
+        </div>
+        <a-upload
+          v-if="files.length < 18"
+          ref="uploadRef"
+          action="/"
+          draggable
+          :custom-request="(option) => emit('upload', option)"
+          accept=".jpg,.jpeg,.png,.gif,.webp"
+          :show-file-list="false"
+          multiple
+          class="!flex !items-center"
+          :limit="18 - files.length"
+        >
+          <template #upload-button>
+            <div class="upload-box">
+              <icon-plus size="14" class="mb-16px color-#3C4043" />
+              <span class="cts !color-#211F24">上传图片</span>
+            </div>
+          </template>
+        </a-upload>
+      </VueDraggable>
+    </div>
+  </a-form-item>
+</template>
+
+<script setup>
+import { VueDraggable } from 'vue-draggable-plus';
+
+const props = defineProps({
+  files: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const files = ref([]);
+const uploadRef = ref(null);
+
+const emit = defineEmits(['change', 'delete', 'upload']);
+
+const handleChange = () => {
+  emit('change', files.value);
+};
+
+const handleDeleteFile = (index) => {
+  emit('delete', index);
+};
+
+watch(
+  () => props.files,
+  (newVal) => {
+    files.value = newVal;
+  },
+  { immediate: true, deep: true },
+);
+</script>
+
+<style scoped lang="scss">
+.upload-box {
+  display: flex;
+  width: 100px;
+  height: 100px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  border: 1px dashed var(--Border-1, #d7d7d9);
+  background: var(--BG-200, #f2f3f5);
+  &:hover {
+    background: var(--Primary-1, #e6e6e8);
+  }
+}
+</style>
diff --git a/src/views/creative-generation-workshop/manuscript-writer/components/edit-form/index.vue b/src/views/creative-generation-workshop/manuscript-writer/components/edit-form/index.vue
index 4f483fb..a4c5888 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/components/edit-form/index.vue
+++ b/src/views/creative-generation-workshop/manuscript-writer/components/edit-form/index.vue
@@ -4,6 +4,7 @@ import { Form, FormItem, Input, Textarea, Upload, Message as AMessage, Button }
 import CommonSelect from '@/components/common-select';
 import { VueDraggable } from 'vue-draggable-plus';
 import TextOverTips from '@/components/text-over-tips';
+import ImgBox from './img-box';
 
 import { formatFileSize, getVideoInfo, formatDuration, formatUploadSpeed } from '@/utils/tools';
 import { getProjectList } from '@/api/all/propertyMarketing';
@@ -293,60 +294,9 @@ export default {
       );
     };
 
-    const renderImage = () => {
-      return (
-        <FormItem
-          field="files"
-          v-slots={{
-            label: () => (
-              <div class="flex items-center">
-                <span class="cts !color-#211F24 mr-4px">图片</span>
-                <span class="cts mr-8px !color-#939499">{`(${formData.value.files?.length ?? 0}/18)`}</span>
-                <span class="cts !color-#939499">第一张为首图，支持拖拽排序</span>
-              </div>
-            ),
-          }}
-        >
-          <div>
-            {/* 已上传的图片列表 */}
-            <VueDraggable v-model={formData.value.files} class="grid grid-cols-7 gap-y-8px">
-              {formData.value.files?.map((file, index) => (
-                <div key={index} class="group relative cursor-move overflow-visible py-8px pr-8px">
-                  <div class="group-container relative rounded-8px w-100px h-100px">
-                    <img src={file.url} class=" object-cover w-full h-full border-1px border-#E6E6E8 rounded-8px" />
-                    <icon-close-circle-fill
-                      size={16}
-                      class="absolute top--8px right--8px cursor-pointer hidden color-#939499  hidden group-hover:block z-50"
-                      onClick={() => handleDeleteFile(index)}
-                    />
-                  </div>
-                </div>
-              ))}
-            </VueDraggable>
-            {formData.value.files?.length < 18 && (
-              <Upload
-                ref={uploadRef}
-                action="/"
-                draggable
-                custom-request={uploadImage}
-                accept=".jpg,.jpeg,.png,.gif,.webp"
-                show-file-list={false}
-                multiple
-                limit={18 - formData.value.files?.length}
-              >
-                {{
-                  'upload-button': () => (
-                    <div class="upload-box">
-                      <icon-plus size="14" class="mb-16px color-#3C4043" />
-                      <span class="cts !color-#211F24">上传图片</span>
-                    </div>
-                  ),
-                }}
-              </Upload>
-            )}
-          </div>
-        </FormItem>
-      );
+    const handleImagesChange = (files) => {
+      formData.value.files = cloneDeep(files);
+      onChange();
     };
 
     // 暴露方法
@@ -392,7 +342,16 @@ export default {
             auto-size={{ minRows: 7, maxRows: 12 }}
           />
         </FormItem>
-        {isVideo.value ? renderVideo() : renderImage()}
+        {isVideo.value ? (
+          renderVideo()
+        ) : (
+          <ImgBox
+            files={formData.value.files}
+            onChange={handleImagesChange}
+            onDelete={handleDeleteFile}
+            onUpload={uploadImage}
+          />
+        )}
 
         {/* <FormItem label="所属项目" field="project_ids">
           <CommonSelect
diff --git a/src/views/creative-generation-workshop/manuscript/components/edit-form/img-box.vue b/src/views/creative-generation-workshop/manuscript/components/edit-form/img-box.vue
new file mode 100644
index 0000000..0746114
--- /dev/null
+++ b/src/views/creative-generation-workshop/manuscript/components/edit-form/img-box.vue
@@ -0,0 +1,99 @@
+<template>
+  <a-form-item field="files">
+    <template #label>
+      <div class="flex items-center">
+        <span class="cts !color-#211F24 mr-4px">图片</span>
+        <span class="cts mr-8px !color-#939499">{{ `(${files.length ?? 0}/18)` }}</span>
+        <span class="cts !color-#939499">第一张为首图，支持拖拽排序</span>
+      </div>
+    </template>
+    <div class="flex items-center">
+      <VueDraggable v-model="files" class="grid grid-cols-7 gap-y-8px" @end="handleChange" draggable=".group">
+        <div
+          v-for="(file, index) in files"
+          :key="file.url"
+          class="group relative cursor-move overflow-visible py-8px pr-8px"
+        >
+          <div class="group-container relative rounded-8px w-100px h-100px">
+            <img :src="file.url" class="object-cover w-full h-full border-1px border-#E6E6E8 rounded-8px" />
+            <icon-close-circle-fill
+              :size="16"
+              class="absolute top--8px right--8px cursor-pointer hidden color-#939499 hidden group-hover:block z-50"
+              @click="() => handleDeleteFile(index)"
+            />
+          </div>
+        </div>
+        <a-upload
+          v-if="files.length < 18"
+          ref="uploadRef"
+          action="/"
+          draggable
+          :custom-request="(option) => emit('upload', option)"
+          accept=".jpg,.jpeg,.png,.gif,.webp"
+          :show-file-list="false"
+          multiple
+          class="!flex !items-center"
+          :limit="18 - files.length"
+        >
+          <template #upload-button>
+            <div class="upload-box">
+              <icon-plus size="14" class="mb-16px color-#3C4043" />
+              <span class="cts !color-#211F24">上传图片</span>
+            </div>
+          </template>
+        </a-upload>
+      </VueDraggable>
+    </div>
+  </a-form-item>
+</template>
+
+<script setup>
+import { VueDraggable } from 'vue-draggable-plus';
+
+const props = defineProps({
+  files: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const files = ref([]);
+const uploadRef = ref(null);
+
+const emit = defineEmits(['change', 'delete', 'upload']);
+
+const handleChange = () => {
+  emit('change', files.value);
+};
+
+const handleDeleteFile = (index) => {
+  emit('delete', index);
+};
+
+watch(
+  () => props.files,
+  (newVal) => {
+    files.value = newVal;
+  },
+  { immediate: true, deep: true },
+);
+</script>
+
+<style scoped lang="scss">
+.upload-box {
+  display: flex;
+  width: 100px;
+  height: 100px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  border: 1px dashed var(--Border-1, #d7d7d9);
+  background: var(--BG-200, #f2f3f5);
+  &:hover {
+    background: var(--Primary-1, #e6e6e8);
+  }
+}
+</style>
diff --git a/src/views/creative-generation-workshop/manuscript/components/edit-form/index.vue b/src/views/creative-generation-workshop/manuscript/components/edit-form/index.vue
index 4f483fb..a4c5888 100644
--- a/src/views/creative-generation-workshop/manuscript/components/edit-form/index.vue
+++ b/src/views/creative-generation-workshop/manuscript/components/edit-form/index.vue
@@ -4,6 +4,7 @@ import { Form, FormItem, Input, Textarea, Upload, Message as AMessage, Button }
 import CommonSelect from '@/components/common-select';
 import { VueDraggable } from 'vue-draggable-plus';
 import TextOverTips from '@/components/text-over-tips';
+import ImgBox from './img-box';
 
 import { formatFileSize, getVideoInfo, formatDuration, formatUploadSpeed } from '@/utils/tools';
 import { getProjectList } from '@/api/all/propertyMarketing';
@@ -293,60 +294,9 @@ export default {
       );
     };
 
-    const renderImage = () => {
-      return (
-        <FormItem
-          field="files"
-          v-slots={{
-            label: () => (
-              <div class="flex items-center">
-                <span class="cts !color-#211F24 mr-4px">图片</span>
-                <span class="cts mr-8px !color-#939499">{`(${formData.value.files?.length ?? 0}/18)`}</span>
-                <span class="cts !color-#939499">第一张为首图，支持拖拽排序</span>
-              </div>
-            ),
-          }}
-        >
-          <div>
-            {/* 已上传的图片列表 */}
-            <VueDraggable v-model={formData.value.files} class="grid grid-cols-7 gap-y-8px">
-              {formData.value.files?.map((file, index) => (
-                <div key={index} class="group relative cursor-move overflow-visible py-8px pr-8px">
-                  <div class="group-container relative rounded-8px w-100px h-100px">
-                    <img src={file.url} class=" object-cover w-full h-full border-1px border-#E6E6E8 rounded-8px" />
-                    <icon-close-circle-fill
-                      size={16}
-                      class="absolute top--8px right--8px cursor-pointer hidden color-#939499  hidden group-hover:block z-50"
-                      onClick={() => handleDeleteFile(index)}
-                    />
-                  </div>
-                </div>
-              ))}
-            </VueDraggable>
-            {formData.value.files?.length < 18 && (
-              <Upload
-                ref={uploadRef}
-                action="/"
-                draggable
-                custom-request={uploadImage}
-                accept=".jpg,.jpeg,.png,.gif,.webp"
-                show-file-list={false}
-                multiple
-                limit={18 - formData.value.files?.length}
-              >
-                {{
-                  'upload-button': () => (
-                    <div class="upload-box">
-                      <icon-plus size="14" class="mb-16px color-#3C4043" />
-                      <span class="cts !color-#211F24">上传图片</span>
-                    </div>
-                  ),
-                }}
-              </Upload>
-            )}
-          </div>
-        </FormItem>
-      );
+    const handleImagesChange = (files) => {
+      formData.value.files = cloneDeep(files);
+      onChange();
     };
 
     // 暴露方法
@@ -392,7 +342,16 @@ export default {
             auto-size={{ minRows: 7, maxRows: 12 }}
           />
         </FormItem>
-        {isVideo.value ? renderVideo() : renderImage()}
+        {isVideo.value ? (
+          renderVideo()
+        ) : (
+          <ImgBox
+            files={formData.value.files}
+            onChange={handleImagesChange}
+            onDelete={handleDeleteFile}
+            onUpload={uploadImage}
+          />
+        )}
 
         {/* <FormItem label="所属项目" field="project_ids">
           <CommonSelect