feat(ui): 添加编辑器与对话框联动功能
- 新增 ActiveFileInfo 类型定义 - IDE 组件支持 onActiveFileChange 回调通知活动文件变化 - ChatInput 显示当前活动文件并支持自动附加到消息 - 用户可切换自动附加开关,设置持久化到 localStorage - 排除 / 和 : 命令避免与斜杠命令和系统命令冲突
This commit is contained in:
@@ -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) => {
|
||||
// 检查是否已打开
|
||||
|
||||
Reference in New Issue
Block a user