95 lines
4.2 KiB
TypeScript
Executable File
95 lines
4.2 KiB
TypeScript
Executable File
|
||
import { ShareCodeGenerator } from "../sharecode/sharecodegenerator";
|
||
import { ShareCodeValidator } from "../sharecode/sharecodevalidator";
|
||
import { message, Tabs, Form, Spin } from "antd";
|
||
import { env } from '../../../env'
|
||
import { TusUploader } from "@web/src/components/common/uploader/TusUploader";
|
||
import { useState } from "react";
|
||
const { TabPane } = Tabs;
|
||
export default function DeptSettingPage() {
|
||
const [form] = Form.useForm();
|
||
const uploadFileId = Form.useWatch(["file"], form)?.[0]
|
||
const [isGetingFileId, setIsGetingFileId] = useState(false);
|
||
// 处理分享码生成成功
|
||
const handleShareSuccess = (code: string) => {
|
||
message.success('分享码生成成功：' + code);
|
||
// 可以在这里添加其他逻辑，比如保存到历史记录
|
||
}
|
||
// 处理分享码验证成功
|
||
const handleValidSuccess = async (fileUrl: string, fileName: string) => {
|
||
setIsGetingFileId(true);
|
||
try {
|
||
// 构建下载URL（包含文件名参数）
|
||
console.log('文件url:', fileUrl);
|
||
const downloadUrl = `http://${env.SERVER_IP}:${env.FILE_PORT}/uploads/${fileUrl}`;
|
||
console.log('下载URL:', downloadUrl);
|
||
const link = document.createElement('a');
|
||
link.href = downloadUrl;
|
||
|
||
// 直接使用传入的 fileName
|
||
link.download = fileName;
|
||
link.target = '_blank'; // 在新标签页中打开
|
||
// 触发下载
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
|
||
message.success('文件下载开始');
|
||
} catch (error) {
|
||
console.error('下载失败:', error);
|
||
message.error('文件下载失败');
|
||
} finally {
|
||
setIsGetingFileId(false);
|
||
}
|
||
};
|
||
|
||
|
||
return (
|
||
<>
|
||
{
|
||
isGetingFileId ?
|
||
(<Spin spinning={isGetingFileId} fullscreen />) :
|
||
(<div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
|
||
<span className="text-2xl py-4">文件分享中心</span>
|
||
<Tabs defaultActiveKey="upload">
|
||
<TabPane tab="上传分享" key="upload">
|
||
{/* 文件上传区域 */}
|
||
<div style={{ marginBottom: '40px' }}>
|
||
<span className="text-lg block text-zinc-700 py-2">第一步：上传文件</span>
|
||
{/* 如果没有已上传文件，显示上传区域 */}
|
||
<Form form={form}>
|
||
<Form.Item name="file">
|
||
<TusUploader
|
||
multiple={false}
|
||
style={"w-full py-4"}
|
||
></TusUploader>
|
||
</Form.Item>
|
||
</Form>
|
||
</div>
|
||
|
||
{/* 生成分享码区域 */}
|
||
<div style={{ marginBottom: '40px' }}>
|
||
<span className="text-lg block text-zinc-700 py-4">第二步：生成分享码</span>
|
||
<ShareCodeGenerator
|
||
fileId={uploadFileId}
|
||
onSuccess={handleShareSuccess}
|
||
/>
|
||
</div>
|
||
</TabPane>
|
||
|
||
{/* 使用分享码区域 */}
|
||
<TabPane tab="下载文件" key="download">
|
||
<div>
|
||
<span className="text-lg block text-zinc-700 py-4">使用分享码下载文件</span>
|
||
<ShareCodeValidator
|
||
onValidSuccess={handleValidSuccess}
|
||
/>
|
||
</div>
|
||
</TabPane>
|
||
</Tabs>
|
||
</div>)
|
||
}
|
||
</>
|
||
)
|
||
|
||
} |