lin
This commit is contained in:
parent
f991fbe979
commit
a9eedd743e
|
|
@ -2,9 +2,9 @@ import { useTusUpload } from "@web/src/hooks/useTusUpload";
|
|||
import { ShareCodeGenerator } from "../sharecode/sharecodegenerator";
|
||||
import { ShareCodeValidator } from "../sharecode/sharecodevalidator";
|
||||
import { useState, useRef, useCallback } from "react";
|
||||
import { message, Progress, Button, Tabs } from "antd";
|
||||
import { message, Progress, Button, Tabs, DatePicker } from "antd";
|
||||
import { UploadOutlined, DeleteOutlined, InboxOutlined } from "@ant-design/icons";
|
||||
|
||||
import {env} from '../../../../env'
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
export default function DeptSettingPage() {
|
||||
|
|
@ -13,6 +13,7 @@ export default function DeptSettingPage() {
|
|||
const [fileNameMap, setFileNameMap] = useState<Record<string, string>>({});
|
||||
const [uploadedFiles, setUploadedFiles] = useState<{id: string, name: string}[]>([]);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [expireTime, setExpireTime] = useState<Date | null>(null);
|
||||
const dropRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// 使用您的 useTusUpload hook
|
||||
|
|
@ -51,7 +52,7 @@ export default function DeptSettingPage() {
|
|||
try {
|
||||
console.log('正在保存文件名到数据库:', result.fileName, '对应文件ID:', result.fileId);
|
||||
|
||||
const response = await fetch('http://localhost:3000/upload/filename', {
|
||||
const response = await fetch(`http://${env.SERVER_IP}:${env.SERVER_PORT}/upload/filename`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
|
|
@ -87,11 +88,9 @@ export default function DeptSettingPage() {
|
|||
};
|
||||
|
||||
// 处理多个文件上传
|
||||
const handleFilesUpload = (files: FileList | File[]) => {
|
||||
Array.from(files).forEach(file => {
|
||||
handleFileSelect(file);
|
||||
});
|
||||
};
|
||||
// const handleFilesUpload = (file: File) => {
|
||||
// handleFileSelect(file);
|
||||
// };
|
||||
|
||||
// 拖拽相关处理函数
|
||||
const handleDragEnter = useCallback((e: React.DragEvent<HTMLDivElement>) => {
|
||||
|
|
@ -117,15 +116,9 @@ export default function DeptSettingPage() {
|
|||
e.stopPropagation();
|
||||
setIsDragging(false);
|
||||
|
||||
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
|
||||
handleFilesUpload(e.dataTransfer.files);
|
||||
}
|
||||
handleFileSelect(e.dataTransfer.files[0]);
|
||||
}, []);
|
||||
|
||||
// 删除文件
|
||||
const handleDeleteFile = (index: number) => {
|
||||
setUploadedFiles(prev => prev.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
// 处理分享码生成成功
|
||||
const handleShareSuccess = (code: string) => {
|
||||
|
|
@ -165,6 +158,7 @@ export default function DeptSettingPage() {
|
|||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
|
||||
<h2>文件分享中心</h2>
|
||||
|
|
@ -192,20 +186,20 @@ export default function DeptSettingPage() {
|
|||
>
|
||||
<InboxOutlined style={{ fontSize: '48px', color: isDragging ? '#1890ff' : '#d9d9d9' }} />
|
||||
<p>点击或拖拽文件到此区域进行上传</p>
|
||||
<p style={{ fontSize: '12px', color: '#888' }}>支持单个或批量上传文件</p>
|
||||
<p style={{ fontSize: '12px', color: '#888' }}>支持单个上传文件</p>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
id="file-input"
|
||||
style={{ display: 'none' }}
|
||||
onChange={(e) => {
|
||||
const files = e.target.files;
|
||||
if (files && files.length > 0) {
|
||||
handleFilesUpload(files);
|
||||
const file = e.target.files[0];
|
||||
if (file) {
|
||||
handleFileSelect(file);
|
||||
}
|
||||
}}
|
||||
disabled={isUploading}
|
||||
multiple
|
||||
|
||||
/>
|
||||
<label
|
||||
htmlFor="file-input"
|
||||
|
|
@ -260,7 +254,6 @@ export default function DeptSettingPage() {
|
|||
<Button
|
||||
type="text"
|
||||
icon={<DeleteOutlined style={{ color: '#ff4d4f' }} />}
|
||||
onClick={() => handleDeleteFile(index)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -287,6 +280,7 @@ export default function DeptSettingPage() {
|
|||
{uploadedFileId && (
|
||||
<div style={{ marginBottom: '40px' }}>
|
||||
<h3>第二步：生成分享码</h3>
|
||||
|
||||
<ShareCodeGenerator
|
||||
fileId={uploadedFileId}
|
||||
onSuccess={handleShareSuccess}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import React, { useState } from 'react';
|
||||
import { Button, message } from 'antd';
|
||||
import { CopyOutlined } from '@ant-design/icons';
|
||||
|
||||
import {env} from '../../../../env'
|
||||
interface ShareCodeGeneratorProps {
|
||||
fileId: string;
|
||||
onSuccess?: (code: string) => void;
|
||||
|
|
@ -23,7 +23,7 @@ export const ShareCodeGenerator: React.FC<ShareCodeGeneratorProps> = ({
|
|||
console.log('开始生成分享码，fileId:', fileId, 'fileName:', fileName);
|
||||
|
||||
try {
|
||||
const response = await fetch(`http://localhost:3000/upload/share/${fileId}`, {
|
||||
const response = await fetch(`http://${env.SERVER_IP}:${env.SERVER_PORT}/upload/share/${fileId}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
|
|
@ -33,7 +33,7 @@ export const ShareCodeGenerator: React.FC<ShareCodeGeneratorProps> = ({
|
|||
})
|
||||
});
|
||||
console.log('Current fileId:', fileId); // 确保 fileId 有效
|
||||
console.log('请求URL:', `/upload/share/${fileId}`);
|
||||
console.log('请求URL:', `http://${env.SERVER_IP}:${env.SERVER_PORT}/upload/share/${fileId}`);
|
||||
console.log('API响应状态:', response.status);
|
||||
|
||||
const responseText = await response.text();
|
||||
|
|
@ -119,10 +119,14 @@ export const ShareCodeGenerator: React.FC<ShareCodeGeneratorProps> = ({
|
|||
}}
|
||||
/>
|
||||
</div>
|
||||
{expiresAt && (
|
||||
{expiresAt ? (
|
||||
<div style={{ color: '#666' }}>
|
||||
有效期至: {expiresAt.toLocaleString()}
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ color: 'red' }}>
|
||||
未获取到有效期信息
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useState } from 'react';
|
||||
import { Input, Button, message } from 'antd';
|
||||
import styles from './ShareCodeValidator.module.css';
|
||||
|
||||
import {env} from '../../../../env'
|
||||
interface ShareCodeValidatorProps {
|
||||
onValidSuccess: (fileId: string, fileName: string) => void;
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@ export const ShareCodeValidator: React.FC<ShareCodeValidatorProps> = ({
|
|||
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await fetch(`http://localhost:3000/upload/share/${code.trim()}`);
|
||||
const response = await fetch(`http://${env.SERVER_IP}:${env.SERVER_PORT}/upload/share/${code.trim()}`);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
|
|
|
|||
Loading…
Reference in New Issue