chore: sync local changes to Gitea

2026-06-24 22:10:27 +08:00
commit 0812a531e2
44 changed files with 11212 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,7 @@
+node_modules/
+dist/
+frontend/dist/
+.wrangler/
+.dev.vars
+*.log
+.DS_Store
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="apple-touch-icon" href="/logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="theme-color" content="#14532d" />
+    <meta name="description" content="Sprout2FA — 网页版双因素验证码管理" />
+    <title>Sprout2FA</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "sprout2fa-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@zxing/browser": "^0.1.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.1",
+    "vite-plugin-pwa": "^0.21.1",
+    "workbox-window": "^7.3.0"
+  }
+}
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/public/logo.png
+++ b/frontend/public/logo.png
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -0,0 +1,21 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { usePwaRegister } from './hooks/usePwaRegister';
+import { LoginPage } from './pages/LoginPage';
+import { IndexPage } from './pages/IndexPage';
+import { AddAccountPage } from './pages/AddAccountPage';
+import { EditAccountPage } from './pages/EditAccountPage';
+
+export default function App() {
+  usePwaRegister();
+  return (
+    <div className="app-shell">
+      <Routes>
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="/" element={<IndexPage />} />
+        <Route path="/add" element={<AddAccountPage />} />
+        <Route path="/edit/:id" element={<EditAccountPage />} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </div>
+  );
+}
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -0,0 +1,151 @@
+const jsonHeaders = { 'Content-Type': 'application/json' };
+
+async function handle<T>(res: Response): Promise<T> {
+  if (!res.ok) {
+    let msg = res.statusText;
+    try {
+      const j = (await res.json()) as { error?: string };
+      if (j.error) msg = j.error;
+    } catch {
+      /* ignore */
+    }
+    throw new Error(msg);
+  }
+  return (await res.json()) as T;
+}
+
+export async function login(password: string): Promise<void> {
+  const res = await fetch('/api/auth/login', {
+    method: 'POST',
+    credentials: 'include',
+    headers: jsonHeaders,
+    body: JSON.stringify({ password }),
+  });
+  await handle<{ ok: boolean }>(res);
+}
+
+export async function logout(): Promise<void> {
+  const res = await fetch('/api/auth/logout', {
+    method: 'POST',
+    credentials: 'include',
+  });
+  await handle<{ ok: boolean }>(res);
+}
+
+export type AccountDto = {
+  id: string;
+  label: string;
+  issuer: string | null;
+  algorithm: string;
+  digits: number;
+  period: number;
+  code: string;
+  expiresInSeconds: number;
+  shareToken: string;
+};
+
+export type SharedAccountDto = {
+  label: string;
+  issuer: string | null;
+  algorithm: string;
+  digits: number;
+  period: number;
+  code: string;
+  expiresInSeconds: number;
+};
+
+export async function fetchSharedAccount(token: string): Promise<SharedAccountDto> {
+  const res = await fetch(`/api/share/${encodeURIComponent(token)}`);
+  const data = await handle<{ account: SharedAccountDto }>(res);
+  return data.account;
+}
+
+export async function fetchAccounts(): Promise<AccountDto[]> {
+  const res = await fetch('/api/accounts', { credentials: 'include' });
+  const data = await handle<{ accounts: AccountDto[] }>(res);
+  return data.accounts;
+}
+
+export async function createAccount(body: {
+  label: string;
+  issuer?: string | null;
+  secret: string;
+  algorithm?: string;
+  digits?: number;
+  period?: number;
+}): Promise<{ id: string }> {
+  const res = await fetch('/api/accounts', {
+    method: 'POST',
+    credentials: 'include',
+    headers: jsonHeaders,
+    body: JSON.stringify(body),
+  });
+  return handle<{ id: string; ok: boolean }>(res);
+}
+
+export async function updateAccount(
+  id: string,
+  body: {
+    label: string;
+    issuer?: string | null;
+    secret?: string;
+    algorithm?: string;
+    digits?: number;
+    period?: number;
+  },
+): Promise<void> {
+  const payload: Record<string, unknown> = {
+    label: body.label,
+    issuer: body.issuer ?? null,
+  };
+  if (body.secret?.trim()) payload.secret = body.secret.trim();
+  if (body.algorithm) payload.algorithm = body.algorithm;
+  if (body.digits !== undefined) payload.digits = body.digits;
+  if (body.period !== undefined) payload.period = body.period;
+
+  const res = await fetch(`/api/accounts/${encodeURIComponent(id)}`, {
+    method: 'PATCH',
+    credentials: 'include',
+    headers: jsonHeaders,
+    body: JSON.stringify(payload),
+  });
+  await handle<{ ok: boolean }>(res);
+}
+
+export async function deleteAccount(id: string): Promise<void> {
+  const res = await fetch(`/api/accounts/${encodeURIComponent(id)}`, {
+    method: 'DELETE',
+    credentials: 'include',
+  });
+  await handle<{ ok: boolean }>(res);
+}
+
+export type ExportPayload = {
+  version: number;
+  exportedAt: string;
+  items: {
+    label: string;
+    issuer: string | null;
+    secret: string;
+    algorithm: string;
+    digits: number;
+    period: number;
+  }[];
+};
+
+export async function exportAll(): Promise<ExportPayload> {
+  const res = await fetch('/api/export', { credentials: 'include' });
+  return handle<ExportPayload>(res);
+}
+
+export async function importItems(
+  items: ExportPayload['items'],
+): Promise<{ imported: number }> {
+  const res = await fetch('/api/import', {
+    method: 'POST',
+    credentials: 'include',
+    headers: jsonHeaders,
+    body: JSON.stringify({ items }),
+  });
+  return handle<{ ok: boolean; imported: number }>(res);
+}
--- a/frontend/src/components/IconButton.tsx
+++ b/frontend/src/components/IconButton.tsx
@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+import { IconCheck } from './icons';
+
+type IconButtonProps = {
+  label: string;
+  children: ReactNode;
+  onClick?: () => void;
+  to?: string;
+  variant?: 'default' | 'danger';
+  copied?: boolean;
+};
+
+export function IconButton({
+  label,
+  children,
+  onClick,
+  to,
+  variant = 'default',
+  copied = false,
+}: IconButtonProps) {
+  const className = `icon-btn${variant === 'danger' ? ' danger' : ''}${copied ? ' copied' : ''}`;
+
+  if (to) {
+    return (
+      <Link className={className} to={to} title={label} aria-label={label}>
+        {copied ? <IconCheck /> : children}
+      </Link>
+    );
+  }
+
+  return (
+    <button type="button" className={className} title={label} aria-label={label} onClick={onClick}>
+      {copied ? <IconCheck /> : children}
+    </button>
+  );
+}
--- a/frontend/src/components/TotpCard.tsx
+++ b/frontend/src/components/TotpCard.tsx
@@ -0,0 +1,64 @@
+import { useState, type ReactNode } from 'react';
+import { IconButton } from './IconButton';
+import { IconCopy } from './icons';
+
+type TotpCardProps = {
+  label: string;
+  issuer: string | null;
+  code: string;
+  expiresInSeconds: number;
+  period: number;
+  toolbar?: ReactNode;
+};
+
+export function TotpCard({
+  label,
+  issuer,
+  code,
+  expiresInSeconds,
+  period,
+  toolbar,
+}: TotpCardProps) {
+  const pct = Math.max(0, Math.min(100, (expiresInSeconds / period) * 100));
+  const [codeCopied, setCodeCopied] = useState(false);
+
+  async function onCopyCode() {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCodeCopied(true);
+      setTimeout(() => setCodeCopied(false), 1500);
+    } catch {
+      /* ignore */
+    }
+  }
+
+  return (
+    <div className="card totp-card">
+      <div className="totp-card-head">
+        <div className="totp-card-meta">
+          <span className="totp-card-label" title={label}>
+            {label}
+          </span>
+          {issuer ? <span className="totp-card-issuer">{issuer}</span> : null}
+        </div>
+        {toolbar ? <div className="icon-toolbar">{toolbar}</div> : null}
+      </div>
+
+      <div className="totp-code-row">
+        <button type="button" className="totp-code-hit" onClick={() => void onCopyCode()} title="点击复制验证码">
+          <span className="totp-code">{code}</span>
+        </button>
+        <IconButton label="复制验证码" copied={codeCopied} onClick={() => void onCopyCode()}>
+          <IconCopy />
+        </IconButton>
+      </div>
+
+      <div className="totp-card-foot">
+        <div className="progress" aria-hidden>
+          <i style={{ width: `${pct}%` }} />
+        </div>
+        <span className="totp-card-timer">{expiresInSeconds}s</span>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/icons.tsx
+++ b/frontend/src/components/icons.tsx
@@ -0,0 +1,75 @@
+type IconProps = { size?: number };
+
+export function IconLink({ size = 18 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
+      <path
+        d="M10 13a5 5 0 0 0 7.07 0l2.12-2.12a5 5 0 0 0-7.07-7.07L11 5"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+      <path
+        d="M14 11a5 5 0 0 0-7.07 0L4.81 13.12a5 5 0 1 0 7.07 7.07L13 19"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export function IconEdit({ size = 18 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
+      <path
+        d="M12 20h9M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function IconTrash({ size = 18 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
+      <path
+        d="M3 6h18M8 6V4h8v2M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+      <path d="M10 11v6M14 11v6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export function IconCopy({ size = 18 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
+      <rect x="9" y="9" width="11" height="11" rx="2" stroke="currentColor" strokeWidth="2" />
+      <path
+        d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+}
+
+export function IconCheck({ size = 18 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
+      <path
+        d="M20 6 9 17l-5-5"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
--- a/frontend/src/hooks/usePwaRegister.ts
+++ b/frontend/src/hooks/usePwaRegister.ts
@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+
+/**
+ * 注册 PWA Service Worker（由 vite-plugin-pwa 注入）
+ */
+export function usePwaRegister() {
+  useEffect(() => {
+    import('virtual:pwa-register')
+      .then(({ registerSW }) => {
+        registerSW({ immediate: true });
+      })
+      .catch(() => {
+        /* 开发模式或未启用插件时忽略 */
+      });
+  }, []);
+}
--- a/frontend/src/lib/otpauth-parse.ts
+++ b/frontend/src/lib/otpauth-parse.ts
@@ -0,0 +1,71 @@
+export type ParsedOtpAuth = {
+  label: string;
+  issuer: string | null;
+  secret: string;
+  algorithm: string;
+  digits: number;
+  period: number;
+};
+
+/**
+ * 解析 otpauth://totp/... 或 otpauth://hotp/...（按 TOTP 处理）
+ */
+export function parseOtpauthUri(uri: string): ParsedOtpAuth | null {
+  const s = uri.trim();
+  const lower = s.toLowerCase();
+  if (!lower.startsWith('otpauth://totp/') && !lower.startsWith('otpauth://hotp/')) {
+    return null;
+  }
+  let url: URL;
+  try {
+    url = new URL(s);
+  } catch {
+    return null;
+  }
+  const secret = url.searchParams.get('secret');
+  if (!secret) return null;
+  const issuerQP = url.searchParams.get('issuer');
+  let pathPart = decodeURIComponent(url.pathname.replace(/^\/+/u, ''));
+  if (pathPart.includes(':')) {
+    pathPart = pathPart.split(':').pop() ?? pathPart;
+  }
+  const label = pathPart || '未命名';
+  const issuer = issuerQP?.trim() ? issuerQP : null;
+  const algorithm = (url.searchParams.get('algorithm') || 'SHA1').toUpperCase();
+  const digits = Math.min(
+    10,
+    Math.max(6, parseInt(url.searchParams.get('digits') || '6', 10) || 6),
+  );
+  const period = Math.min(
+    120,
+    Math.max(
+      10,
+      parseInt(url.searchParams.get('period') || '30', 10) || 30,
+    ),
+  );
+  return {
+    label,
+    issuer,
+    secret,
+    algorithm,
+    digits,
+    period,
+  };
+}
+
+/** 粘贴文本：可能是 URI 或换行分隔的 URI */
+export function parseOtpauthFromText(text: string): ParsedOtpAuth | null {
+  const lines = text
+    .split(/\r?\n/u)
+    .map((l) => l.trim())
+    .filter(Boolean);
+  for (const line of lines) {
+    const p = parseOtpauthUri(line);
+    if (p) return p;
+  }
+  if (text.includes('otpauth://')) {
+    const match = text.match(/otpauth:\/\/[^\s]+/iu);
+    if (match) return parseOtpauthUri(match[0]!);
+  }
+  return null;
+}
--- a/frontend/src/lib/shareUrl.ts
+++ b/frontend/src/lib/shareUrl.ts
@@ -0,0 +1,3 @@
+export function buildShareUrl(shareToken: string): string {
+  return `${window.location.origin}/?token=${encodeURIComponent(shareToken)}`;
+}
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import './styles/global.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
+);
--- a/frontend/src/pages/AddAccountPage.tsx
+++ b/frontend/src/pages/AddAccountPage.tsx
@@ -0,0 +1,274 @@
+import { FormEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { createAccount } from '../api/client';
+import {
+  parseOtpauthFromText,
+  parseOtpauthUri,
+  type ParsedOtpAuth,
+} from '../lib/otpauth-parse';
+
+type Segment = 'manual' | 'scan' | 'image';
+
+export function AddAccountPage() {
+  const nav = useNavigate();
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const [segment, setSegment] = useState<Segment>('manual');
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const [label, setLabel] = useState('');
+  const [issuer, setIssuer] = useState('');
+  const [secret, setSecret] = useState('');
+  const [algorithm, setAlgorithm] = useState('SHA1');
+  const [digits, setDigits] = useState(6);
+  const [period, setPeriod] = useState(30);
+  const [paste, setPaste] = useState('');
+
+  const applyParsed = useCallback((p: ParsedOtpAuth) => {
+    setLabel(p.label);
+    setIssuer(p.issuer ?? '');
+    setSecret(p.secret);
+    setAlgorithm(p.algorithm);
+    setDigits(p.digits);
+    setPeriod(p.period);
+    setError(null);
+  }, []);
+
+  async function submitParsed(p?: ParsedOtpAuth) {
+    const data =
+      p ??
+      ({
+        label: label.trim(),
+        issuer: issuer.trim() || null,
+        secret: secret.trim(),
+        algorithm,
+        digits,
+        period,
+      } as ParsedOtpAuth);
+    if (!data.label || !data.secret.trim()) {
+      setError('请填写名称与密钥');
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    try {
+      await createAccount({
+        label: data.label,
+        issuer: data.issuer,
+        secret: data.secret.trim(),
+        algorithm: data.algorithm,
+        digits: data.digits,
+        period: data.period,
+      });
+      nav('/', { replace: true });
+    } catch (e) {
+      setError(e instanceof Error ? e.message : '保存失败');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function onManualSubmit(e: FormEvent) {
+    e.preventDefault();
+    void submitParsed();
+  }
+
+  function onApplyPaste() {
+    const p = parseOtpauthFromText(paste);
+    if (!p) {
+      setError('未识别 otpauth 链接，请检查粘贴内容');
+      return;
+    }
+    applyParsed(p);
+  }
+
+  useEffect(() => {
+    if (segment !== 'scan') return;
+    const video = videoRef.current;
+    if (!video) return;
+
+    let reader: InstanceType<
+      Awaited<typeof import('@zxing/browser')>['BrowserMultiFormatReader']
+    > | null = null;
+    let cancelled = false;
+
+    (async () => {
+      try {
+        const { BrowserMultiFormatReader } = await import('@zxing/browser');
+        reader = new BrowserMultiFormatReader();
+        await reader.decodeFromVideoDevice(undefined, video, (result) => {
+            if (cancelled || !result) return;
+            const text = result.getText();
+            const p = parseOtpauthUri(text);
+            if (p) {
+              applyParsed(p);
+              if (reader) void reader.reset();
+              setSegment('manual');
+              setError(null);
+            } else {
+              setError('二维码内容不是 otpauth 格式');
+            }
+          });
+      } catch {
+        if (!cancelled) setError('无法打开摄像头，请检查权限');
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      void reader?.reset();
+    };
+  }, [segment, applyParsed]);
+
+  function onImageFile(file: File) {
+    const reader = new FileReader();
+    reader.onload = async () => {
+      const url = String(reader.result || '');
+      try {
+        const { BrowserMultiFormatReader } = await import('@zxing/browser');
+        const bf = new BrowserMultiFormatReader();
+        const img = new Image();
+        img.decoding = 'async';
+        img.src = url;
+        await img.decode();
+        const result = await bf.decodeFromImageElement(img);
+        const text = result.getText();
+        const p = parseOtpauthUri(text);
+        if (!p) {
+          setError('图片中二维码不是 otpauth 格式');
+          return;
+        }
+        applyParsed(p);
+        setSegment('manual');
+      } catch {
+        setError('无法从图片解析二维码');
+      }
+    };
+    reader.readAsDataURL(file);
+  }
+
+  return (
+    <main>
+      <div className="top-nav">
+        <Link className="btn secondary" to="/">
+          返回
+        </Link>
+        <span style={{ fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
+          <img className="top-nav-logo" src="/logo.png" alt="" width={28} height={28} />
+          添加账户
+        </span>
+        <span style={{ width: 72 }} />
+      </div>
+
+      <div className="segment">
+        <button
+          type="button"
+          className={segment === 'manual' ? 'active' : ''}
+          onClick={() => setSegment('manual')}
+        >
+          手动
+        </button>
+        <button
+          type="button"
+          className={segment === 'scan' ? 'active' : ''}
+          onClick={() => setSegment('scan')}
+        >
+          扫码
+        </button>
+        <button
+          type="button"
+          className={segment === 'image' ? 'active' : ''}
+          onClick={() => setSegment('image')}
+        >
+          图片
+        </button>
+      </div>
+
+      {segment === 'scan' ? (
+        <div className="card scan-wrap">
+          <p className="sub">将二维码对准画面，识别成功后会自动控制转手动页并填入。</p>
+          <video ref={videoRef} className="scan" muted playsInline />
+        </div>
+      ) : null}
+
+      {segment === 'image' ? (
+        <div className="card">
+          <p className="sub">选择包含 otpauth 二维码的图片。</p>
+          <input
+            type="file"
+            accept="image/*"
+            onChange={(e) => {
+              const f = e.target.files?.[0];
+              if (f) onImageFile(f);
+            }}
+          />
+        </div>
+      ) : null}
+
+      <div className="card">
+        <p className="sub">粘贴 otpauth 链接可快速填充：</p>
+        <textarea
+          value={paste}
+          placeholder="otpauth://totp/..."
+          onChange={(e) => setPaste(e.target.value)}
+        />
+        <button type="button" className="btn secondary" style={{ marginTop: 8 }} onClick={onApplyPaste}>
+          解析粘贴
+        </button>
+      </div>
+
+      <form className="card" onSubmit={onManualSubmit}>
+        <h2 style={{ marginTop: 0, fontSize: '1.1rem' }}>账户信息</h2>
+        <div className="field">
+          <label>显示名称</label>
+          <input value={label} onChange={(e) => setLabel(e.target.value)} required />
+        </div>
+        <div className="field">
+          <label>发行方（可选）</label>
+          <input value={issuer} onChange={(e) => setIssuer(e.target.value)} />
+        </div>
+        <div className="field">
+          <label>Secret（Base32）</label>
+          <input
+            value={secret}
+            onChange={(e) => setSecret(e.target.value)}
+            required
+            autoComplete="off"
+          />
+        </div>
+        <div className="field">
+          <label>算法</label>
+          <select value={algorithm} onChange={(e) => setAlgorithm(e.target.value)}>
+            <option value="SHA1">SHA1</option>
+            <option value="SHA256">SHA256</option>
+            <option value="SHA512">SHA512</option>
+          </select>
+        </div>
+        <div className="field">
+          <label>位数</label>
+          <input
+            type="number"
+            min={6}
+            max={10}
+            value={digits}
+            onChange={(e) => setDigits(Number(e.target.value))}
+          />
+        </div>
+        <div className="field">
+          <label>周期（秒）</label>
+          <input
+            type="number"
+            min={10}
+            max={120}
+            value={period}
+            onChange={(e) => setPeriod(Number(e.target.value))}
+          />
+        </div>
+        {error ? <p className="error">{error}</p> : null}
+        <button className="btn" type="submit" disabled={busy} style={{ width: '100%', marginTop: 8 }}>
+          {busy ? '保存中…' : '保存'}
+        </button>
+      </form>
+    </main>
+  );
+}
--- a/frontend/src/pages/EditAccountPage.tsx
+++ b/frontend/src/pages/EditAccountPage.tsx
@@ -0,0 +1,155 @@
+import { FormEvent, useEffect, useState } from 'react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import { fetchAccounts, updateAccount, type AccountDto } from '../api/client';
+
+export function EditAccountPage() {
+  const { id } = useParams<{ id: string }>();
+  const nav = useNavigate();
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  const [label, setLabel] = useState('');
+  const [issuer, setIssuer] = useState('');
+  const [secret, setSecret] = useState('');
+  const [algorithm, setAlgorithm] = useState('SHA1');
+  const [digits, setDigits] = useState(6);
+  const [period, setPeriod] = useState(30);
+
+  useEffect(() => {
+    if (!id) {
+      nav('/', { replace: true });
+      return;
+    }
+    let cancelled = false;
+    (async () => {
+      try {
+        const list = await fetchAccounts();
+        const account = list.find((a) => a.id === id);
+        if (cancelled) return;
+        if (!account) {
+          nav('/', { replace: true });
+          return;
+        }
+        applyAccount(account);
+        setLoading(false);
+      } catch {
+        if (!cancelled) nav('/login', { replace: true });
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [id, nav]);
+
+  function applyAccount(a: AccountDto) {
+    setLabel(a.label);
+    setIssuer(a.issuer ?? '');
+    setAlgorithm(a.algorithm);
+    setDigits(a.digits);
+    setPeriod(a.period);
+    setSecret('');
+  }
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault();
+    if (!id) return;
+    const trimmedLabel = label.trim();
+    if (!trimmedLabel) {
+      setError('请填写显示名称');
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    try {
+      await updateAccount(id, {
+        label: trimmedLabel,
+        issuer: issuer.trim() || null,
+        secret: secret.trim() || undefined,
+        algorithm,
+        digits,
+        period,
+      });
+      nav('/', { replace: true });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '保存失败');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  if (loading) {
+    return (
+      <main>
+        <p className="sub">加载中…</p>
+      </main>
+    );
+  }
+
+  return (
+    <main>
+      <div className="top-nav">
+        <Link className="btn secondary" to="/">
+          返回
+        </Link>
+        <span style={{ fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
+          <img className="top-nav-logo" src="/logo.png" alt="" width={28} height={28} />
+          编辑账户
+        </span>
+        <span style={{ width: 72 }} />
+      </div>
+
+      <form className="card" onSubmit={onSubmit}>
+        <div className="field">
+          <label>显示名称</label>
+          <input value={label} onChange={(e) => setLabel(e.target.value)} required />
+        </div>
+        <div className="field">
+          <label>发行方（可选）</label>
+          <input value={issuer} onChange={(e) => setIssuer(e.target.value)} />
+        </div>
+        <div className="field">
+          <label>Secret（Base32）</label>
+          <input
+            value={secret}
+            onChange={(e) => setSecret(e.target.value)}
+            placeholder="留空表示不修改密钥"
+            autoComplete="off"
+          />
+        </div>
+        <div className="field">
+          <label>算法</label>
+          <select value={algorithm} onChange={(e) => setAlgorithm(e.target.value)}>
+            <option value="SHA1">SHA1</option>
+            <option value="SHA256">SHA256</option>
+            <option value="SHA512">SHA512</option>
+          </select>
+        </div>
+        <div className="field">
+          <label>位数</label>
+          <input
+            type="number"
+            min={6}
+            max={10}
+            value={digits}
+            onChange={(e) => setDigits(Number(e.target.value))}
+          />
+        </div>
+        <div className="field">
+          <label>周期（秒）</label>
+          <input
+            type="number"
+            min={10}
+            max={120}
+            value={period}
+            onChange={(e) => setPeriod(Number(e.target.value))}
+          />
+        </div>
+        {error ? <p className="error">{error}</p> : null}
+        <button className="btn" type="submit" disabled={busy} style={{ width: '100%', marginTop: 8 }}>
+          {busy ? '保存中…' : '保存修改'}
+        </button>
+      </form>
+    </main>
+  );
+}
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -0,0 +1,368 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import {
+  deleteAccount,
+  exportAll,
+  fetchAccounts,
+  importItems,
+  logout,
+  type AccountDto,
+} from '../api/client';
+import { IconButton } from '../components/IconButton';
+import { IconEdit, IconLink, IconTrash } from '../components/icons';
+import { TotpCard } from '../components/TotpCard';
+import { buildShareUrl } from '../lib/shareUrl';
+
+function CodeRow({ a, onDelete }: { a: AccountDto; onDelete: (id: string) => void }) {
+  const [linkCopied, setLinkCopied] = useState(false);
+
+  async function onCopyShare() {
+    try {
+      await navigator.clipboard.writeText(buildShareUrl(a.shareToken));
+      setLinkCopied(true);
+      setTimeout(() => setLinkCopied(false), 1500);
+    } catch {
+      /* ignore */
+    }
+  }
+
+  return (
+    <TotpCard
+      label={a.label}
+      issuer={a.issuer}
+      code={a.code}
+      expiresInSeconds={a.expiresInSeconds}
+      period={a.period}
+      toolbar={
+        <>
+          <IconButton label="复制分享链接" copied={linkCopied} onClick={() => void onCopyShare()}>
+            <IconLink />
+          </IconButton>
+          <IconButton
+            label="编辑"
+            to={`/edit/${encodeURIComponent(a.id)}`}
+          >
+            <IconEdit />
+          </IconButton>
+          <IconButton
+            label="删除"
+            variant="danger"
+            onClick={() => {
+              if (confirm('确定删除此条目？')) onDelete(a.id);
+            }}
+          >
+            <IconTrash />
+          </IconButton>
+        </>
+      }
+    />
+  );
+}
+
+const UNCATEGORIZED = '__uncategorized__';
+
+type CategoryKey = 'all' | typeof UNCATEGORIZED | string;
+
+function buildCategories(accounts: AccountDto[]): { key: CategoryKey; label: string; count: number }[] {
+  const issuerCounts = new Map<string, number>();
+  let uncategorized = 0;
+  for (const a of accounts) {
+    const issuer = a.issuer?.trim();
+    if (!issuer) {
+      uncategorized += 1;
+    } else {
+      issuerCounts.set(issuer, (issuerCounts.get(issuer) ?? 0) + 1);
+    }
+  }
+  const items: { key: CategoryKey; label: string; count: number }[] = [
+    { key: 'all', label: '全部', count: accounts.length },
+  ];
+  for (const [issuer, count] of [...issuerCounts.entries()].sort((a, b) =>
+    a[0].localeCompare(b[0], 'zh'),
+  )) {
+    items.push({ key: issuer, label: issuer, count });
+  }
+  if (uncategorized > 0) {
+    items.push({ key: UNCATEGORIZED, label: '未分类', count: uncategorized });
+  }
+  return items;
+}
+
+function filterByCategory(accounts: AccountDto[], key: CategoryKey): AccountDto[] {
+  if (key === 'all') return accounts;
+  if (key === UNCATEGORIZED) {
+    return accounts.filter((a) => !a.issuer?.trim());
+  }
+  return accounts.filter((a) => a.issuer?.trim() === key);
+}
+
+function MenuIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden>
+      <path
+        d="M4 7h16M4 12h16M4 17h16"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export function HomePage() {
+  const nav = useNavigate();
+  const [accounts, setAccounts] = useState<AccountDto[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [category, setCategory] = useState<CategoryKey>('all');
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(
+    () => typeof window !== 'undefined' && window.matchMedia('(max-width: 640px)').matches,
+  );
+
+  const load = useCallback(async () => {
+    try {
+      const list = await fetchAccounts();
+      setAccounts(list);
+      setError(null);
+    } catch {
+      nav('/login', { replace: true });
+    }
+  }, [nav]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  useEffect(() => {
+    const t = setInterval(() => void load(), 1000);
+    return () => clearInterval(t);
+  }, [load]);
+
+  async function onLogout() {
+    await logout();
+    nav('/login', { replace: true });
+  }
+
+  async function onExport() {
+    try {
+      const data = await exportAll();
+      const blob = new Blob([JSON.stringify(data, null, 2)], {
+        type: 'application/json',
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `sprout2fa-export-${new Date().toISOString().slice(0, 10)}.json`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : '导出失败');
+    }
+  }
+
+  function onImportPick() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'application/json,.json';
+    input.onchange = () => {
+      const file = input.files?.[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = async () => {
+        try {
+          const text = String(reader.result || '');
+          const j = JSON.parse(text) as { items?: unknown };
+          if (!Array.isArray(j.items)) {
+            setError('文件格式无效：缺少 items 数组');
+            return;
+          }
+          const r = await importItems(
+            j.items as {
+              label: string;
+              issuer: string | null;
+              secret: string;
+              algorithm: string;
+              digits: number;
+              period: number;
+            }[],
+          );
+          alert(`已导入 ${r.imported} 条`);
+          await load();
+        } catch (e) {
+          setError(e instanceof Error ? e.message : '导入失败');
+        }
+      };
+      reader.readAsText(file);
+    };
+    input.click();
+  }
+
+  const categories = useMemo(
+    () => (accounts ? buildCategories(accounts) : []),
+    [accounts],
+  );
+
+  const visibleAccounts = useMemo(
+    () => (accounts ? filterByCategory(accounts, category) : []),
+    [accounts, category],
+  );
+
+  useEffect(() => {
+    if (!accounts) return;
+    if (category === 'all') return;
+    const stillValid = categories.some((c) => c.key === category);
+    if (!stillValid) setCategory('all');
+  }, [accounts, categories, category]);
+
+  useEffect(() => {
+    if (!drawerOpen) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [drawerOpen]);
+
+  useEffect(() => {
+    if (!drawerOpen) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setDrawerOpen(false);
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [drawerOpen]);
+
+  useEffect(() => {
+    const mq = window.matchMedia('(max-width: 640px)');
+    const update = () => {
+      setIsMobile(mq.matches);
+      if (!mq.matches) setDrawerOpen(false);
+    };
+    update();
+    mq.addEventListener('change', update);
+    return () => mq.removeEventListener('change', update);
+  }, []);
+
+  function selectCategory(key: CategoryKey) {
+    setCategory(key);
+    setDrawerOpen(false);
+  }
+
+  if (accounts === null) {
+    return (
+      <main>
+        <p className="sub">加载中…</p>
+      </main>
+    );
+  }
+
+  const subText =
+    category === 'all'
+      ? `${accounts.length} 个账户`
+      : `${visibleAccounts.length} / ${accounts.length}`;
+
+  return (
+    <main className={`home-page${drawerOpen ? ' drawer-open' : ''}`}>
+      <button
+        type="button"
+        className="drawer-backdrop"
+        aria-label="关闭分类菜单"
+        tabIndex={drawerOpen ? 0 : -1}
+        onClick={() => setDrawerOpen(false)}
+      />
+      <div className="home-layout">
+        <aside
+          id="category-sidebar"
+          className="category-sidebar"
+          aria-label="分类筛选"
+          aria-hidden={isMobile && !drawerOpen ? true : undefined}
+        >
+          <div className="category-sidebar-title">分类</div>
+          <nav className="category-nav">
+            {categories.map((c) => (
+              <button
+                key={c.key}
+                type="button"
+                className={`category-item${category === c.key ? ' active' : ''}`}
+                onClick={() => selectCategory(c.key)}
+              >
+                <span className="category-item-label">{c.label}</span>
+                <span className="category-item-count">{c.count}</span>
+              </button>
+            ))}
+          </nav>
+        </aside>
+
+        <div className="home-main">
+          <div className="top-nav">
+            <div className="top-nav-start">
+              <button
+                type="button"
+                className="btn icon drawer-toggle"
+                aria-expanded={drawerOpen}
+                aria-controls="category-sidebar"
+                aria-label={drawerOpen ? '关闭分类' : '打开分类'}
+                onClick={() => setDrawerOpen((v) => !v)}
+              >
+                <MenuIcon />
+              </button>
+              <div className="top-nav-title">
+                <img
+                  className="top-nav-logo"
+                  src="/logo.png"
+                  alt=""
+                  width={36}
+                  height={36}
+                />
+                <h1 style={{ margin: 0 }}>验证码</h1>
+              </div>
+            </div>
+            <button type="button" className="btn secondary" onClick={() => void onLogout()}>
+              退出
+            </button>
+          </div>
+          <p className="sub">{subText}</p>
+
+          <div className="row-actions">
+            <Link className="btn" to="/add">
+              添加
+            </Link>
+            <button type="button" className="btn secondary" onClick={() => void onExport()}>
+              导出
+            </button>
+            <button type="button" className="btn secondary" onClick={onImportPick}>
+              导入
+            </button>
+          </div>
+
+          {error ? <p className="error">{error}</p> : null}
+
+          {accounts.length === 0 ? (
+            <div className="card">
+              <p>暂无条目，点击「添加」扫码或手动输入。</p>
+            </div>
+          ) : visibleAccounts.length === 0 ? (
+            <div className="card">
+              <p>该分类下暂无账户。</p>
+            </div>
+          ) : (
+            visibleAccounts.map((a) => (
+              <CodeRow
+                key={a.id}
+                a={a}
+                onDelete={async (id) => {
+                  try {
+                    await deleteAccount(id);
+                    await load();
+                  } catch (e) {
+                    setError(e instanceof Error ? e.message : '删除失败');
+                  }
+                }}
+              />
+            ))
+          )}
+        </div>
+      </div>
+    </main>
+  );
+}
--- a/frontend/src/pages/IndexPage.tsx
+++ b/frontend/src/pages/IndexPage.tsx
@@ -0,0 +1,11 @@
+import { useSearchParams } from 'react-router-dom';
+import { HomePage } from './HomePage';
+import { SharePage } from './SharePage';
+
+/** 有 ?token= 时走公开分享页，否则为需登录的首页 */
+export function IndexPage() {
+  const [params] = useSearchParams();
+  const token = params.get('token')?.trim();
+  if (token) return <SharePage token={token} />;
+  return <HomePage />;
+}
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -0,0 +1,54 @@
+import { FormEvent, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { login } from '../api/client';
+
+export function LoginPage() {
+  const nav = useNavigate();
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setBusy(true);
+    try {
+      await login(password);
+      nav('/', { replace: true });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '登录失败');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <main>
+      <div className="brand">
+        <img className="brand-logo" src="/logo.png" alt="" width={72} height={72} />
+        <h1>Sprout2FA</h1>
+      </div>
+      <p className="sub">输入应用密码以继续。首次使用默认密码请在部署说明中查看。</p>
+      <div className="card">
+        <form onSubmit={onSubmit}>
+          <div className="field">
+            <label htmlFor="pw">密码</label>
+            <input
+              id="pw"
+              type="password"
+              autoComplete="current-password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="应用密码"
+              required
+            />
+          </div>
+          {error ? <p className="error">{error}</p> : null}
+          <button className="btn" type="submit" disabled={busy} style={{ width: '100%', marginTop: 8 }}>
+            {busy ? '验证中…' : '进入'}
+          </button>
+        </form>
+      </div>
+    </main>
+  );
+}
--- a/frontend/src/pages/SharePage.tsx
+++ b/frontend/src/pages/SharePage.tsx
@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useState } from 'react';
+import { fetchSharedAccount, type SharedAccountDto } from '../api/client';
+import { TotpCard } from '../components/TotpCard';
+
+export function SharePage({ token }: { token: string }) {
+  const [account, setAccount] = useState<SharedAccountDto | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    try {
+      const a = await fetchSharedAccount(token);
+      setAccount(a);
+      setError(null);
+    } catch (e) {
+      setAccount(null);
+      setError(e instanceof Error ? e.message : '无法加载');
+    }
+  }, [token]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  useEffect(() => {
+    const t = setInterval(() => void load(), 1000);
+    return () => clearInterval(t);
+  }, [load]);
+
+  if (error && !account) {
+    return (
+      <main className="share-page">
+        <div className="card">
+          <p className="error">{error}</p>
+          <p className="sub" style={{ marginBottom: 0 }}>
+            分享链接无效或已被撤销，请联系分享者获取新链接。
+          </p>
+        </div>
+      </main>
+    );
+  }
+
+  if (!account) {
+    return (
+      <main className="share-page">
+        <p className="sub">加载中…</p>
+      </main>
+    );
+  }
+
+  return (
+    <main className="share-page">
+      <div className="top-nav">
+        <div className="top-nav-title">
+          <img className="top-nav-logo" src="/logo.png" alt="" width={36} height={36} />
+          <h1 style={{ margin: 0, fontSize: '1.25rem' }}>验证码</h1>
+        </div>
+      </div>
+
+      <TotpCard
+        label={account.label}
+        issuer={account.issuer}
+        code={account.code}
+        expiresInSeconds={account.expiresInSeconds}
+        period={account.period}
+      />
+    </main>
+  );
+}
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -0,0 +1,579 @@
+:root {
+  color-scheme: light;
+  --bg: #ecfdf5;
+  --surface: #ffffff;
+  --text: #14532d;
+  --muted: #4d7c59;
+  --accent: #166534;
+  --accent2: #22c55e;
+  --danger: #b91c1c;
+  --radius: 12px;
+  --shadow: 0 8px 24px rgba(20, 83, 45, 0.12);
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'PingFang SC',
+    'Microsoft YaHei', sans-serif;
+  line-height: 1.45;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100dvh;
+  background: var(--bg);
+  color: var(--text);
+}
+
+.app-shell {
+  min-height: 100dvh;
+  max-width: 520px;
+  margin: 0 auto;
+  padding: max(16px, env(safe-area-inset-top))
+    max(16px, env(safe-area-inset-right))
+    max(24px, env(safe-area-inset-bottom))
+    max(16px, env(safe-area-inset-left));
+}
+
+.app-shell:has(.home-page) {
+  max-width: 920px;
+}
+
+.home-layout {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+}
+
+.home-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.category-sidebar {
+  flex-shrink: 0;
+  width: 148px;
+  position: sticky;
+  top: max(16px, env(safe-area-inset-top));
+  background: var(--surface);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 12px 10px;
+}
+
+.category-sidebar-title {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--muted);
+  padding: 0 8px 8px;
+  letter-spacing: 0.04em;
+}
+
+.category-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.category-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text);
+  font-size: 0.88rem;
+  cursor: pointer;
+  text-align: left;
+}
+
+.category-item:hover {
+  background: #ecfdf5;
+}
+
+.category-item.active {
+  background: var(--accent);
+  color: #fff;
+}
+
+.category-item.active .category-item-count {
+  background: rgba(255, 255, 255, 0.25);
+  color: #fff;
+}
+
+.category-item-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.category-item-count {
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  padding: 2px 6px;
+  border-radius: 99px;
+  background: #dcfce7;
+  color: var(--accent);
+  font-variant-numeric: tabular-nums;
+}
+
+.drawer-backdrop {
+  display: none;
+}
+
+.drawer-toggle {
+  display: none;
+}
+
+.top-nav-start {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.btn.icon {
+  padding: 8px;
+  min-width: 40px;
+  min-height: 40px;
+}
+
+.btn.icon.secondary {
+  background: #e2e8f0;
+  color: var(--text);
+}
+
+@media (max-width: 640px) {
+  .app-shell:has(.home-page) {
+    max-width: 520px;
+    padding: max(8px, env(safe-area-inset-top))
+      max(12px, env(safe-area-inset-right))
+      max(16px, env(safe-area-inset-bottom))
+      max(12px, env(safe-area-inset-left));
+  }
+
+  .drawer-toggle {
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+
+  .home-layout {
+    display: block;
+  }
+
+  .drawer-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 90;
+    border: none;
+    margin: 0;
+    padding: 0;
+    background: rgba(20, 83, 45, 0.4);
+    cursor: pointer;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity 0.22s ease, visibility 0.22s ease;
+  }
+
+  .home-page.drawer-open .drawer-backdrop {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  .category-sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 100;
+    width: min(272px, 82vw);
+    margin: 0;
+    border-radius: 0 var(--radius) var(--radius) 0;
+    padding: max(16px, env(safe-area-inset-top)) 12px
+      max(16px, env(safe-area-inset-bottom));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+    transform: translateX(-105%);
+    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 4px 0 24px rgba(20, 83, 45, 0.18);
+  }
+
+  .home-page.drawer-open .category-sidebar {
+    transform: translateX(0);
+  }
+
+  .category-sidebar-title {
+    font-size: 0.85rem;
+    padding: 0 8px 10px;
+  }
+
+  .home-main .top-nav {
+    margin-bottom: 8px;
+  }
+
+  .home-main .top-nav-title h1 {
+    font-size: 1.15rem;
+  }
+
+  .home-main .top-nav-logo {
+    width: 28px;
+    height: 28px;
+  }
+
+  .home-main .sub {
+    margin-bottom: 12px;
+    font-size: 0.82rem;
+  }
+
+  .home-main .row-actions {
+    gap: 6px;
+    margin-bottom: 12px;
+  }
+
+  .home-main .row-actions .btn {
+    padding: 8px 10px;
+    font-size: 0.82rem;
+  }
+
+  .home-main .card {
+    padding: 12px;
+    margin-bottom: 10px;
+  }
+
+  .home-main .totp-code {
+    font-size: 1.5rem;
+    letter-spacing: 0.12em;
+  }
+}
+
+h1 {
+  margin: 0 0 8px;
+  font-size: 1.5rem;
+}
+
+.sub {
+  color: var(--muted);
+  font-size: 0.9rem;
+  margin: 0 0 20px;
+}
+
+.card {
+  background: var(--surface);
+  border-radius: var(--radius);
+  padding: 16px;
+  box-shadow: var(--shadow);
+  margin-bottom: 14px;
+}
+
+.row-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.card-actions {
+  display: flex;
+  flex-shrink: 0;
+  gap: 6px;
+  align-self: flex-start;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: none;
+  border-radius: 10px;
+  padding: 10px 14px;
+  font-size: 0.95rem;
+  cursor: pointer;
+  background: var(--accent);
+  color: #fff;
+  text-decoration: none;
+}
+
+.btn.secondary {
+  background: #e2e8f0;
+  color: var(--text);
+}
+
+.btn.ghost {
+  background: transparent;
+  color: var(--accent);
+  border: 1px solid var(--accent2);
+}
+
+.btn.danger {
+  background: var(--danger);
+}
+
+.btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.field {
+  margin-bottom: 12px;
+}
+
+.field label {
+  display: block;
+  font-size: 0.85rem;
+  margin-bottom: 6px;
+  color: var(--muted);
+}
+
+input,
+select,
+textarea {
+  width: 100%;
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid #cbd5e1;
+  font-size: 1rem;
+}
+
+textarea {
+  min-height: 88px;
+  resize: vertical;
+}
+
+.totp-card {
+  padding: 12px 14px;
+}
+
+.totp-card-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.totp-card-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  flex: 1;
+}
+
+.totp-card-label {
+  font-weight: 600;
+  font-size: 0.92rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.totp-card-issuer {
+  font-size: 0.75rem;
+  color: var(--muted);
+  background: #ecfdf5;
+  padding: 2px 8px;
+  border-radius: 99px;
+  flex-shrink: 0;
+}
+
+.icon-toolbar {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: #f1f5f9;
+  color: var(--text);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.icon-btn:hover {
+  background: #e2e8f0;
+}
+
+.icon-btn.danger {
+  background: #fee2e2;
+  color: var(--danger);
+}
+
+.icon-btn.danger:hover {
+  background: #fecaca;
+}
+
+.icon-btn.copied {
+  background: #dcfce7;
+  color: var(--accent);
+}
+
+.totp-code-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.totp-code-hit {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  border-radius: 8px;
+}
+
+.totp-code-hit:hover .totp-code {
+  color: var(--accent);
+}
+
+.totp-code {
+  font-family: ui-monospace, monospace;
+  font-size: 1.85rem;
+  letter-spacing: 0.16em;
+  line-height: 1.2;
+  color: var(--text);
+  display: block;
+}
+
+.totp-card-foot {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.totp-card-foot .progress {
+  flex: 1;
+}
+
+.totp-card-timer {
+  font-size: 0.8rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--muted);
+  min-width: 2.2em;
+  text-align: right;
+}
+
+.progress {
+  height: 5px;
+  background: #dcfce7;
+  border-radius: 99px;
+  overflow: hidden;
+}
+
+.progress > i {
+  display: block;
+  height: 100%;
+  background: var(--accent2);
+  transition: width 0.2s linear;
+}
+
+.error {
+  color: var(--danger);
+  font-size: 0.9rem;
+  margin: 8px 0 0;
+}
+
+.brand {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+  text-align: center;
+}
+
+.brand-logo {
+  width: 72px;
+  height: 72px;
+  object-fit: contain;
+  display: block;
+}
+
+.brand h1 {
+  margin: 0;
+}
+
+.top-nav-logo {
+  width: 36px;
+  height: 36px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.top-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.top-nav-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.segment {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 14px;
+}
+
+.segment button {
+  flex: 1;
+  padding: 8px;
+  border-radius: 10px;
+  border: 1px solid #cbd5e1;
+  background: #f8fafc;
+  cursor: pointer;
+}
+
+.segment button.active {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+
+video.scan {
+  width: 100%;
+  border-radius: var(--radius);
+  background: #000;
+  max-height: 260px;
+}
+
+.scan-wrap {
+  position: relative;
+  margin-bottom: 10px;
+}
+
+.share-page .app-shell,
+.share-page {
+  max-width: 520px;
+}
+
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/client" />
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "jsx": "react-jsx",
+    "noEmit": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src"]
+}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -0,0 +1,56 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { VitePWA } from 'vite-plugin-pwa';
+
+export default defineConfig({
+  // 仅在使用 `cd frontend && npm run dev` 时需要：另开终端运行 `wrangler dev`，API 会转到 8787
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:8787',
+        changeOrigin: true,
+      },
+    },
+  },
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['favicon.ico', 'logo.png'],
+      manifest: {
+        name: 'Sprout2FA',
+        short_name: 'Sprout2FA',
+        description: '网页版 2FA / TOTP 管理器',
+        theme_color: '#14532d',
+        background_color: '#ecfdf5',
+        display: 'standalone',
+        orientation: 'portrait-primary',
+        start_url: '/',
+        scope: '/',
+        icons: [
+          {
+            src: '/logo.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'any maskable',
+          },
+        ],
+      },
+      workbox: {
+        // logo.png 可能较大，不加入 SW 预缓存，避免超过默认 2MiB 限制；页面仍正常引用 /logo.png
+        globPatterns: ['**/*.{js,css,html,svg,ico,woff2}'],
+        globIgnores: ['**/logo.png'],
+        runtimeCaching: [
+          {
+            urlPattern: ({ url }: { url: URL }) => url.pathname.startsWith('/api'),
+            handler: 'NetworkOnly',
+          },
+        ],
+      },
+    }),
+  ],
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+  },
+});
--- a/migrations/0001_init.sql
+++ b/migrations/0001_init.sql
@@ -0,0 +1,19 @@
+-- Sprout2FA 初始 schema
+CREATE TABLE IF NOT EXISTS app_meta (
+  key TEXT PRIMARY KEY NOT NULL,
+  value TEXT NOT NULL
+);
+
+CREATE TABLE IF NOT EXISTS totp_accounts (
+  id TEXT PRIMARY KEY NOT NULL,
+  label TEXT NOT NULL,
+  issuer TEXT,
+  encrypted_secret TEXT NOT NULL,
+  algorithm TEXT NOT NULL DEFAULT 'SHA1',
+  digits INTEGER NOT NULL DEFAULT 6,
+  period INTEGER NOT NULL DEFAULT 30,
+  created_at INTEGER NOT NULL,
+  sort_order INTEGER NOT NULL DEFAULT 0
+);
+
+CREATE INDEX IF NOT EXISTS idx_totp_sort ON totp_accounts (sort_order, created_at);
--- a/migrations/0002_share_token.sql
+++ b/migrations/0002_share_token.sql
@@ -0,0 +1,4 @@
+-- 临时分享：每个账户可选的唯一 share_token，用于公开链接仅暴露单条 2FA
+ALTER TABLE totp_accounts ADD COLUMN share_token TEXT;
+
+CREATE UNIQUE INDEX IF NOT EXISTS idx_totp_share_token ON totp_accounts (share_token);
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "sprout2fa",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "npm run build:frontend && wrangler dev",
+    "dev:worker": "wrangler dev",
+    "build": "npm run build:frontend",
+    "build:frontend": "cd frontend && npm run build",
+    "build:frontend:quick": "cd frontend && npm run build",
+    "deploy": "npm run build:frontend && wrangler deploy",
+    "cf-typegen": "wrangler types",
+    "check": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.20250518.0",
+    "typescript": "^5.7.2",
+    "wrangler": "^4.16.0"
+  },
+  "dependencies": {
+    "hono": "^4.6.14"
+  }
+}
--- a/src/worker/constants.ts
+++ b/src/worker/constants.ts
@@ -0,0 +1,14 @@
+/**
+ * 首次部署前默认应用密码；建议在设置中尽快修改。
+ */
+export const DEFAULT_APP_PASSWORD = 'shumengya520';
+
+export const PASSWORD_META_KEY = 'password_hash';
+
+export const SESSION_COOKIE_NAME = 'sprout2fa_session';
+
+/** 会话有效期（毫秒） */
+export const SESSION_MAX_AGE_MS = 7 * 24 * 60 * 60 * 1000;
+
+/** Workers 运行时 Web Crypto 要求 PBKDF2 迭代次数 ≤ 100000 */
+export const PBKDF2_ITERATIONS = 100_000;
--- a/src/worker/crypto/aes.ts
+++ b/src/worker/crypto/aes.ts
@@ -0,0 +1,65 @@
+/**
+ * AES-GCM 封装，密文格式: base64( iv(12) | ciphertext+tag )
+ */
+
+function b64encode(bytes: Uint8Array): string {
+  let bin = '';
+  for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]!);
+  return btoa(bin);
+}
+
+function b64decode(b64: string): Uint8Array {
+  const bin = atob(b64);
+  const out = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i)!;
+  return out;
+}
+
+async function importAesKey(masterKeyB64: string): Promise<CryptoKey> {
+  const raw = b64decode(masterKeyB64.trim());
+  if (raw.length !== 32) {
+    throw new Error('MASTER_KEY 必须为 32 字节的 base64 编码');
+  }
+  return crypto.subtle.importKey(
+    'raw',
+    raw as BufferSource,
+    { name: 'AES-GCM' },
+    false,
+    ['encrypt', 'decrypt'],
+  );
+}
+
+export async function encryptSecret(
+  masterKeyB64: string,
+  plaintextUtf8: string,
+): Promise<string> {
+  const key = await importAesKey(masterKeyB64);
+  const iv = crypto.getRandomValues(new Uint8Array(12));
+  const enc = new TextEncoder();
+  const cipher = await crypto.subtle.encrypt(
+    { name: 'AES-GCM', iv },
+    key,
+    enc.encode(plaintextUtf8),
+  );
+  const combined = new Uint8Array(iv.length + cipher.byteLength);
+  combined.set(iv, 0);
+  combined.set(new Uint8Array(cipher), iv.length);
+  return b64encode(combined);
+}
+
+export async function decryptSecret(
+  masterKeyB64: string,
+  storedB64: string,
+): Promise<string> {
+  const key = await importAesKey(masterKeyB64);
+  const combined = b64decode(storedB64);
+  if (combined.length < 12 + 16) throw new Error('密文损坏');
+  const iv = combined.slice(0, 12);
+  const data = combined.slice(12);
+  const plain = await crypto.subtle.decrypt(
+    { name: 'AES-GCM', iv },
+    key,
+    data,
+  );
+  return new TextDecoder().decode(plain);
+}
--- a/src/worker/crypto/password.ts
+++ b/src/worker/crypto/password.ts
@@ -0,0 +1,97 @@
+import { DEFAULT_APP_PASSWORD, PBKDF2_ITERATIONS } from '../constants';
+
+function bytesToB64(bytes: Uint8Array): string {
+  let bin = '';
+  for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]!);
+  return btoa(bin);
+}
+
+function b64ToBytes(b64: string): Uint8Array {
+  const bin = atob(b64);
+  const out = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i)!;
+  return out;
+}
+
+/**
+ * 生成存储格式: saltB64:iterations:hashB64
+ */
+export async function hashPassword(password: string): Promise<string> {
+  const enc = new TextEncoder();
+  const salt = crypto.getRandomValues(new Uint8Array(16));
+  const keyMaterial = await crypto.subtle.importKey(
+    'raw',
+    enc.encode(password),
+    'PBKDF2',
+    false,
+    ['deriveBits'],
+  );
+  const bits = await crypto.subtle.deriveBits(
+    {
+      name: 'PBKDF2',
+      salt: salt as BufferSource,
+      iterations: PBKDF2_ITERATIONS,
+      hash: 'SHA-256',
+    },
+    keyMaterial,
+    256,
+  );
+  const hash = new Uint8Array(bits);
+  return `${bytesToB64(salt)}:${PBKDF2_ITERATIONS}:${bytesToB64(hash)}`;
+}
+
+export async function verifyPasswordHash(
+  password: string,
+  stored: string,
+): Promise<boolean> {
+  const parts = stored.split(':');
+  if (parts.length !== 3) return false;
+  const [saltB64, iterStr, hashB64] = parts;
+  const iterations = Number(iterStr);
+  if (!Number.isFinite(iterations) || iterations < 10000) return false;
+  // 旧版曾用 120000，Worker 不支持；需清空 app_meta 中 password_hash 后重新登录
+  if (iterations > 100_000) return false;
+  const salt = b64ToBytes(saltB64!);
+  const expected = b64ToBytes(hashB64!);
+  const enc = new TextEncoder();
+  const keyMaterial = await crypto.subtle.importKey(
+    'raw',
+    enc.encode(password),
+    'PBKDF2',
+    false,
+    ['deriveBits'],
+  );
+  const bits = await crypto.subtle.deriveBits(
+    {
+      name: 'PBKDF2',
+      salt: salt as BufferSource,
+      iterations,
+      hash: 'SHA-256',
+    },
+    keyMaterial,
+    256,
+  );
+  const actual = new Uint8Array(bits);
+  if (actual.length !== expected.length) return false;
+  let ok = 0;
+  for (let i = 0; i < actual.length; i++) ok |= actual[i]! ^ expected[i]!;
+  return ok === 0;
+}
+
+/**
+ * 读取数据库中的口令哈希；若无记录则仅当口令为默认口令时视为通过，并返回需写入的哈希。
+ */
+export async function checkAppPassword(
+  password: string,
+  storedRow: { value: string } | null,
+): Promise<{ ok: boolean; newHashToStore?: string }> {
+  if (!storedRow) {
+    if (password !== DEFAULT_APP_PASSWORD) {
+      return { ok: false };
+    }
+    const newHashToStore = await hashPassword(password);
+    return { ok: true, newHashToStore };
+  }
+  const ok = await verifyPasswordHash(password, storedRow.value);
+  return { ok };
+}
--- a/src/worker/crypto/totp.ts
+++ b/src/worker/crypto/totp.ts
@@ -0,0 +1,90 @@
+/**
+ * RFC 6238 TOTP（Worker 侧计算，依赖 Web Crypto HMAC）
+ */
+
+const BASE32_ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';
+
+export function normalizeBase32Secret(secret: string): string {
+  return secret.replace(/\s+/g, '').toUpperCase().replace(/=+$/, '');
+}
+
+export function decodeBase32(s: string): Uint8Array {
+  const str = normalizeBase32Secret(s);
+  let bits = 0;
+  let value = 0;
+  const output: number[] = [];
+  for (let i = 0; i < str.length; i++) {
+    const idx = BASE32_ALPHABET.indexOf(str[i]!);
+    if (idx === -1) continue;
+    value = (value << 5) | idx;
+    bits += 5;
+    if (bits >= 8) {
+      output.push((value >>> (bits - 8)) & 0xff);
+      bits -= 8;
+    }
+  }
+  return new Uint8Array(output);
+}
+
+function writeBigEndianCounter(view: DataView, counter: number): void {
+  let c = counter;
+  for (let i = 7; i >= 0; i--) {
+    view.setUint8(i, c & 0xff);
+    c = Math.floor(c / 256);
+  }
+}
+
+async function hmacDigest(
+  keyBytes: Uint8Array,
+  message: ArrayBuffer,
+  hash: 'SHA-1' | 'SHA-256' | 'SHA-512',
+): Promise<Uint8Array> {
+  const cryptoKey = await crypto.subtle.importKey(
+    'raw',
+    keyBytes as BufferSource,
+    { name: 'HMAC', hash },
+    false,
+    ['sign'],
+  );
+  return new Uint8Array(await crypto.subtle.sign('HMAC', cryptoKey, message));
+}
+
+export async function computeTotpCode(
+  secretBase32: string,
+  options: { digits: number; period: number; algorithm: string; nowMs?: number },
+): Promise<{ code: string; expiresInSeconds: number }> {
+  const now = options.nowMs ?? Date.now();
+  const period = options.period || 30;
+  const digits = Math.min(10, Math.max(6, options.digits || 6));
+  const algo = (options.algorithm || 'SHA1').toUpperCase();
+  const hashName =
+    algo === 'SHA256' || algo === 'SHA-256'
+      ? 'SHA-256'
+      : algo === 'SHA512' || algo === 'SHA-512'
+        ? 'SHA-512'
+        : 'SHA-1';
+
+  const keyBytes = decodeBase32(secretBase32);
+  if (keyBytes.length === 0) {
+    throw new Error('密钥无效');
+  }
+
+  const counter = Math.floor(now / 1000 / period);
+  const buf = new ArrayBuffer(8);
+  writeBigEndianCounter(new DataView(buf), counter);
+  const hmac = await hmacDigest(keyBytes, buf, hashName);
+  const offset = hmac[hmac.length - 1]! & 0x0f;
+  const bin =
+    ((hmac[offset]! & 0x7f) << 24) |
+    ((hmac[offset + 1]! & 0xff) << 16) |
+    ((hmac[offset + 2]! & 0xff) << 8) |
+    (hmac[offset + 3]! & 0xff);
+  const mod = 10 ** digits;
+  const num = bin % mod;
+  const code = num.toString(10).padStart(digits, '0');
+
+  const elapsed = Math.floor(now / 1000) % period;
+  const expiresInSeconds = period - elapsed;
+
+  return { code, expiresInSeconds };
+}
--- a/src/worker/index.ts
+++ b/src/worker/index.ts
@@ -0,0 +1,55 @@
+import { Hono } from 'hono';
+import { verifySessionToken } from './middleware/session';
+import { registerAuthRoutes } from './routes/auth';
+import { registerAccountRoutes } from './routes/accounts';
+import { registerImportExportRoutes } from './routes/importExport';
+import { registerShareRoutes } from './routes/share';
+
+const app = new Hono<{ Bindings: Env }>();
+
+app.onError((err, c) => {
+  console.error('[sprout2fa] unhandled', err);
+  return c.json(
+    { error: err instanceof Error ? err.message : '服务器错误' },
+    500,
+  );
+});
+
+// 必须先注册更具体的前缀 /api/auth，避免被 /api 子应用吞掉
+const apiAuth = new Hono<{ Bindings: Env }>();
+registerAuthRoutes(apiAuth);
+app.route('/api/auth', apiAuth);
+
+const apiShare = new Hono<{ Bindings: Env }>();
+registerShareRoutes(apiShare);
+app.route('/api/share', apiShare);
+
+const authed = new Hono<{ Bindings: Env }>();
+authed.use('*', async (c, next) => {
+  const ok = await verifySessionToken(
+    c.env.SESSION_SECRET,
+    c.req.header('Cookie') ?? null,
+  );
+  if (!ok) {
+    return c.json({ error: '未授权' }, 401);
+  }
+  await next();
+});
+
+registerAccountRoutes(authed);
+registerImportExportRoutes(authed);
+app.route('/api', authed);
+
+export default {
+  async fetch(
+    request: Request,
+    env: Env,
+    ctx: ExecutionContext,
+  ): Promise<Response> {
+    const url = new URL(request.url);
+    if (url.pathname.startsWith('/api')) {
+      return app.fetch(request, env, ctx);
+    }
+    return env.ASSETS.fetch(request);
+  },
+};
--- a/src/worker/lib/ensureShareToken.ts
+++ b/src/worker/lib/ensureShareToken.ts
@@ -0,0 +1,48 @@
+import { generateShareToken } from './shareToken';
+
+/** 账户若无 share_token 则自动生成并持久化 */
+export async function ensureShareTokenForAccount(
+  db: D1Database,
+  id: string,
+  existing: string | null,
+): Promise<string> {
+  if (existing) return existing;
+
+  for (let attempt = 0; attempt < 6; attempt++) {
+    const row = await db
+      .prepare('SELECT share_token FROM totp_accounts WHERE id = ?')
+      .bind(id)
+      .first<{ share_token: string | null }>();
+    if (row?.share_token) return row.share_token;
+
+    const token = generateShareToken();
+    try {
+      await db
+        .prepare('UPDATE totp_accounts SET share_token = ? WHERE id = ?')
+        .bind(token, id)
+        .run();
+      return token;
+    } catch {
+      /* 唯一索引冲突时重试 */
+    }
+  }
+
+  const final = await db
+    .prepare('SELECT share_token FROM totp_accounts WHERE id = ?')
+    .bind(id)
+    .first<{ share_token: string | null }>();
+  if (final?.share_token) return final.share_token;
+  throw new Error('无法生成分享密钥');
+}
+
+export async function newShareTokenForInsert(db: D1Database): Promise<string> {
+  for (let attempt = 0; attempt < 6; attempt++) {
+    const token = generateShareToken();
+    const dup = await db
+      .prepare('SELECT id FROM totp_accounts WHERE share_token = ?')
+      .bind(token)
+      .first();
+    if (!dup) return token;
+  }
+  throw new Error('无法生成分享密钥');
+}
--- a/src/worker/lib/shareToken.ts
+++ b/src/worker/lib/shareToken.ts
@@ -0,0 +1,16 @@
+const TOKEN_RE = /^[a-zA-Z0-9_-]{16,64}$/;
+
+export function isValidShareToken(token: string): boolean {
+  return TOKEN_RE.test(token);
+}
+
+export function generateShareToken(): string {
+  const bytes = new Uint8Array(24);
+  crypto.getRandomValues(bytes);
+  return Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join('');
+}
+
+export function shareUrlFromRequest(reqUrl: string, token: string): string {
+  const origin = new URL(reqUrl).origin;
+  return `${origin}/?token=${encodeURIComponent(token)}`;
+}
--- a/src/worker/middleware/session.ts
+++ b/src/worker/middleware/session.ts
@@ -0,0 +1,128 @@
+import { SESSION_COOKIE_NAME, SESSION_MAX_AGE_MS } from '../constants';
+
+function b64urlEncode(bytes: Uint8Array): string {
+  let bin = '';
+  for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]!);
+  return btoa(bin).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+
+function b64urlDecodeToString(s: string): string {
+  const pad = 4 - (s.length % 4);
+  const b64 = (pad === 4 ? s : s + '='.repeat(pad)).replace(/-/g, '+').replace(/_/g, '/');
+  const bin = atob(b64);
+  return bin;
+}
+
+async function hmacSign(secret: string, message: string): Promise<Uint8Array> {
+  const key = await crypto.subtle.importKey(
+    'raw',
+    new TextEncoder().encode(secret),
+    { name: 'HMAC', hash: 'SHA-256' },
+    false,
+    ['sign'],
+  );
+  return new Uint8Array(
+    await crypto.subtle.sign('HMAC', key, new TextEncoder().encode(message)),
+  );
+}
+
+export async function createSessionToken(sessionSecret: string): Promise<string> {
+  const payload = JSON.stringify({
+    exp: Date.now() + SESSION_MAX_AGE_MS,
+    iat: Date.now(),
+  });
+  const sig = await hmacSign(sessionSecret, payload);
+  return `${b64urlEncode(new TextEncoder().encode(payload))}.${b64urlEncode(sig)}`;
+}
+
+export async function verifySessionToken(
+  sessionSecret: string | undefined,
+  cookieHeader: string | null,
+): Promise<boolean> {
+  if (!sessionSecret || sessionSecret.trim().length < 8) return false;
+  if (!cookieHeader) return false;
+  const cookies = parseCookies(cookieHeader);
+  const token = cookies[SESSION_COOKIE_NAME];
+  if (!token) return false;
+  const dot = token.lastIndexOf('.');
+  if (dot === -1) return false;
+  const payloadPart = token.slice(0, dot);
+  const sigPart = token.slice(dot + 1);
+  let payloadStr: string;
+  try {
+    payloadStr = b64urlDecodeToString(payloadPart);
+  } catch {
+    return false;
+  }
+  let sigBytes: Uint8Array;
+  try {
+    const pad = 4 - (sigPart.length % 4);
+    const b64 = (pad === 4 ? sigPart : sigPart + '='.repeat(pad))
+      .replace(/-/g, '+')
+      .replace(/_/g, '/');
+    const bin = atob(b64);
+    sigBytes = new Uint8Array(bin.length);
+    for (let i = 0; i < bin.length; i++) sigBytes[i] = bin.charCodeAt(i)!;
+  } catch {
+    return false;
+  }
+  const expected = await hmacSign(sessionSecret, payloadStr);
+  if (expected.length !== sigBytes.length) return false;
+  let ok = 0;
+  for (let i = 0; i < expected.length; i++) ok |= expected[i]! ^ sigBytes[i]!;
+  if (ok !== 0) return false;
+  try {
+    const data = JSON.parse(payloadStr) as { exp?: number };
+    if (typeof data.exp !== 'number' || data.exp < Date.now()) return false;
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function parseCookies(header: string): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const part of header.split(';')) {
+    const idx = part.indexOf('=');
+    if (idx === -1) continue;
+    const k = part.slice(0, idx).trim();
+    const v = part.slice(idx + 1).trim();
+    out[k] = decodeURIComponent(v);
+  }
+  return out;
+}
+
+/** 根据请求 URL 判断是否为 HTTPS，用于设置 Secure Cookie */
+export function sessionCookieHeaderForRequest(
+  token: string,
+  maxAgeSec: number,
+  requestUrl: string,
+): string {
+  const url = new URL(requestUrl);
+  const isSecure = url.protocol === 'https:';
+  const parts = [
+    `${SESSION_COOKIE_NAME}=${encodeURIComponent(token)}`,
+    'HttpOnly',
+    'Path=/',
+    'SameSite=Lax',
+    `Max-Age=${maxAgeSec}`,
+  ];
+  if (isSecure) parts.push('Secure');
+  return parts.join('; ');
+}
+
+export function clearSessionCookieHeaderForRequest(requestUrl: string): string {
+  const url = new URL(requestUrl);
+  const isSecure = url.protocol === 'https:';
+  const parts = [
+    `${SESSION_COOKIE_NAME}=`,
+    'HttpOnly',
+    'Path=/',
+    'SameSite=Lax',
+    'Max-Age=0',
+  ];
+  if (isSecure) parts.push('Secure');
+  return parts.join('; ');
+}
+
+export { SESSION_COOKIE_NAME };
--- a/src/worker/routes/accounts.ts
+++ b/src/worker/routes/accounts.ts
@@ -0,0 +1,275 @@
+import { Hono } from 'hono';
+import { decryptSecret, encryptSecret } from '../crypto/aes';
+import { computeTotpCode, normalizeBase32Secret } from '../crypto/totp';
+import {
+  ensureShareTokenForAccount,
+  newShareTokenForInsert,
+} from '../lib/ensureShareToken';
+
+type AccountRow = {
+  id: string;
+  label: string;
+  issuer: string | null;
+  encrypted_secret: string;
+  algorithm: string;
+  digits: number;
+  period: number;
+  created_at: number;
+  sort_order: number;
+  share_token: string | null;
+};
+
+function parseAccountBody(body: unknown): {
+  label: string;
+  issuer: string | null;
+  secret: string;
+  algorithm: string;
+  digits: number;
+  period: number;
+} | null {
+  if (!body || typeof body !== 'object') return null;
+  const o = body as Record<string, unknown>;
+  const label = typeof o.label === 'string' ? o.label.trim() : '';
+  const issuer =
+    typeof o.issuer === 'string' && o.issuer.trim()
+      ? o.issuer.trim()
+      : null;
+  const secretRaw = typeof o.secret === 'string' ? o.secret.trim() : '';
+  const algorithm =
+    typeof o.algorithm === 'string' && o.algorithm.trim()
+      ? o.algorithm.trim()
+      : 'SHA1';
+  const digits =
+    typeof o.digits === 'number' && Number.isFinite(o.digits)
+      ? Math.min(10, Math.max(6, Math.floor(o.digits)))
+      : 6;
+  const period =
+    typeof o.period === 'number' && Number.isFinite(o.period)
+      ? Math.min(120, Math.max(10, Math.floor(o.period)))
+      : 30;
+  if (!label || !secretRaw) return null;
+  const secret = normalizeBase32Secret(secretRaw);
+  if (secret.length < 4) return null;
+  return { label, issuer, secret: secretRaw, algorithm, digits, period };
+}
+
+export function registerAccountRoutes(authed: Hono<{ Bindings: Env }>): void {
+  authed.get('/accounts', async (c) => {
+    const { results } = await c.env.DB.prepare(
+      `SELECT id, label, issuer, encrypted_secret, algorithm, digits, period, created_at, sort_order, share_token
+       FROM totp_accounts
+       ORDER BY sort_order ASC, created_at ASC`,
+    ).all<AccountRow>();
+
+    const list = [];
+    const now = Date.now();
+    for (const row of results ?? []) {
+      let secret: string;
+      try {
+        secret = await decryptSecret(c.env.MASTER_KEY, row.encrypted_secret);
+      } catch {
+        continue;
+      }
+      const { code, expiresInSeconds } = await computeTotpCode(
+        normalizeBase32Secret(secret),
+        {
+          digits: row.digits,
+          period: row.period,
+          algorithm: row.algorithm,
+          nowMs: now,
+        },
+      );
+      const shareToken = await ensureShareTokenForAccount(
+        c.env.DB,
+        row.id,
+        row.share_token,
+      );
+      list.push({
+        id: row.id,
+        label: row.label,
+        issuer: row.issuer,
+        algorithm: row.algorithm,
+        digits: row.digits,
+        period: row.period,
+        code,
+        expiresInSeconds,
+        shareToken,
+      });
+    }
+    return c.json({ accounts: list });
+  });
+
+  authed.post('/accounts', async (c) => {
+    let body: unknown;
+    try {
+      body = await c.req.json();
+    } catch {
+      return c.json({ error: '无效的 JSON' }, 400);
+    }
+    const parsed = parseAccountBody(body);
+    if (!parsed) {
+      return c.json({ error: '缺少 label 或有效的 secret' }, 400);
+    }
+    const normalized = normalizeBase32Secret(parsed.secret);
+    try {
+      await computeTotpCode(normalized, {
+        digits: parsed.digits,
+        period: parsed.period,
+        algorithm: parsed.algorithm,
+      });
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : '密钥无法生成验证码';
+      return c.json({ error: msg }, 400);
+    }
+
+    const id = crypto.randomUUID();
+    const now = Math.floor(Date.now() / 1000);
+    const maxRow = await c.env.DB.prepare(
+      'SELECT COALESCE(MAX(sort_order), -1) as m FROM totp_accounts',
+    ).first<{ m: number }>();
+    const sortOrder = (maxRow?.m ?? -1) + 1;
+
+    const enc = await encryptSecret(c.env.MASTER_KEY, normalized);
+    const shareToken = await newShareTokenForInsert(c.env.DB);
+
+    await c.env.DB.prepare(
+      `INSERT INTO totp_accounts (id, label, issuer, encrypted_secret, algorithm, digits, period, created_at, sort_order, share_token)
+       VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+    )
+      .bind(
+        id,
+        parsed.label,
+        parsed.issuer,
+        enc,
+        parsed.algorithm.toUpperCase(),
+        parsed.digits,
+        parsed.period,
+        now,
+        sortOrder,
+        shareToken,
+      )
+      .run();
+
+    return c.json({ id, ok: true });
+  });
+
+  authed.patch('/accounts/:id', async (c) => {
+    const id = c.req.param('id');
+    let body: Record<string, unknown>;
+    try {
+      body = await c.req.json();
+    } catch {
+      return c.json({ error: '无效的 JSON' }, 400);
+    }
+    const row = await c.env.DB.prepare(
+      `SELECT id, label, issuer, encrypted_secret, algorithm, digits, period
+       FROM totp_accounts WHERE id = ?`,
+    )
+      .bind(id)
+      .first<AccountRow>();
+    if (!row) return c.json({ error: '未找到' }, 404);
+
+    const updates: string[] = [];
+    const values: unknown[] = [];
+
+    if (typeof body.label === 'string' && body.label.trim()) {
+      updates.push('label = ?');
+      values.push(body.label.trim());
+    }
+    if (body.issuer !== undefined) {
+      updates.push('issuer = ?');
+      values.push(
+        typeof body.issuer === 'string' && body.issuer.trim()
+          ? body.issuer.trim()
+          : null,
+      );
+    }
+    if (typeof body.algorithm === 'string' && body.algorithm.trim()) {
+      updates.push('algorithm = ?');
+      values.push(body.algorithm.trim().toUpperCase());
+    }
+    if (typeof body.digits === 'number' && Number.isFinite(body.digits)) {
+      updates.push('digits = ?');
+      values.push(Math.min(10, Math.max(6, Math.floor(body.digits))));
+    }
+    if (typeof body.period === 'number' && Number.isFinite(body.period)) {
+      updates.push('period = ?');
+      values.push(Math.min(120, Math.max(10, Math.floor(body.period))));
+    }
+    if (typeof body.sort_order === 'number' && Number.isFinite(body.sort_order)) {
+      updates.push('sort_order = ?');
+      values.push(Math.floor(body.sort_order));
+    }
+
+    const nextAlgorithm =
+      typeof body.algorithm === 'string' && body.algorithm.trim()
+        ? body.algorithm.trim().toUpperCase()
+        : row.algorithm;
+    const nextDigits =
+      typeof body.digits === 'number' && Number.isFinite(body.digits)
+        ? Math.min(10, Math.max(6, Math.floor(body.digits)))
+        : row.digits;
+    const nextPeriod =
+      typeof body.period === 'number' && Number.isFinite(body.period)
+        ? Math.min(120, Math.max(10, Math.floor(body.period)))
+        : row.period;
+
+    if (typeof body.secret === 'string' && body.secret.trim()) {
+      const normalized = normalizeBase32Secret(body.secret.trim());
+      if (normalized.length < 4) {
+        return c.json({ error: '无效的 secret' }, 400);
+      }
+      try {
+        await computeTotpCode(normalized, {
+          digits: nextDigits,
+          period: nextPeriod,
+          algorithm: nextAlgorithm,
+        });
+      } catch (e) {
+        const msg = e instanceof Error ? e.message : '密钥无法生成验证码';
+        return c.json({ error: msg }, 400);
+      }
+      const enc = await encryptSecret(c.env.MASTER_KEY, normalized);
+      updates.push('encrypted_secret = ?');
+      values.push(enc);
+    } else if (
+      body.algorithm !== undefined ||
+      body.digits !== undefined ||
+      body.period !== undefined
+    ) {
+      let secret: string;
+      try {
+        secret = await decryptSecret(c.env.MASTER_KEY, row.encrypted_secret);
+      } catch {
+        return c.json({ error: '无法读取现有密钥' }, 500);
+      }
+      try {
+        await computeTotpCode(normalizeBase32Secret(secret), {
+          digits: nextDigits,
+          period: nextPeriod,
+          algorithm: nextAlgorithm,
+        });
+      } catch (e) {
+        const msg = e instanceof Error ? e.message : '参数无法生成验证码';
+        return c.json({ error: msg }, 400);
+      }
+    }
+
+    if (updates.length === 0) return c.json({ ok: true });
+
+    const sql = `UPDATE totp_accounts SET ${updates.join(', ')} WHERE id = ?`;
+    values.push(id);
+    await c.env.DB.prepare(sql)
+      .bind(...values)
+      .run();
+    return c.json({ ok: true });
+  });
+
+  authed.delete('/accounts/:id', async (c) => {
+    const id = c.req.param('id');
+    await c.env.DB.prepare('DELETE FROM totp_accounts WHERE id = ?')
+      .bind(id)
+      .run();
+    return c.json({ ok: true });
+  });
+}
--- a/src/worker/routes/auth.ts
+++ b/src/worker/routes/auth.ts
@@ -0,0 +1,80 @@
+import { Hono } from 'hono';
+import { PASSWORD_META_KEY } from '../constants';
+import { SESSION_MAX_AGE_MS } from '../constants';
+import { checkAppPassword } from '../crypto/password';
+import {
+  clearSessionCookieHeaderForRequest,
+  createSessionToken,
+  sessionCookieHeaderForRequest,
+} from '../middleware/session';
+
+const MAX_AGE_SEC = Math.floor(SESSION_MAX_AGE_MS / 1000);
+
+/** 挂载在 /api/auth 下，路径为 /login、/logout */
+export function registerAuthRoutes(apiAuth: Hono<{ Bindings: Env }>): void {
+  apiAuth.post('/login', async (c) => {
+    const sec = c.env.SESSION_SECRET;
+    if (typeof sec !== 'string' || sec.trim().length < 8) {
+      return c.json(
+        {
+          error:
+            '服务器未配置 SESSION_SECRET（本地在项目根目录添加 .dev.vars；生产环境执行 wrangler secret put SESSION_SECRET）',
+        },
+        503,
+      );
+    }
+
+    let body: { password?: string };
+    try {
+      body = await c.req.json();
+    } catch {
+      return c.json({ error: '无效的 JSON' }, 400);
+    }
+    const password = typeof body.password === 'string' ? body.password : '';
+
+    try {
+      const row = await c.env.DB.prepare(
+        'SELECT value FROM app_meta WHERE key = ?',
+      )
+        .bind(PASSWORD_META_KEY)
+        .first<{ value: string }>();
+
+      const result = await checkAppPassword(password, row);
+      if (!result.ok) {
+        return c.json({ error: '密码错误' }, 401);
+      }
+      if (result.newHashToStore) {
+        await c.env.DB.prepare(
+          'INSERT OR REPLACE INTO app_meta (key, value) VALUES (?, ?)',
+        )
+          .bind(PASSWORD_META_KEY, result.newHashToStore)
+          .run();
+      }
+      const token = await createSessionToken(sec.trim());
+      c.header(
+        'Set-Cookie',
+        sessionCookieHeaderForRequest(token, MAX_AGE_SEC, c.req.url),
+      );
+      return c.json({ ok: true });
+    } catch (e) {
+      const msg =
+        e instanceof Error
+          ? e.message
+          : typeof e === 'string'
+            ? e
+            : '登录失败';
+      console.error('[sprout2fa] login', e);
+      return c.json(
+        {
+          error: `数据库或运行时错误：${msg}。若提示 no such table，请执行：wrangler d1 migrations apply sprout2fa --local（本地）或加 --remote（线上库）。`,
+        },
+        500,
+      );
+    }
+  });
+
+  apiAuth.post('/logout', (c) => {
+    c.header('Set-Cookie', clearSessionCookieHeaderForRequest(c.req.url));
+    return c.json({ ok: true });
+  });
+}
--- a/src/worker/routes/importExport.ts
+++ b/src/worker/routes/importExport.ts
@@ -0,0 +1,140 @@
+import { Hono } from 'hono';
+import { decryptSecret, encryptSecret } from '../crypto/aes';
+import { computeTotpCode, normalizeBase32Secret } from '../crypto/totp';
+import { newShareTokenForInsert } from '../lib/ensureShareToken';
+
+type ExportItem = {
+  label: string;
+  issuer: string | null;
+  secret: string;
+  algorithm: string;
+  digits: number;
+  period: number;
+};
+
+type AccountRow = {
+  id: string;
+  label: string;
+  issuer: string | null;
+  encrypted_secret: string;
+  algorithm: string;
+  digits: number;
+  period: number;
+};
+
+function parseImportItem(raw: unknown): ExportItem | null {
+  if (!raw || typeof raw !== 'object') return null;
+  const o = raw as Record<string, unknown>;
+  const label = typeof o.label === 'string' ? o.label.trim() : '';
+  const issuer =
+    typeof o.issuer === 'string' && o.issuer.trim()
+      ? o.issuer.trim()
+      : null;
+  const secretRaw = typeof o.secret === 'string' ? o.secret.trim() : '';
+  if (!label || !secretRaw) return null;
+  const algorithm =
+    typeof o.algorithm === 'string' && o.algorithm.trim()
+      ? o.algorithm.trim()
+      : 'SHA1';
+  const digits =
+    typeof o.digits === 'number' && Number.isFinite(o.digits)
+      ? Math.min(10, Math.max(6, Math.floor(o.digits)))
+      : 6;
+  const period =
+    typeof o.period === 'number' && Number.isFinite(o.period)
+      ? Math.min(120, Math.max(10, Math.floor(o.period)))
+      : 30;
+  return { label, issuer, secret: secretRaw, algorithm, digits, period };
+}
+
+export function registerImportExportRoutes(
+  authed: Hono<{ Bindings: Env }>,
+): void {
+  authed.get('/export', async (c) => {
+    const { results } = await c.env.DB.prepare(
+      `SELECT id, label, issuer, encrypted_secret, algorithm, digits, period FROM totp_accounts ORDER BY sort_order ASC, created_at ASC`,
+    ).all<AccountRow>();
+
+    const items: ExportItem[] = [];
+    for (const row of results ?? []) {
+      try {
+        const secret = await decryptSecret(
+          c.env.MASTER_KEY,
+          row.encrypted_secret,
+        );
+        items.push({
+          label: row.label,
+          issuer: row.issuer,
+          secret: normalizeBase32Secret(secret),
+          algorithm: row.algorithm,
+          digits: row.digits,
+          period: row.period,
+        });
+      } catch {
+        continue;
+      }
+    }
+    return c.json({
+      version: 1,
+      exportedAt: new Date().toISOString(),
+      items,
+    });
+  });
+
+  authed.post('/import', async (c) => {
+    let body: { items?: unknown };
+    try {
+      body = await c.req.json();
+    } catch {
+      return c.json({ error: '无效的 JSON' }, 400);
+    }
+    if (!Array.isArray(body.items)) {
+      return c.json({ error: '需要 items 数组' }, 400);
+    }
+
+    const maxRow = await c.env.DB.prepare(
+      'SELECT COALESCE(MAX(sort_order), -1) as m FROM totp_accounts',
+    ).first<{ m: number }>();
+    let sortBase = (maxRow?.m ?? -1) + 1;
+    const now = Math.floor(Date.now() / 1000);
+    let imported = 0;
+
+    for (const raw of body.items) {
+      const parsed = parseImportItem(raw);
+      if (!parsed) continue;
+      const normalized = normalizeBase32Secret(parsed.secret);
+      try {
+        await computeTotpCode(normalized, {
+          digits: parsed.digits,
+          period: parsed.period,
+          algorithm: parsed.algorithm,
+        });
+      } catch {
+        continue;
+      }
+      const id = crypto.randomUUID();
+      const enc = await encryptSecret(c.env.MASTER_KEY, normalized);
+      const shareToken = await newShareTokenForInsert(c.env.DB);
+      await c.env.DB.prepare(
+        `INSERT INTO totp_accounts (id, label, issuer, encrypted_secret, algorithm, digits, period, created_at, sort_order, share_token)
+         VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+      )
+        .bind(
+          id,
+          parsed.label,
+          parsed.issuer,
+          enc,
+          parsed.algorithm.toUpperCase(),
+          parsed.digits,
+          parsed.period,
+          now,
+          sortBase++,
+          shareToken,
+        )
+        .run();
+      imported++;
+    }
+
+    return c.json({ ok: true, imported });
+  });
+}
--- a/src/worker/routes/share.ts
+++ b/src/worker/routes/share.ts
@@ -0,0 +1,65 @@
+import { Hono } from 'hono';
+import { decryptSecret } from '../crypto/aes';
+import { computeTotpCode, normalizeBase32Secret } from '../crypto/totp';
+import { isValidShareToken } from '../lib/shareToken';
+
+type ShareRow = {
+  id: string;
+  label: string;
+  issuer: string | null;
+  encrypted_secret: string;
+  algorithm: string;
+  digits: number;
+  period: number;
+};
+
+/** 公开接口：仅凭 share_token 返回单条验证码，无需登录 */
+export function registerShareRoutes(api: Hono<{ Bindings: Env }>): void {
+  api.get('/:token', async (c) => {
+    const token = c.req.param('token');
+    if (!isValidShareToken(token)) {
+      return c.json({ error: '无效的分享链接' }, 400);
+    }
+
+    const row = await c.env.DB.prepare(
+      `SELECT id, label, issuer, encrypted_secret, algorithm, digits, period
+       FROM totp_accounts WHERE share_token = ?`,
+    )
+      .bind(token)
+      .first<ShareRow>();
+
+    if (!row) {
+      return c.json({ error: '链接无效或已失效' }, 404);
+    }
+
+    let secret: string;
+    try {
+      secret = await decryptSecret(c.env.MASTER_KEY, row.encrypted_secret);
+    } catch {
+      return c.json({ error: '无法生成验证码' }, 500);
+    }
+
+    const now = Date.now();
+    const { code, expiresInSeconds } = await computeTotpCode(
+      normalizeBase32Secret(secret),
+      {
+        digits: row.digits,
+        period: row.period,
+        algorithm: row.algorithm,
+        nowMs: now,
+      },
+    );
+
+    return c.json({
+      account: {
+        label: row.label,
+        issuer: row.issuer,
+        algorithm: row.algorithm,
+        digits: row.digits,
+        period: row.period,
+        code,
+        expiresInSeconds,
+      },
+    });
+  });
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "WebWorker"],
+    "types": ["@cloudflare/workers-types"],
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src/worker/**/*.ts", "worker-configuration.d.ts"]
+}
--- a/worker-configuration.d.ts
+++ b/worker-configuration.d.ts
@@ -0,0 +1,8 @@
+// 由 wrangler types 生成时可替换；本地开发占位
+interface Env {
+  DB: D1Database;
+  ASSETS: Fetcher;
+  /** 至少 8 字符；本地用 .dev.vars，线上 wrangler secret put SESSION_SECRET */
+  SESSION_SECRET: string;
+  MASTER_KEY: string;
+}
--- a/wrangler.toml
+++ b/wrangler.toml
@@ -0,0 +1,17 @@
+name = "sprout2fa"
+main = "src/worker/index.ts"
+compatibility_date = "2024-12-30"
+
+# 前端静态资源由 Vite 构建到 frontend/dist，仅 Worker 打包 API
+[assets]
+directory = "./frontend/dist"
+binding = "ASSETS"
+not_found_handling = "single-page-application"
+
+# 创建数据库后执行: wrangler d1 create sprout2fa
+# 将返回的 database_id 填入下方，并执行: wrangler d1 migrations apply sprout2fa --remote
+[[d1_databases]]
+binding = "DB"
+database_name = "sprout2fa"
+database_id = "015c5c76-11d8-470a-a5dc-f5c7a4b59ccb"
+migrations_dir = "migrations"