From ec7f9a5a0019c9dd0447dfb975ea5043fd066697 Mon Sep 17 00:00:00 2001 From: tianyaxiang Date: Fri, 31 Jan 2025 13:44:38 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=A8=A1=E7=89=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/globals.css | 61 -------------------------- src/components/editor/WechatEditor.tsx | 1 - src/config/wechat-templates.ts | 40 +++++++++++++++-- src/lib/markdown.ts | 20 +++++++++ src/lib/types.ts | 14 ++++++ 5 files changed, 71 insertions(+), 65 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 40e7291..55cf24d 100644 --- a/src/app/globals.css +++ b/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, diff --git a/src/components/editor/WechatEditor.tsx b/src/components/editor/WechatEditor.tsx index 1e379bf..b0d1aa4 100644 --- a/src/components/editor/WechatEditor.tsx +++ b/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' diff --git a/src/config/wechat-templates.ts b/src/config/wechat-templates.ts index f0d565e..5806a8a 100644 --- a/src/config/wechat-templates.ts +++ b/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 diff --git a/src/lib/markdown.ts b/src/lib/markdown.ts index 68c4131..90b4c8c 100644 --- a/src/lib/markdown.ts +++ b/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 + } + } + } } \ No newline at end of file diff --git a/src/lib/types.ts b/src/lib/types.ts index f51c5e6..184549d 100644 --- a/src/lib/types.ts +++ b/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 + } } \ No newline at end of file