linfeng
/
staff_data
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

lin

This commit is contained in:
linfeng 2025-03-21 22:34:24 +08:00
parent f991fbe979
commit a9eedd743e
3 changed files with 25 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
apps/web/src/app/main/admin/deptsettingpage/page.tsx
View File

@ -2,9 +2,9 @@ import { useTusUpload } from "@web/src/hooks/useTusUpload";
import { ShareCodeGenerator } from "../sharecode/sharecodegenerator"; import { ShareCodeGenerator } from "../sharecode/sharecodegenerator";
import { ShareCodeValidator } from "../sharecode/sharecodevalidator"; import { ShareCodeValidator } from "../sharecode/sharecodevalidator";
import { useState, useRef, useCallback } from "react"; 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 { UploadOutlined, DeleteOutlined, InboxOutlined } from "@ant-design/icons";
import {env} from '../../../../env'
const { TabPane } = Tabs; const { TabPane } = Tabs;
export default function DeptSettingPage() { export default function DeptSettingPage() {
@ -13,6 +13,7 @@ export default function DeptSettingPage() {
const [fileNameMap, setFileNameMap] = useState<Record<string, string>>({}); const [fileNameMap, setFileNameMap] = useState<Record<string, string>>({});
const [uploadedFiles, setUploadedFiles] = useState<{id: string, name: string}[]>([]); const [uploadedFiles, setUploadedFiles] = useState<{id: string, name: string}[]>([]);
const [isDragging, setIsDragging] = useState(false); const [isDragging, setIsDragging] = useState(false);
const [expireTime, setExpireTime] = useState<Date | null>(null);
const dropRef = useRef<HTMLDivElement>(null); const dropRef = useRef<HTMLDivElement>(null);
// 使用您的 useTusUpload hook // 使用您的 useTusUpload hook
@ -51,7 +52,7 @@ export default function DeptSettingPage() {
try { try {
console.log('正在保存文件名到数据库:', result.fileName, '对应文件ID:', result.fileId); 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', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
@ -87,11 +88,9 @@ export default function DeptSettingPage() {
}; };
// 处理多个文件上传 // 处理多个文件上传
const handleFilesUpload = (files: FileList | File[]) => { // const handleFilesUpload = (file: File) => {
Array.from(files).forEach(file => { // handleFileSelect(file);
handleFileSelect(file); // };
});
};
// 拖拽相关处理函数 // 拖拽相关处理函数
const handleDragEnter = useCallback((e: React.DragEvent<HTMLDivElement>) => { const handleDragEnter = useCallback((e: React.DragEvent<HTMLDivElement>) => {
@ -117,15 +116,9 @@ export default function DeptSettingPage() {
e.stopPropagation(); e.stopPropagation();
setIsDragging(false); setIsDragging(false);
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) { handleFileSelect(e.dataTransfer.files[0]);
handleFilesUpload(e.dataTransfer.files);
}
}, []); }, []);
// 删除文件
const handleDeleteFile = (index: number) => {
setUploadedFiles(prev => prev.filter((_, i) => i !== index));
};
// 处理分享码生成成功 // 处理分享码生成成功
const handleShareSuccess = (code: string) => { const handleShareSuccess = (code: string) => {
@ -165,6 +158,7 @@ export default function DeptSettingPage() {
} }
}; };
return ( return (
<div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px' }}> <div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
<h2>文件分享中心</h2> <h2>文件分享中心</h2>
@ -192,20 +186,20 @@ export default function DeptSettingPage() {
> >
<InboxOutlined style={{ fontSize: '48px', color: isDragging ? '#1890ff' : '#d9d9d9' }} /> <InboxOutlined style={{ fontSize: '48px', color: isDragging ? '#1890ff' : '#d9d9d9' }} />
<p>点击或拖拽文件到此区域进行上传</p> <p>点击或拖拽文件到此区域进行上传</p>
<p style={{ fontSize: '12px', color: '#888' }}>支持单个或批量上传文件</p> <p style={{ fontSize: '12px', color: '#888' }}>支持单个上传文件</p>
<input <input
type="file" type="file"
id="file-input" id="file-input"
style={{ display: 'none' }} style={{ display: 'none' }}
onChange={(e) => { onChange={(e) => {
const files = e.target.files; const file = e.target.files[0];
if (files && files.length > 0) { if (file) {
handleFilesUpload(files); handleFileSelect(file);
} }
}} }}
disabled={isUploading} disabled={isUploading}
multiple
/> />
<label <label
htmlFor="file-input" htmlFor="file-input"
@ -260,7 +254,6 @@ export default function DeptSettingPage() {
<Button <Button
type="text" type="text"
icon={<DeleteOutlined style={{ color: '#ff4d4f' }} />} icon={<DeleteOutlined style={{ color: '#ff4d4f' }} />}
onClick={() => handleDeleteFile(index)}
/> />
</div> </div>
))} ))}
@ -287,6 +280,7 @@ export default function DeptSettingPage() {
{uploadedFileId && ( {uploadedFileId && (
<div style={{ marginBottom: '40px' }}> <div style={{ marginBottom: '40px' }}>
<h3>第二步：生成分享码</h3> <h3>第二步：生成分享码</h3>
<ShareCodeGenerator <ShareCodeGenerator
fileId={uploadedFileId} fileId={uploadedFileId}
onSuccess={handleShareSuccess} onSuccess={handleShareSuccess}

12
apps/web/src/app/main/admin/sharecode/sharecodegenerator.tsx
View File

@ -2,7 +2,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Button, message } from 'antd'; import { Button, message } from 'antd';
import { CopyOutlined } from '@ant-design/icons'; import { CopyOutlined } from '@ant-design/icons';
import {env} from '../../../../env'
interface ShareCodeGeneratorProps { interface ShareCodeGeneratorProps {
fileId: string; fileId: string;
onSuccess?: (code: string) => void; onSuccess?: (code: string) => void;
@ -23,7 +23,7 @@ export const ShareCodeGenerator: React.FC<ShareCodeGeneratorProps> = ({
console.log('开始生成分享码，fileId:', fileId, 'fileName:', fileName); console.log('开始生成分享码，fileId:', fileId, 'fileName:', fileName);
try { 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', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
@ -33,7 +33,7 @@ export const ShareCodeGenerator: React.FC<ShareCodeGeneratorProps> = ({
}) })
}); });
console.log('Current fileId:', fileId); // 确保 fileId 有效 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); console.log('API响应状态:', response.status);
const responseText = await response.text(); const responseText = await response.text();
@ -119,10 +119,14 @@ export const ShareCodeGenerator: React.FC<ShareCodeGeneratorProps> = ({
}} }}
/> />
</div> </div>
{expiresAt && ( {expiresAt ? (
<div style={{ color: '#666' }}> <div style={{ color: '#666' }}>
有效期至: {expiresAt.toLocaleString()} 有效期至: {expiresAt.toLocaleString()}
</div> </div>
) : (
<div style={{ color: 'red' }}>
未获取到有效期信息
</div>
)} )}
</div> </div>
)} )}

4
apps/web/src/app/main/admin/sharecode/sharecodevalidator.tsx
View File

@ -1,7 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Input, Button, message } from 'antd'; import { Input, Button, message } from 'antd';
import styles from './ShareCodeValidator.module.css'; import styles from './ShareCodeValidator.module.css';
import {env} from '../../../../env'
interface ShareCodeValidatorProps { interface ShareCodeValidatorProps {
onValidSuccess: (fileId: string, fileName: string) => void; onValidSuccess: (fileId: string, fileName: string) => void;
} }
@ -20,7 +20,7 @@ export const ShareCodeValidator: React.FC<ShareCodeValidatorProps> = ({
setLoading(true); setLoading(true);
try { 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) { if (!response.ok) {
const errorData = await response.json().catch(() => ({})); const errorData = await response.json().catch(() => ({}));