feat(vault): 凭据库（密码+2FA 动态码）与 MASTER_KEY 密钥托管

credentials 表为登录凭据唯一事实源（站点×登录方式，含 oauth/2FA）；账号密码读写重定向凭据层并幂等迁移历史数据；TOTP 按 RFC6238 零依赖自实现，绑定需当前动态码校验；Key Escrow 防 MASTER_KEY 遗失；前端新增凭据库视图与账号 2FA 联动。64 pytest + 16 浏览器端到端验证通过。

static/js/api.js

@@ -35,6 +35,13 @@ window.VpsFmt = {
   // 平台可提供的服务（综合平台多标签）：字段对应 Provider.services 逗号分隔列表
   SERVICES_LABELS: { vps: '云服务器', domain: '域名', ai_agent: 'AI服务', cloudflare: 'Cloudflare', ssl_cert: 'SSL证书', cdn: 'CDN', dns: 'DNS', other: '其他' },
   CYCLE_LABELS: { monthly: '月付', quarterly: '季付', yearly: '年付' },
+  // 凭据库登录方式：字段对应 Credential.login_type
+  LOGIN_TYPE_LABELS: { password: '密码登录', oauth: '授权登录', other: '其他' },
+  // 授权登录常见来源（表单 datalist 建议，可自由输入）
+  OAUTH_PROVIDERS: ['google', 'apple', 'github', 'microsoft', 'wechat', 'qq'],
+  loginTypeBadge(t) {
+    return { password: 'bg-slate-500/10 text-slate-600 dark:text-slate-400', oauth: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400', other: 'bg-amber-500/10 text-amber-600 dark:text-amber-400' }[t] || 'bg-slate-500/10 text-slate-500';
+  },
   typeBadge(t) {
     return { vps: 'bg-blue-500/10 text-blue-600 dark:text-blue-400', domain: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400', ai_agent: 'bg-violet-500/10 text-violet-600 dark:text-violet-400', cloudflare: 'bg-orange-500/10 text-orange-600 dark:text-orange-400', other: 'bg-slate-500/10 text-slate-600 dark:text-slate-400' }[t] || 'bg-slate-500/10 text-slate-500';
   },

static/js/app.js

@@ -5,12 +5,13 @@ const NAVS = [
   { key: 'dashboard', label: '总览', icon: '📊' },
   { key: 'assets', label: '资产', icon: '📦' },
   { key: 'monitor', label: '监控中心', icon: '⏳' },
+  { key: 'vault', label: '凭据库', icon: '🔐' },
   { key: 'providers', label: '平台', icon: '🏢' },
   { key: 'settings', label: '设置', icon: '⚙️' },
 ];
 const VIEW_MAP = {
   dashboard: 'dashboard-view', assets: 'assets-view', monitor: 'monitor-view',
-  providers: 'providers-view', settings: 'settings-view',
+  vault: 'vault-view', providers: 'providers-view', settings: 'settings-view',
   // 服务器监控为隐藏路由（不进导航，从资产页 VPS「监控」进入）
   servers: 'servers-view',
 };
@@ -85,6 +86,10 @@ const AppRoot = {
     <provider-modal></provider-modal>
     <account-modal></account-modal>
     <accounts-view-modal></accounts-view-modal>
+    <credential-modal></credential-modal>
+
+    <!-- 复制等操作的轻提示（底部导航上方，不遮内容） -->
+    <div v-if="toast.show" class="fixed bottom-20 md:bottom-6 left-1/2 -translate-x-1/2 z-[80] px-4 py-2 rounded-full bg-slate-900/90 dark:bg-slate-100/90 text-white dark:text-slate-900 text-xs shadow-lg pointer-events-none whitespace-nowrap">{{ toast.text }}</div>
   </div>`,
   setup() {
     const appName = Api.CFG.appName;
@@ -96,6 +101,7 @@ const AppRoot = {
     function go(key) { navigate(key); }
     function quickAdd() {
       if (store.view === 'providers') return openProviderCreate();
+      if (store.view === 'vault') return openCredentialCreate();
       // 资产页：按当前 TAB 预设类型；监控中心/总览/设置：默认 VPS
       let preset = 'vps';
       if (store.view === 'assets') {
@@ -112,7 +118,7 @@ const AppRoot = {
       if (searchTimer) clearTimeout(searchTimer);
       searchTimer = setTimeout(() => { loadAssets(); }, 300);
     }
-    return { store, appName, appVersion, appCommit, navs, currentNav, viewComponent, go, quickAdd, toggleDark, reload: debouncedReload };
+    return { store, toast, appName, appVersion, appCommit, navs, currentNav, viewComponent, go, quickAdd, toggleDark, reload: debouncedReload };
   },
 };
 
@@ -121,6 +127,7 @@ const app = Vue.createApp(AppRoot);
 app.component('dashboard-view', DashboardView);
 app.component('assets-view', AssetsView);
 app.component('monitor-view', MonitorView);
+app.component('vault-view', VaultView);
 app.component('providers-view', ProvidersView);
 app.component('servers-view', ServersView);
 app.component('settings-view', SettingsView);
@@ -128,6 +135,7 @@ app.component('asset-modal', AssetModal);
 app.component('provider-modal', ProviderModal);
 app.component('account-modal', AccountModal);
 app.component('accounts-view-modal', AccountsViewModal);
+app.component('credential-modal', CredentialModal);
 applyDark();
 initRouter();
 loadAll();

static/js/modals.js

@@ -293,6 +293,8 @@ const AccountsViewModal = {
                     <div class="text-xs text-slate-400 truncate"><span v-if="a.remark">{{ a.name }} · </span>关联 {{ assetsOf(a).length }} 个资产</div>
                   </div>
                   <button v-if="a.has_login_password" @click="viewPwd(a)" class="text-xs text-amber-600 dark:text-amber-400" title="查看登录密码">🔑</button>
+                  <button v-if="a.has_login_password" @click="copyAcctPwd(a)" class="text-xs text-slate-500 dark:text-slate-400" title="复制登录密码">复制</button>
+                  <button v-if="a.has_otp" @click="viewPwd(a)" class="text-xs text-blue-600 dark:text-blue-400" title="该账号已绑定 2FA，点 🔑 一并查看动态码">2FA</button>
                   <button v-if="canSync(a)" @click="testAcct(a)" class="text-xs text-emerald-600 dark:text-emerald-400">测试</button>
                   <button v-if="canSync(a)" @click="syncAcct(a)" class="text-xs text-violet-600 dark:text-violet-400">同步</button>
                   <button @click="edit(a)" class="text-xs text-blue-600 dark:text-blue-400">编辑</button>
@@ -326,17 +328,26 @@ const AccountsViewModal = {
             <span class="font-mono break-all">{{ pwd.password }}</span>
           </div>
         </div>
+        <!-- 账号绑定了 2FA：一并展示动态码（服务端生成，本地倒计时） -->
+        <div v-if="pwd.otpId && otp.code" class="mt-3 flex items-center gap-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg px-3 py-2">
+          <span class="text-[10px] text-slate-500 shrink-0">2FA</span>
+          <span class="font-mono text-xl tracking-widest text-blue-700 dark:text-blue-300">{{ otp.code }}</span>
+          <span class="text-[10px] text-slate-400 shrink-0">{{ otp.expiresIn }}s</span>
+          <button @click="copyOtpCode" class="ml-auto text-[11px] px-2 py-0.5 rounded border border-blue-300 dark:border-blue-700 text-blue-600 dark:text-blue-400 shrink-0">复制</button>
+        </div>
         <div class="flex gap-2 mt-4">
           <button @click="copyPwd" class="flex-1 py-1.5 rounded-lg bg-blue-600 text-white text-xs">{{ pwd.copied ? '✓ 已复制' : '复制密码' }}</button>
-          <button @click="pwd.show=false" class="px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-700 text-xs">关闭</button>
+          <button @click="closePwd" class="px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-700 text-xs">关闭</button>
         </div>
-        <p class="text-[10px] text-slate-400 mt-2 text-center">{{ pwd.countdown }}s 后自动关闭</p>
+        <p v-if="pwd.countdown" class="text-[10px] text-slate-400 mt-2 text-center">{{ pwd.countdown }}s 后自动关闭</p>
       </div>
     </div>
   </div>`,
   setup() {
     const expanded = Vue.reactive({});
-    const pwd = Vue.reactive({ show: false, name: '', login_user: '', password: '', copied: false, countdown: 0, _timer: null });
+    const pwd = Vue.reactive({ show: false, name: '', login_user: '', password: '', copied: false, countdown: 0, otpId: null, _timer: null });
+    // 当前动态码（来自全局 otpState，服务端生成、secret 不下发）
+    const otp = Vue.computed(() => (pwd.otpId ? (otpState[pwd.otpId] || { code: '', expiresIn: 0 }) : { code: '', expiresIn: 0 }));
     const singleProvider = Vue.computed(() => !!store.accountsModal.providerSlug);
     const title = Vue.computed(() => {
       const slug = store.accountsModal.providerSlug;
@@ -396,7 +407,7 @@ const AccountsViewModal = {
     Vue.watch(() => store.accountsModal.show, (show) => {
       if (show) for (const k of Object.keys(expanded)) delete expanded[k];
     });
-    // 查看密码：拉取明文并展示，8 秒后自动关闭；关闭时清除定时器
+    // 查看密码：拉取明文并展示，8 秒后自动关闭；账号绑定 2FA 时一并取动态码且不自动关
     async function viewPwd(a) {
       try {
         const r = await Api.get('/accounts/' + a.id + '/password');
@@ -406,13 +417,28 @@ const AccountsViewModal = {
         pwd.copied = false;
         pwd.show = true;
         if (pwd._timer) clearInterval(pwd._timer);
-        pwd.countdown = 8;
-        pwd._timer = setInterval(() => {
-          pwd.countdown--;
-          if (pwd.countdown <= 0) { pwd.show = false; clearInterval(pwd._timer); pwd._timer = null; }
-        }, 1000);
+        if (a.has_otp && a.credential_id) {
+          // 验证码需看满 30s 周期，此时不自动关闭（countdown=0 不显示倒计时）
+          pwd.otpId = a.credential_id;
+          pwd.countdown = 0;
+          fetchOtp(a.credential_id);
+        } else {
+          pwd.otpId = null;
+          pwd.countdown = 8;
+          pwd._timer = setInterval(() => {
+            pwd.countdown--;
+            if (pwd.countdown <= 0) closePwd();
+          }, 1000);
+        }
       } catch (e) { alert('获取密码失败：' + e.message); }
     }
+    function closePwd() {
+      pwd.show = false;
+      pwd.password = '';
+      if (pwd.otpId) { stopOtp(pwd.otpId); pwd.otpId = null; }
+      if (pwd._timer) { clearInterval(pwd._timer); pwd._timer = null; }
+    }
+    function copyOtpCode() { if (otp.value.code) copyText(otp.value.code, '验证码'); }
     function copyPwd() {
       const done = () => { pwd.copied = true; setTimeout(() => { pwd.copied = false; }, 1500); };
       if (navigator.clipboard && navigator.clipboard.writeText) {
@@ -425,13 +451,83 @@ const AccountsViewModal = {
         document.body.removeChild(ta);
       }
     }
-    // 关闭弹窗时清定时器，避免泄漏
-    Vue.watch(() => pwd.show, (v) => { if (!v && pwd._timer) { clearInterval(pwd._timer); pwd._timer = null; } });
+    // 关闭弹窗时清定时器并停掉动态码刷新，避免泄漏
+    Vue.watch(() => pwd.show, (v) => { if (!v) closePwd(); });
     return {
-      store, Fmt, expanded, pwd, singleProvider, title, accountList, groups,
+      store, Fmt, expanded, pwd, otp, singleProvider, title, accountList, groups,
       platformName, assetsOf, toggle, canSync, testAcct, syncAcct, viewPwd, copyPwd,
+      closePwd, copyOtpCode, copyAcctPwd: copyAccountPassword,
       add: () => openAccountCreate(store.accountsModal.providerSlug || ''),
       edit: openAccountEdit, del: deleteAccount,
     };
   },
 };
+
+/* 凭据编辑模态框（密码库）
+ *
+ * 粒度 = 站点 × 登录方式：同一邮箱注册多个站点就录多条，密码相同也各存一份。
+ * 2FA 录入必须同时填当前动态码（服务端校验），防 secret 手误成废条目。
+ */
+const CredentialModal = {
+  template: `
+  <div v-if="store.credentialModal.show" class="fixed inset-0 bg-black/40 z-[60] flex items-end md:items-center justify-center p-0 md:p-4">
+    <div class="bg-white dark:bg-slate-900 w-full md:max-w-md md:rounded-xl rounded-t-xl max-h-[92vh] overflow-y-auto">
+      <div class="px-5 py-3 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center">
+        <h3 class="font-semibold text-sm">{{ store.credentialModal.editing ? '编辑凭据' : '新增凭据' }}</h3>
+        <button @click="store.credentialModal.show=false" class="text-slate-400 hover:text-slate-600">✕</button>
+      </div>
+      <form @submit.prevent="save" class="px-5 py-4 space-y-3" v-if="f">
+        <label class="block"><span class="text-xs text-slate-500">站点/服务名 *</span>
+          <input v-model="f.site" required placeholder="如 GitHub、某论坛、邮箱" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
+        <div class="grid grid-cols-2 gap-3">
+          <label class="block"><span class="text-xs text-slate-500">登录方式</span>
+            <select v-model="f.login_type" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm">
+              <option v-for="(l,k) in Fmt.LOGIN_TYPE_LABELS" :key="k" :value="k">{{ l }}</option>
+            </select></label>
+          <label class="block"><span class="text-xs text-slate-500">用户名/邮箱</span>
+            <input v-model="f.username" placeholder="如 you@gmail.com" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
+        </div>
+        <!-- 授权登录：只需记录来源，本站无独立密码 -->
+        <label v-if="f.login_type==='oauth'" class="block"><span class="text-xs text-slate-500">授权来源</span>
+          <input v-model="f.oauth_provider" list="oauth-provider-options" placeholder="google / apple / github / wechat" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm">
+          <datalist id="oauth-provider-options">
+            <option v-for="p in Fmt.OAUTH_PROVIDERS" :key="p" :value="p"></option>
+          </datalist></label>
+        <label v-else-if="f.login_type==='password'" class="block"><span class="text-xs text-slate-500">登录密码（加密存储）</span>
+          <input v-model="f.password" type="password" autocomplete="new-password" :placeholder="store.credentialModal.editing ? '留空不修改' : '可选'" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
+        <label class="block"><span class="text-xs text-slate-500">登录页地址</span>
+          <input v-model="f.url" placeholder="https://…（可选，便于直接跳转）" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></label>
+
+        <fieldset class="border border-slate-200 dark:border-slate-700 rounded-lg p-3 space-y-2">
+          <legend class="text-xs font-medium text-slate-600 dark:text-slate-300 px-1">🛡 2FA（TOTP 动态码）</legend>
+          <p class="text-[11px] text-slate-400 leading-relaxed">粘贴 otpauth:// 链接或直接填 secret；需同时填写当前 6 位动态码做校验，防止 secret 录错后永远算不出正确码。</p>
+          <label class="block"><span class="text-xs text-slate-400">secret 或 otpauth 链接</span>
+            <input v-model="f.otp_secret" :placeholder="store.credentialModal.editing ? '留空不修改' : '可选'" class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm font-mono"></label>
+          <label v-if="f.otp_secret" class="block"><span class="text-xs text-slate-400">当前 6 位动态码 *</span>
+            <input v-model="f.otp_code" inputmode="numeric" maxlength="6" placeholder="如 123456" class="mt-1 w-full px-2 py-1.5 rounded border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm font-mono tracking-widest"></label>
+        </fieldset>
+
+        <label class="block"><span class="text-xs text-slate-500">备注</span>
+          <textarea v-model="f.note" rows="2" placeholder="如：备用邮箱注册、公司账号等" class="mt-1 w-full px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm"></textarea></label>
+
+        <div class="flex justify-end gap-2">
+          <button type="button" @click="store.credentialModal.show=false" class="px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-700 text-sm text-slate-600 dark:text-slate-300">取消</button>
+          <button type="submit" :disabled="store.credentialSaving" class="px-4 py-2 rounded-lg bg-blue-600 text-white text-sm hover:bg-blue-700 disabled:opacity-60">{{ store.credentialSaving ? '保存中…' : '保存' }}</button>
+        </div>
+      </form>
+    </div>
+  </div>`,
+  setup() {
+    const f = Vue.computed(() => store.credentialModal.form);
+    // 2FA 前端预校验：填了 secret 就必须填 6 位码（服务端会再校验一次）
+    function save() {
+      const form = f.value;
+      if (form.otp_secret && form.otp_secret.trim() && !/^\d{6}$/.test((form.otp_code || '').trim())) {
+        store.error = '绑定 2FA 需同时填写当前 6 位动态码';
+        return;
+      }
+      saveCredential();
+    }
+    return { store, Fmt, f, save };
+  },
+};

static/js/store.js

@@ -28,6 +28,12 @@ const store = reactive({
   accountModal: { show: false, editing: null, form: null },
   accountSaving: false, // 账号保存中锁，防止双击/重复提交触发后端 400 重名
   accountsModal: { show: false, providerSlug: null }, // 账号查看弹窗：providerSlug 为 null 时看全部
+  // 凭据库（密码 + 2FA）：全量列表，搜索/过滤交给服务端
+  credentials: [],
+  credentialModal: { show: false, editing: null, form: null },
+  credentialSaving: false, // 保存锁，防双击重复提交
+  vaultSearch: '',
+  vaultOtpOnly: false, // 只看已绑定 2FA 的条目
 });
 
 function applyDark() {
@@ -85,13 +91,19 @@ async function loadAssets() {
 }
 async function loadProviders() { store.providers = await Api.get('/providers'); }
 async function loadAccounts() { store.accounts = await Api.get('/accounts'); }
+async function loadCredentials() {
+  const params = new URLSearchParams();
+  if (store.vaultSearch) params.set('q', store.vaultSearch);
+  if (store.vaultOtpOnly) params.set('has_otp', 'true');
+  store.credentials = await Api.get('/credentials?' + params.toString());
+}
 async function loadSubdomains() { store.subdomains = await Api.get('/subdomains'); }
 async function loadSiteCerts() { store.siteCerts = await Api.get('/site-certs'); }
 async function loadOverview() { store.overview = await Api.get('/stats/overview'); }
 async function loadExpiring() { store.expiring = await Api.get('/stats/expiring?days=30'); }
 async function loadAll() {
   store.loading = true; store.error = '';
-  try { await Promise.all([loadAssets(), loadProviders(), loadAccounts(), loadSubdomains(), loadSiteCerts(), loadOverview(), loadExpiring()]); }
+  try { await Promise.all([loadAssets(), loadProviders(), loadAccounts(), loadCredentials(), loadSubdomains(), loadSiteCerts(), loadOverview(), loadExpiring()]); }
   catch (e) { store.error = e.message; } finally { store.loading = false; }
 }
 
@@ -211,6 +223,146 @@ async function deleteAccount(a) {
   catch (e) { store.error = e.message; }
 }
 
+/* ---------------- 凭据库（密码 + 2FA） ---------------- */
+function emptyCredentialForm() {
+  return {
+    site: '', username: '', login_type: 'password', oauth_provider: '',
+    password: '', url: '', note: '', otp_secret: '', otp_code: '',
+  };
+}
+function openCredentialCreate(preset) {
+  const form = emptyCredentialForm();
+  if (preset) Object.assign(form, preset);
+  store.credentialModal = { show: true, editing: null, form };
+}
+function openCredentialEdit(c) {
+  // password / otp_secret 留空 = 不修改（与账号凭证惯例一致）
+  store.credentialModal = {
+    show: true, editing: c.id,
+    form: {
+      site: c.site, username: c.username || '', login_type: c.login_type,
+      oauth_provider: c.oauth_provider || '', password: '', url: c.url || '',
+      note: c.note || '', otp_secret: '', otp_code: '',
+    },
+  };
+}
+async function saveCredential() {
+  // 提交锁：双击/网络慢时重复点击会发出两次请求，造成重复条目
+  if (store.credentialSaving) return;
+  store.error = '';
+  store.credentialSaving = true;
+  const f = store.credentialModal.form;
+  const editing = store.credentialModal.editing;
+  const payload = {
+    site: f.site, username: f.username || null, login_type: f.login_type,
+    oauth_provider: f.oauth_provider || null, url: f.url || null, note: f.note || null,
+  };
+  try {
+    if (editing) {
+      // 密码留空 = 不修改（后端 None 语义），填了才提交
+      if (f.password) payload.password = f.password;
+      await Api.put('/credentials/' + editing, payload);
+      // 2FA 走独立接口（secret + 当前动态码服务端校验）
+      if (f.otp_secret) {
+        await Api.put('/credentials/' + editing + '/otp', { secret: f.otp_secret, code: f.otp_code });
+      }
+    } else {
+      payload.password = f.password || null;
+      if (f.otp_secret) { payload.otp_secret = f.otp_secret; payload.otp_code = f.otp_code || null; }
+      await Api.post('/credentials', payload);
+    }
+    store.credentialModal.show = false;
+    // 账号侧 has_login_password / has_otp 来自关联凭据，需一并刷新
+    await Promise.all([loadCredentials(), loadAccounts()]);
+  } catch (e) { store.error = e.message; }
+  finally { store.credentialSaving = false; }
+}
+async function deleteCredential(c) {
+  const label = c.site + (c.username ? ' · ' + c.username : '');
+  if (!confirm('确认删除凭据「' + label + '」？此操作不可恢复。')) return;
+  store.error = '';
+  try {
+    await Api.del('/credentials/' + c.id);
+    await Promise.all([loadCredentials(), loadAccounts()]);
+  } catch (e) { store.error = e.message; }
+}
+async function unbindCredentialOtp(c) {
+  if (!confirm('确认解绑「' + c.site + '」的 2FA？解绑后需重新录入 secret。')) return;
+  store.error = '';
+  try { await Api.del('/credentials/' + c.id + '/otp'); await loadCredentials(); }
+  catch (e) { store.error = e.message; }
+}
+
+/* ---------------- 复制与轻提示（toast） ---------------- */
+const toast = Vue.reactive({ show: false, text: '', _timer: null });
+function showToast(text) {
+  toast.text = text;
+  toast.show = true;
+  if (toast._timer) clearTimeout(toast._timer);
+  toast._timer = setTimeout(() => { toast.show = false; }, 1600);
+}
+function copyText(text, label) {
+  const done = () => showToast('✓ ' + (label || '内容') + '已复制');
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    navigator.clipboard.writeText(text).then(done).catch(() => _fallbackCopy(text, done));
+  } else { _fallbackCopy(text, done); }
+}
+function _fallbackCopy(text, done) {
+  // 非安全上下文（http 局域网）无 clipboard API，降级用 execCommand
+  const ta = document.createElement('textarea');
+  ta.value = text;
+  document.body.appendChild(ta);
+  ta.select();
+  try { document.execCommand('copy'); done(); } catch (e) { showToast('复制失败，请手动选择'); }
+  document.body.removeChild(ta);
+}
+async function copyCredentialPassword(c) {
+  store.error = '';
+  try {
+    const r = await Api.get('/credentials/' + c.id + '/password');
+    copyText(r.password, '密码');
+  } catch (e) { store.error = e.message; }
+}
+async function copyAccountPassword(a) {
+  // 账号侧复制：后端已重定向到关联凭据，接口语义不变
+  store.error = '';
+  try {
+    const r = await Api.get('/accounts/' + a.id + '/password');
+    copyText(r.password, '密码');
+  } catch (e) { store.error = e.message; }
+}
+
+/* ---------------- 2FA 动态码（服务端生成，本地倒计时） ---------------- */
+// otpState[credential_id] = { code, expiresIn, loading, timer }；secret 永不下发到前端
+const otpState = Vue.reactive({});
+async function fetchOtp(id) {
+  // 先经 Proxy 创建占位对象，再取回响应式代理。
+  // 注意不能写 `const s = otpState[id] || (otpState[id] = {...})`：赋值表达式的
+  // 返回值是 raw 对象，后续 s.code = ... 绕过 Proxy 不触发视图更新（Vue 3 陷阱）。
+  if (!otpState[id]) otpState[id] = { code: '', expiresIn: 0, loading: false, timer: null };
+  const s = otpState[id];
+  s.loading = true;
+  try {
+    const r = await Api.get('/credentials/' + id + '/otp');
+    s.code = r.code;
+    s.expiresIn = r.expires_in;
+    if (s.timer) clearInterval(s.timer);
+    // 本地逐秒倒计时，归零自动拉下一个码（不做秒级轮询）
+    s.timer = setInterval(() => {
+      s.expiresIn--;
+      if (s.expiresIn <= 0) { clearInterval(s.timer); s.timer = null; fetchOtp(id); }
+    }, 1000);
+  } catch (e) { store.error = e.message; }
+  finally { s.loading = false; }
+}
+function stopOtp(id) {
+  const s = otpState[id];
+  if (s && s.timer) { clearInterval(s.timer); s.timer = null; }
+}
+function stopAllOtp() {
+  for (const id of Object.keys(otpState)) stopOtp(Number(id));
+}
+
 /* ---------------- 平台页跳转：按平台查看资产 ---------------- */
 function openAssetsByProvider(p) {
   store.filterProvider = p.slug;

static/js/views/vault.js

@@ -0,0 +1,169 @@
+/* 凭据库视图：登录密码 + 2FA 动态码
+ *
+ * 数据来自 credentials 表（登录凭据唯一事实源）：既包含平台账号迁移/联动过来的
+ * 条目，也包含自行录入的普通网站。列表以「取用快」为先：搜索、一键复制、
+ * 展开看动态码；移动端单列卡片，桌面端同布局（避免横向溢出）。
+ */
+const VaultView = {
+  template: `
+  <div class="space-y-3">
+    <div class="text-xs text-slate-500 bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-800 rounded-lg px-3 py-2">
+      🔐 凭据库 = 各站点的登录方式（用户名 / 密码 / 2FA / 授权登录）。平台账号的登录密码也统一存在这里，只维护一份，不会两头改。
+    </div>
+
+    <div class="flex gap-2 items-center">
+      <input v-model="store.vaultSearch" @input="reload" placeholder="搜索站点/用户名/备注…"
+             class="flex-1 min-w-0 text-sm px-3 py-1.5 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900">
+      <button @click="toggleOtpFilter" class="text-sm px-3 py-1.5 rounded-lg border whitespace-nowrap shrink-0"
+              :class="store.vaultOtpOnly ? 'border-blue-500 bg-blue-500/10 text-blue-600 dark:text-blue-400' : 'border-slate-300 dark:border-slate-700 text-slate-600 dark:text-slate-400'">🛡 2FA</button>
+    </div>
+
+    <p v-if="!store.credentials.length" class="text-xs text-slate-400 py-8 text-center">
+      {{ store.vaultSearch || store.vaultOtpOnly ? '没有匹配的凭据' : '暂无凭据。点右上「+ 新增」录入网站账号；平台账号填过登录密码的会自动出现在这里。' }}
+    </p>
+
+    <div class="space-y-2">
+      <div v-for="c in store.credentials" :key="c.id"
+           class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden">
+        <!-- 主行 -->
+        <div class="px-3 py-2.5 flex items-center gap-2">
+          <button @click="toggle(c)" class="text-slate-400 text-xs w-4 shrink-0">{{ expanded[c.id] ? '▾' : '▸' }}</button>
+          <div class="flex-1 min-w-0">
+            <div class="text-sm font-medium truncate">
+              {{ c.site }}
+              <span v-if="c.has_otp" class="text-[10px] px-1 py-0.5 ml-1 rounded bg-blue-500/10 text-blue-600 dark:text-blue-400 align-middle">2FA</span>
+              <span v-if="c.duplicate" class="text-[10px] px-1 py-0.5 ml-1 rounded bg-amber-500/10 text-amber-600 dark:text-amber-400 align-middle"
+                    title="同站点同用户名已有多条，确认是否重复录入">重复?</span>
+            </div>
+            <div class="text-xs text-slate-400 truncate">
+              <span v-if="c.username">{{ c.username }}</span><span v-else class="italic">未填用户名</span>
+              <span v-if="c.login_type==='oauth'" class="ml-1 text-emerald-600 dark:text-emerald-400">· {{ c.oauth_provider || '授权' }} 登录</span>
+              <span v-else-if="c.login_type==='other'" class="ml-1">· 其他登录方式</span>
+              <span v-if="c.account_name" class="ml-1">· 平台账号</span>
+            </div>
+          </div>
+          <button v-if="c.has_otp" @click="toggle(c, true)"
+                  class="text-xs px-2 py-1 rounded-lg bg-blue-600 text-white shrink-0">验证码</button>
+          <button v-if="c.has_password" @click="copyPwd(c)"
+                  class="text-xs px-2 py-1 rounded-lg border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 shrink-0">复制</button>
+        </div>
+
+        <!-- 展开详情 -->
+        <div v-if="expanded[c.id]" class="px-3 pb-3 pt-2 border-t border-slate-100 dark:border-slate-800 space-y-2">
+          <!-- 2FA 动态码：服务端生成，本地倒计时，归零自动刷新 -->
+          <div v-if="c.has_otp" class="flex items-center gap-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg px-3 py-2">
+            <div class="font-mono text-2xl tracking-widest text-blue-700 dark:text-blue-300 shrink-0">{{ otpOf(c).code || '······' }}</div>
+            <div class="min-w-0 flex-1">
+              <div class="text-[11px] text-slate-500 dark:text-slate-400">{{ otpOf(c).expiresIn }}s 后刷新</div>
+              <div class="h-1 bg-slate-200 dark:bg-slate-700 rounded mt-1 overflow-hidden">
+                <div class="h-full bg-blue-500 transition-all duration-1000 ease-linear"
+                     :style="{ width: Math.max(0, otpOf(c).expiresIn) / 30 * 100 + '%' }"></div>
+              </div>
+            </div>
+            <button @click="copyOtp(c)" class="text-xs px-2 py-1 rounded-lg border border-blue-300 dark:border-blue-700 text-blue-600 dark:text-blue-400 shrink-0">复制</button>
+          </div>
+
+          <div class="text-xs text-slate-500 space-y-1">
+            <div v-if="c.url"><a :href="c.url" target="_blank" rel="noopener" class="text-blue-600 dark:text-blue-400 hover:underline break-all">登录页 ↗</a></div>
+            <div v-if="c.note" class="whitespace-pre-wrap break-words">{{ c.note }}</div>
+            <div v-if="c.login_type==='oauth'" class="text-slate-400">授权登录（{{ c.oauth_provider || '未记录来源' }}），本站无独立密码</div>
+            <div v-if="c.account_name" class="text-slate-400">关联平台账号：{{ c.account_name }}</div>
+            <div class="text-slate-300 dark:text-slate-600">更新于 {{ fmtTime(c.updated_at) }}</div>
+          </div>
+
+          <div class="flex gap-4 text-xs flex-wrap">
+            <button v-if="c.has_password" @click="reveal(c)" class="text-amber-600 dark:text-amber-400">查看密码</button>
+            <button @click="edit(c)" class="text-blue-600 dark:text-blue-400">编辑</button>
+            <button v-if="c.has_otp" @click="unbindOtp(c)" class="text-slate-500 dark:text-slate-400">解绑 2FA</button>
+            <button @click="del(c)" class="text-red-600 dark:text-red-400">删除</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 密码明文弹窗：8 秒自动关闭，减少明文暴露时间 -->
+    <div v-if="pwd.show" class="fixed inset-0 bg-black/50 z-[70] flex items-center justify-center p-4" @click.self="closePwd">
+      <div class="bg-white dark:bg-slate-800 rounded-xl w-full max-w-xs p-5 shadow-xl">
+        <h4 class="font-semibold text-sm mb-3">🔑 {{ pwd.site }}</h4>
+        <div class="space-y-2 text-sm">
+          <div v-if="pwd.username" class="flex justify-between items-center gap-2">
+            <span class="text-slate-400 text-xs shrink-0">用户名</span>
+            <span class="font-mono truncate">{{ pwd.username }}</span>
+          </div>
+          <div class="flex justify-between items-center gap-2">
+            <span class="text-slate-400 text-xs shrink-0">密码</span>
+            <span class="font-mono break-all">{{ pwd.password }}</span>
+          </div>
+        </div>
+        <div class="flex gap-2 mt-4">
+          <button @click="copyText(pwd.password, '密码')" class="flex-1 py-1.5 rounded-lg bg-blue-600 text-white text-xs">复制密码</button>
+          <button @click="closePwd" class="px-3 py-1.5 rounded-lg border border-slate-200 dark:border-slate-700 text-xs">关闭</button>
+        </div>
+        <p class="text-[10px] text-slate-400 mt-2 text-center">{{ pwd.countdown }}s 后自动关闭</p>
+      </div>
+    </div>
+  </div>`,
+  setup() {
+    const expanded = Vue.reactive({});
+    const pwd = Vue.reactive({ show: false, site: '', username: '', password: '', countdown: 0, _timer: null });
+
+    function otpOf(c) {
+      return otpState[c.id] || { code: '', expiresIn: 0, loading: false };
+    }
+    // 展开即拉动态码并开始倒计时；收起时停掉定时器
+    function toggle(c, forceOpen) {
+      const open = forceOpen ? true : !expanded[c.id];
+      expanded[c.id] = open;
+      if (!c.has_otp) return;
+      if (open && !otpState[c.id]) fetchOtp(c.id);
+      if (!open) stopOtp(c.id);
+    }
+    async function reveal(c) {
+      store.error = '';
+      try {
+        const r = await Api.get('/credentials/' + c.id + '/password');
+        pwd.site = c.site;
+        pwd.username = r.username || '';
+        pwd.password = r.password;
+        pwd.show = true;
+        if (pwd._timer) clearInterval(pwd._timer);
+        pwd.countdown = 8;
+        pwd._timer = setInterval(() => {
+          pwd.countdown--;
+          if (pwd.countdown <= 0) closePwd();
+        }, 1000);
+      } catch (e) { store.error = e.message; }
+    }
+    function closePwd() {
+      pwd.show = false;
+      pwd.password = '';
+      if (pwd._timer) { clearInterval(pwd._timer); pwd._timer = null; }
+    }
+    function copyOtp(c) {
+      const s = otpState[c.id];
+      if (s && s.code) copyText(s.code, '验证码');
+    }
+    function fmtTime(iso) {
+      if (!iso) return '';
+      return new Date(iso).toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' });
+    }
+    // 搜索防抖：300ms 内连续输入只发一次请求
+    let searchTimer = null;
+    function debouncedReload() {
+      if (searchTimer) clearTimeout(searchTimer);
+      searchTimer = setTimeout(() => { loadCredentials(); }, 300);
+    }
+    function toggleOtpFilter() {
+      store.vaultOtpOnly = !store.vaultOtpOnly;
+      loadCredentials();
+    }
+    // 离开视图时停掉全部倒计时，避免后台定时器泄漏
+    Vue.onUnmounted(() => { stopAllOtp(); closePwd(); });
+    return {
+      store, Fmt, expanded, pwd, otpOf, toggle, reveal, closePwd, copyOtp, fmtTime,
+      reload: debouncedReload, toggleOtpFilter, copyText,
+      copyPwd: copyCredentialPassword, edit: openCredentialEdit,
+      del: deleteCredential, unbindOtp: unbindCredentialOtp,
+    };
+  },
+};