release: v2.1.39

Author: 李杰

scripts/bump.cjs

@@ -0,0 +1,21 @@
+const fs = require('fs');
+const path = require('path');
+const date = new Date().toISOString().split('T')[0];
+
+const rootDir = path.resolve(__dirname, '..');
+const pkg = require(path.join(rootDir, 'package.json'));
+const version = pkg.version.split('.').map((v, i) => i === 2 ? parseInt(v) + 1 : v).join('.');
+
+const enMap = path.join(rootDir, 'CHANGELOG.md');
+const zhMap = path.join(rootDir, 'CHANGELOG.zh-CN.md');
+
+const en = fs.readFileSync(enMap, 'utf8');
+const zh = fs.readFileSync(zhMap, 'utf8');
+
+const enUpdate = '## [' + version + '] - ' + date + '\n### Added\n- Support pasting OTPAuth URI directly and extracting account name and secret.\n- Support inline editing of account name in MFA vaults.\n- Support uploading or pasting images containing QR code to auto-detect its MFA secret.\n';
+fs.writeFileSync(enMap, en.replace('## [Unreleased]', '## [Unreleased]\n\n' + enUpdate));
+
+const zhUpdate = '## [' + version + '] - ' + date + '\n### Added\n- MFA 凭证可直接粘贴完整地址并通过内置解析器提取配置。\n- 添加列表记录的账号名二次点按修改。\n- 增设内置的图像读图识别能力，可上传或直接粘贴二维码解析 Secret。\n';
+fs.writeFileSync(zhMap, zh.replace('## [Unreleased]', '## [Unreleased]\n\n' + zhUpdate));
+
+console.log('Changelog updated.');

scripts/patch_locales_mfa_vault_new.js

@@ -0,0 +1,47 @@
+const fs = require('fs');
+const path = require('path');
+
+const localesDir = path.join(__dirname, '../src/locales');
+const newKeys = {
+  'zh-CN': {
+    'mfaVault.inputSinglePlaceholder': '在此粘贴 MFA 秘钥 / otpauth:// 地址 (支持直接粘贴包含二维码的截图)',
+    'mfaVault.defaultAccountName': '未命名账户',
+    'mfaVault.qrDetectFailed': '未能从图片中识别出有效的二维码，请确保图片清晰',
+    'mfaVault.selectImage': '选择图片识别二维码',
+    'mfaVault.clickToEdit': '点击修改账号名'
+  },
+  'en-US': {
+    'mfaVault.inputSinglePlaceholder': 'Paste MFA Secret / otpauth:// URL (Supports pasting QR code screenshots)',
+    'mfaVault.defaultAccountName': 'Unnamed Account',
+    'mfaVault.qrDetectFailed': 'Failed to detect a valid QR code from the image. Please ensure it is clear.',
+    'mfaVault.selectImage': 'Select image to recognize QR code',
+    'mfaVault.clickToEdit': 'Click to edit account name'
+  }
+};
+
+const defaultMapping = newKeys['en-US'];
+
+fs.readdirSync(localesDir).forEach(file => {
+  if (file.endsWith('.json')) {
+    const localeName = file.replace('.json', '');
+    const data = JSON.parse(fs.readFileSync(path.join(localesDir, file), 'utf8'));
+    const mappingToUse = newKeys[localeName] || defaultMapping;
+    
+    let updated = false;
+    for (const [key, value] of Object.entries(mappingToUse)) {
+      if (!data[key]) {
+        data[key] = value;
+        updated = true;
+      }
+    }
+    
+    if (updated) {
+      // Sort keys alphabetically
+      const sorted = {};
+      Object.keys(data).sort().forEach(k => sorted[k] = data[k]);
+      fs.writeFileSync(path.join(localesDir, file), JSON.stringify(sorted, null, 2) + '\n');
+    }
+  }
+});
+
+console.log('Locales patched for new MFA features.');

src-tauri/Cargo.lock

@@ -1,9 +1,31 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Copy, Plus, Trash2, Download, Upload, Check, Database } from 'lucide-react';
+import { Copy, Plus, Trash2, Download, Upload, Check, Database, Image as ImageIcon, Edit2, Save, X } from 'lucide-react';
 import { save, open, confirm } from '@tauri-apps/plugin-dialog';
 import { writeTextFile, readTextFile } from '@tauri-apps/plugin-fs';
 import * as OTPAuth from 'otpauth';
+import jsQR from 'jsqr';
+
+async function decodeQR(file: File | Blob): Promise<string | null> {
+  return new Promise((resolve) => {
+    const url = URL.createObjectURL(file);
+    const img = new Image();
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+      const canvas = document.createElement('canvas');
+      canvas.width = img.width;
+      canvas.height = img.height;
+      const ctx = canvas.getContext('2d', { willReadFrequently: true });
+      if (!ctx) return resolve(null);
+      ctx.drawImage(img, 0, 0);
+      const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+      const code = jsQR(imgData.data, imgData.width, imgData.height);
+      resolve(code ? code.data : null);
+    };
+    img.onerror = () => resolve(null);
+    img.src = url;
+  });
+}
 
 export interface MfaRecord {
   id: string; // Internal use
@@ -105,10 +127,12 @@ export function MfaVaultManager() {
     return [];
   });
 
-  const [inputAccount, setInputAccount] = useState('');
   const [inputSecret, setInputSecret] = useState('');
   const [inputRemark, setInputRemark] = useState('');
   const [copiedId, setCopiedId] = useState<string | null>(null);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editValue, setEditValue] = useState('');
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const [timeRemaining, setTimeRemaining] = useState(() => {
     const now = Math.floor(Date.now() / 1000);
     return 30 - (now % 30);
@@ -128,24 +152,95 @@ export function MfaVaultManager() {
   }, []);
 
   const handleAdd = () => {
-    const act = inputAccount.trim();
-    const sec = inputSecret.trim();
-    if (!act || !sec) return;
+    const raw = inputSecret.trim();
+    if (!raw) return;
+
+    let accountName = t('mfaVault.defaultAccountName', '未命名账户');
+    let extractedSecret = raw;
+
+    try {
+      const parsed = OTPAuth.URI.parse(raw);
+      if (parsed instanceof OTPAuth.TOTP) {
+        const parts = [parsed.issuer, parsed.label].filter(p => !!p);
+        if (parts.length > 0) {
+          accountName = parts.join(': ');
+        }
+        extractedSecret = parsed.secret.base32;
+      }
+    } catch {
+      extractedSecret = raw;
+    }
 
     const newRecord: MfaRecord = {
       id: createUniqueId(),
-      accountName: act,
-      secret: sec,
+      accountName,
+      secret: extractedSecret,
       remark: inputRemark.trim(),
       time: Date.now()
     };
 
     setRecords(prev => [newRecord, ...prev]);
-    setInputAccount('');
     setInputSecret('');
     setInputRemark('');
   };
 
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    decodeQR(file).then(decoded => {
+      if (decoded) {
+        setInputSecret(decoded);
+      } else {
+        alert(t('mfaVault.qrDetectFailed', '未能从图片中识别出二维码，请确保图片清晰'));
+      }
+    });
+    e.target.value = '';
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    const file = e.dataTransfer.files?.[0];
+    if (file && file.type.startsWith('image/')) {
+      decodeQR(file).then(decoded => {
+        if (decoded) setInputSecret(decoded);
+      });
+    }
+  };
+
+  const handlePaste = async (e: React.ClipboardEvent) => {
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    for (const item of items) {
+      if (item.type.indexOf('image/') !== -1) {
+        const file = item.getAsFile();
+        if (file) {
+          e.preventDefault();
+          const decoded = await decodeQR(file);
+          if (decoded) {
+            setInputSecret(decoded);
+          } else {
+            alert(t('mfaVault.qrDetectFailed', '未能从图片中识别出二维码，请确保图片清晰'));
+          }
+        }
+      }
+    }
+  };
+
+  const startEdit = (id: string, currentName: string) => {
+    setEditingId(id);
+    setEditValue(currentName);
+  };
+
+  const saveEdit = (id: string) => {
+    const trimmed = editValue.trim() || t('mfaVault.defaultAccountName', '未命名账户');
+    setRecords(prev => prev.map(r => r.id === id ? { ...r, accountName: trimmed } : r));
+    setEditingId(null);
+  };
+
   const handleDelete = async (id: string, accountName: string) => {
     try {
       const msg = t('mfaVault.confirmDeleteMsg', '确定要永久删除 [{{accountName}}] 的凭证记录吗？').replace('{{accountName}}', accountName);
@@ -288,21 +383,18 @@ export function MfaVaultManager() {
         </h3>
 
         <div className="query-main" style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-          <div style={{ display: 'flex', gap: '12px' }}>
-            <div className="form-group" style={{ marginBottom: 0, flex: 1 }}>
-              <input 
-                type="text" 
-                placeholder={t('mfaVault.inputAccountPlaceholder', '账号 (Account Name) *')}
-                value={inputAccount}
-                onChange={e => setInputAccount(e.target.value)}
-              />
-            </div>
+          <div 
+            style={{ display: 'flex', gap: '12px', alignItems: 'center' }}
+            onDragOver={handleDragOver}
+            onDrop={handleDrop}
+          >
             <div className="form-group" style={{ marginBottom: 0, flex: 2 }}>
               <input 
                 type="text" 
-                placeholder={t('mfaVault.inputSecretPlaceholder', '密钥 / 恢复码 (Secret) *')}
+                placeholder={t('mfaVault.inputSinglePlaceholder', '在此粘贴 MFA 秘钥 / otpauth:// 地址 (支持直接粘贴包含二维码的截图)')}
                 value={inputSecret}
                 onChange={e => setInputSecret(e.target.value)}
+                onPaste={handlePaste}
                 style={{ fontFamily: 'var(--font-mono)' }}
               />
             </div>
@@ -314,10 +406,28 @@ export function MfaVaultManager() {
                 onChange={e => setInputRemark(e.target.value)}
               />
             </div>
+            
+            <input 
+              type="file" 
+              accept="image/*" 
+              style={{ display: 'none' }} 
+              ref={fileInputRef}
+              onChange={handleImageUpload}
+            />
+
+            <button 
+              className="btn btn-secondary" 
+              title={t('mfaVault.selectImage', '选择图片识别二维码')}
+              onClick={() => fileInputRef.current?.click()}
+              style={{ flexShrink: 0, padding: '4px 10px' }}
+            >
+              <ImageIcon size={16} />
+            </button>
+
             <button 
               className="btn btn-primary" 
               onClick={handleAdd}
-              disabled={!inputAccount.trim() || !inputSecret.trim()}
+              disabled={!inputSecret.trim()}
               style={{ flexShrink: 0 }}
             >
               <Plus size={14} /> {t('mfaVault.add', '添加')}
@@ -368,8 +478,33 @@ export function MfaVaultManager() {
                     const isWarning = timeRemaining <= 5;
                     return (
                       <tr key={record.id}>
-                        <td title={record.accountName} style={{ fontWeight: 500 }}>
-                          {record.accountName}
+                        <td style={{ fontWeight: 500 }}>
+                          {editingId === record.id ? (
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                              <input 
+                                type="text"
+                                value={editValue}
+                                onChange={e => setEditValue(e.target.value)}
+                                onKeyDown={e => {
+                                  if (e.key === 'Enter') saveEdit(record.id);
+                                  if (e.key === 'Escape') setEditingId(null);
+                                }}
+                                autoFocus
+                                style={{ padding: '2px 6px', fontSize: '13px', width: '100%', minWidth: '120px' }}
+                              />
+                              <button className="action-btn is-success" onClick={() => saveEdit(record.id)}><Save size={14}/></button>
+                              <button className="action-btn" onClick={() => setEditingId(null)}><X size={14}/></button>
+                            </div>
+                          ) : (
+                            <div 
+                              style={{ display: 'inline-flex', alignItems: 'center', gap: '6px', cursor: 'text' }} 
+                              onClick={() => startEdit(record.id, record.accountName)} 
+                              title={t('mfaVault.clickToEdit', '点击修改账号名')}
+                            >
+                              <span style={{ maxWidth: '200px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'inline-block', verticalAlign: 'middle' }}>{record.accountName}</span>
+                              <Edit2 size={12} style={{ color: 'var(--text-tertiary)' }} />
+                            </div>
+                          )}
                         </td>
                         <td>
                           <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>