preview/
├── context/                           # React Context
│   ├── PreviewContext.tsx             # 核心上下文：Tab 管理、内容更新、保存
│   └── PreviewToolbarExtrasContext.tsx # 工具栏扩展上下文
├── components/
│   ├── PreviewPanel/                  # 主面板组件
│   │   ├── PreviewPanel.tsx           # 主组件（管理视图状态、分屏、编辑模式）
│   │   ├── PreviewTabs.tsx            # Tab 栏（Tab 切换、右键菜单）
│   │   ├── PreviewToolbar.tsx         # 工具栏（视图切换、编辑、保存、历史）
│   │   ├── PreviewContextMenu.tsx     # 右键菜单
│   │   ├── PreviewConfirmModals.tsx   # 确认对话框
│   │   └── PreviewHistoryDropdown.tsx # 历史版本下拉菜单
│   ├── viewers/                       # 查看器组件
│   │   ├── MarkdownViewer.tsx         # Markdown 渲染
│   │   ├── CodeViewer.tsx             # 代码高亮
│   │   ├── ImageViewer.tsx            # 图片查看
│   │   ├── DiffViewer.tsx             # Diff 对比
│   │   ├── PDFViewer.tsx              # PDF 查看
│   │   ├── OfficeDocViewer.tsx        # Office 文档查看（Word、PPT）
│   │   ├── ExcelViewer.tsx            # Excel 查看
│   │   ├── HTMLViewer.tsx             # HTML 渲染
│   │   └── URLViewer.tsx              # URL 网页查看
│   ├── editors/                       # 编辑器组件
│   │   ├── MarkdownEditor.tsx         # Markdown 编辑器
│   │   ├── TextEditor.tsx             # 代码编辑器（Monaco）
│   │   └── HTMLEditor.tsx             # HTML 编辑器
│   └── renderers/                     # 特殊渲染器
│       ├── HTMLRenderer.tsx           # HTML iframe 渲染器
│       └── SelectionToolbar.tsx       # HTML 选择工具栏
├── hooks/                             # 自定义 Hooks
│   ├── usePreviewHistory.ts           # 版本历史管理
│   ├── usePreviewKeyboardShortcuts.ts # 快捷键处理
│   ├── useScrollSync.ts               # 滚动同步
│   ├── useTabOverflow.ts              # Tab 溢出处理
│   └── useThemeDetection.ts           # 主题检测
├── utils/                             # 工具函数
│   └── fileUtils.ts                   # 文件操作工具
├── types/                             # TypeScript 类型
│   └── index.ts                       # 类型定义
└── constants.ts                       # 常量配置

interface PreviewContextValue {
  // 面板状态
  isOpen: boolean; // 预览面板是否打开
  tabs: PreviewTab[]; // 所有打开的 tabs
  activeTabId: string | null; // 当前激活的 tab ID
  activeTab: PreviewTab | null; // 当前激活的 tab

  // 操作
  openPreview: (content: string, type: PreviewContentType, metadata?: PreviewMetadata) => void;
  closePreview: () => void;
  closeTab: (tabId: string) => void;
  switchTab: (tabId: string) => void;
  updateContent: (content: string) => void;
  saveContent: (tabId?: string) => Promise<boolean>;

  // Tab 查找和管理
  findPreviewTab: (type: PreviewContentType, content?: string, metadata?: PreviewMetadata) => PreviewTab | null;
  closePreviewByIdentity: (type: PreviewContentType, content?: string, metadata?: PreviewMetadata) => void;

  // 发送框集成
  addToSendBox: (text: string) => void;
  setSendBoxHandler: (handler: ((text: string) => void) | null) => void;
}

interface PreviewTab {
  id: string; // 唯一标识
  content: string; // 文件内容
  contentType: PreviewContentType; // 内容类型
  metadata?: PreviewMetadata; // 元数据（文件路径、标题等）
  title: string; // Tab 标题
  isDirty?: boolean; // 是否有未保存的修改
  originalContent?: string; // 原始内容（用于对比）
}

interface PreviewToolbarExtras {
  leftButtons?: React.ReactNode; // 工具栏左侧额外按钮
  rightButtons?: React.ReactNode; // 工具栏右侧额外按钮
}

// 订阅文件内容更新
ipcBridge.fileStream.contentUpdate.on(({ filePath, content, operation }) => {
  if (operation === 'delete') {
    // 文件被删除，关闭对应的 Tab
    closeTabByFilePath(filePath);
  } else {
    // 文件被写入，更新内容（带防抖）
    updateTabContent(filePath, content);
  }
});

// 保存文件时标记
savingFilesRef.current.add(filePath);

// 流式更新时检查
if (savingFilesRef.current.has(filePath) || tab.isDirty) {
  return; // 跳过更新
}

import { PreviewProvider, usePreviewContext } from './preview';

function App() {
  return (
    <PreviewProvider>
      <YourComponent />
    </PreviewProvider>
  );
}

function YourComponent() {
  const { openPreview } = usePreviewContext();

  const handleOpenFile = async (filePath: string) => {
    const content = await readFile(filePath);
    openPreview(content, 'markdown', {
      fileName: 'example.md',
      filePath: '/path/to/example.md',
      workspace: '/workspace/root',
    });
  };

  return <button onClick={handleOpenFile}>打开文件</button>;
}

// Markdown 文件
openPreview(markdownContent, 'markdown', {
  fileName: 'README.md',
  filePath: '/workspace/README.md',
  workspace: '/workspace',
});

// 代码文件
openPreview(codeContent, 'code', {
  fileName: 'app.tsx',
  filePath: '/workspace/src/app.tsx',
  workspace: '/workspace',
  language: 'typescript',
});

// 图片文件
openPreview(base64Content, 'image', {
  fileName: 'screenshot.png',
  filePath: '/workspace/screenshot.png',
  workspace: '/workspace',
});

// Diff 文件
openPreview(diffContent, 'diff', {
  fileName: 'changes.diff',
});

// 查找 Tab
const tab = findPreviewTab('markdown', undefined, {
  filePath: '/workspace/README.md',
});

// 关闭特定 Tab
if (tab) {
  closeTab(tab.id);
}

// 根据身份关闭 Tab
closePreviewByIdentity('markdown', undefined, {
  filePath: '/workspace/README.md',
});

function SendBox() {
  const { setSendBoxHandler } = usePreviewContext();
  const [text, setText] = useState('');

  useEffect(() => {
    // 注册处理器
    setSendBoxHandler((content) => {
      setText((prev) => prev + content);
    });

    return () => {
      setSendBoxHandler(null);
    };
  }, [setSendBoxHandler]);

  return <textarea value={text} onChange={(e) => setText(e.target.value)} />;
}

const {
  historyVersions, // 历史版本列表
  historyLoading, // 加载状态
  snapshotSaving, // 保存快照状态
  historyError, // 错误信息
  historyTarget, // 当前查看的历史版本
  refreshHistory, // 刷新历史
  handleSaveSnapshot, // 保存快照
  handleSnapshotSelect, // 选择历史版本
} = usePreviewHistory({ activeTab, updateContent });

usePreviewKeyboardShortcuts({
  isDirty: activeTab?.isDirty,
  onSave: () => saveContent(),
});

const { handleEditorScroll, handlePreviewScroll } = useScrollSync({
  enabled: isSplitScreenEnabled,
  editorContainerRef,
  previewContainerRef,
});

const { tabsContainerRef, tabFadeState } = useTabOverflow([tabs, activeTabId]);

const currentTheme = useThemeDetection(); // 'light' | 'dark'

const { setExtras } = usePreviewToolbarExtrasContext();

useEffect(() => {
  setExtras({
    rightButtons: <CustomButton />,
  });
  return () => setExtras(null);
}, []);

// 分屏默认比例
export const DEFAULT_SPLIT_RATIO = 50;

// 分屏最小宽度
export const MIN_SPLIT_WIDTH = 30;

// 分屏最大宽度
export const MAX_SPLIT_WIDTH = 70;

// 内置打开按钮的文件类型
export const FILE_TYPES_WITH_BUILTIN_OPEN = ['pdf', 'word', 'excel', 'ppt'];