165 lines
6.4 KiB
TypeScript
165 lines
6.4 KiB
TypeScript
import { useTusUpload } from "@web/src/hooks/useTusUpload";
|
||
import { ShareCodeGenerator } from "../sharecode/sharecodegenerator";
|
||
import { ShareCodeValidator } from "../sharecode/sharecodevalidator";
|
||
import { useState } from "react";
|
||
import { message, Progress, Button, Tabs } from "antd";
|
||
import { UploadOutlined } from "@ant-design/icons";
|
||
|
||
const { TabPane } = Tabs;
|
||
|
||
export default function DeptSettingPage() {
|
||
const [uploadedFileId, setUploadedFileId] = useState<string>('');
|
||
|
||
// 使用您的 useTusUpload hook
|
||
const { uploadProgress, isUploading, uploadError, handleFileUpload } = useTusUpload({
|
||
onSuccess: (fileId: string) => {
|
||
setUploadedFileId(fileId);
|
||
message.success('文件上传成功');
|
||
},
|
||
onError: (error: Error) => {
|
||
message.error('上传失败：' + error.message);
|
||
}
|
||
});
|
||
|
||
// 处理文件上传
|
||
const handleFileSelect = async (file: File) => {
|
||
const fileKey = `file-${Date.now()}`; // 生成唯一的文件标识
|
||
handleFileUpload(
|
||
file,
|
||
(result) => {
|
||
setUploadedFileId(result.fileId);
|
||
message.success('文件上传成功');
|
||
},
|
||
(error) => {
|
||
message.error('上传失败：' + error.message);
|
||
},
|
||
fileKey
|
||
);
|
||
};
|
||
|
||
// 处理分享码生成成功
|
||
const handleShareSuccess = (code: string) => {
|
||
message.success('分享码生成成功：' + code);
|
||
// 可以在这里添加其他逻辑，比如保存到历史记录
|
||
};
|
||
|
||
// 处理分享码验证成功
|
||
const handleValidSuccess = async (fileId: string) => {
|
||
try {
|
||
// 构建下载URL
|
||
const response = await fetch(`/api/upload/download/${fileId}`);
|
||
if (!response.ok) {
|
||
throw new Error('文件下载失败');
|
||
}
|
||
|
||
// 获取文件名
|
||
const contentDisposition = response.headers.get('content-disposition');
|
||
let filename = 'downloaded-file';
|
||
if (contentDisposition) {
|
||
const matches = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(contentDisposition);
|
||
if (matches != null && matches[1]) {
|
||
filename = matches[1].replace(/['"]/g, '');
|
||
}
|
||
}
|
||
|
||
// 创建下载链接
|
||
const blob = await response.blob();
|
||
const url = window.URL.createObjectURL(blob);
|
||
const link = document.createElement('a');
|
||
link.href = url;
|
||
link.download = filename;
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
window.URL.revokeObjectURL(url);
|
||
|
||
message.success('文件下载开始');
|
||
} catch (error) {
|
||
console.error('下载失败:', error);
|
||
message.error('文件下载失败');
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
|
||
<h2>文件分享中心</h2>
|
||
|
||
<Tabs defaultActiveKey="upload">
|
||
<TabPane tab="上传分享" key="upload">
|
||
{/* 文件上传区域 */}
|
||
<div style={{ marginBottom: '40px' }}>
|
||
<h3>第一步：上传文件</h3>
|
||
<div style={{
|
||
padding: '20px',
|
||
border: '2px dashed #d9d9d9',
|
||
borderRadius: '8px',
|
||
textAlign: 'center'
|
||
}}>
|
||
<input
|
||
type="file"
|
||
id="file-input"
|
||
style={{ display: 'none' }}
|
||
onChange={(e) => {
|
||
const file = e.target.files?.[0];
|
||
if (file) {
|
||
handleFileSelect(file);
|
||
}
|
||
}}
|
||
disabled={isUploading}
|
||
/>
|
||
<label
|
||
htmlFor="file-input"
|
||
style={{
|
||
display: 'inline-block',
|
||
padding: '12px 24px',
|
||
backgroundColor: '#1890ff',
|
||
color: 'white',
|
||
borderRadius: '6px',
|
||
cursor: 'pointer',
|
||
}}
|
||
>
|
||
<UploadOutlined /> 选择文件
|
||
</label>
|
||
|
||
{isUploading && (
|
||
<div style={{ marginTop: '20px' }}>
|
||
<Progress
|
||
percent={Object.values(uploadProgress)[0] || 0}
|
||
status="active"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{uploadError && (
|
||
<div style={{ color: '#ff4d4f', marginTop: '10px' }}>
|
||
{uploadError}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 生成分享码区域 */}
|
||
{uploadedFileId && (
|
||
<div style={{ marginBottom: '40px' }}>
|
||
<h3>第二步：生成分享码</h3>
|
||
<ShareCodeGenerator
|
||
fileId={uploadedFileId}
|
||
onSuccess={handleShareSuccess}
|
||
/>
|
||
</div>
|
||
)}
|
||
</TabPane>
|
||
|
||
{/* 使用分享码区域 */}
|
||
<TabPane tab="下载文件" key="download">
|
||
<div>
|
||
<h3>使用分享码下载文件</h3>
|
||
<ShareCodeValidator
|
||
onValidSuccess={handleValidSuccess}
|
||
/>
|
||
</div>
|
||
</TabPane>
|
||
</Tabs>
|
||
</div>
|
||
);
|
||
} |