feat: 实现文件浏览器功能
- 添加 /api/files 路由支持目录浏览和文件读取 - 支持 list、read、stat、tree 四个端点 - 安全路径检查防止目录遍历攻击 - 创建 FileBrowser React 组件 - 支持目录导航、文件预览、隐藏文件切换 - 在 Web UI 中添加可切换的文件浏览面板
This commit is contained in:
@@ -9,7 +9,7 @@ import { cors } from 'hono/cors';
|
||||
import { logger } from 'hono/logger';
|
||||
import { createBunWebSocket } from 'hono/bun';
|
||||
|
||||
import { sessionsRouter, toolsRouter, configRouter } from './routes/index.js';
|
||||
import { sessionsRouter, toolsRouter, configRouter, filesRouter } from './routes/index.js';
|
||||
import {
|
||||
handleWebSocket,
|
||||
handleWebSocketMessage,
|
||||
@@ -81,6 +81,7 @@ const api = new Hono();
|
||||
api.route('/sessions', sessionsRouter);
|
||||
api.route('/tools', toolsRouter);
|
||||
api.route('/config', configRouter);
|
||||
api.route('/files', filesRouter);
|
||||
|
||||
// SSE 事件流
|
||||
api.get('/sessions/:id/events', handleSSE);
|
||||
|
||||
@@ -0,0 +1,371 @@
|
||||
/**
|
||||
* Files API Routes
|
||||
*
|
||||
* 文件浏览器 API
|
||||
*/
|
||||
|
||||
import { Hono } from 'hono';
|
||||
import { readdir, stat, readFile } from 'node:fs/promises';
|
||||
import { join, resolve, basename, extname, dirname } from 'node:path';
|
||||
|
||||
const filesRouter = new Hono();
|
||||
|
||||
// 工作目录 (默认为当前目录)
|
||||
let workingDirectory = process.cwd();
|
||||
|
||||
/**
|
||||
* 设置工作目录
|
||||
*/
|
||||
export function setWorkingDirectory(dir: string): void {
|
||||
workingDirectory = resolve(dir);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取工作目录
|
||||
*/
|
||||
export function getWorkingDirectory(): string {
|
||||
return workingDirectory;
|
||||
}
|
||||
|
||||
/**
|
||||
* 文件/目录信息
|
||||
*/
|
||||
interface FileInfo {
|
||||
name: string;
|
||||
path: string;
|
||||
type: 'file' | 'directory';
|
||||
size: number;
|
||||
modified: string;
|
||||
extension?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 安全路径检查 - 确保路径在工作目录内
|
||||
*/
|
||||
function safePath(requestedPath: string): string | null {
|
||||
const resolved = resolve(workingDirectory, requestedPath);
|
||||
if (!resolved.startsWith(workingDirectory)) {
|
||||
return null;
|
||||
}
|
||||
return resolved;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取文件类型图标提示
|
||||
*/
|
||||
function getFileType(name: string): string {
|
||||
const ext = extname(name).toLowerCase();
|
||||
const fileTypes: Record<string, string> = {
|
||||
'.ts': 'typescript',
|
||||
'.tsx': 'typescript',
|
||||
'.js': 'javascript',
|
||||
'.jsx': 'javascript',
|
||||
'.json': 'json',
|
||||
'.md': 'markdown',
|
||||
'.html': 'html',
|
||||
'.css': 'css',
|
||||
'.scss': 'scss',
|
||||
'.less': 'less',
|
||||
'.py': 'python',
|
||||
'.go': 'go',
|
||||
'.rs': 'rust',
|
||||
'.java': 'java',
|
||||
'.c': 'c',
|
||||
'.cpp': 'cpp',
|
||||
'.h': 'header',
|
||||
'.sh': 'shell',
|
||||
'.bash': 'shell',
|
||||
'.zsh': 'shell',
|
||||
'.yaml': 'yaml',
|
||||
'.yml': 'yaml',
|
||||
'.toml': 'toml',
|
||||
'.xml': 'xml',
|
||||
'.svg': 'svg',
|
||||
'.png': 'image',
|
||||
'.jpg': 'image',
|
||||
'.jpeg': 'image',
|
||||
'.gif': 'image',
|
||||
'.webp': 'image',
|
||||
'.ico': 'image',
|
||||
'.txt': 'text',
|
||||
'.log': 'log',
|
||||
'.env': 'env',
|
||||
'.gitignore': 'git',
|
||||
'.dockerignore': 'docker',
|
||||
};
|
||||
return fileTypes[ext] || 'file';
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否为文本文件
|
||||
*/
|
||||
function isTextFile(name: string): boolean {
|
||||
const textExtensions = [
|
||||
'.ts', '.tsx', '.js', '.jsx', '.json', '.md', '.html', '.css', '.scss',
|
||||
'.less', '.py', '.go', '.rs', '.java', '.c', '.cpp', '.h', '.sh', '.bash',
|
||||
'.zsh', '.yaml', '.yml', '.toml', '.xml', '.txt', '.log', '.env', '.sql',
|
||||
'.graphql', '.prisma', '.vue', '.svelte', '.astro',
|
||||
];
|
||||
const ext = extname(name).toLowerCase();
|
||||
return textExtensions.includes(ext) || name.startsWith('.');
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// GET /api/files - 获取工作目录信息
|
||||
// ============================================================================
|
||||
filesRouter.get('/', (c) => {
|
||||
return c.json({
|
||||
success: true,
|
||||
data: {
|
||||
workingDirectory,
|
||||
separator: '/',
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// GET /api/files/list?path= - 列出目录内容
|
||||
// ============================================================================
|
||||
filesRouter.get('/list', async (c) => {
|
||||
const requestedPath = c.req.query('path') || '.';
|
||||
const showHidden = c.req.query('hidden') === 'true';
|
||||
|
||||
const absolutePath = safePath(requestedPath);
|
||||
if (!absolutePath) {
|
||||
return c.json({ success: false, error: 'Access denied: path outside working directory' }, 403);
|
||||
}
|
||||
|
||||
try {
|
||||
const stats = await stat(absolutePath);
|
||||
if (!stats.isDirectory()) {
|
||||
return c.json({ success: false, error: 'Not a directory' }, 400);
|
||||
}
|
||||
|
||||
const entries = await readdir(absolutePath, { withFileTypes: true });
|
||||
const files: FileInfo[] = [];
|
||||
|
||||
for (const entry of entries) {
|
||||
// 跳过隐藏文件 (除非明确请求)
|
||||
if (!showHidden && entry.name.startsWith('.')) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const entryPath = join(absolutePath, entry.name);
|
||||
const relativePath = entryPath.replace(workingDirectory, '').replace(/^\//, '');
|
||||
|
||||
try {
|
||||
const entryStats = await stat(entryPath);
|
||||
files.push({
|
||||
name: entry.name,
|
||||
path: relativePath,
|
||||
type: entry.isDirectory() ? 'directory' : 'file',
|
||||
size: entryStats.size,
|
||||
modified: entryStats.mtime.toISOString(),
|
||||
extension: entry.isFile() ? extname(entry.name).slice(1) : undefined,
|
||||
});
|
||||
} catch {
|
||||
// 跳过无法访问的文件
|
||||
}
|
||||
}
|
||||
|
||||
// 排序: 目录在前，然后按名称
|
||||
files.sort((a, b) => {
|
||||
if (a.type !== b.type) {
|
||||
return a.type === 'directory' ? -1 : 1;
|
||||
}
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
|
||||
return c.json({
|
||||
success: true,
|
||||
data: {
|
||||
path: requestedPath,
|
||||
absolutePath,
|
||||
parent: requestedPath === '.' ? null : dirname(requestedPath),
|
||||
files,
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : 'Unknown error';
|
||||
return c.json({ success: false, error: message }, 500);
|
||||
}
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// GET /api/files/read?path= - 读取文件内容
|
||||
// ============================================================================
|
||||
filesRouter.get('/read', async (c) => {
|
||||
const requestedPath = c.req.query('path');
|
||||
if (!requestedPath) {
|
||||
return c.json({ success: false, error: 'Path is required' }, 400);
|
||||
}
|
||||
|
||||
const absolutePath = safePath(requestedPath);
|
||||
if (!absolutePath) {
|
||||
return c.json({ success: false, error: 'Access denied: path outside working directory' }, 403);
|
||||
}
|
||||
|
||||
try {
|
||||
const stats = await stat(absolutePath);
|
||||
if (stats.isDirectory()) {
|
||||
return c.json({ success: false, error: 'Cannot read directory' }, 400);
|
||||
}
|
||||
|
||||
// 限制文件大小 (10MB)
|
||||
const maxSize = 10 * 1024 * 1024;
|
||||
if (stats.size > maxSize) {
|
||||
return c.json({ success: false, error: 'File too large (max 10MB)' }, 400);
|
||||
}
|
||||
|
||||
const name = basename(absolutePath);
|
||||
const isText = isTextFile(name);
|
||||
|
||||
if (isText) {
|
||||
const content = await readFile(absolutePath, 'utf-8');
|
||||
return c.json({
|
||||
success: true,
|
||||
data: {
|
||||
path: requestedPath,
|
||||
name,
|
||||
type: getFileType(name),
|
||||
size: stats.size,
|
||||
modified: stats.mtime.toISOString(),
|
||||
content,
|
||||
encoding: 'utf-8',
|
||||
},
|
||||
});
|
||||
} else {
|
||||
// 二进制文件返回 base64
|
||||
const buffer = await readFile(absolutePath);
|
||||
return c.json({
|
||||
success: true,
|
||||
data: {
|
||||
path: requestedPath,
|
||||
name,
|
||||
type: getFileType(name),
|
||||
size: stats.size,
|
||||
modified: stats.mtime.toISOString(),
|
||||
content: buffer.toString('base64'),
|
||||
encoding: 'base64',
|
||||
},
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : 'Unknown error';
|
||||
return c.json({ success: false, error: message }, 500);
|
||||
}
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// GET /api/files/stat?path= - 获取文件/目录信息
|
||||
// ============================================================================
|
||||
filesRouter.get('/stat', async (c) => {
|
||||
const requestedPath = c.req.query('path');
|
||||
if (!requestedPath) {
|
||||
return c.json({ success: false, error: 'Path is required' }, 400);
|
||||
}
|
||||
|
||||
const absolutePath = safePath(requestedPath);
|
||||
if (!absolutePath) {
|
||||
return c.json({ success: false, error: 'Access denied: path outside working directory' }, 403);
|
||||
}
|
||||
|
||||
try {
|
||||
const stats = await stat(absolutePath);
|
||||
const name = basename(absolutePath);
|
||||
|
||||
return c.json({
|
||||
success: true,
|
||||
data: {
|
||||
path: requestedPath,
|
||||
name,
|
||||
type: stats.isDirectory() ? 'directory' : 'file',
|
||||
size: stats.size,
|
||||
modified: stats.mtime.toISOString(),
|
||||
created: stats.birthtime.toISOString(),
|
||||
extension: stats.isFile() ? extname(name).slice(1) : undefined,
|
||||
fileType: stats.isFile() ? getFileType(name) : undefined,
|
||||
isText: stats.isFile() ? isTextFile(name) : undefined,
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : 'Unknown error';
|
||||
return c.json({ success: false, error: message }, 500);
|
||||
}
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// GET /api/files/tree?path=&depth= - 获取目录树
|
||||
// ============================================================================
|
||||
filesRouter.get('/tree', async (c) => {
|
||||
const requestedPath = c.req.query('path') || '.';
|
||||
const maxDepth = parseInt(c.req.query('depth') || '3', 10);
|
||||
const showHidden = c.req.query('hidden') === 'true';
|
||||
|
||||
const absolutePath = safePath(requestedPath);
|
||||
if (!absolutePath) {
|
||||
return c.json({ success: false, error: 'Access denied: path outside working directory' }, 403);
|
||||
}
|
||||
|
||||
interface TreeNode {
|
||||
name: string;
|
||||
path: string;
|
||||
type: 'file' | 'directory';
|
||||
children?: TreeNode[];
|
||||
}
|
||||
|
||||
async function buildTree(dir: string, depth: number): Promise<TreeNode[]> {
|
||||
if (depth <= 0) return [];
|
||||
|
||||
try {
|
||||
const entries = await readdir(dir, { withFileTypes: true });
|
||||
const nodes: TreeNode[] = [];
|
||||
|
||||
for (const entry of entries) {
|
||||
if (!showHidden && entry.name.startsWith('.')) continue;
|
||||
if (entry.name === 'node_modules' || entry.name === '.git') continue;
|
||||
|
||||
const entryPath = join(dir, entry.name);
|
||||
const relativePath = entryPath.replace(workingDirectory, '').replace(/^\//, '');
|
||||
|
||||
const node: TreeNode = {
|
||||
name: entry.name,
|
||||
path: relativePath,
|
||||
type: entry.isDirectory() ? 'directory' : 'file',
|
||||
};
|
||||
|
||||
if (entry.isDirectory()) {
|
||||
node.children = await buildTree(entryPath, depth - 1);
|
||||
}
|
||||
|
||||
nodes.push(node);
|
||||
}
|
||||
|
||||
// 排序
|
||||
nodes.sort((a, b) => {
|
||||
if (a.type !== b.type) return a.type === 'directory' ? -1 : 1;
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
|
||||
return nodes;
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const tree = await buildTree(absolutePath, maxDepth);
|
||||
return c.json({
|
||||
success: true,
|
||||
data: {
|
||||
path: requestedPath,
|
||||
tree,
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : 'Unknown error';
|
||||
return c.json({ success: false, error: message }, 500);
|
||||
}
|
||||
});
|
||||
|
||||
export { filesRouter };
|
||||
@@ -7,3 +7,4 @@
|
||||
export { sessionsRouter } from './sessions.js';
|
||||
export { toolsRouter, registerTool, getRegisteredTools } from './tools.js';
|
||||
export { configRouter, getConfig, setConfig } from './config.js';
|
||||
export { filesRouter, setWorkingDirectory, getWorkingDirectory } from './files.js';
|
||||
|
||||
@@ -5,11 +5,13 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Sidebar } from './components/Sidebar';
|
||||
import { ChatPage } from './pages/Chat';
|
||||
import { FileBrowser } from './components/FileBrowser';
|
||||
import { listSessions, createSession, type Session } from './api/client';
|
||||
|
||||
export function App() {
|
||||
const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);
|
||||
const [isInitializing, setIsInitializing] = useState(true);
|
||||
const [showFileBrowser, setShowFileBrowser] = useState(false);
|
||||
|
||||
// 初始化：加载或创建会话
|
||||
useEffect(() => {
|
||||
@@ -62,13 +64,47 @@ export function App() {
|
||||
onCreateSession={handleCreateSession}
|
||||
/>
|
||||
|
||||
{currentSessionId ? (
|
||||
<ChatPage key={currentSessionId} sessionId={currentSessionId} />
|
||||
) : (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<p className="text-gray-400">Select or create a session</p>
|
||||
{/* 文件浏览器切换按钮 */}
|
||||
<button
|
||||
onClick={() => setShowFileBrowser(!showFileBrowser)}
|
||||
className={`absolute top-3 right-4 z-10 p-2 rounded-lg transition-colors ${
|
||||
showFileBrowser ? 'bg-blue-600 text-white' : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
||||
}`}
|
||||
title={showFileBrowser ? 'Hide Files' : 'Show Files'}
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div className="flex-1 flex">
|
||||
{/* 聊天区域 */}
|
||||
<div className={`flex-1 ${showFileBrowser ? 'w-1/2' : 'w-full'}`}>
|
||||
{currentSessionId ? (
|
||||
<ChatPage key={currentSessionId} sessionId={currentSessionId} />
|
||||
) : (
|
||||
<div className="flex-1 flex items-center justify-center h-full">
|
||||
<p className="text-gray-400">Select or create a session</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 文件浏览器 */}
|
||||
{showFileBrowser && (
|
||||
<div className="w-1/2 border-l border-gray-700">
|
||||
<FileBrowser
|
||||
onFileSelect={(path, _content) => {
|
||||
console.log('Selected file:', path);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -94,3 +94,70 @@ export function createWebSocket(sessionId: string): WebSocket {
|
||||
const host = window.location.host;
|
||||
return new WebSocket(`${protocol}//${host}/api/ws/${sessionId}`);
|
||||
}
|
||||
|
||||
// Files
|
||||
export interface FileInfo {
|
||||
name: string;
|
||||
path: string;
|
||||
type: 'file' | 'directory';
|
||||
size: number;
|
||||
modified: string;
|
||||
extension?: string;
|
||||
}
|
||||
|
||||
export interface FileListResponse {
|
||||
success: boolean;
|
||||
data: {
|
||||
path: string;
|
||||
absolutePath: string;
|
||||
parent: string | null;
|
||||
files: FileInfo[];
|
||||
};
|
||||
}
|
||||
|
||||
export interface FileReadResponse {
|
||||
success: boolean;
|
||||
data: {
|
||||
path: string;
|
||||
name: string;
|
||||
type: string;
|
||||
size: number;
|
||||
modified: string;
|
||||
content: string;
|
||||
encoding: 'utf-8' | 'base64';
|
||||
};
|
||||
}
|
||||
|
||||
export interface FileTreeNode {
|
||||
name: string;
|
||||
path: string;
|
||||
type: 'file' | 'directory';
|
||||
children?: FileTreeNode[];
|
||||
}
|
||||
|
||||
export interface FileTreeResponse {
|
||||
success: boolean;
|
||||
data: {
|
||||
path: string;
|
||||
tree: FileTreeNode[];
|
||||
};
|
||||
}
|
||||
|
||||
export async function getWorkingDirectory(): Promise<{ success: boolean; data: { workingDirectory: string; separator: string } }> {
|
||||
return request('GET', '/files');
|
||||
}
|
||||
|
||||
export async function listFiles(path: string = '.', showHidden: boolean = false): Promise<FileListResponse> {
|
||||
const params = new URLSearchParams({ path });
|
||||
if (showHidden) params.set('hidden', 'true');
|
||||
return request('GET', `/files/list?${params}`);
|
||||
}
|
||||
|
||||
export async function readFile(path: string): Promise<FileReadResponse> {
|
||||
return request('GET', `/files/read?path=${encodeURIComponent(path)}`);
|
||||
}
|
||||
|
||||
export async function getFileTree(path: string = '.', depth: number = 3): Promise<FileTreeResponse> {
|
||||
const params = new URLSearchParams({ path, depth: String(depth) });
|
||||
return request('GET', `/files/tree?${params}`);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,236 @@
|
||||
/**
|
||||
* FileBrowser Component
|
||||
*
|
||||
* 文件浏览器组件
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { listFiles, readFile, type FileInfo } from '../api/client';
|
||||
|
||||
interface FileBrowserProps {
|
||||
onFileSelect?: (path: string, content: string) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// 文件图标
|
||||
const FileIcon = ({ type, extension }: { type: 'file' | 'directory'; extension?: string }) => {
|
||||
if (type === 'directory') {
|
||||
return (
|
||||
<svg className="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
// 根据扩展名显示不同颜色
|
||||
const colors: Record<string, string> = {
|
||||
ts: 'text-blue-400',
|
||||
tsx: 'text-blue-400',
|
||||
js: 'text-yellow-300',
|
||||
jsx: 'text-yellow-300',
|
||||
json: 'text-yellow-500',
|
||||
md: 'text-gray-400',
|
||||
css: 'text-pink-400',
|
||||
html: 'text-orange-400',
|
||||
py: 'text-green-400',
|
||||
go: 'text-cyan-400',
|
||||
rs: 'text-orange-500',
|
||||
};
|
||||
|
||||
const color = colors[extension || ''] || 'text-gray-400';
|
||||
|
||||
return (
|
||||
<svg className={`w-4 h-4 ${color}`} fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
// 格式化文件大小
|
||||
const formatSize = (bytes: number): string => {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
|
||||
};
|
||||
|
||||
export function FileBrowser({ onFileSelect, className = '' }: FileBrowserProps) {
|
||||
const [currentPath, setCurrentPath] = useState('.');
|
||||
const [files, setFiles] = useState<FileInfo[]>([]);
|
||||
const [parentPath, setParentPath] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [selectedFile, setSelectedFile] = useState<string | null>(null);
|
||||
const [fileContent, setFileContent] = useState<string | null>(null);
|
||||
const [showHidden, setShowHidden] = useState(false);
|
||||
|
||||
// 加载目录内容
|
||||
const loadDirectory = useCallback(async (path: string) => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
setSelectedFile(null);
|
||||
setFileContent(null);
|
||||
|
||||
try {
|
||||
const response = await listFiles(path, showHidden);
|
||||
setFiles(response.data.files);
|
||||
setCurrentPath(response.data.path);
|
||||
setParentPath(response.data.parent);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load directory');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [showHidden]);
|
||||
|
||||
// 初始加载
|
||||
useEffect(() => {
|
||||
loadDirectory('.');
|
||||
}, [loadDirectory]);
|
||||
|
||||
// 处理文件/目录点击
|
||||
const handleItemClick = async (item: FileInfo) => {
|
||||
if (item.type === 'directory') {
|
||||
loadDirectory(item.path);
|
||||
} else {
|
||||
setSelectedFile(item.path);
|
||||
try {
|
||||
const response = await readFile(item.path);
|
||||
if (response.data.encoding === 'utf-8') {
|
||||
setFileContent(response.data.content);
|
||||
onFileSelect?.(item.path, response.data.content);
|
||||
} else {
|
||||
setFileContent('[Binary file]');
|
||||
}
|
||||
} catch (err) {
|
||||
setFileContent(`Error: ${err instanceof Error ? err.message : 'Failed to read file'}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 返回上级目录
|
||||
const handleGoUp = () => {
|
||||
if (parentPath !== null) {
|
||||
loadDirectory(parentPath);
|
||||
}
|
||||
};
|
||||
|
||||
// 刷新
|
||||
const handleRefresh = () => {
|
||||
loadDirectory(currentPath);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`flex flex-col h-full bg-gray-900 ${className}`}>
|
||||
{/* 工具栏 */}
|
||||
<div className="flex items-center gap-2 p-2 border-b border-gray-700 bg-gray-800">
|
||||
<button
|
||||
onClick={handleGoUp}
|
||||
disabled={parentPath === null}
|
||||
className="p-1.5 rounded hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title="Go up"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
className="p-1.5 rounded hover:bg-gray-700"
|
||||
title="Refresh"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div className="flex-1 px-2 py-1 text-sm text-gray-400 bg-gray-900 rounded truncate">
|
||||
{currentPath}
|
||||
</div>
|
||||
|
||||
<label className="flex items-center gap-1 text-xs text-gray-400 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={showHidden}
|
||||
onChange={(e) => {
|
||||
setShowHidden(e.target.checked);
|
||||
loadDirectory(currentPath);
|
||||
}}
|
||||
className="w-3 h-3"
|
||||
/>
|
||||
Hidden
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* 文件列表 */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-32 text-gray-400">
|
||||
Loading...
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="flex items-center justify-center h-32 text-red-400">
|
||||
{error}
|
||||
</div>
|
||||
) : files.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-32 text-gray-500">
|
||||
Empty directory
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-gray-800">
|
||||
{files.map((file) => (
|
||||
<div
|
||||
key={file.path}
|
||||
onClick={() => handleItemClick(file)}
|
||||
className={`flex items-center gap-2 px-3 py-2 cursor-pointer hover:bg-gray-800 ${
|
||||
selectedFile === file.path ? 'bg-gray-800 border-l-2 border-blue-500' : ''
|
||||
}`}
|
||||
>
|
||||
<FileIcon type={file.type} extension={file.extension} />
|
||||
<span className="flex-1 truncate text-sm">{file.name}</span>
|
||||
{file.type === 'file' && (
|
||||
<span className="text-xs text-gray-500">{formatSize(file.size)}</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 文件预览 */}
|
||||
{selectedFile && fileContent && (
|
||||
<div className="border-t border-gray-700 max-h-48 overflow-auto">
|
||||
<div className="sticky top-0 flex items-center justify-between px-3 py-1 bg-gray-800 border-b border-gray-700">
|
||||
<span className="text-xs text-gray-400 truncate">{selectedFile}</span>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedFile(null);
|
||||
setFileContent(null);
|
||||
}}
|
||||
className="p-1 hover:bg-gray-700 rounded"
|
||||
>
|
||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<pre className="p-3 text-xs text-gray-300 whitespace-pre-wrap font-mono">
|
||||
{fileContent.slice(0, 5000)}
|
||||
{fileContent.length > 5000 && '\n... (truncated)'}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user