├── madopic.png
├── favicon.svg
├── manifest.json
├── README.md
├── index.html
├── style.css
└── script.js


/madopic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xiaolinbaba/Madopic/HEAD/madopic.png


--------------------------------------------------------------------------------
/favicon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24"><path fill="#4f46e5" fill-rule="evenodd" d="M6 2a2 2 0 0 0-2 2v1a1 1 0 1 0 0 2v2a1 1 0 1 0 0 2v2a1 1 0 1 0 0 2v2a1 1 0 1 0 0 2v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z" class="duoicon-secondary-layer" opacity=".3"/><path fill="#4f46e5" fill-rule="evenodd" d="M8.5 6A1.5 1.5 0 0 0 7 7.5v1A1.5 1.5 0 0 0 8.5 10h7A1.5 1.5 0 0 0 17 8.5v-1A1.5 1.5 0 0 0 15.5 6z" class="duoicon-primary-layer"/></svg>


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Madopic - Markdown to Picture",
 3 |   "short_name": "Madopic",
 4 |   "description": "精美的 Markdown 转图片工具，轻松制作社交媒体图片",
 5 |   "start_url": "/",
 6 |   "display": "standalone",
 7 |   "background_color": "#f8fafc",
 8 |   "theme_color": "#6366f1",
 9 |   "orientation": "portrait-primary",
10 |   "icons": [
11 |     {
12 |       "src": "favicon.svg",
13 |       "sizes": "any",
14 |       "type": "image/svg+xml",
15 |       "purpose": "any maskable"
16 |     }
17 |   ],
18 |   "categories": ["productivity", "utilities", "graphics"],
19 |   "lang": "zh-CN"
20 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Madopic
  2 | 
  3 | > Madopic (Markdown to Picture) 精美的 Markdown 转图片工具 ✨
  4 | 
  5 | ![](/madopic.png)
  6 | 
  7 | 一个现代化的在线工具，可以将 Markdown 文本转换为精美的图片海报，特别适合社交媒体分享。
  8 | 
  9 | ## 项目简介
 10 | 
 11 | Madopic 是一个功能丰富的 Markdown 可视化工具，集成了数学公式渲染、图表绘制、多格式导出等强大功能。无论是制作学术海报、技术文档，还是社交媒体内容，都能轻松胜任。
 12 | 
 13 | 
 14 | 
 15 | ## 主要功能
 16 | 
 17 | ### 基础功能
 18 | 1. **Markdown 渲染**：将 Markdown 内容转化为精美图文海报
 19 | 2. **自定义外观**：可调整背景、字体大小、边距和模式（自由/小红书/朋友圈）
 20 | 3. **多格式导出**：支持 PNG、PDF 和HTML格式导出
 21 | 4. **所见即所得**：实时预览，快速导出
 22 | 5. **图片支持**：本地选择、剪贴板粘贴，Base64 智能管理
 23 | 6. **信息卡片**：支持好看的信息卡片
 24 | 
 25 | ### 数学公式渲染
 26 | 6. **KaTeX 集成**：支持行内公式 `$E=mc^{2}$` 和块级公式 `$$\int_a^b f(x)dx$$`
 27 | 7. **公式模板库**：内置数学、物理、化学公式模板
 28 | 8. **符号支持**：希腊字母、积分微分、矩阵等复杂数学符号
 29 | 
 30 | ### 图表可视化
 31 | 9. **Mermaid 图表**：流程图、序列图、甘特图、饼图等
 32 | 10. **ECharts 数据图表**：柱状图、折线图、饼图等数据可视化
 33 | 11. **一键插入**：丰富的图表模板，快速创建专业图表
 34 | 
 35 | ### 用户体验
 36 | 12. **代码块优化**：自动换行，支持长代码行完整显示
 37 | 13. **预览缩放**：50%～150% 灵活查看
 38 | 14. **键盘快捷键**：提升编辑效率
 39 | 15. **智能通知**：操作反馈与错误提示
 40 | 16. **完全开源**：MIT 协议，免费使用
 41 | 
 42 | ## 使用场景
 43 | 
 44 | ### 学术科研
 45 | - **学术海报制作**：支持复杂数学公式和专业图表
 46 | - **论文图表生成**：流程图、数据可视化
 47 | - **教学课件制作**：数学、物理、化学公式展示
 48 | - **研究报告可视化**：数据分析结果展示
 49 | 
 50 | ### 商业应用
 51 | - **技术文档制作**：API文档、架构图、流程说明
 52 | - **产品功能介绍**：功能流程图、数据展示
 53 | - **项目报告**：进度甘特图、统计图表
 54 | - **培训材料**：操作流程图、知识图谱
 55 | 
 56 | ### 社交媒体
 57 | - **知识分享**：公式推导、概念解释
 58 | - **学习笔记**：思维导图、重点总结
 59 | - **技术博客**：代码示例、架构说明
 60 | - **创意海报**：精美排版、视觉呈现
 61 | 
 62 | ## 使用方法
 63 | 
 64 | ### 基础操作
 65 | 1. **编写内容**：在左侧编辑器中输入 Markdown 文本
 66 | 2. **实时预览**：右侧会实时显示渲染效果，包括数学公式和图表
 67 | 3. **自定义外观**：点击"自定义"按钮调整：
 68 |    - 背景渐变色彩
 69 |    - 字体大小（12-32px）
 70 |    - 内容边距（20-80px）
 71 |    - 显示模式（自由/小红书3:4/朋友圈长图）
 72 | 
 73 | ### 数学公式
 74 | 4. **插入公式**：点击工具栏 🧮 按钮插入数学公式模板
 75 | 5. **物理公式**：点击 🔬 按钮获取物理公式（牛顿定律、电磁学等）
 76 | 6. **化学公式**：点击 🧪 按钮插入化学反应方程式
 77 | 7. **质能守恒**：点击 ⚛️ 按钮快速插入 E=mc²
 78 | 
 79 | ### 图表绘制
 80 | 8. **流程图**：点击 🔄 按钮创建 Mermaid 流程图
 81 | 9. **序列图**：点击 ⏭️ 按钮绘制时序图
 82 | 10. **甘特图**：点击 📅 按钮制作项目进度图
 83 | 11. **数据图表**：点击 📊 按钮创建 ECharts 数据可视化
 84 | 
 85 | ### 导出保存
 86 | 12. **PNG 导出**：点击"导出PNG"按钮生成高清图片
 87 | 13. **PDF 导出**：点击"导出PDF"按钮生成矢量文档
 88 | 14. **HTML 导出**：点击"导出HTML"按钮生成HTML页面
 89 | 15. **预览缩放**：使用 +/- 按钮调整预览大小（50%-150%）
 90 | 
 91 | ## 技术栈
 92 | 
 93 | ### 核心框架
 94 | - **前端框架**：原生 HTML/CSS/JavaScript
 95 | - **Markdown 解析**：marked.js
 96 | - **图片生成**：html2canvas
 97 | - **PDF 生成**：jsPDF
 98 | 
 99 | ### 数学与图表
100 | - **数学公式渲染**：KaTeX + mhchem（化学公式扩展）
101 | - **流程图渲染**：Mermaid.js
102 | - **数据可视化**：Apache ECharts
103 | 
104 | ### UI与交互
105 | - **图标字体**：Font Awesome
106 | - **样式设计**：现代化 CSS Grid/Flexbox/变量
107 | - **响应式设计**：移动端适配
108 | - **PWA支持**：manifest.json 安装元数据
109 | 
110 | ## 技术实现与核心逻辑亮点
111 | 
112 | ### 渲染优化
113 | - **独立导出DOM**：导出时创建隔离节点避免影响预览，确保样式一致性
114 | - **异步渲染管线**：数学公式→图表→ECharts 串行渲染，确保导出完整性
115 | - **ID冲突解决**：为导出节点的Mermaid图表生成唯一ID，避免预览区干扰
116 | - **代码块换行**：移除水平滚动，使用CSS自动换行确保长代码完整显示
117 | 
118 | ### 公式与图表
119 | - **KaTeX集成**：支持mhchem化学扩展，正确处理上标语法 `^{2}` 
120 | - **Mermaid渲染**：异步图表生成，支持主题配置和错误处理
121 | - **ECharts可视化**：动态数据图表，响应式尺寸适配
122 | - **模板系统**：内置数学、物理、化学公式和图表模板
123 | 
124 | ### 储与导出
125 | - **Base64管理**：Markdown中短码展示，导出时替换完整数据
126 | - **多格式支持**：PNG位图和PDF矢量双格式导出
127 | - **样式变量化**：CSS变量统一管理，实时预览无重排
128 | - **错误降级**：html2canvas多尺度重试，确保导出成功率
129 | 
130 | ### 用户体验
131 | - **智能预处理**：自动识别公式语法，预处理特殊字符
132 | - **键盘快捷键**：提升编辑效率，支持常用操作
133 | - **响应式设计**：适配多种屏幕尺寸和导出比例
134 | - **通知反馈**：操作状态实时提示，错误信息友好展示
135 | 
136 | 
137 | ## 本地部署
138 | 
139 | 1. 克隆项目到本地
140 | 2. 使用任意HTTP服务器启动
141 | 
142 | ## 更新日志
143 | 
144 | ### 20250906
145 | - 增加导出HTML
146 | - 已知bug修复
147 | 
148 | ### 20250824
149 | - UI调整
150 | - 增加卡片信息
151 | 
152 | ### 20250814
153 | 
154 | 重大功能更新 感谢贡献者 @[southbaird](https://github.com/southbaird)
155 | - **数学公式渲染**：集成KaTeX引擎，支持LaTeX数学公式
156 | - **化学公式支持**：添加mhchem扩展，支持化学反应方程式
157 | - **图表绘制系统**：集成Mermaid，支持流程图、序列图、甘特图等
158 | - **数据可视化**：集成ECharts，支持柱状图、折线图、饼图等
159 | - **PDF导出功能**：新增矢量格式导出，支持高质量打印
160 | - **丰富模板库**：内置数学、物理、化学公式和图表模板
161 | - **扩展工具栏**：新增12个专业功能按钮，快速插入内容
162 | - **功能优化**：UI界面、代码块、表格样式优化及已知BUG修复
163 | 
164 | ### 20250801
165 | - **渲染性能**：优化异步渲染管线，减少阻塞时间
166 | - **错误处理**：完善错误降级机制，提升用户体验
167 | - **代码结构**：模块化重构，提高代码可维护性
168 | 
169 | ## 📄 开源协议
170 | 
171 | 本项目采用 MIT 协议开源。
172 | 
173 | ---
174 | 
175 | **Madopic 2.0** - 让你的知识更有画面感 🎨✨


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Madopic - Markdown to Picture</title>
  7 |     <link rel="icon" type="image/svg+xml" href="favicon.svg?v=20250906">
  8 |     <link rel="apple-touch-icon" href="madopic.png?v=20250906">
  9 |     <meta name="theme-color" content="#6366f1">
 10 |     <meta name="description" content="精美的 Markdown 转图片工具，轻松制作社交媒体图片">
 11 |     <link rel="manifest" href="manifest.json?v=20250906">
 12 |     <link rel="stylesheet" href="style.css?v=20250906">
 13 |     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
 14 |     <!-- KaTeX CSS -->
 15 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
 16 |     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 17 |     <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
 18 |     <!-- KaTeX JavaScript -->
 19 |     <script src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js"></script>
 20 |     <script src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js"></script>
 21 |     <!-- KaTeX mhchem extension for chemistry -->
 22 |     <script src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/mhchem.min.js"></script>
 23 |     <!-- Mermaid JavaScript -->
 24 |     <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
 25 |     <!-- ECharts JavaScript -->
 26 |     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
 27 |     <!-- jsPDF for PDF export -->
 28 |     <script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
 29 | </head>
 30 | <body>
 31 |     <div class="app">
 32 |         <!-- 顶部工具栏 -->
 33 |         <div class="toolbar">
 34 |             <div class="toolbar-left">
 35 |                 <h1><img src="favicon.svg" alt="Madopic" class="app-icon"> Madopic</h1>
 36 |                 <span class="subtitle">Markdown to Picture 🎨✨</span>
 37 |             </div>
 38 |             <div class="toolbar-right">
 39 |                 <div class="mode-group" id="modeGroup" title="导出模式">
 40 |                     <button class="btn btn-secondary btn-toggle active" id="modeFreeBtn" data-mode="free">
 41 |                         <i class="fas fa-expand"></i>
 42 |                         <span>自由</span>
 43 |                     </button>
 44 |                     <button class="btn btn-secondary btn-toggle" id="modeXhsBtn" data-mode="xhs">
 45 |                         <i class="fas fa-book"></i>
 46 |                         <span>小红书</span>
 47 |                     </button>
 48 |                     <button class="btn btn-secondary btn-toggle" id="modePyqBtn" data-mode="pyq">
 49 |                         <i class="fas fa-users"></i>
 50 |                         <span>朋友圈</span>
 51 |                     </button>
 52 |                 </div>
 53 |                 <button class="btn btn-secondary" id="backgroundBtn">
 54 |                     <i class="fas fa-palette"></i> 背景设置
 55 |                 </button>
 56 |                 <button class="btn btn-secondary" id="layoutBtn">
 57 |                     <i class="fas fa-text-height"></i> 文字布局
 58 |                 </button>
 59 |                 <button class="btn btn-primary" id="exportPngBtn">
 60 |                     <i class="fas fa-image"></i> 导出PNG
 61 |                 </button>
 62 |                 <button class="btn btn-primary" id="exportPdfBtn">
 63 |                     <i class="fas fa-file-pdf"></i> 导出PDF
 64 |                 </button>
 65 |                 <button class="btn btn-primary" id="exportHtmlBtn">
 66 |                     <i class="fas fa-file-code"></i> 导出HTML
 67 |                 </button>
 68 |                 <a href="https://github.com/xiaolinbaba/Madopic" target="_blank" class="github-link" title="查看GitHub源码">
 69 |                     <i class="fab fa-github"></i>
 70 |                 </a>
 71 |             </div>
 72 |         </div>
 73 | 
 74 |         <!-- 主要内容区域 -->
 75 |         <div class="main-content">
 76 |             <!-- 左侧编辑器 -->
 77 |             <div class="editor-panel">
 78 |                 <div class="panel-header">
 79 |                     <h3><i class="fab fa-markdown"></i> Markdown</h3>
 80 |                     <div class="editor-tools">
 81 |                         <button class="tool-btn" data-action="bold" title="粗体">
 82 |                             <i class="fas fa-bold"></i>
 83 |                         </button>
 84 |                         <button class="tool-btn" data-action="italic" title="斜体">
 85 |                             <i class="fas fa-italic"></i>
 86 |                         </button>
 87 |                         <button class="tool-btn" data-action="heading" title="标题">
 88 |                             <i class="fas fa-heading"></i>
 89 |                         </button>
 90 |                         <button class="tool-btn" data-action="list" title="列表">
 91 |                             <i class="fas fa-list"></i>
 92 |                         </button>
 93 |                         <button class="tool-btn" data-action="link" title="链接">
 94 |                             <i class="fas fa-link"></i>
 95 |                         </button>
 96 |                         <button class="tool-btn" data-action="image" title="插入图片">
 97 |                             <i class="fas fa-image"></i>
 98 |                         </button>
 99 |                         <div class="tool-separator"></div>
100 |                         <button class="tool-btn" data-action="flowchart" title="插入流程图">
101 |                             <i class="fas fa-project-diagram"></i>
102 |                         </button>
103 |                         <button class="tool-btn" data-action="sequence" title="插入序列图">
104 |                             <i class="fas fa-exchange-alt"></i>
105 |                         </button>
106 |                         <button class="tool-btn" data-action="gantt" title="插入甘特图">
107 |                             <i class="fas fa-chart-gantt"></i>
108 |                         </button>
109 |                         <button class="tool-btn" data-action="pie" title="插入饼图">
110 |                             <i class="fas fa-chart-pie"></i>
111 |                         </button>
112 |                         <button class="tool-btn" data-action="echarts" title="插入ECharts图表">
113 |                             <i class="fas fa-chart-bar"></i>
114 |                         </button>
115 |                         <div class="tool-separator"></div>
116 |                         <button class="tool-btn" data-action="einstein" title="插入质能守恒公式">
117 |                             <i class="fas fa-atom"></i>
118 |                         </button>
119 |                         <button class="tool-btn" data-action="math" title="插入数学公式">
120 |                             <i class="fas fa-square-root-alt"></i>
121 |                         </button>
122 |                         <button class="tool-btn" data-action="physics" title="插入物理公式">
123 |                             <i class="fas fa-flask"></i>
124 |                         </button>
125 |                         <button class="tool-btn" data-action="chemistry" title="插入化学公式">
126 |                             <i class="fas fa-vial"></i>
127 |                         </button>
128 |                         <div class="tool-separator"></div>
129 |                         <button class="tool-btn" data-action="card" title="插入卡片">
130 |                             <i class="fas fa-id-card"></i>
131 |                         </button>
132 |                         <button class="tool-btn" data-action="empty-line" title="加入空行">
133 |                             <i class="fas fa-paragraph"></i>
134 |                         </button>
135 |                         <button class="tool-btn" data-action="clear" title="清空">
136 |                             <i class="fas fa-trash"></i>
137 |                         </button>
138 |                     </div>
139 |                 </div>
140 |                 <!-- 隐藏的文件选择器 -->
141 |                 <input type="file" id="imageInput" accept="image/*" style="display: none;">
142 |                 <div class="editor-with-lines">
143 |                     <pre class="line-numbers" aria-hidden="true"></pre>
144 |                     <textarea id="markdownInput" placeholder="在这里输入你的 Markdown 内容..."># Madopic
145 | 
146 | > Madopic，精美的 Markdown 转图片工具 🎨
147 | 
148 | ![](https://pic4.zhimg.com/v2-a342a311176f76e4120b7084d9f18db3_r.jpg)
149 | 
150 | :::card info
151 | 一个现代化的在线工具，可以将 Markdown 文本转换为精美的图片海报，适合社交媒体分享。
152 | :::
153 | 
154 | 
155 | ## 🚀 主要功能
156 | 
157 | - 将 Markdown 内容转化为图文海报
158 | - 可以自定义背景、字体大小和边距
159 | - 所见即所得，快速导出为 png 图片，pdf 文档
160 | - 支持本地图片，粘贴图片，网络图片
161 | - 支持 Mermaid，Echarts，数学公式，信息卡片等元素
162 | 
163 | ## 🎯 使用场景
164 | 
165 | - 社交媒体，制作精美海报，信息卡片
166 | - 教育学习，教学课件，知识卡片
167 | - 商业应用，技术文档，架构图，数据展示
168 | - 学术科研，复杂公式，专业图表展示
169 | - 任何需要图片化展示的富文本内容</textarea>
170 |                 </div>
171 |             </div>
172 | 
173 |             <!-- 右侧预览面板 -->
174 |             <div class="preview-panel">
175 |                 <div class="panel-header">
176 |                     <h3><i class="fas fa-eye"></i> 实时预览</h3>
177 |                     <div class="preview-tools">
178 |                         <button class="tool-btn" id="zoomOut" title="缩小">
179 |                             <i class="fas fa-search-minus"></i>
180 |                         </button>
181 |                         <span class="zoom-level">100%</span>
182 |                         <button class="tool-btn" id="zoomIn" title="放大">
183 |                             <i class="fas fa-search-plus"></i>
184 |                         </button>
185 |                     </div>
186 |                 </div>
187 |                 <div class="preview-container" id="previewContainer">
188 |                     <div class="preview-content" id="previewContent">
189 |                         <div class="markdown-poster" id="markdownPoster">
190 |                             <div class="poster-content" id="posterContent">
191 |                                 <!-- Markdown 渲染内容将在这里显示 -->
192 |                             </div>
193 |                         </div>
194 |                     </div>
195 |                 </div>
196 |             </div>
197 |         </div>
198 | 
199 |         <!-- 背景设置面板 -->
200 |         <div class="background-panel" id="backgroundPanel">
201 |             <div class="panel-content">
202 |                 <h3><i class="fas fa-palette"></i> 背景设置</h3>
203 |                 
204 |                 <div class="setting-section">
205 |                     <div class="option-group">
206 |                         <label>预设背景：</label>
207 |                         <div class="preset-backgrounds">
208 |                             <div class="bg-preset active" data-bg="gradient1"></div>
209 |                             <div class="bg-preset" data-bg="gradient2"></div>
210 |                             <div class="bg-preset" data-bg="gradient3"></div>
211 |                             <div class="bg-preset" data-bg="gradient4"></div>
212 |                             <div class="bg-preset" data-bg="gradient5"></div>
213 |                             <div class="bg-preset" data-bg="gradient6"></div>
214 |                             <div class="bg-preset" data-bg="gradient7"></div>
215 |                             <div class="bg-preset" data-bg="gradient8"></div>
216 |                         </div>
217 |                     </div>
218 |                     <div class="option-group">
219 |                         <label>自定义颜色：</label>
220 |                         <div class="color-inputs">
221 |                             <div class="color-input-group">
222 |                                 <label>起始色：</label>
223 |                                 <input type="color" id="colorStart" value="#667eea">
224 |                             </div>
225 |                             <div class="color-input-group">
226 |                                 <label>结束色：</label>
227 |                                 <input type="color" id="colorEnd" value="#764ba2">
228 |                             </div>
229 |                         </div>
230 |                     </div>
231 |                     <div class="option-group">
232 |                         <label>渐变方向：</label>
233 |                         <select id="gradientDirection">
234 |                             <option value="135deg">左上到右下</option>
235 |                             <option value="45deg">左下到右上</option>
236 |                             <option value="0deg">左到右</option>
237 |                             <option value="90deg">上到下</option>
238 |                             <option value="180deg">下到上</option>
239 |                             <option value="270deg">右到左</option>
240 |                         </select>
241 |                     </div>
242 |                 </div>
243 | 
244 |                 <div class="panel-actions">
245 |                     <button class="btn btn-secondary" id="cancelBackground">取消</button>
246 |                     <button class="btn btn-primary" id="applyBackground">应用</button>
247 |                 </div>
248 |             </div>
249 |         </div>
250 | 
251 |         <!-- 文字布局设置面板 -->
252 |         <div class="background-panel" id="layoutPanel">
253 |             <div class="panel-content">
254 |                 <h3><i class="fas fa-text-height"></i> 文字布局设置</h3>
255 |                 
256 |                 <!-- 文字设置 -->
257 |                 <div class="setting-section">
258 |                     <h4><i class="fas fa-font"></i> 文字设置</h4>
259 |                     <div class="option-group">
260 |                         <label>文字大小：</label>
261 |                         <div class="slider-group">
262 |                             <input type="range" id="fontSizeSlider" min="14" max="22" value="18" step="0.5">
263 |                             <span class="slider-value" id="fontSizeValue">18px</span>
264 |                         </div>
265 |                     </div>
266 |                 </div>
267 | 
268 |                 <!-- 布局设置 -->
269 |                 <div class="setting-section">
270 |                     <h4><i class="fas fa-expand-arrows-alt"></i> 布局设置</h4>
271 |                     <div class="option-group">
272 |                         <label>整体宽度：</label>
273 |                         <div class="slider-group">
274 |                             <input type="range" id="widthSlider" min="480" max="800" value="640" step="20">
275 |                             <span class="slider-value" id="widthValue">640px</span>
276 |                         </div>
277 |                     </div>
278 |                     <div class="option-group">
279 |                         <label>卡片边距：</label>
280 |                         <div class="slider-group">
281 |                             <input type="range" id="paddingSlider" min="20" max="60" value="40" step="2.5">
282 |                             <span class="slider-value" id="paddingValue">40px</span>
283 |                         </div>
284 |                     </div>
285 |                 </div>
286 | 
287 |                 <div class="panel-actions">
288 |                     <button class="btn btn-secondary" id="cancelLayout">取消</button>
289 |                     <button class="btn btn-primary" id="applyLayout">应用</button>
290 |                 </div>
291 |             </div>
292 |         </div>
293 | 
294 |         <!-- 遮罩层 -->
295 |         <div class="overlay" id="overlay"></div>
296 |     </div>
297 | 
298 |     <script src="script.js?v=20250906"></script>
299 | </body>
300 | </html>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
   1 | /* CSS 变量定义 */
   2 | :root {
   3 |     --primary-color: #6366f1;
   4 |     --primary-hover: #4f46e5;
   5 |     --secondary-color: #8b5cf6;
   6 |     --text-primary: #1e293b;
   7 |     --text-secondary: #334155;
   8 |     --text-muted: #64748b;
   9 |     --text-light: #475569;
  10 |     --background-light: #f8fafc;
  11 |     --background-gray: #f1f5f9;
  12 |     --border-color: #e2e8f0;
  13 |     --border-light: #cbd5e1;
  14 |     --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  15 |     --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  16 |     --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
  17 |     --border-radius: 8px;
  18 |     --border-radius-lg: 12px;
  19 |     --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  20 | }
  21 | 
  22 | /* 全局样式重置 */
  23 | * {
  24 |     margin: 0;
  25 |     padding: 0;
  26 |     box-sizing: border-box;
  27 | }
  28 | 
  29 | body {
  30 |     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  31 |     background: var(--background-light);
  32 |     color: var(--text-secondary);
  33 |     line-height: 1.6;
  34 |     overflow: hidden;
  35 | }
  36 | 
  37 | /* 主应用容器 */
  38 | .app {
  39 |     height: 100vh;
  40 |     display: flex;
  41 |     flex-direction: column;
  42 | }
  43 | 
  44 | /* 顶部工具栏 */
  45 | .toolbar {
  46 |     background: white;
  47 |     border-bottom: 1px solid var(--border-color);
  48 |     padding: 12px 24px;
  49 |     display: flex;
  50 |     justify-content: space-between;
  51 |     align-items: center;
  52 |     box-shadow: var(--shadow-sm);
  53 |     z-index: 10;
  54 | }
  55 | 
  56 | .toolbar-left {
  57 |     display: flex;
  58 |     align-items: center;
  59 |     gap: 16px;
  60 | }
  61 | 
  62 | .toolbar-left h1 {
  63 |     font-size: 20px;
  64 |     font-weight: 700;
  65 |     color: var(--text-primary);
  66 |     display: flex;
  67 |     align-items: center;
  68 |     gap: 8px;
  69 | }
  70 | 
  71 | .toolbar-left h1 .app-icon {
  72 |     width: 24px;
  73 |     height: 24px;
  74 |     margin-right: 4px;
  75 |     vertical-align: middle;
  76 | }
  77 | 
  78 | .toolbar-left h1 i {
  79 |     color: var(--primary-color);
  80 | }
  81 | 
  82 | .subtitle {
  83 |     font-size: 14px;
  84 |     color: var(--text-muted);
  85 |     font-weight: 400;
  86 | }
  87 | 
  88 | .toolbar-right {
  89 |     display: flex;
  90 |     align-items: center;
  91 |     gap: 16px;
  92 | }
  93 | 
  94 | .mode-group {
  95 |     display: flex;
  96 |     gap: 8px;
  97 |     margin-right: 16px; /* 与右侧自定义/导出拉开距离 */
  98 | }
  99 | 
 100 | .btn-toggle.active {
 101 |     background: var(--primary-color);
 102 |     color: #fff;
 103 |     border-color: transparent;
 104 | }
 105 | 
 106 | .btn-toggle {
 107 |     display: inline-flex;
 108 |     align-items: center;
 109 |     gap: 6px;
 110 | }
 111 | 
 112 | /* 不同模式选中态颜色 */
 113 | #modeXhsBtn.active {
 114 |     background: #ef4444; /* 红色 */
 115 | }
 116 | 
 117 | #modePyqBtn.active {
 118 |     background: #10b981; /* 绿色 */
 119 | }
 120 | 
 121 | /* 按钮样式 */
 122 | .btn {
 123 |     padding: 8px 16px;
 124 |     border: none;
 125 |     border-radius: 8px;
 126 |     font-size: 14px;
 127 |     font-weight: 500;
 128 |     cursor: pointer;
 129 |     display: flex;
 130 |     align-items: center;
 131 |     gap: 6px;
 132 |     transition: all 0.2s ease;
 133 |     text-decoration: none;
 134 | }
 135 | 
 136 | .btn-primary {
 137 |     background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
 138 |     color: white;
 139 | }
 140 | 
 141 | .btn-primary:hover {
 142 |     transform: translateY(-1px);
 143 |     box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
 144 | }
 145 | 
 146 | .btn-secondary {
 147 |     background: var(--background-gray);
 148 |     color: var(--text-light);
 149 |     border: 1px solid var(--border-color);
 150 | }
 151 | 
 152 | .btn-secondary:hover {
 153 |     background: var(--border-color);
 154 |     transform: translateY(-1px);
 155 | }
 156 | 
 157 | /* 主内容区域 */
 158 | .main-content {
 159 |     flex: 1;
 160 |     display: flex;
 161 |     min-height: 0; /* 允许内部面板成为滚动容器，避免底部空白 */
 162 | }
 163 | 
 164 | /* 面板通用样式 */
 165 | .editor-panel,
 166 | .preview-panel {
 167 |     flex: 1;
 168 |     display: flex;
 169 |     flex-direction: column;
 170 |     background: white;
 171 |     border-right: 1px solid #e2e8f0;
 172 |     min-height: 0; /* 修复子容器溢出导致父容器被撑高 */
 173 | }
 174 | 
 175 | .preview-panel {
 176 |     border-right: none;
 177 | }
 178 | 
 179 | .panel-header {
 180 |     padding: 16px 28px;
 181 |     border-bottom: 1px solid #e2e8f0;
 182 |     display: flex;
 183 |     justify-content: space-between;
 184 |     align-items: center;
 185 |     background: #f8fafc;
 186 | }
 187 | 
 188 | .panel-header h3 {
 189 |     font-size: 16px;
 190 |     font-weight: 600;
 191 |     color: #1e293b;
 192 |     display: flex;
 193 |     align-items: center;
 194 |     gap: 8px;
 195 | }
 196 | 
 197 | /* 编辑器工具栏 */
 198 | .editor-tools,
 199 | .preview-tools {
 200 |     display: flex;
 201 |     gap: 4px;
 202 |     align-items: center;
 203 | }
 204 | 
 205 | /* 预览工具栏特殊样式，确保与右侧工具栏对齐 */
 206 | .preview-panel .panel-header {
 207 |     padding-right: 125px;
 208 | }
 209 | 
 210 | .preview-tools {
 211 |     gap: 8px;
 212 | }
 213 | 
 214 | .tool-btn {
 215 |     width: 32px;
 216 |     height: 32px;
 217 |     border: none;
 218 |     background: transparent;
 219 |     color: #64748b;
 220 |     border-radius: 6px;
 221 |     cursor: pointer;
 222 |     display: flex;
 223 |     align-items: center;
 224 |     justify-content: center;
 225 |     transition: all 0.2s ease;
 226 | }
 227 | 
 228 | .tool-btn:hover {
 229 |     background: #e2e8f0;
 230 |     color: #475569;
 231 | }
 232 | 
 233 | .zoom-level {
 234 |     font-size: 12px;
 235 |     color: #64748b;
 236 |     padding: 0 10px;
 237 |     display: flex;
 238 |     align-items: center;
 239 |     justify-content: center;
 240 |     min-width: 45px;
 241 |     font-weight: 500;
 242 | }
 243 | 
 244 | /* Markdown 编辑器 */
 245 | .editor-with-lines {
 246 |     position: relative;
 247 |     display: flex;
 248 |     flex: 1;        /* 占满除去面板头部的剩余空间 */
 249 |     min-height: 0;  /* 允许内部滚动，不把父容器撑高 */
 250 |     background: #fafafa;
 251 | }
 252 | 
 253 | .line-numbers {
 254 |     counter-reset: linenumber;
 255 |     user-select: none;
 256 |     pointer-events: none;
 257 |     width: 48px;
 258 |     padding: 20px 10px 20px 16px;
 259 |     margin: 0;
 260 |     background: #f3f4f6;
 261 |     color: #94a3b8;
 262 |     text-align: right;
 263 |     line-height: 1.6;
 264 |     font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
 265 |     font-size: 14px;
 266 |     overflow: hidden;
 267 | }
 268 | 
 269 | #markdownInput {
 270 |     flex: 1;
 271 |     border: none;
 272 |     padding: 20px 20px 20px 12px;
 273 |     font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
 274 |     font-size: 14px;
 275 |     line-height: 1.6;
 276 |     resize: none;
 277 |     outline: none;
 278 |     background: transparent;
 279 |     color: #374151;
 280 | }
 281 | 
 282 | #markdownInput::placeholder {
 283 |     color: #9ca3af;
 284 | }
 285 | 
 286 | /* 预览容器 */
 287 | .preview-container {
 288 |     flex: 1;
 289 |     min-height: 0;  /* 允许成为真正的滚动容器，避免底部空白 */
 290 |     overflow: auto;
 291 |     background: #f1f5f9;
 292 |     padding: 20px;
 293 |     display: flex;
 294 |     justify-content: center;
 295 |     align-items: flex-start;
 296 | }
 297 | 
 298 | .preview-content {
 299 |     transform-origin: top center;
 300 |     transition: transform 0.2s ease;
 301 | }
 302 | 
 303 | /* Markdown 海报样式 */
 304 | .markdown-poster {
 305 |     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 306 |     border-radius: 0;
 307 |     padding: 40px;
 308 |     margin: 20px;
 309 |     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
 310 |     width: 640px; /* 视觉宽度（内容卡片外层） */
 311 |     min-height: 600px;
 312 |     position: relative;
 313 |     overflow: hidden;
 314 | }
 315 | 
 316 | /* 小红书模式下，为了与导出一致，使用 border-box 宽度模型 */
 317 | .markdown-poster[data-mode="xhs"] {
 318 |     box-sizing: border-box;
 319 | }
 320 | 
 321 | .markdown-poster[data-mode="pyq"] {
 322 |     box-sizing: border-box;
 323 | }
 324 | 
 325 | .markdown-poster::before {
 326 |     content: '';
 327 |     position: absolute;
 328 |     top: 0;
 329 |     left: 0;
 330 |     right: 0;
 331 |     bottom: 0;
 332 |     background: rgba(255, 255, 255, 0.1);
 333 |     border-radius: 0;
 334 |     pointer-events: none;
 335 | }
 336 | 
 337 | .poster-content {
 338 |     background: rgba(255, 255, 255, 0.95) !important;
 339 |     border-radius: 12px;
 340 |     padding: 40px;
 341 |     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 342 |     backdrop-filter: blur(10px);
 343 |     position: relative;
 344 |     z-index: 1;
 345 |     overflow: hidden;
 346 |     word-wrap: break-word;
 347 |     min-height: 400px;
 348 |     display: flex;
 349 |     flex-direction: column;
 350 | }
 351 | 
 352 | 
 353 | /* 空内容提示样式 */
 354 | .empty-preview {
 355 |     display: flex;
 356 |     flex-direction: column;
 357 |     align-items: center;
 358 |     justify-content: center;
 359 |     text-align: center;
 360 |     padding: 60px 40px;
 361 |     color: var(--text-muted);
 362 |     min-height: 400px;
 363 | }
 364 | 
 365 | .empty-icon {
 366 |     font-size: 48px;
 367 |     color: var(--primary-color);
 368 |     margin-bottom: 20px;
 369 |     opacity: 0.8;
 370 | }
 371 | 
 372 | .empty-preview h3 {
 373 |     font-size: 24px;
 374 |     color: var(--text-secondary);
 375 |     margin-bottom: 12px;
 376 |     font-weight: 600;
 377 | }
 378 | 
 379 | .empty-preview > p {
 380 |     font-size: 16px;
 381 |     color: var(--text-muted);
 382 |     margin-bottom: 32px;
 383 |     line-height: 1.5;
 384 | }
 385 | 
 386 | .empty-tips {
 387 |     display: flex;
 388 |     flex-direction: column;
 389 |     gap: 16px;
 390 |     max-width: 320px;
 391 | }
 392 | 
 393 | .tip-item {
 394 |     display: flex;
 395 |     align-items: center;
 396 |     gap: 12px;
 397 |     text-align: left;
 398 |     padding: 12px 16px;
 399 |     background: rgba(99, 102, 241, 0.05);
 400 |     border-radius: 8px;
 401 |     border-left: 3px solid var(--primary-color);
 402 | }
 403 | 
 404 | .tip-item i {
 405 |     color: var(--primary-color);
 406 |     font-size: 14px;
 407 |     width: 16px;
 408 |     flex-shrink: 0;
 409 | }
 410 | 
 411 | .tip-item span {
 412 |     font-size: 14px;
 413 |     color: var(--text-light);
 414 |     line-height: 1.4;
 415 | }
 416 | 
 417 | /* Markdown 内容样式 */
 418 | .poster-content img {
 419 |     max-width: 100%;
 420 |     height: auto;
 421 |     border-radius: var(--border-radius);
 422 |     margin: 16px auto;
 423 |     box-shadow: var(--shadow-md);
 424 |     display: block;
 425 |     object-fit: cover;
 426 | }
 427 | 
 428 | .poster-content video,
 429 | .poster-content iframe {
 430 |     max-width: 100%;
 431 |     height: auto;
 432 |     border-radius: 8px;
 433 |     margin: 16px 0;
 434 |     display: block;
 435 | }
 436 | 
 437 | .poster-content table {
 438 |     width: 100%;
 439 |     max-width: 100%;
 440 |     border-collapse: collapse;
 441 |     margin: 16px 0;
 442 |     font-size: 14px;
 443 |     display: table;
 444 |     table-layout: fixed;
 445 | }
 446 | 
 447 | .poster-content table th,
 448 | .poster-content table td {
 449 |     padding: 8px 12px;
 450 |     border: 1px solid var(--border-color);
 451 |     text-align: left;
 452 |     word-wrap: break-word;
 453 |     overflow-wrap: break-word;
 454 |     word-break: break-word;
 455 | }
 456 | 
 457 | .poster-content table th {
 458 |     background: var(--background-light);
 459 |     font-weight: 600;
 460 | }
 461 | 
 462 | .poster-content h1 {
 463 |     font-size: var(--dynamic-h1-size, 28px);
 464 |     font-weight: 700;
 465 |     color: var(--text-primary);
 466 |     margin-bottom: 16px;
 467 |     line-height: 1.3;
 468 | }
 469 | 
 470 | .poster-content h2 {
 471 |     font-size: var(--dynamic-h2-size, 22px);
 472 |     font-weight: 600;
 473 |     color: var(--text-secondary);
 474 |     margin: 24px 0 12px 0;
 475 |     line-height: 1.4;
 476 | }
 477 | 
 478 | .poster-content h3 {
 479 |     font-size: var(--dynamic-h3-size, 18px);
 480 |     font-weight: 600;
 481 |     color: var(--text-light);
 482 |     margin: 20px 0 8px 0;
 483 | }
 484 | 
 485 | .poster-content p {
 486 |     font-size: var(--dynamic-font-size, 16px);
 487 |     color: var(--text-light);
 488 |     margin-bottom: 16px;
 489 |     line-height: 1.7;
 490 | }
 491 | 
 492 | /* Markdown 空行（可视化占位） */
 493 | .poster-content .md-empty-line {
 494 |     height: 1em;
 495 |     line-height: 1em;
 496 |     margin: 8px 0;
 497 |     opacity: 0.2;
 498 | }
 499 | 
 500 | .poster-content em {
 501 |     font-style: italic;
 502 |     color: var(--primary-color);
 503 | }
 504 | 
 505 | .poster-content strong {
 506 |     font-weight: 700;
 507 |     color: var(--text-primary);
 508 | }
 509 | 
 510 | .poster-content a {
 511 |     color: var(--primary-color);
 512 |     text-decoration: none;
 513 |     border-bottom: 1px solid var(--primary-color);
 514 |     transition: all 0.2s ease;
 515 | }
 516 | 
 517 | .poster-content a:hover {
 518 |     color: var(--primary-hover);
 519 |     border-bottom-color: var(--primary-hover);
 520 | }
 521 | 
 522 | .poster-content ul,
 523 | .poster-content ol {
 524 |     margin: 16px 0;
 525 |     padding-left: 24px;
 526 | }
 527 | 
 528 | .poster-content li {
 529 |     font-size: var(--dynamic-font-size, 16px);
 530 |     color: var(--text-light);
 531 |     margin-bottom: 8px;
 532 |     line-height: 1.6;
 533 |     display: list-item;
 534 | }
 535 | 
 536 | .poster-content li a {
 537 |     color: var(--primary-color);
 538 |     text-decoration: none;
 539 |     border-bottom: 1px solid var(--primary-color);
 540 |     display: inline;
 541 | }
 542 | 
 543 | .poster-content li code {
 544 |     background: var(--background-gray);
 545 |     padding: 2px 6px;
 546 |     border-radius: 4px;
 547 |     font-family: var(--font-mono);
 548 |     font-size: var(--dynamic-code-size, 14px);
 549 |     color: var(--primary-color);
 550 |     display: inline;
 551 |     vertical-align: baseline;
 552 |     line-height: inherit;
 553 | }
 554 | 
 555 | .poster-content blockquote {
 556 |     border-left: 4px solid var(--primary-color);
 557 |     padding-left: 16px;
 558 |     background: var(--background-gray);
 559 |     padding-top: 12px;
 560 |     padding-bottom: 12px;
 561 |     margin: 16px 0;
 562 |     color: var(--text-muted);
 563 |     font-style: italic;
 564 |     font-size: var(--dynamic-quote-size, 16px);
 565 | }
 566 | 
 567 | /* 解决单行引用高度偏大：取消 blockquote 内段落默认外边距 */
 568 | .poster-content blockquote p {
 569 |     margin: 0;
 570 |     line-height: inherit;
 571 | }
 572 | 
 573 | .poster-content code {
 574 |     background: var(--background-gray);
 575 |     padding: 2px 6px;
 576 |     border-radius: 4px;
 577 |     font-family: var(--font-mono);
 578 |     font-size: var(--dynamic-code-size, 14px);
 579 |     color: var(--primary-color);
 580 |     display: inline;
 581 |     line-height: inherit;
 582 |     vertical-align: baseline;
 583 | }
 584 | 
 585 | .poster-content pre {
 586 |     background: var(--text-primary);
 587 |     color: #e2e8f0;
 588 |     padding: 16px;
 589 |     border-radius: var(--border-radius);
 590 |     margin: 16px 0;
 591 |     display: block;
 592 |     white-space: pre-wrap;
 593 |     word-wrap: break-word;
 594 |     overflow-wrap: break-word;
 595 |     word-break: break-all;
 596 | }
 597 | 
 598 | .poster-content pre code {
 599 |     background: transparent;
 600 |     color: inherit;
 601 |     padding: 0;
 602 |     display: inline;
 603 | }
 604 | 
 605 | /* 背景自定义面板 */
 606 | .background-panel {
 607 |     position: fixed;
 608 |     top: 50%;
 609 |     left: 50%;
 610 |     transform: translate(-50%, -50%);
 611 |     background: white;
 612 |     border-radius: 12px;
 613 |     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 614 |     z-index: 1000;
 615 |     max-width: 500px;
 616 |     width: 90vw;
 617 |     max-height: 80vh;
 618 |     overflow-y: auto;
 619 |     opacity: 0;
 620 |     pointer-events: none;
 621 |     transition: all 0.3s ease;
 622 | }
 623 | 
 624 | .background-panel.active {
 625 |     opacity: 1;
 626 |     pointer-events: all;
 627 | }
 628 | 
 629 | .background-panel .panel-content {
 630 |     padding: 24px;
 631 | }
 632 | 
 633 | .background-panel h3 {
 634 |     font-size: 18px;
 635 |     font-weight: 600;
 636 |     color: #1e293b;
 637 |     margin-bottom: 20px;
 638 |     display: flex;
 639 |     align-items: center;
 640 |     gap: 8px;
 641 | }
 642 | 
 643 | .setting-section {
 644 |     margin-bottom: 24px;
 645 |     padding-bottom: 20px;
 646 |     border-bottom: 1px solid #e2e8f0;
 647 | }
 648 | 
 649 | .setting-section:last-of-type {
 650 |     border-bottom: none;
 651 |     margin-bottom: 0;
 652 | }
 653 | 
 654 | .setting-section h4 {
 655 |     font-size: 16px;
 656 |     font-weight: 600;
 657 |     color: #374151;
 658 |     margin-bottom: 16px;
 659 |     display: flex;
 660 |     align-items: center;
 661 |     gap: 8px;
 662 | }
 663 | 
 664 | .slider-group {
 665 |     display: flex;
 666 |     align-items: center;
 667 |     gap: 12px;
 668 | }
 669 | 
 670 | .slider-group input[type="range"] {
 671 |     flex: 1;
 672 |     height: 6px;
 673 |     border-radius: 3px;
 674 |     background: #e2e8f0;
 675 |     outline: none;
 676 |     cursor: pointer;
 677 | }
 678 | 
 679 | .slider-group input[type="range"]::-webkit-slider-thumb {
 680 |     appearance: none;
 681 |     width: 18px;
 682 |     height: 18px;
 683 |     border-radius: 50%;
 684 |     background: #6366f1;
 685 |     cursor: pointer;
 686 |     border: 2px solid white;
 687 |     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 688 | }
 689 | 
 690 | .slider-group input[type="range"]::-moz-range-thumb {
 691 |     width: 18px;
 692 |     height: 18px;
 693 |     border-radius: 50%;
 694 |     background: #6366f1;
 695 |     cursor: pointer;
 696 |     border: 2px solid white;
 697 |     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 698 | }
 699 | 
 700 | .slider-value {
 701 |     font-size: 14px;
 702 |     color: #6366f1;
 703 |     font-weight: 500;
 704 |     min-width: 50px;
 705 |     text-align: right;
 706 | }
 707 | 
 708 | .background-options {
 709 |     display: flex;
 710 |     flex-direction: column;
 711 |     gap: 20px;
 712 | }
 713 | 
 714 | .option-group {
 715 |     display: flex;
 716 |     flex-direction: column;
 717 |     gap: 8px;
 718 | }
 719 | 
 720 | .option-group label {
 721 |     font-size: 14px;
 722 |     font-weight: 500;
 723 |     color: #374151;
 724 | }
 725 | 
 726 | .preset-backgrounds {
 727 |     display: grid;
 728 |     grid-template-columns: repeat(4, 1fr);
 729 |     gap: 12px;
 730 | }
 731 | 
 732 | .bg-preset {
 733 |     width: 60px;
 734 |     height: 40px;
 735 |     border-radius: 8px;
 736 |     cursor: pointer;
 737 |     border: 3px solid transparent;
 738 |     transition: all 0.2s ease;
 739 | }
 740 | 
 741 | .bg-preset:hover {
 742 |     transform: scale(1.05);
 743 | }
 744 | 
 745 | .bg-preset.active {
 746 |     border-color: var(--primary-color);
 747 |     transform: scale(1.05);
 748 | }
 749 | 
 750 | /* 背景预设样式 */
 751 | .bg-preset[data-bg="gradient1"] {
 752 |     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 753 | }
 754 | 
 755 | .bg-preset[data-bg="gradient2"] {
 756 |     background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
 757 | }
 758 | 
 759 | .bg-preset[data-bg="gradient3"] {
 760 |     background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
 761 | }
 762 | 
 763 | .bg-preset[data-bg="gradient4"] {
 764 |     background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
 765 | }
 766 | 
 767 | .bg-preset[data-bg="gradient5"] {
 768 |     background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
 769 | }
 770 | 
 771 | .bg-preset[data-bg="gradient6"] {
 772 |     background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
 773 | }
 774 | 
 775 | .bg-preset[data-bg="gradient7"] {
 776 |     background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
 777 | }
 778 | 
 779 | .bg-preset[data-bg="gradient8"] {
 780 |     background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
 781 | }
 782 | 
 783 | .color-inputs {
 784 |     display: flex;
 785 |     gap: 16px;
 786 | }
 787 | 
 788 | .color-input-group {
 789 |     flex: 1;
 790 |     display: flex;
 791 |     flex-direction: column;
 792 |     gap: 4px;
 793 | }
 794 | 
 795 | .color-input-group label {
 796 |     font-size: 12px;
 797 |     color: #64748b;
 798 | }
 799 | 
 800 | input[type="color"] {
 801 |     width: 100%;
 802 |     height: 40px;
 803 |     border: 1px solid #e2e8f0;
 804 |     border-radius: 8px;
 805 |     cursor: pointer;
 806 |     background: none;
 807 | }
 808 | 
 809 | select {
 810 |     padding: 8px 12px;
 811 |     border: 1px solid #e2e8f0;
 812 |     border-radius: 8px;
 813 |     font-size: 14px;
 814 |     color: #374151;
 815 |     background: white;
 816 |     cursor: pointer;
 817 | }
 818 | 
 819 | .panel-actions {
 820 |     display: flex;
 821 |     gap: 12px;
 822 |     margin-top: 24px;
 823 |     justify-content: flex-end;
 824 | }
 825 | 
 826 | /* 遮罩层 */
 827 | .overlay {
 828 |     position: fixed;
 829 |     top: 0;
 830 |     left: 0;
 831 |     right: 0;
 832 |     bottom: 0;
 833 |     background: rgba(0, 0, 0, 0.5);
 834 |     z-index: 999;
 835 |     opacity: 0;
 836 |     pointer-events: none;
 837 |     transition: opacity 0.3s ease;
 838 | }
 839 | 
 840 | .overlay.active {
 841 |     opacity: 1;
 842 |     pointer-events: all;
 843 | }
 844 | 
 845 | /* 响应式设计 */
 846 | @media (max-width: 768px) {
 847 |     .main-content {
 848 |         flex-direction: column;
 849 |     }
 850 |     
 851 |     .editor-panel,
 852 |     .preview-panel {
 853 |         height: 50vh;
 854 |     }
 855 |     
 856 |     .toolbar {
 857 |         padding: 8px 16px;
 858 |     }
 859 |     
 860 |     .toolbar-left h1 {
 861 |         font-size: 18px;
 862 |     }
 863 |     
 864 |     .subtitle {
 865 |         display: none;
 866 |     }
 867 |     
 868 |     .markdown-poster {
 869 |         width: calc(100vw - 40px);
 870 |         max-width: 640px;
 871 |         margin: 10px;
 872 |         padding: 20px;
 873 |     }
 874 |     
 875 |     .poster-content {
 876 |         padding: 20px;
 877 |     }
 878 | }
 879 | 
 880 | /* 缩放控制 */
 881 | .preview-content.zoom-75 {
 882 |     transform: scale(0.75);
 883 | }
 884 | 
 885 | .preview-content.zoom-50 {
 886 |     transform: scale(0.5);
 887 | }
 888 | 
 889 | .preview-content.zoom-125 {
 890 |     transform: scale(1.25);
 891 | }
 892 | 
 893 | .preview-content.zoom-150 {
 894 |     transform: scale(1.5);
 895 | }
 896 | 
 897 | /* 滚动条样式 */
 898 | ::-webkit-scrollbar {
 899 |     width: 8px;
 900 |     height: 8px;
 901 | }
 902 | 
 903 | ::-webkit-scrollbar-track {
 904 |     background: #f1f5f9;
 905 | }
 906 | 
 907 | ::-webkit-scrollbar-thumb {
 908 |     background: #cbd5e1;
 909 |     border-radius: 4px;
 910 | }
 911 | 
 912 | ::-webkit-scrollbar-thumb:hover {
 913 |     background: #94a3b8;
 914 | }
 915 | 
 916 | /* 动画效果 */
 917 | @keyframes fadeIn {
 918 |     from {
 919 |         opacity: 0;
 920 |         transform: translateY(10px);
 921 |     }
 922 |     to {
 923 |         opacity: 1;
 924 |         transform: translateY(0);
 925 |     }
 926 | }
 927 | 
 928 | .poster-content {
 929 |     animation: fadeIn 0.5s ease;
 930 | }
 931 | 
 932 | /* 工具提示 */
 933 | .tool-btn[title]:hover::after {
 934 |     content: attr(title);
 935 |     position: absolute;
 936 |     bottom: -30px;
 937 |     left: 50%;
 938 |     transform: translateX(-50%);
 939 |     background: #1e293b;
 940 |     color: white;
 941 |     padding: 4px 8px;
 942 |     border-radius: 4px;
 943 |     font-size: 12px;
 944 |     white-space: nowrap;
 945 |     z-index: 1000;
 946 | }
 947 | 
 948 | .tool-btn {
 949 |     position: relative;
 950 | }
 951 | 
 952 | /* GitHub 链接样式 */
 953 | .github-link {
 954 |     display: flex;
 955 |     align-items: center;
 956 |     justify-content: center;
 957 |     width: 36px;
 958 |     height: 36px;
 959 |     background: none;
 960 |     color: #24292e;
 961 |     border-radius: 50%;
 962 |     text-decoration: none;
 963 |     font-size: 18px;
 964 |     transition: all 0.2s ease;
 965 |     margin-left: 4px;
 966 | }
 967 | 
 968 | .github-link:hover {
 969 |     color: #6366f1;
 970 |     transform: scale(1.1);
 971 | }
 972 | 
 973 | .github-link i {
 974 |     color: inherit;
 975 | }
 976 | 
 977 | /* 工具分隔线样式 */
 978 | .tool-separator {
 979 |     width: 1px;
 980 |     height: 24px;
 981 |     background: var(--border-color);
 982 |     margin: 0 8px;
 983 |     flex-shrink: 0;
 984 | }
 985 | 
 986 | 
 987 | 
 988 | /* KaTeX 数学公式样式 */
 989 | .katex {
 990 |     font-size: 1.1em;
 991 | }
 992 | 
 993 | .katex-display {
 994 |     margin: 16px 0;
 995 |     text-align: center;
 996 | }
 997 | 
 998 | .katex-error {
 999 |     color: #cc0000;
1000 |     background: #ffe6e6;
1001 |     padding: 2px 4px;
1002 |     border-radius: 4px;
1003 |     font-family: monospace;
1004 | }
1005 | 
1006 | /* Mermaid 图表容器样式 */
1007 | .mermaid-diagram {
1008 |     margin: 16px 0;
1009 |     text-align: center;
1010 |     background: white;
1011 |     border-radius: 8px;
1012 |     padding: 16px;
1013 |     border: 1px solid var(--border-color);
1014 | }
1015 | 
1016 | .mermaid-diagram svg {
1017 |     max-width: 100%;
1018 |     height: auto;
1019 | }
1020 | 
1021 | .diagram-error-container {
1022 |     margin: 16px 0;
1023 |     text-align: center;
1024 | }
1025 | 
1026 | .diagram-error {
1027 |     display: inline-block;
1028 |     padding: 20px;
1029 |     border: 2px dashed #ff6b6b;
1030 |     border-radius: 8px;
1031 |     background-color: #ffe0e0;
1032 |     color: #d63031;
1033 |     font-family: monospace;
1034 | }
1035 | 
1036 | .error-title {
1037 |     font-weight: bold;
1038 |     margin-bottom: 8px;
1039 | }
1040 | 
1041 | .error-message {
1042 |     font-size: 12px;
1043 |     opacity: 0.8;
1044 | }
1045 | 
1046 | /* ECharts 容器样式 */
1047 | .echarts-container {
1048 |     margin: 16px 0;
1049 |     min-height: 400px;
1050 |     border: 1px solid var(--border-color);
1051 |     border-radius: 8px;
1052 |     overflow: hidden;
1053 | }
1054 | 
1055 | /* 卡片样式 */
1056 | .madopic-card {
1057 |     margin: 20px 0;
1058 |     padding: 20px 24px;
1059 |     background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.12) 100%);
1060 |     border: 1px solid rgba(99, 102, 241, 0.2);
1061 |     border-radius: 10px;
1062 |     box-shadow: 0 4px 20px rgba(99, 102, 241, 0.1);
1063 |     backdrop-filter: blur(10px);
1064 |     position: relative;
1065 |     overflow: hidden;
1066 |     transition: all 0.3s ease;
1067 |     display: flex;
1068 |     flex-direction: column;
1069 |     min-height: 80px;
1070 | }
1071 | 
1072 | .madopic-card:hover {
1073 |     transform: translateY(-2px);
1074 |     box-shadow: 0 8px 32px rgba(99, 102, 241, 0.15);
1075 |     border-color: rgba(99, 102, 241, 0.3);
1076 |     background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
1077 | }
1078 | 
1079 | 
1080 | 
1081 | /* 卡片标题样式 */
1082 | .madopic-card .card-title {
1083 |     font-size: 18px;
1084 |     font-weight: 700;
1085 |     color: var(--text-primary);
1086 |     margin-bottom: 16px;
1087 |     display: flex;
1088 |     align-items: center;
1089 |     gap: 10px;
1090 |     flex-shrink: 0;
1091 | }
1092 | 
1093 | .madopic-card .card-title::before {
1094 |     content: '🎯';
1095 |     font-size: 18px;
1096 | }
1097 | 
1098 | /* 卡片内容样式 */
1099 | .madopic-card .card-content {
1100 |     color: var(--text-light);
1101 |     line-height: 1.7;
1102 |     font-size: var(--dynamic-font-size, 16px);
1103 |     flex: 1;
1104 |     display: flex;
1105 |     flex-direction: column;
1106 |     justify-content: center;
1107 | }
1108 | 
1109 | .madopic-card .card-content p {
1110 |     margin-bottom: 10px;
1111 | }
1112 | 
1113 | .madopic-card .card-content p:last-child {
1114 |     margin-bottom: 0;
1115 | }
1116 | 
1117 | /* 卡片内的列表样式 */
1118 | .madopic-card .card-content ul,
1119 | .madopic-card .card-content ol {
1120 |     margin: 12px 0;
1121 |     padding-left: 20px;
1122 | }
1123 | 
1124 | .madopic-card .card-content li {
1125 |     margin-bottom: 8px;
1126 |     color: var(--text-light);
1127 | }
1128 | 
1129 | /* 卡片内的代码样式 */
1130 | .madopic-card .card-content code {
1131 |     background: rgba(99, 102, 241, 0.1);
1132 |     color: var(--primary-color);
1133 |     padding: 2px 6px;
1134 |     border-radius: 4px;
1135 |     font-family: var(--font-mono);
1136 |     font-size: calc(var(--dynamic-font-size, 16px) * 0.875);
1137 | }
1138 | 
1139 | /* 卡片内的链接样式 */
1140 | .madopic-card .card-content a {
1141 |     color: var(--primary-color);
1142 |     text-decoration: none;
1143 |     border-bottom: 1px solid transparent;
1144 |     transition: all 0.2s ease;
1145 | }
1146 | 
1147 | .madopic-card .card-content a:hover {
1148 |     border-bottom-color: var(--primary-color);
1149 | }
1150 | 
1151 | /* 不同类型的卡片样式 */
1152 | .madopic-card.card-info {
1153 |     background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(29, 78, 216, 0.12) 100%);
1154 |     border-color: rgba(59, 130, 246, 0.2);
1155 |     box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1);
1156 | }
1157 | 
1158 | .madopic-card.card-info:hover {
1159 |     background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(29, 78, 216, 0.15) 100%);
1160 |     border-color: rgba(59, 130, 246, 0.3);
1161 |     box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15);
1162 | }
1163 | 
1164 | 
1165 | 
1166 | .madopic-card.card-success {
1167 |     background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.12) 100%);
1168 |     border-color: rgba(16, 185, 129, 0.2);
1169 |     box-shadow: 0 4px 20px rgba(16, 185, 129, 0.1);
1170 | }
1171 | 
1172 | .madopic-card.card-success:hover {
1173 |     background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);
1174 |     border-color: rgba(16, 185, 129, 0.3);
1175 |     box-shadow: 0 8px 32px rgba(16, 185, 129, 0.15);
1176 | }
1177 | 
1178 | 
1179 | 
1180 | .madopic-card.card-warning {
1181 |     background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(217, 119, 6, 0.12) 100%);
1182 |     border-color: rgba(245, 158, 11, 0.2);
1183 |     box-shadow: 0 4px 20px rgba(245, 158, 11, 0.1);
1184 | }
1185 | 
1186 | .madopic-card.card-warning:hover {
1187 |     background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.15) 100%);
1188 |     border-color: rgba(245, 158, 11, 0.3);
1189 |     box-shadow: 0 8px 32px rgba(245, 158, 11, 0.15);
1190 | }
1191 | 
1192 | 
1193 | 
1194 | .madopic-card.card-error {
1195 |     background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(220, 38, 38, 0.12) 100%);
1196 |     border-color: rgba(239, 68, 68, 0.2);
1197 |     box-shadow: 0 4px 20px rgba(239, 68, 68, 0.1);
1198 | }
1199 | 
1200 | .madopic-card.card-error:hover {
1201 |     background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%);
1202 |     border-color: rgba(239, 68, 68, 0.3);
1203 |     box-shadow: 0 8px 32px rgba(239, 68, 68, 0.15);
1204 | }
1205 | 
1206 | 
1207 | 
1208 | .madopic-card.card-info .card-title::before {
1209 |     content: 'ℹ️';
1210 | }
1211 | 
1212 | .madopic-card.card-success .card-title::before {
1213 |     content: '✅';
1214 | }
1215 | 
1216 | .madopic-card.card-warning .card-title::before {
1217 |     content: '⚠️';
1218 | }
1219 | 
1220 | .madopic-card.card-error .card-title::before {
1221 |     content: '❌';
1222 | }


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
   1 | // 全局变量
   2 | let currentZoom = 100;
   3 | let currentBackground = 'gradient1';
   4 | 
   5 | // ===== 数学公式渲染器 =====
   6 | class MathRenderer {
   7 |     constructor() {
   8 |         this.isKaTeXLoaded = false;
   9 |         this.checkKaTeXAvailability();
  10 |     }
  11 | 
  12 |     checkKaTeXAvailability() {
  13 |         this.isKaTeXLoaded = typeof katex !== 'undefined' && typeof renderMathInElement !== 'undefined';
  14 |         if (!this.isKaTeXLoaded) {
  15 |             console.warn('KaTeX not loaded. Math formulas will not be rendered.');
  16 |         } else {
  17 |             // 检查mhchem扩展是否可用
  18 |             const hasMhchem = typeof katex.__defineMacro !== 'undefined' || 
  19 |                               (window.katex && window.katex.__plugins && window.katex.__plugins['mhchem']);
  20 |             if (hasMhchem) {
  21 |                 console.log('KaTeX with mhchem extension loaded successfully');
  22 |             } else {
  23 |                 console.warn('KaTeX loaded but mhchem extension may not be available');
  24 |             }
  25 |         }
  26 |     }
  27 | 
  28 |     renderMath(element) {
  29 |         if (!this.isKaTeXLoaded) {
  30 |             console.warn('KaTeX not available for math rendering');
  31 |             return;
  32 |         }
  33 | 
  34 |         try {
  35 |             renderMathInElement(element, {
  36 |                 delimiters: [
  37 |                     {left: '$$', right: '$$', display: true},
  38 |                     {left: '$', right: '$', display: false},
  39 |                     {left: '\\[', right: '\\]', display: true},
  40 |                     {left: '\\(', right: '\\)', display: false}
  41 |                 ],
  42 |                 throwOnError: false,
  43 |                 errorColor: '#cc0000',
  44 |                 strict: false,
  45 |                 trust: true,
  46 |                 macros: {
  47 |                     // 物理常量
  48 |                     '\\emc': 'E=mc^{2}',
  49 |                     '\\hbar': '\\hslash',
  50 |                     '\\kb': 'k_B',
  51 |                     '\\NA': 'N_A',
  52 |                     // 常用符号
  53 |                     '\\R': '\\mathbb{R}',
  54 |                     '\\C': '\\mathbb{C}',
  55 |                     '\\N': '\\mathbb{N}',
  56 |                     '\\Z': '\\mathbb{Z}',
  57 |                     '\\Q': '\\mathbb{Q}',
  58 |                     // 微积分
  59 |                     '\\dd': '\\mathrm{d}',
  60 |                     '\\dv': ['\\frac{\\mathrm{d}#1}{\\mathrm{d}#2}', 2],
  61 |                     '\\pdv': ['\\frac{\\partial#1}{\\partial#2}', 2],
  62 |                     // 向量
  63 |                     '\\vb': ['\\mathbf{#1}', 1],
  64 |                     '\\vu': ['\\hat{\\mathbf{#1}}', 1],
  65 |                     // 物理单位
  66 |                     '\\unit': ['\\,\\mathrm{#1}', 1]
  67 |                 },
  68 |                 fleqn: false,
  69 |                 displayMode: false
  70 |             });
  71 |         } catch (error) {
  72 |             console.error('Math rendering error:', error);
  73 |             this.showMathError(element, error.message);
  74 |         }
  75 |     }
  76 | 
  77 |     showMathError(element, errorMessage) {
  78 |         const errorElements = element.querySelectorAll('.katex-error');
  79 |         errorElements.forEach(errorEl => {
  80 |             errorEl.style.color = '#cc0000';
  81 |             errorEl.title = `Math Error: ${errorMessage}`;
  82 |         });
  83 |     }
  84 | 
  85 |     // 预处理Markdown中的数学公式
  86 |     preprocessMath(markdown) {
  87 |         // 处理质能守恒公式的特殊情况
  88 |         markdown = markdown.replace(/E\s*=\s*mc\^?2/g, '$E=mc^{2}$');
  89 |         
  90 |         // 处理其他常见物理公式
  91 |         markdown = markdown.replace(/F\s*=\s*ma/g, '$F=ma$');
  92 |         markdown = markdown.replace(/v\s*=\s*u\s*\+\s*at/g, '$v=u+at$');
  93 |         markdown = markdown.replace(/s\s*=\s*ut\s*\+\s*½at²/g, '$s=ut+\\frac{1}{2}at^{2}$');
  94 |         markdown = markdown.replace(/v²\s*=\s*u²\s*\+\s*2as/g, '$v^{2}=u^{2}+2as$');
  95 |         
  96 |         // 处理数学常量
  97 |         markdown = markdown.replace(/π/g, '$\\pi$');
  98 |         markdown = markdown.replace(/∞/g, '$\\infty$');
  99 |         markdown = markdown.replace(/±/g, '$\\pm$');
 100 |         markdown = markdown.replace(/≤/g, '$\\leq$');
 101 |         markdown = markdown.replace(/≥/g, '$\\geq$');
 102 |         markdown = markdown.replace(/≠/g, '$\\neq$');
 103 |         markdown = markdown.replace(/∈/g, '$\\in$');
 104 |         markdown = markdown.replace(/∉/g, '$\\notin$');
 105 |         markdown = markdown.replace(/⊆/g, '$\\subseteq$');
 106 |         markdown = markdown.replace(/⊇/g, '$\\supseteq$');
 107 |         markdown = markdown.replace(/∪/g, '$\\cup$');
 108 |         markdown = markdown.replace(/∩/g, '$\\cap$');
 109 |         markdown = markdown.replace(/∅/g, '$\\emptyset$');
 110 |         
 111 |         // 处理希腊字母
 112 |         markdown = markdown.replace(/α/g, '$\\alpha$');
 113 |         markdown = markdown.replace(/β/g, '$\\beta$');
 114 |         markdown = markdown.replace(/γ/g, '$\\gamma$');
 115 |         markdown = markdown.replace(/δ/g, '$\\delta$');
 116 |         markdown = markdown.replace(/ε/g, '$\\epsilon$');
 117 |         markdown = markdown.replace(/θ/g, '$\\theta$');
 118 |         markdown = markdown.replace(/λ/g, '$\\lambda$');
 119 |         markdown = markdown.replace(/μ/g, '$\\mu$');
 120 |         markdown = markdown.replace(/σ/g, '$\\sigma$');
 121 |         markdown = markdown.replace(/φ/g, '$\\phi$');
 122 |         markdown = markdown.replace(/ω/g, '$\\omega$');
 123 |         
 124 |         return markdown;
 125 |     }
 126 | }
 127 | 
 128 | // 创建全局数学渲染器实例
 129 | const mathRenderer = new MathRenderer();
 130 | 
 131 | // ===== 图表渲染器 =====
 132 | class DiagramRenderer {
 133 |     constructor() {
 134 |         this.isMermaidLoaded = false;
 135 |         this.mermaidConfig = {
 136 |             startOnLoad: false,
 137 |             theme: 'default',
 138 |             themeVariables: {
 139 |                 primaryColor: '#6366f1',
 140 |                 primaryTextColor: '#1f2937',
 141 |                 primaryBorderColor: '#4f46e5',
 142 |                 lineColor: '#6b7280',
 143 |                 secondaryColor: '#f3f4f6',
 144 |                 tertiaryColor: '#ffffff'
 145 |             },
 146 |             flowchart: {
 147 |                 useMaxWidth: true,
 148 |                 htmlLabels: true
 149 |             },
 150 |             sequence: {
 151 |                 useMaxWidth: true,
 152 |                 wrap: true
 153 |             },
 154 |             gantt: {
 155 |                 useMaxWidth: true
 156 |             }
 157 |         };
 158 |         this.checkMermaidAvailability();
 159 |     }
 160 | 
 161 |     checkMermaidAvailability() {
 162 |         this.isMermaidLoaded = typeof mermaid !== 'undefined';
 163 |         if (this.isMermaidLoaded) {
 164 |             try {
 165 |                 mermaid.initialize(this.mermaidConfig);
 166 |                 console.log('Mermaid initialized successfully');
 167 |             } catch (error) {
 168 |                 console.error('Mermaid initialization error:', error);
 169 |                 this.isMermaidLoaded = false;
 170 |             }
 171 |         } else {
 172 |             console.warn('Mermaid not loaded. Diagrams will not be rendered.');
 173 |         }
 174 |     }
 175 | 
 176 |     async renderDiagram(element, diagramCode, diagramId) {
 177 |         if (!this.isMermaidLoaded) {
 178 |             console.warn('Mermaid not available for diagram rendering');
 179 |             this.showDiagramError(element, 'Mermaid library not loaded');
 180 |             return;
 181 |         }
 182 | 
 183 |         try {
 184 |             // 清除之前的内容
 185 |             element.innerHTML = '';
 186 |             
 187 |             // 渲染图表
 188 |             const { svg } = await mermaid.render(diagramId, diagramCode);
 189 |             element.innerHTML = svg;
 190 |             
 191 |             // 添加图表容器样式
 192 |             element.classList.add('mermaid-diagram');
 193 |             
 194 |         } catch (error) {
 195 |             console.error('Diagram rendering error:', error);
 196 |             this.showDiagramError(element, error.message);
 197 |         }
 198 |     }
 199 | 
 200 |     showDiagramError(element, errorMessage) {
 201 |         element.innerHTML = `
 202 |             <div class="diagram-error">
 203 |                 <i class="fas fa-exclamation-triangle"></i>
 204 |                 <div class="error-title">图表渲染错误</div>
 205 |                 <div class="error-message">${errorMessage}</div>
 206 |             </div>
 207 |         `;
 208 |         element.classList.add('diagram-error-container');
 209 |     }
 210 | 
 211 |     // 预处理Markdown中的图表代码
 212 |     preprocessDiagram(markdown) {
 213 |         // 为每个mermaid代码块生成唯一ID
 214 |         let diagramCounter = 0;
 215 |         return markdown.replace(/```mermaid\s*\n([\s\S]*?)\n```/g, (match, code) => {
 216 |             const diagramId = `mermaid-diagram-${++diagramCounter}`;
 217 |             return `<div class="mermaid-container" data-diagram-id="${diagramId}" data-diagram-code="${encodeURIComponent(code.trim())}"></div>`;
 218 |         });
 219 |     }
 220 | 
 221 |     // 渲染页面中的所有图表
 222 |     async renderDiagrams(container) {
 223 |         if (!this.isMermaidLoaded) {
 224 |             return;
 225 |         }
 226 | 
 227 |         const diagramContainers = container.querySelectorAll('.mermaid-container');
 228 |         
 229 |         for (const diagramContainer of diagramContainers) {
 230 |             const diagramId = diagramContainer.getAttribute('data-diagram-id');
 231 |             const diagramCode = decodeURIComponent(diagramContainer.getAttribute('data-diagram-code'));
 232 |             
 233 |             if (diagramId && diagramCode) {
 234 |                 await this.renderDiagram(diagramContainer, diagramCode, diagramId);
 235 |             }
 236 |         }
 237 |     }
 238 | 
 239 |     // 设置主题
 240 |     setTheme(theme) {
 241 |         if (!this.isMermaidLoaded) {
 242 |             return;
 243 |         }
 244 | 
 245 |         this.mermaidConfig.theme = theme;
 246 |         try {
 247 |             mermaid.initialize(this.mermaidConfig);
 248 |         } catch (error) {
 249 |             console.error('Theme update error:', error);
 250 |         }
 251 |     }
 252 | }
 253 | 
 254 | // 创建全局图表渲染器实例
 255 | const diagramRenderer = new DiagramRenderer();
 256 | 
 257 | // ECharts 渲染器类
 258 | class EChartsRenderer {
 259 |     constructor() {
 260 |         this.isEChartsLoaded = false;
 261 |         this.checkEChartsAvailability();
 262 |     }
 263 | 
 264 |     checkEChartsAvailability() {
 265 |         this.isEChartsLoaded = typeof echarts !== 'undefined';
 266 |         if (!this.isEChartsLoaded) {
 267 |             console.warn('ECharts not loaded. ECharts diagrams will not be rendered.');
 268 |         }
 269 |     }
 270 | 
 271 |     async renderEChart(element, chartConfig, chartId) {
 272 |         if (!this.isEChartsLoaded) {
 273 |             console.warn('ECharts not available for chart rendering');
 274 |             this.showEChartError(element, 'ECharts library not loaded');
 275 |             return;
 276 |         }
 277 | 
 278 |         try {
 279 |             // 清除之前的内容
 280 |             element.innerHTML = '';
 281 |             
 282 |             // 创建图表容器
 283 |             const chartContainer = document.createElement('div');
 284 |             chartContainer.id = chartId;
 285 |             chartContainer.style.width = '100%';
 286 |             chartContainer.style.height = '400px';
 287 |             chartContainer.style.minHeight = '300px';
 288 |             element.appendChild(chartContainer);
 289 | 
 290 |             // 解析配置
 291 |             let config;
 292 |             if (typeof chartConfig === 'string') {
 293 |                 config = JSON.parse(chartConfig);
 294 |             } else {
 295 |                 config = chartConfig;
 296 |             }
 297 | 
 298 |             // 初始化图表
 299 |             const chart = echarts.init(chartContainer);
 300 |             chart.setOption(config);
 301 | 
 302 |             // 响应式调整
 303 |             const resizeObserver = new ResizeObserver(() => {
 304 |                 chart.resize();
 305 |             });
 306 |             resizeObserver.observe(chartContainer);
 307 | 
 308 |             // 存储图表实例以便后续操作
 309 |             chartContainer._echartsInstance = chart;
 310 |             chartContainer._resizeObserver = resizeObserver;
 311 | 
 312 |         } catch (error) {
 313 |             console.error('ECharts rendering error:', error);
 314 |             this.showEChartError(element, error.message);
 315 |         }
 316 |     }
 317 | 
 318 |     showEChartError(element, errorMessage) {
 319 |         element.innerHTML = `
 320 |             <div class="echarts-error" style="
 321 |                 padding: 20px;
 322 |                 border: 2px dashed #ff6b6b;
 323 |                 border-radius: 8px;
 324 |                 background-color: #ffe0e0;
 325 |                 color: #d63031;
 326 |                 text-align: center;
 327 |                 font-family: monospace;
 328 |             ">
 329 |                 <i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i>
 330 |                 ECharts Error: ${errorMessage}
 331 |             </div>
 332 |         `;
 333 |     }
 334 | 
 335 |     preprocessECharts(markdown) {
 336 |         // 处理 ```echarts 代码块
 337 |         return markdown.replace(/```echarts\s*\n([\s\S]*?)\n```/g, (match, code) => {
 338 |             const chartId = 'echarts-' + Math.random().toString(36).substr(2, 9);
 339 |             return `<div class="echarts-container" data-echarts-id="${chartId}" data-echarts-config="${encodeURIComponent(code.trim())}"></div>`;
 340 |         });
 341 |     }
 342 | 
 343 |     async renderECharts(container) {
 344 |         const echartsElements = container.querySelectorAll('.echarts-container');
 345 |         
 346 |         for (const element of echartsElements) {
 347 |             const chartId = element.getAttribute('data-echarts-id');
 348 |             const configData = decodeURIComponent(element.getAttribute('data-echarts-config'));
 349 |             
 350 |             await this.renderEChart(element, configData, chartId);
 351 |         }
 352 |     }
 353 | }
 354 | 
 355 | // 创建全局 ECharts 渲染器实例
 356 | const echartsRenderer = new EChartsRenderer();
 357 | 
 358 | // ===== 卡片渲染器 =====
 359 | class CardRenderer {
 360 |     constructor() {
 361 |         // 卡片渲染器不需要外部依赖
 362 |     }
 363 | 
 364 |     // 预处理Markdown中的卡片语法
 365 |     preprocessCards(markdown) {
 366 |         // 处理 :::card 语法，支持不同类型的卡片
 367 |         return markdown.replace(/:::card(?:\s+(info|success|warning|error))?\s*\n([\s\S]*?)\n:::/g, (match, type, content) => {
 368 |             const cardType = type || 'default';
 369 |             const cardId = 'card-' + Math.random().toString(36).substr(2, 9);
 370 |             return `<div class="card-container" data-card-id="${cardId}" data-card-type="${cardType}" data-card-content="${encodeURIComponent(content.trim())}"></div>`;
 371 |         });
 372 |     }
 373 | 
 374 |     // 渲染页面中的所有卡片
 375 |     async renderCards(container) {
 376 |         const cardContainers = container.querySelectorAll('.card-container');
 377 |         
 378 |         for (const cardContainer of cardContainers) {
 379 |             const cardId = cardContainer.getAttribute('data-card-id');
 380 |             const cardType = cardContainer.getAttribute('data-card-type');
 381 |             const cardContent = decodeURIComponent(cardContainer.getAttribute('data-card-content'));
 382 |             
 383 |             if (cardId && cardContent) {
 384 |                 await this.renderCard(cardContainer, cardContent, cardType);
 385 |             }
 386 |         }
 387 |     }
 388 | 
 389 |     // 渲染单个卡片
 390 |     async renderCard(element, content, type) {
 391 |         try {
 392 |             // 清除之前的内容
 393 |             element.innerHTML = '';
 394 |             
 395 |             // 解析卡片内容的Markdown
 396 |             let htmlContent = '';
 397 |             try {
 398 |                 htmlContent = marked.parse(content);
 399 |             } catch (err) {
 400 |                 console.error('卡片内容Markdown解析失败: ', err);
 401 |                 htmlContent = '<p>卡片内容解析失败</p>';
 402 |             }
 403 |             
 404 |             // 创建卡片HTML结构
 405 |             const cardHtml = `
 406 |                 <div class="madopic-card ${type !== 'default' ? 'card-' + type : ''}">
 407 |                     <div class="card-content">
 408 |                         ${htmlContent}
 409 |                     </div>
 410 |                 </div>
 411 |             `;
 412 |             
 413 |             element.innerHTML = cardHtml;
 414 |             
 415 |         } catch (error) {
 416 |             console.error('卡片渲染错误:', error);
 417 |             element.innerHTML = `
 418 |                 <div class="madopic-card">
 419 |                     <div class="card-content">
 420 |                         <p style="color: #ef4444;">卡片渲染失败：${error.message}</p>
 421 |                     </div>
 422 |                 </div>
 423 |             `;
 424 |         }
 425 |     }
 426 | }
 427 | 
 428 | // 创建全局卡片渲染器实例
 429 | const cardRenderer = new CardRenderer();
 430 | 
 431 | // ===== 导出相关常量 =====
 432 | // 控制导出清晰度的缩放倍数范围
 433 | const EXPORT_MIN_SCALE = 2;
 434 | const EXPORT_MAX_SCALE = 3;
 435 | 
 436 | function getPreferredExportScale() {
 437 |     try {
 438 |         const urlParams = new URLSearchParams(window.location.search);
 439 |         const urlScale = parseFloat(urlParams.get('scale'));
 440 |         const storedScale = parseFloat(localStorage.getItem('madopic_export_scale'));
 441 |         const base = Number.isFinite(urlScale)
 442 |             ? urlScale
 443 |             : (Number.isFinite(storedScale)
 444 |                 ? storedScale
 445 |                 : Math.max(2, window.devicePixelRatio || 1));
 446 |         return Math.min(EXPORT_MAX_SCALE, Math.max(EXPORT_MIN_SCALE, base));
 447 |     } catch (_) {
 448 |         return Math.max(EXPORT_MIN_SCALE, Math.min(EXPORT_MAX_SCALE, 2));
 449 |     }
 450 | }
 451 | 
 452 | const EXPORT_SCALE = getPreferredExportScale();
 453 | 
 454 | // 预设背景渐变
 455 | const backgroundPresets = {
 456 |     gradient1: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
 457 |     gradient2: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
 458 |     gradient3: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
 459 |     gradient4: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
 460 |     gradient5: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
 461 |     gradient6: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
 462 |     gradient7: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
 463 |     gradient8: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)'
 464 | };
 465 | 
 466 | // DOM 元素
 467 | const markdownInput = document.getElementById('markdownInput');
 468 | const lineNumbersEl = document.querySelector('.line-numbers');
 469 | const posterContent = document.getElementById('posterContent');
 470 | const markdownPoster = document.getElementById('markdownPoster');
 471 | const previewContent = document.getElementById('previewContent');
 472 | const backgroundPanel = document.getElementById('backgroundPanel');
 473 | const layoutPanel = document.getElementById('layoutPanel');
 474 | const overlay = document.getElementById('overlay');
 475 | const zoomLevel = document.querySelector('.zoom-level');
 476 | 
 477 | // 新增设置变量
 478 | let currentFontSize = 18;
 479 | let currentPadding = 40;
 480 | let currentWidth = 640;
 481 | let currentMode = 'free'; // 'free' | 'xhs' | 'pyq'
 482 | let fixedHeights = { xhs: null, pyq: null }; // 等待用户提供后设置
 483 | 
 484 | // 图片数据存储
 485 | const imageDataStore = new Map();
 486 | 
 487 | // 预览渲染状态
 488 | let hasInitialPreviewRendered = false;
 489 | let lastRenderedMarkdown = '';
 490 | 
 491 | // 初始化应用
 492 | document.addEventListener('DOMContentLoaded', function() {
 493 |     initializeApp();
 494 |     setupEventListeners();
 495 |     updatePreview();
 496 | });
 497 | 
 498 | // 初始化应用
 499 | function initializeApp() {
 500 |     // 配置 marked 选项
 501 |     marked.setOptions({
 502 |         breaks: true,
 503 |         gfm: true,
 504 |         sanitize: false,
 505 |         highlight: function(code, lang) {
 506 |             return code;
 507 |         }
 508 |     });
 509 |     
 510 |     // 设置初始背景
 511 |     applyBackground(backgroundPresets[currentBackground]);
 512 |     
 513 |     // 应用初始设置
 514 |     applyFontSize(currentFontSize);
 515 |     applyPadding(currentPadding);
 516 |     applyWidth(currentWidth);
 517 |     
 518 |     // 初始化图表渲染器主题
 519 |     diagramRenderer.setTheme('default');
 520 |     
 521 |     // 更新缩放显示
 522 |     updateZoomDisplay();
 523 | 
 524 |     // 初始化行号
 525 |     updateLineNumbers();
 526 | }
 527 | 
 528 | // 设置事件监听器
 529 | function setupEventListeners() {
 530 |     // Markdown 输入监听
 531 |     // 更平滑的输入预览：稍延长防抖并在输入结束时仅渲染一次
 532 |     markdownInput.addEventListener('input', debounce(updatePreview, 250));
 533 |     markdownInput.addEventListener('input', updateLineNumbers);
 534 |     markdownInput.addEventListener('scroll', syncLineNumbersScroll);
 535 |     
 536 |     // 工具栏按钮
 537 |     setupToolbarButtons();
 538 |     
 539 |     // 缩放控制
 540 |     document.getElementById('zoomIn').addEventListener('click', zoomIn);
 541 |     document.getElementById('zoomOut').addEventListener('click', zoomOut);
 542 |     
 543 |     // 背景设置面板
 544 |     document.getElementById('backgroundBtn').addEventListener('click', openBackgroundPanel);
 545 |     document.getElementById('cancelBackground').addEventListener('click', closeBackgroundPanel);
 546 |     document.getElementById('applyBackground').addEventListener('click', applyBackgroundSettings);
 547 |     
 548 |     // 文字布局设置面板
 549 |     document.getElementById('layoutBtn').addEventListener('click', openLayoutPanel);
 550 |     document.getElementById('cancelLayout').addEventListener('click', closeLayoutPanel);
 551 |     document.getElementById('applyLayout').addEventListener('click', applyLayoutSettings);
 552 |     
 553 |     overlay.addEventListener('click', closeAllPanels);
 554 | 
 555 |     // 滑块事件监听
 556 |     setupSliders();
 557 |     
 558 |     // 导出功能
 559 |     setupExportButtons();
 560 |     setupModeButtons();
 561 |     
 562 |     // 背景预设选择
 563 |     setupBackgroundPresets();
 564 |     
 565 |     // 自定义颜色输入
 566 |     setupColorInputs();
 567 |     
 568 |     // 图片处理
 569 |     setupImageHandlers();
 570 |     
 571 |     // 键盘快捷键
 572 |     setupKeyboardShortcuts();
 573 | }
 574 | 
 575 | // 设置导出按钮事件
 576 | function setupExportButtons() {
 577 |     const exportPngBtn = document.getElementById('exportPngBtn');
 578 |     const exportPdfBtn = document.getElementById('exportPdfBtn');
 579 |     const exportHtmlBtn = document.getElementById('exportHtmlBtn');
 580 | 
 581 |     if (exportPngBtn) {
 582 |         exportPngBtn.addEventListener('click', exportToPNG);
 583 |     }
 584 | 
 585 |     if (exportPdfBtn) {
 586 |         exportPdfBtn.addEventListener('click', exportToPDF);
 587 |     }
 588 | 
 589 |     if (exportHtmlBtn) {
 590 |         exportHtmlBtn.addEventListener('click', exportToHTML);
 591 |     }
 592 | }
 593 | 
 594 | // 模式按钮绑定
 595 | function setupModeButtons() {
 596 |     const group = document.getElementById('modeGroup');
 597 |     if (!group) return;
 598 |     group.querySelectorAll('button[data-mode]').forEach(btn => {
 599 |         btn.addEventListener('click', () => {
 600 |             const mode = btn.getAttribute('data-mode');
 601 |             setMode(mode);
 602 |         });
 603 |     });
 604 | }
 605 | 
 606 | function setMode(mode) {
 607 |     if (!['free', 'xhs', 'pyq'].includes(mode)) return;
 608 |     currentMode = mode;
 609 |     // 切换按钮激活态
 610 |     const group = document.getElementById('modeGroup');
 611 |     if (group) {
 612 |         group.querySelectorAll('button[data-mode]').forEach(btn => {
 613 |             btn.classList.toggle('active', btn.getAttribute('data-mode') === mode);
 614 |         });
 615 |     }
 616 |     // 预览区域视觉反馈（仅预览容器外层，不改导出逻辑）
 617 |     applyPreviewModeFrame();
 618 | }
 619 | 
 620 | function applyPreviewModeFrame() {
 621 |     // 预览时根据模式设置固定可视高度（以外层 markdownPoster 的 box 包含 padding 与内容）
 622 |     markdownPoster.dataset.mode = currentMode;
 623 |     if (currentMode === 'xhs') {
 624 |         // 3:4（宽:高） => 高度 = 宽度 / 3 * 4。由于 width 是含 padding 的可视宽度，这里与导出一致
 625 |         const rect = markdownPoster.getBoundingClientRect();
 626 |         const targetHeight = Math.round((rect.width / 3) * 4);
 627 |         markdownPoster.style.height = `${targetHeight}px`;
 628 |         markdownPoster.style.minHeight = `${targetHeight}px`;
 629 |         markdownPoster.style.overflow = 'hidden'; // 超出裁掉
 630 | 
 631 |         // 计算可用给白卡片（posterContent）的最大高度，保留上下紫色 padding
 632 |         const mpComputed = getComputedStyle(markdownPoster);
 633 |         const paddingTop = parseFloat(mpComputed.paddingTop) || 0;
 634 |         const paddingBottom = parseFloat(mpComputed.paddingBottom) || 0;
 635 |         const innerMax = Math.max(0, targetHeight - paddingTop - paddingBottom);
 636 |         posterContent.style.maxHeight = `${innerMax}px`;
 637 |         posterContent.style.overflow = 'hidden';
 638 |     } else if (currentMode === 'pyq') {
 639 |         // 朋友圈固定比例：1290x2796 ≈ 宽:高 = 1290:2796。
 640 |         // 在保持当前外层宽度不变的前提下，按该比例计算高度。
 641 |         const rect = markdownPoster.getBoundingClientRect();
 642 |         const targetHeight = Math.round(rect.width * (2796 / 1290));
 643 |         markdownPoster.style.height = `${targetHeight}px`;
 644 |         markdownPoster.style.minHeight = `${targetHeight}px`;
 645 |         markdownPoster.style.overflow = 'hidden';
 646 | 
 647 |         const mpComputed = getComputedStyle(markdownPoster);
 648 |         const paddingTop = parseFloat(mpComputed.paddingTop) || 0;
 649 |         const paddingBottom = parseFloat(mpComputed.paddingBottom) || 0;
 650 |         const innerMax = Math.max(0, targetHeight - paddingTop - paddingBottom);
 651 |         posterContent.style.maxHeight = `${innerMax}px`;
 652 |         posterContent.style.overflow = 'hidden';
 653 |     } else {
 654 |         markdownPoster.style.height = '';
 655 |         markdownPoster.style.minHeight = '600px';
 656 |         markdownPoster.style.overflow = 'hidden';
 657 |         posterContent.style.maxHeight = '';
 658 |         posterContent.style.overflow = '';
 659 |     }
 660 | }
 661 | 
 662 | // 设置工具栏按钮
 663 | function setupToolbarButtons() {
 664 |     document.querySelectorAll('[data-action]').forEach(button => {
 665 |         button.addEventListener('click', function() {
 666 |             const action = this.getAttribute('data-action');
 667 |             handleToolbarAction(action);
 668 |         });
 669 |     });
 670 | }
 671 | 
 672 | // 处理工具栏动作
 673 | function handleToolbarAction(action) {
 674 |     const textarea = markdownInput;
 675 |     const start = textarea.selectionStart;
 676 |     const end = textarea.selectionEnd;
 677 |     const selectedText = textarea.value.substring(start, end);
 678 |     const beforeText = textarea.value.substring(0, start);
 679 |     const afterText = textarea.value.substring(end);
 680 |     
 681 |     let insertText = '';
 682 |     let cursorPos = start;
 683 |     
 684 |     switch(action) {
 685 |         case 'bold':
 686 |             insertText = `**${selectedText || '粗体文本'}**`;
 687 |             cursorPos = start + (selectedText ? insertText.length : 2);
 688 |             break;
 689 |         case 'italic':
 690 |             insertText = `*${selectedText || '斜体文本'}*`;
 691 |             cursorPos = start + (selectedText ? insertText.length : 1);
 692 |             break;
 693 |         case 'heading':
 694 |             insertText = `## ${selectedText || '标题'}`;
 695 |             cursorPos = start + (selectedText ? insertText.length : 3);
 696 |             break;
 697 |         case 'list':
 698 |             insertText = `\n- ${selectedText || '列表项'}`;
 699 |             cursorPos = start + (selectedText ? insertText.length : 3);
 700 |             break;
 701 |         case 'link':
 702 |             insertText = `[${selectedText || '链接文本'}](https://example.com)`;
 703 |             cursorPos = start + (selectedText ? insertText.length : 1);
 704 |             break;
 705 |         case 'image':
 706 |             insertImage();
 707 |             return;
 708 |         case 'flowchart':
 709 |             MarkdownHelper.insertFlowchart();
 710 |             return;
 711 |         case 'sequence':
 712 |             MarkdownHelper.insertSequenceDiagram();
 713 |             return;
 714 |         case 'gantt':
 715 |             MarkdownHelper.insertGanttChart();
 716 |             return;
 717 |         case 'pie':
 718 |             MarkdownHelper.insertPieChart();
 719 |             return;
 720 |         case 'math':
 721 |             MarkdownHelper.insertMathFormulas();
 722 |             return;
 723 |         case 'physics':
 724 |             MarkdownHelper.insertPhysicsFormulas();
 725 |             return;
 726 |         case 'chemistry':
 727 |             MarkdownHelper.insertChemistryFormulas();
 728 |             return;
 729 |         case 'echarts':
 730 |             MarkdownHelper.insertEChartsTemplate();
 731 |             return;
 732 |         case 'einstein':
 733 |             MarkdownHelper.insertEinsteinFormula();
 734 |             return;
 735 |         case 'card':
 736 |             MarkdownHelper.insertCard();
 737 |             return;
 738 |         case 'empty-line':
 739 |             // 插入可在预览中可见的"Markdown 空行"占位段落
 740 |             insertText = `\n\n<p class="md-empty-line">&nbsp;</p>\n\n`;
 741 |             cursorPos = start + insertText.length;
 742 |             break;
 743 |         case 'clear':
 744 |             textarea.value = '';
 745 |             updatePreview();
 746 |             textarea.focus();
 747 |             return;
 748 |     }
 749 |     
 750 |     textarea.value = beforeText + insertText + afterText;
 751 |     textarea.setSelectionRange(cursorPos, cursorPos);
 752 |     textarea.focus();
 753 |     updatePreview();
 754 | }
 755 | 
 756 | // 更新预览
 757 | async function updatePreview() {
 758 |     const markdownText = markdownInput.value.trim();
 759 |     // 同步行号（在去抖预览之外也保证立即更新）
 760 |     updateLineNumbers();
 761 |     
 762 |     // 检查是否为空内容
 763 |     if (!markdownText) {
 764 |         showEmptyPreview();
 765 |         return;
 766 |     }
 767 |     
 768 |     // 预处理数学公式
 769 |     let processedMarkdown = mathRenderer.preprocessMath(markdownText);
 770 |     
 771 |     // 预处理图表
 772 |     processedMarkdown = diagramRenderer.preprocessDiagram(processedMarkdown);
 773 |     
 774 |     // 预处理 ECharts 图表
 775 |     processedMarkdown = echartsRenderer.preprocessECharts(processedMarkdown);
 776 |     
 777 |     // 预处理卡片
 778 |     processedMarkdown = cardRenderer.preprocessCards(processedMarkdown);
 779 |     
 780 |     // 替换简化的base64为完整版本进行预览
 781 |     processedMarkdown = replaceImageDataForPreview(processedMarkdown);
 782 |     
 783 |     // 仅在已完成至少一次渲染后，且内容确实未变化时跳过
 784 |     if (hasInitialPreviewRendered && processedMarkdown === lastRenderedMarkdown) {
 785 |         return;
 786 |     }
 787 |     lastRenderedMarkdown = processedMarkdown;
 788 | 
 789 |     let htmlContent = '';
 790 |     try {
 791 |         htmlContent = marked.parse(processedMarkdown);
 792 |     } catch (err) {
 793 |         console.error('Markdown 渲染失败: ', err);
 794 |         htmlContent = '<p style="color:#ef4444">渲染失败，请检查 Markdown 内容。</p>';
 795 |     }
 796 |     posterContent.innerHTML = htmlContent;
 797 |     
 798 |     // 渲染数学公式
 799 |     mathRenderer.renderMath(posterContent);
 800 |     
 801 |     // 渲染图表
 802 |     await diagramRenderer.renderDiagrams(posterContent);
 803 |     
 804 |     // 渲染 ECharts 图表
 805 |     await echartsRenderer.renderECharts(posterContent);
 806 |     
 807 |     // 渲染卡片
 808 |     await cardRenderer.renderCards(posterContent);
 809 |     
 810 |     // 确保内容容器可见
 811 |     posterContent.style.display = 'block';
 812 |     
 813 |     // 重新应用当前的字体大小设置
 814 |     applyFontSize(currentFontSize);
 815 |     
 816 |     // 仅首次渲染使用淡入动画，后续输入不再触发，避免屏闪
 817 |     if (!hasInitialPreviewRendered) {
 818 |         posterContent.style.animation = 'fadeIn 0.3s ease';
 819 |         hasInitialPreviewRendered = true;
 820 |     } else {
 821 |         posterContent.style.animation = '';
 822 |     }
 823 | }
 824 | 
 825 | // ===== 行号逻辑 =====
 826 | function updateLineNumbers() {
 827 |     if (!lineNumbersEl) return;
 828 |     const value = markdownInput.value || '';
 829 |     const lines = value.split('\n').length;
 830 |     // 构造包含行号的内容（使用换行分隔）
 831 |     let content = '';
 832 |     for (let i = 1; i <= lines; i++) {
 833 |         content += (i === 1 ? '' : '\n') + i;
 834 |     }
 835 |     lineNumbersEl.textContent = content || '1';
 836 |     // 高度同步
 837 |     lineNumbersEl.style.height = markdownInput.scrollHeight + 'px';
 838 |     syncLineNumbersScroll();
 839 | }
 840 | 
 841 | function syncLineNumbersScroll() {
 842 |     if (!lineNumbersEl) return;
 843 |     lineNumbersEl.scrollTop = markdownInput.scrollTop;
 844 | }
 845 | 
 846 | // 显示空内容提示
 847 | function showEmptyPreview() {
 848 |     posterContent.innerHTML = `
 849 |         <div class="empty-preview">
 850 |             <div class="empty-icon">
 851 |                 <i class="fab fa-markdown"></i>
 852 |             </div>
 853 |             <h3>开始创作吧！</h3>
 854 |             <p>在左侧编辑器中输入 Markdown 内容</p>
 855 |             <div class="empty-tips">
 856 |                 <div class="tip-item">
 857 |                     <i class="fas fa-lightbulb"></i>
 858 |                     <span>支持标题、列表、链接、图片等格式</span>
 859 |                 </div>
 860 |                 <div class="tip-item">
 861 |                     <i class="fas fa-keyboard"></i>
 862 |                     <span>使用工具栏快捷按钮快速插入格式</span>
 863 |                 </div>
 864 |                 <div class="tip-item">
 865 |                     <i class="fas fa-palette"></i>
 866 |                     <span>点击"自定义"按钮调整背景和样式</span>
 867 |                 </div>
 868 |             </div>
 869 |         </div>
 870 |     `;
 871 |     hasInitialPreviewRendered = false;
 872 | }
 873 | 
 874 | // 为图片元素设置跨域与防盗链相关属性
 875 | function applyImageAttributes(root) {
 876 |     const imgs = root.querySelectorAll('img');
 877 |     imgs.forEach((img) => {
 878 |         try {
 879 |             if (!img.getAttribute('crossorigin')) {
 880 |                 img.setAttribute('crossorigin', 'anonymous');
 881 |             }
 882 |             if (!img.getAttribute('referrerpolicy')) {
 883 |                 img.setAttribute('referrerpolicy', 'no-referrer');
 884 |             }
 885 |             if (!img.getAttribute('decoding')) {
 886 |                 img.setAttribute('decoding', 'sync');
 887 |             }
 888 |             if (!img.getAttribute('loading')) {
 889 |                 img.setAttribute('loading', 'eager');
 890 |             }
 891 |         } catch (_) {
 892 |             // 忽略单个图片设置失败
 893 |         }
 894 |     });
 895 | }
 896 | 
 897 | // 缩放控制
 898 | function zoomIn() {
 899 |     if (currentZoom < 150) {
 900 |         currentZoom += 25;
 901 |         applyZoom();
 902 |     }
 903 | }
 904 | 
 905 | function zoomOut() {
 906 |     if (currentZoom > 50) {
 907 |         currentZoom -= 25;
 908 |         applyZoom();
 909 |     }
 910 | }
 911 | 
 912 | function applyZoom() {
 913 |     previewContent.className = 'preview-content';
 914 |     if (currentZoom !== 100) {
 915 |         previewContent.classList.add(`zoom-${currentZoom}`);
 916 |     }
 917 |     updateZoomDisplay();
 918 | }
 919 | 
 920 | function updateZoomDisplay() {
 921 |     zoomLevel.textContent = `${currentZoom}%`;
 922 | }
 923 | 
 924 | // 背景设置面板
 925 | function openBackgroundPanel() {
 926 |     backgroundPanel.classList.add('active');
 927 |     overlay.classList.add('active');
 928 |     document.body.style.overflow = 'hidden';
 929 | }
 930 | 
 931 | function closeBackgroundPanel() {
 932 |     backgroundPanel.classList.remove('active');
 933 |     overlay.classList.remove('active');
 934 |     document.body.style.overflow = '';
 935 | }
 936 | 
 937 | // 文字布局设置面板
 938 | function openLayoutPanel() {
 939 |     layoutPanel.classList.add('active');
 940 |     overlay.classList.add('active');
 941 |     document.body.style.overflow = 'hidden';
 942 | }
 943 | 
 944 | function closeLayoutPanel() {
 945 |     layoutPanel.classList.remove('active');
 946 |     overlay.classList.remove('active');
 947 |     document.body.style.overflow = '';
 948 | }
 949 | 
 950 | // 关闭所有面板
 951 | function closeAllPanels() {
 952 |     backgroundPanel.classList.remove('active');
 953 |     layoutPanel.classList.remove('active');
 954 |     overlay.classList.remove('active');
 955 |     document.body.style.overflow = '';
 956 | }
 957 | 
 958 | function setupBackgroundPresets() {
 959 |     document.querySelectorAll('.bg-preset').forEach(preset => {
 960 |         preset.addEventListener('click', function() {
 961 |             // 移除其他选中状态
 962 |             document.querySelectorAll('.bg-preset').forEach(p => p.classList.remove('active'));
 963 |             // 添加选中状态
 964 |             this.classList.add('active');
 965 |             currentBackground = this.getAttribute('data-bg');
 966 |         });
 967 |     });
 968 | }
 969 | 
 970 | function setupColorInputs() {
 971 |     const colorStart = document.getElementById('colorStart');
 972 |     const colorEnd = document.getElementById('colorEnd');
 973 |     const gradientDirection = document.getElementById('gradientDirection');
 974 |     
 975 |     [colorStart, colorEnd, gradientDirection].forEach(input => {
 976 |         input.addEventListener('change', function() {
 977 |             // 取消预设选择
 978 |             document.querySelectorAll('.bg-preset').forEach(p => p.classList.remove('active'));
 979 |             currentBackground = 'custom';
 980 |         });
 981 |     });
 982 | }
 983 | 
 984 | function applyBackgroundSettings() {
 985 |     // 应用背景设置
 986 |     let backgroundCSS;
 987 |     if (currentBackground === 'custom') {
 988 |         const colorStart = document.getElementById('colorStart').value;
 989 |         const colorEnd = document.getElementById('colorEnd').value;
 990 |         const direction = document.getElementById('gradientDirection').value;
 991 |         backgroundCSS = `linear-gradient(${direction}, ${colorStart} 0%, ${colorEnd} 100%)`;
 992 |     } else {
 993 |         backgroundCSS = backgroundPresets[currentBackground];
 994 |     }
 995 |     applyBackground(backgroundCSS);
 996 |     
 997 |     closeBackgroundPanel();
 998 |     
 999 |     // 显示成功提示
1000 |     showNotification('背景设置已更新！', 'success');
1001 | }
1002 | 
1003 | function applyLayoutSettings() {
1004 |     // 应用字体大小设置
1005 |     currentFontSize = parseFloat(document.getElementById('fontSizeSlider').value);
1006 |     applyFontSize(currentFontSize);
1007 |     
1008 |     // 应用边距设置
1009 |     currentPadding = parseFloat(document.getElementById('paddingSlider').value);
1010 |     applyPadding(currentPadding);
1011 |     
1012 |     // 应用宽度设置
1013 |     currentWidth = parseInt(document.getElementById('widthSlider').value);
1014 |     applyWidth(currentWidth);
1015 |     
1016 |     closeLayoutPanel();
1017 |     
1018 |     // 显示成功提示
1019 |     showNotification('文字布局设置已更新！', 'success');
1020 | }
1021 | 
1022 | function applyBackground(backgroundCSS) {
1023 |     markdownPoster.style.background = backgroundCSS;
1024 | }
1025 | 
1026 | function applyFontSize(fontSize) {
1027 |     // 使用CSS变量统一管理字体大小，避免大量DOM操作
1028 |     posterContent.style.setProperty('--dynamic-font-size', `${fontSize}px`);
1029 |     posterContent.style.setProperty('--dynamic-h1-size', `${Math.round(fontSize * 1.75)}px`);
1030 |     posterContent.style.setProperty('--dynamic-h2-size', `${Math.round(fontSize * 1.375)}px`);
1031 |     posterContent.style.setProperty('--dynamic-h3-size', `${Math.round(fontSize * 1.125)}px`);
1032 |     posterContent.style.setProperty('--dynamic-h4-size', `${Math.round(fontSize * 1.05)}px`);
1033 |     posterContent.style.setProperty('--dynamic-h5-h6-size', `${Math.round(fontSize * 0.95)}px`);
1034 |     posterContent.style.setProperty('--dynamic-code-size', `${Math.round(fontSize * 0.875)}px`);
1035 |     posterContent.style.setProperty('--dynamic-quote-size', `${Math.round(fontSize * 0.95)}px`);
1036 | }
1037 | 
1038 | function applyPadding(padding) {
1039 |     // 调整外层容器的内边距，即图片中红色箭头指向的边距
1040 |     markdownPoster.style.padding = `${padding}px`;
1041 | }
1042 | 
1043 | function applyWidth(width) {
1044 |     // 调整预览区的整体宽度（导出图片的宽度）
1045 |     markdownPoster.style.width = `${width}px`;
1046 | }
1047 | 
1048 | function setupSliders() {
1049 |     const fontSizeSlider = document.getElementById('fontSizeSlider');
1050 |     const fontSizeValue = document.getElementById('fontSizeValue');
1051 |     const paddingSlider = document.getElementById('paddingSlider');
1052 |     const paddingValue = document.getElementById('paddingValue');
1053 |     const widthSlider = document.getElementById('widthSlider');
1054 |     const widthValue = document.getElementById('widthValue');
1055 |     
1056 |     // 字体大小滑块
1057 |     fontSizeSlider.addEventListener('input', function() {
1058 |         const value = parseFloat(this.value);
1059 |         fontSizeValue.textContent = `${value}px`;
1060 |         // 实时预览
1061 |         applyFontSize(value);
1062 |     });
1063 |     
1064 |     // 边距滑块
1065 |     paddingSlider.addEventListener('input', function() {
1066 |         const value = parseFloat(this.value);
1067 |         paddingValue.textContent = `${value}px`;
1068 |         // 实时预览
1069 |         applyPadding(value);
1070 |     });
1071 |     
1072 |     // 宽度滑块
1073 |     widthSlider.addEventListener('input', function() {
1074 |         const value = this.value;
1075 |         widthValue.textContent = `${value}px`;
1076 |         // 实时预览
1077 |         applyWidth(parseInt(value));
1078 |     });
1079 |     
1080 |     // 初始化滑块值显示
1081 |     fontSizeValue.textContent = `${fontSizeSlider.value}px`;
1082 |     paddingValue.textContent = `${paddingSlider.value}px`;
1083 |     widthValue.textContent = `${widthSlider.value}px`;
1084 | }
1085 | 
1086 | 
1087 | // ===== 导出相关工具 =====
1088 | /**
1089 |  * 创建一个与预览完全一致的离屏克隆节点用于导出。
1090 |  * 关键点：同步计算样式与实际渲染宽度，并统一为 border-box，避免行宽与换行偏差。
1091 |  * 返回被追加到 body 的节点，调用方负责移除。
1092 |  */
1093 | async function createExactExportNode() {
1094 |     const clone = markdownPoster.cloneNode(true);
1095 |     clone.id = 'madopic-export-poster';
1096 |     const mpComputed = getComputedStyle(markdownPoster);
1097 |     Object.assign(clone.style, {
1098 |         position: 'fixed',
1099 |         top: '-9999px',
1100 |         left: '-9999px',
1101 |         margin: '0',
1102 |         width: `${markdownPoster.getBoundingClientRect().width}px`,
1103 |         padding: mpComputed.padding,
1104 |         boxSizing: 'border-box',
1105 |         background: markdownPoster.style.background || mpComputed.background,
1106 |         transform: 'none'
1107 |     });
1108 |     // 移除内部动画/滤镜但不改变布局
1109 |     const inner = clone.querySelector('.poster-content');
1110 |     if (inner) {
1111 |         const pcComputed = getComputedStyle(posterContent);
1112 |         inner.style.animation = 'none';
1113 |         inner.style.width = `${posterContent.getBoundingClientRect().width}px`;
1114 |         inner.style.padding = pcComputed.padding;
1115 |         inner.style.boxSizing = 'border-box';
1116 |         inner.style.backdropFilter = pcComputed.backdropFilter || 'none';
1117 |         inner.style.webkitBackdropFilter = pcComputed.webkitBackdropFilter || 'none';
1118 |     }
1119 |     // 固定高度模式：小红书 3:4。导出时必须与预览一致，且裁掉超出部分
1120 |     if (currentMode === 'xhs') {
1121 |         const rect = markdownPoster.getBoundingClientRect();
1122 |         const target = Math.round((rect.width / 3) * 4);
1123 |         clone.style.height = `${target}px`;
1124 |         clone.style.minHeight = `${target}px`;
1125 |         clone.style.overflow = 'hidden';
1126 | 
1127 |         // 同步内部白卡片最大高度，保留上下紫色 padding 作为边距
1128 |         const mpComputed = getComputedStyle(markdownPoster);
1129 |         const paddingTop = parseFloat(mpComputed.paddingTop) || 0;
1130 |         const paddingBottom = parseFloat(mpComputed.paddingBottom) || 0;
1131 |         const innerMax = Math.max(0, target - paddingTop - paddingBottom);
1132 |         const inner = clone.querySelector('.poster-content');
1133 |         if (inner) {
1134 |             inner.style.maxHeight = `${innerMax}px`;
1135 |             inner.style.overflow = 'hidden';
1136 |         }
1137 |     } else if (currentMode === 'pyq') {
1138 |         const rect = markdownPoster.getBoundingClientRect();
1139 |         const target = Math.round(rect.width * (2796 / 1290));
1140 |         clone.style.height = `${target}px`;
1141 |         clone.style.minHeight = `${target}px`;
1142 |         clone.style.overflow = 'hidden';
1143 | 
1144 |         const mpComputed = getComputedStyle(markdownPoster);
1145 |         const paddingTop = parseFloat(mpComputed.paddingTop) || 0;
1146 |         const paddingBottom = parseFloat(mpComputed.paddingBottom) || 0;
1147 |         const innerMax = Math.max(0, target - paddingTop - paddingBottom);
1148 |         const inner = clone.querySelector('.poster-content');
1149 |         if (inner) {
1150 |             inner.style.maxHeight = `${innerMax}px`;
1151 |             inner.style.overflow = 'hidden';
1152 |         }
1153 |     }
1154 |     document.body.appendChild(clone);
1155 |     
1156 |     // 为导出节点重新渲染数学公式
1157 |     const cloneContent = clone.querySelector('.poster-content');
1158 |     if (cloneContent) {
1159 |         mathRenderer.renderMath(cloneContent);
1160 |         
1161 |         // 为导出节点的Mermaid图表生成新的唯一ID，避免与原始预览区冲突
1162 |         const mermaidContainers = cloneContent.querySelectorAll('.mermaid-container');
1163 |         mermaidContainers.forEach((container, index) => {
1164 |             const timestamp = Date.now();
1165 |             const newId = `export-mermaid-${timestamp}-${index}`;
1166 |             container.setAttribute('data-diagram-id', newId);
1167 |         });
1168 |         
1169 |         // 为导出节点重新渲染图表
1170 |         await diagramRenderer.renderDiagrams(cloneContent);
1171 |         
1172 |         // 为导出节点重新渲染ECharts图表
1173 |         await echartsRenderer.renderECharts(cloneContent);
1174 |         
1175 |         // 为导出节点重新渲染卡片
1176 |         await cardRenderer.renderCards(cloneContent);
1177 |         
1178 |         // 额外等待确保所有渲染完成
1179 |         await new Promise(resolve => setTimeout(resolve, 500));
1180 |         
1181 |         // 再等待一帧确保DOM更新完成
1182 |         await new Promise(resolve => requestAnimationFrame(resolve));
1183 |     }
1184 |     
1185 |     return clone;
1186 | }
1187 | 
1188 | /**
1189 |  * 确保导出节点中的所有图片都可被 html2canvas 捕获。
1190 |  * 做法：为每个 <img> 设置 crossorigin/referrerpolicy，并强制等待加载完毕。
1191 |  */
1192 | async function prepareImagesForExport(root) {
1193 |     const images = Array.from(root.querySelectorAll('img'));
1194 |     const loadPromises = images.map((img) => new Promise((resolve) => {
1195 |         try {
1196 |             // 仅导出阶段设置跨域与防盗链（避免影响预览）
1197 |             img.setAttribute('crossorigin', 'anonymous');
1198 |             img.setAttribute('referrerpolicy', 'no-referrer');
1199 |             // 若已完成加载则直接 resolve
1200 |             if (img.complete && img.naturalWidth > 0) return resolve();
1201 |             // 监听加载/失败
1202 |             const clean = () => {
1203 |                 img.removeEventListener('load', onLoad);
1204 |                 img.removeEventListener('error', onError);
1205 |             };
1206 |             const onLoad = () => { clean(); resolve(); };
1207 |             const onError = () => {
1208 |                 clean();
1209 |                 // 第一次失败，尝试代理加速/绕过 CORS 防盗链
1210 |                 tryProxyImage(img).finally(resolve);
1211 |             };
1212 |             img.addEventListener('load', onLoad, { once: true });
1213 |             img.addEventListener('error', onError, { once: true });
1214 |             // 触发重新加载（给 src 加一个无副作用查询串）。
1215 |             // 对 data: 协议不处理；对 blob: 协议尝试转成 dataURL（html2canvas 不抓取跨上下文 blob）
1216 |             try {
1217 |                 if (img.src.startsWith('data:')) {
1218 |                     // 已是 dataURL，无需处理
1219 |                 } else if (img.src.startsWith('blob:')) {
1220 |                     // 尝试将 blob 读取为 dataURL
1221 |                     const xhr = new XMLHttpRequest();
1222 |                     xhr.open('GET', img.src, true);
1223 |                     xhr.responseType = 'blob';
1224 |                     xhr.onload = () => {
1225 |                         try {
1226 |                             const reader = new FileReader();
1227 |                             reader.onload = () => { img.src = reader.result; };
1228 |                             reader.onerror = () => {};
1229 |                             reader.readAsDataURL(xhr.response);
1230 |                         } catch (_) {}
1231 |                     };
1232 |                     xhr.onerror = () => {};
1233 |                     xhr.send();
1234 |                 } else {
1235 |                     const url = new URL(img.src, window.location.href);
1236 |                     url.searchParams.set('madopic_cache_bust', Date.now().toString());
1237 |                     img.src = url.href;
1238 |                 }
1239 |             } catch (_) {
1240 |                 // 若 URL 构造失败则忽略
1241 |             }
1242 |         } catch (_) {
1243 |             resolve();
1244 |         }
1245 |     }));
1246 |     await Promise.race([
1247 |         Promise.allSettled(loadPromises),
1248 |         new Promise((resolve) => setTimeout(resolve, 3000)) // 最多等待 3s，避免卡死
1249 |     ]);
1250 | }
1251 | 
1252 | /**
1253 |  * 若图片加载失败，尝试通过公共图片代理服务加载，提升导出命中率。
1254 |  * 代理：images.weserv.nl（仅用于 http/https 且跨源情况）。
1255 |  */
1256 | function tryProxyImage(img) {
1257 |     return new Promise((resolve) => {
1258 |         try {
1259 |             if (img.dataset.madopicProxied === '1') return resolve();
1260 |             const original = new URL(img.src, window.location.href);
1261 |             // 同源或 data/blob 不代理
1262 |             if (original.origin === window.location.origin) return resolve();
1263 |             if (original.protocol !== 'http:' && original.protocol !== 'https:') return resolve();
1264 | 
1265 |             // 构造代理 URL（去掉协议）
1266 |             const hostless = original.href.replace(/^https?:\/\//i, '');
1267 |             // 代理默认会设置允许跨域，附带 no-referrer。若原图为 https，确保代理也为 https
1268 |             const proxied = `https://images.weserv.nl/?url=${encodeURIComponent(hostless)}&n=-1&output=png`;
1269 | 
1270 |             const onLoad = () => { cleanup(); resolve(); };
1271 |             const onError = () => { cleanup(); resolve(); };
1272 |             const cleanup = () => {
1273 |                 img.removeEventListener('load', onLoad);
1274 |                 img.removeEventListener('error', onError);
1275 |             };
1276 | 
1277 |             img.addEventListener('load', onLoad, { once: true });
1278 |             img.addEventListener('error', onError, { once: true });
1279 |             img.dataset.madopicProxied = '1';
1280 |             img.setAttribute('crossorigin', 'anonymous');
1281 |             img.setAttribute('referrerpolicy', 'no-referrer');
1282 |             img.src = proxied;
1283 |         } catch (_) {
1284 |             resolve();
1285 |         }
1286 |     });
1287 | }
1288 | 
1289 | /**
1290 |  * 导出为 PNG（通过克隆节点离屏渲染，保证与预览一致）。
1291 |  * 流程：等待字体 → 克隆节点 → 读取尺寸 → html2canvas 渲染 → 透明边缘裁剪 → 触发下载 → 清理。
1292 |  */
1293 | async function exportToPNG() {
1294 |     let exportNode = null;
1295 |     try {
1296 |         showNotification('正在生成图片...', 'info');
1297 |         exportNode = await createExactExportNode();
1298 | 
1299 |         // 预处理导出节点中的图片：设置跨域/防盗链属性并强制重新加载，尽量保证可被 html2canvas 捕获
1300 |         try {
1301 |             await prepareImagesForExport(exportNode);
1302 |         } catch (_) {
1303 |             // 忽略单个图片处理失败
1304 |         }
1305 | 
1306 |         // 等待字体与一帧渲染
1307 |         if (document.fonts && document.fonts.ready) {
1308 |             try { await document.fonts.ready; } catch (_) {}
1309 |         }
1310 |         await new Promise(r => requestAnimationFrame(r));
1311 | 
1312 |         const rect = exportNode.getBoundingClientRect();
1313 |         const targetWidth = Math.ceil(rect.width);
1314 |         const targetHeight = Math.ceil(rect.height);
1315 | 
1316 |         const tryScales = getExportScaleCandidates(EXPORT_SCALE);
1317 |         const canvas = await renderWithFallbackScales(exportNode, targetWidth, targetHeight, tryScales);
1318 | 
1319 |         // 尝试裁剪透明边缘，如果因跨域图片导致失败则跳过裁剪
1320 |         let trimmedCanvas = null;
1321 |         if (currentMode === 'free') {
1322 |             try {
1323 |                 trimmedCanvas = trimTransparentEdges(canvas);
1324 |             } catch (error) {
1325 |                 console.warn('无法裁剪透明边缘（可能包含跨域图片）:', error.message);
1326 |             }
1327 |         }
1328 |         const outputCanvas = trimmedCanvas || canvas;
1329 | 
1330 |         const link = document.createElement('a');
1331 |         link.download = `madopic-${getFormattedTimestamp()}.png`;
1332 |         link.href = outputCanvas.toDataURL('image/png', 1.0);
1333 |         document.body.appendChild(link);
1334 |         link.click();
1335 |         document.body.removeChild(link);
1336 | 
1337 |         showNotification('图片导出成功！', 'success');
1338 |     } catch (error) {
1339 |         console.error('导出失败:', error);
1340 |         showNotification('导出失败，请重试', 'error');
1341 |     } finally {
1342 |         if (exportNode && exportNode.parentNode) {
1343 |             exportNode.parentNode.removeChild(exportNode);
1344 |         }
1345 |     }
1346 | }
1347 | 
1348 | async function exportToPDF() {
1349 |     let exportNode = null;
1350 |     try {
1351 |         showNotification('正在生成 PDF...', 'info');
1352 |         exportNode = await createExactExportNode();
1353 | 
1354 |         // 预处理导出节点中的图片
1355 |         try {
1356 |             await prepareImagesForExport(exportNode);
1357 |         } catch (_) {
1358 |             // 忽略单个图片处理失败
1359 |         }
1360 | 
1361 |         // 等待字体与一帧渲染
1362 |         if (document.fonts && document.fonts.ready) {
1363 |             try { await document.fonts.ready; } catch (_) {}
1364 |         }
1365 |         await new Promise(r => requestAnimationFrame(r));
1366 | 
1367 |         const rect = exportNode.getBoundingClientRect();
1368 |         const targetWidth = Math.ceil(rect.width);
1369 |         const targetHeight = Math.ceil(rect.height);
1370 | 
1371 |         const tryScales = getExportScaleCandidates(EXPORT_SCALE);
1372 |         const canvas = await renderWithFallbackScales(exportNode, targetWidth, targetHeight, tryScales);
1373 | 
1374 |         // 尝试裁剪透明边缘，如果因跨域图片导致失败则跳过裁剪
1375 |         let trimmedCanvas = null;
1376 |         if (currentMode === 'free') {
1377 |             try {
1378 |                 trimmedCanvas = trimTransparentEdges(canvas);
1379 |             } catch (error) {
1380 |                 console.warn('无法裁剪透明边缘（可能包含跨域图片）:', error.message);
1381 |             }
1382 |         }
1383 |         const outputCanvas = trimmedCanvas || canvas;
1384 | 
1385 |         // 创建 PDF
1386 |         const { jsPDF } = window.jspdf;
1387 |         
1388 |         const canvasWidth = outputCanvas.width;
1389 |         const canvasHeight = outputCanvas.height;
1390 |         
1391 |         // 计算 PDF 页面尺寸（毫米）
1392 |         // 默认使用 A4 纸张，但根据内容比例调整
1393 |         const A4_WIDTH_MM = 210;
1394 |         const A4_HEIGHT_MM = 297;
1395 |         const aspectRatio = canvasWidth / canvasHeight;
1396 |         
1397 |         let pdfWidth, pdfHeight, orientation;
1398 |         
1399 |         if (aspectRatio > 1) {
1400 |             orientation = 'landscape';
1401 |             pdfWidth = A4_HEIGHT_MM;
1402 |             pdfHeight = A4_WIDTH_MM;
1403 |             
1404 |             if (aspectRatio > pdfWidth / pdfHeight) {
1405 |                 pdfHeight = pdfWidth / aspectRatio;
1406 |             }
1407 |         } else {
1408 |             orientation = 'portrait';
1409 |             pdfWidth = A4_WIDTH_MM;
1410 |             pdfHeight = A4_HEIGHT_MM;
1411 |             
1412 |             if (aspectRatio < pdfWidth / pdfHeight) {
1413 |                 pdfWidth = pdfHeight * aspectRatio;
1414 |             }
1415 |         }
1416 | 
1417 |         const pdf = new jsPDF({
1418 |             orientation: orientation,
1419 |             unit: 'mm',
1420 |             format: [pdfWidth, pdfHeight],
1421 |             compress: false
1422 |         });
1423 | 
1424 |         // 使用 PNG 格式保持高清质量，不压缩
1425 |         const imgData = outputCanvas.toDataURL('image/png', 1.0);
1426 |         pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight, undefined, 'FAST');
1427 | 
1428 |         pdf.save(`madopic-${getFormattedTimestamp()}.pdf`);
1429 | 
1430 |         showNotification('PDF 导出成功！', 'success');
1431 |     } catch (error) {
1432 |         console.error('PDF 导出失败:', error);
1433 |         showNotification('PDF 导出失败，请重试', 'error');
1434 |     } finally {
1435 |         if (exportNode && exportNode.parentNode) {
1436 |             exportNode.parentNode.removeChild(exportNode);
1437 |         }
1438 |     }
1439 | }
1440 | 
1441 | // 导出为独立可打开的 HTML 文件
1442 | async function exportToHTML() {
1443 |     let exportNode = null;
1444 |     try {
1445 |         showNotification('正在生成 HTML...', 'info');
1446 | 
1447 |         // 并行拉取需要内联的样式
1448 |         const cssFetchPromise = Promise.all([
1449 |             fetchCssBySelector('link[href*="style.css"]'),
1450 |             fetchCssBySelector('link[rel="stylesheet"][href*="katex"]')
1451 |         ]);
1452 | 
1453 |         // 克隆并渲染离屏节点
1454 |         exportNode = await createExactExportNode();
1455 | 
1456 |         // 将 ECharts 图表替换为静态图片，确保离线可见
1457 |         await replaceEChartsWithImages(exportNode);
1458 | 
1459 |         // 收集样式（尽量内联，失败时保留外链兜底）
1460 |         const [localCss, katexCss] = await cssFetchPromise;
1461 | 
1462 |         // 组装完整 HTML
1463 |         const html = buildStandaloneHTML(exportNode, { localCss, katexCss });
1464 | 
1465 |         // 触发下载
1466 |         const blob = new Blob([html], { type: 'text/html;charset=utf-8' });
1467 |         const url = URL.createObjectURL(blob);
1468 |         const a = document.createElement('a');
1469 |         a.href = url;
1470 |         a.download = `madopic-${getFormattedTimestamp()}.html`;
1471 |         document.body.appendChild(a);
1472 |         a.click();
1473 |         document.body.removeChild(a);
1474 |         URL.revokeObjectURL(url);
1475 | 
1476 |         showNotification('HTML 导出成功！', 'success');
1477 |     } catch (error) {
1478 |         console.error('HTML 导出失败:', error);
1479 |         showNotification('HTML 导出失败，请重试', 'error');
1480 |     } finally {
1481 |         if (exportNode && exportNode.parentNode) {
1482 |             exportNode.parentNode.removeChild(exportNode);
1483 |         }
1484 |     }
1485 | }
1486 | 
1487 | // 根据 <link> 选择器抓取 CSS 内容
1488 | async function fetchCssBySelector(selector) {
1489 |     try {
1490 |         const link = document.querySelector(selector);
1491 |         if (!link || !link.href) return { inline: '', href: '' };
1492 |         const href = link.href;
1493 |         const css = await fetchTextSafe(href);
1494 |         return { inline: css || '', href };
1495 |     } catch (_) {
1496 |         return { inline: '', href: '' };
1497 |     }
1498 | }
1499 | 
1500 | // 安全获取文本，失败返回空字符串
1501 | async function fetchTextSafe(url) {
1502 |     try {
1503 |         const res = await fetch(url, { mode: 'cors' });
1504 |         if (!res.ok) return '';
1505 |         return await res.text();
1506 |     } catch (_) {
1507 |         return '';
1508 |     }
1509 | }
1510 | 
1511 | // 将克隆节点中的 ECharts 图表替换为 <img>（使用实例导出的 dataURL）
1512 | async function replaceEChartsWithImages(root) {
1513 |     const containers = root.querySelectorAll('.echarts-container');
1514 |     for (const container of containers) {
1515 |         try {
1516 |             // chartContainer 是我们在渲染时创建的内部 div，实例挂在其属性上
1517 |             const chartContainer = container.querySelector('div[id^="echarts-"]');
1518 |             let dataUrl = '';
1519 |             if (chartContainer && chartContainer._echartsInstance && typeof chartContainer._echartsInstance.getDataURL === 'function') {
1520 |                 dataUrl = chartContainer._echartsInstance.getDataURL({ type: 'png', pixelRatio: 1, backgroundColor: '#ffffff' });
1521 |             } else {
1522 |                 // 兜底：合并所有 canvas 层
1523 |                 const canvases = container.querySelectorAll('canvas');
1524 |                 if (canvases.length > 0) {
1525 |                     const base = canvases[0];
1526 |                     const temp = document.createElement('canvas');
1527 |                     temp.width = base.width;
1528 |                     temp.height = base.height;
1529 |                     const tctx = temp.getContext('2d');
1530 |                     canvases.forEach(c => {
1531 |                         try { tctx.drawImage(c, 0, 0); } catch (_) {}
1532 |                     });
1533 |                     dataUrl = temp.toDataURL('image/png');
1534 |                 }
1535 |             }
1536 | 
1537 |             if (dataUrl) {
1538 |                 const img = new Image();
1539 |                 img.src = dataUrl;
1540 |                 img.style.width = '100%';
1541 |                 img.style.height = 'auto';
1542 |                 // 用静态图替换整个容器内容
1543 |                 container.innerHTML = '';
1544 |                 container.appendChild(img);
1545 |             }
1546 |         } catch (_) {
1547 |             // 忽略单个失败，继续处理其他图表
1548 |         }
1549 |     }
1550 | }
1551 | 
1552 | // 构建可独立打开的 HTML 文本
1553 | function buildStandaloneHTML(exportNode, parts) {
1554 |     const { localCss, katexCss } = parts || {};
1555 |     const title = document.title || 'Madopic Export';
1556 | 
1557 |     // 处理样式注入策略：优先内联，失败时保留外链
1558 |     const cssBlocks = [];
1559 |     if (localCss && localCss.inline) {
1560 |         cssBlocks.push(`<style>\n${localCss.inline}\n</style>`);
1561 |     } else if (localCss && localCss.href) {
1562 |         cssBlocks.push(`<link rel="stylesheet" href="${localCss.href}">`);
1563 |     }
1564 | 
1565 |     if (katexCss && katexCss.inline) {
1566 |         cssBlocks.push(`<style>\n${katexCss.inline}\n</style>`);
1567 |     } else if (katexCss && katexCss.href) {
1568 |         cssBlocks.push(`<link rel="stylesheet" href="${katexCss.href}">`);
1569 |     }
1570 | 
1571 |     // 为导出页添加极简 reset，并强制覆盖离屏/滚动样式，确保可见与可滚动
1572 |     cssBlocks.push(`<style>\nhtml,body{margin:0;padding:0;background:#f3f4f6;}\nbody{overflow-y:auto !important;overflow-x:hidden;}\n#madopic-export-poster{position:relative !important;top:auto !important;left:auto !important;margin:40px auto !important;display:block !important;transform:none !important;height:auto !important;min-height:0 !important;overflow:visible !important;}\n#madopic-export-poster .poster-content{max-height:none !important;overflow:visible !important;}\n</style>`);
1573 | 
1574 |     const head = `<!DOCTYPE html>\n<html lang="zh-CN">\n<head>\n<meta charset="UTF-8">\n<meta name="viewport" content="width=device-width, initial-scale=1.0">\n<title>${escapeHtml(title)}</title>\n${cssBlocks.join('\n')}\n</head>`;
1575 | 
1576 |     // 克隆节点，清理离屏相关 inline 样式
1577 |     const node = exportNode.cloneNode(true);
1578 |     try {
1579 |         node.style.position = '';
1580 |         node.style.top = '';
1581 |         node.style.left = '';
1582 |         node.style.margin = '40px auto';
1583 |         node.style.display = 'block';
1584 |         node.style.transform = '';
1585 |         // 若为固定比例模式（xhs/pyq），取消导出 HTML 的裁剪，保留完整内容
1586 |         node.style.height = '';
1587 |         node.style.minHeight = '';
1588 |         node.style.overflow = 'visible';
1589 |         const innerForHtml = node.querySelector('.poster-content');
1590 |         if (innerForHtml) {
1591 |             innerForHtml.style.maxHeight = '';
1592 |             innerForHtml.style.overflow = 'visible';
1593 |         }
1594 |     } catch (_) {}
1595 | 
1596 |     // 仅导出卡片区域，无需运行任何脚本
1597 |     const body = `<body>\n${node.outerHTML}\n</body>\n</html>`;
1598 | 
1599 |     return `${head}\n${body}`;
1600 | }
1601 | 
1602 | function escapeHtml(str) {
1603 |     try {
1604 |         return String(str)
1605 |             .replace(/&/g, '&amp;')
1606 |             .replace(/</g, '&lt;')
1607 |             .replace(/>/g, '&gt;')
1608 |             .replace(/"/g, '&quot;')
1609 |             .replace(/'/g, '&#39;');
1610 |     } catch (_) {
1611 |         return '' + str;
1612 |     }
1613 | }
1614 | 
1615 | /**
1616 |  * 生成按优先级降序的导出 scale 备选列表。
1617 |  * 例如：首选 s，然后尝试 2、1.5、1.25、1。
1618 |  */
1619 | function getExportScaleCandidates(preferred) {
1620 |     const candidates = [preferred, 2, 1.5, 1.25, 1];
1621 |     const unique = [];
1622 |     for (const s of candidates) {
1623 |         if (Number.isFinite(s) && s > 0 && !unique.includes(s)) unique.push(s);
1624 |     }
1625 |     return unique.sort((a, b) => b - a);
1626 | }
1627 | 
1628 | /**
1629 |  * 尝试按多个缩放倍数依次渲染，直到成功为止。
1630 |  */
1631 | async function renderWithFallbackScales(node, targetWidth, targetHeight, scales) {
1632 |     let lastError = null;
1633 |     for (const scale of scales) {
1634 |         try {
1635 |             // eslint-disable-next-line no-await-in-loop
1636 |             const canvas = await html2canvas(node, {
1637 |                 backgroundColor: null,
1638 |                 scale,
1639 |                 useCORS: true,
1640 |                 allowTaint: true,
1641 |                 logging: false,
1642 |                 width: targetWidth,
1643 |                 height: targetHeight,
1644 |                 windowWidth: targetWidth,
1645 |                 windowHeight: targetHeight,
1646 |                 scrollX: 0,
1647 |                 scrollY: 0,
1648 |                 imageTimeout: 15000,
1649 |                 onclone: function(clonedDoc) {
1650 |                     const clonedTarget = clonedDoc.getElementById('madopic-export-poster');
1651 |                     if (clonedTarget) {
1652 |                         clonedTarget.style.setProperty('position', 'absolute', 'important');
1653 |                         clonedTarget.style.setProperty('top', '0', 'important');
1654 |                         clonedTarget.style.setProperty('left', '0', 'important');
1655 |                         clonedTarget.style.setProperty('margin', '0', 'important');
1656 |                         clonedTarget.style.setProperty('width', `${currentWidth}px`, 'important');
1657 |                         clonedTarget.style.setProperty('padding', `${currentPadding}px`, 'important');
1658 |                         clonedTarget.style.setProperty('box-sizing', 'border-box', 'important');
1659 |                     }
1660 |                     // 再次为克隆文档内的图片设置跨域/防盗链属性（双保险）
1661 |                     try {
1662 |                         clonedDoc.querySelectorAll('img').forEach((img) => {
1663 |                             if (!img.getAttribute('crossorigin')) img.setAttribute('crossorigin', 'anonymous');
1664 |                             if (!img.getAttribute('referrerpolicy')) img.setAttribute('referrerpolicy', 'no-referrer');
1665 |                             if (!img.getAttribute('decoding')) img.setAttribute('decoding', 'sync');
1666 |                             if (!img.getAttribute('loading')) img.setAttribute('loading', 'eager');
1667 |                         });
1668 |                     } catch (_) {}
1669 |                     
1670 |                     // 特殊处理KaTeX数学公式元素
1671 |                     try {
1672 |                         const katexElements = clonedDoc.querySelectorAll('.katex, .katex-display, .katex-mathml');
1673 |                         katexElements.forEach(el => {
1674 |                             // 确保KaTeX元素的样式被正确保留
1675 |                             el.style.setProperty('font-family', 'KaTeX_Main, "Times New Roman", serif', 'important');
1676 |                             if (el.classList.contains('katex-display')) {
1677 |                                 el.style.setProperty('display', 'block', 'important');
1678 |                                 el.style.setProperty('text-align', 'center', 'important');
1679 |                             }
1680 |                         });
1681 |                     } catch (_) {}
1682 |                     
1683 |                     // 特殊处理Mermaid图表SVG
1684 |                     try {
1685 |                         const mermaidSvgs = clonedDoc.querySelectorAll('.mermaid svg');
1686 |                         mermaidSvgs.forEach(svg => {
1687 |                             // 确保SVG有明确的尺寸和样式
1688 |                             if (!svg.getAttribute('width') && svg.getBoundingClientRect) {
1689 |                                 const rect = svg.getBoundingClientRect();
1690 |                                 if (rect.width > 0) svg.setAttribute('width', rect.width);
1691 |                                 if (rect.height > 0) svg.setAttribute('height', rect.height);
1692 |                             }
1693 |                             svg.style.setProperty('display', 'block', 'important');
1694 |                             svg.style.setProperty('max-width', '100%', 'important');
1695 |                         });
1696 |                     } catch (_) {}
1697 |                     
1698 |                     clonedDoc.documentElement.style.setProperty('overflow', 'hidden', 'important');
1699 |                     clonedDoc.body.style.setProperty('margin', '0', 'important');
1700 |                     clonedDoc.body.style.setProperty('padding', '0', 'important');
1701 |                 }
1702 |             });
1703 |             if (scale !== scales[0]) {
1704 |                 showNotification(`显存不足，已自动降至 ${Math.round(scale * 100)}% 清晰度导出`, 'warning');
1705 |             }
1706 |             return canvas;
1707 |         } catch (err) {
1708 |             lastError = err;
1709 |             // 继续尝试下一个较低的 scale
1710 |         }
1711 |     }
1712 |     throw lastError || new Error('所有缩放倍数均导出失败');
1713 | }
1714 | 
1715 | // ===== 通知系统 =====
1716 | function showNotification(message, type = 'info') {
1717 |     // 创建通知元素
1718 |     const notification = document.createElement('div');
1719 |     notification.className = `notification notification-${type}`;
1720 |     notification.innerHTML = `
1721 |         <div class="notification-content">
1722 |             <i class="fas ${getNotificationIcon(type)}"></i>
1723 |             <span>${message}</span>
1724 |         </div>
1725 |     `;
1726 |     
1727 |     // 添加样式
1728 |     Object.assign(notification.style, {
1729 |         position: 'fixed',
1730 |         top: '80px',
1731 |         right: '20px',
1732 |         background: getNotificationColor(type),
1733 |         color: 'white',
1734 |         padding: '12px 20px',
1735 |         borderRadius: '8px',
1736 |         boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
1737 |         zIndex: '10000',
1738 |         transform: 'translateX(100%)',
1739 |         transition: 'transform 0.3s ease',
1740 |         fontSize: '14px',
1741 |         fontWeight: '500'
1742 |     });
1743 | 
1744 |     // 如果存在缩放工具栏，则将通知定位到百分比（缩放工具栏）下方
1745 |     try {
1746 |         const anchor = document.querySelector('.preview-tools') || document.querySelector('.zoom-level');
1747 |         if (anchor && typeof anchor.getBoundingClientRect === 'function') {
1748 |             const rect = anchor.getBoundingClientRect();
1749 |             // fixed 定位采用视口坐标，直接使用 rect.bottom 即可
1750 |             const computedTop = Math.max(rect.bottom + 10, 10);
1751 |             notification.style.top = `${Math.round(computedTop)}px`;
1752 |         } else {
1753 |             // 略微下移默认位置，避免遮挡顶部工具栏
1754 |             notification.style.top = '120px';
1755 |         }
1756 |     } catch (e) {
1757 |         // 发生异常时退回到略低的默认位置
1758 |         notification.style.top = '120px';
1759 |     }
1760 |     
1761 |     notification.querySelector('.notification-content').style.cssText = `
1762 |         display: flex;
1763 |         align-items: center;
1764 |         gap: 8px;
1765 |     `;
1766 |     
1767 |     document.body.appendChild(notification);
1768 |     
1769 |     // 动画显示
1770 |     setTimeout(() => {
1771 |         notification.style.transform = 'translateX(0)';
1772 |     }, 100);
1773 |     
1774 |     // 自动隐藏
1775 |     setTimeout(() => {
1776 |         notification.style.transform = 'translateX(100%)';
1777 |         setTimeout(() => {
1778 |             if (notification.parentNode) {
1779 |                 document.body.removeChild(notification);
1780 |             }
1781 |         }, 300);
1782 |     }, 3000);
1783 | }
1784 | 
1785 | function getNotificationIcon(type) {
1786 |     const icons = {
1787 |         success: 'fa-check-circle',
1788 |         error: 'fa-exclamation-circle',
1789 |         info: 'fa-info-circle',
1790 |         warning: 'fa-exclamation-triangle'
1791 |     };
1792 |     return icons[type] || icons.info;
1793 | }
1794 | 
1795 | function getNotificationColor(type) {
1796 |     const colors = {
1797 |         success: '#10b981',
1798 |         error: '#ef4444',
1799 |         info: '#3b82f6',
1800 |         warning: '#f59e0b'
1801 |     };
1802 |     return colors[type] || colors.info;
1803 | }
1804 | 
1805 | // ===== 键盘快捷键 =====
1806 | function setupKeyboardShortcuts() {
1807 |     document.addEventListener('keydown', function(e) {
1808 |         if (e.ctrlKey || e.metaKey) {
1809 |             switch(e.key) {
1810 |                 case 'b':
1811 |                     e.preventDefault();
1812 |                     handleToolbarAction('bold');
1813 |                     break;
1814 |                 case 'i':
1815 |                     e.preventDefault();
1816 |                     handleToolbarAction('italic');
1817 |                     break;
1818 |                 case 's':
1819 |                     e.preventDefault();
1820 |                     exportToPNG();
1821 |                     break;
1822 |                 case '=':
1823 |                 case '+':
1824 |                     e.preventDefault();
1825 |                     zoomIn();
1826 |                     break;
1827 |                 case '-':
1828 |                     e.preventDefault();
1829 |                     zoomOut();
1830 |                     break;
1831 |             }
1832 |         }
1833 |         
1834 |         // ESC 键关闭面板
1835 |         if (e.key === 'Escape') {
1836 |             closeCustomPanel();
1837 |         }
1838 |     });
1839 | }
1840 | 
1841 | // 防抖函数
1842 | function debounce(func, wait) {
1843 |     let timeout;
1844 |     return function executedFunction(...args) {
1845 |         const later = () => {
1846 |             clearTimeout(timeout);
1847 |             func(...args);
1848 |         };
1849 |         clearTimeout(timeout);
1850 |         timeout = setTimeout(later, wait);
1851 |     };
1852 | }
1853 | 
1854 | 
1855 | 
1856 | // ===== 错误处理 =====
1857 | window.addEventListener('error', function(e) {
1858 |     console.error('应用错误:', e.error);
1859 |     showNotification('应用出现错误，请刷新页面重试', 'error');
1860 | });
1861 | 
1862 | // 页面可见性改变时优化性能
1863 | document.addEventListener('visibilitychange', function() {
1864 |     if (document.hidden) {
1865 |         // 页面隐藏时暂停某些操作
1866 |     } else {
1867 |         // 页面可见时恢复操作
1868 |         updatePreview();
1869 |     }
1870 | });
1871 | 
1872 | // 添加一些实用的格式化快捷方法
1873 | const MarkdownHelper = {
1874 |     // 插入表格
1875 |     insertTable: function(rows = 3, cols = 3) {
1876 |         const textarea = markdownInput;
1877 |         let table = '\n| ';
1878 |         
1879 |         // 表头
1880 |         for (let i = 0; i < cols; i++) {
1881 |             table += `列${i + 1} | `;
1882 |         }
1883 |         table += '\n| ';
1884 |         
1885 |         // 分隔线
1886 |         for (let i = 0; i < cols; i++) {
1887 |             table += '--- | ';
1888 |         }
1889 |         table += '\n';
1890 |         
1891 |         // 数据行
1892 |         for (let row = 0; row < rows - 1; row++) {
1893 |             table += '| ';
1894 |             for (let col = 0; col < cols; col++) {
1895 |                 table += '数据 | ';
1896 |             }
1897 |             table += '\n';
1898 |         }
1899 |         
1900 |         const cursorPos = textarea.selectionStart;
1901 |         const beforeText = textarea.value.substring(0, cursorPos);
1902 |         const afterText = textarea.value.substring(cursorPos);
1903 |         
1904 |         textarea.value = beforeText + table + afterText;
1905 |         textarea.setSelectionRange(cursorPos + table.length, cursorPos + table.length);
1906 |         updatePreview();
1907 |     },
1908 |     
1909 |     // 插入代码块
1910 |     insertCodeBlock: function(language = '') {
1911 |         const textarea = markdownInput;
1912 |         const codeBlock = `\n\`\`\`${language}\n// 在这里输入代码\nconsole.log('Hello World!');\n\`\`\`\n`;
1913 |         
1914 |         const cursorPos = textarea.selectionStart;
1915 |         const beforeText = textarea.value.substring(0, cursorPos);
1916 |         const afterText = textarea.value.substring(cursorPos);
1917 |         
1918 |         textarea.value = beforeText + codeBlock + afterText;
1919 |         textarea.setSelectionRange(cursorPos + 4 + language.length, cursorPos + 4 + language.length);
1920 |         updatePreview();
1921 |     },
1922 |     
1923 |     // 通用的插入方法
1924 |     insertAtCursor: function(text) {
1925 |         const textarea = markdownInput;
1926 |         const cursorPos = textarea.selectionStart;
1927 |         const beforeText = textarea.value.substring(0, cursorPos);
1928 |         const afterText = textarea.value.substring(cursorPos);
1929 |         
1930 |         textarea.value = beforeText + text + afterText;
1931 |         textarea.setSelectionRange(cursorPos + text.length, cursorPos + text.length);
1932 |         textarea.focus();
1933 |         updatePreview();
1934 |     },
1935 |     
1936 |     // 插入质能守恒公式
1937 |     insertEinsteinFormula: function() {
1938 |         const formula = `
1939 | 
1940 | ## 质能守恒定律
1941 | 
1942 | $$E = mc^{2}$$
1943 | 
1944 | 其中：
1945 | - $E$ 表示能量
1946 | - $m$ 表示质量  
1947 | - $c$ 表示光速
1948 | 
1949 | `;
1950 |         this.insertAtCursor(formula);
1951 |     },
1952 | 
1953 |     // 插入数学公式模板
1954 |     insertMathFormulas: function() {
1955 |         const formulas = `
1956 | 
1957 | ## 常用数学公式
1958 | 
1959 | ### 代数
1960 | **二次公式：** $x = \\frac{-b \\pm \\sqrt{b^{2} - 4ac}}{2a}$
1961 | 
1962 | **因式分解：** $a^{2} - b^{2} = (a+b)(a-b)$
1963 | 
1964 | ### 微积分
1965 | **导数定义：** $f'(x) = \\lim_{h \\to 0} \\frac{f(x+h) - f(x)}{h}$
1966 | 
1967 | **基本积分：** $\\int_a^b f(x)dx = F(b) - F(a)$
1968 | 
1969 | ### 三角函数
1970 | **勾股定理：** $a^{2} + b^{2} = c^{2}$
1971 | 
1972 | **正弦定理：** $\\frac{a}{\\sin A} = \\frac{b}{\\sin B} = \\frac{c}{\\sin C}$
1973 | 
1974 | ### 统计学
1975 | **均值：** $\\bar{x} = \\frac{1}{n}\\sum_{i=1}^{n} x_i$
1976 | 
1977 | **方差：** $\\sigma^{2} = \\frac{1}{n}\\sum_{i=1}^{n} (x_i - \\bar{x})^{2}$
1978 | 
1979 | `;
1980 |         this.insertAtCursor(formulas);
1981 |     },
1982 | 
1983 |     // 插入物理公式模板
1984 |     insertPhysicsFormulas: function() {
1985 |         const formulas = `
1986 | 
1987 | ## 物理公式集合
1988 | 
1989 | ### 经典力学
1990 | **牛顿第二定律：** $F = ma$
1991 | 
1992 | **万有引力定律：** $F = G\\frac{m_1 m_2}{r^{2}}$
1993 | 
1994 | **动能：** $E_k = \\frac{1}{2}mv^{2}$
1995 | 
1996 | **势能：** $E_p = mgh$
1997 | 
1998 | ### 电磁学
1999 | **库仑定律：** $F = k\\frac{q_1 q_2}{r^{2}}$
2000 | 
2001 | **欧姆定律：** $V = IR$
2002 | 
2003 | **电功率：** $P = VI = I^{2}R = \\frac{V^{2}}{R}$
2004 | 
2005 | ### 现代物理
2006 | **质能关系：** $E = mc^{2}$
2007 | 
2008 | **德布罗意波长：** $\\lambda = \\frac{h}{p}$
2009 | 
2010 | **海森堡不确定性原理：** $\\Delta x \\Delta p \\geq \\frac{\\hbar}{2}$
2011 | 
2012 | `;
2013 |         this.insertAtCursor(formulas);
2014 |     },
2015 | 
2016 |     // 插入化学公式模板
2017 |     insertChemistryFormulas: function() {
2018 |         const formulas = `
2019 | 
2020 | ## 化学公式集合
2021 | 
2022 | ### 基本化学反应
2023 | **燃烧反应：** $\\ce{CH4 + 2O2 -> CO2 + 2H2O}$
2024 | 
2025 | **酸碱中和：** $\\ce{HCl + NaOH -> NaCl + H2O}$
2026 | 
2027 | **氧化还原：** $\\ce{2Na + Cl2 -> 2NaCl}$
2028 | 
2029 | ### 有机化学
2030 | **甲烷：** $\\ce{CH4}$
2031 | 
2032 | **乙醇：** $\\ce{C2H5OH}$
2033 | 
2034 | **葡萄糖：** $\\ce{C6H12O6}$
2035 | 
2036 | ### 化学平衡
2037 | **平衡常数：** $K_c = \\frac{[C]^c[D]^d}{[A]^a[B]^b}$
2038 | 
2039 | **pH定义：** $pH = -\\log[H^+]$
2040 | 
2041 | ### 理想气体
2042 | **理想气体定律：** $PV = nRT$
2043 | 
2044 | `;
2045 |         this.insertAtCursor(formulas);
2046 |     },
2047 | 
2048 |     // 插入流程图
2049 |     insertFlowchart: function() {
2050 |         const flowchart = `
2051 | \`\`\`mermaid
2052 | flowchart TD
2053 |     A[开始] --> B{判断条件}
2054 |     B -->|是| C[执行操作]
2055 |     B -->|否| D[其他操作]
2056 |     C --> E[结束]
2057 |     D --> E
2058 | \`\`\`
2059 | `;
2060 |         this.insertAtCursor(flowchart);
2061 |     },
2062 |     
2063 |     // 插入序列图
2064 |     insertSequenceDiagram: function() {
2065 |         const sequenceDiagram = `
2066 | \`\`\`mermaid
2067 | sequenceDiagram
2068 |     participant A as 用户
2069 |     participant B as 系统
2070 |     A->>B: 发送请求
2071 |     B-->>A: 返回响应
2072 |     A->>B: 确认收到
2073 | \`\`\`
2074 | `;
2075 |         this.insertAtCursor(sequenceDiagram);
2076 |     },
2077 |     
2078 |     // 插入甘特图
2079 |     insertGanttChart: function() {
2080 |         const ganttChart = `
2081 | \`\`\`mermaid
2082 | gantt
2083 |     title 项目进度计划
2084 |     dateFormat  YYYY-MM-DD
2085 |     section 阶段一
2086 |     任务1           :a1, 2024-01-01, 30d
2087 |     任务2           :after a1, 20d
2088 |     section 阶段二
2089 |     任务3           :2024-02-01, 25d
2090 |     任务4           :20d
2091 | \`\`\`
2092 | `;
2093 |         this.insertAtCursor(ganttChart);
2094 |     },
2095 |     
2096 |     // 插入饼图
2097 |     insertPieChart: function() {
2098 |         const pieChart = `
2099 | \`\`\`mermaid
2100 | pie title 数据分布
2101 |     "类别A" : 42.96
2102 |     "类别B" : 50.05
2103 |     "类别C" : 10.01
2104 |     "其他" : 5
2105 | \`\`\`
2106 | `;
2107 |         this.insertAtCursor(pieChart);
2108 |     },
2109 | 
2110 |     // 插入卡片
2111 |     insertCard: function() {
2112 |         const cardTemplate = `
2113 | 
2114 | :::card
2115 | **卡片标题**
2116 | 
2117 | 这是一个精美的卡片内容区域。你可以在这里添加：
2118 | 
2119 | - 重要信息
2120 | - 产品特色
2121 | - 使用说明
2122 | - 任何想要突出显示的内容
2123 | 
2124 | 支持 **粗体**、*斜体*、\`代码\` 和 [链接](https://example.com) 等格式。
2125 | :::
2126 | 
2127 | **不同类型的卡片示例：**
2128 | 
2129 | :::card info
2130 | **信息卡片**
2131 | 
2132 | 这是一个信息类型的卡片，适合展示提示信息。
2133 | :::
2134 | 
2135 | :::card success
2136 | **成功卡片**
2137 | 
2138 | 这是一个成功类型的卡片，适合展示成功状态。
2139 | :::
2140 | 
2141 | :::card warning
2142 | **警告卡片**
2143 | 
2144 | 这是一个警告类型的卡片，适合展示注意事项。
2145 | :::
2146 | 
2147 | :::card error
2148 | **错误卡片**
2149 | 
2150 | 这是一个错误类型的卡片，适合展示错误信息。
2151 | :::
2152 | 
2153 | `;
2154 |         this.insertAtCursor(cardTemplate);
2155 |     },
2156 | 
2157 |     // 插入ECharts图表模板
2158 |     insertEChartsTemplate: function() {
2159 |         const echartsTemplate = `
2160 | 
2161 | ## ECharts 图表示例
2162 | 
2163 | ### 饼图
2164 | \`\`\`echarts
2165 | {
2166 |   "title": {
2167 |     "text": "访问来源统计",
2168 |     "left": "center"
2169 |   },
2170 |   "tooltip": {
2171 |     "trigger": "item",
2172 |     "formatter": "{a} <br/>{b} : {c} ({d}%)"
2173 |   },
2174 |   "legend": {
2175 |     "orient": "vertical",
2176 |     "left": "left",
2177 |     "data": ["搜索引擎", "直接访问", "推荐", "其他", "社交平台"]
2178 |   },
2179 |   "series": [{
2180 |     "name": "访问来源",
2181 |     "type": "pie",
2182 |     "radius": "55%",
2183 |     "center": ["50%", "60%"],
2184 |     "data": [
2185 |       {"value": 10440, "name": "搜索引擎"},
2186 |       {"value": 4770, "name": "直接访问"},
2187 |       {"value": 2430, "name": "推荐"},
2188 |       {"value": 342, "name": "其他"},
2189 |       {"value": 18, "name": "社交平台"}
2190 |     ]
2191 |   }]
2192 | }
2193 | \`\`\`
2194 | 
2195 | ### 柱状图
2196 | \`\`\`echarts
2197 | {
2198 |   "title": {
2199 |     "text": "月度销售数据",
2200 |     "left": "center"
2201 |   },
2202 |   "tooltip": {
2203 |     "trigger": "axis"
2204 |   },
2205 |   "xAxis": {
2206 |     "type": "category",
2207 |     "data": ["1月", "2月", "3月", "4月", "5月", "6月"]
2208 |   },
2209 |   "yAxis": {
2210 |     "type": "value"
2211 |   },
2212 |   "series": [{
2213 |     "name": "销售额",
2214 |     "type": "bar",
2215 |     "data": [120, 200, 150, 80, 70, 110],
2216 |     "itemStyle": {
2217 |       "color": "#5470c6"
2218 |     }
2219 |   }]
2220 | }
2221 | \`\`\`
2222 | 
2223 | `;
2224 |         this.insertAtCursor(echartsTemplate);
2225 |     }
2226 | };
2227 | 
2228 | // 图片处理相关函数
2229 | function insertImage() {
2230 |     const imageInput = document.getElementById('imageInput');
2231 |     imageInput.click();
2232 | }
2233 | 
2234 | function setupImageHandlers() {
2235 |     const imageInput = document.getElementById('imageInput');
2236 |     
2237 |     // 文件选择处理
2238 |     imageInput.addEventListener('change', function(e) {
2239 |         const file = e.target.files[0];
2240 |         if (file && file.type.startsWith('image/')) {
2241 |             handleImageFile(file);
2242 |         }
2243 |         // 清空输入，允许选择同一文件
2244 |         e.target.value = '';
2245 |     });
2246 |     
2247 |     // 剪贴板粘贴图片处理
2248 |     markdownInput.addEventListener('paste', function(e) {
2249 |         const items = e.clipboardData.items;
2250 |         for (let i = 0; i < items.length; i++) {
2251 |             const item = items[i];
2252 |             if (item.type.startsWith('image/')) {
2253 |                 e.preventDefault();
2254 |                 const file = item.getAsFile();
2255 |                 if (file) {
2256 |                     handleImageFile(file);
2257 |                 }
2258 |                 break;
2259 |             }
2260 |         }
2261 |     });
2262 | }
2263 | 
2264 | function handleImageFile(file) {
2265 |     showNotification('正在处理图片...', 'info');
2266 |     
2267 |     convertImageToBase64(file)
2268 |         .then(base64 => {
2269 |             insertImageIntoMarkdown(base64, file.name);
2270 |             showNotification('图片插入成功！', 'success');
2271 |         })
2272 |         .catch(error => {
2273 |             console.error('图片处理失败:', error);
2274 |             showNotification('图片处理失败，请重试', 'error');
2275 |         });
2276 | }
2277 | 
2278 | function convertImageToBase64(file) {
2279 |     return new Promise((resolve, reject) => {
2280 |         const reader = new FileReader();
2281 |         reader.onload = function(e) {
2282 |             resolve(e.target.result);
2283 |         };
2284 |         reader.onerror = function(error) {
2285 |             reject(error);
2286 |         };
2287 |         reader.readAsDataURL(file);
2288 |     });
2289 | }
2290 | 
2291 | function insertImageIntoMarkdown(base64, filename) {
2292 |     const textarea = markdownInput;
2293 |     const cursorPos = textarea.selectionStart;
2294 |     const beforeText = textarea.value.substring(0, cursorPos);
2295 |     const afterText = textarea.value.substring(cursorPos);
2296 |     
2297 |     // 创建简化的图片Markdown语法用于显示（截断base64）
2298 |     const base64Header = base64.split(',')[0] + ','; // 保留data:image/xxx;base64,部分
2299 |     const base64Data = base64.split(',')[1]; // 获取实际的base64数据
2300 |     const shortBase64 = base64Header + base64Data.substring(0, 50) + '...'; // 只显示前50个字符
2301 |     
2302 |     const imageMarkdown = `\n![${filename}](${shortBase64})\n`;
2303 |     
2304 |     // 存储完整的图片数据供预览和导出使用
2305 |     storeImageData(shortBase64, base64);
2306 |     
2307 |     // 插入到光标位置
2308 |     textarea.value = beforeText + imageMarkdown + afterText;
2309 |     textarea.setSelectionRange(cursorPos + imageMarkdown.length, cursorPos + imageMarkdown.length);
2310 |     textarea.focus();
2311 |     updatePreview();
2312 | }
2313 | 
2314 | // 存储图片数据映射
2315 | function storeImageData(shortBase64, fullBase64) {
2316 |     imageDataStore.set(shortBase64, fullBase64);
2317 | }
2318 | 
2319 | // 替换预览中的简化base64为完整base64
2320 | function replaceImageDataForPreview(content) {
2321 |     let result = content;
2322 |     imageDataStore.forEach((fullBase64, shortBase64) => {
2323 |         result = result.replace(new RegExp(escapeRegExp(shortBase64), 'g'), fullBase64);
2324 |     });
2325 |     return result;
2326 | }
2327 | 
2328 | // 转义正则表达式特殊字符
2329 | function escapeRegExp(string) {
2330 |     return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
2331 | }
2332 | 
2333 | // 生成格式化的时间戳字符串 (YYYYMMDDHHMMSS)
2334 | function getFormattedTimestamp() {
2335 |     const now = new Date();
2336 |     const year = now.getFullYear();
2337 |     const month = String(now.getMonth() + 1).padStart(2, '0');
2338 |     const day = String(now.getDate()).padStart(2, '0');
2339 |     const hours = String(now.getHours()).padStart(2, '0');
2340 |     const minutes = String(now.getMinutes()).padStart(2, '0');
2341 |     const seconds = String(now.getSeconds()).padStart(2, '0');
2342 |     
2343 |     return `${year}${month}${day}${hours}${minutes}${seconds}`;
2344 | }
2345 | 
2346 | // 获取当前配置（便于调试与外部接入）
2347 | function getCurrentMadopicConfig() {
2348 |     return {
2349 |         width: currentWidth,
2350 |         padding: currentPadding,
2351 |         fontSize: currentFontSize,
2352 |         background: markdownPoster.style.background,
2353 |         exportScale: EXPORT_SCALE
2354 |     };
2355 | }
2356 | 
2357 | // 导出全局对象供调试使用
2358 | window.MadopicApp = {
2359 |     updatePreview,
2360 |     exportToPNG,
2361 |     exportToPDF,
2362 |     applyBackground,
2363 |     MarkdownHelper,
2364 |     showNotification,
2365 |     insertImage,
2366 |     handleImageFile,
2367 |     getCurrentMadopicConfig,
2368 |     mathRenderer,
2369 |     diagramRenderer,
2370 |     echartsRenderer,
2371 |     cardRenderer
2372 | };
2373 | 
2374 | /**
2375 |  * 裁剪画布四周完全透明的像素，去除导出后可能出现的空白边缘。
2376 |  * 返回新的裁剪画布；若无需裁剪则返回 null。
2377 |  */
2378 | function trimTransparentEdges(sourceCanvas) {
2379 |     const ctx = sourceCanvas.getContext('2d');
2380 |     const { width, height } = sourceCanvas;
2381 |     const imageData = ctx.getImageData(0, 0, width, height);
2382 |     const data = imageData.data;
2383 | 
2384 |     let top = 0;
2385 |     let bottom = height - 1;
2386 |     let left = 0;
2387 |     let right = width - 1;
2388 |     const isRowTransparent = (y) => {
2389 |         const base = y * width * 4;
2390 |         for (let x = 0; x < width; x++) {
2391 |             if (data[base + x * 4 + 3] !== 0) return false;
2392 |         }
2393 |         return true;
2394 |     };
2395 |     const isColTransparent = (x, t, b) => {
2396 |         for (let y = t; y <= b; y++) {
2397 |             const idx = (y * width + x) * 4 + 3;
2398 |             if (data[idx] !== 0) return false;
2399 |         }
2400 |         return true;
2401 |     };
2402 | 
2403 |     while (top <= bottom && isRowTransparent(top)) top++;
2404 |     while (bottom >= top && isRowTransparent(bottom)) bottom--;
2405 |     while (left <= right && isColTransparent(left, top, bottom)) left++;
2406 |     while (right >= left && isColTransparent(right, top, bottom)) right--;
2407 | 
2408 |     // 若全透明或无需要裁剪
2409 |     if (top === 0 && left === 0 && right === width - 1 && bottom === height - 1) return null;
2410 |     if (top > bottom || left > right) return null;
2411 | 
2412 |     const newWidth = right - left + 1;
2413 |     const newHeight = bottom - top + 1;
2414 |     const trimmed = document.createElement('canvas');
2415 |     trimmed.width = newWidth;
2416 |     trimmed.height = newHeight;
2417 |     const tctx = trimmed.getContext('2d');
2418 |     tctx.drawImage(sourceCanvas, left, top, newWidth, newHeight, 0, 0, newWidth, newHeight);
2419 |     return trimmed;
2420 | }


--------------------------------------------------------------------------------