mokee/mokeeText
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
zg
2026-07-15 16:08:17 +08:00
parent f0d70aded4
commit 4e0057ece5
89 changed files with 13512 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
.superpowers/brainstorm/1938-1782198423/content/editor-comparison.html Normal file
View File

@@ -0,0 +1,113 @@
<h2>编辑器选型 — 你要的是哪种？</h2>
<p class="subtitle">Markdown 原生有限，增强型编辑器才能满足图片/颜色/表情需求</p>
<div class="cards">
<!-- 方案A -->
<div class="card" data-choice="enhanced" onclick="toggleSelect(this)">
<div class="card-body">
<h3>🌟 增强型编辑器（推荐）— Tiptap / Milkdown</h3>
<p style="color:#666; font-size:13px;">所见即所得，像飞书/Notion 一样。支持所有你想要的。</p>
<div style="background:#fff; border:1px solid #e0e0e0; border-radius:8px; margin-top:12px; overflow:hidden;">
<!-- 工具栏模拟 -->
<div style="display:flex; flex-wrap:wrap; gap:2px; padding:8px 12px; background:#fafafa; border-bottom:1px solid #eee; align-items:center;">
<span style="padding:3px 6px; background:#eee; border-radius:3px; font-size:11px; cursor:pointer;">H1</span>
<span style="padding:3px 6px; background:#eee; border-radius:3px; font-size:11px; cursor:pointer;">H2</span>
<span style="padding:3px 6px; background:#eee; border-radius:3px; font-size:11px; cursor:pointer;">H3</span>
<span style="width:1px; height:16px; background:#ddd; margin:0 4px;"></span>
<span style="padding:3px 6px; background:#eee; border-radius:3px; font-size:11px; font-weight:bold; cursor:pointer;">B</span>
<span style="padding:3px 6px; background:#eee; border-radius:3px; font-size:11px; font-style:italic; cursor:pointer;">I</span>
<span style="padding:3px 6px; background:#eee; border-radius:3px; font-size:11px; text-decoration:line-through; cursor:pointer;">S</span>
<span style="width:1px; height:16px; background:#ddd; margin:0 4px;"></span>
<span style="padding:3px 6px; background:#fff3cd; border-radius:3px; font-size:11px; cursor:pointer; border:1px solid #f4b400;">🎨 文字颜色</span>
<span style="padding:3px 6px; background:#e8f0fe; border-radius:3px; font-size:11px; cursor:pointer; border:1px solid #1a73e8;">🏷 背景色</span>
<span style="width:1px; height:16px; background:#ddd; margin:0 4px;"></span>
<span style="padding:3px 6px; background:#eee; border-radius:3px; font-size:11px; cursor:pointer;">🖼 图片</span>
<span style="padding:3px 6px; background:#eee; border-radius:3px; font-size:11px; cursor:pointer;">😊 表情</span>
<span style="padding:3px 6px; background:#eee; border-radius:3px; font-size:11px; cursor:pointer;">📎 附件</span>
<span style="width:1px; height:16px; background:#ddd; margin:0 4px;"></span>
<span style="padding:3px 6px; background:#eee; border-radius:3px; font-size:11px; cursor:pointer;">📋 表格</span>
<span style="padding:3px 6px; background:#eee; border-radius:3px; font-size:11px; cursor:pointer;">💻 代码块</span>
<span style="padding:3px 6px; background:#eee; border-radius:3px; font-size:11px; cursor:pointer;">📋 列表</span>
<span style="padding:3px 6px; background:#eee; border-radius:3px; font-size:11px; cursor:pointer;">✅ 任务</span>
</div>
<!-- 编辑区模拟 -->
<div style="padding:16px; font-size:13px; line-height:1.9;">
<h1 style="font-size:22px; margin:0 0 8px;">MySQL 索引优化</h1>
<p>聚簇索引的 <span style="background:#fff3cd; padding:2px 6px; border-radius:2px;">叶子节点存储整行数据</span></p>
<p style="color:#d93025; font-weight:600;">⚠ 回表查询会导致性能问题</p>
<p>示例代码：</p>
<code style="background:#f5f5f5; padding:2px 6px; border-radius:3px; font-family:monospace; font-size:12px;">SELECT * FROM users WHERE name = 'Tom'</code>
<p style="margin-top:8px;">😊😂🔥✨💯 🖼️ <span style="color:#1a73e8; text-decoration:underline;">[架构图.png]</span></p>
</div>
</div>
</div>
</div>
<!-- 方案B -->
<div class="card" data-choice="pure-md" onclick="toggleSelect(this)">
<div class="card-body">
<h3>📝 纯 Markdown — EasyMDE / SimpleMDE</h3>
<p style="color:#666; font-size:13px;">经典 Markdown 编辑器，简洁但功能受限。</p>
<div style="background:#fff; border:1px solid #e0e0e0; border-radius:8px; margin-top:12px; overflow:hidden;">
<div style="display:flex; gap:2px; padding:8px 12px; background:#fafafa; border-bottom:1px solid #eee;">
<span style="padding:3px 6px; background:#eee; border-radius:3px; font-size:11px;">B</span>
<span style="padding:3px 6px; background:#eee; border-radius:3px; font-size:11px;">I</span>
<span style="padding:3px 6px; background:#eee; border-radius:3px; font-size:11px;">H</span>
<span style="padding:3px 6px; background:#eee; border-radius:3px; font-size:11px;">🖼</span>
<span style="padding:3px 6px; background:#eee; border-radius:3px; font-size:11px;">🔗</span>
<span style="padding:3px 6px; background:#eee; border-radius:3px; font-size:11px;">📋</span>
</div>
<div style="padding:16px; font-family:monospace; font-size:12px; color:#999; line-height:1.8;">
<span style="color:#aaa;">// 纯文本，没有颜色</span><br>
<span style="color:#aaa;">// 图片要手动填URL</span><br>
<span style="color:#aaa;">// 表情只能用Unicode</span><br><br>
# MySQL 索引优化<br><br>
**回表查询**会导致性能问题<br><br>
![架构图](https://xxx.com/img.png)<br><br>
😊😂🔥
</div>
</div>
</div>
</div>
</div>
<div class="section" style="margin-top:16px;">
<table style="width:100%; border-collapse:collapse; font-size:13px;">
<tr style="background:#f8f9fb;">
<th style="padding:10px; text-align:left; border-bottom:1px solid #eee;">功能</th>
<th style="padding:10px; text-align:center; border-bottom:1px solid #eee;">🌟 增强型</th>
<th style="padding:10px; text-align:center; border-bottom:1px solid #eee;">📝 纯 Markdown</th>
</tr>
<tr>
<td style="padding:8px 10px; border-bottom:1px solid #f0f0f0;">文字颜色 / 背景色</td>
<td style="padding:8px 10px; text-align:center; border-bottom:1px solid #f0f0f0;">✅</td>
<td style="padding:8px 10px; text-align:center; border-bottom:1px solid #f0f0f0;">❌</td>
</tr>
<tr style="background:#fafafa;">
<td style="padding:8px 10px; border-bottom:1px solid #f0f0f0;">插入图片（上传/粘贴）</td>
<td style="padding:8px 10px; text-align:center; border-bottom:1px solid #f0f0f0;">✅ 直接粘贴/拖拽</td>
<td style="padding:8px 10px; text-align:center; border-bottom:1px solid #f0f0f0;">⚠ 手动写URL</td>
</tr>
<tr>
<td style="padding:8px 10px; border-bottom:1px solid #f0f0f0;">表情面板</td>
<td style="padding:8px 10px; text-align:center; border-bottom:1px solid #f0f0f0;">✅ 选择器</td>
<td style="padding:8px 10px; text-align:center; border-bottom:1px solid #f0f0f0;">⚠ 快捷键</td>
</tr>
<tr style="background:#fafafa;">
<td style="padding:8px 10px; border-bottom:1px solid #f0f0f0;">表格编辑</td>
<td style="padding:8px 10px; text-align:center; border-bottom:1px solid #f0f0f0;">✅ 可视化</td>
<td style="padding:8px 10px; text-align:center; border-bottom:1px solid #f0f0f0;">⚠ 手写语法</td>
</tr>
<tr>
<td style="padding:8px 10px;">代码高亮</td>
<td style="padding:8px 10px; text-align:center;">✅</td>
<td style="padding:8px 10px; text-align:center;">✅</td>
</tr>
</table>
</div>
<div style="margin-top:16px; padding:14px 18px; background:#f0f7ff; border-radius:8px; border-left:3px solid #1a73e8;">
<strong>💡 建议选增强型：</strong>Tiptap 是现代 Web 编辑器的事实标准，飞书/Notion 级别的体验。支持 Markdown 快捷输入（打 <code>#</code> 自动变标题），同时拥有完整的格式化工具栏。完全满足你"设置文字颜色、插入图片表情"的需求。
</div>