204 lines
7.8 KiB
HTML
204 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="Content-Security-Policy"
|
|
content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com; font-src 'self' data: https://cdnjs.cloudflare.com; connect-src 'self' http://localhost:12138 http://127.0.0.1:12138">
|
|
<title>2FA 账号管理器</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- 左侧区域 -->
|
|
<div class="list-panel">
|
|
<div class="panel-header">
|
|
<h1><i class="fa-solid fa-shield-halved"></i> 账号列表</h1>
|
|
<div class="search-box">
|
|
<i class="fa-solid fa-magnifying-glass search-icon"></i>
|
|
<input type="text" id="searchInput" placeholder="搜索账号..." />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 内容区域：左边资料库 + 右边账号卡片 -->
|
|
<div class="content-area">
|
|
<!-- 资料库侧边栏 -->
|
|
<div class="vault-sidebar">
|
|
<div class="vault-sidebar-header">
|
|
<span>资料库</span>
|
|
</div>
|
|
|
|
<div class="vault-items">
|
|
<div class="vault-row all-vault active" onclick="selectVault(null)">
|
|
<span class="vault-name">全部</span>
|
|
<span class="vault-count" id="allCount">0</span>
|
|
</div>
|
|
<div id="vaultList">
|
|
<!-- 动态生成资料库列表 -->
|
|
</div>
|
|
</div>
|
|
|
|
<button class="vault-add-btn" onclick="showAddVaultForm()">
|
|
<span>+ 新增</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 账号卡片区域 -->
|
|
<div class="accounts-list" id="accountsList">
|
|
<!-- 动态生成账号卡片 -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pagination" id="pagination">
|
|
<button id="prevBtn" class="page-btn" disabled><i class="fa-solid fa-chevron-left"></i> 上一页</button>
|
|
<span class="page-info" id="pageInfo">1 / 1</span>
|
|
<button id="nextBtn" class="page-btn">下一页 <i class="fa-solid fa-chevron-right"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧：表单区域 -->
|
|
<div class="form-panel">
|
|
<!-- 新增资料库表单 (隐藏) -->
|
|
<div class="vault-form-section" id="vaultFormSection" style="display: none;">
|
|
<h3><i class="fa-solid fa-folder-plus"></i> <span id="vaultFormTitle">新增资料库</span></h3>
|
|
<input type="hidden" id="vaultId" value="">
|
|
<div class="form-group">
|
|
<label for="vaultName">资料库名称</label>
|
|
<input type="text" id="vaultName" placeholder="如: 工作账号、游戏账号" maxlength="20">
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" id="cancelVaultBtn" class="btn-secondary">取消</button>
|
|
<button type="button" id="saveVaultBtn" class="btn-primary">保存</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<h2 id="formTitle"><i class="fa-solid fa-user-plus"></i> 添加账号</h2>
|
|
<form id="accountForm">
|
|
<input type="hidden" id="accountId" value="">
|
|
<input type="hidden" id="accountVaultId" value="">
|
|
|
|
|
|
|
|
<div class="form-group">
|
|
<label for="username">用户名</label>
|
|
<input type="text" id="username" placeholder="登录用户名">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password">密码</label>
|
|
<input type="text" id="password" placeholder="登录密码">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="totpSecret">2FA 密钥</label>
|
|
<input type="text" id="totpSecret" placeholder="TOTP Secret Key">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email">关联邮箱</label>
|
|
<input type="email" id="email" placeholder="关联邮箱">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="proxy">代理</label>
|
|
<input type="text" id="proxy" placeholder="如: socks5://127.0.0.1:1080">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="browserId">Browser ID</label>
|
|
<input type="text" id="browserId" placeholder="Browser 环境 ID 或名称">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="tags">标签</label>
|
|
<input type="text" id="tags" placeholder="用逗号分隔，如: 工作, 社交">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="notes">备注</label>
|
|
<textarea id="notes" rows="2" placeholder="其他备忘信息..."></textarea>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="button" id="cancelBtn" class="btn-secondary">取消</button>
|
|
<button type="submit" class="btn-primary"><i class="fa-solid fa-floppy-disk"></i> 保存</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 随机生成器 -->
|
|
<div class="generator-section">
|
|
<h3><i class="fa-solid fa-wand-magic-sparkles"></i> 随机生成器</h3>
|
|
|
|
<div class="generator-item">
|
|
<label>随机姓名</label>
|
|
<div class="generator-row">
|
|
<input type="text" id="randomFullName" readonly placeholder="First Last">
|
|
<button type="button" id="rollName" class="btn-icon" title="重新生成"><i class="fa-solid fa-dice"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="generator-item">
|
|
<label>用户名 (基于姓名)</label>
|
|
<div class="generator-row">
|
|
<input type="text" id="randomUsername" readonly>
|
|
<button type="button" class="btn-icon copy-btn" data-target="randomUsername" title="复制"><i
|
|
class="fa-solid fa-copy"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="generator-item">
|
|
<label>随机密码</label>
|
|
<div class="password-options">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="pwdUppercase" checked> A-Z
|
|
</label>
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="pwdLowercase" checked> a-z
|
|
</label>
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="pwdNumbers" checked> 0-9
|
|
</label>
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="pwdSymbols" checked> !@#
|
|
</label>
|
|
<label class="checkbox-label">
|
|
长度: <input type="number" id="pwdLength" value="16" min="8" max="64" style="width: 50px;">
|
|
</label>
|
|
</div>
|
|
<div class="generator-row">
|
|
<input type="text" id="randomPassword" readonly>
|
|
<button type="button" id="rollPassword" class="btn-icon" title="重新生成"><i
|
|
class="fa-solid fa-dice"></i></button>
|
|
<button type="button" class="btn-icon copy-btn" data-target="randomPassword" title="复制"><i
|
|
class="fa-solid fa-copy"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 迁移对话框 -->
|
|
<div class="modal" id="moveModal" style="display: none;">
|
|
<div class="modal-content">
|
|
<h3><i class="fa-solid fa-truck-arrow-right"></i> 迁移账号到资料库</h3>
|
|
<select id="moveToVault"></select>
|
|
<div class="modal-actions">
|
|
<button type="button" id="cancelMoveBtn" class="btn-secondary">取消</button>
|
|
<button type="button" id="confirmMoveBtn" class="btn-primary">确认迁移</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast 提示 -->
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<script src="renderer.js"></script>
|
|
</body>
|
|
|
|
</html>
|