lin
This commit is contained in:
commit
f991fbe979
|
|
@ -63,9 +63,7 @@ export class ShareCodeService {
|
|||
},
|
||||
});
|
||||
}
|
||||
|
||||
this.logger.log(`Generated share code ${code} for file ${fileId}`);
|
||||
|
||||
return {
|
||||
code,
|
||||
expiresAt,
|
||||
|
|
|
|||
|
|
@ -1,15 +1,19 @@
|
|||
import { useTusUpload } from "@web/src/hooks/useTusUpload";
|
||||
import { ShareCodeGenerator } from "../sharecode/sharecodegenerator";
|
||||
import { ShareCodeValidator } from "../sharecode/sharecodevalidator";
|
||||
import { useState } from "react";
|
||||
import { useState, useRef, useCallback } from "react";
|
||||
import { message, Progress, Button, Tabs } from "antd";
|
||||
import { UploadOutlined } from "@ant-design/icons";
|
||||
import { UploadOutlined, DeleteOutlined, InboxOutlined } from "@ant-design/icons";
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
export default function DeptSettingPage() {
|
||||
const [uploadedFileId, setUploadedFileId] = useState<string>('');
|
||||
const [uploadedFileName, setUploadedFileName] = useState<string>('');
|
||||
const [fileNameMap, setFileNameMap] = useState<Record<string, string>>({});
|
||||
const [uploadedFiles, setUploadedFiles] = useState<{id: string, name: string}[]>([]);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const dropRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// 使用您的 useTusUpload hook
|
||||
const { uploadProgress, isUploading, uploadError, handleFileUpload } = useTusUpload({
|
||||
|
|
@ -33,6 +37,17 @@ export default function DeptSettingPage() {
|
|||
setUploadedFileId(result.fileId);
|
||||
setUploadedFileName(result.fileName);
|
||||
|
||||
|
||||
// 添加到已上传文件列表
|
||||
setUploadedFiles(prev => [...prev, {id: result.fileId, name: file.name}]);
|
||||
|
||||
// 在前端保存文件名映射（用于当前会话）
|
||||
setFileNameMap(prev => ({
|
||||
...prev,
|
||||
[result.fileId]: file.name
|
||||
}));
|
||||
|
||||
// 上传成功后保存原始文件名到数据库
|
||||
try {
|
||||
console.log('正在保存文件名到数据库:', result.fileName, '对应文件ID:', result.fileId);
|
||||
|
||||
|
|
@ -71,6 +86,47 @@ export default function DeptSettingPage() {
|
|||
);
|
||||
};
|
||||
|
||||
// 处理多个文件上传
|
||||
const handleFilesUpload = (files: FileList | File[]) => {
|
||||
Array.from(files).forEach(file => {
|
||||
handleFileSelect(file);
|
||||
});
|
||||
};
|
||||
|
||||
// 拖拽相关处理函数
|
||||
const handleDragEnter = useCallback((e: React.DragEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragging(true);
|
||||
}, []);
|
||||
|
||||
const handleDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragging(false);
|
||||
}, []);
|
||||
|
||||
const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragging(true);
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragging(false);
|
||||
|
||||
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
|
||||
handleFilesUpload(e.dataTransfer.files);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 删除文件
|
||||
const handleDeleteFile = (index: number) => {
|
||||
setUploadedFiles(prev => prev.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
// 处理分享码生成成功
|
||||
const handleShareSuccess = (code: string) => {
|
||||
message.success('分享码生成成功：' + code);
|
||||
|
|
@ -118,53 +174,113 @@ export default function DeptSettingPage() {
|
|||
{/* 文件上传区域 */}
|
||||
<div style={{ marginBottom: '40px' }}>
|
||||
<h3>第一步：上传文件</h3>
|
||||
<div style={{
|
||||
padding: '20px',
|
||||
border: '2px dashed #d9d9d9',
|
||||
borderRadius: '8px',
|
||||
textAlign: 'center'
|
||||
}}>
|
||||
<div
|
||||
ref={dropRef}
|
||||
onDragEnter={handleDragEnter}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
style={{
|
||||
padding: '20px',
|
||||
border: `2px dashed ${isDragging ? '#1890ff' : '#d9d9d9'}`,
|
||||
borderRadius: '8px',
|
||||
textAlign: 'center',
|
||||
backgroundColor: isDragging ? 'rgba(24, 144, 255, 0.05)' : 'transparent',
|
||||
transition: 'all 0.3s',
|
||||
marginBottom: '20px'
|
||||
}}
|
||||
>
|
||||
<InboxOutlined style={{ fontSize: '48px', color: isDragging ? '#1890ff' : '#d9d9d9' }} />
|
||||
<p>点击或拖拽文件到此区域进行上传</p>
|
||||
<p style={{ fontSize: '12px', color: '#888' }}>支持单个或批量上传文件</p>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
id="file-input"
|
||||
style={{ display: 'none' }}
|
||||
onChange={(e) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
handleFileSelect(file);
|
||||
const files = e.target.files;
|
||||
if (files && files.length > 0) {
|
||||
handleFilesUpload(files);
|
||||
}
|
||||
}}
|
||||
disabled={isUploading}
|
||||
multiple
|
||||
/>
|
||||
<label
|
||||
htmlFor="file-input"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
padding: '12px 24px',
|
||||
padding: '8px 16px',
|
||||
backgroundColor: '#1890ff',
|
||||
color: 'white',
|
||||
borderRadius: '6px',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
marginTop: '10px'
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
|
||||
{/* 已上传文件列表 */}
|
||||
{uploadedFiles.length > 0 && (
|
||||
<div style={{
|
||||
border: '1px solid #f0f0f0',
|
||||
borderRadius: '4px',
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
{uploadedFiles.map((file, index) => (
|
||||
<div key={file.id} style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '10px 15px',
|
||||
borderBottom: index < uploadedFiles.length - 1 ? '1px solid #f0f0f0' : 'none',
|
||||
backgroundColor: index % 2 === 0 ? '#fafafa' : 'white'
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flex: 1
|
||||
}}>
|
||||
<div style={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: '#52c41a',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: '10px'
|
||||
}}>
|
||||
<span style={{ color: 'white', fontSize: '12px' }}>✓</span>
|
||||
</div>
|
||||
<span>{file.name}</span>
|
||||
</div>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<DeleteOutlined style={{ color: '#ff4d4f' }} />}
|
||||
onClick={() => handleDeleteFile(index)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isUploading && (
|
||||
<div style={{ marginTop: '20px' }}>
|
||||
<Progress
|
||||
percent={Math.round(Object.values(uploadProgress)[0] || 0)}
|
||||
status="active"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{uploadError && (
|
||||
<div style={{ color: '#ff4d4f', marginTop: '10px' }}>
|
||||
{uploadError}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 生成分享码区域 */}
|
||||
|
|
|
|||
Loading…
Reference in New Issue