Initial commit

src/components/tabs/MarkdownTabPage/MarkdownTabPage.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { Markdown } from '@/components/editor/Markdown/Markdown'
+import type { FileItem } from '@/lib/api'
+import type { TOCItem } from '@/lib/utils'
+import { useMarkdownDisplay, useTabStore } from '@/stores'
+
+interface MarkdownTabPageProps {
+  file: FileItem
+  onTocUpdated?: (toc: TOCItem[]) => void
+}
+
+export const MarkdownTabPage: React.FC<MarkdownTabPageProps> = ({ 
+  file, 
+  onTocUpdated 
+}) => {
+  const { zoom } = useMarkdownDisplay()
+  const tab = useTabStore(state => state.tabs.get(file.path))
+  
+  const content = tab?.content || ''
+  const unsavedContent = tab?.unsavedContent || ''
+  const isEditing = tab?.isEditing || false
+  const loading = tab?.loading || false
+
+  const displayContent = isEditing ? unsavedContent : content
+
+  const handleChange = (newContent: string) => {
+    useTabStore.getState().setUnsavedContent(file.path, newContent)
+  }
+
+  return (
+    <div
+      className="max-w-4xl mx-auto w-full"
+      style={{ zoom: zoom / 100 }}
+    >
+      <div className="h-full w-full">
+        {loading ? (
+          <div className="p-4 text-gray-400">加载中...</div>
+        ) : (
+          <Markdown
+            key={file.path}
+            content={displayContent}
+            filePath={file.path}
+            onChange={isEditing ? handleChange : undefined}
+            readOnly={!isEditing}
+            onTocUpdated={onTocUpdated}
+          />
+        )}
+        {!isEditing && <div className="h-24" />}
+      </div>
+    </div>
+  )
+}