226 lines
15 KiB
HTML
226 lines
15 KiB
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; 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="格式示例： https://github.com 代码网站 zhangsan_new@qq.com Xyz789!@# 新注册的开发账号">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>
|