mokeeText/.superpowers/brainstorm/1236-1782196029/content/overall-layout.html

<h2>整体布局方案</h2>
<p class="subtitle">左侧双面板（笔记 + 网站管理） + 右侧内容区，类似飞书文档的简洁风格</p>

<div class="mockup">
  <div class="mockup-header">MoKeeText — Web 记事本整体布局</div>
  <div class="mockup-body">
    <div style="display:flex; height:500px; border:1px solid #e0e0e0; border-radius:8px; overflow:hidden; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;">

      <!-- 左侧边栏 -->
      <div style="width:260px; 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:#666; cursor:pointer;">🔐 网站</div>
        </div>

        <!-- 笔记面板 -->
        <div style="flex:1; display:flex; flex-direction:column; padding:8px;">

          <!-- 搜索框 -->
          <div style="padding:4px 0 8px;">
            <input placeholder="🔍  搜索笔记..." style="width:100%; padding:6px 10px; border:1px solid #ddd; border-radius:6px; font-size:12px; background:#fff; box-sizing:border-box;">
          </div>

          <!-- 新建按钮 -->
          <button style="width:100%; padding:8px; background:#1a73e8; color:#fff; border:none; border-radius:6px; font-size:13px; cursor:pointer; margin-bottom:8px;">+ 新建笔记</button>

          <!-- 文件夹树 -->
          <div style="flex:1; overflow-y:auto; font-size:13px;">
            <div style="padding:4px 8px; color:#999; font-size:11px; text-transform:uppercase; letter-spacing:0.5px;">文件夹</div>

            <div style="padding:6px 8px; border-radius:4px; cursor:pointer; display:flex; align-items:center; gap:6px;">
              <span style="color:#f4b400;">📁</span> <span style="font-weight:500;">全部笔记</span> <span style="color:#999; font-size:11px; margin-left:auto;">12</span>
            </div>

            <div style="padding:6px 8px; margin-left:12px; border-radius:4px; cursor:pointer; display:flex; align-items:center; gap:6px; background:#e8f0fe; color:#1a73e8;">
              <span>📂</span> <span>工作</span> <span style="font-size:11px; margin-left:auto;">5</span>
            </div>

            <div style="padding:6px 8px; margin-left:12px; border-radius:4px; cursor:pointer; display:flex; align-items:center; gap:6px;">
              <span>📂</span> <span>个人</span> <span style="font-size:11px; margin-left:auto;">4</span>
            </div>

            <div style="padding:6px 8px; margin-left:12px; border-radius:4px; cursor:pointer; display:flex; align-items:center; gap:6px;">
              <span>📂</span> <span>学习笔记</span> <span style="font-size:11px; margin-left:auto;">3</span>
            </div>

            <div style="padding:8px 8px 4px; margin-top:12px; color:#999; font-size:11px; text-transform:uppercase; letter-spacing:0.5px;">标签</div>
            <div style="display:flex; flex-wrap:wrap; gap:4px; padding:4px 8px;">
              <span style="background:#e8eaed; padding:2px 8px; border-radius:10px; font-size:11px;">python</span>
              <span style="background:#e8eaed; padding:2px 8px; border-radius:10px; font-size:11px;">mysql</span>
              <span style="background:#e8eaed; padding:2px 8px; border-radius:10px; font-size:11px;">前端</span>
              <span style="background:#e8eaed; padding:2px 8px; border-radius:10px; font-size:11px;">部署</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧主内容区 -->
      <div style="flex:1; display:flex; flex-direction:column; background:#fff;">

        <!-- 顶部标题栏 -->
        <div style="padding:12px 20px; border-bottom:1px solid #f0f0f0; display:flex; align-items:center; justify-content:space-between;">
          <div style="display:flex; align-items:center; gap:10px;">
            <span style="font-size:18px; font-weight:600; color:#333;">📄 MySQL 索引优化笔记</span>
            <span style="font-size:11px; color:#999; background:#f0f0f0; padding:2px 8px; border-radius:10px;">已自动保存</span>
          </div>
          <div style="display:flex; gap:8px;">
            <span style="font-size:12px; color:#999;">🏷️ python</span>
            <span style="font-size:12px; color:#999;">🏷️ mysql</span>
            <button style="padding:4px 12px; border:1px solid #ddd; border-radius:4px; background:#fff; font-size:12px; cursor:pointer;">+ 标签</button>
          </div>
        </div>

        <!-- Markdown 编辑器区域 -->
        <div style="flex:1; display:flex;">
          <!-- 编辑区 -->
          <div style="flex:1; padding:20px; border-right:1px solid #f0f0f0; overflow-y:auto;">
            <div style="color:#ccc; font-size:12px; margin-bottom:4px;">Markdown 编辑</div>
            <div style="font-family:'JetBrains Mono','Consolas',monospace; font-size:14px; line-height:1.8; color:#333;">
              <span style="color:#1a73e8;"># MySQL 索引优化</span><br><br>
              <span style="color:#1a73e8;">## </span>B+Tree 索引原理<br><br>
              <span style="color:#1a73e8;">### </span>聚簇索引 vs 二级索引<br><br>
              - 聚簇索引的<span style="background:#fff3cd; padding:1px 4px;">叶子节点存储整行数据</span><br>
              - 二级索引叶子节点存储<span style="background:#fff3cd; padding:1px 4px;">主键值</span><br>
              - <span style="color:#d93025;">回表查询</span>通过二级索引找到主键<br>
              &nbsp;&nbsp;再到聚簇索引查找完整行<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> &nbsp;&nbsp;<span style="color:#999;">// 跳过了 a</span><br>
              <span style="color:#d93025;">WHERE c = 1</span> &nbsp;&nbsp;<span style="color:#999;">// 跳过了 a, b</span>
            </div>
          </div>
          <!-- 预览区 -->
          <div style="flex:1; padding:20px; background:#fcfcfc; overflow-y:auto;">
            <div style="color:#ccc; font-size:12px; margin-bottom:4px;">预览</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>
              <h3 style="font-size:15px; margin:12px 0 6px;">聚簇索引 vs 二级索引</h3>
              <ul style="padding-left:20px;">
                <li>聚簇索引的 <mark style="background:#fff3cd;">叶子节点存储整行数据</mark></li>
                <li>二级索引叶子节点存储 <mark style="background:#fff3cd;">主键值</mark></li>
                <li><span style="color:#d93025;">回表查询</span>通过二级索引找到主键再到聚簇索引查找完整行</li>
              </ul>
              <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>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<div style="margin-top:16px; padding:12px 16px; background:#f0f7ff; border-radius:8px; border-left:3px solid #1a73e8;">
  <strong>布局说明：</strong>
  <ul style="margin:8px 0 0; padding-left:20px; font-size:13px; color:#555;">
    <li><strong>左侧</strong>：笔记/网站双面板切换，含搜索、文件夹树、标签列表</li>
    <li><strong>右侧</strong>：Markdown 编辑器，左半屏编辑 + 右半屏实时预览</li>
    <li>风格参考飞书 — 大量留白、圆角卡片、柔和阴影、蓝色强调</li>
  </ul>
</div>