hicccc77/WeFlow
1
0
Fork 0
mirror of https://github.com/hicccc77/WeFlow.git synced 2026-03-25 15:25:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: 一些更新

Browse Source
This commit is contained in:
cc
2026-01-29 20:41:12 +08:00
parent ff1bc279f2
commit b9fa0cc215
17 changed files with 875 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/pages/AgreementPage.tsx
View File

@@ -9,40 +9,40 @@ function AgreementPage() {
<div className="agreement-content">
{/* 协议内容 - 请替换为完整的协议文本 */}
<h2>用户协议</h2>
<h3>一、总则</h3>
<p>欢迎使用WeFlow（WeFlow）软件。请在使用本软件前仔细阅读本协议。一旦您开始使用本软件，即表示您已充分理解并同意本协议的全部内容。</p>
<p>欢迎使用WeFlow（WeFlow）软件。请在使用本软件前仔细阅读本协议。一旦你开始使用本软件，即表示你已充分理解并同意本协议的全部内容。</p>
<h3>二、软件说明</h3>
<p>WeFlow是一款本地化的微信聊天记录查看与分析工具，所有数据处理均在用户本地设备上完成。</p>
<h3>三、使用条款</h3>
<p>1. 本软件仅供个人学习、研究使用，严禁用于任何商业用途或非法目的。</p>
<p>2. 用户应确保所查看、分析的数据为本人所有或已获得合法授权。</p>
<p>3. 用户不得利用本软件侵犯他人隐私、窃取他人信息或从事其他违法活动。</p>
<h3>四、免责声明</h3>
<p>1. 本软件按"现状"提供，开发者不对软件的适用性、可靠性、准确性作任何明示或暗示的保证。</p>
<p>2. 因使用或无法使用本软件而产生的任何直接、间接、偶然、特殊或后果性损害，开发者不承担任何责任。</p>
<p>3. 用户因违反本协议或相关法律法规而产生的一切后果由用户自行承担。</p>
<h3>五、知识产权</h3>
<p>本软件的所有权、知识产权及相关权益均归开发者所有。未经授权，不得复制、修改、传播本软件。</p>
<h2>隐私政策</h2>
<h3>一、数据收集</h3>
<p>本软件不收集、不上传、不存储任何用户个人信息或聊天数据。所有数据处理均在本地完成。</p>
<h3>二、数据安全</h3>
<p>您的聊天记录和个人数据完全存储在您的本地设备上，本软件不会将任何数据传输至外部服务器。</p>
<p>你的聊天记录和个人数据完全存储在你的本地设备上，本软件不会将任何数据传输至外部服务器。</p>
<h3>三、网络请求</h3>
<p>本软件仅在检查更新时会访问更新服务器获取版本信息，不涉及任何用户数据的传输。</p>
<h3>四、第三方服务</h3>
<p>本软件不集成任何第三方数据分析、广告或追踪服务。</p>
<p className="agreement-footer-text">最后更新日期：2025年1月</p>
</div>
</div>

4
src/pages/AnalyticsWelcomePage.tsx
View File

@@ -34,8 +34,8 @@ function AnalyticsWelcomePage() {
</div>
<h1>私聊数据分析</h1>
<p>
WeFlow 可以分析您的聊天记录，生成详细的统计报表。<br />
您可以选择加载上次的分析结果（速度快），或者开始新的分析（数据最新）。
WeFlow 可以分析你的聊天记录，生成详细的统计报表。<br />
你可以选择加载上次的分析结果（速度快），或者开始新的分析（数据最新）。
</p>
<div className="action-cards">

110
src/pages/ExportPage.scss
View File

@@ -338,61 +338,33 @@
}
}
.time-options {
display: flex;
flex-direction: column;
gap: 12px;
}
.checkbox-item {
.time-range-picker-item {
display: flex;
align-items: center;
gap: 10px;
justify-content: space-between;
padding: 14px 16px;
cursor: pointer;
font-size: 14px;
color: var(--text-primary);
input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--primary);
cursor: pointer;
}
svg {
color: var(--text-secondary);
}
&.main-toggle {
padding: 12px 16px;
background: var(--bg-secondary);
border-radius: 10px;
}
}
.date-range {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: var(--bg-secondary);
border-radius: 10px;
font-size: 14px;
color: var(--text-primary);
cursor: pointer;
transition: all 0.2s;
transition: background 0.2s;
background: transparent;
&:hover {
background: var(--bg-hover);
}
svg {
color: var(--text-tertiary);
flex-shrink: 0;
.time-picker-info {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--text-primary);
svg {
color: var(--primary);
}
}
span {
flex: 1;
svg {
color: var(--text-tertiary);
}
}
@@ -1184,50 +1156,4 @@
color: var(--text-tertiary);
}
// Switch 开关样式
.switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
flex-shrink: 0;
input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--bg-tertiary);
transition: 0.3s;
border-radius: 24px;
&::before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
}
input:checked+.slider {
background-color: var(--primary);
}
input:checked+.slider::before {
transform: translateX(20px);
}
}
// 全局样式已在 main.scss 中定义

45
src/pages/ExportPage.tsx
View File

@@ -537,21 +537,34 @@ function ExportPage() {
<div className="setting-section">
<h3>时间范围</h3>
<div className="time-options">
<label className="checkbox-item">
<input
type="checkbox"
checked={options.useAllTime}
onChange={e => setOptions({ ...options, useAllTime: e.target.checked })}
/>
<span>导出全部时间</span>
</label>
{!options.useAllTime && options.dateRange && (
<div className="date-range" onClick={() => setShowDatePicker(true)}>
<Calendar size={16} />
<span>{formatDate(options.dateRange.start)} - {formatDate(options.dateRange.end)}</span>
<ChevronDown size={14} />
<p className="setting-subtitle">选择要导出的消息时间区间</p>
<div className="media-options-card">
<div className="media-switch-row">
<div className="media-switch-info">
<span className="media-switch-title">导出全部时间</span>
<span className="media-switch-desc">关闭此项以选择特定的起止日期</span>
</div>
<label className="switch">
<input
type="checkbox"
checked={options.useAllTime}
onChange={e => setOptions({ ...options, useAllTime: e.target.checked })}
/>
<span className="switch-slider"></span>
</label>
</div>
{!options.useAllTime && options.dateRange && (
<>
<div className="media-option-divider"></div>
<div className="time-range-picker-item" onClick={() => setShowDatePicker(true)}>
<div className="time-picker-info">
<Calendar size={16} />
<span>{formatDate(options.dateRange.start)} - {formatDate(options.dateRange.end)}</span>
</div>
<ChevronDown size={14} />
</div>
</>
)}
</div>
</div>
@@ -609,7 +622,7 @@ function ExportPage() {
checked={options.exportMedia}
onChange={e => setOptions({ ...options, exportMedia: e.target.checked })}
/>
<span className="slider"></span>
<span className="switch-slider"></span>
</label>
</div>
@@ -689,7 +702,7 @@ function ExportPage() {
checked={options.exportAvatars}
onChange={e => setOptions({ ...options, exportAvatars: e.target.checked })}
/>
<span className="slider"></span>
<span className="switch-slider"></span>
</label>
</div>
</div>

51
src/pages/SettingsPage.scss
View File

@@ -603,54 +603,7 @@
}
}
.switch {
position: relative;
width: 46px;
height: 24px;
display: inline-block;
user-select: none;
}
.switch-input {
opacity: 0;
width: 0;
height: 0;
}
.switch-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 999px;
transition: all 0.2s ease;
}
.switch-slider::before {
content: '';
position: absolute;
height: 18px;
width: 18px;
left: 3px;
top: 2px;
background: var(--text-tertiary);
border-radius: 50%;
transition: all 0.2s ease;
}
.switch-input:checked+.switch-slider {
background: var(--primary);
border-color: var(--primary);
}
.switch-input:checked+.switch-slider::before {
transform: translateX(22px);
background: #ffffff;
}
// 全局样式已在 main.scss 中定义
.log-actions {
display: flex;
@@ -1311,4 +1264,4 @@
border-top: 1px solid var(--border-primary);
display: flex;
justify-content: flex-end;
}
}

208
src/pages/SettingsPage.tsx
View File

@@ -8,11 +8,12 @@ import * as configService from '../services/config'
import {
Eye, EyeOff, FolderSearch, FolderOpen, Search, Copy,
RotateCcw, Trash2, Save, Plug, Check, Sun, Moon,
Palette, Database, Download, HardDrive, Info, RefreshCw, ChevronDown, Mic
Palette, Database, Download, HardDrive, Info, RefreshCw, ChevronDown, Mic,
ShieldCheck, Fingerprint, Lock, KeyRound
} from 'lucide-react'
import './SettingsPage.scss'
type SettingsTab = 'appearance' | 'database' | 'whisper' | 'export' | 'cache' | 'about'
type SettingsTab = 'appearance' | 'database' | 'whisper' | 'export' | 'cache' | 'security' | 'about'
const tabs: { id: SettingsTab; label: string; icon: React.ElementType }[] = [
{ id: 'appearance', label: '外观', icon: Palette },
@@ -20,6 +21,7 @@ const tabs: { id: SettingsTab; label: string; icon: React.ElementType }[] = [
{ id: 'whisper', label: '语音识别模型', icon: Mic },
{ id: 'export', label: '导出', icon: Download },
{ id: 'cache', label: '缓存', icon: HardDrive },
{ id: 'security', label: '安全', icon: ShieldCheck },
{ id: 'about', label: '关于', icon: Info }
]
@@ -95,8 +97,31 @@ function SettingsPage() {
const [isClearingImageCache, setIsClearingImageCache] = useState(false)
const [isClearingAllCache, setIsClearingAllCache] = useState(false)
// 安全设置 state
const [authEnabled, setAuthEnabled] = useState(false)
const [authUseHello, setAuthUseHello] = useState(false)
const [helloAvailable, setHelloAvailable] = useState(false)
const [newPassword, setNewPassword] = useState('')
const [confirmPassword, setConfirmPassword] = useState('')
const [isSettingHello, setIsSettingHello] = useState(false)
const isClearingCache = isClearingAnalyticsCache || isClearingImageCache || isClearingAllCache
// 检查 Hello 可用性
useEffect(() => {
if (window.PublicKeyCredential) {
void PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable().then(setHelloAvailable)
}
}, [])
async function sha256(message: string) {
const msgBuffer = new TextEncoder().encode(message)
const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer)
const hashArray = Array.from(new Uint8Array(hashBuffer))
const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('')
return hashHex
}
useEffect(() => {
loadConfig()
loadAppVersion()
@@ -154,6 +179,11 @@ function SettingsPage() {
const savedExportDefaultExcelCompactColumns = await configService.getExportDefaultExcelCompactColumns()
const savedExportDefaultConcurrency = await configService.getExportDefaultConcurrency()
const savedAuthEnabled = await configService.getAuthEnabled()
const savedAuthUseHello = await configService.getAuthUseHello()
setAuthEnabled(savedAuthEnabled)
setAuthUseHello(savedAuthUseHello)
if (savedPath) setDbPath(savedPath)
if (savedWxid) setWxid(savedWxid)
if (savedCachePath) setCachePath(savedCachePath)
@@ -191,7 +221,7 @@ function SettingsPage() {
if (savedWhisperModelDir) setWhisperModelDir(savedWhisperModelDir)
} catch (e) {
} catch (e: any) {
console.error('加载配置失败:', e)
}
}
@@ -217,7 +247,7 @@ function SettingsPage() {
try {
const version = await window.electronAPI.app.getVersion()
setAppVersion(version)
} catch (e) {
} catch (e: any) {
console.error('获取版本号失败:', e)
}
}
@@ -256,7 +286,7 @@ function SettingsPage() {
} else {
showMessage('当前已是最新版', true)
}
} catch (e) {
} catch (e: any) {
showMessage(`检查更新失败: ${e}`, false)
} finally {
setIsCheckingUpdate(false)
@@ -271,7 +301,7 @@ function SettingsPage() {
try {
showMessage('正在下载更新...', true)
await window.electronAPI.app.downloadAndInstall()
} catch (e) {
} catch (e: any) {
showMessage(`更新失败: ${e}`, false)
setIsDownloading(false)
}
@@ -366,7 +396,7 @@ function SettingsPage() {
if (!result.success && result.error) {
showMessage(result.error, false)
}
} catch (e) {
} catch (e: any) {
showMessage(`切换账号后重新连接失败: ${e}`, false)
setDbConnected(false)
}
@@ -403,7 +433,7 @@ function SettingsPage() {
} else {
showMessage(result.error || '未能自动检测到数据库目录', false)
}
} catch (e) {
} catch (e: any) {
showMessage(`自动检测失败: ${e}`, false)
} finally {
setIsDetectingPath(false)
@@ -417,7 +447,7 @@ function SettingsPage() {
setDbPath(result.filePaths[0])
showMessage('已选择数据库目录', true)
}
} catch (e) {
} catch (e: any) {
showMessage('选择目录失败', false)
}
}
@@ -445,7 +475,7 @@ function SettingsPage() {
} else {
if (!silent) showMessage('未检测到账号目录，请检查路径', false)
}
} catch (e) {
} catch (e: any) {
if (!silent) showMessage(`扫描失败: ${e}`, false)
}
}
@@ -461,7 +491,7 @@ function SettingsPage() {
setCachePath(result.filePaths[0])
showMessage('已选择缓存目录', true)
}
} catch (e) {
} catch (e: any) {
showMessage('选择目录失败', false)
}
}
@@ -477,7 +507,7 @@ function SettingsPage() {
await configService.setWhisperModelDir(dir)
showMessage('已选择 Whisper 模型目录', true)
}
} catch (e) {
} catch (e: any) {
showMessage('选择目录失败', false)
}
}
@@ -501,7 +531,7 @@ function SettingsPage() {
} else {
showMessage(result.error || '模型下载失败', false)
}
} catch (e) {
} catch (e: any) {
showMessage(`模型下载失败: ${e}`, false)
} finally {
setIsWhisperDownloading(false)
@@ -533,7 +563,7 @@ function SettingsPage() {
showMessage(result.error || '自动获取密钥失败', false)
}
}
} catch (e) {
} catch (e: any) {
showMessage(`自动获取密钥失败: ${e}`, false)
} finally {
setIsFetchingDbKey(false)
@@ -566,7 +596,7 @@ function SettingsPage() {
} else {
showMessage(result.error || '自动获取图片密钥失败', false)
}
} catch (e) {
} catch (e: any) {
showMessage(`自动获取图片密钥失败: ${e}`, false)
} finally {
setIsFetchingImageKey(false)
@@ -589,7 +619,7 @@ function SettingsPage() {
} else {
showMessage(result.error || '连接测试失败', false)
}
} catch (e) {
} catch (e: any) {
showMessage(`连接测试失败: ${e}`, false)
} finally {
setIsTesting(false)
@@ -624,8 +654,14 @@ function SettingsPage() {
await configService.setOnboardingDone(true)
// 保存按钮只负责持久化配置，不做连接测试/重连，避免影响聊天页的活动连接
// 保存安全配置
// 注意：这里只处理开关，密码修改是实时生效的（在 renderSecurityTab 里处理）
await configService.setAuthEnabled(authEnabled)
await configService.setAuthUseHello(authUseHello)
showMessage('配置保存成功', true)
} catch (e) {
} catch (e: any) {
showMessage(`保存配置失败: ${e}`, false)
} finally {
setIsLoadingState(false)
@@ -657,7 +693,7 @@ function SettingsPage() {
setIsWhisperDownloading(false)
setDbConnected(false)
await window.electronAPI.window.openOnboardingWindow()
} catch (e) {
} catch (e: any) {
showMessage(`清除配置失败: ${e}`, false)
} finally {
setIsLoadingState(false)
@@ -669,7 +705,7 @@ function SettingsPage() {
try {
const logPath = await window.electronAPI.log.getPath()
await window.electronAPI.shell.openPath(logPath)
} catch (e) {
} catch (e: any) {
showMessage(`打开日志失败: ${e}`, false)
}
}
@@ -683,7 +719,7 @@ function SettingsPage() {
}
await navigator.clipboard.writeText(result.content || '')
showMessage('日志已复制到剪贴板', true)
} catch (e) {
} catch (e: any) {
showMessage(`复制日志失败: ${e}`, false)
}
}
@@ -699,7 +735,7 @@ function SettingsPage() {
} else {
showMessage(`清除分析缓存失败: ${result.error || '未知错误'}`, false)
}
} catch (e) {
} catch (e: any) {
showMessage(`清除分析缓存失败: ${e}`, false)
} finally {
setIsClearingAnalyticsCache(false)
@@ -716,7 +752,7 @@ function SettingsPage() {
} else {
showMessage(`清除图片缓存失败: ${result.error || '未知错误'}`, false)
}
} catch (e) {
} catch (e: any) {
showMessage(`清除图片缓存失败: ${e}`, false)
} finally {
setIsClearingImageCache(false)
@@ -734,7 +770,7 @@ function SettingsPage() {
} else {
showMessage(`清除所有缓存失败: ${result.error || '未知错误'}`, false)
}
} catch (e) {
} catch (e: any) {
showMessage(`清除所有缓存失败: ${e}`, false)
} finally {
setIsClearingAllCache(false)
@@ -797,7 +833,7 @@ function SettingsPage() {
<div className="form-group">
<label>数据库根目录</label>
<span className="form-hint">xwechat_files 目录</span>
<span className="form-hint" style={{ color: '#ff6b6b' }}>⚠️ 目录路径不可包含中文，如有中文请去微信-设置-存储位置点击更改，迁移至全英文目录</span>
<span className="form-hint" style={{ color: '#ff6b6b' }}> 目录路径不可包含中文，如有中文请去微信-设置-存储位置点击更改，迁移至全英文目录</span>
<input type="text" placeholder="例如: C:\Users\xxx\Documents\xwechat_files" value={dbPath} onChange={(e) => setDbPath(e.target.value)} />
<div className="btn-row">
<button className="btn btn-primary" onClick={handleAutoDetectPath} disabled={isDetectingPath}>
@@ -1210,6 +1246,129 @@ function SettingsPage() {
</div>
)
const handleSetupHello = async () => {
setIsSettingHello(true)
try {
const challenge = new Uint8Array(32)
window.crypto.getRandomValues(challenge)
const credential = await navigator.credentials.create({
publicKey: {
challenge,
rp: { name: 'WeFlow', id: window.location.hostname },
user: { id: new Uint8Array([1]), name: 'user', displayName: 'User' },
pubKeyCredParams: [{ alg: -7, type: 'public-key' }],
authenticatorSelection: { userVerification: 'required' },
timeout: 60000
}
})
if (credential) {
setAuthUseHello(true)
await configService.setAuthUseHello(true)
showMessage('Windows Hello 设置成功', true)
}
} catch (e: any) {
if (e.name !== 'NotAllowedError') {
showMessage(`Windows Hello 设置失败: ${e.message}`, false)
}
} finally {
setIsSettingHello(false)
}
}
const handleUpdatePassword = async () => {
if (!newPassword || newPassword !== confirmPassword) {
showMessage('两次密码不一致', false)
return
}
// 简单的保存逻辑，实际上应该先验证旧密码，但为了简化流程，这里直接允许覆盖
// 因为能进入设置页面说明已经解锁了
try {
const hash = await sha256(newPassword)
await configService.setAuthPassword(hash)
await configService.setAuthEnabled(true)
setAuthEnabled(true)
setNewPassword('')
setConfirmPassword('')
showMessage('密码已更新', true)
} catch (e: any) {
showMessage('密码更新失败', false)
}
}
const renderSecurityTab = () => (
<div className="tab-content">
<div className="form-group">
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div>
<label>启用应用锁</label>
<span className="form-hint">每次启动应用时需要验证密码</span>
</div>
<label className="switch">
<input type="checkbox" checked={authEnabled} onChange={(e) => setAuthEnabled(e.target.checked)} />
<span className="switch-slider" />
</label>
</div>
</div>
<div className="divider" />
<div className="form-group">
<label>重置密码</label>
<span className="form-hint">设置新的启动密码</span>
<div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 10 }}>
<input
type="password"
className="field-input"
placeholder="新密码"
value={newPassword}
onChange={e => setNewPassword(e.target.value)}
/>
<div style={{ display: 'flex', gap: 10 }}>
<input
type="password"
className="field-input"
placeholder="确认新密码"
value={confirmPassword}
onChange={e => setConfirmPassword(e.target.value)}
style={{ flex: 1 }}
/>
<button className="btn btn-primary" onClick={handleUpdatePassword} disabled={!newPassword}>更新</button>
</div>
</div>
</div>
<div className="divider" />
<div className="form-group">
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div>
<label>Windows Hello</label>
<span className="form-hint">使用面容、指纹快速解锁</span>
{!helloAvailable && <div className="form-hint warning" style={{ color: '#ff4d4f' }}> 当前设备不支持 Windows Hello</div>}
</div>
<div>
{authUseHello ? (
<button className="btn btn-secondary btn-sm" onClick={() => setAuthUseHello(false)}>关闭</button>
) : (
<button
className="btn btn-secondary btn-sm"
onClick={handleSetupHello}
disabled={!helloAvailable || isSettingHello}
>
{isSettingHello ? '设置中...' : '开启与设置'}
</button>
)}
</div>
</div>
</div>
</div>
)
const renderAboutTab = () => (
<div className="tab-content about-tab">
<div className="about-card">
@@ -1321,6 +1480,7 @@ function SettingsPage() {
{activeTab === 'whisper' && renderWhisperTab()}
{activeTab === 'export' && renderExportTab()}
{activeTab === 'cache' && renderCacheTab()}
{activeTab === 'security' && renderSecurityTab()}
{activeTab === 'about' && renderAboutTab()}
</div>

16
src/pages/WelcomePage.scss
View File

@@ -112,7 +112,6 @@
-webkit-app-region: drag;
[data-mode="dark"] & {
background: #18181b;
border-right-color: rgba(255, 255, 255, 0.08);
}
}
@@ -152,7 +151,7 @@
margin-top: 2px;
[data-mode="dark"] .welcome-sidebar & {
color: rgba(255, 255, 255, 0.45);
color: rgba(255, 255, 255, 0.6); // 稍微调亮一点
}
}
@@ -188,7 +187,7 @@
border-radius: 12px;
[data-mode="dark"] .welcome-sidebar & {
opacity: 0.7;
opacity: 0.75; // 整体调亮一点，原来是0.7
}
&.active,
@@ -236,8 +235,8 @@
transition: all 0.3s ease;
[data-mode="dark"] .welcome-sidebar & {
border-color: rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.2); // 稍微调亮边框
background: rgba(255, 255, 255, 0.05);
}
.nav-item.active & {
@@ -281,7 +280,7 @@
color: #1a1a1a;
[data-mode="dark"] .welcome-sidebar & {
color: #ffffff;
color: rgba(255, 255, 255, 0.9); // 提高非活动标题亮度
}
.nav-item.active & {
@@ -299,7 +298,8 @@
}
.nav-item.active & {
color: rgba(255, 255, 255, 0.85);
color: #ffffff; // 活动描述使用纯白
font-weight: 500;
}
}
@@ -315,7 +315,7 @@
border-top: 1px dashed var(--border-color);
[data-mode="dark"] .welcome-sidebar & {
color: rgba(255, 255, 255, 0.5);
color: rgba(255, 255, 255, 0.65); // 提高底部文字亮度
border-top-color: rgba(255, 255, 255, 0.1);
}

150
src/pages/WelcomePage.tsx
View File

@@ -15,7 +15,8 @@ const steps = [
{ id: 'db', title: '数据库目录', desc: '定位 xwechat_files 目录' },
{ id: 'cache', title: '缓存目录', desc: '设置本地缓存存储位置（可选）' },
{ id: 'key', title: '解密密钥', desc: '获取密钥与自动识别账号' },
{ id: 'image', title: '图片密钥', desc: '获取 XOR 与 AES 密钥' }
{ id: 'image', title: '图片密钥', desc: '获取 XOR 与 AES 密钥' },
{ id: 'security', title: '安全防护', desc: '保护你的数据' }
]
interface WelcomePageProps {
@@ -46,6 +47,64 @@ function WelcomePage({ standalone = false }: WelcomePageProps) {
const [imageKeyStatus, setImageKeyStatus] = useState('')
const [isManualStartPrompt, setIsManualStartPrompt] = useState(false)
// 安全相关 state
const [enableAuth, setEnableAuth] = useState(false)
const [authPassword, setAuthPassword] = useState('')
const [authConfirmPassword, setAuthConfirmPassword] = useState('')
const [enableHello, setEnableHello] = useState(false)
const [helloAvailable, setHelloAvailable] = useState(false)
const [isSettingHello, setIsSettingHello] = useState(false)
// 检查 Hello 可用性
useEffect(() => {
if (window.PublicKeyCredential) {
void PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable().then(setHelloAvailable)
}
}, [])
async function sha256(message: string) {
const msgBuffer = new TextEncoder().encode(message)
const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer)
const hashArray = Array.from(new Uint8Array(hashBuffer))
const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('')
return hashHex
}
const handleSetupHello = async () => {
setIsSettingHello(true)
try {
// 注册凭证 (WebAuthn)
const challenge = new Uint8Array(32)
window.crypto.getRandomValues(challenge)
const credential = await navigator.credentials.create({
publicKey: {
challenge,
rp: { name: 'WeFlow', id: window.location.hostname },
user: {
id: new Uint8Array([1]),
name: 'user',
displayName: 'User'
},
pubKeyCredParams: [{ alg: -7, type: 'public-key' }],
authenticatorSelection: { userVerification: 'required' },
timeout: 60000
}
})
if (credential) {
setEnableHello(true)
// 成功提示?
}
} catch (e: any) {
if (e.name !== 'NotAllowedError') {
setError('Windows Hello 设置失败: ' + e.message)
}
} finally {
setIsSettingHello(false)
}
}
useEffect(() => {
const removeDb = window.electronAPI.key.onDbKeyStatus((payload) => {
setDbKeyStatus(payload.message)
@@ -227,6 +286,12 @@ function WelcomePage({ standalone = false }: WelcomePageProps) {
if (currentStep.id === 'cache') return true
if (currentStep.id === 'key') return decryptKey.length === 64 && Boolean(wxid)
if (currentStep.id === 'image') return true
if (currentStep.id === 'security') {
if (enableAuth) {
return authPassword.length > 0 && authPassword === authConfirmPassword
}
return true
}
return false
}
@@ -277,6 +342,15 @@ function WelcomePage({ standalone = false }: WelcomePageProps) {
imageXorKey: typeof parsedXorKey === 'number' && !Number.isNaN(parsedXorKey) ? parsedXorKey : 0,
imageAesKey
})
// 保存安全配置
if (enableAuth && authPassword) {
const hash = await sha256(authPassword)
await configService.setAuthEnabled(true)
await configService.setAuthPassword(hash)
await configService.setAuthUseHello(enableHello)
}
await configService.setOnboardingDone(true)
setDbConnected(true, dbPath)
@@ -450,7 +524,7 @@ function WelcomePage({ standalone = false }: WelcomePageProps) {
<div className="field-hint">请选择微信-设置-存储位置对应的目录</div>
<div className="field-hint warning">
⚠️ 目录路径不可包含中文，如有中文请先在微信中迁移至全英文目录
目录路径不可包含中文，如有中文请先在微信中迁移至全英文目录
</div>
</div>
)}
@@ -525,6 +599,74 @@ function WelcomePage({ standalone = false }: WelcomePageProps) {
</div>
)}
{currentStep.id === 'security' && (
<div className="form-group">
<div className="security-toggle-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
<div className="toggle-info">
<label className="field-label" style={{ marginBottom: 0 }}>启用应用锁</label>
<div className="field-hint">每次启动应用时需要验证密码</div>
</div>
<label className="switch">
<input type="checkbox" checked={enableAuth} onChange={e => setEnableAuth(e.target.checked)} />
<span className="switch-slider" />
</label>
</div>
{enableAuth && (
<div className="security-settings" style={{ marginTop: 20, padding: 16, backgroundColor: 'var(--bg-secondary)', borderRadius: 8 }}>
<div className="form-group">
<label className="field-label">应用密码</label>
<input
type="password"
className="field-input"
placeholder="请输入密码"
value={authPassword}
onChange={e => setAuthPassword(e.target.value)}
/>
</div>
<div className="form-group">
<label className="field-label">确认密码</label>
<input
type="password"
className="field-input"
placeholder="请再次输入密码"
value={authConfirmPassword}
onChange={e => setAuthConfirmPassword(e.target.value)}
/>
{authPassword && authConfirmPassword && authPassword !== authConfirmPassword && (
<div className="error-text" style={{ color: '#ff4d4f', fontSize: 12, marginTop: 4 }}>两次密码不一致</div>
)}
</div>
<div className="divider" style={{ margin: '20px 0', borderTop: '1px solid var(--border-color)' }}></div>
<div className="security-toggle-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div className="toggle-info">
<label className="field-label" style={{ marginBottom: 0 }}>Windows Hello</label>
<div className="field-hint">使用面容、指纹或 PIN 码快速解锁</div>
</div>
{enableHello ? (
<div style={{ color: '#52c41a', display: 'flex', alignItems: 'center', gap: 6 }}>
<CheckCircle2 size={16} /> 已开启
<button className="btn btn-ghost btn-sm" onClick={() => setEnableHello(false)} style={{ padding: '2px 8px', height: 24, fontSize: 12 }}>关闭</button>
</div>
) : (
<button
className="btn btn-secondary btn-sm"
disabled={!helloAvailable || isSettingHello}
onClick={handleSetupHello}
>
{isSettingHello ? '设置中...' : (helloAvailable ? '点击开启' : '不可用')}
</button>
)}
</div>
{!helloAvailable && <div className="field-hint warning"> 当前设备不支持 Windows Hello 或未设置 PIN 码</div>}
</div>
)}
</div>
)}
{currentStep.id === 'image' && (
<div className="form-group">
<div className="grid-2">
@@ -564,8 +706,8 @@ function WelcomePage({ standalone = false }: WelcomePageProps) {
{currentStep.id === 'intro' && (
<div className="intro-footer">
<p>接下来的几个步骤将引导您连接本地微信数据库。</p>
<p>WeFlow 需要访问您的本地数据文件以提供分析与导出功能。</p>
<p>接下来的几个步骤将引导你连接本地微信数据库。</p>
<p>WeFlow 需要访问你的本地数据文件以提供分析与导出功能。</p>
</div>
)}