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

131
.superpowers/brainstorm/1938-1782198423/content/overall-layout.html Normal file
View File

@@ -0,0 +1,131 @@
<h2>整体布局方案 — MoKeeText 记事本</h2>
<p class="subtitle">左侧双面板切换（笔记 + 网站管理） + 右侧 Markdown 编辑/预览分屏</p>
<div class="mockup">
<div class="mockup-header">📝 笔记编辑模式 — 整体布局预览</div>
<div class="mockup-body">
<div style="display:flex; height:520px; border:1px solid #e0e0e0; border-radius:8px; overflow:hidden; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;">
<!-- 左侧边栏 -->
<div style="width:250px; min-width:250px; background:#f7f8fa; border-right:1px solid #e8e8e8; display:flex; flex-direction:column;">
<!-- 顶部切换标签 -->
<div style="display:flex; border-bottom:1px solid #e8e8e8;">
<div style="flex:1; text-align:center; padding:10px 0; font-size:13px; font-weight:600; color:#1a73e8; background:#fff; border-bottom:2px solid #1a73e8; cursor:pointer;">📝 笔记</div>
<div style="flex:1; text-align:center; padding:10px 0; font-size:13px; font-weight:500; color:#888; cursor:pointer;">🔐 网站</div>
</div>
<!-- 笔记面板内容 -->
<div style="flex:1; display:flex; flex-direction:column; padding:10px; overflow:hidden;">
<input placeholder="🔍 搜索笔记..." style="width:100%; padding:7px 10px; border:1px solid #ddd; border-radius:6px; font-size:12px; background:#fff; box-sizing:border-box; margin-bottom:8px;">
<button style="width:100%; padding:8px; background:#1a73e8; color:#fff; border:none; border-radius:6px; font-size:13px; cursor:pointer; margin-bottom:10px;">+ 新建笔记</button>
<div style="flex:1; overflow-y:auto; font-size:13px;">
<div style="padding:4px 8px; color:#aaa; font-size:11px; text-transform:uppercase; letter-spacing:0.5px;">📁 文件夹</div>
<div style="padding:5px 8px; border-radius:4px; cursor:pointer; display:flex; align-items:center; gap:6px; margin:1px 0;"><span>📁</span> 全部笔记 <span style="color:#bbb; font-size:11px; margin-left:auto;">12</span></div>
<div style="padding:5px 8px; margin-left:12px; border-radius:4px; cursor:pointer; display:flex; align-items:center; gap:6px; background:#e8f0fe; color:#1a73e8; font-weight:500;"><span>📂</span> 工作 <span style="font-size:11px; margin-left:auto;">5</span></div>
<div style="padding:5px 8px; margin-left:12px; border-radius:4px; cursor:pointer; display:flex; align-items:center; gap:6px;"><span>📂</span> 个人 <span style="font-size:11px; margin-left:auto; color:#bbb;">4</span></div>
<div style="padding:5px 8px; margin-left:12px; border-radius:4px; cursor:pointer; display:flex; align-items:center; gap:6px;"><span>📂</span> 学习 <span style="font-size:11px; margin-left:auto; color:#bbb;">3</span></div>
<div style="padding:8px 8px 4px; margin-top:12px; color:#aaa; font-size:11px; text-transform:uppercase; letter-spacing:0.5px;">🏷️ 标签</div>
<div style="display:flex; flex-wrap:wrap; gap:4px; padding:2px 8px;">
<span style="background:#e8eaed; padding:2px 8px; border-radius:10px; font-size:11px; cursor:pointer;">python</span>
<span style="background:#e8eaed; padding:2px 8px; border-radius:10px; font-size:11px; cursor:pointer;">mysql</span>
<span style="background:#e8eaed; padding:2px 8px; border-radius:10px; font-size:11px; cursor:pointer;">前端</span>
<span style="background:#e8eaed; padding:2px 8px; border-radius:10px; font-size:11px; cursor:pointer;">部署</span>
</div>
</div>
</div>
</div>
<!-- 右侧主内容区 -->
<div style="flex:1; display:flex; flex-direction:column; background:#fff; min-width:0;">
<!-- 标题栏 -->
<div style="padding:10px 20px; border-bottom:1px solid #f0f0f0; display:flex; align-items:center; justify-content:space-between; flex-shrink:0;">
<div style="display:flex; align-items:center; gap:10px;">
<span style="font-size:16px; font-weight:600; color:#333;">MySQL 索引优化笔记</span>
<span style="font-size:10px; color:#999; background:#f0f0f0; padding:2px 8px; border-radius:10px;">✅ 已保存</span>
</div>
<div style="display:flex; gap:6px; align-items:center;">
<span style="font-size:11px; color:#888; background:#f5f5f5; padding:2px 8px; border-radius:10px;">🏷️ python</span>
<span style="font-size:11px; color:#888; background:#f5f5f5; padding:2px 8px; border-radius:10px;">🏷️ mysql</span>
<span style="font-size:11px; color:#1a73e8; cursor:pointer;">+ 标签</span>
</div>
</div>
<!-- 编辑+预览 分屏 -->
<div style="flex:1; display:flex; min-height:0;">
<!-- 编辑区 -->
<div style="flex:1; padding:16px 20px; border-right:1px solid #f0f0f0; overflow-y:auto;">
<div style="color:#ccc; font-size:11px; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.5px;">✏️ 编辑</div>
<div style="font-family:'JetBrains Mono','Consolas',monospace; font-size:13px; line-height:1.9; color:#333;">
<span style="color:#1a73e8;"># MySQL 索引优化</span><br><br>
<span style="color:#1a73e8;">## B+Tree 索引原理</span><br><br>
聚簇索引的<span style="background:#fff3cd; padding:1px 4px;">叶子节点存储整行数据</span><br>
二级索引叶子节点存储<span style="background:#fff3cd; padding:1px 4px;">主键值</span><br><br>
<span style="color:#d93025;">回表查询</span>通过二级索引找到主键<br>
再到聚簇索引查找完整行<br><br>
<span style="color:#1a73e8;">## 最左前缀原则</span><br><br>
<span style="color:#666;">联合索引 (a, b, c) 等价于:</span><br>
- 索引 a<br>
- 索引 (a, b)<br>
- 索引 (a, b, c)<br><br>
<span style="color:#999;">// 无法使用索引的情况:</span><br>
<span style="color:#d93025;">WHERE b = 1</span> — 跳过了 a<br>
<span style="color:#d93025;">WHERE c = 1</span> — 跳过了 a, b
</div>
</div>
<!-- 预览区 -->
<div style="flex:1; padding:16px 20px; background:#fcfcfc; overflow-y:auto;">
<div style="color:#ccc; font-size:11px; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.5px;">👁️ 预览</div>
<div style="font-family:-apple-system,sans-serif; font-size:14px; line-height:1.8; color:#333;">
<h1 style="font-size:24px; margin:0 0 16px; border-bottom:2px solid #eee; padding-bottom:8px;">MySQL 索引优化</h1>
<h2 style="font-size:18px; margin:16px 0 8px;">B+Tree 索引原理</h2>
<p>聚簇索引的 <mark style="background:#fff3cd; padding:1px 4px;">叶子节点存储整行数据</mark></p>
<p>二级索引叶子节点存储 <mark style="background:#fff3cd; padding:1px 4px;">主键值</mark></p>
<p><span style="color:#d93025;">回表查询</span>通过二级索引找到主键再到聚簇索引查找完整行</p>
<h2 style="font-size:18px; margin:16px 0 8px;">最左前缀原则</h2>
<p style="color:#666;">联合索引 (a, b, c) 等价于:</p>
<ul style="padding-left:20px;">
<li>索引 a</li>
<li>索引 (a, b)</li>
<li>索引 (a, b, c)</li>
</ul>
<p style="color:#d93025;">⚠ WHERE b = 1</p>
<p style="color:#d93025;">⚠ WHERE c = 1</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section" style="margin-top:16px;">
<div class="pros-cons">
<div class="pros">
<h4>✅ 布局要点</h4>
<ul>
<li>左侧 250px 固定宽度，笔记/网站一键切换</li>
<li>文件夹树 + 标签筛选，双重组织</li>
<li>右侧 Markdown 编辑/预览 左右分屏</li>
<li>飞书风格：大量留白、轻量阴影、蓝色强调</li>
</ul>
</div>
<div class="cons">
<h4>❓ 待确认</h4>
<ul>
<li>分屏比例是否需要可调？</li>
<li>是否需要纯编辑/纯预览的切换按钮？</li>
<li>左侧面板宽度是否合适？</li>
</ul>
</div>
</div>
</div>