feat: 实现文件浏览器功能

- 添加 /api/files 路由支持目录浏览和文件读取 - 支持 list、read、stat、tree 四个端点 - 安全路径检查防止目录遍历攻击 - 创建 FileBrowser React 组件 - 支持目录导航、文件预览、隐藏文件切换 - 在 Web UI 中添加可切换的文件浏览面板
2025-12-12 11:55:11 +08:00
parent da1773b950
commit 6438ecf2a6
6 changed files with 719 additions and 7 deletions
@@ -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>
+  );
+}