个人整改后做的html版网页密码管理系统

模板源码
2026-09-03 0 268
也想出现在这里？点击联系我~
网盘地址失效点我补新的

文章摘要

## 简要总结 该文章介绍了一款**密码管理系统**的整改方案，系统支持**指定浏览器**访问客户ERP，自动检测浏览器安装状态。管理员后台新增**浏览器选择**功能，数据自动保存至**localStorage**，支持Excel/JSON导入导出及数据库备份。系统提供**8种颜色主题**切换，管理员默认密码admin123，员工查看密码employee2024。系统采用**员工门户**与**管理后台**双界面设计，支持凭证管理、密码修改、自动备份等核心功能。

主要整改：
网址指定浏览器访问：
用于销售助理平时点击添加后客户的ERP的网页进入客户的ERP系统，可以根据自己在后台添加的网址指定浏览器来实现。
点击访问客户ERP 系统的时候，会自动检测指定浏览器是否已经安装，如未安装，会弹窗提示安装浏览器。
管理员后台整改：
主要整改添加客户ERP系统是选择使用什么浏览器。数据自动保存，管理员后台还修改了数据导入及导出JSON功能。
管理员后台密码默认: admin123，员工查看密码默认: employee2024
支持 Excel (.xls, .xlsx) 导入导出
所有数据存储方式改成了 localStorage
可点击「备份数据库」下载完整数据库文件
界面主题增加：
增加有8种颜色主题切换
个人整改后做的html版网页密码管理系统 个人整改后做的html版网页密码管理系统
html代码：

  1. <!DOCTYPE html>
  2. <html lang=”zh-CN”>
  3. <head>
  4.     <meta charset=”UTF-8″>
  5.     <meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=yes”>
  6.     <title>企业密码管理系统</title>
  7.     <script src=”https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.10.3/sql-wasm.js”></script>
  8.     <script src=”https://cdn.sheetjs.com/xlsx-0.20.2/package/dist/xlsx.full.min.js”></script>
  9.     <script src=”https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js”></script>
  10.     <style id=”theme-style”>
  11.         :root {
  12.             –bg: #f1f5f9;
  13.             –card: #ffffff;
  14.             –border: #e9edf2;
  15.             –text: #1e293b;
  16.             –text2: #475569;
  17.             –shadow: rgba(0,0,0,0.05);
  18.             –primary: #1e3c72;
  19.             –primary-hover: #0f2b4f;
  20.             –input: #ffffff;
  21.             –input-border: #cfdfed;
  22.             –table-header: #fafcff;
  23.             –badge-default: #e2e8f0;
  24.             –badge-edge: #0078d4;
  25.             –badge-chrome: #4285f4;
  26.             –badge-firefox: #ff9400;
  27.             –success: #10b981;
  28.             –warning: #f59e0b;
  29.             –danger: #ef4444;
  30.             –info: #3b82f6;
  31.         }
  32.         .theme-red { –bg: #fef2f2; –card: #ffffff; –primary: #b91c1c; –primary-hover: #7f1d1d; –border: #fecaca; –table-header: #fef2f2; }
  33.         .theme-orange { –bg: #fff7ed; –card: #ffffff; –primary: #c2410c; –primary-hover: #9a3412; –border: #fed7aa; –table-header: #fff7ed; }
  34.         .theme-yellow { –bg: #fefce8; –card: #ffffff; –primary: #a16207; –primary-hover: #854d0e; –border: #fde68a; –table-header: #fefce8; }
  35.         .theme-green { –bg: #f0fdf4; –card: #ffffff; –primary: #15803d; –primary-hover: #166534; –border: #bbf7d0; –table-header: #f0fdf4; }
  36.         .theme-blue { –bg: #eff6ff; –card: #ffffff; –primary: #1d4ed8; –primary-hover: #1e40af; –border: #bfdbfe; –table-header: #eff6ff; }
  37.         .theme-purple { –bg: #faf5ff; –card: #ffffff; –primary: #7e22ce; –primary-hover: #6b21a8; –border: #e9d5ff; –table-header: #faf5ff; }
  38.         .theme-pink { –bg: #fdf2f8; –card: #ffffff; –primary: #be185d; –primary-hover: #9d174d; –border: #fbcfe8; –table-header: #fdf2f8; }
  39.         * { margin: 0; padding: 0; box-sizing: border-box; }
  40.         body { font-family: ‘Segoe UI’, system-ui; background: var(–bg); padding: 20px 16px; transition: 0.3s; }
  41.         .app { max-width: 1400px; margin: 0 auto; }
  42.         .header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
  43.         .header h1 { font-size: 1.4rem; font-weight: 600; color: var(–text); }
  44.         .theme-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  45.         .theme-bar span { font-size: 0.75rem; color: var(–text2); margin-right: 2px; }
  46.         .theme-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: 0.2s; }
  47.         .theme-dot:hover { transform: scale(1.1); }
  48.         .theme-dot.active { border-color: var(–text); box-shadow: 0 0 0 2px var(–bg); }
  49.         .tab-bar { display: flex; gap: 8px; margin-bottom: 20px; background: var(–card); padding: 6px 16px; border-radius: 40px; width: fit-content; flex-wrap: wrap; border: 1px solid var(–border); }
  50.         .tab-btn { border: none; background: transparent; padding: 10px 24px; font-size: 0.95rem; font-weight: 500; border-radius: 30px; cursor: pointer; color: var(–text2); transition: 0.2s; }
  51.         .tab-btn.active { background: var(–primary); color: #fff; }
  52.         .tab-btn:hover:not(.active) { background: var(–bg); }
  53.         .card { background: var(–card); border-radius: 20px; border: 1px solid var(–border); overflow: hidden; margin-bottom: 20px; box-shadow: 0 2px 8px var(–shadow); }
  54.         .card-header { padding: 16px 20px; border-bottom: 1px solid var(–border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
  55.         .card-header h2 { font-size: 1.2rem; font-weight: 600; color: var(–text); }
  56.         .btn { border: none; background: var(–bg); padding: 6px 18px; border-radius: 30px; font-weight: 500; cursor: pointer; transition: 0.2s; font-size: 0.85rem; color: var(–text); }
  57.         .btn-primary { background: var(–primary); color: #fff; }
  58.         .btn-primary:hover { background: var(–primary-hover); }
  59.         .btn-outline { background: transparent; border: 1px solid var(–border); }
  60.         .btn-outline:hover { background: var(–bg); }
  61.         .btn-success { background: var(–success); color: #fff; }
  62.         .btn-success:hover { background: #059669; }
  63.         .btn-warning { background: var(–warning); color: #fff; }
  64.         .btn-warning:hover { background: #d97706; }
  65.         .btn-danger { background: var(–danger); color: #fff; }
  66.         .btn-danger:hover { background: #dc2626; }
  67.         .btn-info { background: var(–info); color: #fff; }
  68.         .btn-info:hover { background: #2563eb; }
  69.         .btn-sm { padding: 2px 10px; font-size: 0.7rem; }
  70.         .btn-open { background: #22d3ee; color: #0e7490; }
  71.         .btn-open:hover { background: #67e8f9; }
  72.         .btn-auto-backup { background: #8b5cf6; color: #fff; }
  73.         .btn-auto-backup:hover { background: #7c3aed; }
  74.         table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
  75.         th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(–border); vertical-align: middle; }
  76.         th { background: var(–table-header); font-weight: 600; color: var(–text); }
  77.         .url-link { color: var(–primary); text-decoration: none; font-weight: 500; }
  78.         .url-link:hover { text-decoration: underline; }
  79.         .url-cell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  80.         .password-masked { font-family: monospace; background: var(–bg); padding: 2px 12px; border-radius: 20px; display: inline-block; font-size: 0.85rem; }
  81.         .password-plain { font-family: monospace; background: #dbeafe; padding: 2px 12px; border-radius: 20px; display: inline-block; font-size: 0.85rem; }
  82.         .input-group { margin-bottom: 14px; display: flex; flex-direction: column; gap: 4px; }
  83.         .input-group label { font-weight: 600; font-size: 0.8rem; color: var(–text2); }
  84.         input, select { padding: 8px 14px; border-radius: 16px; border: 1px solid var(–input-border); font-family: inherit; background: var(–input); color: var(–text); }
  85.         input:focus, select:focus { outline: none; border-color: var(–primary); }
  86.         .modal { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.4); align-items: center; justify-content: center; z-index: 1000; }
  87.         .modal-content { background: var(–card); max-width: 500px; width: 92%; border-radius: 24px; padding: 24px; }
  88.         .toast { position: fixed; bottom: 24px; right: 24px; background: var(–text); color: #fff; padding: 10px 20px; border-radius: 30px; opacity: 0; transition: 0.25s; z-index: 1100; font-size: 0.85rem; pointer-events: none; max-width: 90%; }
  89.         .toast.show { opacity: 1; }
  90.         .toast.error { background: var(–danger); }
  91.         .toast.success { background: var(–success); }
  92.         .hidden { display: none; }
  93.         .flex-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  94.         .verify-panel { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  95.         .file-input-label { background: var(–bg); border: 1px solid var(–border); padding: 6px 16px; border-radius: 30px; cursor: pointer; font-size: 0.85rem; }
  96.         input[type=”file”] { display: none; }
  97.         .settings-group { background: var(–bg); border-radius: 16px; padding: 14px 18px; margin: 12px 20px 16px 20px; border: 1px solid var(–border); }
  98.         .settings-group h4 { margin-bottom: 10px; color: var(–text); font-size: 0.9rem; }
  99.         .settings-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
  100.         .settings-row span { font-size: 0.85rem; color: var(–text2); min-width: 130px; }
  101.         .browser-badge { display: inline-block; padding: 2px 10px; border-radius: 16px; font-size: 0.7rem; margin-right: 6px; }
  102.         .browser-default { background: var(–badge-default); color: var(–text2); }
  103.         .browser-edge { background: var(–badge-edge); color: #fff; }
  104.         .browser-chrome { background: var(–badge-chrome); color: #fff; }
  105.         .browser-firefox { background: var(–badge-firefox); color: #fff; }
  106.         .copy-url-btn { background: var(–bg); border: none; padding: 2px 8px; border-radius: 14px; cursor: pointer; font-size: 0.6rem; color: var(–text2); }
  107.         .copy-url-btn:hover { background: var(–border); }
  108.         .db-status { background: #d1fae5; padding: 6px 16px; border-radius: 10px; font-size: 0.75rem; color: #065f46; margin: 0 20px 12px 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
  109.         .open-btn-group { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
  110.         .open-btn-group .btn { padding: 2px 10px; font-size: 0.65rem; }
  111.         .empty-row td { text-align: center; padding: 40px; color: var(–text2); }
  112.         .admin-auth-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 2000; }
  113.         .admin-auth-box { background: var(–card); border-radius: 24px; padding: 28px; width: 92%; max-width: 380px; text-align: center; }
  114.         .admin-auth-box input { width: 100%; margin: 10px 0; }
  115.         .admin-auth-box .error { color: var(–danger); font-size: 0.8rem; }
  116.         .scroll-x { overflow-x: auto; }
  118.         .browser-hint-overlay {
  119.             position: fixed;
  120.             top: 0;
  121.             left: 0;
  122.             width: 100%;
  123.             height: 100%;
  124.             background: rgba(0,0,0,0.55);
  125.             display: none;
  126.             align-items: center;
  127.             justify-content: center;
  128.             z-index: 3000;
  129.         }
  130.         .browser-hint-overlay.show { display: flex; }
  131.         .browser-hint-box {
  132.             background: var(–card);
  133.             border-radius: 24px;
  134.             padding: 32px 28px;
  135.             max-width: 460px;
  136.             width: 92%;
  137.             text-align: center;
  138.             box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  139.             animation: fadeIn 0.3s ease;
  140.         }
  141.         @keyframes fadeIn {
  142.             from { opacity: 0; transform: scale(0.95); }
  143.             to { opacity: 1; transform: scale(1); }
  144.         }
  145.         .browser-hint-box .icon { font-size: 3.2rem; margin-bottom: 12px; }
  146.         .browser-hint-box h3 { font-size: 1.3rem; color: var(–text); margin-bottom: 10px; }
  147.         .browser-hint-box p { font-size: 0.9rem; color: var(–text2); line-height: 1.6; margin-bottom: 18px; }
  148.         .browser-hint-box .btn-group { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  149.         .browser-hint-box .btn-group .btn { min-width: 100px; padding: 10px 24px; font-size: 0.9rem; }
  150.         .browser-hint-box .checkbox-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 16px 0; font-size: 0.8rem; color: var(–text2); }
  151.         .browser-hint-box .checkbox-row input[type=”checkbox”] { width: 16px; height: 16px; cursor: pointer; accent-color: var(–primary); }
  153.         .storage-info {
  154.             background: var(–bg);
  155.             border-radius: 12px;
  156.             padding: 12px 18px;
  157.             margin: 8px 20px 12px 20px;
  158.             border: 1px solid var(–border);
  159.             font-size: 0.8rem;
  160.             color: var(–text2);
  161.             display: flex;
  162.             justify-content: space-between;
  163.             align-items: center;
  164.             flex-wrap: wrap;
  165.             gap: 8px;
  166.         }
  167.         .storage-info .label { font-weight: 600; color: var(–text); }
  168.         .storage-info .status { color: var(–success); }
  169.         .storage-info .backup-status { color: var(–info); font-size: 0.75rem; }
  171.         .backup-settings {
  172.             background: var(–bg);
  173.             border-radius: 12px;
  174.             padding: 12px 18px;
  175.             margin: 8px 20px 12px 20px;
  176.             border: 1px solid var(–border);
  177.             display: flex;
  178.             justify-content: space-between;
  179.             align-items: center;
  180.             flex-wrap: wrap;
  181.             gap: 10px;
  182.         }
  183.         .backup-settings .label { font-weight: 600; color: var(–text); font-size: 0.85rem; }
  184.         .backup-settings .desc { font-size: 0.75rem; color: var(–text2); }
  185.         .backup-settings .toggle { display: flex; align-items: center; gap: 8px; }
  186.         .toggle-switch {
  187.             width: 40px;
  188.             height: 22px;
  189.             background: #cbd5e1;
  190.             border-radius: 12px;
  191.             cursor: pointer;
  192.             position: relative;
  193.             transition: 0.3s;
  194.             border: none;
  195.             padding: 0;
  196.         }
  197.         .toggle-switch.active {
  198.             background: var(–success);
  199.         }
  200.         .toggle-switch::after {
  201.             content: ”;
  202.             width: 18px;
  203.             height: 18px;
  204.             background: white;
  205.             border-radius: 50%;
  206.             position: absolute;
  207.             top: 2px;
  208.             left: 2px;
  209.             transition: 0.3s;
  210.             box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  211.         }
  212.         .toggle-switch.active::after {
  213.             left: 20px;
  214.         }
  216.         [url=home.php?mod=space&uid=945662]@media[/url] (max-width: 600px) {
  217.             th, td { padding: 8px 10px; font-size: 0.8rem; }
  218.             .card-header { padding: 12px 14px; }
  219.             .browser-hint-box { padding: 24px 18px; }
  220.             .browser-hint-box .btn-group .btn { min-width: 80px; padding: 8px 16px; font-size: 0.8rem; }
  221.             .storage-info, .backup-settings { flex-direction: column; align-items: flex-start; }
  222.         }
  223.     </style>
  224. </head>
  225. <body>
  226. <div class=”app”>
  227.     <div class=”header”>
  228.         <h1>密码管理系统</h1>
  229.         <div class=”theme-bar”>
  230.             <span>主题</span>
  231.             <span class=”theme-dot active” data-theme=”default” style=”background:#64748b;” title=”默认”></span>
  232.             <span class=”theme-dot” data-theme=”red” style=”background:#dc2626;” title=”红”></span>
  233.             <span class=”theme-dot” data-theme=”orange” style=”background:#ea580c;” title=”橙”></span>
  234.             <span class=”theme-dot” data-theme=”yellow” style=”background:#ca8a04;” title=”黄”></span>
  235.             <span class=”theme-dot” data-theme=”green” style=”background:#16a34a;” title=”绿”></span>
  236.             <span class=”theme-dot” data-theme=”blue” style=”background:#2563eb;” title=”蓝”></span>
  237.             <span class=”theme-dot” data-theme=”purple” style=”background:#9333ea;” title=”紫”></span>
  238.             <span class=”theme-dot” data-theme=”pink” style=”background:#db2777;” title=”粉”></span>
  239.         </div>
  240.     </div>
  241.     <div class=”tab-bar”>
  242.         <button class=”tab-btn active” data-tab=”employee”>员工门户</button>
  243.         <button class=”tab-btn” data-tab=”admin”>管理后台</button>
  244.     </div>
  246.     <div id=”employeePanel”>
  247.         <div class=”card”>
  248.             <div class=”card-header”>
  249.                 <h2>快捷访问</h2>
  250.                 <div class=”verify-panel”>
  251.                     <input type=”password” id=”empViewPwd” placeholder=”查看密码” style=”width:150px;” autocomplete=”off”>
  252.                     <button class=”btn btn-primary” id=”verifyEmpBtn”>显示密码</button>
  253.                 </div>
  254.             </div>
  255.             <div class=”scroll-x”>
  256.                 <table>
  257.                     <thead><tr><th>网址</th><th>账号</th><th>密码</th><th>打开方式</th></tr></thead>
  258.                     <tbody id=”employeeTableBody”></tbody>
  259.                 </table>
  260.             </div>
  261.             <div style=”padding:10px 20px;border-top:1px solid var(–border);font-size:0.7rem;color:var(–text2);”>
  262.                 <span>查看密码: <strong>employee2024</strong></span>
  263.             </div>
  264.         </div>
  265.     </div>
  267.     <div id=”adminPanel” class=”hidden”>
  268.         <div class=”card”>
  269.             <div class=”card-header”>
  270.                 <h2>凭证管理</h2>
  271.                 <div class=”flex-btns”>
  272.                     <button class=”btn btn-primary” id=”openAddCredBtn”>新增</button>
  273.                     <button class=”btn btn-success” id=”exportExcelBtn”>导出 Excel</button>
  274.                     <label class=”file-input-label” for=”importExcelInput”>导入 Excel</label>
  275.                     <input type=”file” id=”importExcelInput” accept=”.xls,.xlsx”>
  276.                     <button class=”btn btn-info” id=”exportJsonBtn”>&#128229; 导出 JSON</button>
  277.                     <label class=”file-input-label” for=”importJsonInput” style=”background:var(–primary);color:#fff;”>&#128228; 导入 JSON</label>
  278.                     <input type=”file” id=”importJsonInput” accept=”.json”>
  279.                 </div>
  280.             </div>
  281.             <div class=”db-status”>
  282.                 <span>&#128192; 数据库已连接</span>
  283.                 <span id=”dbStatusText”>localStorage 持久化存储</span>
  284.             </div>
  286.             <!– 自动备份设置 –>
  287.             <div class=”backup-settings”>
  288.                 <div>
  289.                     <span class=”label”>&#128190; 自动备份到下载文件夹</span>
  290.                     <span class=”desc”>每次修改数据后自动导出 JSON 文件到电脑下载目录</span>
  291.                 </div>
  292.                 <div class=”toggle”>
  293.                     <span id=”autoBackupStatus” style=”font-size:0.75rem;color:var(–text2);”>已关闭</span>
  294.                     <button class=”toggle-switch” id=”autoBackupToggle” title=”点击切换自动备份”></button>
  295.                 </div>
  296.             </div>
  298.             <!– 存储信息 –>
  299.             <div class=”storage-info”>
  300.                 <span><span class=”label”>&#128190; 存储位置：</span>浏览器 localStorage</span>
  301.                 <span><span class=”label”>&#128202; 记录数：</span><span id=”recordCount”>0</span> 条</span>
  302.                 <span><span class=”label”>&#128204; 持久化：</span><span class=”status”>&#9989; 刷新/关闭不丢失</span></span>
  303.                 <span class=”backup-status” id=”lastBackupTime”>&#128203; 最后备份：无</span>
  304.             </div>
  306.             <div class=”scroll-x”>
  307.                 <table>
  308.                     <thead><tr><th>网址</th><th>账号</th><th>密码</th><th>浏览器</th><th>操作</th></tr></thead>
  309.                     <tbody id=”adminTableBody”></tbody>
  310.                 </table>
  311.             </div>
  312.             <div class=”settings-group”>
  313.                 <h4>&#9881;&#65039; 安全设置</h4>
  314.                 <div class=”settings-row”><span>员工查看密码</span><input type=”password” id=”newEmployeePwd” placeholder=”新密码” style=”width:160px;”><button class=”btn btn-warning” id=”updateEmployeePwdBtn”>修改</button></div>
  315.                 <div class=”settings-row”><span>管理员密码</span><input type=”password” id=”newAdminPwd” placeholder=”新密码” style=”width:160px;”><button class=”btn btn-warning” id=”updateAdminPwdBtn”>修改</button></div>
  316.             </div>
  317.             <div style=”padding:14px 20px;border-top:1px solid var(–border);font-size:0.75rem;color:var(–text2);”>
  318.                 <span>管理员: <strong>admin123</strong></span>
  319.                 <span style=”margin-left:16px;”>员工: <strong>employee2024</strong></span>
  320.                 <span style=”margin-left:16px;”>&#128161; 开启「自动备份」后每次修改自动导出 JSON 到下载文件夹</span>
  321.             </div>
  322.         </div>
  323.     </div>
  324. </div>
  326. <!– 浏览器提示弹窗 –>
  327. <div class=”browser-hint-overlay” id=”browserHintOverlay”>
  328.     <div class=”browser-hint-box”>
  329.         <div class=”icon” id=”hintIcon”>&#127760;</div>
  330.         <h3 id=”hintTitle”>浏览器</h3>
  331.         <p id=”hintDesc”>请先确认电脑已安装该浏览器，如未安装请先下载。</p>
  332.         <div class=”checkbox-row”>
  333.             <input type=”checkbox” id=”hintDontShowAgain”>
  334.             <label for=”hintDontShowAgain”>下次不再提示</label>
  335.         </div>
  336.         <div class=”btn-group”>
  337.             <button class=”btn btn-outline” id=”hintCancel”>取消</button>
  338.             <button class=”btn btn-warning” id=”hintDownload”>&#11015; 下载浏览器</button>
  339.             <button class=”btn btn-primary” id=”hintConfirm”>确定，已安装</button>
  340.         </div>
  341.     </div>
  342. </div>
  344. <div id=”credModal” class=”modal”>
  345.     <div class=”modal-content”>
  346.         <h3 id=”modalTitle”>添加凭证</h3>
  347.         <div class=”input-group”><label>网址</label><input type=”text” id=”credUrl” placeholder=”https://…”></div>
  348.         <div class=”input-group”><label>账号</label><input type=”text” id=”credUsername” placeholder=”账号”></div>
  349.         <div class=”input-group”><label>密码</label><input type=”text” id=”credPassword” placeholder=”密码”></div>
  350.         <div class=”input-group”>
  351.             <label>浏览器</label>
  352.             <select id=”credBrowser”>
  353.                 <option value=”default”>默认</option>
  354.                 <option value=”edge”>Edge</option>
  355.                 <option value=”chrome”>Chrome</option>
  356.                 <option value=”firefox”>Firefox</option>
  357.             </select>
  358.         </div>
  359.         <input type=”hidden” id=”editId” value=””>
  360.         <div style=”display:flex;gap:10px;justify-content:flex-end;margin-top:16px;”>
  361.             <button class=”btn btn-outline” id=”closeModalBtn”>取消</button>
  362.             <button class=”btn btn-primary” id=”saveCredBtn”>保存</button>
  363.         </div>
  364.     </div>
  365. </div>
  367. <div id=”toast” class=”toast”>操作成功</div>
  369. <script>
  370.     function h(s) { return CryptoJS.SHA256(s).toString(); }
  372.     // ===== 浏览器配置 =====
  373.     var BROWSER_CONFIG = {
  374.         edge: {
  375.             icon: ‘&#128311;’,
  376.             name: ‘Edge 浏览器’,
  377.             desc: ‘使用前提：已安装Edge浏览器。（未安装请先下载安装）。’,
  378.             download: ‘https://www.microsoft.com/zh-cn/edge/download’,
  379.             protocol: ‘microsoft-edge:’
  380.         },
  381.         chrome: {
  382.             icon: ‘&#128308;’,
  383.             name: ‘谷歌浏览器’,
  384.             desc: ‘使用前提：已安装谷歌浏览器。（未安装请先下载安装）。’,
  385.             download: ‘https://sw.pcmgr.qq.com/62a4683d5d6deb5f13daf8e29b0d90dd/6a962b0c/spcmgr/download/152.0.7977.65_chrome_installer_uncompressed-win64.exe’,
  386.             protocol: ‘googlechrome:’
  387.         },
  388.         firefox: {
  389.             icon: ‘&#129418;’,
  390.             name: ‘火狐浏览器’,
  391.             desc: ‘使用前提：已安装火狐浏览器。（未安装请先下载安装）。’,
  392.             download: ‘https://sw.pcmgr.qq.com/e38a6e930fd7892da4c3d82d122394cb/6a962af4/spcmgr/download/22931-110819-Firefox-setup-win64_116.0.3.8627.exe’,
  393.             protocol: ‘firefox:’
  394.         }
  395.     };
  397.     // ===== 浏览器提示弹窗控制 =====
  398.     var hintOverlay = document.getElementById(‘browserHintOverlay’);
  399.     var hintDontShowAgain = document.getElementById(‘hintDontShowAgain’);
  400.     var hintIcon = document.getElementById(‘hintIcon’);
  401.     var hintTitle = document.getElementById(‘hintTitle’);
  402.     var hintDesc = document.getElementById(‘hintDesc’);
  403.     var hintDownload = document.getElementById(‘hintDownload’);
  404.     var hintConfirm = document.getElementById(‘hintConfirm’);
  405.     var hintCancel = document.getElementById(‘hintCancel’);
  406.     var pendingBrowser = null;
  407.     var pendingUrl = null;
  409.     function getHintSetting(browser) {
  410.         return localStorage.getItem(‘hint_dismissed_’ + browser) === ‘true’;
  411.     }
  413.     function setHintSetting(browser, dismissed) {
  414.         localStorage.setItem(‘hint_dismissed_’ + browser, dismissed ? ‘true’ : ‘false’);
  415.     }
  417.     function showBrowserHint(browser, url) {
  418.         if (getHintSetting(browser)) {
  419.             doOpenBrowser(browser, url);
  420.             return;
  421.         }
  422.         var config = BROWSER_CONFIG[browser];
  423.         if (!config) { window.open(url, ‘_blank’); return; }
  424.         pendingBrowser = browser;
  425.         pendingUrl = url;
  426.         hintIcon.textContent = config.icon;
  427.         hintTitle.textContent = config.name;
  428.         hintDesc.textContent = config.desc;
  429.         hintDownload.textContent = ‘&#11015; 下载 ‘ + config.name;
  430.         hintOverlay.classList.add(‘show’);
  431.         hintDontShowAgain.checked = false;
  432.     }
  434.     function hideBrowserHint() {
  435.         hintOverlay.classList.remove(‘show’);
  436.     }
  438.     function doOpenBrowser(b, u) {
  439.         var config = BROWSER_CONFIG[b];
  440.         if (!config) { window.open(u, ‘_blank’); return; }
  441.         var url = u;
  442.         if (!url.startsWith(‘http://’) && !url.startsWith(‘https://’)) {
  443.             url = ‘https://’ + url;
  444.         }
  445.         var fullUrl = config.protocol + url;
  446.         try {
  447.             var currentUrl = window.location.href;
  448.             window.location.href = fullUrl;
  449.             setTimeout(function() {
  450.                 if (window.location.href === currentUrl) {
  451.                     tryMethod2(b, url);
  452.                 }
  453.             }, 800);
  454.         } catch(e) {
  455.             tryMethod2(b, url);
  456.         }
  457.     }
  459.     function tryMethod2(b, u) {
  460.         var config = BROWSER_CONFIG[b];
  461.         var url = u;
  462.         if (!url.startsWith(‘http://’) && !url.startsWith(‘https://’)) {
  463.             url = ‘https://’ + url;
  464.         }
  465.         var protocols = [
  466.             config.protocol + url,
  467.             config.protocol + ‘//open?url=’ + encodeURIComponent(url),
  468.             config.protocol + ‘//’ + url
  469.         ];
  470.         for (var i = 0; i < protocols.length; i++) {
  471.             try {
  472.                 var w = window.open(protocols[i], ‘_blank’);
  473.                 if (w) {
  474.                     setTimeout(function(win) {
  475.                         try { if (win && win.closed) { tryMethod3(b, u); } } catch(e) { tryMethod3(b, u); }
  476.                     }, 1500, w);
  477.                     return;
  478.                 }
  479.             } catch(e) {}
  480.         }
  481.         tryMethod3(b, u);
  482.     }
  484.     function tryMethod3(b, u) {
  485.         var config = BROWSER_CONFIG[b];
  486.         var url = u;
  487.         if (!url.startsWith(‘http://’) && !url.startsWith(‘https://’)) {
  488.             url = ‘https://’ + url;
  489.         }
  490.         var fullUrl = config.protocol + url;
  491.         try {
  492.             var iframe = document.createElement(‘iframe’);
  493.             iframe.style.display = ‘none’;
  494.             iframe.src = fullUrl;
  495.             document.body.appendChild(iframe);
  496.             setTimeout(function() {
  497.                 try { document.body.removeChild(iframe); } catch(e) {}
  498.                 showDownloadDialog(b, u);
  499.             }, 2000);
  500.         } catch(e) {
  501.             showDownloadDialog(b, u);
  502.         }
  503.     }
  505.     function showDownloadDialog(b, u) {
  506.         var config = BROWSER_CONFIG[b];
  507.         var name = config ? config.name : ‘该浏览器’;
  508.         var url = config ? config.download : null;
  509.         if (url) {
  510.             if (confirm(‘未检测到 ‘ + name + ‘，是否下载？\n\n点击「确定」前往下载\n点击「取消」使用默认浏览器打开’)) {
  511.                 window.open(url, ‘_blank’);
  512.             } else {
  513.                 window.open(u, ‘_blank’);
  514.             }
  515.         } else {
  516.             window.open(u, ‘_blank’);
  517.         }
  518.     }
  520.     hintConfirm.addEventListener(‘click’, function() {
  521.         if (hintDontShowAgain.checked && pendingBrowser) {
  522.             setHintSetting(pendingBrowser, true);
  523.         }
  524.         hideBrowserHint();
  525.         if (pendingUrl && pendingBrowser) {
  526.             setTimeout(function() { doOpenBrowser(pendingBrowser, pendingUrl); }, 150);
  527.         }
  528.     });
  530.     hintCancel.addEventListener(‘click’, function() {
  531.         hideBrowserHint();
  532.         pendingBrowser = null;
  533.         pendingUrl = null;
  534.     });
  536.     hintDownload.addEventListener(‘click’, function() {
  537.         if (pendingBrowser) {
  538.             var config = BROWSER_CONFIG[pendingBrowser];
  539.             if (config && config.download) {
  540.                 window.open(config.download, ‘_blank’);
  541.             }
  542.         }
  543.     });
  545.     hintOverlay.addEventListener(‘click’, function(e) {
  546.         if (e.target === hintOverlay) {
  547.             hideBrowserHint();
  548.             pendingBrowser = null;
  549.             pendingUrl = null;
  550.         }
  551.     });
  553.     // ===== 浏览器打开入口 =====
  554.     function bn(b) {
  555.         var map = { edge:’Edge浏览器打开’, chrome:’谷歌浏览器打开’, firefox:’火狐浏览器打开’ };
  556.         return map[b] || ‘默认浏览器打开’;
  557.     }
  559.     function bc(b) {
  560.         var map = { edge:’browser-edge’, chrome:’browser-chrome’, firefox:’browser-firefox’ };
  561.         return map[b] || ‘browser-default’;
  562.     }
  564.     function openWith(b, u) {
  565.         if (b === ‘default’ || !b) { window.open(u, ‘_blank’); return; }
  566.         showBrowserHint(b, u);
  567.     }
  569.     function openHTML(b, u) {
  570.         var name = bn(b);
  571.         var cls = bc(b);
  572.         var su = u.replace(/’/g, “\\'”);
  573.         var html = ‘<div class=”open-btn-group”>’;
  574.         if (b === ‘default’) {
  575.             html += ‘<button class=”btn btn-open btn-sm”>打开</button>’;
  576.         } else {
  577.             html += ‘<button class=”btn btn-open btn-sm”>’ + name + ‘</button>’;
  578.             html += ‘<button class=”btn btn-outline btn-sm”>默认浏览器打开</button>’;
  579.         }
  580.         html += ‘</div>’;
  581.         return html;
  582.     }
  584.     function copyText(t, msg) {
  585.         try {
  586.             navigator.clipboard.writeText(t);
  587.             toast(msg);
  588.         } catch(e) {
  589.             var ta = document.createElement(‘textarea’);
  590.             ta.value = t;
  591.             document.body.appendChild(ta);
  592.             ta.select();
  593.             document.execCommand(‘copy’);
  594.             document.body.removeChild(ta);
  595.             toast(msg);
  596.         }
  597.     }
  599.     // ============================================================
  600.     // ===== 数据存储层 – localStorage 持久化存储 =====
  601.     // ============================================================
  603.     var STORAGE_KEY = ‘password_manager_data’;
  604.     var CONFIG_KEY = ‘password_manager_config’;
  605.     var empVisible = false;
  606.     var adminAuth = false;
  607.     var empHash = ”;
  608.     var adminHash = ”;
  609.     var autoBackupEnabled = false;
  610.     var lastBackupTime = null;
  611.     var credentials = [];
  612.     var nextId = 1;
  614.     // 默认密码
  615.     var DEF_EMP = h(’employee2024′);
  616.     var DEF_ADMIN = h(‘admin123’);
  618.     // ===== 数据操作 =====
  620.     function loadData() {
  621.         try {
  622.             var saved = localStorage.getItem(STORAGE_KEY);
  623.             if (saved) {
  624.                 var parsed = JSON.parse(saved);
  625.                 credentials = parsed.credentials || [];
  626.                 nextId = parsed.nextId || 1;
  627.                 return true;
  628.             }
  629.         } catch(e) {
  630.             console.error(‘加载数据失败:’, e);
  631.         }
  632.         return false;
  633.     }
  635.     function saveData() {
  636.         try {
  637.             var data = {
  638.                 credentials: credentials,
  639.                 nextId: nextId
  640.             };
  641.             localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
  642.             return true;
  643.         } catch(e) {
  644.             console.error(‘保存数据失败:’, e);
  645.             return false;
  646.         }
  647.     }
  649.     function loadConfig() {
  650.         try {
  651.             var saved = localStorage.getItem(CONFIG_KEY);
  652.             if (saved) {
  653.                 var parsed = JSON.parse(saved);
  654.                 empHash = parsed.empHash || DEF_EMP;
  655.                 adminHash = parsed.adminHash || DEF_ADMIN;
  656.                 autoBackupEnabled = parsed.autoBackupEnabled || false;
  657.                 return true;
  658.             }
  659.         } catch(e) {
  660.             console.error(‘加载配置失败:’, e);
  661.         }
  662.         return false;
  663.     }
  665.     function saveConfig() {
  666.         try {
  667.             var data = {
  668.                 empHash: empHash,
  669.                 adminHash: adminHash,
  670.                 autoBackupEnabled: autoBackupEnabled
  671.             };
  672.             localStorage.setItem(CONFIG_KEY, JSON.stringify(data));
  673.             return true;
  674.         } catch(e) {
  675.             console.error(‘保存配置失败:’, e);
  676.             return false;
  677.         }
  678.     }
  680.     function initData() {
  681.         var loaded = loadData();
  682.         var configLoaded = loadConfig();
  684.         if (!loaded) {
  685.             credentials = [
  686.                 { id: 1, url: ‘https://mail.company.com’, username: ‘zhang.san@company.com’, password: ‘Mail@2024Secure’, browser: ‘default’ },
  687.                 { id: 2, url: ‘https://hrsystem.company.com’, username: ‘hr_admin’, password: ‘HrP@ss#2024’, browser: ‘edge’ },
  688.                 { id: 3, url: ‘https://gitlab.company.com’, username: ‘dev_lihua’, password: ‘GitLab!7890’, browser: ‘chrome’ },
  689.                 { id: 4, url: ‘https://jira.company.com’, username: ‘project_manager’, password: ‘Jira@2025’, browser: ‘firefox’ }
  690.             ];
  691.             nextId = 5;
  692.             saveData();
  693.         }
  695.         if (!configLoaded) {
  696.             empHash = DEF_EMP;
  697.             adminHash = DEF_ADMIN;
  698.             autoBackupEnabled = false;
  699.             saveConfig();
  700.         }
  702.         updateStorageInfo();
  703.         updateLastBackupTime();
  704.         updateAutoBackupUI();
  705.     }
  707.     // ===== 自动备份 =====
  709.     function getAutoBackupSetting() {
  710.         return autoBackupEnabled;
  711.     }
  713.     function setAutoBackupSetting(enabled) {
  714.         autoBackupEnabled = enabled;
  715.         saveConfig();
  716.         updateAutoBackupUI();
  717.     }
  719.     function updateAutoBackupUI() {
  720.         var toggle = document.getElementById(‘autoBackupToggle’);
  721.         var status = document.getElementById(‘autoBackupStatus’);
  722.         if (toggle) {
  723.             toggle.classList.toggle(‘active’, autoBackupEnabled);
  724.         }
  725.         if (status) {
  726.             status.textContent = autoBackupEnabled ? ‘&#9989; 已开启’ : ‘&#9940; 已关闭’;
  727.             status.style.color = autoBackupEnabled ? ‘var(–success)’ : ‘var(–text2)’;
  728.         }
  729.     }
  731.     function exportToDownloadFolder() {
  732.         try {
  733.             var data = {
  734.                 credentials: credentials,
  735.                 nextId: nextId,
  736.                 exportTime: new Date().toISOString(),
  737.                 version: ‘1.0’
  738.             };
  739.             var json = JSON.stringify(data, null, 2);
  740.             var blob = new Blob([json], { type: ‘application/json’ });
  741.             var url = URL.createObjectURL(blob);
  742.             var a = document.createElement(‘a’);
  743.             a.href = url;
  744.             var now = new Date();
  745.             var dateStr = now.getFullYear() + ‘-‘ +
  746.                 String(now.getMonth()+1).padStart(2,’0′) + ‘-‘ +
  747.                 String(now.getDate()).padStart(2,’0′) + ‘_’ +
  748.                 String(now.getHours()).padStart(2,’0′) + ‘-‘ +
  749.                 String(now.getMinutes()).padStart(2,’0′);
  750.             a.download = ‘password_backup_’ + dateStr + ‘.json’;
  751.             document.body.appendChild(a);
  752.             a.click();
  753.             document.body.removeChild(a);
  754.             setTimeout(function() {
  755.                 URL.revokeObjectURL(url);
  756.             }, 5000);
  758.             lastBackupTime = now;
  759.             updateLastBackupTime();
  760.             return true;
  761.         } catch(e) {
  762.             console.error(‘自动备份失败:’, e);
  763.             return false;
  764.         }
  765.     }
  767.     function updateLastBackupTime() {
  768.         var el = document.getElementById(‘lastBackupTime’);
  769.         if (!el) return;
  770.         if (lastBackupTime) {
  771.             var str = lastBackupTime.getFullYear() + ‘-‘ +
  772.                 String(lastBackupTime.getMonth()+1).padStart(2,’0′) + ‘-‘ +
  773.                 String(lastBackupTime.getDate()).padStart(2,’0′) + ‘ ‘ +
  774.                 String(lastBackupTime.getHours()).padStart(2,’0′) + ‘:’ +
  775.                 String(lastBackupTime.getMinutes()).padStart(2,’0′);
  776.             el.textContent = ‘&#128203; 最后备份：’ + str;
  777.         } else {
  778.             el.textContent = ‘&#128203; 最后备份：无’;
  779.         }
  780.     }
  782.     // ===== 增删改查 =====
  784.     function allCreds() {
  785.         return credentials.slice().sort(function(a, b) { return b.id – a.id; });
  786.     }
  788.     function getCredById(id) {
  789.         for (var i = 0; i < credentials.length; i++) {
  790.             if (credentials[i].id === id) return credentials[i];
  791.         }
  792.         return null;
  793.     }
  795.     function upsert(id, url, username, password, browser) {
  796.         if (!url || !username || !password) return false;
  798.         if (id === null || id === undefined || id === ”) {
  799.             var newCred = {
  800.                 id: nextId++,
  801.                 url: url,
  802.                 username: username,
  803.                 password: password,
  804.                 browser: browser || ‘default’
  805.             };
  806.             credentials.push(newCred);
  807.         } else {
  808.             var found = false;
  809.             for (var i = 0; i < credentials.length; i++) {
  810.                 if (credentials[i].id === id) {
  811.                     credentials[i].url = url;
  812.                     credentials[i].username = username;
  813.                     credentials[i].password = password;
  814.                     credentials[i].browser = browser || ‘default’;
  815.                     found = true;
  816.                     break;
  817.                 }
  818.             }
  819.             if (!found) return false;
  820.         }
  822.         saveData();
  823.         updateStorageInfo();
  825.         if (autoBackupEnabled) {
  826.             exportToDownloadFolder();
  827.         }
  829.         return true;
  830.     }
  832.     function delCred(id) {
  833.         for (var i = 0; i < credentials.length; i++) {
  834.             if (credentials[i].id === id) {
  835.                 credentials.splice(i, 1);
  836.                 saveData();
  837.                 updateStorageInfo();
  838.                 if (autoBackupEnabled) {
  839.                     exportToDownloadFolder();
  840.                 }
  841.                 return true;
  842.             }
  843.         }
  844.         return false;
  845.     }
  847.     function batchUpsert(records) {
  848.         var cnt = 0;
  849.         for (var i = 0; i < records.length; i++) {
  850.             var rec = records[i];
  851.             if (rec.url && rec.username && rec.password) {
  852.                 var exists = false;
  853.                 for (var j = 0; j < credentials.length; j++) {
  854.                     if (credentials[j].url === rec.url) {
  855.                         credentials[j].username = rec.username;
  856.                         credentials[j].password = rec.password;
  857.                         credentials[j].browser = rec.browser || ‘default’;
  858.                         exists = true;
  859.                         cnt++;
  860.                         break;
  861.                     }
  862.                 }
  863.                 if (!exists) {
  864.                     credentials.push({
  865.                         id: nextId++,
  866.                         url: rec.url,
  867.                         username: rec.username,
  868.                         password: rec.password,
  869.                         browser: rec.browser || ‘default’
  870.                     });
  871.                     cnt++;
  872.                 }
  873.             }
  874.         }
  875.         saveData();
  876.         updateStorageInfo();
  877.         if (autoBackupEnabled) {
  878.             exportToDownloadFolder();
  879.         }
  880.         return cnt;
  881.     }
  883.     function updateStorageInfo() {
  884.         var el = document.getElementById(‘recordCount’);
  885.         if (el) el.textContent = credentials.length;
  886.     }
  888.     // ===== 密码配置 =====
  890.     function getEmpHash() { return empHash; }
  891.     function getAdminHash() { return adminHash; }
  893.     function setEmpHash(newHash) {
  894.         empHash = newHash;
  895.         saveConfig();
  896.     }
  898.     function setAdminHash(newHash) {
  899.         adminHash = newHash;
  900.         saveConfig();
  901.     }
  903.     // ===== 导出/导入 JSON =====
  905.     function exportJson() {
  906.         try {
  907.             var data = {
  908.                 credentials: credentials,
  909.                 nextId: nextId,
  910.                 exportTime: new Date().toISOString(),
  911.                 version: ‘1.0’
  912.             };
  913.             var json = JSON.stringify(data, null, 2);
  914.             var blob = new Blob([json], { type: ‘application/json’ });
  915.             var url = URL.createObjectURL(blob);
  916.             var a = document.createElement(‘a’);
  917.             a.href = url;
  918.             var now = new Date();
  919.             var dateStr = now.getFullYear() + ‘-‘ +
  920.                 String(now.getMonth()+1).padStart(2,’0′) + ‘-‘ +
  921.                 String(now.getDate()).padStart(2,’0′) + ‘_’ +
  922.                 String(now.getHours()).padStart(2,’0′) + ‘-‘ +
  923.                 String(now.getMinutes()).padStart(2,’0′);
  924.             a.download = ‘password_data_’ + dateStr + ‘.json’;
  925.             document.body.appendChild(a);
  926.             a.click();
  927.             document.body.removeChild(a);
  928.             setTimeout(function() {
  929.                 URL.revokeObjectURL(url);
  930.             }, 5000);
  931.             toast(‘数据已导出到下载目录’, ‘success’);
  932.         } catch(e) {
  933.             toast(‘导出失败: ‘ + e.message, true);
  934.         }
  935.     }
  937.     function importJson(file) {
  938.         var reader = new FileReader();
  939.         reader.onload = function(e) {
  940.             try {
  941.                 var data = JSON.parse(e.target.result);
  942.                 if (!data.credentials || !Array.isArray(data.credentials)) {
  943.                     toast(‘无效的数据文件’, true);
  944.                     return;
  945.                 }
  947.                 if (!confirm(‘确定要恢复此数据吗？当前数据将被覆盖！’)) {
  948.                     return;
  949.                 }
  951.                 credentials = data.credentials;
  952.                 nextId = data.nextId || (credentials.length > 0 ? Math.max.apply(null, credentials.map(function(c) { return c.id; })) + 1 : 1);
  953.                 saveData();
  954.                 updateStorageInfo();
  955.                 if (autoBackupEnabled) {
  956.                     exportToDownloadFolder();
  957.                 }
  958.                 renderEmp();
  959.                 renderAdmin();
  960.                 toast(‘数据恢复成功’, ‘success’);
  961.             } catch(err) {
  962.                 toast(‘无效的数据文件: ‘ + err.message, true);
  963.             }
  964.         };
  965.         reader.readAsText(file);
  966.     }
  968.     // ===== 渲染 =====
  969.     function renderEmp() {
  970.         var tbody = document.getElementById(’employeeTableBody’);
  971.         if (!tbody) return;
  972.         var list = allCreds();
  973.         if (!list.length) {
  974.             tbody.innerHTML = ‘<tr class=”empty-row”><td colspan=”4″>暂无数据</td></tr>’;
  975.             return;
  976.         }
  977.         var html = ”;
  978.         for (var i = 0; i < list.length; i++) {
  979.             var item = list[i];
  980.             var name = bn(item.browser);
  981.             var cls = bc(item.browser);
  982.             var pwd = empVisible ?
  983.                 ‘<span class=”password-plain”>’ + esc(item.password) + ‘</span>’ :
  984.                 ‘<span class=”password-masked”>●●●●●●●●</span>’;
  985.             html += ‘<tr><td><div class=”url-cell”><a href=”‘ + esc(item.url) + ‘” target=”_blank” class=”url-link”>’ + esc(item.url) + ‘</a><button class=”copy-url-btn” data-url=”‘ + esc(item.url) + ‘”>复制</button></div></td>’;
  986.             html += ‘<td>’ + esc(item.username) + ‘</td><td>’ + pwd + ‘</td>’;
  987.             html += ‘<td><span class=”browser-badge ‘ + cls + ‘”>’ + name + ‘</span><br>’ + openHTML(item.browser, item.url) + ‘</td></tr>’;
  988.         }
  989.         tbody.innerHTML = html;
  990.         var btns = document.querySelectorAll(‘.copy-url-btn’);
  991.         for (var j = 0; j < btns.length; j++) {
  992.             btns[j].addEventListener(‘click’, function() { copyText(this.dataset.url, ‘网址已复制’); });
  993.         }
  994.     }
  996.     function renderAdmin() {
  997.         var tbody = document.getElementById(‘adminTableBody’);
  998.         if (!tbody) return;
  999.         if (!adminAuth) {
  1000.             tbody.innerHTML = ‘<tr class=”empty-row”><td colspan=”5″>请验证管理员权限</td></tr>’;
  1001.             return;
  1002.         }
  1003.         var list = allCreds();
  1004.         if (!list.length) {
  1005.             tbody.innerHTML = ‘<tr class=”empty-row”><td colspan=”5″>暂无数据，点击”新增”添加</td></tr>’;
  1006.             return;
  1007.         }
  1008.         var html = ”;
  1009.         for (var i = 0; i < list.length; i++) {
  1010.             var item = list[i];
  1011.             var name = bn(item.browser);
  1012.             var cls = bc(item.browser);
  1013.             html += ‘<tr><td><a href=”‘ + esc(item.url) + ‘” target=”_blank” class=”url-link”>’ + esc(item.url) + ‘</a></td>’;
  1014.             html += ‘<td>’ + esc(item.username) + ‘</td>’;
  1015.             html += ‘<td><span class=”password-plain”>’ + esc(item.password) + ‘</span></td>’;
  1016.             html += ‘<td><span class=”browser-badge ‘ + cls + ‘”>’ + name + ‘</span><br>’ + openHTML(item.browser, item.url) + ‘</td>’;
  1017.             html += ‘<td class=”flex-btns”><button class=”btn btn-outline edit-btn” data-id=”‘ + item.id + ‘”>编辑</button><button class=”btn btn-danger delete-btn” data-id=”‘ + item.id + ‘”>删除</button></td></tr>’;
  1018.         }
  1019.         tbody.innerHTML = html;
  1020.         var eds = document.querySelectorAll(‘.edit-btn’);
  1021.         for (var j = 0; j < eds.length; j++) {
  1022.             eds[j].addEventListener(‘click’, function() { openEdit(parseInt(this.dataset.id)); });
  1023.         }
  1024.         var dels = document.querySelectorAll(‘.delete-btn’);
  1025.         for (var k = 0; k < dels.length; k++) {
  1026.             dels[k].addEventListener(‘click’, function() {
  1027.                 if (confirm(‘确定删除？’)) {
  1028.                     delCred(parseInt(this.dataset.id));
  1029.                     renderAdmin();
  1030.                     renderEmp();
  1031.                     toast(‘已删除’);
  1032.                 }
  1033.             });
  1034.         }
  1035.         updateStorageInfo();
  1036.     }
  1038.     function esc(s) { if (!s) return ”; return s.replace(/[&<>]/g, function(m) { return { ‘&’:’&’, ‘<‘:'<‘, ‘>’:’>’ }[m]; }); }
  1040.     function verifyEmp() {
  1041.         var inp = document.getElementById(’empViewPwd’);
  1042.         if (!inp) return;
  1043.         if (h(inp.value) === empHash) {
  1044.             empVisible = true;
  1045.             toast(‘验证成功’, ‘success’);
  1046.             renderEmp();
  1047.         } else {
  1048.             empVisible = false;
  1049.             renderEmp();
  1050.             toast(‘密码错误’, true);
  1051.         }
  1052.         inp.value = ”;
  1053.     }
  1055.     function openEdit(id) {
  1056.         var item = getCredById(id);
  1057.         if (item) openModal(item);
  1058.     }
  1060.     function toast(msg, err) {
  1061.         var t = document.getElementById(‘toast’);
  1062.         if (!t) return;
  1063.         t.textContent = msg;
  1064.         t.className = ‘toast’;
  1065.         if (err === true) t.classList.add(‘error’);
  1066.         else if (err === ‘success’) t.classList.add(‘success’);
  1067.         t.classList.add(‘show’);
  1068.         clearTimeout(t._timer);
  1069.         t._timer = setTimeout(function() { t.classList.remove(‘show’); }, 3000);
  1070.     }
  1072.     // ===== 模态框 =====
  1073.     var modal = document.getElementById(‘credModal’);
  1074.     var urlInp = document.getElementById(‘credUrl’);
  1075.     var userInp = document.getElementById(‘credUsername’);
  1076.     var pwdInp = document.getElementById(‘credPassword’);
  1077.     var browserSel = document.getElementById(‘credBrowser’);
  1078.     var editIdF = document.getElementById(‘editId’);
  1079.     var modalTitle = document.getElementById(‘modalTitle’);
  1081.     function openModal(entry) {
  1082.         if (!adminAuth) { toast(‘请先登录’, true); return; }
  1083.         if (entry) {
  1084.             modalTitle.textContent = ‘编辑凭证’;
  1085.             urlInp.value = entry.url;
  1086.             userInp.value = entry.username;
  1087.             pwdInp.value = entry.password;
  1088.             browserSel.value = entry.browser || ‘default’;
  1089.             editIdF.value = entry.id;
  1090.         } else {
  1091.             modalTitle.textContent = ‘添加凭证’;
  1092.             urlInp.value = ”;
  1093.             userInp.value = ”;
  1094.             pwdInp.value = ”;
  1095.             browserSel.value = ‘default’;
  1096.             editIdF.value = ”;
  1097.         }
  1098.         modal.style.display = ‘flex’;
  1099.     }
  1101.     function closeModal() { modal.style.display = ‘none’; }
  1103.     function saveCred() {
  1104.         if (!adminAuth) { toast(‘未授权’, true); return; }
  1105.         var url = urlInp.value.trim();
  1106.         var user = userInp.value.trim();
  1107.         var pwd = pwdInp.value.trim();
  1108.         var browser = browserSel.value;
  1109.         if (!url || !user || !pwd) { toast(‘请填完整’, true); return; }
  1110.         if (!url.startsWith(‘http://’) && !url.startsWith(‘https://’)) {
  1111.             toast(‘网址需 http:// 或 https:// 开头’, true);
  1112.             return;
  1113.         }
  1114.         var id = editIdF.value;
  1115.         if (upsert(id ? parseInt(id) : null, url, user, pwd, browser)) {
  1116.             toast(id ? ‘已修改’ : ‘已添加’, ‘success’);
  1117.             closeModal();
  1118.             renderAdmin();
  1119.             renderEmp();
  1120.         } else { toast(‘操作失败’, true); }
  1121.     }
  1123.     // ===== 导出导入 Excel =====
  1124.     function exportExcel() {
  1125.         if (!adminAuth) { toast(‘请先登录’, true); return; }
  1126.         var list = allCreds();
  1127.         if (!list.length) { toast(‘无数据’, true); return; }
  1128.         var data = [[‘网址’, ‘账号’, ‘密码’, ‘浏览器’]];
  1129.         for (var i = 0; i < list.length; i++) {
  1130.             data.push([list[i].url, list[i].username, list[i].password, list[i].browser]);
  1131.         }
  1132.         var ws = XLSX.utils.aoa_to_sheet(data);
  1133.         var wb = XLSX.utils.book_new();
  1134.         XLSX.utils.book_append_sheet(wb, ws, ‘Credentials’);
  1135.         XLSX.writeFile(wb, ‘password_export_’ + Date.now() + ‘.xls’, { bookType: ‘xls’ });
  1136.         toast(‘导出成功’, ‘success’);
  1137.     }
  1139.     function importExcel(file) {
  1140.         if (!adminAuth) { toast(‘请先登录’, true); return; }
  1141.         var reader = new FileReader();
  1142.         reader.onload = function(e) {
  1143.             var data = new Uint8Array(e.target.result);
  1144.             var workbook = XLSX.read(data, { type: ‘array’ });
  1145.             var sheet = workbook.Sheets[workbook.SheetNames[0]];
  1146.             var rows = XLSX.utils.sheet_to_json(sheet, { header: 1, defval: ” });
  1147.             if (!rows || rows.length < 2) { toast(‘无效文件’, true); return; }
  1148.             var headers = rows[0];
  1149.             var ui = -1;
  1150.             var ui2 = -1;
  1151.             var pi = -1;
  1152.             var bi = -1;
  1153.             for (var i = 0; i < headers.length; i++) {
  1154.                 var s = String(headers[i]).toLowerCase();
  1155.                 if (s.includes(‘网址’) || s.includes(‘url’)) ui = i;
  1156.                 if (s.includes(‘账号’) || s.includes(‘用户名’)) ui2 = i;
  1157.                 if (s.includes(‘密码’)) pi = i;
  1158.                 if (s.includes(‘浏览器’)) bi = i;
  1159.             }
  1160.             if (ui === -1 || ui2 === -1 || pi === -1) { toast(‘缺少必要列’, true); return; }
  1161.             var records = [];
  1162.             for (var j = 1; j < rows.length; j++) {
  1163.                 var row = rows[j];
  1164.                 if (row && row.length > Math.max(ui, ui2, pi)) {
  1165.                     var url = row[ui] ? String(row[ui]).trim() : ”;
  1166.                     var user = row[ui2] ? String(row[ui2]).trim() : ”;
  1167.                     var pwd = row[pi] ? String(row[pi]).trim() : ”;
  1168.                     var browser = (bi !== -1 && row[bi]) ? String(row[bi]).trim() : ‘default’;
  1169.                     if (url && user && pwd && (url.startsWith(‘http://’) || url.startsWith(‘https://’))) {
  1170.                         records.push({ url: url, username: user, password: pwd, browser: browser });
  1171.                     }
  1172.                 }
  1173.             }
  1174.             if (!records.length) { toast(‘无有效数据’, true); return; }
  1175.             var cnt = batchUpsert(records);
  1176.             renderAdmin();
  1177.             renderEmp();
  1178.             toast(‘导入 ‘ + cnt + ‘ 条’, ‘success’);
  1179.         };
  1180.         reader.readAsArrayBuffer(file);
  1181.     }
  1183.     // ===== 管理员登录 =====
  1184.     function showAdminLogin() {
  1185.         if (adminAuth) return;
  1186.         var overlay = document.createElement(‘div’);
  1187.         overlay.className = ‘admin-auth-overlay’;
  1188.         overlay.id = ‘adminOverlay’;
  1189.         overlay.innerHTML = ‘<div class=”admin-auth-box”><h3>管理员验证</h3><input type=”password” id=”adminLoginPwd” placeholder=”管理员密码” autocomplete=”off”><div id=”adminLoginError” class=”error”></div><div style=”display:flex;gap:10px;margin-top:16px;justify-content:center;”><button class=”btn btn-outline” id=”adminLoginCancel”>取消</button><button class=”btn btn-primary” id=”adminLoginConfirm”>确认</button></div></div>’;
  1190.         document.body.appendChild(overlay);
  1191.         var inp = document.getElementById(‘adminLoginPwd’);
  1192.         inp.focus();
  1193.         var doAuth = function() {
  1194.             if (h(inp.value) === adminHash) {
  1195.                 adminAuth = true;
  1196.                 document.body.removeChild(overlay);
  1197.                 toast(‘验证成功’, ‘success’);
  1198.                 renderAdmin();
  1199.                 var panel = document.getElementById(‘adminPanel’);
  1200.                 if (!panel.classList.contains(‘hidden’)) renderAdmin();
  1201.             } else {
  1202.                 document.getElementById(‘adminLoginError’).textContent = ‘密码错误’;
  1203.                 inp.value = ”;
  1204.                 inp.focus();
  1205.             }
  1206.         };
  1207.         var cancel = function() {
  1208.             document.body.removeChild(overlay);
  1209.             if (!adminAuth) { switchTab(’employee’);
  1210.                 toast(‘已取消’, true); }
  1211.         };
  1212.         document.getElementById(‘adminLoginConfirm’).addEventListener(‘click’, doAuth);
  1213.         document.getElementById(‘adminLoginCancel’).addEventListener(‘click’, cancel);
  1214.         inp.addEventListener(‘keypress’, function(e) { if (e.key === ‘Enter’) doAuth(); });
  1215.     }
  1217.     // ===== Tab切换 =====
  1218.     function switchTab(tab) {
  1219.         var admin = document.getElementById(‘adminPanel’);
  1220.         var emp = document.getElementById(’employeePanel’);
  1221.         var btns = document.querySelectorAll(‘.tab-btn’);
  1222.         if (tab === ’employee’) {
  1223.             admin.classList.add(‘hidden’);
  1224.             emp.classList.remove(‘hidden’);
  1225.             renderEmp();
  1226.             btns.forEach(function(b) { b.classList.remove(‘active’); });
  1227.             document.querySelector(‘.tab-btn[data-tab=”employee”]’).classList.add(‘active’);
  1228.         } else {
  1229.             if (!adminAuth) {
  1230.                 showAdminLogin();
  1231.                 var iv = setInterval(function() {
  1232.                     if (adminAuth) {
  1233.                         clearInterval(iv);
  1234.                         admin.classList.remove(‘hidden’);
  1235.                         emp.classList.add(‘hidden’);
  1236.                         renderAdmin();
  1237.                         btns.forEach(function(b) { b.classList.remove(‘active’); });
  1238.                         document.querySelector(‘.tab-btn[data-tab=”admin”]’).classList.add(‘active’);
  1239.                     }
  1240.                 }, 200);
  1241.                 setTimeout(function() { clearInterval(iv); }, 30000);
  1242.             } else {
  1243.                 admin.classList.remove(‘hidden’);
  1244.                 emp.classList.add(‘hidden’);
  1245.                 renderAdmin();
  1246.                 btns.forEach(function(b) { b.classList.remove(‘active’); });
  1247.                 document.querySelector(‘.tab-btn[data-tab=”admin”]’).classList.add(‘active’);
  1248.             }
  1249.         }
  1250.     }
  1252.     // ===== 主题切换 =====
  1253.     function setTheme(name) {
  1254.         var root = document.documentElement;
  1255.         var prev = document.querySelector(‘.theme-dot.active’);
  1256.         if (prev) prev.classList.remove(‘active’);
  1257.         var dot = document.querySelector(‘.theme-dot[data-theme=”‘ + name + ‘”]’);
  1258.         if (dot) dot.classList.add(‘active’);
  1259.         root.className = ”;
  1260.         if (name !== ‘default’) root.className = ‘theme-‘ + name;
  1261.         localStorage.setItem(‘pwd_theme’, name);
  1262.     }
  1264.     // ===== 事件绑定 =====
  1265.     document.addEventListener(‘DOMContentLoaded’, function() {
  1266.         var dots = document.querySelectorAll(‘.theme-dot’);
  1267.         dots.forEach(function(d) {
  1268.             d.addEventListener(‘click’, function() { setTheme(this.dataset.theme); });
  1269.         });
  1270.         var saved = localStorage.getItem(‘pwd_theme’);
  1271.         if (saved) setTheme(saved);
  1273.         // 自动备份开关
  1274.         var toggleBtn = document.getElementById(‘autoBackupToggle’);
  1275.         if (toggleBtn) {
  1276.             toggleBtn.addEventListener(‘click’, function() {
  1277.                 autoBackupEnabled = !autoBackupEnabled;
  1278.                 setAutoBackupSetting(autoBackupEnabled);
  1279.                 toast(autoBackupEnabled ? ‘自动备份已开启’ : ‘自动备份已关闭’, ‘success’);
  1280.                 if (autoBackupEnabled && credentials.length > 0) {
  1281.                     exportToDownloadFolder();
  1282.                     toast(‘已备份到下载文件夹’, ‘success’);
  1283.                 }
  1284.             });
  1285.         }
  1287.         var btnOpenAdd = document.getElementById(‘openAddCredBtn’);
  1288.         var btnCloseModal = document.getElementById(‘closeModalBtn’);
  1289.         var btnSaveCred = document.getElementById(‘saveCredBtn’);
  1290.         var btnVerifyEmp = document.getElementById(‘verifyEmpBtn’);
  1291.         var inpEmpPwd = document.getElementById(’empViewPwd’);
  1292.         var btnExportExcel = document.getElementById(‘exportExcelBtn’);
  1293.         var btnExportJson = document.getElementById(‘exportJsonBtn’);
  1294.         var inpImportExcel = document.getElementById(‘importExcelInput’);
  1295.         var inpImportJson = document.getElementById(‘importJsonInput’);
  1296.         var btnUpdateEmpPwd = document.getElementById(‘updateEmployeePwdBtn’);
  1297.         var btnUpdateAdminPwd = document.getElementById(‘updateAdminPwdBtn’);
  1299.         if (btnOpenAdd) btnOpenAdd.addEventListener(‘click’, function() { openModal(null); });
  1300.         if (btnCloseModal) btnCloseModal.addEventListener(‘click’, closeModal);
  1301.         if (btnSaveCred) btnSaveCred.addEventListener(‘click’, saveCred);
  1302.         if (btnVerifyEmp) btnVerifyEmp.addEventListener(‘click’, verifyEmp);
  1303.         if (inpEmpPwd) inpEmpPwd.addEventListener(‘keypress’, function(e) { if (e.key === ‘Enter’) verifyEmp(); });
  1304.         if (btnExportExcel) btnExportExcel.addEventListener(‘click’, exportExcel);
  1305.         if (btnExportJson) btnExportJson.addEventListener(‘click’, exportJson);
  1306.         if (inpImportExcel) inpImportExcel.addEventListener(‘change’, function(e) { if (this.files.length) importExcel(this.files[0]);
  1307.             this.value = ”; });
  1308.         if (inpImportJson) inpImportJson.addEventListener(‘change’, function(e) { if (this.files.length) importJson(this.files[0]);
  1309.             this.value = ”; });
  1310.         if (btnUpdateEmpPwd) {
  1311.             btnUpdateEmpPwd.addEventListener(‘click’, function() {
  1312.                 var inp = document.getElementById(‘newEmployeePwd’);
  1313.                 var p = inp.value;
  1314.                 if (!p || p.length < 4) { toast(‘密码至少4位’, true);
  1315.                     inp.value = ”; return; }
  1316.                 setEmpHash(h(p));
  1317.                 empVisible = false;
  1318.                 renderEmp();
  1319.                 toast(‘员工密码已修改’, ‘success’);
  1320.                 inp.value = ”;
  1321.             });
  1322.         }
  1323.         if (btnUpdateAdminPwd) {
  1324.             btnUpdateAdminPwd.addEventListener(‘click’, function() {
  1325.                 var inp = document.getElementById(‘newAdminPwd’);
  1326.                 var p = inp.value;
  1327.                 if (!p || p.length < 4) { toast(‘密码至少4位’, true);
  1328.                     inp.value = ”; return; }
  1329.                 setAdminHash(h(p));
  1330.                 toast(‘管理员密码已修改’, ‘success’);
  1331.                 inp.value = ”;
  1332.             });
  1333.         }
  1334.         document.querySelectorAll(‘.tab-btn’).forEach(function(btn) {
  1335.             btn.addEventListener(‘click’, function() { switchTab(this.dataset.tab); });
  1336.         });
  1337.         window.onclick = function(e) { if (e.target === modal) closeModal(); };
  1338.     });
  1340.     // ===== 启动 =====
  1341.     function boot() {
  1342.         try {
  1343.             initData();
  1344.             empVisible = false;
  1345.             adminAuth = false;
  1346.             renderEmp();
  1347.             renderAdmin();
  1348.             switchTab(’employee’);
  1349.             updateStorageInfo();
  1350.             updateLastBackupTime();
  1351.             toast(‘系统已启动，数据永久保存在 localStorage’, ‘success’);
  1352.         } catch(err) {
  1353.             toast(‘初始化失败: ‘ + err.message, true);
  1354.             console.error(err);
  1355.         }
  1356.     }
  1358.     if (document.readyState === ‘loading’) {
  1359.         document.addEventListener(‘DOMContentLoaded’, boot);
  1360.     } else {
  1361.         boot();
  1362.     }
  1363. </script>
  1364. </body>
  1365. </html>
复制代码

由于个人对HTML网页代码的理解还是欠缺，大家有什么新的建议可提出，或有什么错误的地方，麻烦大家告知，我虚心求教。

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在
点赞 (0)

本站所有资源来源于网络，仅限用于学习研究；无任何技术支持！不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除内容。如果您喜欢，请支持正版。如有侵权请邮件与我们联系处理。

个人整改后做的html版网页密码管理系统
上一篇： 苹果ios漏洞18.5-18.6.2系统的源码
个人整改后做的html版网页密码管理系统
下一篇：

已经没有下一篇了!

也想出现在这里？点击联系我~
常见问题

关于网盘地址失效如何补发-提交失效网盘给予适当积分奖励

  • 网盘有时候会因为名字 关键词导致失效 大家可以给管理员提供失效信息，我们会给大家适当积分进行奖励 我们会第一时间进行补充修正 感谢大家的配合 让我们共同努力 打造良好的资源分享平台
查看详情

点我工单反馈，5分内急速处理

  • 网址失效点击我
查看详情

相关文章

个人整改后做的html版网页密码管理系统
个人整改后做的html版网页密码管理系统
模板源码
4分钟前 267
苹果ios漏洞18.5-18.6.2系统的源码
苹果ios漏洞18.5-18.6.2系统的源码
模板源码
3天前 759
AI一站式NarratoAI视频解说一键自动裁剪配音字幕工具本地部署
AI一站式NarratoAI视频解说一键自动裁剪配音字幕工具本地部署
模板源码
3天前 366
总裁图床系统开源版-高速图片外链托管服务平台
总裁图床系统开源版-高速图片外链托管服务平台
模板源码
1周前 918
猜你喜欢
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

联系官方团队 在线提交工单
TA的动态
热门文章
优选服务器推荐 到期时间：
随机推荐
热门标签
终身VIP会员限时钜惠
首页 公告 菜单 加入vip 会员