优化模版

src/app/globals.css

@@ -108,17 +108,6 @@
   --tw-prose-quotes: #666666;
 }
 
-/* 预览内容样式优化 */
-.preview-content {
-  word-break: break-word;
-  white-space: pre-wrap;
-  padding:1rem 1.5rem;
-  max-width: 100%;
-  margin: 0 auto;
-}
-
-
-
 /* 预览区域滚动条优化 */
 .preview-container {
   scrollbar-width: thin;
@@ -145,52 +134,6 @@
   background-color: hsl(var(--foreground));
 }
 
-/* 预览区域响应式布局 */
-@media (max-width: 768px) {
-  .preview-content {
-    padding: 0.75rem;
-    font-size: 14px;
-  }
-  
-  .preview-content img {
-    margin: 1em auto;
-  }
-  
-  .preview-content pre {
-    margin: 1em 0;
-    padding: 0.75em;
-    font-size: 0.85em;
-  }
-}
-
-/* 模板预览卡片样式 */
-.template-preview-card {
-  position: relative;
-  overflow: hidden;
-  transition: all 0.2s ease;
-}
-
-.template-preview-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.template-preview-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 4px;
-  background: linear-gradient(to right, var(--primary), var(--primary-foreground));
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-
-.template-preview-card:hover::before {
-  opacity: 1;
-}
-
 /* ByteMD 编辑器样式优化 */
 .bytemd {
   height: 100% !important;
@@ -465,10 +408,6 @@
   overflow-y: auto;
 }
 
-
-
-
-
 .editor-container .bytemd-editor::-webkit-scrollbar-thumb,
 .preview-container .preview-content::-webkit-scrollbar-thumb,
 .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,

src/components/editor/WechatEditor.tsx

@@ -11,7 +11,6 @@ import { useEditorSync } from './hooks/useEditorSync'
 import { useAutoSave } from './hooks/useAutoSave'
 import { EditorToolbar } from './components/EditorToolbar'
 import { EditorPreview } from './components/EditorPreview'
-import { MobileToolbar } from './components/MobileToolbar'
 import { MarkdownToolbar } from './components/MarkdownToolbar'
 import { type PreviewSize } from './constants'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'

src/config/wechat-templates.ts

@@ -19,7 +19,14 @@ export const templates: Template[] = [
       base: {
         primaryColor: '#000000',
         textAlign: 'left',
-        lineHeight: '1.75'
+        lineHeight: '1.75',
+        padding: '1rem 1.5rem',
+        maxWidth: '100%',
+        margin: '0 auto',
+        wordBreak: 'break-word',
+        whiteSpace: 'pre-wrap',
+        fontSize: '15px',
+        color: '#333'
       },
       block: {
         h1: {
@@ -74,13 +81,13 @@ export const templates: Template[] = [
           borderRadius: '8px',
           padding: '1em',
           lineHeight: 1.5,
-          margin: '10px 8px'
+          margin: '10px 8px',
         },
         image: {
           display: 'block',
           width: '100%',
           margin: '0.1em auto 0.5em',
-          borderRadius: '4px'
+          borderRadius: '4px',
         }
       },
       inline: {
@@ -102,6 +109,33 @@ export const templates: Template[] = [
           fontSize: '15px',
           color: '#576b95'
         }
+      },
+      dark: {
+        base: {
+          color: 'hsl(var(--foreground))'
+        },
+        block: {
+          h1: { color: 'hsl(var(--foreground))' },
+          h2: { color: 'hsl(var(--foreground))' },
+          h3: { color: 'hsl(var(--foreground))' },
+          p: { color: 'hsl(var(--foreground))' },
+          pre: {
+            background: 'hsl(var(--muted))',
+            border: '1px solid hsl(var(--border))'
+          },
+          code: {
+            background: 'hsl(var(--muted))',
+            color: 'hsl(var(--accent-foreground))'
+          },
+          blockquote: {
+            background: 'hsl(var(--muted))',
+            borderLeftColor: 'hsl(var(--primary))',
+            color: 'hsl(var(--muted-foreground))'
+          },
+          image: {
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)'
+          }
+        }
       }
     },
     transform: (html) => html

src/lib/markdown.ts

@@ -272,6 +272,12 @@ export interface RendererOptions {
     lineHeight?: string | number
     fontSize?: string
     themeColor?: string
+    padding?: string
+    maxWidth?: string
+    margin?: string
+    wordBreak?: string
+    whiteSpace?: string
+    color?: string
   }
   block?: {
     [key: string]: StyleOptions
@@ -279,4 +285,18 @@ export interface RendererOptions {
   inline?: {
     [key: string]: StyleOptions
   }
+  dark?: {
+    base?: {
+      color?: string
+    }
+    block?: {
+      [key: string]: {
+        color?: string
+        background?: string
+        border?: string
+        borderLeftColor?: string
+        boxShadow?: string
+      }
+    }
+  }
 }

src/lib/types.ts

@@ -28,4 +28,18 @@ export interface RendererOptions {
     link?: CSSProperties
     listitem?: CSSProperties
   }
+}
+
+export interface StyleOptions {
+  padding?: string
+  maxWidth?: string
+  margin?: string
+  wordBreak?: string
+  whiteSpace?: string
+  color?: string
+  '@media (max-width: 768px)'?: {
+    margin?: string
+    padding?: string
+    fontSize?: string
+  }
 }