mokeeText/.superpowers/brainstorm/1938-1782198423/content/layout-v2.html

<h2>布局 v2 — 笔记和网站管理分开</h2>
<p class="subtitle">顶部导航切换「笔记」/「网站管理」，各自有独立的侧边栏和内容区</p>

<!-- ============ 笔记视图 ============ -->
<div class="mockup">
  <div class="mockup-header">📝 笔记视图 — 纯编辑模式（预览已关闭）</div>
  <div class="mockup-body">
    <div style="border:1px solid #e0e0e0; border-radius:8px; overflow:hidden; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;">

      <!-- 顶部导航 -->
      <div style="display:flex; align-items:center; padding:0 20px; background:#fff; border-bottom:1px solid #eee; height:48px;">
        <span style="font-weight:700; font-size:15px; color:#333; margin-right:24px;">📝 MoKeeText</span>
        <a style="padding:14px 16px; font-size:13px; font-weight:600; color:#1a73e8; border-bottom:2px solid #1a73e8; text-decoration:none;">📝 笔记</a>
        <a style="padding:14px 16px; font-size:13px; color:#666; text-decoration:none;">🔐 网站管理</a>
        <span style="flex:1;"></span>
        <span style="font-size:11px; color:#aaa;">个人版</span>
      </div>

      <div style="display:flex; height:460px;">

        <!-- 左侧笔记专用边栏 -->
        <div style="width:240px; min-width:240px; background:#f8f9fb; border-right:1px solid #eee; display:flex; flex-direction:column; padding:12px;">
          <input placeholder="🔍  搜索笔记..." style="width:100%; padding:7px 10px; border:1px solid #e0e0e0; border-radius:6px; font-size:12px; 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 6px; color:#aaa; font-size:11px; letter-spacing:0.5px; margin-bottom:2px;">📁 文件夹</div>
            <div style="padding:5px 8px; border-radius:4px; cursor:pointer;">📁 全部笔记 <span style="color:#bbb; font-size:11px; float:right;">12</span></div>
            <div style="padding:5px 8px; margin-left:12px; border-radius:4px; cursor:pointer; background:#e8f0fe; color:#1a73e8; font-weight:500;">📂 工作 <span style="font-size:11px; float:right;">5</span></div>
            <div style="padding:5px 8px; margin-left:12px; border-radius:4px; cursor:pointer;">📂 个人 <span style="font-size:11px; float:right; color:#bbb;">4</span></div>
            <div style="padding:5px 8px; margin-left:12px; border-radius:4px; cursor:pointer;">📂 学习 <span style="font-size:11px; float:right; color:#bbb;">3</span></div>

            <div style="padding:8px 6px 4px; margin-top:12px; color:#aaa; font-size:11px; letter-spacing:0.5px;">🏷️ 标签</div>
            <div style="display:flex; flex-wrap:wrap; gap:4px; padding:2px 6px;">
              <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>
            </div>
          </div>
        </div>

        <!-- 右侧编辑区（纯编辑模式，无预览） -->
        <div style="flex:1; display:flex; flex-direction:column; background:#fff; min-width:0;">
          <div style="padding:8px 20px; border-bottom:1px solid #f0f0f0; display:flex; align-items:center; justify-content:space-between;">
            <span style="font-size:16px; font-weight:600; color:#333;">MySQL 索引优化笔记</span>
            <div style="display:flex; gap:4px; background:#f1f3f4; border-radius:6px; padding:2px;">
              <button style="padding:5px 12px; border:none; background:#fff; border-radius:4px; font-size:12px; font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,0.1); cursor:pointer;">✏️ 编辑</button>
              <button style="padding:5px 12px; border:none; background:transparent; border-radius:4px; font-size:12px; color:#666; cursor:pointer;">👁️ 预览</button>
              <button style="padding:5px 12px; border:none; background:transparent; border-radius:4px; font-size:12px; color:#666; cursor:pointer;">📋 分屏</button>
            </div>
            <div style="display:flex; gap:6px; align-items:center;">
              <span style="font-size:10px; color:#999; background:#f0f0f0; padding:2px 8px; border-radius:10px;">🏷️ mysql</span>
              <span style="font-size:10px; color:#999; background:#f0f0f0; padding:2px 8px; border-radius:10px;">🏷️ python</span>
            </div>
          </div>
          <div style="flex:1; padding:20px; overflow-y:auto; 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 3px;">叶子节点存储整行数据</span><br>
            二级索引叶子节点存储<span style="background:#fff3cd; padding:1px 3px;">主键值</span><br>
            <span style="color:#d93025;">回表查询</span>通过二级索引找到主键再到聚簇索引查找完整行<br><br>
            <span style="color:#1a73e8;">## 最左前缀原则</span><br><br>
            联合索引 (a, b, c) 等价于：<br>
            - 索引 a<br>
            - 索引 (a, b)<br>
            - 索引 (a, b, c)
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ============ 网站管理视图 ============ -->
<div class="mockup" style="margin-top:20px;">
  <div class="mockup-header">🔐 网站管理视图 — 账号密码列表</div>
  <div class="mockup-body">
    <div style="border:1px solid #e0e0e0; border-radius:8px; overflow:hidden; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;">

      <!-- 顶部导航 -->
      <div style="display:flex; align-items:center; padding:0 20px; background:#fff; border-bottom:1px solid #eee; height:48px;">
        <span style="font-weight:700; font-size:15px; color:#333; margin-right:24px;">📝 MoKeeText</span>
        <a style="padding:14px 16px; font-size:13px; color:#666; text-decoration:none;">📝 笔记</a>
        <a style="padding:14px 16px; font-size:13px; font-weight:600; color:#1a73e8; border-bottom:2px solid #1a73e8; text-decoration:none;">🔐 网站管理</a>
      </div>

      <div style="display:flex; height:420px;">

        <!-- 左侧网站列表 -->
        <div style="width:240px; min-width:240px; background:#f8f9fb; border-right:1px solid #eee; display:flex; flex-direction:column; padding:12px;">
          <button style="width:100%; padding:8px; background:#1a73e8; color:#fff; border:none; border-radius:6px; font-size:13px; cursor:pointer; margin-bottom:4px;">+ 添加网站</button>
          <button style="width:100%; padding:8px; background:#fff; color:#1a73e8; border:1px dashed #1a73e8; border-radius:6px; font-size:13px; cursor:pointer; margin-bottom:8px;">📥 智能导入</button>

          <input placeholder="🔍  搜索网站..." style="width:100%; padding:7px 10px; border:1px solid #e0e0e0; border-radius:6px; font-size:12px; box-sizing:border-box; margin-bottom:8px;">

          <div style="flex:1; overflow-y:auto; font-size:13px;">
            <div style="padding:5px 8px; border-radius:4px; cursor:pointer; background:#e8f0fe; color:#1a73e8; font-weight:500; margin:1px 0;">🌐 github.com <span style="font-size:10px; color:#999; float:right;">2个账号</span></div>
            <div style="padding:5px 8px; border-radius:4px; cursor:pointer; margin:1px 0;">🌐 gitee.com <span style="font-size:10px; color:#bbb; float:right;">1个账号</span></div>
            <div style="padding:5px 8px; border-radius:4px; cursor:pointer; margin:1px 0;">🌐 aliyun.com <span style="font-size:10px; color:#bbb; float:right;">1个账号</span></div>
            <div style="padding:5px 8px; border-radius:4px; cursor:pointer; margin:1px 0;">🌐 tencentcloud <span style="font-size:10px; color:#bbb; float:right;">2个账号</span></div>
          </div>
        </div>

        <!-- 右侧账号详情 -->
        <div style="flex:1; display:flex; flex-direction:column; background:#fff; min-width:0;">
          <div style="padding:12px 20px; border-bottom:1px solid #f0f0f0;">
            <span style="font-size:15px; font-weight:600;">🌐 github.com</span>
            <span style="font-size:11px; color:#999; margin-left:8px;">https://github.com</span>
          </div>

          <!-- 账号卡片列表 -->
          <div style="flex:1; overflow-y:auto; padding:16px 20px;">
            <div style="display:flex; flex-direction:column; gap:12px;">

              <!-- 账号卡片 1 -->
              <div style="padding:14px 16px; background:#fafafa; border:1px solid #eee; border-radius:8px;">
                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
                  <span style="font-weight:600; font-size:14px;">👤 主账号</span>
                  <span style="font-size:11px; color:#999;">备注: 个人开发用</span>
                </div>
                <div style="display:grid; grid-template-columns:80px 1fr; gap:6px 12px; font-size:13px;">
                  <span style="color:#888;">账号</span><span style="font-family:monospace;">zhangsan@gmail.com</span>
                  <span style="color:#888;">密码</span><span style="font-family:monospace;">•••••••• <span style="color:#1a73e8; cursor:pointer; font-size:11px;">👁 显示</span> <span style="color:#888; cursor:pointer; font-size:11px;">📋 复制</span></span>
                  <span style="color:#888;">说明</span><span style="color:#666;">GitHub 个人账号，用于开源项目</span>
                </div>
              </div>

              <!-- 账号卡片 2 -->
              <div style="padding:14px 16px; background:#fafafa; border:1px solid #eee; border-radius:8px;">
                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
                  <span style="font-weight:600; font-size:14px;">👤 工作账号</span>
                  <span style="font-size:11px; color:#999;">备注: 公司项目</span>
                </div>
                <div style="display:grid; grid-template-columns:80px 1fr; gap:6px 12px; font-size:13px;">
                  <span style="color:#888;">账号</span><span style="font-family:monospace;">zhangsan@company.com</span>
                  <span style="color:#888;">密码</span><span style="font-family:monospace;">•••••••• <span style="color:#1a73e8; cursor:pointer; font-size:11px;">👁 显示</span> <span style="color:#888; cursor:pointer; font-size:11px;">📋 复制</span></span>
                  <span style="color:#888;">说明</span><span style="color:#666;">公司 GitHub 账号</span>
                </div>
              </div>

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

<div class="section" style="margin-top:16px;">
  <h3>📐 结构调整说明</h3>
  <div style="display:flex; gap:16px;">
    <div style="flex:1; padding:12px; background:#f0f7ff; border-radius:8px;">
      <strong>📝 笔记</strong>
      <ul style="margin:6px 0 0; padding-left:18px; font-size:13px; color:#555;">
        <li>顶部导航栏切换</li>
        <li>左侧：文件夹树 + 标签</li>
        <li>右侧：编辑器，可切换 编辑/预览/分屏 三种模式</li>
      </ul>
    </div>
    <div style="flex:1; padding:12px; background:#f0f7ff; border-radius:8px;">
      <strong>🔐 网站管理</strong>
      <ul style="margin:6px 0 0; padding-left:18px; font-size:13px; color:#555;">
        <li>左侧：网站列表 + 添加/导入按钮</li>
        <li>右侧：选中网站的账号密码卡片</li>
        <li>密码默认隐藏，点击显示/复制</li>
      </ul>
    </div>
  </div>
</div>