feat(ui): 添加编辑器与对话框联动功能

- 新增 ActiveFileInfo 类型定义
- IDE 组件支持 onActiveFileChange 回调通知活动文件变化
- ChatInput 显示当前活动文件并支持自动附加到消息
- 用户可切换自动附加开关,设置持久化到 localStorage
- 排除 / 和 : 命令避免与斜杠命令和系统命令冲突
This commit is contained in:
2025-12-17 19:59:13 +08:00
parent 48a11ff077
commit 3320a2a5ba
7 changed files with 133 additions and 7 deletions
+21 -1
View File
@@ -10,6 +10,7 @@ import { cn } from '../utils/cn.js';
import { readFile, getWorkingDirectory } from '../api/client.js';
import { FileExplorer } from './FileExplorer.js';
import { CodeEditor, getLanguageFromFilename, type EditorTab } from './CodeEditor.js';
import type { ActiveFileInfo } from '../api/types.js';
// localStorage 键名
const STORAGE_KEY_TABS = 'ai-assistant-editor-tabs';
@@ -25,9 +26,11 @@ interface IDEProps {
className?: string;
/** 文件浏览器宽度 */
sidebarWidth?: number;
/** 当前活动文件变化回调 */
onActiveFileChange?: (file: ActiveFileInfo | null) => void;
}
export function IDE({ className, sidebarWidth = 256 }: IDEProps) {
export function IDE({ className, sidebarWidth = 256, onActiveFileChange }: IDEProps) {
const [tabs, setTabs] = useState<EditorTab[]>([]);
const [activeTabId, setActiveTabId] = useState<string | null>(null);
const [workingDirectory, setWorkingDirectory] = useState<string>('');
@@ -134,6 +137,23 @@ export function IDE({ className, sidebarWidth = 256 }: IDEProps) {
}
}, [activeTabId, tabs]);
// 通知父组件活动文件变化
useEffect(() => {
if (!onActiveFileChange) return;
const activeTab = tabs.find((tab) => tab.id === activeTabId);
if (activeTab) {
onActiveFileChange({
path: activeTab.path,
name: activeTab.name,
content: activeTab.content,
language: activeTab.language,
});
} else {
onActiveFileChange(null);
}
}, [activeTabId, tabs, onActiveFileChange]);
// 打开文件
const handleFileSelect = useCallback(async (path: string, name: string) => {
// 检查是否已打开