From 55d44228ecd4588c9210e1bfed02fe1fc64aecb3 Mon Sep 17 00:00:00 2001
From: tianyaxiang <tianyaxiang@qq.com>
Date: Wed, 29 Jan 2025 23:34:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/editor/WechatEditor.tsx        | 110 ++++++++-------
 .../editor/components/MobileToolbar.tsx       | 127 +++++++-----------
 2 files changed, 103 insertions(+), 134 deletions(-)

diff --git a/src/components/editor/WechatEditor.tsx b/src/components/editor/WechatEditor.tsx
index 3383664..20bd1e9 100644
--- a/src/components/editor/WechatEditor.tsx
+++ b/src/components/editor/WechatEditor.tsx
@@ -15,6 +15,8 @@ import { MobileToolbar } from './components/MobileToolbar'
 import { MarkdownToolbar } from './components/MarkdownToolbar'
 import { type PreviewSize } from './constants'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { WechatStylePicker } from '@/components/template/WechatStylePicker'
+import { Copy } from 'lucide-react'
 
 export default function WechatEditor() {
   const { toast } = useToast()
@@ -339,62 +341,78 @@ export default function WechatEditor() {
 
   return (
     <div className="h-full flex flex-col">
-      <EditorToolbar 
-        value={value}
-        isDraft={isDraft}
-        showPreview={showPreview}
-        selectedTemplate={selectedTemplate}
-        onSave={handleSave}
-        onCopy={copyContent}
-        onCopyPreview={handleCopy}
-        onNewArticle={handleNewArticle}
-        onArticleSelect={handleArticleSelect}
-        onTemplateSelect={setSelectedTemplate}
-        onTemplateChange={() => setValue(value)}
-        onStyleOptionsChange={setStyleOptions}
-        onPreviewToggle={() => setShowPreview(!showPreview)}
-        styleOptions={styleOptions}
-      />
+      <div className="hidden sm:block">
+        <EditorToolbar 
+          value={value}
+          isDraft={isDraft}
+          showPreview={showPreview}
+          selectedTemplate={selectedTemplate}
+          onSave={handleSave}
+          onCopy={copyContent}
+          onCopyPreview={handleCopy}
+          onNewArticle={handleNewArticle}
+          onArticleSelect={handleArticleSelect}
+          onTemplateSelect={setSelectedTemplate}
+          onTemplateChange={() => setValue(value)}
+          onStyleOptionsChange={setStyleOptions}
+          onPreviewToggle={() => setShowPreview(!showPreview)}
+          styleOptions={styleOptions}
+        />
+      </div>
       
       <div className="flex-1 flex flex-col sm:flex-row overflow-hidden">
-        {/* Mobile Tabs */}
+        {/* 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">
+              <WechatStylePicker 
+                value={selectedTemplate} 
+                onSelect={setSelectedTemplate}
+              />
+            </div>
+            <button
+              onClick={handleCopy}
+              className="flex items-center justify-center gap-1 px-2 py-1 rounded-md text-xs text-primary hover:bg-muted transition-colors"
+            >
+              <Copy className="h-3.5 w-3.5" />
+              复制
+            </button>
+          </div>
           <Tabs defaultValue="editor" className="flex-1 flex flex-col">
             <TabsList className="grid w-full grid-cols-2">
               <TabsTrigger value="editor">编辑</TabsTrigger>
               <TabsTrigger value="preview">预览</TabsTrigger>
             </TabsList>
-            <TabsContent value="editor" className="flex-1 flex flex-col data-[state=inactive]:hidden">
+            <TabsContent value="editor" className="flex-1 data-[state=inactive]:hidden">
               <div 
                 ref={editorRef}
                 className={cn(
-                  "editor-container bg-background flex-1 flex flex-col",
+                  "h-full overflow-y-auto",
                   selectedTemplate && templates.find(t => t.id === selectedTemplate)?.styles
                 )}
               >
-                <MarkdownToolbar onInsert={handleToolbarInsert} />
-                <div className="flex-1">
-                  <textarea
-                    ref={textareaRef}
-                    value={value}
-                    onChange={handleInput}
-                    onKeyDown={handleKeyDown}
-                    className="w-full h-full resize-none outline-none p-4 font-mono text-base leading-relaxed"
-                    placeholder="开始写作..."
-                    spellCheck={false}
-                  />
-                </div>
+                <textarea
+                  ref={textareaRef}
+                  value={value}
+                  onChange={handleInput}
+                  onKeyDown={handleKeyDown}
+                  className="w-full h-full resize-none outline-none p-4 font-mono text-base leading-relaxed"
+                  placeholder="开始写作..."
+                  spellCheck={false}
+                />
               </div>
             </TabsContent>
-            <TabsContent value="preview" className="flex-1 flex flex-col data-[state=inactive]:hidden">
-              <EditorPreview 
-                previewRef={previewRef}
-                selectedTemplate={selectedTemplate}
-                previewSize={previewSize}
-                isConverting={isConverting}
-                previewContent={previewContent}
-                onPreviewSizeChange={setPreviewSize}
-              />
+            <TabsContent value="preview" className="flex-1 data-[state=inactive]:hidden">
+              <div className="h-full overflow-y-auto">
+                <EditorPreview 
+                  previewRef={previewRef}
+                  selectedTemplate={selectedTemplate}
+                  previewSize={previewSize}
+                  isConverting={isConverting}
+                  previewContent={previewContent}
+                  onPreviewSizeChange={setPreviewSize}
+                />
+              </div>
             </TabsContent>
           </Tabs>
         </div>
@@ -437,18 +455,6 @@ export default function WechatEditor() {
           )}
         </div>
       </div>
-
-      {/* Only show mobile toolbar on desktop */}
-      <div className="hidden sm:block">
-        <MobileToolbar 
-          showPreview={showPreview}
-          isDraft={isDraft}
-          onPreviewToggle={() => setShowPreview(!showPreview)}
-          onSave={handleSave}
-          onCopy={copyContent}
-          onCopyPreview={handleCopy}
-        />
-      </div>
     </div>
   )
 }
\ No newline at end of file
diff --git a/src/components/editor/components/MobileToolbar.tsx b/src/components/editor/components/MobileToolbar.tsx
index 07a2e69..cc4a3cb 100644
--- a/src/components/editor/components/MobileToolbar.tsx
+++ b/src/components/editor/components/MobileToolbar.tsx
@@ -1,7 +1,7 @@
-import { Copy, Save, Settings, Image, Link } from 'lucide-react'
+import { Copy, Save, Settings } from 'lucide-react'
 import { cn } from '@/lib/utils'
-import { useState } from 'react'
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
+import { WechatStylePicker } from '../../template/WechatStylePicker'
 
 interface MobileToolbarProps {
   showPreview: boolean
@@ -10,8 +10,8 @@ interface MobileToolbarProps {
   onSave: () => void
   onCopy: () => void
   onCopyPreview: () => void
-  onImageUpload?: (file: File) => Promise<string>
-  onLinkInsert?: (url: string) => void
+  selectedTemplate: string
+  onTemplateSelect: (template: string) => void
 }
 
 export function MobileToolbar({
@@ -21,98 +21,61 @@ export function MobileToolbar({
   onSave,
   onCopy,
   onCopyPreview,
-  onImageUpload,
-  onLinkInsert
+  selectedTemplate,
+  onTemplateSelect
 }: MobileToolbarProps) {
   return (
-    <div className="sm:hidden fixed bottom-0 left-0 right-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-t">
-      <div className="flex items-center justify-between p-2">
-        <div className="flex items-center gap-2">
-          <button
-            onClick={onSave}
-            className={cn(
-              "flex flex-col items-center gap-1 px-2 py-1 rounded-md text-xs transition-colors relative",
-              isDraft 
-                ? "text-primary"
-                : "text-muted-foreground"
-            )}
-          >
-            <Save className="h-5 w-5" />
-            保存
-            {isDraft && <span className="absolute -top-1 -right-1 w-2 h-2 bg-primary rounded-full" />}
-          </button>
+    <div className="bg-background border-t">
+      <div className="flex flex-col">
+        <div className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+          <div className="p-2">
+            <WechatStylePicker 
+              value={selectedTemplate} 
+              onSelect={onTemplateSelect}
+            />
+          </div>
+        </div>
+        <div className="flex items-center justify-between p-2 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
           <button
             onClick={onCopyPreview}
-            className="flex flex-col items-center gap-1 px-2 py-1 rounded-md text-xs text-muted-foreground transition-colors"
+            className="flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-md text-sm bg-primary text-primary-foreground hover:bg-primary/90 transition-colors mr-2"
           >
-            <Copy className="h-5 w-5" />
-            复制
+            <Copy className="h-4 w-4" />
+            复制预览
           </button>
-        </div>
 
-        <Sheet>
-          <SheetTrigger asChild>
-            <button className="p-1 rounded-md text-muted-foreground">
-              <Settings className="h-5 w-5" />
-            </button>
-          </SheetTrigger>
-          <SheetContent side="bottom" className="h-[40vh]">
-            <div className="grid grid-cols-4 gap-4 p-4">
-              <button
-                onClick={onCopy}
-                className="flex flex-col items-center gap-2 p-3 rounded-lg border hover:bg-muted/80"
-              >
-                <Copy className="h-6 w-6" />
-                <span className="text-xs">复制源码</span>
+          <Sheet>
+            <SheetTrigger asChild>
+              <button className="flex items-center justify-center p-2 rounded-md text-muted-foreground hover:bg-muted/80">
+                <Settings className="h-4 w-4" />
               </button>
-              <button
-                onClick={onCopyPreview}
-                className="flex flex-col items-center gap-2 p-3 rounded-lg border hover:bg-muted/80"
-              >
-                <Copy className="h-6 w-6" />
-                <span className="text-xs">复制预览</span>
-              </button>
-              {onImageUpload && (
+            </SheetTrigger>
+            <SheetContent side="bottom" className="h-[30vh]">
+              <div className="flex flex-col gap-4 p-4">
                 <button
-                  onClick={() => {
-                    const input = document.createElement('input')
-                    input.type = 'file'
-                    input.accept = 'image/*'
-                    input.onchange = async (e) => {
-                      const file = (e.target as HTMLInputElement).files?.[0]
-                      if (file && onImageUpload) {
-                        try {
-                          await onImageUpload(file)
-                        } catch (error) {
-                          console.error('Image upload failed:', error)
-                        }
-                      }
-                    }
-                    input.click()
-                  }}
-                  className="flex flex-col items-center gap-2 p-3 rounded-lg border hover:bg-muted/80"
+                  onClick={onSave}
+                  className={cn(
+                    "flex items-center justify-center gap-2 px-4 py-2 rounded-md text-sm transition-colors",
+                    isDraft 
+                      ? "bg-primary text-primary-foreground"
+                      : "bg-muted text-muted-foreground"
+                  )}
                 >
-                  <Image className="h-6 w-6" />
-                  <span className="text-xs">插入图片</span>
+                  <Save className="h-4 w-4" />
+                  保存文章
+                  {isDraft && <span className="w-2 h-2 bg-primary-foreground rounded-full" />}
                 </button>
-              )}
-              {onLinkInsert && (
                 <button
-                  onClick={() => {
-                    const url = window.prompt('请输入链接地址')
-                    if (url && onLinkInsert) {
-                      onLinkInsert(url)
-                    }
-                  }}
-                  className="flex flex-col items-center gap-2 p-3 rounded-lg border hover:bg-muted/80"
+                  onClick={onCopy}
+                  className="flex items-center justify-center gap-2 px-4 py-2 rounded-md bg-muted text-muted-foreground text-sm"
                 >
-                  <Link className="h-6 w-6" />
-                  <span className="text-xs">插入链接</span>
+                  <Copy className="h-4 w-4" />
+                  复制源码
                 </button>
-              )}
-            </div>
-          </SheetContent>
-        </Sheet>
+              </div>
+            </SheetContent>
+          </Sheet>
+        </div>
       </div>
     </div>
   )