From c08b13673f6d850ece249820e089a2b16b9ed5ef Mon Sep 17 00:00:00 2001
From: rd <1344903914@qq.com>
Date: Wed, 17 Sep 2025 11:59:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E6=A8=A1=E6=80=81=E6=A1=86=E5=92=8C=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=96=B0=E5=A2=9E=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E9=A2=84=E7=AD=BE=E5=90=8DURL=E8=8E=B7=E5=8F=96?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 简化 `delete-tag.vue` 模态框模板结构
- 更新 `add-raw-material-drawer/index.vue` 组件，增加文件预签名URL获取和上传状态显示
- 新增 `getFilePreSignedUrl` API 函数
- 更新 `tools.ts` 中的文件扩展名提取函数
- 优化按钮激活状态样式
- 添加 `icon-no-text.png` 图标文件
---
 src/api/all/common.ts                         |   7 +-
 src/styles/components/ant-button.scss         |   2 +-
 src/utils/tools.ts                            |   8 +-
 .../add-raw-material-drawer/index.vue         | 199 ++++++++++++------
 .../add-raw-material-drawer/style.scss        |  56 +++++
 .../components/tags-manage-modal/add-tag.vue  |   1 -
 .../tags-manage-modal/delete-tag.vue          |  21 +-
 .../raw-material/img/icon-no-text.png         | Bin 0 -> 1118 bytes
 8 files changed, 214 insertions(+), 80 deletions(-)
 create mode 100644 src/views/material-center/components/raw-material/img/icon-no-text.png

diff --git a/src/api/all/common.ts b/src/api/all/common.ts
index fc1e92a..7deae61 100644
--- a/src/api/all/common.ts
+++ b/src/api/all/common.ts
@@ -73,7 +73,12 @@ export const getVideoPreSignedUrl = (params = {}) => {
   return Http.get('/v1/oss/video-pre-signed-url', params);
 };
 
+// 获取文件上传地址
+export const getFilePreSignedUrl = (params = {}) => {
+  return Http.get('/v1/oss/file-pre-signed-url', params);
+};
+
 // 清除限流
 export const postClearRateLimiter = (params = {}) => {
   return Http.post(`/v1/rate-limiter/clear`, params);
-};
\ No newline at end of file
+};
diff --git a/src/styles/components/ant-button.scss b/src/styles/components/ant-button.scss
index 29bc47e..80b188b 100644
--- a/src/styles/components/ant-button.scss
+++ b/src/styles/components/ant-button.scss
@@ -71,7 +71,7 @@
     }
 
     &:active {
-      background: $color-primary-7 !important;
+      background-color: $color-primary-7 !important;
     }
   }
 
diff --git a/src/utils/tools.ts b/src/utils/tools.ts
index 5df5a36..c0f2580 100644
--- a/src/utils/tools.ts
+++ b/src/utils/tools.ts
@@ -112,11 +112,15 @@ export function genRandomId() {
   return `id_${dayjs().unix()}_${Math.floor(Math.random() * 10000)}`;
 }
 
+export function getFileExtension(filename) {
+  const match = filename.match(/\.([^.]+)$/);
+  return match ? match[1].toLowerCase() : '';
+}
 export function formatFileSize(bytes: number): string {
   if (bytes === 0) return '0 Bytes';
 
   const k = 1024;
-  const sizes = ['Bytes', 'kb', 'mB', 'gB', 'tB'];
+  const sizes = ['Bytes', 'kb', 'mb', 'gb', 'tb'];
   const i = Math.floor(Math.log(bytes) / Math.log(k));
 
   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
@@ -218,7 +222,7 @@ export function getVideoInfo(file: File): Promise<{ duration: number; firstFrame
     };
 
     // 设置视频源以触发加载
-    video.src = URL.createObjectURL(file);
+    video.src = window.URL.createObjectURL(file);
 
     // 设置超时，防止长时间无响应
     setTimeout(() => {
diff --git a/src/views/material-center/components/raw-material/components/add-raw-material-drawer/index.vue b/src/views/material-center/components/raw-material/components/add-raw-material-drawer/index.vue
index 57659a3..e8fbb40 100644
--- a/src/views/material-center/components/raw-material/components/add-raw-material-drawer/index.vue
+++ b/src/views/material-center/components/raw-material/components/add-raw-material-drawer/index.vue
@@ -1,5 +1,5 @@
 <script lang="tsx">
-import { Drawer, Button, Upload, Table, Input } from 'ant-design-vue';
+import { Drawer, Button, Upload, Table, Input, Progress } from 'ant-design-vue';
 
 const { Column } = Table;
 const { TextArea } = Input;
@@ -7,15 +7,24 @@ const { TextArea } = Input;
 import CommonSelect from '@/components/common-select';
 import ImgLazyLoad from '@/components/img-lazy-load';
 
-import { formatFileSize, getVideoInfo, formatDuration, formatUploadSpeed } from '@/utils/tools';
+import { formatFileSize, getVideoInfo, getFileExtension, formatUploadSpeed } from '@/utils/tools';
 import { getRawMaterialTagsList } from '@/api/all/generationWorkshop';
+import { getFilePreSignedUrl } from '@/api/all/common';
 
 import icon1 from '@/assets/img/media-account/icon-delete.png';
+import icon2 from '../../img/icon-no-text.png';
+import axios from 'axios';
 
 const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.bmp'];
 const videoExtensions = ['.mp4', '.mov', '.avi', '.flv', '.wmv', '.m4v'];
 const documentExtensions = ['.txt', '.doc', '.docx', '.pdf', '.xls', '.xlsx'];
 
+enum EnumUploadStatus {
+  done = 'done',
+  error = 'error',
+  uploading = 'uploading',
+}
+
 export default defineComponent({
   setup(_, { attrs, slots, expose }) {
     const visible = ref(false);
@@ -23,8 +32,8 @@ export default defineComponent({
     const uploadData = ref([]);
     const tagData = ref([]);
 
-    const checkSuccessNum = computed(() => {
-      return uploadData.value.filter((item) => item.status === 'success').length;
+    const uploadSuccessNum = computed(() => {
+      return uploadData.value.filter((item) => item.uploadStatus === EnumUploadStatus.done).length;
     });
 
     const getTagData = async () => {
@@ -48,31 +57,120 @@ export default defineComponent({
     };
 
     const handleUpload = async (option) => {
-      // console.log('handleUpload', option);
-    };
+      const { file } = option;
+      const { name, size, type, uid } = file;
 
-    const getFileType = (fileName) => {
-      const ext = fileName.slice(fileName.lastIndexOf('.')).toLowerCase();
+      let statusText = '';
+      const ext = name.slice(name.lastIndexOf('.')).toLowerCase();
+      const isImage = imageExtensions.includes(ext);
+      const isVideo = videoExtensions.includes(ext);
+      const isDocument = documentExtensions.includes(ext);
 
-      if (imageExtensions.includes(ext)) {
-        return '图片';
-      } else if (videoExtensions.includes(ext)) {
-        return '视频';
-      } else if (documentExtensions.includes(ext)) {
-        return '文档';
-      } else {
-        return '其他';
+      if (!isImage && !isVideo && !isDocument) {
+        statusText = '当前格式不支持';
+      } else if (
+        (isImage && size > 20 * 1024 * 1024) || // 图片大于20MB
+        (isVideo && size > 1000 * 1024 * 1024) || // 视频大于1000MB
+        (isDocument && size > 20 * 1024 * 1024) // 文档大于20MB
+      ) {
+        statusText = '文件大小超出限制';
+      }
+
+      const { fileTypeLabel, cover } = await getFileInfo(file);
+
+      const currentData = {
+        uid,
+        name,
+        uploadStatus: statusText ? EnumUploadStatus.error : EnumUploadStatus.uploading,
+        statusText,
+        percent: 0,
+        size: formatFileSize(size),
+        fileTypeLabel,
+        tag_ids: [],
+        cover,
+      };
+      uploadData.value.push(currentData);
+
+      if (statusText) return;
+
+      try {
+        const response = await getFilePreSignedUrl({ suffix: getFileExtension(name) });
+        const { upload_url } = response?.data;
+        if (!upload_url) {
+          throw new Error('未能获取有效的预签名上传地址');
+        }
+
+        const blob = new Blob([file], { type });
+        await axios.put(upload_url, blob, {
+          headers: { 'Content-Type': type },
+          onUploadProgress: (progressEvent) => {
+            const _target = uploadData.value.find((item) => item.uid === uid);
+            const percentCompleted = Math.round(progressEvent.progress * 100);
+
+            _target.percent = percentCompleted;
+            percentCompleted === 100 && (_target.uploadStatus = EnumUploadStatus.done);
+          },
+        });
+      } catch {
+        currentData.uploadStatus = EnumUploadStatus.error;
       }
     };
 
-    const onConfirm = () => {
+    const getFileInfo = async (file: any) => {
+      const { name } = file;
+      const ext = name.slice(name.lastIndexOf('.')).toLowerCase();
+
+      if (imageExtensions.includes(ext)) {
+        return {
+          fileTypeLabel: '图片',
+          cover: URL.createObjectURL(file),
+        };
+      } else if (videoExtensions.includes(ext)) {
+        const { firstFrame } = await getVideoInfo(file);
+        return {
+          fileTypeLabel: '视频',
+          cover: firstFrame,
+        };
+      } else if (documentExtensions.includes(ext)) {
+        return {
+          fileTypeLabel: '文本',
+          cover: icon2,
+        };
+      } else {
+        return {
+          fileTypeLabel: '其他',
+          cover: '',
+        };
+      }
+    };
+
+    const onConfirm = async () => {
       console.log('onConfirm');
     };
     const handleDelete = (file) => {
       uploadData.value = uploadData.value.filter((item) => item.uid !== file.uid);
     };
 
-    const renderUploadList = (file, actions) => {
+    const renderUploadStatus = (record) => {
+      if (record.uploadStatus === EnumUploadStatus.error) {
+        return (
+          <div>
+            <p class="upload-text">上传失败</p>
+            <span class="upload-text color-#F64B31">{record.statusText}</span>
+          </div>
+        );
+      }
+      return (
+        <div>
+          <span class="upload-text ml-26px">
+            {record.uploadStatus === EnumUploadStatus.done ? '上传成功' : '上传中'}
+          </span>
+          <Progress percent={record.percent} class="m-0 p-0 " strokeColor="#25C883" />
+        </div>
+      );
+    };
+
+    const renderUploadList = () => {
       if (!uploadData.value.length) return null;
 
       console.log('renderUploadList', uploadData.value);
@@ -80,7 +178,7 @@ export default defineComponent({
       return (
         <>
           <p class="cts !color-#939499 mb-10px">
-            已上传：<span class="!color-#211F24">{`${checkSuccessNum.value}/${uploadData.value.length}`}</span>
+            已上传：<span class="!color-#211F24">{`${uploadSuccessNum.value}/${uploadData.value.length}`}</span>
           </p>
           <Table ref="tableRef" dataSource={uploadData.value} pagination={false} class="manuscript-table w-100% flex-1">
             <Column
@@ -91,7 +189,7 @@ export default defineComponent({
               ellipsis={true}
               customRender={({ text, record }) => {
                 return (
-                  <div class="flex items-center">
+                  <div class="flex items-center justify-end">
                     <ImgLazyLoad width={64} height={64} src={record.cover} class="!rounded-6px mr-16px flex-shrink-0" />
 
                     <TextArea
@@ -108,53 +206,30 @@ export default defineComponent({
             />
             <Column
               title="上传状态"
-              dataIndex="status"
-              key="status"
+              dataIndex="uploadStatus"
+              key="uploadStatus"
               width={164}
-              customRender={({ text, record }) => {
-                if (record.status === 'done') {
-                  return <span class="upload-text">上传成功</span>;
-                } else if (record.status === 'error') {
-                  return <span class="upload-text">上传失败</span>;
-                } else {
-                  return <span class="upload-text">上传中</span>;
-                }
-              }}
+              customRender={({ text, record }) => renderUploadStatus(record)}
             />
             <Column
               title="标签"
-              dataIndex="tags"
-              key="tags"
+              dataIndex="tag_ids"
+              key="tag_ids"
               width={243}
               customRender={({ text, record }) => {
                 return (
                   <CommonSelect
-                    v-model={record.tags}
+                    v-model={record.tag_ids}
                     class="w-full"
                     multiple
-                    options={tagData}
+                    options={tagData.value}
                     placeholder="请选择标签"
                   />
                 );
               }}
             />
-            <Column
-              title="类型"
-              dataIndex="type"
-              key="type"
-              width={80}
-              customRender={({ text, record }) => {
-                const fileName = record.name || '';
-                return <span>{getFileType(fileName)}</span>;
-              }}
-            />
-            <Column
-              title="大小"
-              dataIndex="size"
-              key="size"
-              width={100}
-              customRender={({ text, record }) => formatFileSize(record.size)}
-            />
+            <Column title="类型" dataIndex="fileTypeLabel" key="fileTypeLabel" width={80} />
+            <Column title="大小" dataIndex="size" key="size" width={100} />
             <Column
               title="操作"
               key="action"
@@ -163,10 +238,14 @@ export default defineComponent({
               customRender={({ text, record }) => {
                 return (
                   <div class="flex items-center">
-                    <Button type="text" class="!h-22px !p-0 mr-16px">
-                      取消生成
-                    </Button>
+                    {record.uploadStatus === EnumUploadStatus.uploading && (
+                      <Button type="text" class="!h-22px !p-0 mr-16px">
+                        取消生成
+                      </Button>
+                    )}
+
                     <img
+                      alt=""
                       class="cursor-pointer"
                       src={icon1}
                       width="14"
@@ -196,7 +275,7 @@ export default defineComponent({
         <section class="content flex-1 pt-8px px-24px pb-24px">
           <div class=" rounded-16px bg-#F7F8FA p-16px flex flex-col items-center mb-24px">
             <Upload
-              v-model:file-list={uploadData.value}
+              file-list={uploadData.value}
               action="/"
               multiple
               customRequest={handleUpload}
@@ -204,15 +283,13 @@ export default defineComponent({
               accept={[...imageExtensions, ...videoExtensions, ...documentExtensions].join(',')}
               showUploadList={false}
             >
-              <div
-                class="upload-box rounded-8px cursor-pointer h-100px w-full border border-dashed border-#D7D7D9 flex flex-col items-center justify-center w-full">
+              <div class="upload-box rounded-8px cursor-pointer h-100px w-full border border-dashed border-#D7D7D9 flex flex-col items-center justify-center w-full">
                 <icon-plus size="14" class="mb-10px color-#55585F" />
                 <span class="cts">点击或拖拽文件到此处上传</span>
               </div>
             </Upload>
             <p class="mb-4px cts !color-#939499 !text-12px !lh-20px">{`视频格式：视频格式：MP4、AVI、MOV，大小<1000MB`}</p>
-            <p
-              class="mb-4px cts !color-#939499 !text-12px !lh-20px">{`图片格式：PNG、JPG、JPEG、GIF、WEBP、BMP，大小<20MB`}</p>
+            <p class="mb-4px cts !color-#939499 !text-12px !lh-20px">{`图片格式：PNG、JPG、JPEG、GIF、WEBP、BMP，大小<20MB`}</p>
             <p class="cts !color-#939499 !text-12px !lh-20px">{`文本格式：TXT、DOC、DOCX、PDF，大小<20MB`}</p>
           </div>
           {renderUploadList()}
@@ -227,7 +304,7 @@ export default defineComponent({
               type="primary"
               onClick={onConfirm}
               loading={submitLoading.value}
-              disabled={!checkSuccessNum.value}
+              disabled={!uploadSuccessNum.value}
             >
               确定
             </Button>
diff --git a/src/views/material-center/components/raw-material/components/add-raw-material-drawer/style.scss b/src/views/material-center/components/raw-material/components/add-raw-material-drawer/style.scss
index 2362f69..b6baf35 100644
--- a/src/views/material-center/components/raw-material/components/add-raw-material-drawer/style.scss
+++ b/src/views/material-center/components/raw-material/components/add-raw-material-drawer/style.scss
@@ -40,6 +40,62 @@
         font-weight: 400;
         line-height: 20px;
       }
+
+      .ant-progress {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .ant-progress-outer {
+          position: relative;
+          width: 100%;
+          height: 6px !important;
+          margin: 0;
+          padding: 0;
+
+          .ant-progress-inner {
+            position: absolute;
+            top: 50%;
+            left: 0;
+            transform: translateY(-50%);
+            width: 100px;
+            height: 6px !important;
+            background: var(--BG-200, #F2F3F5);
+
+            .ant-progress-bg {
+              height: 6px !important;
+              background-color: #6D4CFE;
+            }
+
+          }
+        }
+
+
+        .ant-progress-text {
+          color: var(--Text-1, #211F24);
+          font-family: $font-family-regular;
+          font-size: 12px;
+          font-style: normal;
+          font-weight: 400;
+
+          .anticon {
+            font-size: 16px;
+          }
+
+        }
+
+        &.ant-progress-status-success {
+          .ant-progress-outer {
+            .ant-progress-bg {
+              background-color: #25C883;
+            }
+          }
+
+          .ant-progress-text {
+            color: #25C883;
+          }
+        }
+      }
     }
 
     .footer {
diff --git a/src/views/material-center/components/raw-material/components/tags-manage-modal/add-tag.vue b/src/views/material-center/components/raw-material/components/tags-manage-modal/add-tag.vue
index bec2264..158bbda 100644
--- a/src/views/material-center/components/raw-material/components/tags-manage-modal/add-tag.vue
+++ b/src/views/material-center/components/raw-material/components/tags-manage-modal/add-tag.vue
@@ -4,7 +4,6 @@
     :title="isEdit ? '编辑标签' : '添加新标签'"
     centered
     width="400px"
-    wrapClassName="tags-manage-modal"
     @cancel="onClose"
   >
     <Form ref="formRef" :model="form" :rules="rules" auto-label-width layout="horizontal">
diff --git a/src/views/material-center/components/raw-material/components/tags-manage-modal/delete-tag.vue b/src/views/material-center/components/raw-material/components/tags-manage-modal/delete-tag.vue
index 0543477..6073808 100644
--- a/src/views/material-center/components/raw-material/components/tags-manage-modal/delete-tag.vue
+++ b/src/views/material-center/components/raw-material/components/tags-manage-modal/delete-tag.vue
@@ -3,28 +3,21 @@
  * @Date: 2025-06-26 17:23:52
 -->
 <template>
-  <Modal
-    v-model:open="visible"
-    centered
-    title="删除标签"
-    width="400px"
-    wrapClassName="account-manage-modal"
-    @cancel="onClose"
-  >
+  <Modal v-model:open="visible" centered title="删除标签" width="400px" @cancel="onClose">
     <div class="flex items-center">
       <img :src="icon1" class="mr-12px" height="20" width="20" />
       <span>确认删除 "{{ tagName }}" 这个标签吗？</span>
     </div>
     <template #footer>
       <Button size="large" @click="onClose">取消</Button>
-      <Button class="ml-16px" danger size="large" type="primary" @click="onDelete">确认删除</Button>
+      <Button class="ml-16px" danger size="large" type="primary" @click="onSubmit">确认删除</Button>
     </template>
   </Modal>
 </template>
 
 <script setup>
 import { ref } from 'vue';
-import { Button, message } from 'ant-design-vue';
+import { Button, message, Modal } from 'ant-design-vue';
 import { deleteRawMaterialTag } from '@/api/all/generationWorkshop';
 
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';
@@ -35,12 +28,12 @@ const visible = ref(false);
 const tagId = ref('');
 const tagName = ref('');
 
-function onClose() {
+const onClose = () => {
   visible.value = false;
   tagId.value = '';
   tagName.value = '';
   emits('close');
-}
+};
 
 const open = (record) => {
   const { id = '', name = '' } = record;
@@ -50,14 +43,14 @@ const open = (record) => {
   visible.value = true;
 };
 
-async function onDelete() {
+const onSubmit = async () => {
   const { code } = await deleteRawMaterialTag(tagId.value);
   if (code === 200) {
     message.success('删除成功');
     emits('success');
     onClose();
   }
-}
+};
 
 defineExpose({ open });
 </script>
diff --git a/src/views/material-center/components/raw-material/img/icon-no-text.png b/src/views/material-center/components/raw-material/img/icon-no-text.png
new file mode 100644
index 0000000000000000000000000000000000000000..2cbb9e04363b94a989aaf08001eb9cdc3de92973
GIT binary patch
literal 1118
zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1|$#LC7uRSoCO|{#S9E$svykh8Km+7D9BhG
z<nF|<?wrg^AcrO0(btiIVPik{pF~y$2IkM6E{-7;jBoFp^%D-1IQH>5Po0a;hEN5y
zoC|BYBX_O~S15PbA#`f$g75_~jHR!+#Peci<azwin9|=6^it;h?WncBn!OH2&uz}@
z2i{`jefY=P_{>bXc5jo}`zAe&_{1k#amM-4;|(uu%s%tHe!A(m!5?q78wc9!w+ONA
zW%BgA`#eJL{En#q$JYEm8F+d94jE~wKPqQ;^GKT=`z!tb4dWZ(g%h+?DivE^E#4IU
z)@Iv&tKGHLPq}+PB-Q7(H=k2f;Q1%j(ly)RdBB5Ny!&6s+;e_$BTnJ8%smH<RLN;Z
z{5lRAtsB?xI9&T)af=a$DXW7Y<Ah*_Cn5}%)L_2jQ<@yluvYBDU!K;Y_i`T!xGr{T
zHSE=0u<>&5f{u6h*iT(Pa7Jd4;8`ZY==%+a*%k$G37)Za7g=P%e&cRe`iI`y_1m_0
zIf^hIG5KNp`?kaG1?{WqTKOM*k@!*B_hQTKhrja{e&CXK&~B1{l-l)e_9=s1e8@h~
z+qJWy@W#{~C#Co4)tAXU|Jt!yMf^Z+Y}?lCKWbY!CRwxi+<Vk>C#7X`ZTLk?ke~HV
zPCnomZ}<0i&5g=K8(uyWUq8X-Eu&jUqS^ahleiybJP6%W-COyyd2ZwL+a7*J?F_T+
z{{7myd-i|9w8wt4e&mb!zur^5`ua`J@Bh7hCp~8<`+vaq?!?KDj?S;MVpmwsa6*%z
zh^t`^6DG5S@rFuZX4Rj!D;MujT#|l;ck#Ae?)k0#SJWGR1-@lGwsWQNQE7Ykg<KDk
zdbZD8Zt>inE0ked#^Dure`hYr|0mJ<O6GuA?uOa+Z~IGLUUz`l68?ih&POR~TUEwI
zQ9Fj+s?|wM7dum5-Z;db(ER_0=Az(Pj-bGvF_(FnSBIPCqOVPhBeieburBTU*0sAV
zAwS=A_0dK7(_=SkN3oP`$~yj6XOnk!U>xV0Gj|;Gn$|H>F|9xno=$^R%hj}JwsuY$
zmfQ?-`HEAD`b*RK`S}01aV%s?4AQqPJa47mxUV;qLv()fO}jEC4Pf@Tv4F$lM#SwI
zx0A2`?|e3I{VpEu2`PW&{$#!1DgCEOz){s@gP7bo=SvR*Hapk8pZdT2vnnt*NZ9GL
vNyN1YA7S;Vk$H7)@wDd^<`y4p_cN?*{9NdA?$cLbalqi|>gTe~DWM4ff=k_V

literal 0
HcmV?d00001