重构代码

2025-02-03 22:37:57 +08:00 · 2025-02-03 22:37:57 +08:00 · 13fa3ea75c
commit 13fa3ea75c
parent af36766729
7 changed files with 434 additions and 316 deletions
--- a/src/components/editor/WechatEditor.tsx
+++ b/src/components/editor/WechatEditor.tsx
@ -4,7 +4,6 @@ import { useState, useCallback, useRef, useEffect } from 'react'
 import { useToast } from '@/components/ui/use-toast'
 import { ToastAction } from '@/components/ui/toast'
 import { type RendererOptions } from '@/lib/markdown'
-import { useEditorSync } from './hooks/useEditorSync'
 import { useAutoSave } from './hooks/useAutoSave'
 import { EditorToolbar } from './components/EditorToolbar'
 import { EditorPreview } from './components/EditorPreview'
@ -20,6 +19,11 @@ import { useEditorKeyboard } from './hooks/useEditorKeyboard'
 import { useScrollSync } from './hooks/useScrollSync'
 import { useWordStats } from './hooks/useWordStats'
 import { useCopy } from './hooks/useCopy'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
+import { Button } from '@/components/ui/button'
+import { Copy } from 'lucide-react'
+import { MobileEditor } from './components/MobileEditor'
+import { DesktopEditor } from './components/DesktopEditor'

 export default function WechatEditor() {
  const { toast } = useToast()
@ -37,10 +41,22 @@ export default function WechatEditor() {
  const [codeTheme, setCodeTheme] = useLocalStorage<CodeThemeId>('code-theme', codeThemes[0].id)

  // 使用自定义 hooks
-  const { handleScroll } = useEditorSync(editorRef)
  const { handleEditorChange } = useAutoSave(value, setIsDraft)
  const { handleEditorScroll } = useScrollSync()

+  // 清除编辑器内容
+  const handleClear = useCallback(() => {
+    if (window.confirm('确定要清除所有内容吗？')) {
+      setValue('')
+      handleEditorChange('')
+      toast({
+        title: "已清除",
+        description: "编辑器内容已清除",
+        duration: 2000
+      })
+    }
+  }, [handleEditorChange, toast])
+
  // 手动保存
  const handleSave = useCallback(() => {
    try {
@ -97,12 +113,29 @@ export default function WechatEditor() {
    })
  }, [handleEditorChange])

-  const { handleCopy } = useCopy()
+  const { copyToClipboard } = useCopy()

-  // 处理复制
-  const onCopy = useCallback(async () => {
-    return handleCopy(window.getSelection(), previewContent)
-  }, [handleCopy, previewContent])
+  const handleCopy = useCallback(async (): Promise<boolean> => {
+    const contentElement = previewRef.current?.querySelector('.preview-content') as HTMLElement | null
+    if (!contentElement) return false
+
+    const success = await copyToClipboard(contentElement)
+    if (success) {
+      toast({
+        title: "复制成功",
+        description: "内容已复制，可直接粘贴到公众号编辑器",
+        duration: 2000
+      })
+    } else {
+      toast({
+        variant: "destructive",
+        title: "复制失败",
+        description: "无法访问剪贴板，请检查浏览器权限",
+        duration: 2000
+      })
+    }
+    return success
+  }, [copyToClipboard, toast, previewRef])

  // 处理放弃草稿
  const handleDiscardDraft = useCallback(() => {
@ -192,19 +225,6 @@ export default function WechatEditor() {
    setStyleOptions({})
  }, [])

-  // 清除编辑器内容
-  const handleClear = useCallback(() => {
-    if (window.confirm('确定要清除所有内容吗？')) {
-      setValue('')
-      handleEditorChange('')
-      toast({
-        title: "已清除",
-        description: "编辑器内容已清除",
-        duration: 2000
-      })
-    }
-  }, [handleEditorChange, toast])
-
  // 检测是否为移动设备
  const isMobile = useCallback(() => {
    if (typeof window === 'undefined') return false
@ -245,141 +265,72 @@ export default function WechatEditor() {
  const { wordCount, readingTime } = useWordStats(value)

  return (
-    <div className="h-screen flex flex-col overflow-hidden">
-      <div className="hidden sm:block">
-        <EditorToolbar 
-          value={value}
-          isDraft={isDraft}
-          showPreview={showPreview}
-          selectedTemplate={selectedTemplate}
-          onSave={handleSave}
-          onCopy={onCopy}
-          onCopyPreview={onCopy}
-          onNewArticle={handleNewArticle}
-          onArticleSelect={handleArticleSelect}
-          onTemplateSelect={handleTemplateSelect}
-          onTemplateChange={() => setValue(value)}
-          onStyleOptionsChange={setStyleOptions}
-          onPreviewToggle={() => setShowPreview(!showPreview)}
-          styleOptions={styleOptions}
-          wordCount={wordCount}
-          readingTime={readingTime}
-          codeTheme={codeTheme}
-          onCodeThemeChange={setCodeTheme}
-        />
-      </div>
-      
-      <div className="flex-1 flex flex-col sm:flex-row overflow-hidden">
-        {/* Mobile View */}
-        <div className="sm:hidden flex-1 flex flex-col">
-          <div className="flex items-center justify-between p-2 border-b bg-background">
-            <div className="flex-1 mr-2">
-              <select
-                value={selectedTemplate}
-                onChange={(e) => handleTemplateSelect(e.target.value)}
-                className="w-full p-2 rounded-md border"
-              >
-                {templates.map((template) => (
-                  <option key={template.id} value={template.id}>
-                    {template.name}
-                  </option>
-                ))}
-              </select>
-            </div>
-            <div className="flex items-center gap-2">
-              <button
-                onClick={handleClear}
-                className="flex items-center justify-center gap-1 px-2 py-1 rounded-md text-xs text-destructive hover:bg-muted transition-colors"
-                title="清除内容"
-              >
-                清除
-              </button>
-              <button
-                onClick={onCopy}
-                className="flex items-center justify-center gap-1 px-2 py-1 rounded-md text-xs text-primary hover:bg-muted transition-colors"
-              >
-                复制
-              </button>
-            </div>
-          </div>
-          <div className="flex-1 flex flex-col">
-            <div className="flex-1">
-              <div 
-                ref={editorRef}
-                className={cn(
-                  "h-full",
-                  selectedTemplate && templates.find(t => t.id === selectedTemplate)?.styles
-                )}
-              >
-                <textarea
-                  ref={textareaRef}
-                  value={value}
-                  onChange={handleInput}
-                  onKeyDown={handleKeyDown}
-                  onScroll={handleEditorScroll}
-                  className="w-full h-full resize-none outline-none p-4 font-mono text-base leading-relaxed overflow-y-scroll scrollbar-none"
-                  placeholder="开始写作..."
-                  spellCheck={false}
-                />
-              </div>
-            </div>
-            <div className="flex-1">
-              <EditorPreview 
-                previewRef={previewRef}
-                selectedTemplate={selectedTemplate}
-                previewSize={previewSize}
-                isConverting={isConverting}
-                previewContent={previewContent}
-                codeTheme={codeTheme}
-                onPreviewSizeChange={setPreviewSize}
-              />
-            </div>
-          </div>
-        </div>
+    <div className="relative flex flex-col h-screen">
+      {/* 工具栏 */}
+      <EditorToolbar
+        value={value}
+        isDraft={isDraft}
+        showPreview={showPreview}
+        selectedTemplate={selectedTemplate}
+        styleOptions={styleOptions}
+        codeTheme={codeTheme}
+        wordCount={wordCount}
+        readingTime={readingTime}
+        onSave={handleSave}
+        onCopy={handleCopy}
+        onCopyPreview={handleCopy}
+        onNewArticle={handleNewArticle}
+        onArticleSelect={handleArticleSelect}
+        onTemplateSelect={(templateId: string) => setSelectedTemplate(templateId)}
+        onTemplateChange={() => {}}
+        onStyleOptionsChange={setStyleOptions}
+        onPreviewToggle={() => setShowPreview(!showPreview)}
+        onCodeThemeChange={setCodeTheme}
+        onClear={handleClear}
+      />

-        {/* Desktop Split View */}
-        <div className="hidden sm:flex flex-1 flex-row">
-          <div 
-            ref={editorRef}
-            className={cn(
-              "editor-container bg-background transition-all duration-300 ease-in-out flex flex-col h-full",
-              showPreview 
-                ? "w-1/2 border-r" 
-                : "w-full",
-              selectedTemplate && templates.find(t => t.id === selectedTemplate)?.styles
-            )}
-          >
-            <MarkdownToolbar onInsert={handleToolbarInsert} />
-            <div className="flex-1 overflow-hidden">
-              <textarea
-                ref={textareaRef}
-                value={value}
-                onChange={handleInput}
-                onKeyDown={handleKeyDown}
-                onScroll={handleEditorScroll}
-                className="w-full h-full resize-none outline-none p-4 font-mono text-base leading-relaxed overflow-y-scroll scrollbar-none"
-                placeholder="开始写作..."
-                spellCheck={false}
-              />
-            </div>
-          </div>
-          
-          {showPreview && (
-            <EditorPreview 
-              previewRef={previewRef}
-              selectedTemplate={selectedTemplate}
-              previewSize={previewSize}
-              isConverting={isConverting}
-              previewContent={previewContent}
-              codeTheme={codeTheme}
-              onPreviewSizeChange={setPreviewSize}
-            />
-          )}
-        </div>
+      {/* 编辑器主体 */}
+      <div className="flex-1 min-h-0 flex flex-col">
+        {/* 移动设备编辑器 */}
+        <MobileEditor
+          textareaRef={textareaRef}
+          previewRef={previewRef}
+          value={value}
+          selectedTemplate={selectedTemplate}
+          previewSize={previewSize}
+          codeTheme={codeTheme}
+          previewContent={previewContent}
+          isConverting={isConverting}
+          onValueChange={setValue}
+          onEditorChange={handleEditorChange}
+          onEditorScroll={handleEditorScroll}
+          onPreviewSizeChange={setPreviewSize}
+          onCopy={handleCopy}
+        />
+
+        {/* 桌面设备编辑器 */}
+        <DesktopEditor
+          editorRef={editorRef}
+          textareaRef={textareaRef}
+          previewRef={previewRef}
+          value={value}
+          selectedTemplate={selectedTemplate}
+          showPreview={showPreview}
+          previewSize={previewSize}
+          isConverting={isConverting}
+          previewContent={previewContent}
+          codeTheme={codeTheme}
+          onValueChange={setValue}
+          onEditorChange={handleEditorChange}
+          onEditorScroll={handleEditorScroll}
+          onPreviewSizeChange={setPreviewSize}
+          onToolbarInsert={handleToolbarInsert}
+          onKeyDown={handleKeyDown}
+        />
      </div>

      {/* 底部状态栏 */}
-      <div className="fixed bottom-0 left-0 right-0 bg-background border-t h-10 flex items-center justify-end px-4 gap-4">
+      <div className="h-10 bg-background border-t flex items-center justify-end px-4 gap-4">
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <span>{wordCount} 字</span>
        </div>
@ -387,9 +338,6 @@ export default function WechatEditor() {
          <span>约 {readingTime}</span>
        </div>
      </div>
-
-      {/* 为底部工具栏添加间距 */}
-      <div className="h-10" />
    </div>
  )
 }
--- a/src/components/editor/components/DesktopEditor.tsx
+++ b/src/components/editor/components/DesktopEditor.tsx
@ -1 +1,93 @@
- 
+'use client'
+
+import { type RefObject } from 'react'
+import { cn } from '@/lib/utils'
+import { templates } from '@/config/wechat-templates'
+import { EditorPreview } from './EditorPreview'
+import { MarkdownToolbar } from './MarkdownToolbar'
+import { type PreviewSize } from '../constants'
+import { type CodeThemeId } from '@/config/code-themes'
+
+interface DesktopEditorProps {
+  editorRef: RefObject<HTMLDivElement>
+  textareaRef: RefObject<HTMLTextAreaElement>
+  previewRef: RefObject<HTMLDivElement>
+  value: string
+  selectedTemplate: string
+  showPreview: boolean
+  previewSize: PreviewSize
+  isConverting: boolean
+  previewContent: string
+  codeTheme: CodeThemeId
+  onValueChange: (value: string) => void
+  onEditorChange: (value: string) => void
+  onEditorScroll: (e: React.UIEvent<HTMLTextAreaElement>) => void
+  onPreviewSizeChange: (size: PreviewSize) => void
+  onToolbarInsert: (text: string, options?: { wrap?: boolean; placeholder?: string; suffix?: string }) => void
+  onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
+}
+
+export function DesktopEditor({
+  editorRef,
+  textareaRef,
+  previewRef,
+  value,
+  selectedTemplate,
+  showPreview,
+  previewSize,
+  isConverting,
+  previewContent,
+  codeTheme,
+  onValueChange,
+  onEditorChange,
+  onEditorScroll,
+  onPreviewSizeChange,
+  onToolbarInsert,
+  onKeyDown
+}: DesktopEditorProps) {
+  return (
+    <div className="hidden md:flex flex-1 h-full">
+      <div 
+        ref={editorRef}
+        className={cn(
+          "editor-container bg-background transition-all duration-300 ease-in-out flex flex-col h-full",
+          showPreview ? "w-1/2 border-r" : "w-full",
+          selectedTemplate && templates.find(t => t.id === selectedTemplate)?.styles
+        )}
+      >
+        <MarkdownToolbar onInsert={onToolbarInsert} />
+        <div className="flex-1 overflow-hidden">
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={e => {
+              onValueChange(e.target.value)
+              onEditorChange(e.target.value)
+            }}
+            onKeyDown={onKeyDown}
+            onScroll={e => {
+              if (textareaRef.current) {
+                onEditorScroll(e)
+              }
+            }}
+            className="w-full h-full resize-none outline-none p-4 font-mono text-base leading-relaxed overflow-y-auto scrollbar-none"
+            placeholder="开始写作..."
+            spellCheck={false}
+          />
+        </div>
+      </div>
+      
+      {showPreview && (
+        <EditorPreview 
+          previewRef={previewRef}
+          selectedTemplate={selectedTemplate}
+          previewSize={previewSize}
+          isConverting={isConverting}
+          previewContent={previewContent}
+          codeTheme={codeTheme}
+          onPreviewSizeChange={onPreviewSizeChange}
+        />
+      )}
+    </div>
+  )
+} 
--- a/src/components/editor/components/EditorPreview.tsx
+++ b/src/components/editor/components/EditorPreview.tsx
@ -9,6 +9,7 @@ import { type CodeThemeId } from '@/config/code-themes'
 import { useTheme } from 'next-themes'
 import '@/styles/code-themes.css'
 import mermaid from 'mermaid'
+import { useScrollSync } from '../hooks/useScrollSync'

 interface EditorPreviewProps {
  previewRef: React.RefObject<HTMLDivElement>
@ -17,6 +18,7 @@ interface EditorPreviewProps {
  isConverting: boolean
  previewContent: string
  codeTheme: CodeThemeId
+  showToolbar?: boolean
  onPreviewSizeChange: (size: PreviewSize) => void
 }

@ -27,11 +29,14 @@ export function EditorPreview({
  isConverting,
  previewContent,
  codeTheme,
+  showToolbar = true,
  onPreviewSizeChange
 }: EditorPreviewProps) {
  const [zoom, setZoom] = useState(100)
  const [isFullscreen, setIsFullscreen] = useState(false)
  const isScrolling = useRef<boolean>(false)
+  const contentRef = useRef<HTMLDivElement>(null)
+  const { handlePreviewScroll } = useScrollSync()
  const { theme } = useTheme()

  // 初始化 Mermaid
@ -161,22 +166,6 @@ export function EditorPreview({
    }
  }, [])

-  const handleZoomIn = () => {
-    setZoom(prev => Math.min(prev + 10, 200))
-  }
-
-  const handleZoomOut = () => {
-    setZoom(prev => Math.max(prev - 10, 50))
-  }
-
-  const toggleFullscreen = () => {
-    if (!document.fullscreenElement) {
-      previewRef.current?.requestFullscreen()
-    } else {
-      document.exitFullscreen()
-    }
-  }
-
  return (
    <div 
      ref={previewRef}
@ -188,73 +177,63 @@ export function EditorPreview({
        `code-theme-${codeTheme}`
      )}
    >
-      <div className="bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b flex items-center justify-between z-10 sticky top-0 left-0 right-0">
-        <div className="flex items-center gap-0.5 px-2">
-          <span className="text-sm text-muted-foreground">预览效果</span>
-        </div>
-        <div className="flex items-center gap-4 px-4 py-2">
-          <div className="flex items-center gap-2">
-            <button
-              onClick={handleZoomOut}
-              className="p-1 rounded hover:bg-muted/80 text-muted-foreground"
-              disabled={zoom <= 50}
-            >
-              <ZoomOut className="h-4 w-4" />
-            </button>
-            <span className="text-sm text-muted-foreground">{zoom}%</span>
-            <button
-              onClick={handleZoomIn}
-              className="p-1 rounded hover:bg-muted/80 text-muted-foreground"
-              disabled={zoom >= 200}
-            >
-              <ZoomIn className="h-4 w-4" />
-            </button>
+      {showToolbar && (
+        <div className="bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b flex items-center justify-between z-10 sticky top-0 left-0 right-0">
+          <div className="flex items-center gap-0.5 px-2">
+            <span className="text-sm text-muted-foreground">预览效果</span>
          </div>
-          <div className="flex items-center gap-2">
-            <select
-              value={previewSize}
-              onChange={(e) => onPreviewSizeChange(e.target.value as PreviewSize)}
-              className="text-sm border rounded px-2 focus:outline-none focus:ring-2 focus:ring-primary/20 bg-background text-foreground"
-            >
-              {Object.entries(PREVIEW_SIZES).map(([key, { label }]) => (
-                <option key={key} value={key}>{label}</option>
-              ))}
-            </select>
-            <button
-              onClick={toggleFullscreen}
-              className="p-1 rounded hover:bg-muted/80 text-muted-foreground"
-            >
-              {isFullscreen ? (
-                <Minimize2 className="h-4 w-4" />
-              ) : (
-                <Maximize2 className="h-4 w-4" />
-              )}
-            </button>
+          <div className="flex items-center gap-4 px-4 py-2">
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => setZoom(zoom => Math.max(zoom - 10, 50))}
+                className="p-1 rounded hover:bg-muted/80 text-muted-foreground"
+                disabled={zoom <= 50}
+              >
+                <ZoomOut className="h-4 w-4" />
+              </button>
+              <span className="text-sm text-muted-foreground">{zoom}%</span>
+              <button
+                onClick={() => setZoom(zoom => Math.min(zoom + 10, 200))}
+                className="p-1 rounded hover:bg-muted/80 text-muted-foreground"
+                disabled={zoom >= 200}
+              >
+                <ZoomIn className="h-4 w-4" />
+              </button>
+            </div>
+            <div className="flex items-center gap-2">
+              <select
+                value={previewSize}
+                onChange={(e) => onPreviewSizeChange(e.target.value as PreviewSize)}
+                className="text-sm border rounded px-2 focus:outline-none focus:ring-2 focus:ring-primary/20 bg-background text-foreground"
+              >
+                {Object.entries(PREVIEW_SIZES).map(([value, { label }]) => (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                ))}
+              </select>
+              <button
+                onClick={() => setIsFullscreen(!isFullscreen)}
+                className="p-1 rounded hover:bg-muted/80 text-muted-foreground"
+              >
+                {isFullscreen ? (
+                  <Minimize2 className="h-4 w-4" />
+                ) : (
+                  <Maximize2 className="h-4 w-4" />
+                )}
+              </button>
+            </div>
          </div>
        </div>
-      </div>
+      )}

      <div 
        className="flex-1 overflow-y-auto"
-        onScroll={(e) => {
-          const container = e.currentTarget
-          const textarea = document.querySelector('.editor-container textarea')
-          if (!textarea || isScrolling.current) return
-          isScrolling.current = true
-
-          try {
-            const scrollPercentage = container.scrollTop / (container.scrollHeight - container.clientHeight)
-            const textareaScrollTop = scrollPercentage * (textarea.scrollHeight - textarea.clientHeight)
-            textarea.scrollTop = textareaScrollTop
-          } finally {
-            requestAnimationFrame(() => {
-              isScrolling.current = false
-            })
-          }
-        }}
+        onScroll={handlePreviewScroll}
      >
        <div className="h-full py-8 px-4">
-          <div 
+          <div
+            ref={contentRef}
            className={cn(
              "bg-background mx-auto rounded-lg transition-all duration-300",
              previewSize === 'full' ? '' : 'border shadow-sm'
--- a/src/components/editor/components/EditorToolbar.tsx
+++ b/src/components/editor/components/EditorToolbar.tsx
@ -1,7 +1,7 @@
 'use client'

 import { useState } from 'react'
-import { Copy, Plus, Save, Smartphone, Settings, Github } from 'lucide-react'
+import { Copy, Plus, Save, Smartphone, Settings, Github, Trash2 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { WechatStylePicker } from '../../template/WechatStylePicker'
 import { TemplateManager } from '../../template/TemplateManager'
@ -38,6 +38,7 @@ interface EditorToolbarProps {
  onStyleOptionsChange: (options: RendererOptions) => void
  onPreviewToggle: () => void
  onCodeThemeChange: (theme: CodeThemeId) => void
+  onClear: () => void
 }

 export function EditorToolbar({
@ -58,7 +59,8 @@ export function EditorToolbar({
  codeTheme,
  onCodeThemeChange,
  wordCount,
-  readingTime
+  readingTime,
+  onClear
 }: EditorToolbarProps) {
  const { toast } = useToast()

@ -126,28 +128,36 @@ export function EditorToolbar({
                <Logo className="w-6 h-6" />
                NeuraPress
              </Link>
-              <ArticleList 
-                onSelect={onArticleSelect}
-                currentContent={value}
-                onNew={onNewArticle}
-              />
+              <div className="hidden sm:block">
+                <ArticleList 
+                  onSelect={onArticleSelect}
+                  currentContent={value}
+                  onNew={onNewArticle}
+                />
+              </div>
              <WechatStylePicker 
                value={selectedTemplate} 
                onSelect={onTemplateSelect} 
              /> 
-              <CodeThemeSelector 
-                value={codeTheme} 
-                onChange={onCodeThemeChange} 
-              />
-              <StyleConfigDialog
-                value={styleOptions}
-                onChangeAction={onStyleOptionsChange}
-              />
-               <TemplateManager onTemplateChange={onTemplateChange} />
+              <div className="hidden sm:block">
+                <CodeThemeSelector 
+                  value={codeTheme} 
+                  onChange={onCodeThemeChange}
+                />
+              </div>
+              <div className="hidden sm:block">
+                <StyleConfigDialog
+                  value={styleOptions}
+                  onChangeAction={onStyleOptionsChange}
+                />
+              </div>
+              <div className="hidden sm:block">
+                <TemplateManager onTemplateChange={onTemplateChange} />
+              </div>
              <button
                onClick={onPreviewToggle}
                className={cn(
-                  "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm transition-colors justify-center",
+                  "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm transition-colors justify-center hidden sm:inline-flex",
                  showPreview 
                    ? "bg-primary text-primary-foreground hover:bg-primary/90"
                    : "bg-muted text-muted-foreground hover:bg-muted/90"
@ -158,16 +168,13 @@ export function EditorToolbar({
              </button>
            </div>
            <div className="flex items-center gap-4">
-              {isDraft && (
-                <span className="text-sm text-muted-foreground">未保存</span>
-              )}
-              {!isDraft && (
-                <span className="text-sm text-muted-foreground">已保存</span>
-              )}
+              <span className="text-sm text-muted-foreground hidden sm:inline">
+                {isDraft ? '未保存' : '已保存'}
+              </span>
              <button
                onClick={onSave}
                className={cn(
-                  "inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-md text-sm transition-colors",
+                  "inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-md text-sm transition-colors hidden sm:inline-flex",
                  isDraft 
                    ? "bg-primary text-primary-foreground hover:bg-primary/90"
                    : "bg-muted text-muted-foreground hover:bg-muted/90"
@ -176,7 +183,14 @@ export function EditorToolbar({
                <Save className="h-4 w-4" />
                <span>保存</span>
              </button>
-             
+              
+              <button
+                onClick={onClear}
+                className="sm:hidden inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-md bg-destructive text-destructive-foreground hover:bg-destructive/90 text-sm transition-colors"
+              >
+                <Trash2 className="h-4 w-4" />
+                <span>清除</span>
+              </button>
              <button
                onClick={handleCopyPreview}
                className="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 text-sm transition-colors"
@ -184,7 +198,7 @@ export function EditorToolbar({
                <Copy className="h-4 w-4" />
                <span>复制</span>
              </button>
-              <div className="flex items-center gap-1">
+              <div className="hidden sm:flex items-center gap-1">
                <ThemeToggle />
                <Button
                  variant="ghost"
--- a/src/components/editor/components/MobileEditor.tsx
+++ b/src/components/editor/components/MobileEditor.tsx
@ -1 +1,92 @@
- 
+'use client'
+
+import { type RefObject } from 'react'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
+import { Button } from '@/components/ui/button'
+import { Copy } from 'lucide-react'
+import { EditorPreview } from './EditorPreview'
+import { type PreviewSize } from '../constants'
+import { type CodeThemeId } from '@/config/code-themes'
+
+interface MobileEditorProps {
+  textareaRef: RefObject<HTMLTextAreaElement>
+  previewRef: RefObject<HTMLDivElement>
+  value: string
+  selectedTemplate: string
+  previewSize: PreviewSize
+  codeTheme: CodeThemeId
+  previewContent: string
+  isConverting: boolean
+  onValueChange: (value: string) => void
+  onEditorChange: (value: string) => void
+  onEditorScroll: (e: React.UIEvent<HTMLTextAreaElement>) => void
+  onPreviewSizeChange: (size: PreviewSize) => void
+  onCopy: () => Promise<boolean>
+}
+
+export function MobileEditor({
+  textareaRef,
+  previewRef,
+  value,
+  selectedTemplate,
+  previewSize,
+  codeTheme,
+  previewContent,
+  isConverting,
+  onValueChange,
+  onEditorChange,
+  onEditorScroll,
+  onPreviewSizeChange,
+  onCopy
+}: MobileEditorProps) {
+  return (
+    <div className="md:hidden h-full">
+      <Tabs defaultValue="edit" className="h-full flex flex-col">
+        <TabsList className="grid w-full grid-cols-2">
+          <TabsTrigger value="edit">编辑</TabsTrigger>
+          <TabsTrigger value="preview">预览</TabsTrigger>
+        </TabsList>
+        <TabsContent 
+          value="edit" 
+          className="flex-1 hidden data-[state=active]:flex flex-col"
+        >
+          <div className="relative flex-1">
+            <textarea
+              ref={textareaRef}
+              value={value}
+              onChange={e => {
+                onValueChange(e.target.value)
+                onEditorChange(e.target.value)
+              }}
+              onScroll={e => {
+                if (textareaRef.current) {
+                  onEditorScroll(e)
+                }
+              }}
+              className="absolute inset-0 w-full h-full resize-none border-0 bg-background p-4 focus:outline-none"
+              placeholder="开始写作..."
+            />
+          </div>
+        </TabsContent>
+        <TabsContent 
+          value="preview" 
+          className="flex-1 hidden data-[state=active]:flex flex-col"
+        >
+          <div className="relative flex-1">
+            
+            <EditorPreview
+              previewRef={previewRef}
+              selectedTemplate={selectedTemplate}
+              previewSize={previewSize}
+              isConverting={isConverting}
+              previewContent={previewContent}
+              codeTheme={codeTheme}
+              showToolbar={false}
+              onPreviewSizeChange={onPreviewSizeChange}
+            />
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+} 
--- a/src/components/editor/hooks/useCopy.ts
+++ b/src/components/editor/hooks/useCopy.ts
@ -1,3 +1,5 @@
+'use client'
+
 import { useCallback } from 'react'
 import { useToast } from '@/components/ui/use-toast'
 import { initializeMermaid } from '@/lib/markdown/mermaid-utils'
@ -5,11 +7,13 @@ import { initializeMermaid } from '@/lib/markdown/mermaid-utils'
 export const useCopy = () => {
  const { toast } = useToast()

-  const copyToClipboard = useCallback(async (content: string) => {
+  const copyToClipboard = useCallback(async (contentElement: HTMLElement | null) => {
+    if (!contentElement) return false
+
    try {
      // 创建临时容器并渲染内容
      const tempDiv = document.createElement('div')
-      tempDiv.innerHTML = content
+      tempDiv.innerHTML = contentElement.innerHTML
      document.body.appendChild(tempDiv)

      // 处理 Mermaid 图表
@ -23,46 +27,29 @@ export const useCopy = () => {

      // 获取处理后的内容
      const processedContent = tempDiv.innerHTML
+      const plainText = tempDiv.textContent || ''
+
+      try {
+        // 使用 Clipboard API 写入富文本
+        await navigator.clipboard.write([
+          new ClipboardItem({
+            'text/html': new Blob([processedContent], { type: 'text/html' }),
+            'text/plain': new Blob([plainText], { type: 'text/plain' })
+          })
+        ])
+      } catch (error) {
+        // 降级处理：尝试以纯文本方式复制
+        await navigator.clipboard.writeText(plainText)
+      }

      // 清理临时 div
      document.body.removeChild(tempDiv)
-
-      // 使用 Clipboard API 写入富文本
-      await navigator.clipboard.write([
-        new ClipboardItem({
-          'text/html': new Blob([processedContent], { type: 'text/html' }),
-          'text/plain': new Blob([content.replace(/<[^>]+>/g, '')], { type: 'text/plain' })
-        })
-      ])
-
-      toast({
-        title: "复制成功",
-        description: "内容已复制，可直接粘贴到公众号编辑器",
-        duration: 2000
-      })
      return true
    } catch (error) {
-      console.error('Copy error:', error)
-      try {
-        // 降级处理：尝试以纯文本方式复制
-        await navigator.clipboard.writeText(content.replace(/<[^>]+>/g, ''))
-        toast({
-          title: "复制成功",
-          description: "已复制为纯文本内容",
-          duration: 2000
-        })
-        return true
-      } catch (fallbackError) {
-        toast({
-          variant: "destructive",
-          title: "复制失败",
-          description: "无法访问剪贴板，请检查浏览器权限",
-          duration: 2000
-        })
-        return false
-      }
+      console.error('Failed to copy content:', error)
+      return false
    }
-  }, [toast])
+  }, [])

  const handleCopy = useCallback(async (selection: Selection | null, content: string) => {
    try {
@ -72,11 +59,11 @@ export const useCopy = () => {
        const container = range.cloneContents()
        const div = document.createElement('div')
        div.appendChild(container)
-        return await copyToClipboard(div.innerHTML)
+        return await copyToClipboard(div)
      }

      // 否则复制整个内容
-      return await copyToClipboard(content)
+      return await copyToClipboard(document.getElementById(content))
    } catch (error) {
      console.error('Handle copy error:', error)
      return false
--- a/src/components/editor/hooks/useScrollSync.ts
+++ b/src/components/editor/hooks/useScrollSync.ts
@ -3,38 +3,21 @@ import { useCallback, useRef } from 'react'
 export const useScrollSync = () => {
  const isScrolling = useRef<boolean>(false)
  const scrollTimeout = useRef<NodeJS.Timeout>()
-  const lastScrollTop = useRef<number>(0)

  const handleEditorScroll = useCallback((e: React.UIEvent<HTMLTextAreaElement>) => {
-    // 如果是由于输入导致的滚动，不进行同步
-    if (e.currentTarget.selectionStart !== e.currentTarget.selectionEnd) {
-      return
-    }
-    
    if (isScrolling.current) return
    
    const textarea = e.currentTarget
-    const previewContainer = document.querySelector('.preview-container .overflow-y-auto')
+    const previewContainer = document.querySelector('.preview-container')?.querySelector('.flex-1.overflow-y-auto')
    if (!previewContainer) return

-    // 检查滚动方向和幅度
-    const currentScrollTop = textarea.scrollTop
-    const scrollDiff = currentScrollTop - lastScrollTop.current
-    
-    // 如果滚动幅度太小，忽略此次滚动
-    if (Math.abs(scrollDiff) < 5) return
-    
    isScrolling.current = true
-    lastScrollTop.current = currentScrollTop

    try {
-      const scrollPercentage = currentScrollTop / (textarea.scrollHeight - textarea.clientHeight)
+      const scrollPercentage = textarea.scrollTop / (textarea.scrollHeight - textarea.clientHeight)
      const targetScrollTop = scrollPercentage * (previewContainer.scrollHeight - previewContainer.clientHeight)
      
-      previewContainer.scrollTo({
-        top: targetScrollTop,
-        behavior: 'instant'
-      })
+      previewContainer.scrollTop = targetScrollTop
    } finally {
      if (scrollTimeout.current) {
        clearTimeout(scrollTimeout.current)
@ -45,5 +28,29 @@ export const useScrollSync = () => {
    }
  }, [])

-  return { handleEditorScroll }
+  const handlePreviewScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+    if (isScrolling.current) return
+    
+    const previewContainer = e.currentTarget
+    const textarea = document.querySelector('.editor-container textarea')
+    if (!textarea) return
+
+    isScrolling.current = true
+
+    try {
+      const scrollPercentage = previewContainer.scrollTop / (previewContainer.scrollHeight - previewContainer.clientHeight)
+      const targetScrollTop = scrollPercentage * (textarea.scrollHeight - textarea.clientHeight)
+      
+      textarea.scrollTop = targetScrollTop
+    } finally {
+      if (scrollTimeout.current) {
+        clearTimeout(scrollTimeout.current)
+      }
+      scrollTimeout.current = setTimeout(() => {
+        isScrolling.current = false
+      }, 50)
+    }
+  }, [])
+
+  return { handleEditorScroll, handlePreviewScroll }
 }