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>

169
.superpowers/brainstorm/1938-1782198423/content/layout-v2.html Normal file
View File

@@ -0,0 +1,169 @@
<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>

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>

276
.superpowers/brainstorm/1938-1782198423/content/website-manager.html Normal file
View File

@@ -0,0 +1,276 @@
<h2>🔐 网站管理 — 详细页面</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; 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:480px;">
<!-- 左侧网站列表 -->
<div style="width:260px; min-width:260px; background:#f8f9fb; border-right:1px solid #eee; display:flex; flex-direction:column; padding:12px;">
<!-- 顶部分组统计 -->
<div style="display:flex; gap:6px; margin-bottom:10px;">
<div style="flex:1; text-align:center; padding:8px 4px; background:#fff; border-radius:6px; border:1px solid #e0e0e0; font-size:11px;">
<div style="font-size:18px; font-weight:700; color:#1a73e8;">12</div>
<div style="color:#888;">网站</div>
</div>
<div style="flex:1; text-align:center; padding:8px 4px; background:#fff; border-radius:6px; border:1px solid #e0e0e0; font-size:11px;">
<div style="font-size:18px; font-weight:700; color:#34a853;">18</div>
<div style="color:#888;">账号</div>
</div>
</div>
<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:6px 10px; border-radius:6px; cursor:pointer; background:#e8f0fe; margin-bottom:2px; display:flex; align-items:center; gap:8px;">
<span style="font-size:16px;">🌐</span>
<div style="flex:1; min-width:0;">
<div style="font-weight:600; color:#1a73e8; font-size:13px;">github.com</div>
<div style="font-size:10px; color:#888;">2 个账号</div>
</div>
<span style="color:#1a73e8;">→</span>
</div>
<div style="padding:6px 10px; border-radius:6px; cursor:pointer; margin-bottom:2px; display:flex; align-items:center; gap:8px;">
<span style="font-size:16px;">🌐</span>
<div style="flex:1; min-width:0;">
<div style="font-weight:500; font-size:13px;">gitee.com</div>
<div style="font-size:10px; color:#bbb;">1 个账号</div>
</div>
</div>
<div style="padding:6px 10px; border-radius:6px; cursor:pointer; margin-bottom:2px; display:flex; align-items:center; gap:8px;">
<span style="font-size:16px;">☁️</span>
<div style="flex:1; min-width:0;">
<div style="font-weight:500; font-size:13px;">aliyun.com</div>
<div style="font-size:10px; color:#bbb;">1 个账号</div>
</div>
</div>
<div style="padding:6px 10px; border-radius:6px; cursor:pointer; margin-bottom:2px; display:flex; align-items:center; gap:8px;">
<span style="font-size:16px;">☁️</span>
<div style="flex:1; min-width:0;">
<div style="font-weight:500; font-size:13px;">cloud.tencent.com</div>
<div style="font-size:10px; color:#bbb;">2 个账号</div>
</div>
</div>
<div style="padding:6px 10px; border-radius:6px; cursor:pointer; margin-bottom:2px; display:flex; align-items:center; gap:8px;">
<span style="font-size:16px;">📦</span>
<div style="flex:1; min-width:0;">
<div style="font-weight:500; font-size:13px;">npmjs.com</div>
<div style="font-size:10px; color:#bbb;">1 个账号</div>
</div>
</div>
<div style="padding:6px 10px; border-radius:6px; cursor:pointer; margin-bottom:2px; display:flex; align-items:center; gap:8px;">
<span style="font-size:16px;">🐳</span>
<div style="flex:1; min-width:0;">
<div style="font-weight:500; font-size:13px;">hub.docker.com</div>
<div style="font-size:10px; color:#bbb;">1 个账号</div>
</div>
</div>
</div>
</div>
<!-- 右侧账号详情 -->
<div style="flex:1; display:flex; flex-direction:column; background:#fff; min-width:0;">
<!-- 网站信息头 -->
<div style="padding:14px 20px; border-bottom:1px solid #f0f0f0; display:flex; align-items:center; justify-content:space-between;">
<div>
<span style="font-size:16px; font-weight:600;">🌐 github.com</span>
<a href="#" style="font-size:11px; color:#1a73e8; margin-left:8px; text-decoration:none;">🔗 https://github.com</a>
</div>
<div style="display:flex; gap:6px;">
<button style="padding:5px 12px; border:1px solid #ddd; border-radius:4px; background:#fff; font-size:12px; cursor:pointer;">✏️ 编辑</button>
<button style="padding:5px 12px; border:1px solid #ddd; border-radius:4px; background:#fff; font-size:12px; cursor:pointer;">+ 添加账号</button>
</div>
</div>
<!-- 账号卡片列表 -->
<div style="flex:1; overflow-y:auto; padding:16px 20px;">
<div style="display:flex; flex-direction:column; gap:12px;">
<!-- 账号卡片 -->
<div style="padding:16px; background:#fafafa; border:1px solid #f0f0f0; border-radius:10px; transition:all 0.2s;">
<div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px;">
<div>
<span style="font-weight:600; font-size:14px;">👤 主账号</span>
<span style="font-size:11px; color:#999; margin-left:8px;">备注: 个人开发用</span>
</div>
<div style="display:flex; gap:4px;">
<button style="padding:3px 10px; border:none; background:transparent; font-size:11px; color:#888; cursor:pointer;">✏️</button>
<button style="padding:3px 10px; border:none; background:transparent; font-size:11px; color:#d93025; cursor:pointer;">🗑</button>
</div>
</div>
<div style="display:grid; grid-template-columns:60px 1fr auto; gap:8px 12px; font-size:13px; align-items:center;">
<span style="color:#888;">账号</span>
<span style="font-family:'JetBrains Mono',monospace;">zhangsan@gmail.com</span>
<button style="padding:2px 10px; border:1px solid #e0e0e0; border-radius:4px; background:#fff; font-size:11px; cursor:pointer;">📋 复制</button>
<span style="color:#888;">密码</span>
<span style="font-family:'JetBrains Mono',monospace;">
<span class="pw-hidden">••••••••••</span>
</span>
<div style="display:flex; gap:4px;">
<button style="padding:2px 10px; border:1px solid #e0e0e0; border-radius:4px; background:#fff; font-size:11px; cursor:pointer;">👁</button>
<button style="padding:2px 10px; border:1px solid #e0e0e0; border-radius:4px; background:#fff; font-size:11px; cursor:pointer;">📋</button>
</div>
<span style="color:#888;">登录说明</span>
<span style="color:#666; font-size:12px;">GitHub 个人账号，用于开源项目和 Issue 管理。开启了两步验证。</span>
<span></span>
<span style="color:#888;">添加时间</span>
<span style="color:#bbb; font-size:11px;">2025-06-15</span>
<span></span>
</div>
</div>
<!-- 第二张账号卡片 -->
<div style="padding:16px; background:#fafafa; border:1px solid #f0f0f0; border-radius:10px;">
<div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px;">
<div>
<span style="font-weight:600; font-size:14px;">👤 工作账号</span>
<span style="font-size:11px; color:#999; margin-left:8px;">备注: 公司项目</span>
</div>
<div style="display:flex; gap:4px;">
<button style="padding:3px 10px; border:none; background:transparent; font-size:11px; color:#888; cursor:pointer;">✏️</button>
<button style="padding:3px 10px; border:none; background:transparent; font-size:11px; color:#d93025; cursor:pointer;">🗑</button>
</div>
</div>
<div style="display:grid; grid-template-columns:60px 1fr auto; gap:8px 12px; font-size:13px; align-items:center;">
<span style="color:#888;">账号</span>
<span style="font-family:'JetBrains MS',monospace;">zhangsan@company.com</span>
<button style="padding:2px 10px; border:1px solid #e0e0e0; border-radius:4px; background:#fff; font-size:11px; cursor:pointer;">📋</button>
<span style="color:#888;">密码</span>
<span style="font-family:monospace;">••••••••••</span>
<div style="display:flex; gap:4px;">
<button style="padding:2px 10px; border:1px solid #e0e0e0; border-radius:4px; background:#fff; font-size:11px; cursor:pointer;">👁</button>
<button style="padding:2px 10px; border:1px solid #e0e0e0; border-radius:4px; background:#fff; font-size:11px; cursor:pointer;">📋</button>
</div>
<span style="color:#888;">登录说明</span>
<span style="color:#666; font-size:12px;">公司 GitHub 组织账号，用于私有仓库和企业项目</span>
<span></span>
<span style="color:#888;">添加时间</span>
<span style="color:#bbb; font-size:11px;">2025-08-20</span>
<span></span>
</div>
</div>
</div>
</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; padding:24px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;">
<div style="max-width:520px; margin:0 auto;">
<!-- 步骤说明 -->
<div style="display:flex; gap:12px; margin-bottom:20px;">
<div style="flex:1; text-align:center;">
<div style="width:28px; height:28px; border-radius:50%; background:#1a73e8; color:#fff; font-weight:700; line-height:28px; margin:0 auto 4px; font-size:13px;">1</div>
<div style="font-size:11px; color:#666;">粘贴原始文本</div>
</div>
<div style="color:#ddd; font-size:20px; padding-top:4px;">→</div>
<div style="flex:1; text-align:center;">
<div style="width:28px; height:28px; border-radius:50%; background:#e8eaed; color:#666; font-weight:700; line-height:28px; margin:0 auto 4px; font-size:13px;">2</div>
<div style="font-size:11px; color:#666;">自动识别解析</div>
</div>
<div style="color:#ddd; font-size:20px; padding-top:4px;">→</div>
<div style="flex:1; text-align:center;">
<div style="width:28px; height:28px; border-radius:50%; background:#e8eaed; color:#666; font-weight:700; line-height:28px; margin:0 auto 4px; font-size:13px;">3</div>
<div style="font-size:11px; color:#666;">确认插入</div>
</div>
</div>
<!-- 输入框 -->
<div style="margin-bottom:12px;">
<label style="font-size:12px; font-weight:600; color:#555; display:block; margin-bottom:4px;">📋 粘贴你收到的账号信息（任意格式）</label>
<textarea style="width:100%; height:90px; padding:10px 12px; border:2px solid #1a73e8; border-radius:8px; font-size:13px; font-family:-apple-system,sans-serif; resize:vertical; box-sizing:border-box; outline:none; background:#f8faff;" placeholder="例如：&#10;网址: https://github.com&#10;账号: zhangsan@qq.com&#10;密码: Abc123456&#10;备注: 新注册的开发账号">网址: https://github.com
账号: zhangsan_new@qq.com
密码: Xyz789!@#
备注: 新注册的开发账号</textarea>
</div>
<button style="width:100%; padding:10px; background:#1a73e8; color:#fff; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; margin-bottom:16px;">🔍 自动识别</button>
<!-- 识别结果预览 -->
<div style="background:#f0fdf4; border:1px solid #86efac; border-radius:8px; padding:14px 16px;">
<div style="font-size:12px; font-weight:600; color:#166534; margin-bottom:10px;">✅ 识别结果预览</div>
<div style="display:grid; grid-template-columns:80px 1fr; gap:6px 12px; font-size:13px;">
<span style="color:#666;">🌐 网址</span>
<span style="font-weight:500;">https://github.com</span>
<span style="color:#666;">🏷 网站名</span>
<span style="font-weight:500;">github.com</span>
<span style="color:#666;">👤 账号</span>
<span style="font-weight:500; font-family:monospace;">zhangsan_new@qq.com</span>
<span style="color:#666;">🔑 密码</span>
<span style="font-weight:500; font-family:monospace;">Xyz789!@#</span>
<span style="color:#666;">📝 备注</span>
<span style="font-weight:500;">新注册的开发账号</span>
</div>
<!-- 匹配提示 -->
<div style="margin-top:10px; padding:8px 12px; background:#fff3cd; border-radius:6px; font-size:12px; color:#92600a;">
⚠️ <strong>github.com</strong> 已存在（2个账号），此账号将被添加到该网站下
</div>
<!-- 操作按钮 -->
<div style="display:flex; gap:8px; margin-top:12px;">
<button style="flex:1; padding:8px; background:#166534; color:#fff; border:none; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer;">✅ 确认添加</button>
<button style="padding:8px 16px; background:#fff; color:#666; border:1px solid #ddd; border-radius:6px; font-size:13px; cursor:pointer;">取消</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section" style="margin-top:16px;">
<div class="pros-cons">
<div class="pros">
<h4>✅ 交互流程</h4>
<ul>
<li>左侧网站列表，显示网站名 + 账号数量</li>
<li>点击网站，右侧显示该网站所有账号卡片</li>
<li>密码默认隐藏，点击👁显示，📋复制</li>
<li>每个账号卡片独立编辑/删除</li>
</ul>
</div>
<div class="cons">
<h4>💡 智能导入逻辑</h4>
<ul>
<li>粘贴任意格式文本 → 自动提取字段</li>
<li>根据网址匹配已有网站 → 存在则追加账号，不存在则新建</li>
<li>确认前预览，防止解析错误</li>
</ul>
</div>
</div>
</div>

225
.superpowers/brainstorm/1938-1782198423/content/website-v2.html Normal file
View File

@@ -0,0 +1,225 @@
<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; 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:500px;">
<!-- 左侧：文件夹 + 网站列表 -->
<div style="width:270px; min-width:270px; 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:4px;">📥 智能导入</button>
<button style="width:100%; padding:6px; background:transparent; color:#888; border:none; border-radius:6px; font-size:12px; 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="margin-bottom:6px;">
<div style="padding:4px 6px; display:flex; align-items:center; gap:4px; cursor:pointer;">
<span style="font-size:10px; color:#888;">▼</span> 📁 <span style="font-weight:600; font-size:12px;">代码托管</span>
<span style="color:#bbb; font-size:10px; margin-left:auto;">3</span>
</div>
<!-- 文件夹内的网站 -->
<div style="margin-left:16px;">
<div style="padding:5px 8px; border-radius:4px; cursor:pointer; background:#e8f0fe; color:#1a73e8; font-weight:500; font-size:12px; margin:1px 0;">🌐 github.com <span style="color:#999; font-weight:400; font-size:10px; float:right;">2</span></div>
<div style="padding:5px 8px; border-radius:4px; cursor:pointer; font-size:12px; margin:1px 0;">🌐 gitee.com <span style="color:#bbb; font-size:10px; float:right;">1</span></div>
<div style="padding:5px 8px; border-radius:4px; cursor:pointer; font-size:12px; margin:1px 0;">🌐 gitlab.com <span style="color:#bbb; font-size:10px; float:right;">1</span></div>
</div>
</div>
<!-- 文件夹：云服务 -->
<div style="margin-bottom:6px;">
<div style="padding:4px 6px; display:flex; align-items:center; gap:4px; cursor:pointer;">
<span style="font-size:10px; color:#888;">▶</span> ☁️ <span style="font-weight:600; font-size:12px;">云服务</span>
<span style="color:#bbb; font-size:10px; margin-left:auto;">3</span>
</div>
</div>
<!-- 文件夹：开发工具 -->
<div style="margin-bottom:6px;">
<div style="padding:4px 6px; display:flex; align-items:center; gap:4px; cursor:pointer;">
<span style="font-size:10px; color:#888;">▶</span> 🛠 <span style="font-weight:600; font-size:12px;">开发工具</span>
<span style="color:#bbb; font-size:10px; margin-left:auto;">2</span>
</div>
</div>
<!-- 未分类 -->
<div style="padding:4px 6px; color:#aaa; font-size:11px; letter-spacing:0.5px; margin-top:4px;">未分类</div>
<div style="padding:5px 8px; border-radius:4px; cursor:pointer; font-size:12px; margin:1px 0;">🌐 example.com <span style="color:#bbb; font-size:10px; float:right;">1</span></div>
</div>
</div>
<!-- 右侧账号详情（同上） -->
<div style="flex:1; display:flex; flex-direction:column; background:#fff; min-width:0;">
<div style="padding:14px 20px; border-bottom:1px solid #f0f0f0; display:flex; align-items:center; justify-content:space-between;">
<div>
<span style="font-size:11px; color:#888;">📁 代码托管 / </span><span style="font-size:16px; font-weight:600;">🌐 github.com</span>
<a href="#" style="font-size:11px; color:#1a73e8; margin-left:8px; text-decoration:none;">🔗 https://github.com</a>
</div>
<div style="display:flex; gap:6px;">
<button style="padding:5px 12px; border:1px solid #ddd; border-radius:4px; background:#fff; font-size:12px; cursor:pointer;">✏️ 编辑</button>
<button style="padding:5px 12px; border:1px solid #ddd; border-radius:4px; background:#fff; font-size:12px; cursor:pointer;">+ 添加账号</button>
</div>
</div>
<div style="flex:1; overflow-y:auto; padding:16px 20px;">
<div style="display:flex; flex-direction:column; gap:12px;">
<div style="padding:16px; background:#fafafa; border:1px solid #f0f0f0; border-radius:10px;">
<div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px;">
<span style="font-weight:600; font-size:14px;">👤 主账号</span>
<div style="display:flex; gap:4px;">
<button style="padding:3px 10px; border:none; background:transparent; font-size:11px; color:#888; cursor:pointer;">✏️</button>
<button style="padding:3px 10px; border:none; background:transparent; font-size:11px; color:#d93025; cursor:pointer;">🗑</button>
</div>
</div>
<div style="display:grid; grid-template-columns:60px 1fr auto; gap:8px 12px; font-size:13px; align-items:center;">
<span style="color:#888;">账号</span>
<span style="font-family:'JetBrains Mono',monospace;">zhangsan@gmail.com</span>
<button style="padding:2px 10px; border:1px solid #e0e0e0; border-radius:4px; background:#fff; font-size:11px; cursor:pointer;">📋</button>
<span style="color:#888;">密码</span>
<span style="font-family:monospace;">••••••••••</span>
<div style="display:flex; gap:4px;">
<button style="padding:2px 10px; border:1px solid #e0e0e0; border-radius:4px; background:#fff; font-size:11px; cursor:pointer;">👁</button>
<button style="padding:2px 10px; border:1px solid #e0e0e0; border-radius:4px; background:#fff; font-size:11px; cursor:pointer;">📋</button>
</div>
<span style="color:#888;">说明</span>
<span style="color:#666; font-size:12px;">个人开发用</span>
<span></span>
</div>
</div>
<div style="padding:16px; background:#fafafa; border:1px solid #f0f0f0; border-radius:10px;">
<div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px;">
<span style="font-weight:600; font-size:14px;">👤 工作账号</span>
<div style="display:flex; gap:4px;">
<button style="padding:3px 10px; border:none; background:transparent; font-size:11px; color:#888; cursor:pointer;">✏️</button>
<button style="padding:3px 10px; border:none; background:transparent; font-size:11px; color:#d93025; cursor:pointer;">🗑</button>
</div>
</div>
<div style="display:grid; grid-template-columns:60px 1fr auto; gap:8px 12px; font-size:13px; align-items:center;">
<span style="color:#888;">账号</span>
<span style="font-family:monospace;">zhangsan@company.com</span>
<button style="padding:2px 10px; border:1px solid #e0e0e0; border-radius:4px; background:#fff; font-size:11px; cursor:pointer;">📋</button>
<span style="color:#888;">密码</span>
<span style="font-family:monospace;">••••••••••</span>
<div style="display:flex; gap:4px;">
<button style="padding:2px 10px; border:1px solid #e0e0e0; border-radius:4px; background:#fff; font-size:11px; cursor:pointer;">👁</button>
<button style="padding:2px 10px; border:1px solid #e0e0e0; border-radius:4px; background:#fff; font-size:11px; cursor:pointer;">📋</button>
</div>
<span style="color:#888;">说明</span>
<span style="color:#666; font-size:12px;">公司项目</span>
<span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ===== 智能导入 v2 ===== -->
<div class="mockup" style="margin-top:20px;">
<div class="mockup-header">📥 智能导入 v2 — 新格式 + 文件夹选择</div>
<div class="mockup-body">
<div style="border:1px solid #e0e0e0; border-radius:8px; padding:24px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;">
<div style="max-width:560px; margin:0 auto;">
<!-- 输入区 -->
<div style="margin-bottom:12px;">
<label style="font-size:12px; font-weight:600; color:#555; display:block; margin-bottom:4px;">📋 粘贴原始文本（格式：首行 网址+空格+网站名，后续 账号/密码/备注各一行）</label>
<textarea style="width:100%; height:100px; padding:10px 12px; border:2px solid #1a73e8; border-radius:8px; font-size:13px; font-family:-apple-system,sans-serif; resize:vertical; box-sizing:border-box; outline:none; background:#f8faff;" placeholder="格式示例：&#10;https://github.com 代码网站&#10;zhangsan_new@qq.com&#10;Xyz789!@#&#10;新注册的开发账号">https://github.com 代码网站
zhangsan_new@qq.com
Xyz789!@#
新注册的开发账号</textarea>
<div style="font-size:11px; color:#999; margin-top:4px;">
💡 <strong>识别规则：</strong>首行 = 网址 + 空格 + 网站名；第2行 = 账号；第3行 = 密码；第4行 = 备注（可选）
</div>
</div>
<button style="width:100%; padding:10px; background:#1a73e8; color:#fff; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; margin-bottom:14px;">🔍 自动识别</button>
<!-- 识别结果 -->
<div style="background:#f0fdf4; border:1px solid #86efac; border-radius:8px; padding:14px 16px; margin-bottom:16px;">
<div style="font-size:12px; font-weight:600; color:#166534; margin-bottom:10px;">✅ 识别结果</div>
<div style="display:grid; grid-template-columns:70px 1fr; gap:6px 12px; font-size:13px;">
<span style="color:#666;">🌐 网址</span><span style="font-weight:500;">https://github.com</span>
<span style="color:#666;">🏷 网站名</span><span style="font-weight:500;">代码网站</span>
<span style="color:#666;">👤 账号</span><span style="font-weight:500; font-family:monospace;">zhangsan_new@qq.com</span>
<span style="color:#666;">🔑 密码</span><span style="font-weight:500; font-family:monospace;">Xyz789!@#</span>
<span style="color:#666;">📝 备注</span><span style="font-weight:500;">新注册的开发账号</span>
</div>
</div>
<!-- 文件夹选择 -->
<div style="background:#fff; border:1px solid #e0e0e0; border-radius:8px; padding:14px 16px; margin-bottom:16px;">
<div style="font-size:12px; font-weight:600; color:#555; margin-bottom:10px;">📁 选择存放文件夹</div>
<div style="display:flex; gap:8px; margin-bottom:8px;">
<select style="flex:1; padding:8px 10px; border:1px solid #ddd; border-radius:6px; font-size:13px; background:#fff;">
<option>代码托管（已存在：github.com 在此文件夹）</option>
<option>云服务</option>
<option>开发工具</option>
<option>未分类</option>
</select>
<span style="padding:8px 0; font-size:12px; color:#999;">或</span>
<input placeholder="新建文件夹名..." style="flex:1; padding:8px 10px; border:1px solid #ddd; border-radius:6px; font-size:13px; box-sizing:border-box;">
</div>
<!-- 匹配提示 -->
<div style="padding:8px 12px; background:#fff3cd; border-radius:6px; font-size:12px; color:#92600a;">
⚠️ <strong>github.com</strong> 已在「代码托管」文件夹中存在（2个账号），将追加第3个账号
</div>
</div>
<!-- 操作 -->
<div style="display:flex; gap:8px;">
<button style="flex:1; padding:10px; background:#166534; color:#fff; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer;">✅ 确认添加</button>
<button style="padding:10px 20px; background:#fff; color:#666; border:1px solid #ddd; border-radius:8px; font-size:14px; cursor:pointer;">取消</button>
</div>
</div>
</div>
</div>
</div>
<div class="section" style="margin-top:16px;">
<h3>📐 v2 改动总结</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>
<li>未分类网站单独显示</li>
</ul>
</div>
<div style="flex:1; padding:12px; background:#f0fdf4; border-radius:8px;">
<strong>📥 导入格式</strong>
<ul style="margin:6px 0 0; padding-left:18px; font-size:13px; color:#555;">
<li><code>网址 + 空格 + 网站名</code></li>
<li>逐行：账号 → 密码 → 备注</li>
<li>识别后选已有文件夹或新建</li>
<li>同网址自动追加、不同网址自动新建</li>
</ul>
</div>
</div>
</div>

1
.superpowers/brainstorm/1938-1782198423/state/server-stopped Normal file
View File

@@ -0,0 +1 @@
{"reason":"idle timeout","timestamp":1782200884044}

1
.superpowers/brainstorm/1938-1782198423/state/server.pid Normal file
View File

@@ -0,0 +1 @@
1938