feat: 实现便携版并增加一键导出功能
This commit is contained in:
TYt50
322
src/db/database.js
Normal file
322
src/db/database.js
Normal file
@@ -0,0 +1,322 @@
|
||||
const initSqlJs = require('sql.js');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const { app } = require('electron');
|
||||
const CryptoJS = require('crypto-js');
|
||||
|
||||
const ENCRYPTION_KEY = 'your-secret-key-2fa-manager-v1';
|
||||
|
||||
class AccountDatabase {
|
||||
constructor() {
|
||||
this.db = null;
|
||||
this.dbPath = null;
|
||||
this.ready = this.init();
|
||||
}
|
||||
|
||||
async init() {
|
||||
const SQL = await initSqlJs();
|
||||
|
||||
// const userDataPath = app.getPath('userData');
|
||||
// this.dbPath = path.join(userDataPath, 'accounts.db');
|
||||
|
||||
// 便携版：将数据库放在项目根目录下
|
||||
this.dbPath = path.join(process.cwd(), 'accounts.db');
|
||||
|
||||
// 尝试加载现有数据库
|
||||
if (fs.existsSync(this.dbPath)) {
|
||||
const buffer = fs.readFileSync(this.dbPath);
|
||||
this.db = new SQL.Database(buffer);
|
||||
} else {
|
||||
this.db = new SQL.Database();
|
||||
}
|
||||
|
||||
// 创建资料库表
|
||||
this.db.run(`
|
||||
CREATE TABLE IF NOT EXISTS vaults (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
name TEXT NOT NULL UNIQUE,
|
||||
icon TEXT DEFAULT '📁',
|
||||
color TEXT DEFAULT '#3b82f6',
|
||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
||||
)
|
||||
`);
|
||||
|
||||
// 创建账号表
|
||||
this.db.run(`
|
||||
CREATE TABLE IF NOT EXISTS accounts (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
vault_id INTEGER DEFAULT NULL,
|
||||
name TEXT NOT NULL,
|
||||
username TEXT,
|
||||
password TEXT,
|
||||
totp_secret TEXT,
|
||||
tags TEXT,
|
||||
email TEXT,
|
||||
proxy TEXT,
|
||||
notes TEXT,
|
||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||
FOREIGN KEY (vault_id) REFERENCES vaults(id)
|
||||
)
|
||||
`);
|
||||
|
||||
// 迁移: 添加 tags 和 vault_id 和 proxy 列 (如果不存在)
|
||||
try { this.db.run(`ALTER TABLE accounts ADD COLUMN tags TEXT`); } catch (e) { }
|
||||
try { this.db.run(`ALTER TABLE accounts ADD COLUMN vault_id INTEGER`); } catch (e) { }
|
||||
try { this.db.run(`ALTER TABLE accounts ADD COLUMN proxy TEXT`); } catch (e) { }
|
||||
|
||||
// 创建默认资料库 (如果不存在)
|
||||
const defaultVault = this.db.exec("SELECT id FROM vaults WHERE name = '默认'");
|
||||
if (!defaultVault.length || !defaultVault[0].values.length) {
|
||||
this.db.run("INSERT INTO vaults (name, icon) VALUES ('默认', '🏠')");
|
||||
}
|
||||
|
||||
// 创建索引
|
||||
this.db.run(`CREATE INDEX IF NOT EXISTS idx_accounts_name ON accounts(name)`);
|
||||
this.db.run(`CREATE INDEX IF NOT EXISTS idx_accounts_username ON accounts(username)`);
|
||||
this.db.run(`CREATE INDEX IF NOT EXISTS idx_accounts_vault ON accounts(vault_id)`);
|
||||
|
||||
this.save();
|
||||
return true;
|
||||
}
|
||||
|
||||
save() {
|
||||
if (!this.db || !this.dbPath) return;
|
||||
const data = this.db.export();
|
||||
const buffer = Buffer.from(data);
|
||||
fs.writeFileSync(this.dbPath, buffer);
|
||||
}
|
||||
|
||||
encrypt(text) {
|
||||
if (!text) return '';
|
||||
return CryptoJS.AES.encrypt(text, ENCRYPTION_KEY).toString();
|
||||
}
|
||||
|
||||
decrypt(ciphertext) {
|
||||
if (!ciphertext) return '';
|
||||
try {
|
||||
const bytes = CryptoJS.AES.decrypt(ciphertext, ENCRYPTION_KEY);
|
||||
return bytes.toString(CryptoJS.enc.Utf8);
|
||||
} catch (e) {
|
||||
return ciphertext;
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 资料库操作 ====================
|
||||
|
||||
async getVaults() {
|
||||
await this.ready;
|
||||
const result = this.db.exec(`
|
||||
SELECT v.*, COUNT(a.id) as account_count
|
||||
FROM vaults v
|
||||
LEFT JOIN accounts a ON a.vault_id = v.id
|
||||
GROUP BY v.id
|
||||
ORDER BY v.created_at ASC
|
||||
`);
|
||||
|
||||
if (!result.length) return [];
|
||||
|
||||
const columns = result[0].columns;
|
||||
return result[0].values.map(row => {
|
||||
const obj = {};
|
||||
columns.forEach((col, i) => obj[col] = row[i]);
|
||||
return obj;
|
||||
});
|
||||
}
|
||||
|
||||
async addVault(vault) {
|
||||
await this.ready;
|
||||
this.db.run(`INSERT INTO vaults (name, icon, color) VALUES (?, ?, ?)`, [
|
||||
vault.name,
|
||||
vault.icon || '📁',
|
||||
vault.color || '#3b82f6'
|
||||
]);
|
||||
this.save();
|
||||
|
||||
const result = this.db.exec('SELECT last_insert_rowid() as id');
|
||||
return { id: result[0]?.values[0][0], ...vault };
|
||||
}
|
||||
|
||||
async updateVault(id, vault) {
|
||||
await this.ready;
|
||||
this.db.run(`UPDATE vaults SET name = ?, icon = ?, color = ? WHERE id = ?`, [
|
||||
vault.name,
|
||||
vault.icon || '📁',
|
||||
vault.color || '#3b82f6',
|
||||
id
|
||||
]);
|
||||
this.save();
|
||||
return { id, ...vault };
|
||||
}
|
||||
|
||||
async deleteVault(id) {
|
||||
await this.ready;
|
||||
// 将该资料库中的账号移到默认资料库
|
||||
const defaultVault = this.db.exec("SELECT id FROM vaults WHERE name = '默认'");
|
||||
const defaultId = defaultVault[0]?.values[0]?.[0] || null;
|
||||
|
||||
this.db.run('UPDATE accounts SET vault_id = ? WHERE vault_id = ?', [defaultId, id]);
|
||||
this.db.run('DELETE FROM vaults WHERE id = ? AND name != ?', [id, '默认']);
|
||||
this.save();
|
||||
return true;
|
||||
}
|
||||
|
||||
// ==================== 账号操作 ====================
|
||||
|
||||
async getAccounts(page = 1, limit = 10, vaultId = null) {
|
||||
await this.ready;
|
||||
const offset = (page - 1) * limit;
|
||||
|
||||
let sql = `SELECT * FROM accounts`;
|
||||
const params = [];
|
||||
|
||||
if (vaultId !== null) {
|
||||
sql += ` WHERE vault_id = ?`;
|
||||
params.push(vaultId);
|
||||
}
|
||||
|
||||
sql += ` ORDER BY updated_at DESC LIMIT ? OFFSET ?`;
|
||||
params.push(limit, offset);
|
||||
|
||||
const stmt = this.db.prepare(sql);
|
||||
stmt.bind(params);
|
||||
|
||||
const accounts = [];
|
||||
while (stmt.step()) {
|
||||
const row = stmt.getAsObject();
|
||||
accounts.push({
|
||||
...row,
|
||||
password: this.decrypt(row.password),
|
||||
totp_secret: this.decrypt(row.totp_secret)
|
||||
});
|
||||
}
|
||||
stmt.free();
|
||||
|
||||
return accounts;
|
||||
}
|
||||
|
||||
async getAccountCount(vaultId = null) {
|
||||
await this.ready;
|
||||
let sql = 'SELECT COUNT(*) as count FROM accounts';
|
||||
const params = [];
|
||||
|
||||
if (vaultId !== null) {
|
||||
sql += ' WHERE vault_id = ?';
|
||||
params.push(vaultId);
|
||||
}
|
||||
|
||||
const stmt = this.db.prepare(sql);
|
||||
stmt.bind(params);
|
||||
stmt.step();
|
||||
const result = stmt.getAsObject();
|
||||
stmt.free();
|
||||
|
||||
return result.count || 0;
|
||||
}
|
||||
|
||||
async addAccount(account) {
|
||||
await this.ready;
|
||||
|
||||
this.db.run(`
|
||||
INSERT INTO accounts (vault_id, name, username, password, totp_secret, tags, email, proxy, notes)
|
||||
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
|
||||
`, [
|
||||
account.vault_id || null,
|
||||
account.name,
|
||||
account.username,
|
||||
this.encrypt(account.password),
|
||||
this.encrypt(account.totp_secret),
|
||||
account.tags || '',
|
||||
account.email,
|
||||
account.proxy || '',
|
||||
account.notes
|
||||
]);
|
||||
|
||||
this.save();
|
||||
|
||||
const result = this.db.exec('SELECT last_insert_rowid() as id');
|
||||
const id = result[0]?.values[0][0];
|
||||
|
||||
return { id, ...account };
|
||||
}
|
||||
|
||||
async updateAccount(id, account) {
|
||||
await this.ready;
|
||||
|
||||
this.db.run(`
|
||||
UPDATE accounts
|
||||
SET vault_id = ?, name = ?, username = ?, password = ?, totp_secret = ?,
|
||||
tags = ?, email = ?, proxy = ?, notes = ?, updated_at = datetime('now')
|
||||
WHERE id = ?
|
||||
`, [
|
||||
account.vault_id || null,
|
||||
account.name,
|
||||
account.username,
|
||||
this.encrypt(account.password),
|
||||
this.encrypt(account.totp_secret),
|
||||
account.tags || '',
|
||||
account.email,
|
||||
account.proxy || '',
|
||||
account.notes,
|
||||
id
|
||||
]);
|
||||
|
||||
this.save();
|
||||
return { id, ...account };
|
||||
}
|
||||
|
||||
async moveAccountToVault(accountId, vaultId) {
|
||||
await this.ready;
|
||||
this.db.run('UPDATE accounts SET vault_id = ?, updated_at = datetime("now") WHERE id = ?',
|
||||
[vaultId, accountId]);
|
||||
this.save();
|
||||
return true;
|
||||
}
|
||||
|
||||
async deleteAccount(id) {
|
||||
await this.ready;
|
||||
this.db.run('DELETE FROM accounts WHERE id = ?', [id]);
|
||||
this.save();
|
||||
return true;
|
||||
}
|
||||
|
||||
async searchAccounts(query, vaultId = null) {
|
||||
await this.ready;
|
||||
const searchTerm = `%${query}%`;
|
||||
|
||||
let sql = `SELECT * FROM accounts WHERE (name LIKE ? OR username LIKE ? OR email LIKE ? OR tags LIKE ? OR proxy LIKE ?)`;
|
||||
const params = [searchTerm, searchTerm, searchTerm, searchTerm, searchTerm];
|
||||
|
||||
if (vaultId !== null) {
|
||||
sql += ` AND vault_id = ?`;
|
||||
params.push(vaultId);
|
||||
}
|
||||
|
||||
sql += ` ORDER BY updated_at DESC LIMIT 50`;
|
||||
|
||||
const stmt = this.db.prepare(sql);
|
||||
stmt.bind(params);
|
||||
|
||||
const accounts = [];
|
||||
while (stmt.step()) {
|
||||
const row = stmt.getAsObject();
|
||||
accounts.push({
|
||||
...row,
|
||||
password: this.decrypt(row.password),
|
||||
totp_secret: this.decrypt(row.totp_secret)
|
||||
});
|
||||
}
|
||||
stmt.free();
|
||||
|
||||
return accounts;
|
||||
}
|
||||
|
||||
close() {
|
||||
if (this.db) {
|
||||
this.save();
|
||||
this.db.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = AccountDatabase;
|
||||
198
src/index.html
Normal file
198
src/index.html
Normal file
@@ -0,0 +1,198 @@
|
||||
<!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">
|
||||
<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="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>
|
||||
813
src/renderer.js
Normal file
813
src/renderer.js
Normal file
@@ -0,0 +1,813 @@
|
||||
// TOTP 生成器
|
||||
class TOTP {
|
||||
static async generate(secret) {
|
||||
if (!secret) return null;
|
||||
|
||||
try {
|
||||
const base32chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';
|
||||
let bits = '';
|
||||
const cleanSecret = secret.replace(/\s/g, '').toUpperCase();
|
||||
|
||||
for (let i = 0; i < cleanSecret.length; i++) {
|
||||
const val = base32chars.indexOf(cleanSecret[i]);
|
||||
if (val === -1) continue;
|
||||
bits += val.toString(2).padStart(5, '0');
|
||||
}
|
||||
|
||||
const bytes = new Uint8Array(Math.floor(bits.length / 8));
|
||||
for (let i = 0; i < bytes.length; i++) {
|
||||
bytes[i] = parseInt(bits.substr(i * 8, 8), 2);
|
||||
}
|
||||
|
||||
const epoch = Math.floor(Date.now() / 1000);
|
||||
const timeStep = Math.floor(epoch / 30);
|
||||
|
||||
const timeBuffer = new ArrayBuffer(8);
|
||||
const timeView = new DataView(timeBuffer);
|
||||
timeView.setUint32(4, timeStep, false);
|
||||
|
||||
const key = await crypto.subtle.importKey(
|
||||
'raw', bytes, { name: 'HMAC', hash: 'SHA-1' }, false, ['sign']
|
||||
);
|
||||
|
||||
const signature = await crypto.subtle.sign('HMAC', key, timeBuffer);
|
||||
const hmac = new Uint8Array(signature);
|
||||
|
||||
const offset = hmac[hmac.length - 1] & 0xf;
|
||||
const binary = ((hmac[offset] & 0x7f) << 24) |
|
||||
((hmac[offset + 1] & 0xff) << 16) |
|
||||
((hmac[offset + 2] & 0xff) << 8) |
|
||||
(hmac[offset + 3] & 0xff);
|
||||
|
||||
const otp = binary % 1000000;
|
||||
return otp.toString().padStart(6, '0');
|
||||
} catch (e) {
|
||||
console.error('TOTP generation error:', e);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
static getTimeRemaining() {
|
||||
return 30 - (Math.floor(Date.now() / 1000) % 30);
|
||||
}
|
||||
}
|
||||
|
||||
// 随机名称库
|
||||
const firstNames = [
|
||||
'James', 'John', 'Robert', 'Michael', 'William', 'David', 'Richard', 'Joseph',
|
||||
'Thomas', 'Christopher', 'Mary', 'Patricia', 'Jennifer', 'Linda', 'Elizabeth',
|
||||
'Barbara', 'Susan', 'Jessica', 'Sarah', 'Karen', 'Alex', 'Jordan', 'Taylor',
|
||||
'Morgan', 'Casey', 'Riley', 'Quinn', 'Avery', 'Peyton', 'Cameron', 'Emma',
|
||||
'Oliver', 'Liam', 'Noah', 'Sophia', 'Ava', 'Isabella', 'Mia', 'Charlotte',
|
||||
'Benjamin', 'Alexander', 'Sebastian', 'Theodore', 'Victoria', 'Penelope'
|
||||
];
|
||||
|
||||
const lastNames = [
|
||||
'Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis',
|
||||
'Rodriguez', 'Martinez', 'Anderson', 'Taylor', 'Thomas', 'Moore', 'Jackson',
|
||||
'Martin', 'Lee', 'Thompson', 'White', 'Harris', 'Clark', 'Lewis', 'Robinson',
|
||||
'Walker', 'Young', 'King', 'Wright', 'Scott', 'Green', 'Baker', 'Adams',
|
||||
'Nelson', 'Mitchell', 'Campbell', 'Roberts', 'Carter', 'Phillips', 'Evans'
|
||||
];
|
||||
|
||||
// 应用状态
|
||||
let accounts = [];
|
||||
let vaults = [];
|
||||
let currentPage = 1;
|
||||
let totalPages = 1;
|
||||
const itemsPerPage = 8;
|
||||
let editingId = null;
|
||||
let selectedVaultId = null;
|
||||
let movingAccountId = null;
|
||||
let totalAccountCount = 0;
|
||||
|
||||
// DOM 元素
|
||||
const accountsList = document.getElementById('accountsList');
|
||||
const accountForm = document.getElementById('accountForm');
|
||||
const formTitle = document.getElementById('formTitle');
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const prevBtn = document.getElementById('prevBtn');
|
||||
const nextBtn = document.getElementById('nextBtn');
|
||||
const pageInfo = document.getElementById('pageInfo');
|
||||
const cancelBtn = document.getElementById('cancelBtn');
|
||||
const toast = document.getElementById('toast');
|
||||
const vaultList = document.getElementById('vaultList');
|
||||
const vaultFormSection = document.getElementById('vaultFormSection');
|
||||
const moveModal = document.getElementById('moveModal');
|
||||
|
||||
// 初始化
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadVaults();
|
||||
loadAccounts();
|
||||
generateRandomName();
|
||||
generateRandomPassword();
|
||||
setupEventListeners();
|
||||
setInterval(updateAllTOTP, 1000);
|
||||
});
|
||||
|
||||
function setupEventListeners() {
|
||||
accountForm.addEventListener('submit', handleFormSubmit);
|
||||
cancelBtn.addEventListener('click', resetForm);
|
||||
|
||||
// 搜索
|
||||
let searchTimeout;
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(() => {
|
||||
if (e.target.value.trim()) {
|
||||
searchAccounts(e.target.value.trim());
|
||||
} else {
|
||||
loadAccounts();
|
||||
}
|
||||
}, 300);
|
||||
});
|
||||
|
||||
// 分页
|
||||
prevBtn.addEventListener('click', () => {
|
||||
if (currentPage > 1) { currentPage--; loadAccounts(); }
|
||||
});
|
||||
nextBtn.addEventListener('click', () => {
|
||||
if (currentPage < totalPages) { currentPage++; loadAccounts(); }
|
||||
});
|
||||
|
||||
// 随机生成器
|
||||
document.getElementById('rollName').addEventListener('click', generateRandomName);
|
||||
document.getElementById('rollPassword').addEventListener('click', generateRandomPassword);
|
||||
|
||||
document.querySelectorAll('.generator-section .copy-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const targetId = btn.dataset.target;
|
||||
const value = document.getElementById(targetId).value;
|
||||
copyToClipboard(value);
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('randomFullName').addEventListener('click', function () {
|
||||
copyToClipboard(this.value);
|
||||
});
|
||||
document.getElementById('randomUsername').addEventListener('click', function () {
|
||||
copyToClipboard(this.value);
|
||||
});
|
||||
|
||||
['pwdUppercase', 'pwdLowercase', 'pwdNumbers', 'pwdSymbols', 'pwdLength'].forEach(id => {
|
||||
document.getElementById(id).addEventListener('change', generateRandomPassword);
|
||||
});
|
||||
|
||||
// 资料库表单 (保留用于兼容)
|
||||
document.getElementById('cancelVaultBtn').addEventListener('click', () => {
|
||||
vaultFormSection.style.display = 'none';
|
||||
});
|
||||
document.getElementById('saveVaultBtn').addEventListener('click', saveVault);
|
||||
|
||||
// 迁移模态框
|
||||
document.getElementById('cancelMoveBtn').addEventListener('click', () => {
|
||||
moveModal.style.display = 'none';
|
||||
movingAccountId = null;
|
||||
});
|
||||
document.getElementById('confirmMoveBtn').addEventListener('click', confirmMoveAccount);
|
||||
}
|
||||
|
||||
// ==================== 资料库操作 ====================
|
||||
|
||||
async function loadVaults() {
|
||||
try {
|
||||
vaults = await window.api.getVaults();
|
||||
totalAccountCount = await window.api.getAccountCount(null);
|
||||
renderVaultList();
|
||||
} catch (e) {
|
||||
console.error('Failed to load vaults:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function renderVaultList() {
|
||||
// 更新全部账号数量
|
||||
document.getElementById('allCount').textContent = totalAccountCount;
|
||||
|
||||
// 更新全部账号选中状态
|
||||
const allVaultRow = document.querySelector('.vault-row.all-vault');
|
||||
if (allVaultRow) {
|
||||
allVaultRow.classList.toggle('active', selectedVaultId === null);
|
||||
}
|
||||
|
||||
vaultList.innerHTML = vaults.map(v => `
|
||||
<div class="vault-row ${selectedVaultId === v.id ? 'active' : ''}"
|
||||
data-id="${v.id}"
|
||||
data-name="${escapeHtml(v.name)}">
|
||||
<span class="vault-name">${escapeHtml(v.name)}</span>
|
||||
<span class="vault-count">${v.account_count || 0}</span>
|
||||
${v.name !== '默认' ? `
|
||||
<button class="vault-delete" title="删除">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
` : ''}
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
// 绑定事件
|
||||
vaultList.querySelectorAll('.vault-row').forEach(row => {
|
||||
const id = parseInt(row.dataset.id);
|
||||
const vault = vaults.find(v => v.id === id);
|
||||
if (!vault) return;
|
||||
|
||||
let clickTimeout = null;
|
||||
|
||||
row.addEventListener('click', (e) => {
|
||||
if (row.classList.contains('editing')) return;
|
||||
if (e.target.closest('.vault-delete')) {
|
||||
e.stopPropagation();
|
||||
deleteVault(id);
|
||||
return;
|
||||
}
|
||||
|
||||
// 延迟执行单击，以便检测是否是双击
|
||||
if (clickTimeout) {
|
||||
clearTimeout(clickTimeout);
|
||||
clickTimeout = null;
|
||||
return;
|
||||
}
|
||||
clickTimeout = setTimeout(() => {
|
||||
clickTimeout = null;
|
||||
selectVault(id);
|
||||
}, 200);
|
||||
});
|
||||
|
||||
// 只有非默认资料库可以双击改名
|
||||
if (vault.name !== '默认') {
|
||||
row.addEventListener('dblclick', (e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
// 取消单击
|
||||
if (clickTimeout) {
|
||||
clearTimeout(clickTimeout);
|
||||
clickTimeout = null;
|
||||
}
|
||||
startEditVault(row, id);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function selectVault(id) {
|
||||
selectedVaultId = id;
|
||||
currentPage = 1;
|
||||
loadAccounts();
|
||||
renderVaultList();
|
||||
}
|
||||
|
||||
// 双击资料库开始编辑
|
||||
function startEditVault(row, id) {
|
||||
const vault = vaults.find(v => v.id === id);
|
||||
if (!vault || vault.name === '默认') return;
|
||||
|
||||
row.classList.add('editing');
|
||||
const nameSpan = row.querySelector('.vault-name');
|
||||
const originalName = vault.name;
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.type = 'text';
|
||||
input.className = 'vault-edit';
|
||||
input.value = originalName;
|
||||
nameSpan.replaceWith(input);
|
||||
|
||||
// 延迟聚焦以确保元素已渲染
|
||||
setTimeout(() => {
|
||||
input.focus();
|
||||
input.select();
|
||||
}, 10);
|
||||
|
||||
let isFinished = false;
|
||||
async function finishEdit() {
|
||||
if (isFinished) return;
|
||||
isFinished = true;
|
||||
|
||||
const newName = input.value.trim();
|
||||
if (newName && newName !== originalName) {
|
||||
try {
|
||||
await window.api.updateVault(id, { name: newName });
|
||||
showToast('资料库已更新', 'success');
|
||||
} catch (e) {
|
||||
console.error('Update vault failed:', e);
|
||||
showToast('更新失败', 'error');
|
||||
}
|
||||
}
|
||||
loadVaults();
|
||||
}
|
||||
|
||||
input.addEventListener('blur', finishEdit);
|
||||
input.addEventListener('keydown', (e) => {
|
||||
e.stopPropagation();
|
||||
if (e.key === 'Enter') {
|
||||
input.blur();
|
||||
} else if (e.key === 'Escape') {
|
||||
input.value = originalName;
|
||||
input.blur();
|
||||
}
|
||||
});
|
||||
|
||||
// 阻止输入框的点击事件冒泡
|
||||
input.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
});
|
||||
}
|
||||
|
||||
// 点击 + 新增资料库 (行内创建)
|
||||
async function showAddVaultForm() {
|
||||
// 检查是否已有输入框
|
||||
if (vaultList.querySelector('.vault-new-row')) return;
|
||||
|
||||
// 创建新增行
|
||||
const editRow = document.createElement('div');
|
||||
editRow.className = 'vault-new-row';
|
||||
editRow.innerHTML = `
|
||||
<input type="text" placeholder="输入名称..." />
|
||||
`;
|
||||
|
||||
// 插入到 vaultList 末尾
|
||||
vaultList.appendChild(editRow);
|
||||
|
||||
const input = editRow.querySelector('input');
|
||||
|
||||
// 延迟聚焦
|
||||
setTimeout(() => {
|
||||
input.focus();
|
||||
}, 10);
|
||||
|
||||
let isFinished = false;
|
||||
async function finishCreate() {
|
||||
if (isFinished) return;
|
||||
isFinished = true;
|
||||
|
||||
const name = input.value.trim();
|
||||
if (name) {
|
||||
try {
|
||||
await window.api.addVault({ name });
|
||||
showToast('资料库已创建', 'success');
|
||||
} catch (e) {
|
||||
console.error('Add vault failed:', e);
|
||||
showToast('创建失败', 'error');
|
||||
}
|
||||
}
|
||||
loadVaults();
|
||||
}
|
||||
|
||||
input.addEventListener('blur', finishCreate);
|
||||
input.addEventListener('keydown', (e) => {
|
||||
e.stopPropagation();
|
||||
if (e.key === 'Enter') {
|
||||
input.blur();
|
||||
} else if (e.key === 'Escape') {
|
||||
loadVaults();
|
||||
}
|
||||
});
|
||||
|
||||
// 阻止点击事件冒泡
|
||||
input.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
});
|
||||
}
|
||||
|
||||
async function saveVault() {
|
||||
const id = document.getElementById('vaultId').value;
|
||||
const name = document.getElementById('vaultName').value.trim();
|
||||
|
||||
if (!name) {
|
||||
showToast('请输入资料库名称', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (id) {
|
||||
await window.api.updateVault(parseInt(id), { name });
|
||||
showToast('资料库已更新', 'success');
|
||||
} else {
|
||||
await window.api.addVault({ name });
|
||||
showToast('资料库已创建', 'success');
|
||||
}
|
||||
vaultFormSection.style.display = 'none';
|
||||
loadVaults();
|
||||
} catch (e) {
|
||||
console.error('Save vault failed:', e);
|
||||
showToast('保存失败', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteVault(id) {
|
||||
const vault = vaults.find(v => v.id === id);
|
||||
if (!vault || vault.name === '默认') return;
|
||||
|
||||
if (!confirm(`确定要删除资料库「${vault.name}」吗？\n其中的账号将被移到默认资料库。`)) return;
|
||||
|
||||
try {
|
||||
await window.api.deleteVault(id);
|
||||
showToast('资料库已删除', 'success');
|
||||
if (selectedVaultId === id) {
|
||||
selectedVaultId = null;
|
||||
}
|
||||
loadVaults();
|
||||
loadAccounts();
|
||||
} catch (e) {
|
||||
console.error('Delete vault failed:', e);
|
||||
showToast('删除失败', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function openMoveDialog(accountId) {
|
||||
movingAccountId = accountId;
|
||||
const select = document.getElementById('moveToVault');
|
||||
select.innerHTML = vaults.map(v =>
|
||||
`<option value="${v.id}">${escapeHtml(v.name)}</option>`
|
||||
).join('');
|
||||
moveModal.style.display = 'flex';
|
||||
}
|
||||
|
||||
async function confirmMoveAccount() {
|
||||
if (!movingAccountId) return;
|
||||
|
||||
const newVaultId = parseInt(document.getElementById('moveToVault').value);
|
||||
|
||||
try {
|
||||
await window.api.moveAccountToVault(movingAccountId, newVaultId);
|
||||
showToast('账号已迁移', 'success');
|
||||
moveModal.style.display = 'none';
|
||||
movingAccountId = null;
|
||||
loadAccounts();
|
||||
loadVaults();
|
||||
} catch (e) {
|
||||
console.error('Move failed:', e);
|
||||
showToast('迁移失败', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 账号操作 ====================
|
||||
|
||||
async function loadAccounts() {
|
||||
try {
|
||||
const count = await window.api.getAccountCount(selectedVaultId);
|
||||
totalPages = Math.max(1, Math.ceil(count / itemsPerPage));
|
||||
|
||||
if (currentPage > totalPages) {
|
||||
currentPage = totalPages;
|
||||
}
|
||||
|
||||
accounts = await window.api.getAccounts(currentPage, itemsPerPage, selectedVaultId);
|
||||
renderAccounts();
|
||||
updatePagination();
|
||||
} catch (e) {
|
||||
console.error('Failed to load accounts:', e);
|
||||
showToast('加载账号失败', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function searchAccounts(query) {
|
||||
try {
|
||||
accounts = await window.api.searchAccounts(query, selectedVaultId);
|
||||
currentPage = 1;
|
||||
totalPages = 1;
|
||||
renderAccounts();
|
||||
updatePagination();
|
||||
} catch (e) {
|
||||
console.error('Search failed:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function renderAccounts() {
|
||||
if (accounts.length === 0) {
|
||||
accountsList.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<div class="empty-state-icon"><i class="fa-solid fa-inbox"></i></div>
|
||||
<div class="empty-state-text">暂无账号<br>在右侧添加你的第一个账号</div>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
accountsList.innerHTML = accounts.map(acc => {
|
||||
const tags = acc.tags ? acc.tags.split(',').map(t => t.trim()).filter(t => t) : [];
|
||||
const tagsHtml = tags.length > 0
|
||||
? `<div class="card-tags">${tags.map(t => `<span class="tag">${escapeHtml(t)}</span>`).join('')}</div>`
|
||||
: '';
|
||||
|
||||
return `
|
||||
<div class="account-card" data-id="${acc.id}">
|
||||
<div class="card-header">
|
||||
${tagsHtml || '<span class="card-name-placeholder">无标签</span>'}
|
||||
<div class="card-actions">
|
||||
<button class="card-action-btn move" onclick="openMoveDialog(${acc.id})" title="迁移">
|
||||
<i class="fa-solid fa-arrow-right-arrow-left"></i>
|
||||
</button>
|
||||
<button class="card-action-btn edit" onclick="editAccount(${acc.id})" title="编辑">
|
||||
<i class="fa-solid fa-pen"></i>
|
||||
</button>
|
||||
<button class="card-action-btn delete" onclick="deleteAccount(${acc.id})" title="删除">
|
||||
<i class="fa-solid fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${acc.username ? `
|
||||
<div class="info-row">
|
||||
<span class="info-label">账号</span>
|
||||
<span class="info-value" onclick="copyValue(this, '${escapeJs(acc.username)}')">${escapeHtml(acc.username)}</span>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${acc.password ? `
|
||||
<div class="info-row">
|
||||
<span class="info-label">密码</span>
|
||||
<span class="info-value password" onclick="copyValue(this, '${escapeJs(acc.password)}')">••••••••</span>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${acc.email ? `
|
||||
<div class="info-row">
|
||||
<span class="info-label">邮箱</span>
|
||||
<span class="info-value" onclick="copyValue(this, '${escapeJs(acc.email)}')">${escapeHtml(acc.email)}</span>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${acc.proxy ? `
|
||||
<div class="info-row">
|
||||
<span class="info-label">代理</span>
|
||||
<span class="info-value" onclick="copyValue(this, '${escapeJs(acc.proxy)}')">${escapeHtml(acc.proxy)}</span>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${acc.totp_secret ? `
|
||||
<div class="totp-section">
|
||||
<div class="totp-display totp-hidden" id="totp-container-${acc.id}" onclick="showTOTP(${acc.id}, '${escapeJs(acc.totp_secret)}')">
|
||||
<span class="totp-placeholder"><i class="fa-solid fa-arrow-pointer"></i> 点击显示 2FA</span>
|
||||
</div>
|
||||
<div class="totp-display totp-visible" id="totp-visible-${acc.id}" style="display: none;">
|
||||
<span class="totp-code" id="totp-${acc.id}" onclick="copyTOTP(${acc.id})">------</span>
|
||||
<div class="totp-timer" id="timer-${acc.id}">
|
||||
<svg width="24" height="24" viewBox="0 0 32 32">
|
||||
<circle class="bg" cx="16" cy="16" r="14"></circle>
|
||||
<circle class="progress" cx="16" cy="16" r="14"
|
||||
stroke-dasharray="88" stroke-dashoffset="0"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
// 不再自动更新TOTP，改为点击时才显示
|
||||
}
|
||||
|
||||
// 保存已激活的TOTP账号列表
|
||||
const activeTOTPs = new Map();
|
||||
|
||||
// 显示TOTP
|
||||
async function showTOTP(id, secret) {
|
||||
const container = document.getElementById(`totp-container-${id}`);
|
||||
const visible = document.getElementById(`totp-visible-${id}`);
|
||||
|
||||
if (!container || !visible) return;
|
||||
|
||||
container.style.display = 'none';
|
||||
visible.style.display = 'flex';
|
||||
|
||||
// 保存到激活列表
|
||||
activeTOTPs.set(id, secret);
|
||||
|
||||
// 立即更新一次
|
||||
await updateTOTP(id, secret);
|
||||
}
|
||||
|
||||
async function copyValue(element, value) {
|
||||
try {
|
||||
await window.api.copyToClipboard(value);
|
||||
element.classList.add('copied');
|
||||
showToast('已复制', 'success');
|
||||
setTimeout(() => { element.classList.remove('copied'); }, 300);
|
||||
} catch (e) {
|
||||
console.error('Copy failed:', e);
|
||||
}
|
||||
}
|
||||
|
||||
async function updateTOTP(id, secret) {
|
||||
const codeEl = document.getElementById(`totp-${id}`);
|
||||
const timerEl = document.getElementById(`timer-${id}`);
|
||||
|
||||
if (!codeEl || !timerEl) return;
|
||||
|
||||
const code = await TOTP.generate(secret);
|
||||
if (code) {
|
||||
codeEl.textContent = code.substring(0, 3) + ' ' + code.substring(3);
|
||||
}
|
||||
|
||||
const remaining = TOTP.getTimeRemaining();
|
||||
const progress = (remaining / 30) * 88;
|
||||
const progressCircle = timerEl.querySelector('.progress');
|
||||
progressCircle.style.strokeDashoffset = 88 - progress;
|
||||
|
||||
timerEl.classList.remove('warning', 'danger');
|
||||
if (remaining <= 5) {
|
||||
timerEl.classList.add('danger');
|
||||
} else if (remaining <= 10) {
|
||||
timerEl.classList.add('warning');
|
||||
}
|
||||
}
|
||||
|
||||
function updateAllTOTP() {
|
||||
// 只更新已激活显示的TOTP
|
||||
activeTOTPs.forEach((secret, id) => {
|
||||
updateTOTP(id, secret);
|
||||
});
|
||||
}
|
||||
|
||||
async function copyTOTP(id) {
|
||||
const acc = accounts.find(a => a.id === id);
|
||||
if (!acc || !acc.totp_secret) return;
|
||||
|
||||
const code = await TOTP.generate(acc.totp_secret);
|
||||
if (code) {
|
||||
const codeEl = document.getElementById(`totp-${id}`);
|
||||
codeEl.classList.add('copied');
|
||||
await window.api.copyToClipboard(code);
|
||||
showToast('已复制', 'success');
|
||||
setTimeout(() => { codeEl.classList.remove('copied'); }, 300);
|
||||
}
|
||||
}
|
||||
|
||||
function updatePagination() {
|
||||
pageInfo.textContent = `${currentPage} / ${totalPages}`;
|
||||
prevBtn.disabled = currentPage <= 1;
|
||||
nextBtn.disabled = currentPage >= totalPages;
|
||||
}
|
||||
|
||||
async function handleFormSubmit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const username = document.getElementById('username').value.trim();
|
||||
const tags = document.getElementById('tags').value.trim();
|
||||
|
||||
// 使用标签的第一个作为name，如果没有标签则使用用户名
|
||||
const firstTag = tags ? tags.split(',')[0].trim() : '';
|
||||
const autoName = firstTag || username || '未命名';
|
||||
|
||||
const account = {
|
||||
vault_id: selectedVaultId,
|
||||
name: autoName,
|
||||
username: username,
|
||||
password: document.getElementById('password').value,
|
||||
totp_secret: document.getElementById('totpSecret').value.trim(),
|
||||
tags: tags,
|
||||
email: document.getElementById('email').value.trim(),
|
||||
proxy: document.getElementById('proxy').value.trim(),
|
||||
notes: document.getElementById('notes').value.trim()
|
||||
};
|
||||
|
||||
try {
|
||||
if (editingId) {
|
||||
const existingAcc = accounts.find(a => a.id === editingId);
|
||||
if (existingAcc) {
|
||||
account.vault_id = existingAcc.vault_id;
|
||||
}
|
||||
await window.api.updateAccount(editingId, account);
|
||||
showToast('账号已更新', 'success');
|
||||
} else {
|
||||
await window.api.addAccount(account);
|
||||
showToast('账号已添加', 'success');
|
||||
}
|
||||
|
||||
resetForm();
|
||||
loadAccounts();
|
||||
loadVaults();
|
||||
} catch (e) {
|
||||
console.error('Save failed:', e);
|
||||
showToast('保存失败', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function editAccount(id) {
|
||||
const acc = accounts.find(a => a.id === id);
|
||||
if (!acc) return;
|
||||
|
||||
editingId = id;
|
||||
formTitle.innerHTML = '<i class="fa-solid fa-pen-to-square"></i> 编辑账号';
|
||||
|
||||
document.getElementById('accountId').value = id;
|
||||
document.getElementById('username').value = acc.username || '';
|
||||
document.getElementById('password').value = acc.password || '';
|
||||
document.getElementById('totpSecret').value = acc.totp_secret || '';
|
||||
document.getElementById('email').value = acc.email || '';
|
||||
document.getElementById('proxy').value = acc.proxy || '';
|
||||
document.getElementById('tags').value = acc.tags || '';
|
||||
document.getElementById('notes').value = acc.notes || '';
|
||||
|
||||
document.querySelectorAll('.account-card').forEach(card => {
|
||||
card.classList.toggle('active', card.dataset.id == id);
|
||||
});
|
||||
|
||||
document.getElementById('username').focus();
|
||||
}
|
||||
|
||||
async function deleteAccount(id) {
|
||||
if (!confirm('确定要删除这个账号吗？')) return;
|
||||
|
||||
try {
|
||||
await window.api.deleteAccount(id);
|
||||
showToast('账号已删除', 'success');
|
||||
|
||||
if (editingId === id) {
|
||||
resetForm();
|
||||
}
|
||||
|
||||
loadAccounts();
|
||||
loadVaults();
|
||||
} catch (e) {
|
||||
console.error('Delete failed:', e);
|
||||
showToast('删除失败', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
editingId = null;
|
||||
formTitle.innerHTML = '<i class="fa-solid fa-user-plus"></i> 添加账号';
|
||||
accountForm.reset();
|
||||
document.getElementById('accountId').value = '';
|
||||
|
||||
document.querySelectorAll('.account-card').forEach(card => {
|
||||
card.classList.remove('active');
|
||||
});
|
||||
}
|
||||
|
||||
async function copyToClipboard(text) {
|
||||
try {
|
||||
await window.api.copyToClipboard(text);
|
||||
showToast('已复制', 'success');
|
||||
} catch (e) {
|
||||
console.error('Copy failed:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// 生成随机名称 (不含符号的长用户名)
|
||||
function generateRandomName() {
|
||||
const firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
|
||||
const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
|
||||
const suffix = Math.floor(Math.random() * 10000);
|
||||
const year = 1990 + Math.floor(Math.random() * 30);
|
||||
|
||||
document.getElementById('randomFullName').value = `${firstName} ${lastName}`;
|
||||
|
||||
// 不含下划线和符号的用户名格式
|
||||
const usernameFormats = [
|
||||
`${firstName.toLowerCase()}${lastName.toLowerCase()}${suffix}`,
|
||||
`${firstName.toLowerCase()}${lastName.toLowerCase()}${year}`,
|
||||
`${firstName.toLowerCase()}${lastName.toLowerCase()}`,
|
||||
`${firstName[0].toLowerCase()}${lastName.toLowerCase()}${suffix}`,
|
||||
`${lastName.toLowerCase()}${firstName.toLowerCase()}${suffix}`,
|
||||
`${firstName.toLowerCase()}${lastName.toLowerCase()}official`,
|
||||
`real${firstName.toLowerCase()}${lastName.toLowerCase()}`
|
||||
];
|
||||
const username = usernameFormats[Math.floor(Math.random() * usernameFormats.length)];
|
||||
document.getElementById('randomUsername').value = username;
|
||||
}
|
||||
|
||||
function generateRandomPassword() {
|
||||
const length = parseInt(document.getElementById('pwdLength').value) || 16;
|
||||
const useUppercase = document.getElementById('pwdUppercase').checked;
|
||||
const useLowercase = document.getElementById('pwdLowercase').checked;
|
||||
const useNumbers = document.getElementById('pwdNumbers').checked;
|
||||
const useSymbols = document.getElementById('pwdSymbols').checked;
|
||||
|
||||
let chars = '';
|
||||
if (useUppercase) chars += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||
if (useLowercase) chars += 'abcdefghijklmnopqrstuvwxyz';
|
||||
if (useNumbers) chars += '0123456789';
|
||||
if (useSymbols) chars += '!@#$%^&*()_+-=[]{}|;:,.<>?';
|
||||
|
||||
if (!chars) chars = 'abcdefghijklmnopqrstuvwxyz';
|
||||
|
||||
let password = '';
|
||||
const array = new Uint32Array(length);
|
||||
crypto.getRandomValues(array);
|
||||
|
||||
for (let i = 0; i < length; i++) {
|
||||
password += chars[array[i] % chars.length];
|
||||
}
|
||||
|
||||
document.getElementById('randomPassword').value = password;
|
||||
}
|
||||
|
||||
function showToast(message, type = 'info') {
|
||||
toast.textContent = message;
|
||||
toast.className = 'toast show';
|
||||
if (type === 'success') toast.classList.add('success');
|
||||
setTimeout(() => { toast.classList.remove('show'); }, 2000);
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
if (!text) return '';
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function escapeJs(text) {
|
||||
if (!text) return '';
|
||||
return text.replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/"/g, '\\"');
|
||||
}
|
||||
1305
src/styles.css
Normal file
1305
src/styles.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user