142 |
143 | *"一杯咖啡，一声鼓励。"*
144 | `)
145 | const [config, setConfig] = useState
410 | setShowControls(!showControls)}
412 | onCopy={handleCopy}
413 | onExport={handleExport}
414 | isDarkMode={isDarkMode}
415 | onToggleDarkMode={handleToggleDarkMode}
416 | isMobile={isMobile}
417 | />
418 |
419 | {/* 桌面端布局 */}
420 | {!isMobile && (
421 |
649 | )
650 | }
651 |
652 | export default App
--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/ControlPanel.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import { Palette, Sliders, Type } from 'lucide-react'
3 | import type { ImageConfig } from '@/App'
4 |
5 | interface ControlPanelProps {
6 | config: ImageConfig
7 | onChange: (config: ImageConfig) => void
8 | isDarkMode?: boolean
9 | }
10 |
11 | const LIGHT_GRADIENTS = [
12 | { name: '蓝紫渐变', class: 'bg-gradient-to-r from-blue-500 to-purple-600' },
13 | { name: '橙红渐变', class: 'bg-gradient-to-br from-orange-400 to-red-500' },
14 | { name: '绿青渐变', class: 'bg-gradient-to-tr from-green-400 to-cyan-500' },
15 | { name: '粉紫渐变', class: 'bg-gradient-to-bl from-pink-400 to-purple-500' },
16 | { name: '黄橙渐变', class: 'bg-gradient-to-tl from-yellow-400 to-orange-500' },
17 | { name: '夜空渐变', class: 'bg-gradient-to-b from-gray-900 to-blue-900' },
18 | { name: '日出渐变', class: 'bg-gradient-to-t from-yellow-300 to-pink-400' },
19 | { name: '海洋渐变', class: 'bg-gradient-to-r from-blue-400 to-teal-500' },
20 | { name: '森林渐变', class: 'bg-gradient-to-br from-green-500 to-emerald-600' },
21 | { name: '薰衣草渐变', class: 'bg-gradient-to-tr from-purple-300 to-indigo-400' },
22 | { name: '火焰渐变', class: 'bg-gradient-to-bl from-red-500 to-yellow-500' },
23 | { name: '冰雪渐变', class: 'bg-gradient-to-tl from-blue-100 to-cyan-200' },
24 | { name: '彩虹渐变', class: 'bg-gradient-to-r from-red-400 via-yellow-400 to-blue-400' },
25 | { name: '玫瑰金渐变', class: 'bg-gradient-to-b from-pink-300 to-rose-400' },
26 | { name: '深海渐变', class: 'bg-gradient-to-t from-indigo-800 to-blue-800' },
27 | { name: '秋叶渐变', class: 'bg-gradient-to-br from-orange-500 to-red-600' },
28 | { name: '薄荷渐变', class: 'bg-gradient-to-tr from-green-300 to-teal-300' },
29 | { name: '紫罗兰渐变', class: 'bg-gradient-to-bl from-violet-400 to-purple-600' },
30 | { name: '金色渐变', class: 'bg-gradient-to-tl from-yellow-500 to-amber-600' },
31 | { name: '银河渐变', class: 'bg-gradient-to-r from-slate-800 to-purple-900' },
32 | { name: '樱花渐变', class: 'bg-gradient-to-b from-pink-200 to-rose-300' },
33 | { name: '极光渐变', class: 'bg-gradient-to-t from-green-400 to-blue-500' },
34 | { name: '珊瑚渐变', class: 'bg-gradient-to-br from-orange-300 to-pink-400' },
35 | { name: '暮色渐变', class: 'bg-gradient-to-tr from-purple-600 to-pink-600' },
36 | { name: '翡翠渐变', class: 'bg-gradient-to-bl from-emerald-400 to-green-500' },
37 | { name: '琥珀渐变', class: 'bg-gradient-to-tl from-amber-400 to-yellow-600' },
38 | { name: '钢蓝渐变', class: 'bg-gradient-to-r from-slate-500 to-blue-600' },
39 | { name: '梦幻渐变', class: 'bg-gradient-to-b from-purple-400 to-pink-400' },
40 | { name: '春天渐变', class: 'bg-gradient-to-t from-lime-300 to-green-400' },
41 | { name: '夏日渐变', class: 'bg-gradient-to-br from-yellow-400 to-red-400' },
42 | { name: '秋意渐变', class: 'bg-gradient-to-tr from-orange-400 to-amber-500' },
43 | { name: '冬雪渐变', class: 'bg-gradient-to-bl from-blue-200 to-indigo-300' },
44 | { name: '热带渐变', class: 'bg-gradient-to-tl from-teal-400 to-cyan-400' },
45 | { name: '沙漠渐变', class: 'bg-gradient-to-r from-yellow-600 to-orange-600' },
46 | { name: '星空渐变', class: 'bg-gradient-to-b from-indigo-900 to-purple-800' },
47 | { name: '晨曦渐变', class: 'bg-gradient-to-t from-orange-300 to-yellow-300' },
48 | { name: '黄昏渐变', class: 'bg-gradient-to-br from-red-400 to-purple-500' },
49 | { name: '月光渐变', class: 'bg-gradient-to-tr from-blue-300 to-indigo-400' },
50 | { name: '霓虹渐变', class: 'bg-gradient-to-bl from-pink-500 to-cyan-500' },
51 | { name: '宝石渐变', class: 'bg-gradient-to-tl from-emerald-500 to-blue-500' }
52 | ]
53 |
54 | const DARK_GRADIENTS = [
55 | { name: '深蓝紫渐变', class: 'bg-gradient-to-r from-blue-800 to-purple-900' },
56 | { name: '暗橙红渐变', class: 'bg-gradient-to-br from-orange-700 to-red-800' },
57 | { name: '深绿青渐变', class: 'bg-gradient-to-tr from-green-700 to-cyan-800' },
58 | { name: '暗粉紫渐变', class: 'bg-gradient-to-bl from-pink-700 to-purple-800' },
59 | { name: '深黄橙渐变', class: 'bg-gradient-to-tl from-yellow-700 to-orange-800' },
60 | { name: '深夜渐变', class: 'bg-gradient-to-b from-gray-900 to-black' },
61 | { name: '暗日出渐变', class: 'bg-gradient-to-t from-yellow-800 to-pink-800' },
62 | { name: '深海渐变', class: 'bg-gradient-to-r from-blue-900 to-teal-900' },
63 | { name: '暗森林渐变', class: 'bg-gradient-to-br from-green-800 to-emerald-900' },
64 | { name: '深薰衣草渐变', class: 'bg-gradient-to-tr from-purple-800 to-indigo-900' },
65 | { name: '暗火焰渐变', class: 'bg-gradient-to-bl from-red-800 to-yellow-800' },
66 | { name: '深冰雪渐变', class: 'bg-gradient-to-tl from-blue-800 to-cyan-900' },
67 | { name: '暗彩虹渐变', class: 'bg-gradient-to-r from-red-800 via-yellow-800 to-blue-800' },
68 | { name: '深玫瑰金渐变', class: 'bg-gradient-to-b from-pink-800 to-rose-900' },
69 | { name: '深海渊渐变', class: 'bg-gradient-to-t from-indigo-900 to-blue-900' },
70 | { name: '暗秋叶渐变', class: 'bg-gradient-to-br from-orange-800 to-red-900' },
71 | { name: '深薄荷渐变', class: 'bg-gradient-to-tr from-green-800 to-teal-900' },
72 | { name: '暗紫罗兰渐变', class: 'bg-gradient-to-bl from-violet-800 to-purple-900' },
73 | { name: '深金色渐变', class: 'bg-gradient-to-tl from-yellow-800 to-amber-900' },
74 | { name: '深银河渐变', class: 'bg-gradient-to-r from-slate-900 to-purple-900' },
75 | { name: '暗樱花渐变', class: 'bg-gradient-to-b from-pink-500 to-rose-900' },
76 | { name: '深极光渐变', class: 'bg-gradient-to-t from-green-800 to-blue-900' },
77 | { name: '暗珊瑚渐变', class: 'bg-gradient-to-br from-orange-800 to-pink-900' },
78 | { name: '深暮色渐变', class: 'bg-gradient-to-tr from-purple-900 to-pink-900' },
79 | { name: '暗翡翠渐变', class: 'bg-gradient-to-bl from-emerald-800 to-green-900' },
80 | { name: '深琥珀渐变', class: 'bg-gradient-to-tl from-amber-800 to-yellow-900' },
81 | { name: '暗钢蓝渐变', class: 'bg-gradient-to-r from-slate-800 to-blue-900' },
82 | { name: '深梦幻渐变', class: 'bg-gradient-to-b from-purple-800 to-pink-900' },
83 | { name: '暗春天渐变', class: 'bg-gradient-to-t from-lime-800 to-green-900' },
84 | { name: '深夏日渐变', class: 'bg-gradient-to-br from-yellow-800 to-red-900' },
85 | { name: '暗秋意渐变', class: 'bg-gradient-to-tr from-orange-800 to-amber-900' },
86 | { name: '深冬雪渐变', class: 'bg-gradient-to-bl from-blue-800 to-indigo-900' },
87 | { name: '暗热带渐变', class: 'bg-gradient-to-tl from-teal-800 to-cyan-900' },
88 | { name: '深沙漠渐变', class: 'bg-gradient-to-r from-yellow-900 to-orange-900' },
89 | { name: '深星空渐变', class: 'bg-gradient-to-b from-indigo-900 to-purple-900' },
90 | { name: '暗晨曦渐变', class: 'bg-gradient-to-t from-orange-800 to-yellow-800' },
91 | { name: '深黄昏渐变', class: 'bg-gradient-to-br from-red-800 to-purple-900' },
92 | { name: '暗月光渐变', class: 'bg-gradient-to-tr from-blue-800 to-indigo-900' },
93 | { name: '深霓虹渐变', class: 'bg-gradient-to-bl from-pink-800 to-cyan-900' },
94 | { name: '暗宝石渐变', class: 'bg-gradient-to-tl from-emerald-800 to-blue-900' }
95 | ]
96 |
97 | export { LIGHT_GRADIENTS, DARK_GRADIENTS }
98 |
99 | const GRADIENT_DIRECTIONS = [
100 | { name: '向右', value: 'to-r' as const },
101 | { name: '向左', value: 'to-l' as const },
102 | { name: '向上', value: 'to-t' as const },
103 | { name: '向下', value: 'to-b' as const },
104 | { name: '右下', value: 'to-br' as const },
105 | { name: '右上', value: 'to-tr' as const }
106 | ]
107 |
108 | export const ControlPanel: React.FC
422 | {/* 左侧编辑器 */}
423 | {!editorCollapsed && (
424 |
516 | )}
517 |
518 | {/* 移动端Tab布局 */}
519 | {isMobile && (
520 |
428 | setEditorCollapsed(true)}
432 | isDarkMode={isDarkMode}
433 | />
434 |
435 | )}
436 |
437 | {/* 折叠后的编辑器按钮 */}
438 | {editorCollapsed && (
439 |
443 |
458 |
459 | )}
460 |
461 | {/* 可拖动的分隔条 */}
462 | {!editorCollapsed && (
463 |
464 |
492 | )}
493 |
494 | {/* 右侧预览 */}
495 |
473 |
480 |
481 |
482 | {/* 折叠警告提示 */}
483 | {showCollapseWarning && (
484 |
486 | {collapseTimer ? '即将折叠编辑器...' : '继续向左拖动将折叠编辑器'}
487 |
489 |
490 | )}
491 |
496 |
504 |
505 | {/* 右侧控制面板 */}
506 | {showControls && (
507 |
508 |
514 | )}
515 |
521 | {/* Tab内容区域 */}
522 |
634 | )}
635 |
636 | {/* 导出进度提示 */}
637 |
523 | {activeTab === 'editor' && (
524 |
585 |
586 | {/* 底部Tab导航 */}
587 |
525 |
531 | )}
532 |
533 | {activeTab === 'preview' && (
534 |
535 |
573 | )}
574 |
575 | {activeTab === 'settings' && (
576 |
536 |
563 |
537 | 预览
538 |
539 |
540 | {
541 | false && (
542 |
552 | )
553 | }
554 |
561 |
562 |
564 |
572 |
577 |
583 | )}
584 |
588 |
602 |
603 |
617 |
618 |
632 |
633 |
131 | {/* 标签页 */}
132 |
569 | )
570 | }
--------------------------------------------------------------------------------
/src/components/ExportProgress.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Download } from 'lucide-react'
3 |
4 | interface ExportProgressProps {
5 | isVisible: boolean
6 | progress: string
7 | isDarkMode?: boolean
8 | }
9 |
10 | export const ExportProgress: React.FC
133 |
145 |
157 |
169 |
170 |
171 | {/* 内容区域 */}
172 |
173 | {activeTab === 'background' && (
174 |
568 |
175 | {/* 背景类型选择 */}
176 |
304 | )}
305 |
306 | {activeTab === 'textBackground' && (
307 |
177 |
179 |
204 |
205 | {/* 预设渐变 */}
206 | {config.background.type === 'preset' && (
207 |
180 |
191 |
202 |
203 |
208 |
210 |
230 | )}
231 |
232 | {/* 自定义渐变 */}
233 | {config.background.type === 'custom' && (
234 |
211 | {PRESET_GRADIENTS.map((gradient, index) => (
212 |
227 | ))}
228 |
229 |
235 |
302 | )}
303 |
236 |
273 |
274 |
237 |
239 | updateBackground({
243 | gradient: {
244 | ...config.background.gradient,
245 | from: e.target.value,
246 | to: config.background.gradient?.to || '#8b5cf6',
247 | direction: config.background.gradient?.direction || 'to-r'
248 | }
249 | })}
250 | className={`w-full h-8 rounded border ${isDarkMode ? 'border-gray-600' : 'border-gray-300'
251 | }`}
252 | />
253 |
254 |
255 |
257 | updateBackground({
261 | gradient: {
262 | ...config.background.gradient,
263 | from: config.background.gradient?.from || '#3b82f6',
264 | to: e.target.value,
265 | direction: config.background.gradient?.direction || 'to-r'
266 | }
267 | })}
268 | className={`w-full h-8 rounded border ${isDarkMode ? 'border-gray-600' : 'border-gray-300'
269 | }`}
270 | />
271 |
272 |
275 |
277 |
301 |
278 | {GRADIENT_DIRECTIONS.map((dir) => (
279 |
298 | ))}
299 |
300 |
308 | {/* 启用/禁用文本背景 */}
309 |
472 | )}
473 |
474 | {activeTab === 'layout' && (
475 |
310 |
312 |
337 |
338 | {/* 文本背景设置（仅在启用时显示） */}
339 | {config.textBackground.enabled && (
340 | <>
341 | {/* 背景类型选择 */}
342 |
313 |
324 |
335 |
336 |
343 |
345 |
370 |
371 | {/* 预设渐变 */}
372 | {config.textBackground.type === 'preset' && (
373 |
346 |
357 |
368 |
369 |
374 |
376 |
396 | )}
397 |
398 | {/* 自定义渐变 */}
399 | {config.textBackground.type === 'custom' && (
400 |
377 | {PRESET_GRADIENTS.map((gradient, index) => (
378 |
393 | ))}
394 |
395 |
401 |
468 | )}
469 |
470 | )}
471 |
402 |
439 |
440 |
403 |
405 | updateTextBackground({
409 | gradient: {
410 | ...config.textBackground.gradient,
411 | from: e.target.value,
412 | to: config.textBackground.gradient?.to || '#8b5cf6',
413 | direction: config.textBackground.gradient?.direction || 'to-r'
414 | }
415 | })}
416 | className={`w-full h-8 rounded border ${isDarkMode ? 'border-gray-600' : 'border-gray-300'
417 | }`}
418 | />
419 |
420 |
421 |
423 | updateTextBackground({
427 | gradient: {
428 | ...config.textBackground.gradient,
429 | from: config.textBackground.gradient?.from || '#3b82f6',
430 | to: e.target.value,
431 | direction: config.textBackground.gradient?.direction || 'to-r'
432 | }
433 | })}
434 | className={`w-full h-8 rounded border ${isDarkMode ? 'border-gray-600' : 'border-gray-300'
435 | }`}
436 | />
437 |
438 |
441 |
443 |
467 |
444 | {GRADIENT_DIRECTIONS.map((dir) => (
445 |
464 | ))}
465 |
466 |
476 | {/* 宽度设置 */}
477 |
566 | )}
567 |
478 |
483 | updateLayout({ width: parseInt(e.target.value) })}
490 | className="w-full"
491 | />
492 |
493 |
494 | {/* 内边距设置 */}
495 |
496 |
501 | updateLayout({ padding: parseInt(e.target.value) })}
508 | className="w-full"
509 | />
510 |
511 |
512 | {/* 外边距设置 */}
513 |
514 |
519 | updateLayout({ margin: parseInt(e.target.value) })}
526 | className="w-full"
527 | />
528 |
529 |
530 | {/* 字体大小设置 */}
531 |
532 |
537 | updateLayout({ fontSize: parseInt(e.target.value) })}
544 | className="w-full"
545 | />
546 |
547 |
548 | {/* 行距设置 */}
549 |
550 |
555 | updateLayout({ spacing: parseFloat(e.target.value) })}
562 | className="w-full"
563 | />
564 |
565 |
21 |
68 | )
69 | }
--------------------------------------------------------------------------------
/src/components/Header.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { Settings, Download, Copy, Moon, Sun, Info, X } from 'lucide-react'
3 |
4 | interface HeaderProps {
5 | onToggleControls: () => void
6 | onCopy: () => void
7 | onExport: () => void
8 | isDarkMode: boolean
9 | onToggleDarkMode: () => void
10 | isMobile?: boolean
11 | }
12 |
13 | export const Header: React.FC
24 |
67 |
25 | {/* 图标和动画 */}
26 |
66 |
27 |
35 |
36 | {/* 标题 */}
37 |
30 |
34 | 40 | 正在导出图片 41 |
42 | 43 | {/* 进度文字 */} 44 |47 | {progress} 48 |
49 | 50 | {/* 加载动画 */} 51 |
52 |
53 |
54 |
55 | {/* 提示信息 */}
56 |
59 |
65 | 62 | 请稍候，正在处理图表样式并生成高质量图片... 63 |
64 |
39 | 
40 |
43 |
44 |
40 | mark-pic
42 |
45 |
56 |
105 |
57 |
67 |
68 |
79 |
80 | {!isMobile && (
81 | <>
82 |
83 |
84 |
94 |
95 |
102 |
103 | )}
104 |
114 |
183 | )}
184 |
185 | )
186 | }
--------------------------------------------------------------------------------
/src/components/ImagePreview.tsx:
--------------------------------------------------------------------------------
1 | import { useRef, forwardRef, useImperativeHandle, useEffect } from 'react'
2 | import ReactMarkdown from 'react-markdown'
3 | import remarkGfm from 'remark-gfm'
4 | import remarkBreaks from 'remark-breaks'
5 | import remarkMath from 'remark-math'
6 | import rehypeKatex from 'rehype-katex'
7 | import rehypeRaw from 'rehype-raw'
8 | import type { ImageConfig } from '@/App'
9 | import 'katex/dist/katex.min.css'
10 |
11 | import { getBackgroundStyle, getTextColor, getTextBackgroundStyle, getCardStyle } from '@/utils/styleUtils'
12 | import { initializeMermaid } from '@/components/MermaidRenderer'
13 | import { createMarkdownComponents } from '@/components/MarkdownComponents'
14 |
15 | interface ImagePreviewProps {
16 | markdown: string
17 | config: ImageConfig
18 | isDarkMode?: boolean
19 | isDesktop?: boolean
20 | }
21 |
22 | export interface ImagePreviewRef {
23 | getPreviewElement: () => HTMLDivElement | null
24 | }
25 |
26 | export const ImagePreview = forwardRef e.stopPropagation()}
119 | >
120 |
182 |
122 |
134 |
135 | 关于 mark-pic
124 | 133 |
136 |
181 |
137 |
138 |
145 |
146 |
138 |
139 |
144 | mark-pic
141 |Markdown 转图片工具
143 |148 | 将 Markdown 文本转换为精美图片的在线工具。支持实时预览、自定义样式和一键导出。 149 |
150 | 151 |
152 |
163 |
164 | 主要功能
154 |-
156 |
- • 40+ 预设渐变背景 157 |
- • 暗黑模式支持 158 |
- • 实时预览编辑 159 |
- • 图片导出和复制 160 |
- • 可调整布局参数 161 |
165 |
174 |
177 | 查看源码
178 |
179 |
180 |
46 |
91 | )
92 | })
--------------------------------------------------------------------------------
/src/components/MarkdownComponents.tsx:
--------------------------------------------------------------------------------
1 | import type { Components } from 'react-markdown'
2 | import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
3 | import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
4 | import { MermaidRenderer, processFlowContent, processSequenceContent } from './MermaidRenderer'
5 | import { cn } from '../lib/utils'
6 |
7 | /**
8 | * 创建自定义Markdown组件
9 | * @param textColor 文本颜色
10 | * @param isDarkMode 是否为暗黑模式
11 | * @param markdown 原始Markdown内容
12 | * @returns 自定义组件对象
13 | */
14 | export const createMarkdownComponents = (textColor: string, isDarkMode: boolean, markdown: string): Components => {
15 | // 目录组件
16 | const TableOfContents = () => {
17 | return (
18 |
50 |
90 |
60 |
89 |
70 |
88 |
71 |
72 |
84 | {markdown}
85 |
86 |
87 |
22 |
42 | )
43 | }
44 |
45 | return {
46 | p: ({ children, ...props }) => {
47 | if (children && typeof children === 'string' && children.toString().trim().toLowerCase() === '[toc]') {
48 | return 目录
23 |-
24 | {/* 提取标题并生成目录 */}
25 | {markdown.split('\n')
26 | .filter(line => line.startsWith('#'))
27 | .map((line, index) => {
28 | const level = line.match(/^#+/)?.[0].length || 0;
29 | if (level > 3) return null;
30 |
31 | const title = line.replace(/^#+\s+/, '');
32 | const indent = (level - 1) * 16;
33 |
34 | return (
35 |
- 36 | {title} 37 | 38 | ); 39 | })} 40 |
52 | {children} 53 |
54 | ) 55 | }, 56 | h1: ({ children, ...props }) => ( 57 |58 | {children} 59 |
60 | ), 61 | h2: ({ children, ...props }) => ( 62 |63 | {children} 64 |
65 | ), 66 | h3: ({ children, ...props }) => ( 67 |68 | {children} 69 |
70 | ), 71 | ul: ({ children, ...props }) => ( 72 |-
73 | {children}
74 |
-
78 | {children}
79 |
83 |
87 | {children}
88 |
89 |
90 | ),
91 | thead: ({ children, ...props }) => (
92 |
95 | {children}
96 |
97 | ),
98 | tbody: ({ children, ...props }) => (
99 |
103 | {children}
104 |
105 | ),
106 | tr: ({ children, ...props }) => (
107 | 134 | {children} 135 |136 | ), 137 | code: ({ node, className, children, ref, ...props }) => { 138 | const match = /language-(\w+)/.exec(className || '') 139 | const isInline = !match 140 | 141 | if (!isInline) { 142 | const language = match ? match[1] : 'text' 143 | const content = String(children).replace(/\n$/, '') 144 | 145 | if (language === 'mermaid') { 146 | return
161 |
172 | {content}
173 |
174 |
175 | )
176 | }
177 | return (
178 |
182 | {children}
183 |
184 | )
185 | },
186 | strong: ({ children, ...props }) => (
187 |
188 | {children}
189 |
190 | ),
191 | em: ({ children, ...props }) => (
192 |
193 | {children}
194 |
195 | )
196 | }
197 | }
--------------------------------------------------------------------------------
/src/components/MarkdownEditor.tsx:
--------------------------------------------------------------------------------
1 | // import MDEditor, { commands } from '@uiw/react-md-editor';
2 | import MDEditor from '@uiw/react-md-editor';
3 | import { useEffect } from 'react';
4 |
5 | interface MarkdownEditorProps {
6 | value: string;
7 | onChange: (value: string) => void;
8 | onToggleCollapse?: () => void;
9 | isDarkMode?: boolean;
10 | }
11 |
12 | export const MarkdownEditor: React.FC
35 | {/* 编辑器工具栏 */}
36 |
93 | );
94 | };
--------------------------------------------------------------------------------
/src/components/MermaidRenderer.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react'
2 | import mermaid from 'mermaid'
3 | import { cn } from '../lib/utils'
4 |
5 | interface MermaidRendererProps {
6 | content: string
7 | isDarkMode: boolean
8 | }
9 |
10 | /**
11 | * 获取Mermaid配置
12 | * @param isDarkMode 是否为暗黑模式
13 | * @param startOnLoad 是否在页面加载时自动渲染
14 | * @returns Mermaid配置对象
15 | */
16 | export const getMermaidConfig = (isDarkMode: boolean, startOnLoad: boolean = false) => {
17 | return {
18 | startOnLoad,
19 | theme: isDarkMode ? 'dark' : 'default',
20 | securityLevel: 'loose',
21 | fontFamily: 'sans-serif',
22 | flowchart: {
23 | useMaxWidth: true,
24 | htmlLabels: true,
25 | curve: 'basis'
26 | },
27 | sequence: {
28 | useMaxWidth: true,
29 | showSequenceNumbers: false,
30 | wrap: true,
31 | width: 150
32 | },
33 | gantt: { useMaxWidth: true },
34 | logLevel: 5,
35 | deterministicIds: startOnLoad,
36 | }
37 | }
38 |
39 | /**
40 | * Mermaid图表渲染组件
41 | * 用于渲染mermaid、flow和sequence等图表
42 | */
43 | export const MermaidRenderer = ({ content, isDarkMode }: MermaidRendererProps) => {
44 | const [renderState, setRenderState] = useState<'loading' | 'success' | 'error'>('loading')
45 | const [errorMessage, setErrorMessage] = useState
40 |
57 |
58 | {/* Markdown编辑器 */}
59 | Markdown 编辑器
42 | {onToggleCollapse && (
43 |
55 | )}
56 |
60 |
92 |
107 |
114 | )
115 | }
116 |
117 | return (
118 | 图表渲染错误
108 |{errorMessage}
109 |{content}
113 |
119 | {renderState === 'loading' ? (
120 |
130 | )
131 | }
132 |
133 | /**
134 | * 初始化Mermaid配置
135 | * @param isDarkMode 是否为暗黑模式
136 | */
137 | export const initializeMermaid = (isDarkMode: boolean) => {
138 | try {
139 | mermaid.initialize(getMermaidConfig(isDarkMode, true))
140 |
141 | // 尝试运行一个简单的图表来验证初始化是否成功
142 | mermaid.parse('graph TD\nA-->B')
143 | } catch (error) {
144 | console.error('Mermaid初始化失败:', error)
145 | }
146 | }
147 |
148 | /**
149 | * 处理流程图内容
150 | * @param content 原始内容
151 | * @returns 处理后的Mermaid内容
152 | */
153 | export const processFlowContent = (content: string): string => {
154 | // 检查是否是flowchart.js语法（包含=>符号）
155 | const isFlowchartJs = content.includes('=>');
156 |
157 | if (isFlowchartJs) {
158 | return `flowchart TD
159 | A([开始]) --> B[处理]
160 | B --> C{判断条件?}
161 | C -->|是| D([结束])
162 | C -->|否| B
163 | `;
164 | } else {
165 | let mermaidContent = content.trim();
166 | if (!mermaidContent.startsWith('graph') && !mermaidContent.startsWith('flowchart')) {
167 | mermaidContent = `graph TD\n${mermaidContent}`;
168 | }
169 | return mermaidContent;
170 | }
171 | }
172 |
173 | /**
174 | * 处理时序图内容
175 | * @param content 原始内容
176 | * @returns 处理后的Mermaid内容
177 | */
178 | export const processSequenceContent = (content: string): string => {
179 | let mermaidContent = content.trim();
180 | if (!mermaidContent.startsWith('sequenceDiagram')) {
181 | mermaidContent = `sequenceDiagram\n${mermaidContent}`;
182 | }
183 | return mermaidContent;
184 | }
--------------------------------------------------------------------------------
/src/components/MobileWarning.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import { Monitor, Smartphone, X, Copy, Check } from 'lucide-react'
3 |
4 | interface MobileWarningProps {
5 | isDarkMode?: boolean
6 | }
7 |
8 | export const MobileWarning: React.FC
124 | 正在渲染图表...
125 |
126 | ) : (
127 |
128 | )}
129 |
75 |
187 | )
188 | }
--------------------------------------------------------------------------------
/src/components/Toast.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react'
2 | import { CheckCircle, XCircle, AlertCircle, X } from 'lucide-react'
3 |
4 | export type ToastType = 'success' | 'error' | 'warning' | 'info'
5 |
6 | export interface ToastProps {
7 | id: string
8 | type: ToastType
9 | title: string
10 | message?: string
11 | duration?: number
12 | onClose: (id: string) => void
13 | isDarkMode?: boolean
14 | }
15 |
16 | export const Toast: React.FC
79 |
88 |
89 |
186 |
91 |
185 |
93 |
108 |
109 |
95 |
98 |
99 |
101 |
102 |
104 |
107 | 112 | 请使用电脑访问 113 |
114 | 115 |118 | mark-pic 专为桌面端设计，需要较大屏幕空间提供最佳体验。 119 |
120 | 121 |
124 |
137 |
138 | 127 | 推荐使用： 128 |
129 |-
132 |
- • 桌面电脑或笔记本 133 |
- • 屏幕 ≥ 1024px 134 |
- • 现代浏览器 135 |
141 |
173 |
174 |
184 |
144 | 电脑端访问地址：
145 |
146 |
166 | {copied && (
167 |
169 | 已复制到剪贴板
170 |
171 | )}
172 |
86 |
113 | )
114 | }
115 |
116 | export const ToastContainer: React.FC<{
117 | toasts: ToastProps[],
118 | onClose: (id: string) => void,
119 | isDarkMode?: boolean
120 | }> = ({
121 | toasts,
122 | onClose,
123 | isDarkMode = false
124 | }) => {
125 | if (toasts.length === 0) return null
126 |
127 | return (
128 |
87 |
112 |
88 | {getIcon()}
89 |
90 |
91 |
102 |
111 | 93 | {title} 94 |
95 | {message && ( 96 |98 | {message} 99 |
100 | )} 101 |
129 | {toasts.map((toast) => (
130 |
133 | )
134 | }
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss";
--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs))
6 | }
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode } from 'react'
2 | import { createRoot } from 'react-dom/client'
3 | import './index.css'
4 | import App from './App.tsx'
5 |
6 | createRoot(document.getElementById('root')!).render(
7 |