handleAction('rename')}
@@ -46,6 +100,30 @@ function FileContextMenu({ file, position, onDownload, onRename, onDelete, onClo
重命名
+ handleAction('delete')}
diff --git a/src/components/workspace/FileDetailModal.jsx b/src/components/workspace/FileDetailModal.jsx
new file mode 100644
index 0000000..efa88fd
--- /dev/null
+++ b/src/components/workspace/FileDetailModal.jsx
@@ -0,0 +1,121 @@
+import { FiX } from 'react-icons/fi';
+import api from '../../services/api.js';
+
+/**
+ * 文件详情弹框组件
+ */
+function FileDetailModal({ file, onClose }) {
+ if (!file) return null;
+
+ const icon = api.workspace.getFileIcon(file.fileType);
+ const isFolder = file.type === 'folder';
+
+ // 获取文件类型描述
+ const getTypeDesc = (fileType) => {
+ const typeMap = {
+ text: '文本文件',
+ markdown: 'Markdown 文件',
+ json: 'JSON 文件',
+ javascript: 'JavaScript 文件',
+ python: 'Python 文件',
+ css: 'CSS 文件',
+ html: 'HTML 文件',
+ word: 'Word 文档',
+ excel: 'Excel 文档',
+ powerpoint: 'PowerPoint 文档',
+ image: '图片文件',
+ video: '视频文件',
+ audio: '音频文件',
+ pdf: 'PDF 文件',
+ archive: '压缩文件',
+ unknown: '未知类型',
+ };
+ return typeMap[fileType] || '文件';
+ };
+
+ return (
+
+
e.stopPropagation()}>
+
+
+
+
+
+ 名称
+
+
+ {file.name}
+
+
+
+
+ 类型
+
+
+ {isFolder ? '文件夹' : getTypeDesc(file.fileType)}
+
+
+ {!isFolder && (
+
+
+ 大小
+
+
+ {file.size || '-'}
+
+
+ )}
+ {file.dimensions && (
+
+
+ 尺寸
+
+
+ {file.dimensions}
+
+
+ )}
+ {file.duration && (
+
+
+ 时长
+
+
+ {file.duration}
+
+
+ )}
+
+
+ 修改时间
+
+
+ {file.modifiedAt || '-'}
+
+
+
+
+ 路径
+
+
+ /workspace/{file.name}
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default FileDetailModal;
diff --git a/src/components/workspace/FileTree.jsx b/src/components/workspace/FileTree.jsx
index 0ed42a0..9c2d3d4 100644
--- a/src/components/workspace/FileTree.jsx
+++ b/src/components/workspace/FileTree.jsx
@@ -1,4 +1,5 @@
import FileTreeItem from './FileTreeItem.jsx';
+import { FiFolder } from 'react-icons/fi';
import api from '../../services/api.js';
/**
@@ -8,6 +9,19 @@ import api from '../../services/api.js';
function FileTree({ onFileClick, onMenuClick }) {
const files = api.workspace.getFiles();
+ if (!files || files.length === 0) {
+ return (
+
+ );
+ }
+
return (
{files.map(item => (
diff --git a/src/components/workspace/FileTreeItem.jsx b/src/components/workspace/FileTreeItem.jsx
index 793a6a0..528ae22 100644
--- a/src/components/workspace/FileTreeItem.jsx
+++ b/src/components/workspace/FileTreeItem.jsx
@@ -1,7 +1,6 @@
import { useState } from 'react';
import { FiChevronRight, FiFolder, FiFile, FiFileText, FiCode, FiImage, FiVideo, FiMusic } from 'react-icons/fi';
import { FaFileWord, FaFileExcel, FaFilePowerpoint, FaFilePdf, FaFileArchive } from 'react-icons/fa';
-import api from '../../services/api.js';
/**
* 文件树项组件
@@ -9,7 +8,6 @@ import api from '../../services/api.js';
*/
function FileTreeItem({ item, onFileClick, onMenuClick }) {
const [isExpanded, setIsExpanded] = useState(false);
- const [showMenu, setShowMenu] = useState(false);
const isFolder = item.type === 'folder';
@@ -73,8 +71,7 @@ function FileTreeItem({ item, onFileClick, onMenuClick }) {
// 点击操作按钮
const handleMenuClick = (e) => {
e.stopPropagation();
- setShowMenu(!showMenu);
- if (onMenuClick && !showMenu) {
+ if (onMenuClick) {
onMenuClick(item, e);
}
};
@@ -118,7 +115,7 @@ function FileTreeItem({ item, onFileClick, onMenuClick }) {
{/* 子项（文件夹展开时显示） */}
- {isFolder && isExpanded && item.children && (
+ {isFolder && isExpanded && item.children && item.children.length > 0 && (
{item.children.map(child => (
{
+ if (newName.trim()) {
+ onConfirm && onConfirm(newName.trim());
+ }
+ };
+
+ return (
+
+
+
+ setNewName(e.target.value)}
+ style={{
+ width: '100%',
+ padding: '8px 12px',
+ border: '1px solid var(--color-border-2)',
+ borderRadius: 'var(--radius-sm)',
+ fontSize: '14px',
+ outline: 'none',
+ }}
+ autoFocus
+ />
+
+
+ );
+}
+
+export default RenameModal;
diff --git a/src/components/workspace/UploadButton.jsx b/src/components/workspace/UploadButton.jsx
new file mode 100644
index 0000000..4064b43
--- /dev/null
+++ b/src/components/workspace/UploadButton.jsx
@@ -0,0 +1,38 @@
+import { useRef } from 'react';
+
+/**
+ * 上传文件组件
+ * 使用原生 input[type="file"]
+ */
+function UploadButton({ onUpload }) {
+ const inputRef = useRef(null);
+
+ const handleClick = () => {
+ inputRef.current && inputRef.current.click();
+ };
+
+ const handleChange = (e) => {
+ const file = e.target.files[0];
+ if (file) {
+ onUpload && onUpload(file);
+ // 重置 input，允许重复上传同一文件
+ e.target.value = '';
+ }
+ };
+
+ return (
+ <>
+
+
+ 上传文件
+
+
+ );
+}
+
+export default UploadButton;
diff --git a/src/components/workspace/WorkspaceSidebar.jsx b/src/components/workspace/WorkspaceSidebar.jsx
index 0be8c5e..361b797 100644
--- a/src/components/workspace/WorkspaceSidebar.jsx
+++ b/src/components/workspace/WorkspaceSidebar.jsx
@@ -1,9 +1,14 @@
import { useState, useEffect, useRef } from 'react';
-import { FiX, FiFolder } from 'react-icons/fi';
+import { FiX, FiFolder, FiRefreshCw, FiPlus, FiFilePlus, FiFolderPlus, FiUpload } from 'react-icons/fi';
import FileTree from './FileTree.jsx';
import FileContextMenu from './FileContextMenu.jsx';
import FilePreviewModal from './FilePreviewModal.jsx';
+import RenameModal from './RenameModal.jsx';
+import CreateModal from './CreateModal.jsx';
+import FileDetailModal from './FileDetailModal.jsx';
import Modal from '../common/Modal.jsx';
+import Toast from '../common/Toast.jsx';
+import api from '../../services/api.js';
/**
* 工作空间侧边栏组件
@@ -13,10 +18,19 @@ function WorkspaceSidebar({ isOpen, onClose }) {
const [contextMenu, setContextMenu] = useState(null); // { file, position }
const [previewFile, setPreviewFile] = useState(null);
const [deleteFile, setDeleteFile] = useState(null);
+ const [renameFile, setRenameFile] = useState(null);
+ const [createType, setCreateType] = useState(null); // 'file' | 'folder'
+ const [detailFile, setDetailFile] = useState(null);
+ const [moveFile, setMoveFile] = useState(null);
+ const [moveTarget, setMoveTarget] = useState(null); // 选中的目标文件夹
+ const [isRefreshing, setIsRefreshing] = useState(false);
+ const [showDropdown, setShowDropdown] = useState(false);
+ const [toast, setToast] = useState(null); // { type, message }
const [width, setWidth] = useState(280); // 默认宽度 280px
const sidebarRef = useRef(null);
const isResizingRef = useRef(false);
const lastXRef = useRef(0);
+ const dropdownRef = useRef(null);
// 拖动调整宽度 - 使用 requestAnimationFrame 优化
const handleMouseDown = (e) => {
@@ -87,27 +101,44 @@ function WorkspaceSidebar({ isOpen, onClose }) {
};
}, []);
- // 点击外部关闭右键菜单
+ // 点击外部关闭右键菜单和下拉菜单
useEffect(() => {
- const handleClickOutside = () => {
- setContextMenu(null);
+ const handleClickOutside = (e) => {
+ // 关闭右键菜单
+ if (contextMenu) {
+ setContextMenu(null);
+ }
+ // 关闭下拉菜单
+ if (showDropdown && dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+ setShowDropdown(false);
+ }
};
- if (contextMenu) {
- document.addEventListener('click', handleClickOutside);
- return () => document.removeEventListener('click', handleClickOutside);
- }
- }, [contextMenu]);
+ document.addEventListener('click', handleClickOutside);
+ return () => document.removeEventListener('click', handleClickOutside);
+ }, [contextMenu, showDropdown]);
// 文件点击：打开预览
const handleFileClick = (file) => {
+ // 不支持预览的文件类型直接提示
+ const unpreviewableTypes = ['archive', 'unknown'];
+ if (unpreviewableTypes.includes(file.fileType)) {
+ showToast('该文件类型不支持预览', 'warning');
+ return;
+ }
setPreviewFile(file);
};
// 右键菜单点击
const handleMenuClick = (file, e) => {
+ // 如果点击的是同一个文件，且菜单已经显示，则关闭菜单（toggle）
+ if (contextMenu && contextMenu.file.id === file.id) {
+ setContextMenu(null);
+ return;
+ }
+
const rect = e.currentTarget.getBoundingClientRect();
// 菜单显示在按钮左侧，避免超出页面
- const menuWidth = 140; // 菜单宽度
+ const menuWidth = 160; // 菜单宽度
const x = rect.right - menuWidth;
const y = rect.bottom + 4;
@@ -120,32 +151,139 @@ function WorkspaceSidebar({ isOpen, onClose }) {
});
};
+ // 显示 Toast 提示
+ const showToast = (message, type = 'success') => {
+ setToast({ type, message });
+ setTimeout(() => setToast(null), 3000);
+ };
+
// 下载操作
const handleDownload = (file) => {
- alert('文件下载中...');
+ showToast('文件下载中...', 'info');
setContextMenu(null);
};
// 重命名操作
const handleRename = (file) => {
- alert('文件已重命名');
+ setRenameFile(file);
setContextMenu(null);
};
+ const handleRenameConfirm = (newName) => {
+ showToast('重命名成功');
+ setRenameFile(null);
+ };
+
// 删除操作
const handleDelete = (file) => {
setDeleteFile(file);
setContextMenu(null);
};
- // 确认删除
const handleDeleteConfirm = () => {
- alert('文件已删除');
+ showToast('文件已删除');
setDeleteFile(null);
};
+ // 新建文件/文件夹
+ const handleNewFile = () => {
+ setCreateType('file');
+ setShowDropdown(false);
+ setContextMenu(null);
+ };
+
+ const handleNewFolder = () => {
+ setCreateType('folder');
+ setShowDropdown(false);
+ setContextMenu(null);
+ };
+
+ const handleCreateConfirm = (name, type) => {
+ const message = type === 'file' ? '文件创建成功' : '文件夹创建成功';
+ showToast(message);
+ setCreateType(null);
+ };
+
+ // 上传文件
+ const handleUpload = (file) => {
+ showToast('文件上传成功');
+ setContextMenu(null);
+ };
+
+ const handleUploadClick = () => {
+ // 触发文件选择
+ const input = document.createElement('input');
+ input.type = 'file';
+ input.onchange = (e) => {
+ const file = e.target.files[0];
+ if (file) {
+ handleUpload(file);
+ }
+ };
+ input.click();
+ setShowDropdown(false);
+ };
+
+ // 移动文件
+ const handleMove = (file) => {
+ setMoveFile(file);
+ setMoveTarget(null);
+ setContextMenu(null);
+ };
+
+ const handleMoveConfirm = () => {
+ if (moveTarget) {
+ showToast(`文件已移动到 ${moveTarget}`);
+ setMoveFile(null);
+ setMoveTarget(null);
+ }
+ };
+
+ const handleMoveCancel = () => {
+ setMoveFile(null);
+ setMoveTarget(null);
+ };
+
+ // 查看详情
+ const handleDetail = (file) => {
+ setDetailFile(file);
+ setContextMenu(null);
+ };
+
+ // 刷新
+ const handleRefresh = () => {
+ setIsRefreshing(true);
+ setTimeout(() => {
+ setIsRefreshing(false);
+ showToast('文件列表已刷新');
+ }, 1000);
+ };
+
+ // 下拉菜单切换
+ const handleDropdownToggle = (e) => {
+ e.stopPropagation();
+ setShowDropdown(!showDropdown);
+ };
+
+ // 获取所有文件夹（树形结构，用于移动文件）
+ const getFolderTree = () => {
+ const files = api.workspace.getFiles();
+ const extractFolders = (items) => {
+ return items
+ .filter(item => item.type === 'folder')
+ .map(item => ({
+ id: item.id,
+ name: item.name,
+ children: item.children ? extractFolders(item.children) : [],
+ }));
+ };
+ return extractFolders(files);
+ };
+
if (!isOpen) return null;
+ const folderTree = getFolderTree();
+
return (
<>
工作空间
+
+
+
+
+
+
+
+
+ {showDropdown && (
+
+
+
+
+
+ 新建文件
+
+
+
+
+
+ 新建文件夹
+
+
+
+
+
+ 上传文件
+
+
+ )}
+
+
@@ -186,6 +364,11 @@ function WorkspaceSidebar({ isOpen, onClose }) {
onDownload={handleDownload}
onRename={handleRename}
onDelete={handleDelete}
+ onDetail={handleDetail}
+ onMove={handleMove}
+ onNewFile={handleNewFile}
+ onNewFolder={handleNewFolder}
+ onUpload={handleUploadClick}
onClose={() => setContextMenu(null)}
/>
)}
@@ -209,10 +392,111 @@ function WorkspaceSidebar({ isOpen, onClose }) {
确定要删除文件「{deleteFile.name}」吗？
)}
+
+ {/* 重命名弹框 */}
+ {renameFile && (
+
setRenameFile(null)}
+ />
+ )}
+
+ {/* 新建弹框 */}
+ {createType && (
+ setCreateType(null)}
+ />
+ )}
+
+ {/* 文件详情弹框 */}
+ {detailFile && (
+ setDetailFile(null)}
+ />
+ )}
+
+ {/* 移动文件弹框 */}
+ {moveFile && (
+
+
e.stopPropagation()} style={{ width: '400px' }}>
+
+
+
+
+
+
+
+
+
+
+ {folders.map(folder => (
+
+
{ if (selected !== folder.name) e.currentTarget.style.background = 'var(--color-bg-2)'; }}
+ onMouseLeave={(e) => { if (selected !== folder.name) e.currentTarget.style.background = 'transparent'; }}
+ onClick={() => onSelect(folder.name)}
+ >
+
+ {folder.name}
+
+ {folder.children.length > 0 && (
+
+ )}
+
+ ))}
+