277 lines
16 KiB
HTML
277 lines
16 KiB
HTML
<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="例如： 网址: https://github.com 账号: zhangsan@qq.com 密码: Abc123456 备注: 新注册的开发账号">网址: 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>
|