生成记录

frontend/app/web-gold/src/views/material/MaterialList.vue

@@ -123,14 +123,18 @@
                   <a-tag v-else-if="file.isImage" color="blue">图片</a-tag>
                   <a-tag v-else color="gray">文件</a-tag>
                 </div>
-                <!-- 删除图标 -->
-                <div class="material-item__delete" @click.stop="handleDeleteFile(file)">
-                  <DeleteOutlined />
-                </div>
                 <!-- 分组图标 -->
                 <div class="material-item__group" @click.stop="handleSingleGroup(file)">
                   <TagsOutlined />
                 </div>
+                <!-- 下载图标 -->
+                <div class="material-item__download" @click.stop="handleDownloadFile(file)">
+                  <DownloadOutlined />
+                </div>
+                <!-- 删除图标 -->
+                <div class="material-item__delete" @click.stop="handleDeleteFile(file)">
+                  <DeleteOutlined />
+                </div>
               </div>
               <!-- 文件信息 -->
               <div class="material-item__info">
@@ -249,7 +253,8 @@ import {
   SearchOutlined,
   FileOutlined,
   DeleteOutlined,
-  TagsOutlined
+  TagsOutlined,
+  DownloadOutlined
 } from '@ant-design/icons-vue'
 import { MaterialService, MaterialGroupService } from '@/api/material'
 import { MixService } from '@/api/mix'
@@ -425,6 +430,24 @@ const handleDeleteFile = (file) => {
   })
 }
 
+// 下载文件
+const handleDownloadFile = (file) => {
+  if (!file?.previewUrl) {
+    message.warning('文件地址无效')
+    return
+  }
+
+  const fileUrl =  file.previewUrl
+  const link = document.createElement('a')
+  link.href = fileUrl
+  link.download = file.fileName || 'download'
+  link.target = '_blank'
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  message.success('开始下载')
+}
+
 // 文件点击
 const handleFileClick = (file) => {
   const isSelected = selectedFileIds.value.includes(file.id)
@@ -853,7 +876,7 @@ const handleGroupCancel = () => {
 .material-item__group {
   position: absolute;
   bottom: 8px;
-  right: 42px; /* 在删除按钮左边 */
+  right: 76px; /* 在下载按钮左边 */
   width: 28px;
   height: 28px;
   background: rgba(24, 144, 255, 0.9);
@@ -868,6 +891,24 @@ const handleGroupCancel = () => {
   font-size: 16px;
 }
 
+.material-item__download {
+  position: absolute;
+  bottom: 8px;
+  right: 42px; /* 在删除按钮左边 */
+  width: 28px;
+  height: 28px;
+  background: rgba(82, 196, 26, 0.9);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  cursor: pointer;
+  opacity: 0;
+  transition: all 0.3s;
+  font-size: 16px;
+}
+
 .material-item:hover .material-item__delete {
   opacity: 1;
 }
@@ -876,6 +917,10 @@ const handleGroupCancel = () => {
   opacity: 1;
 }
 
+.material-item:hover .material-item__download {
+  opacity: 1;
+}
+
 .material-item__delete:hover {
   background: rgb(255, 77, 79);
   transform: scale(1.1);
@@ -886,6 +931,11 @@ const handleGroupCancel = () => {
   transform: scale(1.1);
 }
 
+.material-item__download:hover {
+  background: rgb(82, 196, 26);
+  transform: scale(1.1);
+}
+
 .material-item__info {
   padding: 12px;
 }