feat: ✨️ 新增视频下载功能

- 支持从OSS直接下载已生成视频

src/components/icons/index.tsx

@@ -59,6 +59,17 @@ export const IconDownload = ({style, className}: IconProps) => (
 	</svg>
 )
 
+export const IconDownloadOutline = ({style, className}: IconProps)=>(
+	<svg
+		className={`svg-icon ${className || ''} icon-download`} style={style} xmlns="http://www.w3.org/2000/svg"
+		fill="none" width="1em" height="1em" viewBox="0 0 22 22"
+	>
+		<path
+			d="M9.94889 12.052V1.05935C9.94889 0.778394 10.0596 0.508944 10.2568 0.310277C10.4539 0.11161 10.7212 0 11 0C11.2788 0 11.5461 0.11161 11.7432 0.310277C11.9404 0.508944 12.0511 0.778394 12.0511 1.05935V12.052L13.9236 10.1648C14.0204 10.0634 14.1364 9.98239 14.2648 9.92663C14.3931 9.87087 14.5311 9.84146 14.6708 9.84011C14.8106 9.83876 14.9492 9.8655 15.0785 9.91876C15.2079 9.97203 15.3254 10.0508 15.4242 10.1503C15.523 10.2499 15.6011 10.3683 15.6539 10.4987C15.7068 10.6291 15.7333 10.7687 15.732 10.9096C15.7306 11.0504 15.7015 11.1895 15.6461 11.3188C15.5908 11.4482 15.5105 11.5651 15.4098 11.6627L11.7431 15.3581C11.546 15.5567 11.2787 15.6683 11 15.6683C10.7213 15.6683 10.454 15.5567 10.2569 15.3581L6.59022 11.6627C6.48954 11.5651 6.40919 11.4482 6.35387 11.3188C6.29854 11.1895 6.26936 11.0504 6.26802 10.9096C6.26668 10.7687 6.29321 10.6291 6.34606 10.4987C6.39892 10.3683 6.47703 10.2499 6.57583 10.1503C6.67464 10.0508 6.79215 9.97203 6.9215 9.91876C7.05085 9.8655 7.18944 9.83876 7.32916 9.84011C7.46888 9.84146 7.60694 9.87087 7.73525 9.92663C7.86356 9.98239 7.97955 10.0634 8.07644 10.1648L9.94889 12.052ZM17.5181 3.52296C17.194 3.52291 16.8832 3.39311 16.654 3.1621C16.4248 2.9311 16.2961 2.61782 16.2961 2.29115C16.2961 1.96449 16.4248 1.65121 16.654 1.4202C16.8832 1.1892 17.194 1.0594 17.5181 1.05935H19.5556C20.2039 1.05935 20.8256 1.31891 21.284 1.78092C21.7425 2.24294 22 2.86957 22 3.52296V19.5364C22 20.1898 21.7425 20.8164 21.284 21.2784C20.8256 21.7404 20.2039 22 19.5556 22H2.44444C1.79614 22 1.17438 21.7404 0.715961 21.2784C0.257539 20.8164 0 20.1898 0 19.5364V3.52296C0 2.86957 0.257539 2.24294 0.715961 1.78092C1.17438 1.31891 1.79614 1.05935 2.44444 1.05935H4.48189C4.64241 1.05933 4.80136 1.09117 4.94967 1.15306C5.09798 1.21495 5.23274 1.30568 5.34625 1.42007C5.45977 1.53446 5.54981 1.67026 5.61124 1.81972C5.67268 1.96918 5.7043 2.12937 5.7043 2.29115C5.7043 2.45293 5.67268 2.61313 5.61124 2.76259C5.54981 2.91205 5.45977 3.04785 5.34625 3.16224C5.23274 3.27662 5.09798 3.36735 4.94967 3.42925C4.80136 3.49114 4.64241 3.52298 4.48189 3.52296H2.44444V19.5364H19.5556V3.52296H17.5181Z"
+			fill="currentColor"/>
+	</svg>
+)
+
 export const IconPin = ({style, className}: IconProps) => (
 	<svg className={`svg-icon ${className || ''} icon-download`} style={style} xmlns="http://www.w3.org/2000/svg"
 	     fill="none" version="1.1" width="0.6em" height="1em" viewBox="0 0 12 21">

src/components/video/video-list-item.tsx

@@ -5,7 +5,7 @@ import {Checkbox, Popconfirm} from "antd";
 
 import ImageCover from '@/assets/images/cover.png'
 import {
-	IconDelete,
+	IconDelete, IconDownloadOutline,
 	IconEdit,
 	IconGenerateFailed,
 	IconGenerating,
@@ -15,11 +15,13 @@ import {
 import {VideoStatus} from "@/service/api/video.ts";
 import {formatTime} from "@/util/strings.ts";
 import {useTranslation} from "react-i18next";
+import {saveAs} from "file-saver";
 
 type Props = {
 	video: VideoInfo | LiveVideoInfo,
 	additionOperation?: React.ReactNode;
 	editable?: boolean;
+	downloadVisible?: boolean;
 	sortable?: boolean;
 	index?: number;
 	checked?: boolean;
@@ -41,7 +43,7 @@ type Props = {
 export const VideoListItem = (
 	{
 		id, video, onRemove,removeIcon, checked,playing,
-		onCheckedChange, onEdit, active, editable,
+		onCheckedChange, onEdit, active, editable,downloadVisible,
 		className, sortable, type, index,onItemClick,
 		additionOperation,onRegenerate,hideCheckBox
 	}: Props) => {
@@ -58,7 +60,12 @@ export const VideoListItem = (
 
 	const generating = (type == 'create' && video.status == VideoStatus.Generating)
 	const failed = (type == 'create' && (video.status != VideoStatus.Generating && video.status != VideoStatus.Generated)  )
-
+	const handleDownloadVideo = ()=>{
+		if(video.oss_video_url){
+			const ext = video.oss_video_url.substring(video.oss_video_url.lastIndexOf('.'))
+			saveAs(video.oss_video_url,`${video.title || video.video_title}${ext}`)
+		}
+	}
 	return <div
 		className={`video-item ${className}`}
 		ref={setNodeRef} style={{transform: `translateY(${transform?.y || 0}px)`,}}
@@ -117,6 +124,14 @@ export const VideoListItem = (
 				{/*		<MenuOutlined/>*/}
 				{/*	</button> : <button disabled className="cursor-not-allowed"><MenuOutlined/></button>)}*/}
 				<div className={"flex items-center justify-start gap-6"}>
+					{downloadVisible &&
+              <button className="hover:text-blue-500" onClick={e=>{
+								e.preventDefault()
+								e.stopPropagation()
+	              handleDownloadVideo?.()
+							}} style={{fontSize: '1.1em'}}>
+                  <IconDownloadOutline/>
+              </button>}
 					{editable && !generating && <>
 						{onEdit &&
                             <button className="hover:text-blue-500" onClick={e=>{

src/pages/video/index.tsx

@@ -264,6 +264,7 @@ export default function VideoIndex() {
 													onRegenerate={v.status != VideoStatus.Generating && v.status != VideoStatus.Generated?()=>{
 														processGenerateVideo(v)
 													}:undefined}
+													downloadVisible={v.status == VideoStatus.Generated && !!v.oss_video_url}
 													hideCheckBox={v.status != VideoStatus.Generating && v.status != VideoStatus.Generated}
 													editable={v.status != VideoStatus.Generating}
 													sortable={v.status == VideoStatus.Generated}

src/types/api.d.ts

@@ -114,6 +114,7 @@ declare interface LiveVideoInfo {
 	video_title: string;
 	cover: string;
 	video_duration: number;
+	oss_video_url?: string;
 	video_oss_url: string;
 	status: number;
 	order_no: string;