This commit is contained in:
Rao 2025-04-10 19:37:04 +08:00
parent c6e92cb876
commit f215539a0e
4 changed files with 23 additions and 12 deletions

View File

@ -1,14 +1,16 @@
import { ShareCodeGenerator } from "../sharecode/sharecodegenerator"; import { ShareCodeGenerator } from "../sharecode/sharecodegenerator";
import { ShareCodeValidator } from "../sharecode/sharecodevalidator"; import { ShareCodeValidator } from "../sharecode/sharecodevalidator";
import { message, Tabs, Form } from "antd"; import { Form } from "antd";
import { TusUploader } from "@web/src/components/common/uploader/TusUploader"; import { TusUploader } from "@web/src/components/common/uploader/TusUploader";
import CodeRecord from "../sharecode/components/CodeRecord"; import CodeRecord from "../sharecode/components/CodeRecord";
import Header from "./components/header"; import Header from "./components/header";
const { TabPane } = Tabs; import { useState } from "react";
import { MainFooter } from "../../main/layout/MainFooter";
export default function QuickUploadPage() { export default function QuickUploadPage() {
const [form] = Form.useForm(); const [form] = Form.useForm();
const uploadFileId = Form.useWatch(["file"], form)?.[0] const uploadFileId = Form.useWatch(["file"], form)?.[0]
const [fileMsg, setFileMsg] = useState<File|null>(null)
return ( return (
<div className="w-full min-h-screen bg-gray-50"> <div className="w-full min-h-screen bg-gray-50">
<Header /> <Header />
@ -29,7 +31,7 @@ export default function QuickUploadPage() {
<CodeRecord title="我生成的分享码" btnContent="上传记录" recordName="shareCodeGeneratorRecords" /> <CodeRecord title="我生成的分享码" btnContent="上传记录" recordName="shareCodeGeneratorRecords" />
</div> </div>
<div className="mb-8"> <div className="mb-8">
<ShareCodeGenerator fileId={uploadFileId} /> <ShareCodeGenerator fileId={uploadFileId} fileMsg={fileMsg} />
</div> </div>
<div className="mt-4"> <div className="mt-4">
<Form form={form}> <Form form={form}>
@ -37,12 +39,16 @@ export default function QuickUploadPage() {
<TusUploader <TusUploader
multiple={false} multiple={false}
style="w-full py-8 px-4 mb-0 h-72 border-2 border-dashed border-gray-200 hover:border-blue-400 bg-gray-50 bg-opacity-50 rounded-lg transition-colors" style="w-full py-8 px-4 mb-0 h-72 border-2 border-dashed border-gray-200 hover:border-blue-400 bg-gray-50 bg-opacity-50 rounded-lg transition-colors"
getFileMsg={(file) => {
setFileMsg(file)
}}
/> />
</Form.Item> </Form.Item>
</Form> </Form>
</div> </div>
</div> </div>
</div> </div>
<MainFooter />
</div> </div>
) )

View File

@ -14,6 +14,7 @@ interface ShareCodeGeneratorProps {
fileId: string; fileId: string;
onSuccess?: (code: string) => void; onSuccess?: (code: string) => void;
fileName?: string; fileName?: string;
fileMsg?: File;
} }
@ -33,6 +34,7 @@ export function copyToClipboard(text) {
export const ShareCodeGenerator: React.FC<ShareCodeGeneratorProps> = ({ export const ShareCodeGenerator: React.FC<ShareCodeGeneratorProps> = ({
fileId, fileId,
fileName, fileName,
fileMsg
}) => { }) => {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [shareCode, setShareCode] = useState<string>(''); const [shareCode, setShareCode] = useState<string>('');
@ -63,9 +65,14 @@ export const ShareCodeGenerator: React.FC<ShareCodeGeneratorProps> = ({
setLoading(true); setLoading(true);
console.log('开始生成分享码fileId:', fileId, 'fileName:', fileName); console.log('开始生成分享码fileId:', fileId, 'fileName:', fileName);
try { try {
let expiresAt = form.getFieldsValue()?.expiresAt ? form.getFieldsValue().expiresAt.tz('Asia/Shanghai').toDate() : dayjs().add(1, 'day').tz('Asia/Shanghai').toDate();
if (fileMsg && fileMsg.size > 1024 * 1024 * 1024 * 5) {
message.info('文件大小超过5GB系统将设置过期时间为1天', 6);
expiresAt = dayjs().add(1, 'day').tz('Asia/Shanghai').toDate();
}
const data: ShareCodeResponse = await generateShareCode.mutateAsync({ const data: ShareCodeResponse = await generateShareCode.mutateAsync({
fileId, fileId,
expiresAt: form.getFieldsValue()?.expiresAt ? form.getFieldsValue().expiresAt.tz('Asia/Shanghai').toDate() : dayjs().add(1, 'day').tz('Asia/Shanghai').toDate(), expiresAt: expiresAt,
canUseTimes: form.getFieldsValue()?.canUseTimes ? form.getFieldsValue().canUseTimes : 10, canUseTimes: form.getFieldsValue()?.canUseTimes ? form.getFieldsValue().canUseTimes : 10,
}); });
console.log('data', data) console.log('data', data)

View File

@ -52,13 +52,6 @@ export function MainFooter() {
title="访问烽火青云"> title="访问烽火青云">
<CloudOutlined className="text-lg" /> <CloudOutlined className="text-lg" />
</a> </a>
<a
href="http://27.57.72.38"
className="text-gray-400 hover:text-white transition-colors"
title="访问烽火律询">
<FileSearchOutlined className="text-lg" />
</a>
</div> </div>
</div> </div>
</div> </div>
@ -66,7 +59,7 @@ export function MainFooter() {
{/* 版权信息 */} {/* 版权信息 */}
<div className="border-t border-gray-700/50 mt-4 pt-4 text-center"> <div className="border-t border-gray-700/50 mt-4 pt-4 text-center">
<p className="text-gray-400 text-xs"> <p className="text-gray-400 text-xs">
© {new Date().getFullYear()} . All rights © {new Date().getFullYear()} . All rights
reserved. reserved.
</p> </p>
</div> </div>

View File

@ -15,6 +15,7 @@ export interface TusUploaderProps {
style?: string style?: string
icon?: ReactNode, icon?: ReactNode,
description?: string description?: string
getFileMsg?: (file: File) => void
} }
interface UploadingFile { interface UploadingFile {
@ -33,6 +34,7 @@ export const TusUploader = ({
style = "", style = "",
icon = <UploadOutlined />, icon = <UploadOutlined />,
description = "点击或拖拽文件到此区域进行上传", description = "点击或拖拽文件到此区域进行上传",
getFileMsg,
}: TusUploaderProps) => { }: TusUploaderProps) => {
const { handleFileUpload, uploadProgress } = useTusUpload(); const { handleFileUpload, uploadProgress } = useTusUpload();
const [uploadingFiles, setUploadingFiles] = useState<UploadingFile[]>([]); const [uploadingFiles, setUploadingFiles] = useState<UploadingFile[]>([]);
@ -68,6 +70,9 @@ export const TusUploader = ({
const handleBeforeUpload = useCallback( const handleBeforeUpload = useCallback(
(file: File) => { (file: File) => {
console.log('File object:',file) console.log('File object:',file)
if(getFileMsg){
getFileMsg(file)
}
// 判断是否为文件 // 判断是否为文件
if (!file.type) { if (!file.type) {
message.error('请选择正确的文件'); message.error('请选择正确的文件');