perf: 编辑稿件区分视频

src/views/creative-generation-workshop/manuscript/components/edit-form/index.vue

@@ -1,20 +1,13 @@
 <script lang="jsx">
-import { Form, FormItem, Input, Textarea, Upload, Message as AMessage } from '@arco-design/web-vue';
+import { Form, FormItem, Input, Textarea, Upload, Message as AMessage, Button } from '@arco-design/web-vue';
 import CommonSelect from '@/components/common-select';
 import { VueDraggable } from 'vue-draggable-plus';
+import TextOverTips from '@/components/text-over-tips';
 
 import { getProjectList } from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/creative-generation-workshop/icon-close.png';
 
-// 初始表单数据
-// const INITIAL_FORM = {
-//   title: '',
-//   desc: '',
-//   project_ids: [],
-//   files: [],
-// };
-
 // 表单验证规则
 const FORM_RULES = {
   title: [{ required: true, message: '请输入标题' }],
@@ -38,6 +31,11 @@ export default {
     const uploadRef = ref(null);
     const projects = ref([]);
 
+    const isVideo = computed(() => false);
+
+    const replaceVideo = () => {
+      console.log('replaceVideo');
+    };
     // 文件上传处理
     const handleUpload = (option) => {
       const {
@@ -105,6 +103,110 @@ export default {
       formRef.value?.clearValidate?.();
     };
 
+    const renderImage = () => {
+      return (
+        <FormItem
+          field="files"
+          v-slots={{
+            label: () => (
+              <div class="flex items-center">
+                <span class="cts !color-#211F24 mr-8px">视频</span>
+                <span class="cts !color-#939499">截取视频第一帧为首图</span>
+              </div>
+            ),
+          }}
+        >
+          <div class="flex items-center justify-between p-12px rounded-8px bg-#F7F8FA w-784px">
+            <div class="flex items-center mr-12px">
+              <img src={''} class="w-80 h-80 object-cover mr-16px rounded-8px" />
+              <div class="flex flex-col">
+                <TextOverTips
+                  context={`视频素材标题视频素材标题.mp4`}
+                  class="mb-4px cts !text-14px !lh-22px color-#211F24"
+                />
+                <p>
+                  <span class="cts color-#939499 mr-24px">视频大小：483.29kb</span>
+                  <span class="cts color-#939499">视频时长：2.73s</span>
+                </p>
+              </div>
+            </div>
+            <div>
+              <Upload
+                ref={uploadRef}
+                action="/"
+                draggable
+                custom-request={replaceVideo}
+                accept=".mp4,.webm,.ogg,.mov,.avi,.flv,.wmv,.mkv"
+                show-file-list={false}
+              >
+                {{
+                  'upload-button': () => <Button type="text">替换视频</Button>,
+                }}
+              </Upload>
+            </div>
+          </div>
+        </FormItem>
+      );
+    };
+
+    const renderVideo = () => {
+      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">{`(${props.modelValue.files?.length ?? 0}/18)`}</span>
+                <span class="cts !color-#939499">第一张为首图，支持拖拽排序</span>
+              </div>
+            ),
+          }}
+        >
+          <div>
+            <div class="">
+              {/* 已上传的图片列表 */}
+              <VueDraggable v-model={props.modelValue.files} class="grid grid-cols-7 gap-8px">
+                {props.modelValue.files?.map((file, index) => (
+                  <div key={index} class="group relative cursor-move">
+                    <img src={file} class="w-100px h-100px object-cover rounded-8px border-1px border-#E6E6E8" />
+                    <img
+                      src={icon1}
+                      width={16}
+                      height={16}
+                      class="absolute top-2px right-2px cursor-pointer hidden group-hover:block"
+                      onClick={() => handleDeleteFile(index)}
+                    />
+                  </div>
+                ))}
+              </VueDraggable>
+            </div>
+            {props.modelValue.files?.length < 18 && (
+              <Upload
+                ref={uploadRef}
+                action="/"
+                draggable
+                custom-request={handleUpload}
+                accept=".jpg,.jpeg,.png,.gif,.webp"
+                show-file-list={false}
+                multiple
+                limit={18 - props.modelValue.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>
+      );
+    };
+
     // 暴露方法
     expose({
       validate,
@@ -145,61 +247,7 @@ export default {
             auto-size={{ minRows: 7, maxRows: 9 }}
           />
         </FormItem>
-
+        {isVideo.value ? renderVideo() : renderImage()}
-        <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">{`(${props.modelValue.files?.length ?? 0}/18)`}</span>
-                <span class="cts !color-#939499">第一张为首图，支持拖拽排序</span>
-              </div>
-            ),
-          }}
-        >
-          <div>
-            <div class="">
-              {/* 已上传的图片列表 */}
-              <VueDraggable v-model={props.modelValue.files} class="grid grid-cols-7 gap-8px">
-                {props.modelValue.files?.map((file, index) => (
-                  <div key={index} class="group relative cursor-move">
-                    <img src={file} class="w-100px h-100px object-cover rounded-8px border-1px border-#E6E6E8" />
-                    <img
-                      src={icon1}
-                      width={16}
-                      height={16}
-                      class="absolute top-2px right-2px cursor-pointer hidden group-hover:block"
-                      onClick={() => handleDeleteFile(index)}
-                    />
-                  </div>
-                ))}
-              </VueDraggable>
-            </div>
-            {props.modelValue.files?.length < 18 && (
-              <Upload
-                class="not-draggable"
-                ref={uploadRef}
-                action="/"
-                draggable
-                custom-request={handleUpload}
-                accept=".jpg,.jpeg,.png,.gif,.webp"
-                show-file-list={false}
-                multiple
-                limit={18 - props.modelValue.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>
 
         <FormItem label="所属项目" field="project_ids">
           <CommonSelect
@@ -218,6 +266,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.cts {
+  font-family: $font-family-regular;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+}
 .upload-box {
   display: flex;
   width: 100px;