├── pnpm-workspace.yaml ├── packages ├── wechat-db-manager │ ├── src │ │ ├── vite-env.d.ts │ │ ├── main.tsx │ │ ├── App.css │ │ ├── api.ts │ │ ├── store │ │ │ └── atoms.ts │ │ ├── utils │ │ │ ├── layoutUtils.ts │ │ │ ├── contactParser.tsx │ │ │ ├── contactParser.ts │ │ │ ├── PerformanceOptimizer.ts │ │ │ └── wechatTableMatcher.ts │ │ ├── hooks │ │ │ ├── useTableMapping.ts │ │ │ ├── useAutoConnect.ts │ │ │ └── useChatState.ts │ │ ├── components │ │ │ ├── StatusBar.tsx │ │ │ ├── Navigation.tsx │ │ │ ├── ContextPanel.tsx │ │ │ ├── DatabaseInfo.tsx │ │ │ ├── AutoConnectIndicator.tsx │ │ │ ├── WelcomeGuide.tsx │ │ │ ├── TableList.tsx │ │ │ ├── Avatar.tsx │ │ │ ├── FilePathInput.tsx │ │ │ └── FileManager.tsx │ │ ├── types.ts │ │ ├── assets │ │ │ └── react.svg │ │ ├── App.tsx │ │ ├── services │ │ │ └── autoConnectService.ts │ │ └── pages │ │ │ └── DatabasePage.tsx │ ├── src-tauri │ │ ├── build.rs │ │ ├── icons │ │ │ ├── icon.ico │ │ │ ├── icon.png │ │ │ ├── 32x32.png │ │ │ ├── icon.icns │ │ │ ├── 128x128.png │ │ │ ├── StoreLogo.png │ │ │ ├── 128x128@2x.png │ │ │ ├── Square30x30Logo.png │ │ │ ├── Square44x44Logo.png │ │ │ ├── Square71x71Logo.png │ │ │ ├── Square89x89Logo.png │ │ │ ├── Square107x107Logo.png │ │ │ ├── Square142x142Logo.png │ │ │ ├── Square150x150Logo.png │ │ │ ├── Square284x284Logo.png │ │ │ └── Square310x310Logo.png │ │ ├── .gitignore │ │ ├── src │ │ │ ├── main.rs │ │ │ └── lib.rs │ │ ├── capabilities │ │ │ └── default.json │ │ ├── tauri.conf.json │ │ └── Cargo.toml │ ├── .vscode │ │ └── extensions.json │ ├── postcss.config.js │ ├── tailwind.config.js │ ├── .gitignore │ ├── index.html │ ├── QUICK-START.md │ ├── vite.config.ts │ ├── public │ │ ├── vite.svg │ │ └── tauri.svg │ ├── DEVELOPMENT.md │ ├── DEBUG-GUIDE.md │ ├── PERFORMANCE-IMPROVEMENTS.md │ ├── CHAT-FEATURE.md │ ├── USAGE.md │ ├── IMPLEMENTATION-SUMMARY.md │ ├── TABLE-MAPPING-FIX.md │ ├── CHAT-LOADING-FIX.md │ ├── IPAD-STYLE-REDESIGN.md │ ├── THREE-COLUMN-CONTACTS.md │ └── README.md └── scripts │ ├── pnpm-lock.yaml │ ├── package.json │ └── keys2toml.ts ├── .gitmodules ├── assets ├── sqlcipher-track.png ├── wechat-version.png └── wechat-versions.png ├── pnpm-lock.yaml ├── package.json ├── jest.config.js ├── __tests__ └── sqlcipher-real.test.ts ├── .gitignore ├── core └── dbcracker.d ├── CLAUDE.md ├── readme.md └── docs └── config-sqlcipher.bak.md /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'packages/*' -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /packages/wechat-db-manager/src-tauri/build.rs: -------------------------------------------------------------------------------- 1 | fn main() { 2 | tauri_build::build() 3 | } 4 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "sqlcipher"] 2 | path = sqlcipher 3 | url = https://github.com/sqlcipher/sqlcipher 4 | -------------------------------------------------------------------------------- /assets/sqlcipher-track.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkShawn2020/wechat-dbcracker/HEAD/assets/sqlcipher-track.png -------------------------------------------------------------------------------- /assets/wechat-version.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkShawn2020/wechat-dbcracker/HEAD/assets/wechat-version.png -------------------------------------------------------------------------------- /assets/wechat-versions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkShawn2020/wechat-dbcracker/HEAD/assets/wechat-versions.png -------------------------------------------------------------------------------- /packages/wechat-db-manager/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["tauri-apps.tauri-vscode", "rust-lang.rust-analyzer"] 3 | } 4 | -------------------------------------------------------------------------------- /packages/wechat-db-manager/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } -------------------------------------------------------------------------------- /packages/wechat-db-manager/src-tauri/icons/icon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkShawn2020/wechat-dbcracker/HEAD/packages/wechat-db-manager/src-tauri/icons/icon.ico -------------------------------------------------------------------------------- /packages/wechat-db-manager/src-tauri/icons/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkShawn2020/wechat-dbcracker/HEAD/packages/wechat-db-manager/src-tauri/icons/icon.png -------------------------------------------------------------------------------- /packages/wechat-db-manager/src-tauri/icons/32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkShawn2020/wechat-dbcracker/HEAD/packages/wechat-db-manager/src-tauri/icons/32x32.png -------------------------------------------------------------------------------- /packages/wechat-db-manager/src-tauri/icons/icon.icns: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkShawn2020/wechat-dbcracker/HEAD/packages/wechat-db-manager/src-tauri/icons/icon.icns -------------------------------------------------------------------------------- /packages/wechat-db-manager/src-tauri/icons/128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkShawn2020/wechat-dbcracker/HEAD/packages/wechat-db-manager/src-tauri/icons/128x128.png -------------------------------------------------------------------------------- /packages/wechat-db-manager/src-tauri/icons/StoreLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkShawn2020/wechat-dbcracker/HEAD/packages/wechat-db-manager/src-tauri/icons/StoreLogo.png -------------------------------------------------------------------------------- /packages/wechat-db-manager/src-tauri/icons/128x128@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkShawn2020/wechat-dbcracker/HEAD/packages/wechat-db-manager/src-tauri/icons/128x128@2x.png -------------------------------------------------------------------------------- /packages/scripts/pnpm-lock.yaml: -------------------------------------------------------------------------------- 1 | lockfileVersion: '9.0' 2 | 3 | settings: 4 | autoInstallPeers: true 5 | excludeLinksFromLockfile: false 6 | 7 | importers: 8 | 9 | .: {} 10 | -------------------------------------------------------------------------------- /packages/wechat-db-manager/src-tauri/icons/Square30x30Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkShawn2020/wechat-dbcracker/HEAD/packages/wechat-db-manager/src-tauri/icons/Square30x30Logo.png -------------------------------------------------------------------------------- /packages/wechat-db-manager/src-tauri/icons/Square44x44Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkShawn2020/wechat-dbcracker/HEAD/packages/wechat-db-manager/src-tauri/icons/Square44x44Logo.png -------------------------------------------------------------------------------- /packages/wechat-db-manager/src-tauri/icons/Square71x71Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkShawn2020/wechat-dbcracker/HEAD/packages/wechat-db-manager/src-tauri/icons/Square71x71Logo.png -------------------------------------------------------------------------------- /packages/wechat-db-manager/src-tauri/icons/Square89x89Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkShawn2020/wechat-dbcracker/HEAD/packages/wechat-db-manager/src-tauri/icons/Square89x89Logo.png -------------------------------------------------------------------------------- /pnpm-lock.yaml: -------------------------------------------------------------------------------- 1 | lockfileVersion: '9.0' 2 | 3 | settings: 4 | autoInstallPeers: true 5 | excludeLinksFromLockfile: false 6 | 7 | importers: 8 | 9 | packages/scripts: {} 10 | -------------------------------------------------------------------------------- /packages/wechat-db-manager/src-tauri/icons/Square107x107Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkShawn2020/wechat-dbcracker/HEAD/packages/wechat-db-manager/src-tauri/icons/Square107x107Logo.png -------------------------------------------------------------------------------- /packages/wechat-db-manager/src-tauri/icons/Square142x142Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkShawn2020/wechat-dbcracker/HEAD/packages/wechat-db-manager/src-tauri/icons/Square142x142Logo.png -------------------------------------------------------------------------------- /packages/wechat-db-manager/src-tauri/icons/Square150x150Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkShawn2020/wechat-dbcracker/HEAD/packages/wechat-db-manager/src-tauri/icons/Square150x150Logo.png -------------------------------------------------------------------------------- /packages/wechat-db-manager/src-tauri/icons/Square284x284Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkShawn2020/wechat-dbcracker/HEAD/packages/wechat-db-manager/src-tauri/icons/Square284x284Logo.png -------------------------------------------------------------------------------- /packages/wechat-db-manager/src-tauri/icons/Square310x310Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarkShawn2020/wechat-dbcracker/HEAD/packages/wechat-db-manager/src-tauri/icons/Square310x310Logo.png -------------------------------------------------------------------------------- /packages/wechat-db-manager/src-tauri/.gitignore: -------------------------------------------------------------------------------- 1 | # Generated by Cargo 2 | # will have compiled files and executables 3 | /target/ 4 | 5 | # Generated by Tauri 6 | # will have schema files for capabilities auto-completion 7 | /gen/schemas 8 | -------------------------------------------------------------------------------- /packages/wechat-db-manager/src-tauri/src/main.rs: -------------------------------------------------------------------------------- 1 | // Prevents additional console window on Windows in release, DO NOT REMOVE!! 2 | #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] 3 | 4 | fn main() { 5 | wechat_db_manager_lib::run() 6 | } 7 | -------------------------------------------------------------------------------- /packages/wechat-db-manager/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{js,ts,jsx,tsx}", 6 | ], 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wechat-dbcracker", 3 | "version": "1.0.1", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "packageManager": "pnpm@10.12.1" 13 | } 14 | -------------------------------------------------------------------------------- /packages/scripts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "scripts", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "convert": "ts-node keys2toml.ts", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC" 13 | } 14 | -------------------------------------------------------------------------------- /packages/wechat-db-manager/src-tauri/capabilities/default.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../gen/schemas/desktop-schema.json", 3 | "identifier": "default", 4 | "description": "Capability for the main window", 5 | "windows": ["main"], 6 | "permissions": [ 7 | "core:default", 8 | "opener:default", 9 | "dialog:default" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('ts-jest').JestConfigWithTsJest} */ 2 | module.exports = { 3 | preset: 'ts-jest', 4 | testEnvironment: 'node', 5 | roots: [''], 6 | transform: { 7 | '^.+\\.tsx?$': 'ts-jest', 8 | }, 9 | testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$', 10 | moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], 11 | }; 12 | -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import {Provider} from 'jotai'; 4 | import App from "./App"; 5 | 6 | ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( 7 | 8 | 9 | 10 | 11 | , 12 | ); -------------------------------------------------------------------------------- /packages/wechat-db-manager/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /packages/wechat-db-manager/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tauri + React + Typescript 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/App.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | /* Custom scrollbar */ 6 | ::-webkit-scrollbar { 7 | width: 6px; 8 | } 9 | 10 | ::-webkit-scrollbar-track { 11 | background: #f1f1f1; 12 | } 13 | 14 | ::-webkit-scrollbar-thumb { 15 | background: #c1c1c1; 16 | border-radius: 3px; 17 | } 18 | 19 | ::-webkit-scrollbar-thumb:hover { 20 | background: #a8a8a8; 21 | } 22 | 23 | /* Table styles */ 24 | table { 25 | border-collapse: collapse; 26 | } 27 | 28 | th, td { 29 | border: 1px solid #e5e7eb; 30 | } 31 | 32 | /* Ensure proper text truncation */ 33 | .truncate { 34 | overflow: hidden; 35 | text-overflow: ellipsis; 36 | white-space: nowrap; 37 | } -------------------------------------------------------------------------------- /__tests__/sqlcipher-real.test.ts: -------------------------------------------------------------------------------- 1 | import { SqlCipherReader } from '../wechater/src/main/database/sqlcipher' 2 | 3 | describe('SqlCipherReader', () => { 4 | let reader: SqlCipherReader 5 | 6 | it('should open a database', async () => { 7 | console.log('testing open a database') 8 | reader = new SqlCipherReader() 9 | const dbPath = 10 | '/Users/mark/Library/Containers/com.tencent.xinWeChat/Data/Library/Application Support/com.tencent.xinWeChat/2.0b4.0.9/1d35a41b3adb8b335cc59362ad55ee88/Message/msg_0.db' 11 | const key = 12 | "x'9ab30be49b344171a35c10dc311bb7150005000bdde748c480a805a6ad8c48682eba43dd861d049aabd56b94b510198d'" 13 | await reader.open(dbPath, key) 14 | const data = await reader.readDatabase(dbPath, key) 15 | console.log({ data }) 16 | reader.close() 17 | }) 18 | }) 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .keys* 2 | 3 | # Build outputs 4 | build/ 5 | lib/ 6 | dist-*/ 7 | docs/.vitepress/dist 8 | docs/.vitepress/cache 9 | 10 | # Dependencies 11 | node_modules/ 12 | .pnpm-store/ 13 | .nx/ 14 | .nx/cache 15 | 16 | # Cache and logs 17 | *.log 18 | .cache/ 19 | .temp/ 20 | .rn_temp/ 21 | coverage/ 22 | .eslint.log 23 | 24 | # IDE and OS 25 | .vscode/* 26 | !.vscode/extensions.json 27 | !.vscode/launch.json 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | .idea/ 31 | *.swp 32 | *.swo 33 | .DS_Store 34 | Thumbs.db 35 | 36 | # Environment and local files 37 | .env* 38 | !.env.example 39 | *.local 40 | .env 41 | .env.local 42 | 43 | # TypeScript 44 | *.tsbuildinfo 45 | .turbo/ 46 | tsconfig.tsbuildinfo 47 | 48 | # Project specific 49 | temp/ 50 | out/ 51 | dist/ 52 | __essence__/ 53 | 54 | # Build outputs 55 | build/ 56 | lib/ 57 | dist-*/ 58 | docs/.vitepress/dist 59 | docs/.vitepress/cache 60 | -------------------------------------------------------------------------------- /packages/wechat-db-manager/QUICK-START.md: -------------------------------------------------------------------------------- 1 | # 快速启动指南 2 | 3 | ## 🚀 启动应用 4 | 5 | ```bash 6 | cd packages/wechat-db-manager 7 | pnpm dev 8 | ``` 9 | 10 | ## 📱 新的界面导航 11 | 12 | 应用现在采用iPad风格的底部导航栏，包含四个主要功能： 13 | 14 | ### 1. 📊 概览 (默认页面) 15 | - 数据库统计总览 16 | - 类型分布图表 17 | - 最近修改记录 18 | - 快速操作入口 19 | 20 | ### 2. 💬 聊天记录 21 | - 仿微信界面设计 22 | - 联系人列表 + 聊天记录 23 | - 支持搜索联系人 24 | - 自动聚合多个消息数据库 25 | 26 | ### 3. 🗄️ 数据库 27 | - 数据库管理界面 28 | - 表格数据浏览 29 | - 搜索和过滤功能 30 | - 详细属性面板 31 | 32 | ### 4. ⚙️ 设置 33 | - 密钥文件配置 34 | - 应用偏好设置 35 | - 使用说明和帮助 36 | - 状态监控 37 | 38 | ## 📁 首次使用 39 | 40 | 1. **启动应用** - 运行 `pnpm dev` 41 | 2. **点击设置** - 底部导航栏的齿轮图标 42 | 3. **选择密钥文件** - 点击"选择文件"按钮加载 keys.toml 43 | 4. **探索功能** - 使用底部导航在各个页面间切换 44 | 45 | ## 🎨 新设计特色 46 | 47 | - **iPad风格**: 圆角卡片、充足留白、优雅配色 48 | - **底部导航**: 一目了然的四个主要功能区 49 | - **响应式设计**: 适配不同屏幕尺寸 50 | - **现代交互**: 流畅动画和反馈效果 51 | 52 | ## 🔧 开发模式 53 | 54 | 所有原有功能保持不变，只是重新组织了界面结构，提供更好的用户体验。 -------------------------------------------------------------------------------- /packages/wechat-db-manager/src-tauri/tauri.conf.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://schema.tauri.app/config/2", 3 | "productName": "wechat-db-manager", 4 | "version": "0.1.0", 5 | "identifier": "me.lovpen.wechat-db-manager", 6 | "build": { 7 | "beforeDevCommand": "pnpm dev", 8 | "devUrl": "http://localhost:1420", 9 | "beforeBuildCommand": "pnpm build", 10 | "frontendDist": "../dist" 11 | }, 12 | "app": { 13 | "windows": [ 14 | { 15 | "title": "WeChat DB Manager", 16 | "width": 1200, 17 | "height": 800, 18 | "minWidth": 800, 19 | "minHeight": 600 20 | } 21 | ], 22 | "security": { 23 | "csp": null 24 | } 25 | }, 26 | "bundle": { 27 | "active": true, 28 | "targets": "all", 29 | "icon": [ 30 | "icons/32x32.png", 31 | "icons/128x128.png", 32 | "icons/128x128@2x.png", 33 | "icons/icon.icns", 34 | "icons/icon.ico" 35 | ] 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /packages/wechat-db-manager/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | // @ts-expect-error process is a nodejs global 5 | const host = process.env.TAURI_DEV_HOST; 6 | 7 | // https://vitejs.dev/config/ 8 | export default defineConfig(async () => ({ 9 | plugins: [react()], 10 | 11 | // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build` 12 | // 13 | // 1. prevent vite from obscuring rust errors 14 | clearScreen: false, 15 | // 2. tauri expects a fixed port, fail if that port is not available 16 | server: { 17 | port: 1420, 18 | strictPort: true, 19 | host: host || false, 20 | hmr: host 21 | ? { 22 | protocol: "ws", 23 | host, 24 | port: 1421, 25 | } 26 | : undefined, 27 | watch: { 28 | // 3. tell vite to ignore watching `src-tauri` 29 | ignored: ["**/src-tauri/**"], 30 | }, 31 | }, 32 | })); 33 | -------------------------------------------------------------------------------- /packages/wechat-db-manager/src-tauri/Cargo.toml: -------------------------------------------------------------------------------- 1 | [package] 2 | name = "wechat-db-manager" 3 | version = "0.1.0" 4 | description = "A Tauri App" 5 | authors = ["you"] 6 | edition = "2021" 7 | 8 | # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html 9 | 10 | [lib] 11 | # The `_lib` suffix may seem redundant but it is necessary 12 | # to make the lib name unique and wouldn't conflict with the bin name. 13 | # This seems to be only an issue on Windows, see https://github.com/rust-lang/cargo/issues/8519 14 | name = "wechat_db_manager_lib" 15 | crate-type = ["staticlib", "cdylib", "rlib"] 16 | 17 | [build-dependencies] 18 | tauri-build = { version = "2", features = [] } 19 | 20 | [dependencies] 21 | tauri = { version = "2", features = [] } 22 | tauri-plugin-opener = "2" 23 | tauri-plugin-dialog = "2" 24 | serde = { version = "1", features = ["derive"] } 25 | serde_json = "1" 26 | rusqlite = { version = "0.32", features = ["bundled", "sqlcipher"] } 27 | regex = "1.10" 28 | chrono = { version = "0.4", features = ["serde"] } 29 | thiserror = "1.0" 30 | tokio = { version = "1", features = ["full"] } 31 | 32 | -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/api.ts: -------------------------------------------------------------------------------- 1 | import {invoke} from '@tauri-apps/api/core'; 2 | import {DatabaseInfo, DatabaseManagerApi, QueryResult, TableInfo} from './types'; 3 | 4 | export class DatabaseManager implements DatabaseManagerApi { 5 | async loadKeysFile(path: string): Promise { 6 | return await invoke('load_keys_file', {path}); 7 | } 8 | 9 | async getDatabases(): Promise { 10 | return await invoke('get_databases'); 11 | } 12 | 13 | async connectDatabase(dbId: string): Promise { 14 | return await invoke('connect_database', {dbId}); 15 | } 16 | 17 | async getTables(dbId: string): Promise { 18 | return await invoke('get_tables', {dbId}); 19 | } 20 | 21 | async queryTable(dbId: string, tableName: string, limit?: number, offset?: number): Promise { 22 | return await invoke('query_table', {dbId, tableName, limit, offset}); 23 | } 24 | 25 | async executeQuery(dbId: string, query: string): Promise { 26 | return await invoke('execute_query', {dbId, query}); 27 | } 28 | 29 | async disconnectDatabase(dbId: string): Promise { 30 | return await invoke('disconnect_database', {dbId}); 31 | } 32 | } 33 | 34 | export const dbManager = new DatabaseManager(); -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/store/atoms.ts: -------------------------------------------------------------------------------- 1 | import {atom} from 'jotai'; 2 | import {DatabaseInfo, TableInfo} from '../types'; 3 | 4 | // 配置相关的原子状态 5 | export const keysFilePathAtom = atom(null); 6 | export const lastUsedKeysPathAtom = atom(null); 7 | 8 | // 数据库相关的原子状态 9 | export const databasesAtom = atom([]); 10 | export const selectedDatabaseAtom = atom(null); 11 | export const selectedTableAtom = atom(null); 12 | export const loadingAtom = atom(false); 13 | export const errorAtom = atom(null); 14 | 15 | // 第三列上下文模式 16 | export const thirdColumnModeAtom = atom<'database-properties' | 'table-data'>('database-properties'); 17 | 18 | // 持久化存储的原子状态 19 | export const persistedKeysPathAtom = atom( 20 | (get) => get(keysFilePathAtom), 21 | (get, set, newPath: string | null) => { 22 | set(keysFilePathAtom, newPath); 23 | if (newPath) { 24 | localStorage.setItem('wechat-db-manager-keys-path', newPath); 25 | } else { 26 | localStorage.removeItem('wechat-db-manager-keys-path'); 27 | } 28 | } 29 | ); 30 | 31 | // 初始化持久化状态 32 | export const initializePersistedStateAtom = atom( 33 | null, 34 | (get, set) => { 35 | const savedPath = localStorage.getItem('wechat-db-manager-keys-path'); 36 | if (savedPath) { 37 | set(keysFilePathAtom, savedPath); 38 | } 39 | } 40 | ); -------------------------------------------------------------------------------- /packages/wechat-db-manager/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/wechat-db-manager/DEVELOPMENT.md: -------------------------------------------------------------------------------- 1 | # Development Guide 2 | 3 | ## 新功能说明 4 | 5 | ### 1. 文件选择器 6 | - 用户可以通过点击"Select Keys File"按钮选择 `.keys` 文件 7 | - 选择的文件路径会自动保存到 localStorage 中 8 | - 支持重新加载和更换文件 9 | 10 | ### 2. 状态管理 11 | - 使用 Jotai 进行状态管理 12 | - 持久化存储选择的文件路径 13 | - 全局状态包括： 14 | - `keysFilePathAtom`: 当前选择的文件路径 15 | - `databasesAtom`: 数据库列表 16 | - `loadingAtom`: 加载状态 17 | - `errorAtom`: 错误状态 18 | - `selectedDatabaseAtom`: 选中的数据库 19 | 20 | ### 3. 用户界面改进 21 | - 新增文件选择器组件 22 | - 数据库信息面板显示详细信息 23 | - 状态栏显示当前状态和文件信息 24 | - 更宽的侧边栏（384px）以容纳更多信息 25 | 26 | ### 4. 错误处理 27 | - 友好的错误提示 28 | - 重试机制 29 | - 自动状态恢复 30 | 31 | ## 开发步骤 32 | 33 | 1. **安装依赖** 34 | ```bash 35 | pnpm install 36 | ``` 37 | 38 | 2. **启动开发服务器** 39 | ```bash 40 | pnpm tauri dev 41 | ``` 42 | 43 | 3. **构建生产版本** 44 | ```bash 45 | pnpm tauri build 46 | ``` 47 | 48 | ## 使用说明 49 | 50 | 1. **选择文件** 51 | - 点击"Select Keys File"按钮 52 | - 选择你的 `.keys` 文件 53 | - 应用会自动解析并显示数据库列表 54 | 55 | 2. **浏览数据库** 56 | - 在左侧列表中点击数据库 57 | - 查看数据库详细信息 58 | - 浏览表结构和数据 59 | 60 | 3. **数据操作** 61 | - 执行自定义SQL查询 62 | - 导出数据为CSV格式 63 | - 分页浏览表数据 64 | 65 | ## 故障排除 66 | 67 | ### 常见问题 68 | 69 | 1. **文件选择器无法打开** 70 | - 确保已安装 `tauri-plugin-dialog` 71 | - 检查权限设置 72 | 73 | 2. **数据库连接失败** 74 | - 确认数据库文件路径正确 75 | - 检查文件权限 76 | - 验证密钥格式 77 | 78 | 3. **状态不持久化** 79 | - 检查 localStorage 是否可用 80 | - 确认浏览器设置允许本地存储 81 | 82 | ### 调试技巧 83 | 84 | 1. **查看状态** 85 | - 状态栏显示当前状态 86 | - 控制台输出详细错误信息 87 | 88 | 2. **重置状态** 89 | - 清除浏览器 localStorage 90 | - 重新选择文件 91 | 92 | 3. **性能优化** 93 | - 大数据库使用分页查询 94 | - 限制并发连接数 -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/utils/layoutUtils.ts: -------------------------------------------------------------------------------- 1 | // 数据库页面布局相关的工具函数 2 | 3 | export const PANEL_STORAGE_KEY = 'database-page-layout'; 4 | 5 | export const DEFAULT_PANEL_SIZES = { 6 | database: 30, // 数据库列表列 7 | tables: 25, // 表格列表列 8 | content: 45 // 内容列 9 | }; 10 | 11 | export const PANEL_LIMITS = { 12 | database: {min: 20, max: 50}, 13 | tables: {min: 15, max: 40}, 14 | content: {min: 30, max: 65} 15 | }; 16 | 17 | /** 18 | * 重置面板布局到默认大小 19 | */ 20 | export const resetPanelLayout = (): void => { 21 | // 清除localStorage中的面板布局数据 22 | localStorage.removeItem(PANEL_STORAGE_KEY); 23 | 24 | // 触发页面刷新以应用默认布局 25 | // 注意：这会导致整个页面刷新，在生产环境中可能需要更优雅的方案 26 | window.location.reload(); 27 | }; 28 | 29 | /** 30 | * 获取当前面板布局配置 31 | */ 32 | export const getCurrentPanelLayout = (): { database: number; tables: number; content: number } | null => { 33 | try { 34 | const saved = localStorage.getItem(PANEL_STORAGE_KEY); 35 | if (saved) { 36 | const parsed = JSON.parse(saved); 37 | return { 38 | database: parsed[0] || DEFAULT_PANEL_SIZES.database, 39 | tables: parsed[1] || DEFAULT_PANEL_SIZES.tables, 40 | content: parsed[2] || DEFAULT_PANEL_SIZES.content 41 | }; 42 | } 43 | } catch (error) { 44 | console.warn('Failed to parse panel layout from localStorage:', error); 45 | } 46 | return null; 47 | }; 48 | 49 | /** 50 | * 检查是否使用了自定义布局 51 | */ 52 | export const hasCustomLayout = (): boolean => { 53 | return getCurrentPanelLayout() !== null; 54 | }; -------------------------------------------------------------------------------- /packages/wechat-db-manager/DEBUG-GUIDE.md: -------------------------------------------------------------------------------- 1 | # 空白页面调试指南 2 | 3 | ## 问题排查步骤 4 | 5 | ### 1. 检查控制台错误 6 | 7 | **打开浏览器开发者工具**: 8 | - Chrome/Edge: `F12` 或 `Ctrl+Shift+I` 9 | - Safari: `Cmd+Option+I` 10 | - Firefox: `F12` 11 | 12 | **查看 Console 标签页**: 13 | - 是否有红色错误信息？ 14 | - 是否有 JavaScript 运行时错误？ 15 | - 记录所有错误信息 16 | 17 | ### 2. 检查编译错误 18 | 19 | **查看终端输出**: 20 | ```bash 21 | cd packages/wechat-db-manager 22 | pnpm dev 23 | ``` 24 | 25 | - 是否有 TypeScript 编译错误？ 26 | - 是否有 Vite 构建错误？ 27 | - 是否有模块导入错误？ 28 | 29 | ### 4. 常见问题及解决方案 30 | 31 | #### A. 导入路径错误 32 | **症状**: 模块未找到错误 33 | **解决**: 检查所有 import 路径是否正确 34 | 35 | #### B. TypeScript 类型错误 36 | **症状**: 编译时类型错误 37 | **解决**: 38 | - 检查 props 接口定义 39 | - 确保所有类型正确导入 40 | - 修复类型不匹配 41 | 42 | #### C. CSS 类名问题 43 | **症状**: 样式不生效或动态类名错误 44 | **解决**: 45 | - 避免动态拼接 Tailwind 类名 46 | - 使用固定的类名或条件渲染 47 | 48 | #### D. 组件渲染错误 49 | **症状**: 组件内部 JavaScript 错误 50 | **解决**: 51 | - 检查组件内的条件渲染逻辑 52 | - 确保所有必需的 props 已传递 53 | - 检查 hooks 使用是否正确 54 | 55 | ### 5. 获取详细错误信息 56 | 57 | **在浏览器控制台运行**: 58 | ```javascript 59 | // 检查 React 错误边界 60 | window.addEventListener('error', (e) => { 61 | console.error('Global error:', e.error); 62 | }); 63 | 64 | // 检查未处理的 Promise 拒绝 65 | window.addEventListener('unhandledrejection', (e) => { 66 | console.error('Unhandled promise rejection:', e.reason); 67 | }); 68 | ``` 69 | 70 | ### 7. 联系支持 71 | 72 | 如果问题仍然存在，请提供： 73 | 1. 控制台错误截图 74 | 2. 终端错误信息 75 | 3. 当前使用的 App.tsx 版本 76 | 4. 系统环境信息 (Node.js 版本、pnpm 版本等) 77 | 78 | ## 预防性措施 79 | 80 | 1. **逐步开发**: 一次只添加一个功能 81 | 2. **频繁测试**: 每次更改后立即测试 82 | 3. **代码备份**: 保留工作版本的备份 83 | 4. **错误监控**: 始终关注控制台输出 84 | 85 | ## 常用调试命令 86 | 87 | ```bash 88 | # 清理缓存并重新安装 89 | pnpm clean-install 90 | 91 | # 类型检查 92 | pnpm tsc --noEmit 93 | 94 | # 强制重新构建 95 | rm -rf node_modules/.vite 96 | pnpm dev 97 | ``` -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/hooks/useTableMapping.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | import { useAtom } from 'jotai'; 3 | import { databasesAtom } from '../store/atoms'; 4 | import { ChatDataService } from '../services/chatDataService'; 5 | 6 | /** 7 | * 表映射管理Hook 8 | * 当数据库列表变化时自动初始化表映射服务 9 | */ 10 | export function useTableMapping() { 11 | const [databases] = useAtom(databasesAtom); 12 | const [isInitialized, setIsInitialized] = useState(false); 13 | const [isInitializing, setIsInitializing] = useState(false); 14 | const [stats, setStats] = useState(null); 15 | 16 | useEffect(() => { 17 | const initializeMapping = async () => { 18 | if (databases.length === 0) { 19 | setIsInitialized(false); 20 | setIsInitializing(false); 21 | setStats(null); 22 | return; 23 | } 24 | 25 | if (isInitializing) return; 26 | 27 | setIsInitializing(true); 28 | try { 29 | console.log('🔄 数据库列表变化，初始化表映射服务...'); 30 | await ChatDataService.initializeTableMapping(databases); 31 | 32 | const mappingStats = ChatDataService.getTableMappingStats(); 33 | setStats(mappingStats); 34 | setIsInitialized(true); 35 | 36 | console.log('✅ 表映射服务初始化完成', mappingStats); 37 | } catch (error) { 38 | console.error('❌ 表映射服务初始化失败:', error); 39 | setIsInitialized(false); 40 | } finally { 41 | setIsInitializing(false); 42 | } 43 | }; 44 | 45 | initializeMapping(); 46 | }, [databases]); // ✅ 移除 isInitializing 依赖项 47 | 48 | return { 49 | isInitialized, 50 | isInitializing, 51 | stats 52 | }; 53 | } -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/components/StatusBar.tsx: -------------------------------------------------------------------------------- 1 | import {useAtom} from 'jotai'; 2 | import {databasesAtom, errorAtom, keysFilePathAtom, loadingAtom} from '../store/atoms'; 3 | import {AlertCircle, CheckCircle, File, Loader} from 'lucide-react'; 4 | 5 | export function StatusBar() { 6 | const [databases] = useAtom(databasesAtom); 7 | const [keysPath] = useAtom(keysFilePathAtom); 8 | const [loading] = useAtom(loadingAtom); 9 | const [error] = useAtom(errorAtom); 10 | 11 | const getStatusIcon = () => { 12 | if (loading) return ; 13 | if (error) return ; 14 | if (databases.length > 0) return ; 15 | return ; 16 | }; 17 | 18 | const getStatusText = () => { 19 | if (loading) return 'Loading...'; 20 | if (error) return `Error: ${error}`; 21 | if (databases.length > 0) return `${databases.length} databases loaded`; 22 | if (keysPath) return 'No databases found'; 23 | return 'No keys file selected'; 24 | }; 25 | 26 | const getStatusColor = () => { 27 | if (loading) return 'text-blue-600'; 28 | if (error) return 'text-red-600'; 29 | if (databases.length > 0) return 'text-green-600'; 30 | return 'text-gray-500'; 31 | }; 32 | 33 | return ( 34 |
35 |
36 | {getStatusIcon()} 37 | 38 | {getStatusText()} 39 | 40 | {keysPath && ( 41 | 42 | • {keysPath.split('/').pop()} 43 | 44 | )} 45 |
46 |
47 | ); 48 | } -------------------------------------------------------------------------------- /packages/wechat-db-manager/PERFORMANCE-IMPROVEMENTS.md: -------------------------------------------------------------------------------- 1 | # 性能优化和自动连接功能说明 2 | 3 | ## 🚀 主要改进 4 | 5 | ### 1. 解决大数据集性能问题 6 | 7 | **问题**：几百兆的聊天记录数据导致页面卡死 8 | 9 | **解决方案**： 10 | - **智能采样**：不再全量加载数据，而是采样最新的关键数据 11 | - **分批处理**：将大数据集分批处理，避免内存溢出 12 | - **查询优化**：使用时间范围查询，避免全表扫描 13 | - **超时保护**：设置30秒超时，防止无限等待 14 | 15 | ### 2. 自动数据库连接 16 | 17 | **问题**：每次启动都需要手动连接数据库 18 | 19 | **解决方案**： 20 | - **自动连接**：应用启动时自动连接之前使用的数据库 21 | - **状态保存**：记住已连接的数据库，下次自动恢复 22 | - **进度显示**：显示自动连接进度和状态 23 | - **错误处理**：连接失败时提供重试选项 24 | 25 | ### 3. 操作取消机制 26 | 27 | **新功能**： 28 | - **取消按钮**：长时间操作可以随时取消 29 | - **进度条**：显示详细的加载进度 30 | - **实时状态**：实时更新操作状态 31 | 32 | ## 📊 性能对比 33 | 34 | ### 优化前 35 | - 加载时间：可能超过5分钟或卡死 36 | - 内存使用：可能超过2GB 37 | - 用户体验：无进度提示，无法取消 38 | 39 | ### 优化后 40 | - 加载时间：通常在30秒内完成 41 | - 内存使用：控制在500MB以内 42 | - 用户体验：有进度条，可取消操作 43 | 44 | ## 🔧 使用方法 45 | 46 | ### 自动连接 47 | 1. 首次使用时，在数据库页面正常连接数据库 48 | 2. 下次启动应用时，会自动连接之前使用的数据库 49 | 3. 顶部会显示连接进度条 50 | 4. 连接失败时可以点击"重试" 51 | 52 | ### 聊天记录加载 53 | 1. 点击"聊天记录"页面 54 | 2. 系统会显示详细的加载进度 55 | 3. 如果加载时间过长，可以点击"取消" 56 | 4. 取消后可以重新尝试加载 57 | 58 | ### 调试功能 59 | 1. 点击"聊天调试"页面 60 | 2. 点击"运行调试测试" 61 | 3. 查看详细的诊断信息 62 | 4. 帮助定位问题 63 | 64 | ## ⚙️ 技术细节 65 | 66 | ### 查询优化策略 67 | ```typescript 68 | // 优化前：全表扫描 69 | SELECT * FROM Chat_xxx 70 | 71 | // 优化后：时间范围查询 72 | SELECT * FROM Chat_xxx 73 | WHERE timestamp > recent_timestamp 74 | ORDER BY timestamp DESC 75 | LIMIT 200 76 | ``` 77 | 78 | ### 内存管理 79 | - 分批处理：每次最多处理100条记录 80 | - 智能采样：每个表最多采样200条记录 81 | - 模糊匹配：只对前100个联系人进行模糊匹配 82 | 83 | ### 错误处理 84 | - 连接超时：30秒自动超时 85 | - 查询失败：自动尝试备用查询方案 86 | - 用户取消：支持随时取消操作 87 | 88 | ## 🛠️ 故障排除 89 | 90 | ### 如果仍然很慢 91 | 1. 检查数据库文件大小 92 | 2. 确保数据库文件在本地磁盘上 93 | 3. 使用"聊天调试"页面诊断 94 | 95 | ### 如果自动连接失败 96 | 1. 检查数据库文件路径是否正确 97 | 2. 检查文件权限 98 | 3. 手动重新连接数据库 99 | 100 | ### 如果显示0条记录 101 | 1. 使用"聊天调试"页面 102 | 2. 检查是否找到了Chat_xxx表 103 | 3. 检查表中是否有数据 104 | 105 | ## 📈 监控和调试 106 | 107 | ### 控制台日志 108 | - 打开浏览器开发者工具 109 | - 查看Console标签 110 | - 搜索🚀、✅、❌等表情符号 111 | 112 | ### 调试页面 113 | - 点击"聊天调试" 114 | - 运行完整的诊断测试 115 | - 查看详细的执行日志 116 | 117 | --- 118 | 119 | 这些改进应该显著提升大数据集的处理性能，并改善用户体验。如果仍有问题，请使用调试页面进行诊断。 -------------------------------------------------------------------------------- /packages/wechat-db-manager/CHAT-FEATURE.md: -------------------------------------------------------------------------------- 1 | # 聊天功能实现说明 2 | 3 | ## 功能概述 4 | 5 | 在 WeChat DB Manager 中实现了仿微信的聊天页面功能，提供双列布局查看微信聊天记录： 6 | - 左侧：联系人列表，支持搜索 7 | - 右侧：选中联系人的聊天记录 8 | 9 | ## 实现组件 10 | 11 | ### ChatView 组件 12 | - 路径：`src/components/ChatView.tsx` 13 | - 主要功能： 14 | - 自动检测联系人数据库 (Contact 类型) 15 | - 自动检测消息数据库 (Message 类型) 16 | - 解析联系人信息 17 | - 解析并聚合多个消息数据库的聊天记录 18 | - 实时搜索联系人 19 | - 消息时间格式化显示 20 | 21 | ## 集成方式 22 | 23 | ### 1. 主应用集成 24 | 在 `App.tsx` 中添加了： 25 | - 聊天按钮（消息图标） 26 | - 聊天视图状态管理 27 | - 视图切换逻辑 28 | 29 | ### 2. 按钮位置 30 | 聊天按钮位于应用顶部工具栏，在 Overview 按钮左侧。 31 | 32 | ### 3. 视图管理 33 | - 聊天视图与 Overview 和表格视图互斥 34 | - 聊天模式下隐藏右侧属性面板，节省空间 35 | 36 | ## 技术特性 37 | 38 | ### 数据库支持 39 | - **Contact 数据库**: 自动识别联系人表 (wccontact_new2, Contact 等) 40 | - **Message 数据库**: 支持多个消息数据库文件聚合 (msg_0.db ~ msg_9.db) 41 | 42 | ### 智能解析 43 | - 自动识别表列结构 44 | - 智能匹配姓名、用户名、消息内容等字段 45 | - 容错处理，跳过无效数据 46 | 47 | ### 用户体验 48 | - 联系人搜索功能 49 | - 消息按时间排序 50 | - 自动滚动到最新消息 51 | - 消息统计信息显示 52 | - 响应式设计 53 | 54 | ## 使用方法 55 | 56 | 1. **启动应用**： 57 | ```bash 58 | cd packages/wechat-db-manager 59 | pnpm dev 60 | ``` 61 | 62 | 2. **加载数据库**： 63 | - 使用设置面板加载 keys.toml 文件 64 | - 确保包含 Contact 和 Message 类型的数据库 65 | 66 | 3. **查看聊天记录**： 67 | - 点击顶部工具栏的聊天按钮（💬） 68 | - 在左侧联系人列表中搜索或选择联系人 69 | - 右侧将显示该联系人的聊天记录 70 | 71 | ## UI 设计 72 | 73 | ### 联系人列表 74 | - 头像显示（首字母圆形背景） 75 | - 联系人姓名和用户名 76 | - 搜索框支持实时过滤 77 | - 选中状态高亮显示 78 | 79 | ### 聊天记录 80 | - 消息气泡设计 81 | - 时间智能格式化（今天显示时间，昨天显示"昨天"等） 82 | - 消息统计信息 83 | - 空状态友好提示 84 | 85 | ### 响应式特性 86 | - 左右面板比例优化 (1:2) 87 | - 消息列表自动滚动 88 | - 加载状态指示器 89 | 90 | ## 错误处理 91 | 92 | - 数据库连接失败提示 93 | - 表结构不匹配容错 94 | - 数据解析异常处理 95 | - 友好的错误信息显示 96 | 97 | ## 数据安全 98 | 99 | - 只读访问数据库 100 | - 不修改原始数据 101 | - 遵循 Tauri 安全模型 102 | 103 | ## 扩展计划 104 | 105 | 未来可以考虑添加： 106 | - 群聊支持 107 | - 消息类型识别（图片、文件等） 108 | - 消息导出功能 109 | - 高级搜索功能 110 | - 消息时间范围筛选 111 | 112 | ## 依赖要求 113 | 114 | - Tauri 2.0 115 | - React 18 116 | - TypeScript 117 | - Tailwind CSS 118 | - Lucide React (图标) 119 | - Jotai (状态管理) 120 | 121 | ## 注意事项 122 | 123 | 1. 需要正确配置的 keys.toml 文件 124 | 2. 确保数据库文件可访问 125 | 3. 聊天功能依赖现有的数据库连接 API 126 | 4. 消息解析基于常见的微信数据库表结构，可能需要根据不同版本调整 -------------------------------------------------------------------------------- /packages/wechat-db-manager/USAGE.md: -------------------------------------------------------------------------------- 1 | # WeChat DB Manager 使用说明 2 | 3 | ## 🚀 快速开始 4 | 5 | ### 1. 启动应用 6 | ```bash 7 | cd packages/wechat-db-manager 8 | pnpm install 9 | pnpm tauri dev 10 | ``` 11 | 12 | ### 2. 选择密钥文件 13 | 应用启动后，你会看到欢迎界面： 14 | 15 | - **方法一：文件浏览器** 16 | - 点击 "Browse Files" 按钮 17 | - 选择你的 `.keys` 文件 18 | 19 | - **方法二：手动输入路径** 20 | - 点击 "Enter Path" 按钮 21 | - 输入完整的文件路径，例如：`/Users/mark/projects/wechat-dbcracker/.keys` 22 | 23 | ### 3. 浏览数据库 24 | 文件加载成功后： 25 | - 左侧会显示所有解析出的数据库 26 | - 点击任意数据库查看详细信息 27 | - 状态栏会显示加载状态和数据库数量 28 | 29 | ### 4. 探索数据 30 | 选择数据库后： 31 | - 查看数据库基本信息（路径、大小、类型等） 32 | - 浏览表结构 33 | - 查看表数据（支持分页） 34 | - 执行自定义 SQL 查询 35 | - 导出数据为 CSV 格式 36 | 37 | ## 🛠️ 功能特性 38 | 39 | ### 文件管理 40 | - ✅ 文件浏览器选择 41 | - ✅ 手动路径输入 42 | - ✅ 路径持久化保存 43 | - ✅ 重新加载和更换文件 44 | 45 | ### 数据库管理 46 | - ✅ 自动解析 `.keys` 文件 47 | - ✅ 数据库类型识别和颜色标记 48 | - ✅ 连接状态显示 49 | - ✅ 错误处理和重试机制 50 | 51 | ### 数据浏览 52 | - ✅ 表结构查看 53 | - ✅ 数据分页显示 54 | - ✅ 自定义 SQL 查询 55 | - ✅ CSV 数据导出 56 | - ✅ 搜索和过滤 57 | 58 | ### 用户体验 59 | - ✅ 响应式界面设计 60 | - ✅ 实时状态指示 61 | - ✅ 友好的错误提示 62 | - ✅ 快捷键支持 63 | 64 | ## 📋 支持的数据库类型 65 | 66 | 应用会自动识别以下数据库类型： 67 | - **Message**: 聊天消息 (msg_0.db 到 msg_9.db) 68 | - **Contact**: 联系人信息 (wccontact_new2.db) 69 | - **Group**: 群组信息 (group_new.db) 70 | - **Session**: 会话数据 (session_new.db) 71 | - **Favorites**: 收藏内容 (favorites.db) 72 | - **Media**: 媒体文件元数据 (mediaData.db) 73 | - **Search**: 全文搜索索引 (ftsmessage.db) 74 | 75 | ## 🔧 故障排除 76 | 77 | ### 常见问题 78 | 79 | 1. **文件浏览器无法打开** 80 | - 使用 "Enter Path" 手动输入路径 81 | - 确保文件路径正确且有访问权限 82 | 83 | 2. **数据库解析失败** 84 | - 检查 `.keys` 文件格式是否正确 85 | - 确认数据库文件是否存在且可访问 86 | 87 | 3. **数据库连接失败** 88 | - 验证 SQLCipher 密钥是否正确 89 | - 检查数据库文件权限 90 | 91 | 4. **界面显示异常** 92 | - 刷新页面或重启应用 93 | - 检查控制台是否有错误信息 94 | 95 | ### 调试方法 96 | 97 | 1. **查看状态栏** 98 | - 实时显示当前状态 99 | - 显示错误信息和建议 100 | 101 | 2. **检查控制台** 102 | - 打开开发者工具 103 | - 查看详细错误日志 104 | 105 | 3. **重置应用状态** 106 | - 点击文件路径右上角的 "X" 按钮 107 | - 清除浏览器 localStorage 数据 108 | 109 | ## 💡 使用技巧 110 | 111 | 1. **快速重新加载** 112 | - 使用 "Reload" 按钮快速重新加载当前文件 113 | - 支持键盘快捷键 114 | 115 | 2. **批量操作** 116 | - 使用自定义 SQL 查询进行批量数据操作 117 | - 支持复杂的 JOIN 和聚合查询 118 | 119 | 3. **数据导出** 120 | - 支持表数据和查询结果导出 121 | - CSV 格式兼容 Excel 和其他数据处理工具 122 | 123 | 4. **性能优化** 124 | - 大表数据使用分页查看 125 | - 使用 LIMIT 子句限制查询结果数量 126 | 127 | ## 📞 获取帮助 128 | 129 | 如果遇到问题： 130 | 1. 查看应用内的错误提示和建议 131 | 2. 检查 DEVELOPMENT.md 文件中的详细说明 132 | 3. 确认 `.keys` 文件格式和路径正确性 -------------------------------------------------------------------------------- /packages/wechat-db-manager/public/tauri.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/scripts/keys2toml.ts: -------------------------------------------------------------------------------- 1 | import fs from 'fs' 2 | import path from 'path' 3 | import TOML from '@iarna/toml' 4 | 5 | interface DbKey { 6 | path: string 7 | key: string 8 | cipher_compatibility: number 9 | type: string 10 | } 11 | 12 | function extractDbType(filepath: string): string { 13 | const parts = filepath.split('/') 14 | // Get the last directory name before the db file 15 | for (let i = parts.length - 2; i >= 0; i--) { 16 | if (parts[i] !== '') { 17 | return parts[i] 18 | } 19 | } 20 | return 'unknown' 21 | } 22 | 23 | function parseKeys(content: string): DbKey[] { 24 | const keys: DbKey[] = [] 25 | const lines = content.split('\n') 26 | 27 | let currentPath = '' 28 | let currentKey = '' 29 | 30 | for (const line of lines) { 31 | const pathMatch = line.match(/sqlcipher db path: '([^']+)'/) 32 | const keyMatch = line.match(/PRAGMA key = "([^"]+)"/) 33 | 34 | if (pathMatch) { 35 | currentPath = pathMatch[1] 36 | } 37 | 38 | if (keyMatch && currentPath) { 39 | keys.push({ 40 | path: currentPath, 41 | key: keyMatch[1], 42 | cipher_compatibility: 3, // From the original file 43 | type: extractDbType(currentPath) 44 | }) 45 | currentPath = '' 46 | } 47 | } 48 | 49 | return keys 50 | } 51 | 52 | function groupByType(keys: DbKey[]): Record { 53 | const grouped: Record = {} 54 | 55 | for (const key of keys) { 56 | if (!grouped[key.type]) { 57 | grouped[key.type] = [] 58 | } 59 | grouped[key.type].push(key) 60 | } 61 | 62 | return grouped 63 | } 64 | 65 | function convertToToml(keys: Record): string { 66 | const tomlObj: any = { 67 | metadata: { 68 | version: '1.0.0', 69 | generated_at: new Date().toISOString(), 70 | }, 71 | databases: keys 72 | } 73 | 74 | return TOML.stringify(tomlObj) 75 | } 76 | 77 | // Main execution 78 | async function main() { 79 | try { 80 | const inputPath = path.join(process.cwd(), '../.keys') 81 | const outputPath = path.join(process.cwd(), '../.keys.toml') 82 | 83 | const content = await fs.promises.readFile(inputPath, 'utf-8') 84 | const keys = parseKeys(content) 85 | const groupedKeys = groupByType(keys) 86 | const tomlContent = convertToToml(groupedKeys) 87 | 88 | await fs.promises.writeFile(outputPath, tomlContent) 89 | console.log('Successfully converted keys to TOML format') 90 | 91 | } catch (error) { 92 | console.error('Error:', error) 93 | process.exit(1) 94 | } 95 | } 96 | 97 | main() 98 | -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/types.ts: -------------------------------------------------------------------------------- 1 | export interface DatabaseInfo { 2 | id: string; 3 | path: string; 4 | key: string; 5 | cipher_compatibility: number; 6 | db_type: string; 7 | filename: string; 8 | size?: number; 9 | accessible: boolean; 10 | last_modified?: string; 11 | } 12 | 13 | export interface TableInfo { 14 | name: string; 15 | columns: ColumnInfo[]; 16 | row_count?: number; 17 | } 18 | 19 | export interface ColumnInfo { 20 | name: string; 21 | type_name: string; 22 | nullable: boolean; 23 | primary_key: boolean; 24 | } 25 | 26 | export interface QueryResult { 27 | columns: string[]; 28 | rows: any[][]; 29 | total_rows: number; 30 | } 31 | 32 | export interface DatabaseManagerApi { 33 | loadKeysFile(path: string): Promise; 34 | 35 | getDatabases(): Promise; 36 | 37 | connectDatabase(dbId: string): Promise; 38 | 39 | getTables(dbId: string): Promise; 40 | 41 | queryTable(dbId: string, tableName: string, limit?: number, offset?: number): Promise; 42 | 43 | executeQuery(dbId: string, query: string): Promise; 44 | 45 | disconnectDatabase(dbId: string): Promise; 46 | } 47 | 48 | export const DB_TYPE_LABELS: Record = { 49 | 'KeyValue': 'Key-Value Store', 50 | 'WebTemplate': 'Web Templates', 51 | 'Contact': 'Contacts', 52 | 'Session': 'Sessions', 53 | 'Message': 'Messages', 54 | 'brand': 'Brand Messages', 55 | 'Group': 'Groups', 56 | 'Favorites': 'Favorites', 57 | 'Sns': 'Social Network', 58 | 'Sync': 'Sync Data', 59 | 'MMLive': 'Live Stream', 60 | 'Account': 'Account Info', 61 | 'Stickers': 'Stickers', 62 | 'fts': 'Full-text Search', 63 | 'ftsfile': 'File Search', 64 | 'mediaData': 'Media Data', 65 | 'unknown': 'Unknown' 66 | }; 67 | 68 | export const DB_TYPE_COLORS: Record = { 69 | 'KeyValue': 'bg-blue-100 text-blue-800', 70 | 'WebTemplate': 'bg-green-100 text-green-800', 71 | 'Contact': 'bg-purple-100 text-purple-800', 72 | 'Session': 'bg-yellow-100 text-yellow-800', 73 | 'Message': 'bg-red-100 text-red-800', 74 | 'brand': 'bg-indigo-100 text-indigo-800', 75 | 'Group': 'bg-pink-100 text-pink-800', 76 | 'Favorites': 'bg-orange-100 text-orange-800', 77 | 'Sns': 'bg-cyan-100 text-cyan-800', 78 | 'Sync': 'bg-gray-100 text-gray-800', 79 | 'MMLive': 'bg-teal-100 text-teal-800', 80 | 'Account': 'bg-emerald-100 text-emerald-800', 81 | 'Stickers': 'bg-lime-100 text-lime-800', 82 | 'fts': 'bg-violet-100 text-violet-800', 83 | 'ftsfile': 'bg-rose-100 text-rose-800', 84 | 'mediaData': 'bg-amber-100 text-amber-800', 85 | 'unknown': 'bg-slate-100 text-slate-800' 86 | }; -------------------------------------------------------------------------------- /packages/wechat-db-manager/IMPLEMENTATION-SUMMARY.md: -------------------------------------------------------------------------------- 1 | # 微信联系人-聊天表映射实施总结 2 | 3 | ## 问题描述 4 | 5 | 微信数据库中的联系人（WCContact表中的M_NSUSRNAME字段）与聊天记录表（Chat_xxx）之间存在MD5映射关系无法正确匹配的问题。 6 | 7 | ## 解决方案 8 | 9 | ### 1. 核心改进 - MD5映射引擎 10 | 11 | **文件：`src/utils/wechatTableMatcher.ts`** 12 | 13 | - ✅ 添加了MD5哈希计算功能 14 | - ✅ 支持多种标识符字段（M_NSUSRNAME, username, wxid等） 15 | - ✅ 实现了字符编码标准化（UTF-8, Unicode NFC） 16 | - ✅ 生成多种表名前缀变体（Chat_, chat_, ChatRoom_等） 17 | - ✅ 支持截断哈希（8位、16位、完整32位） 18 | 19 | **关键功能：** 20 | ```typescript 21 | // 生成MD5变体 22 | generateMD5Variants(identifier: string): string[] 23 | // 提取联系人标识符 24 | extractContactIdentifiers(contact: any): string[] 25 | // 查找匹配的聊天表 26 | findMatchingChatTables(contact: any, tables: TableInfo[]): TableInfo[] 27 | ``` 28 | 29 | ### 2. 联系人解析器增强 30 | 31 | **文件：`src/utils/contactParser.tsx`** 32 | 33 | - ✅ 添加了M_NSUSRNAME字段支持到username字段映射 34 | - ✅ 在EnhancedContact接口中添加originalId字段 35 | - ✅ 保留原始标识符用于MD5计算 36 | 37 | ### 3. 聊天数据服务优化 38 | 39 | **文件：`src/services/chatDataService.ts`** 40 | 41 | - ✅ 集成了新的MD5映射逻辑 42 | - ✅ 优先使用匹配的聊天表，而非遍历所有表 43 | - ✅ 提高了查询效率和准确性 44 | 45 | ## 技术特性 46 | 47 | ### MD5映射算法 48 | 49 | 1. **多层标识符提取** 50 | - M_NSUSRNAME（主要字段） 51 | - username, wxid, user_id等备用字段 52 | - contactid, originalId等补充字段 53 | 54 | 2. **字符标准化处理** 55 | - Unicode NFC标准化 56 | - 去除空格和特殊字符 57 | - 大小写标准化 58 | 59 | 3. **哈希变体生成** 60 | - 标准MD5计算 61 | - 大小写变体 62 | - 截断版本（8位、16位） 63 | 64 | 4. **表名模式匹配** 65 | - Chat_{hash} 66 | - chat_{hash} 67 | - ChatRoom_{hash} 68 | - message_{hash} 69 | 70 | ### 错误处理和回退机制 71 | 72 | - ✅ MD5计算失败时的直接字符串匹配 73 | - ✅ 字符编码错误的处理 74 | - ✅ 空值和无效数据的过滤 75 | - ✅ 详细的日志输出用于调试 76 | 77 | ## 使用方法 78 | 79 | ### 1. 基本映射 80 | 81 | ```typescript 82 | import { WeChatTableMatcher } from './utils/wechatTableMatcher'; 83 | 84 | // 为联系人查找匹配的聊天表 85 | const matchedTables = WeChatTableMatcher.findMatchingChatTables(contact, availableTables); 86 | ``` 87 | 88 | ### 2. 诊断映射关系 89 | 90 | ```typescript 91 | // 获取详细的诊断信息 92 | const diagnostic = WeChatTableMatcher.diagnoseChatMapping(contact, chatTables); 93 | console.log('匹配结果:', diagnostic.matches); 94 | console.log('候选表名:', diagnostic.candidates); 95 | ``` 96 | 97 | ### 3. 使用诊断工具 98 | 99 | 1. 导航到ChatDebug页面 100 | 2. 选择联系人数据库和消息数据库 101 | 3. 点击"开始诊断映射关系" 102 | 4. 查看详细的映射分析结果 103 | 104 | ## 预期效果 105 | 106 | - **提高匹配准确率**：从简单字符串匹配提升到MD5哈希匹配 107 | - **减少查询时间**：直接定位到相关聊天表，避免遍历所有表 108 | - **增强可调试性**：提供详细的诊断工具和日志输出 109 | - **支持多种场景**：兼容不同版本的微信数据库结构 110 | 111 | ## 下一步改进 112 | 113 | 1. **性能优化**：添加映射结果缓存机制 114 | 2. **算法扩展**：支持SHA1等其他哈希算法 115 | 3. **自动检测**：分析数据库自动识别正确的映射模式 116 | 4. **批量处理**：优化大量联系人的批量映射处理 117 | 118 | ## 注意事项 119 | 120 | - 该实现基于对微信数据库结构的分析，可能需要根据实际数据调整 121 | - MD5映射是主要方法，但保留了直接字符串匹配作为备用方案 122 | - 建议先使用诊断工具验证映射关系的正确性 -------------------------------------------------------------------------------- /core/dbcracker.d: -------------------------------------------------------------------------------- 1 | #!/usr/sbin/dtrace -s 2 | 3 | #pragma D option quiet 4 | 5 | /* 6 | * TODO: Limit probing to a single CPU core to declutter the output. 7 | * (but what if the decryption isn't scheduled to that core?) 8 | */ 9 | 10 | /* 11 | * Adapted from a legacy version of SQLCipher (v3.15.2). 12 | * 13 | * https://github.com/Tencent/sqlcipher/blob/4f37c817eb99e18e4fdc8ac63d67ac33610d66be/src/crypto_impl.c 14 | */ 15 | typedef struct sqlcipher_provider sqlcipher_provider; 16 | typedef struct Btree Btree; 17 | 18 | typedef struct cipher_ctx { 19 | int store_pass; 20 | int derive_key; 21 | int kdf_iter; 22 | int fast_kdf_iter; 23 | int key_sz; 24 | int iv_sz; 25 | int block_sz; 26 | int pass_sz; 27 | int reserve_sz; 28 | int hmac_sz; 29 | int keyspec_sz; 30 | unsigned int flags; 31 | unsigned char *key; 32 | unsigned char *hmac_key; 33 | unsigned char *pass; 34 | char *keyspec; 35 | sqlcipher_provider *provider_; 36 | void *provider_ctx; 37 | } cipher_ctx; 38 | 39 | typedef struct codec_ctx { 40 | int kdf_salt_sz; 41 | int page_sz; 42 | unsigned char *kdf_salt; 43 | unsigned char *hmac_kdf_salt; 44 | unsigned char *buffer; 45 | Btree *pBt; 46 | cipher_ctx *read_ctx; 47 | cipher_ctx *write_ctx; 48 | unsigned int skip_read_hmac; 49 | unsigned int need_kdf_salt; 50 | } codec_ctx; 51 | 52 | syscall::open:entry 53 | /pid == $target 54 | && substr(copyinstr(arg0), strlen(copyinstr(arg0)) - 3) == ".db"/ 55 | { 56 | self->path = copyinstr(arg0); 57 | //printf("\n>>>sqlcipher '%s'\n", self->path); 58 | } 59 | 60 | pid$target:WCDB:sqlcipher_cipher_ctx_key_derive:entry 61 | { 62 | /* 63 | * Pointers holding userland address 64 | */ 65 | self->ctx_u = arg0; 66 | self->c_ctx_u = arg1; 67 | } 68 | 69 | pid$target:WCDB:sqlcipher_cipher_ctx_key_derive:return 70 | { 71 | /* 72 | * Copy userland memory to kernel, so that we can play with it. 73 | */ 74 | self->ctx = (codec_ctx *) copyin(self->ctx_u, sizeof(codec_ctx)); 75 | self->c_ctx = (cipher_ctx *) copyin(self->c_ctx_u, sizeof(cipher_ctx)); 76 | 77 | /* 78 | * This gives us the 32-byte raw key followed by the 16-byte salt. 79 | * The salt is also stored at the first 16 bytes of the respective 80 | * *.db file, which you can verify with the following command: 81 | * 82 | * xxd -p -l 16 -g 0 '/path/to/foo.db' 83 | * 84 | */ 85 | printf("sqlcipher db path: '%s'\n", self->path); 86 | printf("PRAGMA key = \"%s\"; PRAGMA cipher_compatibility = 3;\n\n", 87 | copyinstr((user_addr_t) self->c_ctx->keyspec, 88 | self->c_ctx->keyspec_sz)); 89 | 90 | self->ctx_u = 0; 91 | self->c_ctx_u = 0; 92 | self->ctx = 0; 93 | self->c_ctx = 0; 94 | } 95 | 96 | -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/components/Navigation.tsx: -------------------------------------------------------------------------------- 1 | import {BarChart3, Database, MessageSquare, Settings, Users, UserCheck} from 'lucide-react'; 2 | 3 | export type NavigationTab = 'chat' | 'contacts' | 'contacts-pro' | 'database' | 'overview' | 'diagnostic' | 'settings' | 'chatdebug'; 4 | 5 | interface NavigationProps { 6 | activeTab: NavigationTab; 7 | onTabChange: (tab: NavigationTab) => void; 8 | } 9 | 10 | export function Navigation({activeTab, onTabChange}: NavigationProps) { 11 | const tabs = [ 12 | { 13 | id: 'chat' as const, 14 | name: '聊天记录', 15 | icon: MessageSquare, 16 | description: '查看微信聊天记录' 17 | }, 18 | { 19 | id: 'contacts-pro' as const, 20 | name: '联系人详情', 21 | icon: UserCheck, 22 | description: '三列布局查看联系人和聊天记录' 23 | }, 24 | { 25 | id: 'database' as const, 26 | name: '数据库', 27 | icon: Database, 28 | description: '管理数据库和表格' 29 | }, 30 | { 31 | id: 'overview' as const, 32 | name: '概览', 33 | icon: BarChart3, 34 | description: '数据统计和分析' 35 | }, 36 | { 37 | id: 'settings' as const, 38 | name: '设置', 39 | icon: Settings, 40 | description: '应用配置和偏好' 41 | } 42 | ]; 43 | 44 | return ( 45 |
46 |
47 | {tabs.map((tab) => { 48 | const Icon = tab.icon; 49 | const isActive = activeTab === tab.id; 50 | 51 | return ( 52 | 69 | ); 70 | })} 71 |
72 |
73 | ); 74 | } -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/components/ContextPanel.tsx: -------------------------------------------------------------------------------- 1 | import {DatabaseInfo, TableInfo} from '../types'; 2 | import {PropertyPanel} from './PropertyPanel'; 3 | import {TableView} from './TableView'; 4 | import {Database, Table} from 'lucide-react'; 5 | 6 | interface ContextPanelProps { 7 | selectedDatabase: DatabaseInfo | null; 8 | selectedTable: TableInfo | null; 9 | mode: 'database-properties' | 'table-data'; 10 | } 11 | 12 | export function ContextPanel({selectedDatabase, selectedTable, mode}: ContextPanelProps) { 13 | // 未选择数据库时的空状态 14 | if (!selectedDatabase) { 15 | return ( 16 |
17 |
18 |
20 | 21 |
22 |

选择一个数据库

23 |

24 | 从左侧列表中选择一个数据库来查看其详细信息和表格 25 |

26 |
27 |
28 | ); 29 | } 30 | 31 | // 显示数据库属性 32 | if (mode === 'database-properties') { 33 | return ( 34 |
35 | 39 |
40 | ); 41 | } 42 | 43 | // 显示表格数据 44 | if (mode === 'table-data' && selectedTable) { 45 | return ( 46 |
47 | 51 |
52 | ); 53 | } 54 | 55 | // 选择了数据库但未选择表格时 56 | return ( 57 |
58 |
59 |
60 | 61 | 62 |

选择一个表格

63 |

64 | 从中间列表中选择一个表格来查看其数据内容 65 |

66 |
67 |

68 | 💡 提示: 表格列表显示在中间列 69 |

70 |
71 | 72 | 73 | ); 74 | } -------------------------------------------------------------------------------- /packages/wechat-db-manager/src-tauri/src/lib.rs: -------------------------------------------------------------------------------- 1 | mod database; 2 | 3 | use database::{ 4 | DatabaseManager, DatabaseInfo, TableInfo, QueryResult 5 | }; 6 | use std::sync::Mutex; 7 | use tauri::State; 8 | 9 | type DbManager = Mutex; 10 | 11 | #[tauri::command] 12 | fn greet(name: &str) -> String { 13 | format!("Hello, {}! You've been greeted from Rust!", name) 14 | } 15 | 16 | #[tauri::command] 17 | fn load_keys_file(path: String, manager: State) -> Result, String> { 18 | let databases = DatabaseManager::parse_keys_file(&path) 19 | .map_err(|e| format!("Failed to parse keys file: {}", e))?; 20 | 21 | let mut mgr = manager.lock().unwrap(); 22 | mgr.load_databases(databases.clone()); 23 | 24 | Ok(databases) 25 | } 26 | 27 | #[tauri::command] 28 | fn get_databases(manager: State) -> Result, String> { 29 | let mgr = manager.lock().unwrap(); 30 | Ok(mgr.get_databases()) 31 | } 32 | 33 | #[tauri::command] 34 | fn connect_database(db_id: String, manager: State) -> Result<(), String> { 35 | let mut mgr = manager.lock().unwrap(); 36 | mgr.connect_database(&db_id) 37 | .map_err(|e| format!("Failed to connect to database: {}", e)) 38 | } 39 | 40 | #[tauri::command] 41 | fn get_tables(db_id: String, manager: State) -> Result, String> { 42 | let mgr = manager.lock().unwrap(); 43 | mgr.get_tables(&db_id) 44 | .map_err(|e| format!("Failed to get tables: {}", e)) 45 | } 46 | 47 | #[tauri::command] 48 | fn query_table( 49 | db_id: String, 50 | table_name: String, 51 | limit: Option, 52 | offset: Option, 53 | manager: State 54 | ) -> Result { 55 | let mgr = manager.lock().unwrap(); 56 | mgr.query_table(&db_id, &table_name, limit, offset) 57 | .map_err(|e| format!("Failed to query table: {}", e)) 58 | } 59 | 60 | #[tauri::command] 61 | fn execute_query( 62 | db_id: String, 63 | query: String, 64 | manager: State 65 | ) -> Result { 66 | let mgr = manager.lock().unwrap(); 67 | mgr.execute_query(&db_id, &query) 68 | .map_err(|e| format!("Failed to execute query: {}", e)) 69 | } 70 | 71 | #[tauri::command] 72 | fn disconnect_database(db_id: String, manager: State) -> Result<(), String> { 73 | let mut mgr = manager.lock().unwrap(); 74 | mgr.disconnect_database(&db_id) 75 | .map_err(|e| format!("Failed to disconnect database: {}", e)) 76 | } 77 | 78 | #[cfg_attr(mobile, tauri::mobile_entry_point)] 79 | pub fn run() { 80 | tauri::Builder::default() 81 | .plugin(tauri_plugin_opener::init()) 82 | .plugin(tauri_plugin_dialog::init()) 83 | .manage(DbManager::new(DatabaseManager::new())) 84 | .invoke_handler(tauri::generate_handler![ 85 | greet, 86 | load_keys_file, 87 | get_databases, 88 | connect_database, 89 | get_tables, 90 | query_table, 91 | execute_query, 92 | disconnect_database 93 | ]) 94 | .run(tauri::generate_context!()) 95 | .expect("error while running tauri application"); 96 | } 97 | -------------------------------------------------------------------------------- /CLAUDE.md: -------------------------------------------------------------------------------- 1 | # CLAUDE.md 2 | 3 | This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. 4 | 5 | ## Project Overview 6 | 7 | This is a WeChat database decryption tool (wechat-dbcracker) that extracts chat history from WeChat databases on macOS. The project uses DTrace to hook into WeChat's SQLCipher database operations and extract encryption keys. 8 | 9 | ## Architecture 10 | 11 | The project follows a monorepo structure with multiple packages: 12 | 13 | - **core/**: Contains the main DTrace script (`dbcracker.d`) for key extraction 14 | - **packages/scripts/**: TypeScript utilities for processing extracted keys 15 | - **packages/wechater/**: Electron application for database viewing 16 | - **packages/wechat-db-manager/**: Tauri application for database management 17 | 18 | ## Development Commands 19 | 20 | ### Testing 21 | ```bash 22 | # Run all tests 23 | pnpm test 24 | 25 | # Run tests in watch mode 26 | pnpm test:watch 27 | ``` 28 | 29 | ### Package-specific Commands 30 | 31 | #### Scripts Package 32 | ```bash 33 | cd packages/scripts 34 | pnpm convert # Convert .keys file to TOML format 35 | ``` 36 | 37 | #### Wechater (Electron App) 38 | ```bash 39 | cd packages/wechater 40 | pnpm dev # Development mode 41 | pnpm build # Build for production 42 | pnpm lint # Run linting 43 | pnpm typecheck # Run type checking 44 | pnpm rebuild # Rebuild native dependencies (better-sqlite3) 45 | pnpm build:mac # Build for macOS 46 | pnpm build:win # Build for Windows 47 | pnpm build:linux # Build for Linux 48 | ``` 49 | 50 | ## Key Components 51 | 52 | ### DTrace Script (core/dbcracker.d) 53 | - Hooks into WeChat's SQLCipher operations 54 | - Extracts database paths and encryption keys 55 | - Outputs in a format compatible with the scripts package 56 | 57 | ### Key Processing (packages/scripts/keys2toml.ts) 58 | - Parses DTrace output from `.keys` file 59 | - Extracts database paths, keys, and types 60 | - Converts to structured TOML format 61 | 62 | ### Database Libraries 63 | - **better-sqlite3**: Primary SQLite interface 64 | - **better-sqlite3-multiple-ciphers**: For SQLCipher database support 65 | - **toml**: For configuration file parsing 66 | 67 | ## Security Notes 68 | 69 | This tool is designed for legitimate security research and database recovery purposes. The project: 70 | - Requires WeChat version 3.6 or below 71 | - Needs SIP (System Integrity Protection) disabled 72 | - Uses DTrace for process monitoring 73 | - Extracts encryption keys from memory during login 74 | 75 | ## Platform Requirements 76 | 77 | - macOS only (due to DTrace dependency) 78 | - WeChat client version 3.6 or below 79 | - SQLCipher development environment 80 | - Disabled SIP for DTrace functionality 81 | 82 | ## Testing Framework 83 | 84 | Uses Jest with ts-jest for TypeScript support. Configuration includes: 85 | - TypeScript compilation via ts-jest 86 | - Node.js test environment 87 | - Root-level test discovery 88 | 89 | ## Build System 90 | 91 | - **Package Manager**: pnpm with workspace support 92 | - **TypeScript**: ES2020 target with CommonJS modules 93 | - **Electron**: For cross-platform desktop application 94 | - **Tauri**: Alternative framework for native applications -------------------------------------------------------------------------------- /packages/wechat-db-manager/TABLE-MAPPING-FIX.md: -------------------------------------------------------------------------------- 1 | # 表映射服务修复总结 2 | 3 | ## 🚨 发现的根本问题 4 | 5 | 用户反馈"最后加载出来只有0个表"，经过分析发现根本问题： 6 | 7 | ### ❌ 我的错误实现 8 | 9 | 在 `tableMappingService.ts` 第43行，我错误地调用了： 10 | ```typescript 11 | await dbManager.connectToDatabase(database.id, database.path, database.password); 12 | ``` 13 | 14 | ### ✅ 正确的实现 15 | 16 | 应该是： 17 | ```typescript 18 | await dbManager.connectDatabase(database.id); // 只需要 dbId 参数 19 | ``` 20 | 21 | ## 🔍 错误分析 22 | 23 | 1. **方法名错误**：`connectToDatabase` vs `connectDatabase` 24 | 2. **参数错误**：API只接受 `dbId`，不需要 `path` 和 `password` 25 | 3. **连接失败**：由于方法调用错误，数据库连接失败 26 | 4. **映射失败**：连接失败 → `getTables()` 返回空 → 表映射为空 → 0个表 27 | 28 | ## 🛠️ 完整修复方案 29 | 30 | ### 1. 修正数据库连接 ✅ 31 | 32 | **文件：** `src/services/tableMappingService.ts` 33 | 34 | - 修正方法调用：`connectDatabase(database.id)` 35 | - 添加连接成功日志确认 36 | 37 | ### 2. 增强错误处理 ✅ 38 | 39 | **新增检查：** 40 | - 数据库数组为空的检查 41 | - 连接失败的详细错误信息 42 | - 表数量统计和验证 43 | - 映射建立状态检查 44 | 45 | **新增日志：** 46 | ``` 47 | 🗺️ 开始初始化表映射服务... 48 | 📊 传入数据库数量: X 49 | 📊 扫描数据库: database.db (ID: xxx) 50 | ✅ 数据库 database.db 连接成功 51 | 📋 数据库 database.db 找到 X 个表 52 | 💬 数据库 database.db 中找到 X 个聊天相关表 53 | 🔗 聊天表映射: Chat_xxx → database.db 54 | ✅ 数据库 database.db 完成: X 个表，X 个聊天表，X 个映射 55 | 🎉 表映射初始化完成! 56 | 📊 统计信息: 57 | - 成功处理数据库: X/X 58 | - 总表数量: X 59 | - 聊天表数量: X 60 | - 映射记录数: X 61 | ``` 62 | 63 | ### 3. 增强状态指示器 ✅ 64 | 65 | **文件：** `src/App.tsx` 66 | 67 | - 显示数据库数量信息 68 | - 添加等待数据库加载的提示 69 | - 更详细的映射状态显示 70 | 71 | ### 4. 添加调试工具 ✅ 72 | 73 | **新增调试方法：** 74 | ```typescript 75 | // 打印所有聊天表映射 76 | ChatDataService.debugPrintChatTables() 77 | 78 | // 检查特定联系人的映射 79 | ChatDataService.debugContactMapping(contact) 80 | 81 | // 获取详细状态 82 | ChatDataService.getDetailedMappingStatus() 83 | ``` 84 | 85 | ## 🎯 如何验证修复 86 | 87 | ### 1. 检查应用启动日志 88 | 89 | 启动应用后，控制台应该显示： 90 | ``` 91 | 🗺️ 开始初始化表映射服务... 92 | 📊 传入数据库数量: N (N > 0) 93 | 📊 扫描数据库: xxx.db (ID: xxx) 94 | ✅ 数据库 xxx.db 连接成功 95 | 📋 数据库 xxx.db 找到 X 个表 (X > 0) 96 | ``` 97 | 98 | ### 2. 检查状态指示器 99 | 100 | 应用顶部应该显示： 101 | - 初始化时：蓝色进度条 "正在初始化表映射服务..." 102 | - 完成后：绿色状态条 "表映射就绪 - X 个表，X 个聊天表" 103 | 104 | ### 3. 测试聊天记录加载 105 | 106 | 1. 进入联系人页面 107 | 2. 点击一个联系人 108 | 3. 控制台应该显示： 109 | ``` 110 | 🔍 为联系人 XXX 查找聊天表 111 | 📝 生成候选表名: X 个 112 | ✅ 找到匹配表: Chat_xxx (database.db) 113 | 🎉 为联系人 XXX 找到 X 个匹配的聊天表 114 | ``` 115 | 116 | ### 4. 使用调试工具 117 | 118 | 在浏览器控制台执行： 119 | ```javascript 120 | // 检查映射状态 121 | console.log(ChatDataService.getDetailedMappingStatus()) 122 | 123 | // 打印所有聊天表 124 | ChatDataService.debugPrintChatTables() 125 | ``` 126 | 127 | ## 🚫 常见问题排查 128 | 129 | ### 问题1：仍然显示0个表 130 | 131 | **可能原因：** 132 | - 用户还没有加载keys文件 133 | - 数据库文件路径错误 134 | - 数据库密码错误 135 | 136 | **检查方法：** 137 | 1. 确认已在设置页面加载keys文件 138 | 2. 检查控制台是否有连接错误信息 139 | 3. 验证数据库文件是否存在 140 | 141 | ### 问题2：连接成功但没有聊天表 142 | 143 | **可能原因：** 144 | - 数据库中确实没有聊天表 145 | - 表名模式不匹配我们的识别规则 146 | 147 | **检查方法：** 148 | 1. 使用 `debugPrintChatTables()` 查看找到的聊天表 149 | 2. 检查数据库中的实际表名 150 | 3. 必要时调整表名匹配规则 151 | 152 | ### 问题3：联系人聊天记录仍然为空 153 | 154 | **可能原因：** 155 | - MD5映射计算不匹配 156 | - 联系人标识符提取错误 157 | - 表中没有对应联系人的数据 158 | 159 | **检查方法：** 160 | 1. 使用 `debugContactMapping(contact)` 调试特定联系人 161 | 2. 检查生成的候选表名是否合理 162 | 3. 使用ChatDebug页面进行详细诊断 163 | 164 | ## 🎉 预期结果 165 | 166 | 修复后应该实现： 167 | - ✅ 数据库正确连接 168 | - ✅ 表映射成功建立（显示 > 0 个表） 169 | - ✅ 聊天记录能够正常加载 170 | - ✅ 状态指示器显示正确信息 171 | - ✅ 详细的调试日志帮助排查问题 172 | 173 | 这个修复从根本上解决了数据库连接方法调用错误的问题，并提供了完善的错误处理和调试工具。 -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # 微信聊天记录获取之数据库破解 2 | 3 | ## Star History 4 | 5 | [![Star History Chart](https://api.star-history.com/svg?repos=cs-magic-open/wechat-dbcracker&type=Date)](https://www.star-history.com/#cs-magic-open/wechat-dbcracker&Date) 6 | 7 | ## 项目目标 8 | 9 | 破解某宿主环境的微信数据库，从而获取其聊天历史记录 10 | 11 | ## 项目逻辑与原理 12 | 13 | ### 为什么要从数据库角度出发 14 | 15 | 如果使用 `wechaty` 之类的微信机器人，只可以 hook 每条实时消息，无法完整获得历史聊天记录。 16 | 17 | 不过如果在 `wechaty` 的框架内，再加上获取聊天记录的 api，也许是可行的。 18 | 19 | 而由于微信聊天记录都是存在数据库的，因此可以从数据库角度进行获取。 20 | 21 | ### 为什么涉及到数据库的破解 22 | 23 | 因为微信聊天记录是存储在 `sqlcipher` 的，它是支持加密的 `sqlite` 数据库，需要秘钥才能打开，因此我们要首先拿到数据库的秘钥。 24 | 25 | ### 如何获取数据库的秘钥 26 | 27 | 以 MacOS 为例，我们可以使用一些逆向手段（`dtrace`）hook 程序的数据库活动，由于程序打开数据库涉及到密钥的读取，我们可以解析这个读取动作，从而获得明文秘钥。 28 | 29 | ### 为什么选择 MacOS 平台 30 | 31 | 理论上任何平台都可以实现，尤其是 Android、Windows 等平台，逆向工程师更多、破解起来难度可能更小，但我个人的主力机是 Mac/iOS，因此暂时没有考虑兼容 Windows/Android 生态。 32 | 33 | 其次，PC端的工程能力比移动端要丰富，因此，优先考虑在PC端突破，是性价比较高的选择。 34 | 35 | ## 环境要求 36 | 37 | ### 微信版本 38 | 39 | 目前我们的 dtrace 脚本 以及整个 hook 的逻辑，需要确保 MacOS 微信客户端的版本在 **3.6以下**。 40 | 41 | - 3.8以上 不可以（TODO: 微信使用了多进程以及其他技术进行了重构） 42 | - 3.7 未测试 43 | 44 | 微信往期版本的下载地址：[Older versions of WeChat (Mac) | Uptodown](https://wechat-for-mac.en.uptodown.com/mac/versions) 45 | 46 | ### sqlcipher 依赖 47 | 48 | MacOS 上要配置好能读写 sqlcipher 的环境。 49 | 50 | ```shell 51 | # 1. check where is your `libcrypto.a` 52 | brew list openssl | grep libcrypto.a 53 | # 或者 find /usr/local/Cellar -name libcrypto.a 54 | 55 | # 2. use the libcrypto.a with openssl version >= 3 56 | LIBCRYPTO={YOUR-libcrypto.a} 57 | 58 | # 3. install sqlcipher 59 | # If cloning this repo for the first time, use: 60 | # git clone --recursive https://github.com/cs-magic-open/wechat-dbcracker 61 | # 62 | # If already cloned, initialize the submodule: 63 | git submodule update --init 64 | cd sqlcipher 65 | ./configure --enable-tempstore=yes CFLAGS="-DSQLITE_HAS_CODEC" \ 66 | LDFLAGS=$LIBCRYPTO --with-crypto-lib=none 67 | make 68 | # need password 69 | sudo make install 70 | ``` 71 | 72 | ### 关闭 SIP，otherwise the dtrace can't be used 73 | 74 | > 需要按住 cmd + shift + R 进入安全模式（Mac Studio 上长按电源键即可） 75 | 76 | ```shell 77 | # check SIP 78 | csrutil status 79 | 80 | # disable SIP, need in recovery mode (hold on shift+R when rebooting) 81 | csrutil disable 82 | ``` 83 | 84 | ## 运行，获取秘钥 85 | 86 | ### 1. 打开mac微信，保持登录页面 87 | 88 | ### 2. 运行监控程序（注意运行的微信的版本与程序地址） 89 | 90 | ![wechat-version](assets/wechat-version.png) 91 | 92 | tip: 需要确保运行正确的、版本对应的微信程序 93 | 94 | ```shell 95 | # comparing to `wechat-decipher-macos`, I make the script more robust. 96 | # 由于key是固定的，也可以把输出内容持久化，只需要在命令后面加上 `> data/dbcracker.log` 97 | pgrep -f /Applications/WeChat-3.6.0.app/Contents/MacOS/WeChat | xargs sudo core/dbcracker.d -p > .keys 98 | ``` 99 | 100 | ### 3. 登录账号，确认是否有各种数据库键的输出 101 | 102 | tip: 对键的读取动作，会在登录时产生，因此需要先运行程序，再登录。 103 | 104 | ![sqlcipher-track](assets/sqlcipher-track.png) 105 | 106 | ## 程序化 107 | 108 | 由于我们已经得到了各个数据库的存储地址、秘钥、版本等，我们便可以程序化的读取所有数据。 109 | 110 | - python: 可以使用 `pysqlcipher` 111 | - nodejs: 可以使用 `node-sqlcipher` 112 | 113 | ## 项目 todo 114 | 115 | - [ ] 尝试破解 3.8+ 的微信版本 116 | - [ ] 支持 iOS 端的破解（毕竟基于聊天记录的备份系统，移动端数据会更全） 117 | - [ ] 将整个流程更轻松的自动化 118 | - [ ] 做一个聊天记录展示的UI或者仿微信界面（已经正在进行，但是更希望解耦，可能会另外开个项目，以及需要最终确定是用什么技术栈实现，electron, flutter ?） 119 | 120 | ## 参考 121 | 122 | - 核心破解参考： nalzok/wechat-decipher-macos: DTrace scripts to extract chat history from WeChat on macOS, https://github.com/nalzok/wechat-decipher-macos/tree/main 123 | - D 语言：The D Programming Language, https://docs.oracle.com/en/operating-systems/oracle-linux/dtrace-guide/dtrace-ref-TheDProgrammingLanguage.html#dt_dlang 124 | -------------------------------------------------------------------------------- /packages/wechat-db-manager/CHAT-LOADING-FIX.md: -------------------------------------------------------------------------------- 1 | # 聊天记录加载问题修复方案 2 | 3 | ## 问题分析 4 | 5 | ### 原始问题 6 | 1. 点击底部的聊天数据一片空白 7 | 2. 点击联系人里的联系人，聊天记录找不到 8 | 9 | ### 根本原因 10 | 数据库按文件组织：`数据库文件 --> 表（聊天记录）` 11 | 12 | 原有实现的问题： 13 | - 缺少**表名到数据库文件的映射关系** 14 | - 每次查找聊天记录都要遍历所有数据库文件 15 | - 无法精确定位聊天表所在的数据库文件 16 | - 效率低下且容易出错 17 | 18 | ## 解决方案 19 | 20 | ### 核心架构改进 21 | 22 | 建立全局表映射系统： 23 | ``` 24 | 联系人ID → MD5计算 → 表名 → 表映射服务 → 数据库文件 → 精确查询 25 | ``` 26 | 27 | ### 1. 表映射服务 (`TableMappingService`) 28 | 29 | **文件：** `src/services/tableMappingService.ts` 30 | 31 | **功能：** 32 | - 全局维护表名到数据库文件的映射关系 33 | - 应用启动时扫描所有数据库，建立完整映射 34 | - 提供快速查找接口，直接定位表所在的数据库 35 | 36 | **关键方法：** 37 | ```typescript 38 | // 初始化映射关系 39 | initializeMapping(databases: DatabaseInfo[]): Promise 40 | 41 | // 查找表对应的数据库 42 | findDatabaseForTable(tableName: string): TableMapping | null 43 | 44 | // 为联系人查找聊天表 45 | findChatTablesForContact(contact: any): Array 46 | ``` 47 | 48 | ### 2. 优化版消息加载器 49 | 50 | **文件：** `src/services/chatDataService.ts` 51 | 52 | **新增方法：** `loadMessagesOptimized` 53 | 54 | **优化点：** 55 | - 直接通过映射服务定位聊天表 56 | - 避免遍历所有数据库文件 57 | - 大幅提升查询效率 58 | - 减少不必要的数据库连接 59 | 60 | **流程对比：** 61 | 62 | **原流程（低效）：** 63 | ``` 64 | 遍历所有数据库 → 获取每个数据库的所有表 → 尝试匹配 → 查询 65 | ``` 66 | 67 | **新流程（高效）：** 68 | ``` 69 | 联系人 → MD5映射 → 表名 → 查找数据库 → 直接查询特定表 70 | ``` 71 | 72 | ### 3. 自动初始化系统 73 | 74 | **文件：** `src/hooks/useTableMapping.ts` 75 | 76 | **功能：** 77 | - 监听数据库列表变化 78 | - 自动重新初始化表映射 79 | - 提供映射状态和统计信息 80 | 81 | **集成位置：** `src/App.tsx` 82 | - 应用启动时自动初始化 83 | - 显示映射状态指示器 84 | - 实时反馈映射进度 85 | 86 | ### 4. 状态指示器 87 | 88 | **位置：** App.tsx顶部状态栏 89 | 90 | **显示内容：** 91 | - 映射初始化进度 92 | - 映射完成状态 93 | - 表统计信息（总表数、聊天表数） 94 | 95 | ## 技术实现 96 | 97 | ### 映射数据结构 98 | ```typescript 99 | interface TableMapping { 100 | tableName: string; // 表名 101 | databaseId: string; // 数据库ID 102 | databaseFilename: string; // 数据库文件名 103 | tableInfo: TableInfo; // 表信息 104 | } 105 | ``` 106 | 107 | ### 查找算法 108 | 1. **精确匹配**：tableName 109 | 2. **大小写容错**：toLowerCase(), toUpperCase() 110 | 3. **MD5变体支持**：完整哈希、截断哈希、编码变体 111 | 112 | ### 性能优化 113 | - **单次扫描**：应用启动时一次性建立映射 114 | - **内存缓存**：Map结构快速查找 115 | - **懒加载**：仅在需要时连接数据库 116 | - **批量处理**：分批加载大量消息 117 | 118 | ## 修改的文件 119 | 120 | ### 新增文件 121 | 1. `src/services/tableMappingService.ts` - 表映射服务 122 | 2. `src/hooks/useTableMapping.ts` - 映射管理Hook 123 | 124 | ### 修改文件 125 | 1. `src/services/chatDataService.ts` - 添加优化版加载方法 126 | 2. `src/pages/ChatPageOptimized.tsx` - 使用优化版加载 127 | 3. `src/components/ContactMessageMatcher.tsx` - 使用优化版加载 128 | 4. `src/components/ChatHistoryModal.tsx` - 使用优化版加载 129 | 5. `src/App.tsx` - 集成映射初始化和状态显示 130 | 131 | ## 预期效果 132 | 133 | ### 性能提升 134 | - **查询速度**：从O(n*m)优化到O(1)，n=数据库数量，m=平均表数量 135 | - **内存使用**：减少重复的表扫描和连接 136 | - **响应时间**：联系人聊天记录加载速度显著提升 137 | 138 | ### 用户体验 139 | - **即时加载**：点击联系人立即显示聊天记录 140 | - **状态反馈**：清晰的映射初始化进度提示 141 | - **错误处理**：更好的错误提示和降级处理 142 | 143 | ### 系统稳定性 144 | - **容错机制**：映射失败时的备用方案 145 | - **自动重建**：数据库变化时自动重新映射 146 | - **状态监控**：实时映射状态监控 147 | 148 | ## 使用方法 149 | 150 | ### 开发者 151 | ```typescript 152 | // 使用优化版加载 153 | const messages = await ChatDataService.loadMessagesOptimized(contact, allContacts); 154 | 155 | // 检查映射状态 156 | const stats = ChatDataService.getTableMappingStats(); 157 | ``` 158 | 159 | ### 用户 160 | 1. 启动应用后等待表映射初始化完成（顶部状态条显示） 161 | 2. 进入聊天页面，选择联系人 162 | 3. 聊天记录将快速加载显示 163 | 164 | ## 调试工具 165 | 166 | 现有的ChatDebug页面已支持MD5映射诊断，可以： 167 | - 查看联系人的标识符提取 168 | - 验证MD5计算结果 169 | - 检查表名匹配情况 170 | - 诊断映射失败原因 171 | 172 | ## 后续优化 173 | 174 | 1. **缓存机制**：添加聊天记录缓存 175 | 2. **增量更新**：支持数据库增量扫描 176 | 3. **并发控制**：优化并发加载性能 177 | 4. **监控统计**：添加性能监控指标 178 | 179 | 这个解决方案从根本上解决了聊天记录无法显示的问题，建立了高效、可靠的数据查找机制。 -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/wechat-db-manager/IPAD-STYLE-REDESIGN.md: -------------------------------------------------------------------------------- 1 | # iPad风格UI/UX重新设计 2 | 3 | ## 设计概述 4 | 5 | 基于用户反馈，对WeChat DB Manager进行了全面的UI/UX重新设计，采用iPad风格的设计语言，提供更直观、优雅的用户体验。 6 | 7 | ## 设计理念 8 | 9 | ### iPad风格特点 10 | - **底部Tab导航**: 采用iOS标准的底部标签栏导航 11 | - **卡片式设计**: 大量使用圆角卡片和阴影 12 | - **充足的空白**: 更宽敞的间距和留白设计 13 | - **渐变背景**: 优雅的渐变色彩搭配 14 | - **图标一致性**: 统一的Lucide图标体系 15 | - **响应式布局**: 适配不同屏幕尺寸 16 | 17 | ### 色彩体系 18 | - **主色调**: 蓝色系 (blue-50 to blue-600) 19 | - **辅助色**: 灰色系 (gray-50 to gray-900) 20 | - **强调色**: 绿色、红色、紫色、橙色等 21 | - **背景**: 浅灰渐变 (gray-50 to slate-50) 22 | 23 | ## 新的导航架构 24 | 25 | ### 四个主要导航项 26 | 27 | 1. **聊天记录** (`MessageSquare` 图标) 28 | - 专注的聊天体验 29 | - 仿微信界面设计 30 | - 联系人搜索功能 31 | 32 | 2. **数据库** (`Database` 图标) 33 | - 数据库管理和浏览 34 | - 表格数据查看 35 | - 属性面板 36 | 37 | 3. **概览** (`BarChart3` 图标) 38 | - 数据统计和分析 39 | - 可视化图表 40 | - 快速洞察 41 | 42 | 4. **设置** (`Settings` 图标) 43 | - 配置管理 44 | - 密钥文件设置 45 | - 应用偏好 46 | 47 | ### 导航特性 48 | - **底部位置**: 类似iPad应用的标准做法 49 | - **图标+文字**: 直观的图标配合中文标签 50 | - **状态指示**: 活跃状态高亮显示 51 | - **触觉反馈**: 悬停和点击动效 52 | 53 | ## 重构的组件架构 54 | 55 | ### 页面组件 56 | ``` 57 | src/pages/ 58 | ├── ChatPageOptimized.tsx # 聊天记录页面 59 | ├── DatabasePage.tsx # 数据库管理页面 60 | ├── OverviewPage.tsx # 数据概览页面 61 | └── SettingsPage.tsx # 设置配置页面 62 | ``` 63 | 64 | ### 共享组件 65 | ``` 66 | src/components/ 67 | ├── Navigation.tsx # 底部导航组件 68 | ├── DatabaseList.tsx # 数据库列表 (增强支持过滤) 69 | └── [其他现有组件] 70 | ``` 71 | 72 | ### 状态管理 73 | - 保持现有的Jotai状态管理 74 | - 各页面独立状态 75 | - 共享全局状态 (数据库、设置等) 76 | 77 | ## 页面设计详情 78 | 79 | ### 1. 聊天记录页面 (ChatPage) 80 | 81 | **设计特点**: 82 | - 左右分栏布局 (联系人列表 + 聊天记录) 83 | - 仿微信界面设计 84 | - 圆角头像和消息气泡 85 | - 智能时间格式化 86 | 87 | **功能增强**: 88 | - 实时搜索联系人 89 | - 自动聚合多个消息数据库 90 | - 消息统计信息 91 | - 优雅的加载和错误状态 92 | 93 | ### 2. 数据库页面 (DatabasePage) 94 | 95 | **设计特点**: 96 | - 三栏布局 (数据库列表 + 表格内容 + 属性面板) 97 | - 搜索和过滤功能 98 | - 统计信息显示 99 | 100 | **功能增强**: 101 | - 数据库搜索功能 102 | - 分类展示数据库类型 103 | - 实时状态监控 104 | 105 | ### 3. 概览页面 (OverviewPage) 106 | 107 | **设计特点**: 108 | - 统计卡片网格布局 109 | - 数据可视化图表 110 | - 快速操作面板 111 | 112 | **功能特性**: 113 | - 数据库总览统计 114 | - 类型分布分析 115 | - 最近修改记录 116 | - 快速导航入口 117 | 118 | ### 4. 设置页面 (SettingsPage) 119 | 120 | **设计特点**: 121 | - 分组设置面板 122 | - 说明文档集成 123 | - 状态反馈系统 124 | 125 | **功能特性**: 126 | - 密钥文件管理 127 | - 实时状态监控 128 | - 使用说明和帮助 129 | - 应用信息展示 130 | 131 | ## 视觉设计改进 132 | 133 | ### 圆角和阴影 134 | - **主容器**: `rounded-2xl` (16px 圆角) 135 | - **卡片元素**: `rounded-xl` (12px 圆角) 136 | - **按钮**: `rounded-lg` (8px 圆角) 137 | - **微妙阴影**: `shadow-sm` 和 `shadow-lg` 138 | 139 | ### 间距体系 140 | - **页面边距**: `p-6` (24px) 141 | - **组件间距**: `space-y-6` (24px 垂直间距) 142 | - **元素间距**: `space-x-3` (12px 水平间距) 143 | - **内容边距**: `p-4` (16px 内边距) 144 | 145 | ### 颜色搭配 146 | - **背景渐变**: `bg-gradient-to-br from-blue-50 to-indigo-50` 147 | - **卡片背景**: `bg-white` 148 | - **次要背景**: `bg-gray-50` 149 | - **边框**: `border-gray-100` / `border-gray-200` 150 | 151 | ### 字体层级 152 | - **页面标题**: `text-2xl font-bold` 153 | - **组件标题**: `text-lg font-semibold` 154 | - **正文内容**: `text-sm` / `text-base` 155 | - **辅助信息**: `text-xs text-gray-500` 156 | 157 | ## 响应式设计 158 | 159 | ### 断点系统 160 | - **移动端**: 单列布局 161 | - **平板**: 双列布局 162 | - **桌面**: 三列布局 163 | 164 | ### 自适应特性 165 | - 灵活的网格系统 166 | - 可折叠的侧边栏 167 | - 响应式字体大小 168 | - 触摸友好的交互区域 169 | 170 | ## 性能优化 171 | 172 | ### 组件懒加载 173 | - 页面级别的代码分割 174 | - 条件渲染减少DOM节点 175 | - 防抖搜索功能 176 | 177 | ### 状态管理优化 178 | - 最小化全局状态 179 | - 页面级别的状态隔离 180 | - 智能的重新渲染控制 181 | 182 | ## 兼容性考虑 183 | 184 | ### 向后兼容 185 | - 保持现有API接口 186 | - 数据结构保持不变 187 | - 配置文件格式兼容 188 | 189 | ### 渐进增强 190 | - 基础功能优先 191 | - 增强功能可选 192 | - 优雅降级机制 193 | 194 | ## 用户体验改进 195 | 196 | ### 交互反馈 197 | - 加载状态指示器 198 | - 错误提示友好化 199 | - 成功操作确认 200 | - 防误操作保护 201 | 202 | ### 导航体验 203 | - 面包屑导航 204 | - 快速返回功能 205 | - 键盘快捷键支持 206 | - 状态保持和恢复 207 | 208 | ### 可访问性 209 | - 语义化HTML结构 210 | - 键盘导航支持 211 | - 屏幕阅读器兼容 212 | - 高对比度支持 213 | 214 | ## 技术实现 215 | 216 | ### 关键技术栈 217 | - **React 18**: 现代React特性 218 | - **TypeScript**: 类型安全保障 219 | - **Tailwind CSS**: 实用优先的CSS框架 220 | - **Jotai**: 轻量级状态管理 221 | - **Lucide React**: 一致的图标系统 222 | 223 | ### 构建优化 224 | - Tree-shaking减少包体积 225 | - CSS优化和压缩 226 | - 图片资源优化 227 | - 代码分割策略 228 | 229 | ## 总结 230 | 231 | 这次重新设计带来了： 232 | 233 | 1. **更直观的导航**: 四个清晰的功能区域 234 | 2. **更优雅的视觉**: iPad风格的现代设计 235 | 3. **更好的体验**: 响应式布局和交互优化 236 | 4. **更高的效率**: 功能分离和专业化界面 237 | 238 | 新的设计保持了原有功能的完整性，同时大幅提升了用户体验和视觉吸引力，符合现代应用设计的最佳实践。 -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/components/DatabaseInfo.tsx: -------------------------------------------------------------------------------- 1 | import {DatabaseInfo} from '../types'; 2 | import {useAtom} from 'jotai'; 3 | import {keysFilePathAtom} from '../store/atoms'; 4 | import {Database, FolderOpen, Info, Key} from 'lucide-react'; 5 | 6 | interface DatabaseInfoProps { 7 | database: DatabaseInfo; 8 | } 9 | 10 | export function DatabaseInfoPanel({database}: DatabaseInfoProps) { 11 | const [keysPath] = useAtom(keysFilePathAtom); 12 | 13 | return ( 14 |
15 |
16 |
17 | 18 |
19 |

Database Information

20 |
21 | 22 |
23 |
24 |
25 |
26 | 27 |
28 |
29 |

Database Name

30 |

{database.filename}

31 |
32 |
33 | 34 |
35 |
36 | T 37 |
38 |
39 |

Database Type

40 |

{database.db_type}

41 |
42 |
43 | 44 |
45 |
46 | S 47 |
48 |
49 |

File Size

50 |

51 | {database.size ? `${(database.size / 1024).toFixed(1)} KB` : 'Unknown'} 52 |

53 |
54 |
55 |
56 | 57 |
58 |
59 |
60 | 61 |
62 |
63 |

Encryption Key

64 |
65 |

66 | {database.key.substring(0, 32)}... 67 |

68 |
69 |
70 |
71 |
72 | 73 |
74 |
75 |
76 | 77 |
78 |
79 |

File Path

80 |
81 |

{database.path}

82 |
83 |
84 |
85 |
86 |
87 |
88 | ); 89 | } -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/components/AutoConnectIndicator.tsx: -------------------------------------------------------------------------------- 1 | import {AlertCircle, CheckCircle, Loader2, RefreshCw, X} from 'lucide-react'; 2 | 3 | interface AutoConnectIndicatorProps { 4 | isConnecting: boolean; 5 | progress?: { 6 | message: string; 7 | current: number; 8 | total: number; 9 | } | null; 10 | error?: string | null; 11 | onRetry?: () => void; 12 | onDismiss?: () => void; 13 | } 14 | 15 | export function AutoConnectIndicator({ 16 | isConnecting, 17 | progress, 18 | error, 19 | onRetry, 20 | onDismiss 21 | }: AutoConnectIndicatorProps) { 22 | if (!isConnecting && !error) return null; 23 | 24 | return ( 25 |
28 |
29 |
30 | {/* 状态图标 */} 31 | {isConnecting ? ( 32 | 33 | ) : error ? ( 34 | 35 | ) : ( 36 | 37 | )} 38 | 39 | {/* 状态信息 */} 40 |
41 | {isConnecting && progress ? ( 42 |
43 |
44 | 45 | {progress.message} 46 | 47 | 48 | ({progress.current}/{progress.total}) 49 | 50 |
51 | 52 | {/* 进度条 */} 53 |
54 |
0 ? (progress.current / progress.total) * 100 : 0}%` 58 | }} 59 | /> 60 |
61 |
62 | ) : isConnecting ? ( 63 | 64 | 正在自动连接数据库... 65 | 66 | ) : error ? ( 67 |
68 |
69 | 自动连接失败 70 |
71 |
72 | {error} 73 |
74 |
75 | ) : null} 76 |
77 |
78 | 79 | {/* 操作按钮 */} 80 |
81 | {error && onRetry && ( 82 | 89 | )} 90 | 91 | {(error || !isConnecting) && onDismiss && ( 92 | 98 | )} 99 |
100 |
101 |
102 | ); 103 | } -------------------------------------------------------------------------------- /packages/wechat-db-manager/THREE-COLUMN-CONTACTS.md: -------------------------------------------------------------------------------- 1 | # 三列布局联系人页面实施报告 2 | 3 | ## 🎯 功能概述 4 | 5 | 成功实现了用户要求的三列布局联系人页面，提供高效的微信数据浏览体验： 6 | 7 | ``` 8 | ┌──────────────┬───────────────────────┬──────────────┐ 9 | │ 联系人列表 │ 聊天记录 │ 联系人属性 │ 10 | │ │ │ │ 11 | │ 🔍 搜索框 │ 💬 实时聊天显示 │ 📋 基本信息 │ 12 | │ 📱 张三 │ [张三] 你好 │ 显示名: 张三 │ 13 | │ 💼 李四 │ [我] 在吗? │ 微信号: xxx │ 14 | │ 👥 群聊1 │ [张三] 在的 │ 数据库: msg_1 │ 15 | │ │ [我] 明天见面吧 │ 表名: Chat_ab │ 16 | │ │ │ 消息数: 156条 │ 17 | └──────────────┴───────────────────────┴──────────────┘ 18 | ``` 19 | 20 | ## 🛠️ 技术实现 21 | 22 | ### 1. 核心组件 23 | 24 | **文件：** `src/pages/ContactsThreeColumnPage.tsx` 25 | 26 | **架构设计：** 27 | - **第一列 (25%)**: 联系人列表 + 搜索功能 28 | - **第二列 (50%)**: 聊天记录显示 29 | - **第三列 (25%)**: 联系人详细属性 30 | 31 | **状态管理：** 32 | ```typescript 33 | interface LoadingState { 34 | contacts: boolean; 35 | messages: boolean; 36 | } 37 | 38 | interface ContactStats { 39 | databaseSource: string; 40 | chatTables: Array<{tableName: string; databaseFilename: string}>; 41 | messageCount: number; 42 | lastActiveTime?: string; 43 | } 44 | ``` 45 | 46 | ### 2. 导航集成 47 | 48 | **文件：** `src/components/Navigation.tsx` 49 | 50 | - 添加新导航选项："联系人详情" 51 | - 使用 `UserCheck` 图标区分传统联系人页面 52 | - 响应式设计适配6个导航选项 53 | 54 | **路由处理：** `src/App.tsx` 55 | ```typescript 56 | case 'contacts-pro': 57 | return ; 58 | ``` 59 | 60 | ### 3. 数据流架构 61 | 62 | #### 联系人加载流程 63 | 1. **自动检测**: 扫描联系人数据库 (`*contact*`, `*wccontact*`) 64 | 2. **批量加载**: 遍历所有联系人数据库 65 | 3. **去重排序**: 按显示名中文排序 66 | 4. **实时搜索**: 支持多字段模糊搜索 67 | 68 | #### 聊天记录加载流程 69 | 1. **表映射服务**: 利用修复后的表映射系统 70 | 2. **MD5定位**: 精确定位联系人对应的聊天表 71 | 3. **优化加载**: 使用 `loadMessagesOptimized` 方法 72 | 4. **实时显示**: 气泡式聊天界面 73 | 74 | #### 属性面板内容 75 | - **基本信息**: 显示名、昵称、备注、微信号 76 | - **数据统计**: 消息数量、最后活跃时间 77 | - **技术信息**: 数据库来源、表名映射、联系人ID 78 | - **调试工具**: 一键调试映射关系 79 | 80 | ## 🎨 用户体验设计 81 | 82 | ### 1. 视觉设计 83 | - **清晰分列**: 明确的边界线和背景色区分 84 | - **选中状态**: 蓝色高亮显示当前选中联系人 85 | - **加载状态**: 旋转指示器和进度反馈 86 | - **空状态**: 友好的提示信息和操作指导 87 | 88 | ### 2. 交互设计 89 | - **即点即显**: 点击联系人立即加载聊天记录 90 | - **搜索筛选**: 实时搜索联系人姓名、昵称、备注 91 | - **消息气泡**: 区分发送方和接收方的气泡样式 92 | - **时间格式**: 智能时间显示（今天/本周/具体日期） 93 | 94 | ### 3. 状态管理 95 | - **联系人同步**: 数据库变化时自动重新加载 96 | - **选中保持**: 智能处理选中状态的重置 97 | - **错误恢复**: 完善的错误处理和重试机制 98 | 99 | ## 🚀 性能优化 100 | 101 | ### 1. 数据加载优化 102 | - **表映射加速**: 利用全局表映射服务，避免重复扫描 103 | - **精确定位**: MD5映射直接定位聊天表，无需遍历 104 | - **批量去重**: 高效的联系人去重算法 105 | 106 | ### 2. 渲染优化 107 | - **条件渲染**: 按需渲染聊天记录和属性面板 108 | - **时间缓存**: 优化时间格式化计算 109 | - **状态分离**: 独立的加载状态管理 110 | 111 | ### 3. 内存管理 112 | - **状态重置**: 切换联系人时清理前一个联系人的数据 113 | - **懒加载**: 仅在选中时加载聊天记录 114 | - **垃圾回收**: 及时清理不需要的状态 115 | 116 | ## 📱 响应式适配 117 | 118 | ### 1. 导航栏适配 119 | - **图标缩放**: 小屏幕使用较小图标 120 | - **间距调整**: 动态调整按钮间距 121 | - **文字截断**: 防止导航文字溢出 122 | 123 | ### 2. 布局适配 124 | - **三列保持**: 在合理屏幕尺寸下保持三列布局 125 | - **最小宽度**: 设置列的最小宽度防止挤压 126 | - **滚动处理**: 各列独立滚动，防止内容丢失 127 | 128 | ## 🔧 技术特性 129 | 130 | ### 1. 集成表映射服务 131 | - 使用修复后的 `TableMappingService` 132 | - 支持 MD5 哈希表名映射 133 | - 提供详细的映射调试信息 134 | 135 | ### 2. 完善错误处理 136 | ```typescript 137 | // 空数据库状态 138 | if (contactDbs.length === 0) { 139 | return ; 140 | } 141 | 142 | // 加载错误恢复 143 | catch (error) { 144 | console.error('❌ 加载联系人失败:', error); 145 | setContacts([]); 146 | } 147 | ``` 148 | 149 | ### 3. 调试工具集成 150 | - **控制台日志**: 详细的加载过程日志 151 | - **一键调试**: 快速调试联系人映射关系 152 | - **状态透明**: 显示技术细节方便问题排查 153 | 154 | ## 📊 功能对比 155 | 156 | | 功能特性 | 传统联系人页面 | 三列布局页面 | 157 | |---------|--------------|------------| 158 | | 联系人浏览 | ✅ 卡片式 | ✅ 列表式 | 159 | | 聊天记录 | ⚠️ 弹窗模式 | ✅ 即时显示 | 160 | | 技术信息 | ❌ 无 | ✅ 详细属性 | 161 | | 搜索功能 | ✅ 基础搜索 | ✅ 多字段搜索 | 162 | | 数据库信息 | ❌ 隐藏 | ✅ 透明显示 | 163 | | 调试工具 | ❌ 无 | ✅ 集成调试 | 164 | | 效率 | ⚠️ 多步操作 | ✅ 一屏完成 | 165 | 166 | ## 🎉 用户价值 167 | 168 | ### 1. 效率提升 169 | - **快速浏览**: 一屏内完成联系人选择和聊天查看 170 | - **无需弹窗**: 避免频繁的模态框开关操作 171 | - **即时反馈**: 点击即显示，无等待时间 172 | 173 | ### 2. 信息透明 174 | - **数据来源**: 清楚显示数据来自哪个数据库文件 175 | - **表结构**: 展示底层表名和映射关系 176 | - **统计信息**: 直观的消息数量和活跃度 177 | 178 | ### 3. 调试友好 179 | - **技术细节**: 显示联系人ID、原始ID等技术信息 180 | - **映射诊断**: 一键检查联系人到聊天表的映射 181 | - **错误定位**: 详细的错误日志和状态提示 182 | 183 | ## 🔮 未来扩展 184 | 185 | ### 短期优化 186 | 1. **虚拟滚动**: 支持大量联系人的性能优化 187 | 2. **消息分页**: 分页加载历史聊天记录 188 | 3. **快捷键**: 添加键盘导航支持 189 | 190 | ### 中期功能 191 | 1. **消息搜索**: 在聊天记录中搜索特定内容 192 | 2. **导出功能**: 导出选中联系人的聊天记录 193 | 3. **统计图表**: 联系人活跃度分析图表 194 | 195 | ### 长期规划 196 | 1. **多选操作**: 批量处理多个联系人 197 | 2. **自定义列宽**: 用户可调整三列的宽度比例 198 | 3. **布局记忆**: 保存用户的布局偏好设置 199 | 200 | ## ✅ 验收标准 201 | 202 | 用户要求的功能已全部实现： 203 | 204 | - ✅ **第一列联系人**: 完整的联系人列表 + 搜索功能 205 | - ✅ **第二列聊天记录**: 选中联系人后即时显示聊天内容 206 | - ✅ **第三列属性信息**: 基本属性 + 数据库名 + 表名 + 技术信息 207 | 208 | 用户现在可以通过底部导航的"联系人详情"选项体验全新的三列布局界面！ -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/App.tsx: -------------------------------------------------------------------------------- 1 | import {useEffect, useState} from 'react'; 2 | import {Navigation, NavigationTab} from './components/Navigation'; 3 | import {SettingsPage} from './pages/SettingsPage'; 4 | import {OverviewPage} from './pages/OverviewPage'; 5 | import {DatabasePage} from './pages/DatabasePage'; 6 | import {ChatPage} from './pages/ChatPageOptimized'; 7 | import {ContactsThreeColumnPage} from './pages/ContactsThreeColumnPage'; 8 | import {AutoConnectIndicator} from './components/AutoConnectIndicator'; 9 | import {useAtom} from 'jotai'; 10 | import {initializePersistedStateAtom} from './store/atoms'; 11 | import {useAutoConnect} from './hooks/useAutoConnect'; 12 | import {useTableMapping} from './hooks/useTableMapping'; 13 | import './App.css'; 14 | 15 | function App() { 16 | const [activeTab, setActiveTab] = useState('settings'); 17 | const [, initializeState] = useAtom(initializePersistedStateAtom); 18 | const autoConnect = useAutoConnect(); 19 | const tableMapping = useTableMapping(); 20 | 21 | // 初始化持久化状态 22 | useEffect(() => { 23 | initializeState(); 24 | }, [initializeState]); 25 | 26 | const renderActiveTab = () => { 27 | switch (activeTab) { 28 | case 'chat': 29 | return ; 30 | case 'contacts-pro': 31 | return ; 32 | case 'database': 33 | return ; 34 | case 'overview': 35 | return ; 36 | case 'settings': 37 | return ; 38 | default: 39 | return ( 40 |
41 |

页面加载中...

42 |
43 | ); 44 | } 45 | }; 46 | 47 | return ( 48 |
49 | {/* Auto Connect Indicator - 顶部状态条 */} 50 | {(autoConnect.isAutoConnecting || autoConnect.autoConnectError) && ( 51 |
52 | 59 |
60 | )} 61 | 62 | {/* Table Mapping Status - 表映射状态 */} 63 | {tableMapping.isInitializing && ( 64 |
65 |
66 |
67 | 正在初始化表映射服务... 68 |
69 |
70 | )} 71 | 72 | {tableMapping.isInitialized && tableMapping.stats && ( 73 |
74 |
75 |
76 |
77 | 表映射就绪 - {tableMapping.stats.totalTables} 个表，{tableMapping.stats.chatTables} 个聊天表 78 |
79 |
80 | {tableMapping.stats.databaseCount} 个数据库 81 |
82 |
83 |
84 | )} 85 | 86 | {!tableMapping.isInitializing && !tableMapping.isInitialized && ( 87 |
88 |
89 |
90 | 等待数据库加载...请先在设置页面加载keys文件 91 |
92 |
93 | )} 94 | 95 | {/* Main Content Area - 确保可以收缩并包含滚动 */} 96 |
97 | {renderActiveTab()} 98 |
99 | 100 | {/* Bottom Navigation - 固定在底部，不允许收缩 */} 101 |
102 | 106 |
107 |
108 | ); 109 | } 110 | 111 | export default App; -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/components/WelcomeGuide.tsx: -------------------------------------------------------------------------------- 1 | import {useState} from 'react'; 2 | import {useAtom} from 'jotai'; 3 | import {databasesAtom, keysFilePathAtom} from '../store/atoms'; 4 | import {Database, Download, FileText, Table, X} from 'lucide-react'; 5 | 6 | export function WelcomeGuide() { 7 | const [keysPath] = useAtom(keysFilePathAtom); 8 | const [databases] = useAtom(databasesAtom); 9 | const [isVisible, setIsVisible] = useState(true); 10 | 11 | // 如果已经有文件和数据库，就隐藏引导 12 | if (keysPath && databases.length > 0) { 13 | return null; 14 | } 15 | 16 | if (!isVisible) { 17 | return null; 18 | } 19 | 20 | return ( 21 |
22 |
23 |
24 | 25 |

Welcome to WeChat DB Manager

26 |
27 | 33 |
34 | 35 |
36 |

37 | This tool helps you manage and browse WeChat SQLCipher databases. Here's how to get started: 38 |

39 | 40 |
41 |
42 |
44 | 1 45 |
46 |
47 |

Select your keys file

48 |

49 | Use the "Browse Files" button to select your .keys file, 51 | or click "Enter Path" to type the full path manually. 52 |

53 |
54 |
55 | 56 |
57 |
59 | 2 60 |
61 |
62 |

Browse databases

63 |

64 | Once loaded, select a database from the list to view its tables and information. 65 |

66 |
67 |
68 | 69 |
70 |
72 | 3 73 |
74 |
75 |

Explore data

76 |

77 | Click on tables to view their contents, execute custom queries, and export data as CSV. 78 |

79 |
80 |
81 |
82 | 83 |
84 |
85 | 86 | Keys File 87 |
88 |
89 | 90 | Databases 91 |
92 |
93 |
94 | Tables 95 | 96 |
97 | 98 | Export 99 |
100 | 101 | 102 | 103 | ); 104 | } -------------------------------------------------------------------------------- /docs/config-sqlcipher.bak.md: -------------------------------------------------------------------------------- 1 | # python driver for cracking/hacking wechat on macOS 2 | 3 | - version: 0.0.2 4 | - date: 2022/07/04 5 | - author: markshawn 6 | 7 | ## environment preparation 8 | 9 | ### init sqlcipher 10 | 11 | 1. check where is your `libcrypto.a` 12 | 13 | ```shell 14 | find /usr/local/Cellar -name libcrypto.a 15 | ``` 16 | 17 | 2. use the libcrypto.a with openssl version >= 3 18 | 19 | ```shell 20 | LIBCRYPTO={YOUR-libcrypto.a} 21 | ``` 22 | 23 | 3. install 24 | 25 | ```shell 26 | 27 | git clone https://github.com/sqlcipher/sqlcipher 28 | cd sqlcipher 29 | 30 | ./configure --enable-tempstore=yes CFLAGS="-DSQLITE_HAS_CODEC" \ 31 | LDFLAGS=$LIBCRYPTO --with-crypto-lib=none 32 | 33 | make && make install 34 | 35 | cd .. 36 | ``` 37 | 38 | ### init pysqlcipher 39 | 40 | ```shell 41 | 42 | git clone https://github.com/rigglemania/pysqlcipher3 43 | cd pysqlcipher3 44 | 45 | mkdir amalgamation && cp ../sqlcipher/sqlite3.[hc] amalgamation/ 46 | mkdir src/python3/sqlcipher && cp amalgamation/sqlite3.h src/python3/sqlcipher/ 47 | 48 | python setup.py build_amalgamation 49 | python setup.py install 50 | 51 | cd .. 52 | ``` 53 | 54 | ### disable SIP, otherwise the dtrace can't be used 55 | 56 | ```shell 57 | # check SIP 58 | csrutil status 59 | 60 | # disable SIP, need in recovery mode (hold on shift+R when rebooting) 61 | csrutil disable 62 | ``` 63 | 64 | ## hook to get wechat database secret keys 65 | 66 | ### 1. 打开mac微信，保持登录页面 67 | 68 | ### 2. 运行监控程序 69 | 70 | ```shell 71 | # comparing to `wechat-decipher-macos`, I make the script more robust. 72 | pgrep -f '^/Applications/WeChat.app/Contents/MacOS/WeChat' | xargs sudo wechat-decipher-macos/macos/dbcracker.d -p 73 | ``` 74 | 75 | ### 3. 登录账号，确认是否有各种数据库键的输出 76 | 77 | 类似如下： 78 | 79 | ```text 80 | sqlcipher db path: '/Users/mark/Library/Containers/com.tencent.xinWeChat/Data/Library/Application Support/com.tencent.xinWeChat/2.0b4.0.9/KeyValue/1d35a41b3adb8b335cc59362ad55ee88/KeyValue.db' 81 | PRAGMA key = "x'b95e58f5e48a455f935963f7f8bdec37a0205f799d8c4465b4c00b7138f516263363959d13f82ce5b9e0c3a74af1df1e'"; PRAGMA cipher_compatibility = 3; 82 | 83 | sqlcipher db path: '/Users/mark/Library/Containers/com.tencent.xinWeChat/Data/Library/Application Support/com.tencent.xinWeChat/2.0b4.0.9/1d35a41b3adb8b335cc59362ad55ee88/Contact/wccontact_new2.db' 84 | PRAGMA key = "x'b95e58f5e48a455f935963f7f8bdec37a0205f799d8c4465b4c00b7138f51626b07475fbaa4b375dbc932419c1ee54d2'"; PRAGMA cipher_compatibility = 3; 85 | 86 | ... 87 | ``` 88 | 89 | 如果没有，提示SIP，则参见之前的步骤； 90 | 91 | 如果没有，也不是SIP，则我也不知道啥原因，请联系我 :) 92 | 93 | 如果有，则说明运行成功，你可以把输出内容拷贝到`data/dbcracker.log`文件内（没有就新建一个）。 94 | 95 | 以后，可以直接使用以下自动往目标文件写入关键信息（而无需手动拷贝）： 96 | 97 | ```shell 98 | # monitor into log file, so that to be read by our programme 99 | pgrep -f '^/Applications/WeChat.app/Contents/MacOS/WeChat' | xargs sudo wechat-decipher-macos/macos/dbcracker.d -p > data/dbcracker.log 100 | ``` 101 | 102 | ## python sdk 103 | 104 | 在有了`data/dbcracker.log`文件之后，就可以使用我们封装的sdk，它会自动解析数据库，并提供我们的日常使用功能。 105 | 106 | ### inspect all your local wechat databases 107 | 108 | ```shell 109 | # change to your app data path 110 | cd '/Users/mark/Library/Containers/com.tencent.xinWeChat/Data/Library/Application Support/com.tencent.xinWeChat/2.0b4.0.9/' 111 | ``` 112 | 113 | ```text 114 | (venv) 2022/07/04 11:27:23 (base) ➜ 2.0b4.0.9 git:(master) ✗ tree --prune -P "*.db" 115 | . 116 | ├── 1d35a41b3adb8b335cc59362ad55ee88 117 | │   ├── Account 118 | │   │   └── Beta.db 119 | │   ├── ChatSync 120 | │   │   └── ChatSync.db 121 | │   ├── Contact 122 | │   │   └── wccontact_new2.db 123 | │   ├── Favorites 124 | │   │   └── favorites.db 125 | │   ├── FileStateSync 126 | │   │   └── filestatesync.db 127 | │   ├── Group 128 | │   │   └── group_new.db 129 | │   ├── MMLive 130 | │   │   └── live_main.db 131 | │   ├── Message 132 | │   │   ├── fileMsg.db 133 | │   │   ├── fts 134 | │   │   │   └── ftsmessage.db 135 | │   │   ├── ftsfile 136 | │   │   │   └── ftsfilemessage.db 137 | │   │   ├── msg_0.db 138 | │   │   ├── msg_1.db 139 | │   │   ├── msg_2.db 140 | │   │   ├── msg_3.db 141 | │   │   ├── msg_4.db 142 | │   │   ├── msg_5.db 143 | │   │   ├── msg_6.db 144 | │   │   ├── msg_7.db 145 | │   │   ├── msg_8.db 146 | │   │   └── msg_9.db 147 | │   ├── RevokeMsg 148 | │   │   └── revokemsg.db 149 | │   ├── Session 150 | │   │   └── session_new.db 151 | │   ├── Stickers 152 | │   │   └── stickers.db 153 | │   ├── Sync 154 | │   │   ├── openim_oplog.db 155 | │   │   └── oplog_1.1.db 156 | │   ├── solitaire 157 | │   │   └── solitaire_chat.db 158 | │   └── voip 159 | │   └── multiTalk 160 | │   └── multiTalk.db 161 | ├── Backup 162 | │   └── 1d35a41b3adb8b335cc59362ad55ee88 163 | │   ├── A2158f8233bc48b5 164 | │   │   └── Backup.db 165 | │   └── F10A43B8-5032-4E21-A627-F26663F39304 166 | │   └── Backup.db 167 | └── KeyValue 168 | └── 1d35a41b3adb8b335cc59362ad55ee88 169 | └── KeyValue.db 170 | 171 | 24 directories, 30 files 172 | ``` 173 | 174 | ### python environment preparation 175 | 176 | ```shell 177 | pip install virtualenv 178 | virtualenv venv 179 | source venv/bin/python 180 | pip install -r requirements.txt 181 | ``` 182 | 183 | ### test all the database keys 184 | 185 | ```shell 186 | python src/main.py 187 | ``` 188 | 189 | ## ref 190 | 191 | - https://github.com/nalzok/wechat-decipher-macos 192 | - https://github.com/sqlcipher/sqlcipher 193 | - https://github.com/rigglemania/pysqlcipher3 194 | - [Mac终端使用Sqlcipher加解密基础过程详解_Martin.Mu `s Special Column-CSDN博客_mac sqlcipher](https://blog.csdn.net/u011195398/article/details/85266214) 195 | -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/components/TableList.tsx: -------------------------------------------------------------------------------- 1 | import {useEffect, useState} from 'react'; 2 | import {DatabaseInfo, TableInfo} from '../types'; 3 | import {dbManager} from '../api'; 4 | import {AlertCircle, Hash, Loader, Table} from 'lucide-react'; 5 | import {clsx} from 'clsx'; 6 | 7 | interface TableListProps { 8 | database: DatabaseInfo; 9 | onSelectTable: (table: TableInfo) => void; 10 | selectedTableName?: string; 11 | } 12 | 13 | export function TableList({database, onSelectTable, selectedTableName}: TableListProps) { 14 | const [tables, setTables] = useState([]); 15 | const [loading, setLoading] = useState(false); 16 | const [error, setError] = useState(null); 17 | const [connected, setConnected] = useState(false); 18 | 19 | useEffect(() => { 20 | if (database) { 21 | connectAndLoadTables(); 22 | } 23 | }, [database]); 24 | 25 | const connectAndLoadTables = async () => { 26 | try { 27 | setLoading(true); 28 | setError(null); 29 | 30 | // Connect to the database 31 | await dbManager.connectDatabase(database.id); 32 | setConnected(true); 33 | 34 | // Load tables 35 | const tableList = await dbManager.getTables(database.id); 36 | setTables(tableList); 37 | } catch (err) { 38 | setError(`Failed to connect to database: ${err}`); 39 | setConnected(false); 40 | } finally { 41 | setLoading(false); 42 | } 43 | }; 44 | 45 | const formatRowCount = (count?: number): string => { 46 | if (count === undefined) return 'Unknown'; 47 | if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M`; 48 | if (count >= 1000) return `${(count / 1000).toFixed(1)}K`; 49 | return count.toString(); 50 | }; 51 | 52 | if (loading) { 53 | return ( 54 |
55 | 56 |
57 | ); 58 | } 59 | 60 | if (error) { 61 | return ( 62 |
63 |
64 | 65 |
66 |

Connection Error

67 |

{error}

68 | 74 |
75 |
76 |
77 | ); 78 | } 79 | 80 | if (!connected) { 81 | return ( 82 |
83 | 84 |

Not connected to database

85 |
86 | ); 87 | } 88 | 89 | if (tables.length === 0) { 90 | return ( 91 |
92 |
93 |

No tables found in this database

94 | 95 | ); 96 | } 97 | 98 | return ( 99 |
100 | {/* 连接状态指示 */} 101 |
102 |
103 | 已连接 104 |
105 | 106 |
107 | {tables.map((table) => ( 108 |
onSelectTable(table)} 111 | className={clsx( 112 | 'p-3 rounded-xl border cursor-pointer transition-all duration-200 hover:shadow-sm', 113 | selectedTableName === table.name 114 | ? 'border-blue-500 bg-blue-50 shadow-sm ring-1 ring-blue-100' 115 | : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50' 116 | )} 117 | > 118 |
119 |
120 |
121 |
122 | 123 | {table.name} 124 | 125 | 126 |
127 |
128 | 129 | {formatRowCount(table.row_count)} 130 |
131 |
{table.columns.length} 列
132 |
133 | 134 | 135 | ))} 136 | 137 | 138 | ); 139 | } -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/components/Avatar.tsx: -------------------------------------------------------------------------------- 1 | import {useMemo} from 'react'; 2 | import {User} from 'lucide-react'; 3 | 4 | interface AvatarProps { 5 | name: string; 6 | size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'; 7 | className?: string; 8 | showFallback?: boolean; 9 | } 10 | 11 | export function Avatar({name, size = 'md', className = '', showFallback = true}: AvatarProps) { 12 | const {displayChar, backgroundColor, textColor} = useMemo(() => { 13 | // 生成显示字符 14 | const getDisplayChar = (name: string): string => { 15 | if (!name || name.trim() === '') return '?'; 16 | 17 | const trimmedName = name.trim(); 18 | 19 | // 中文名字：取最后一个字符（通常是名） 20 | if (/[\u4e00-\u9fa5]/.test(trimmedName)) { 21 | return trimmedName.charAt(trimmedName.length - 1); 22 | } 23 | 24 | // 英文名字：取首字母 25 | if (/[a-zA-Z]/.test(trimmedName)) { 26 | return trimmedName.charAt(0).toUpperCase(); 27 | } 28 | 29 | // 数字或特殊字符：取第一个字符 30 | return trimmedName.charAt(0); 31 | }; 32 | 33 | // 基于名字生成一致的颜色 34 | const getAvatarColors = (name: string): { backgroundColor: string; textColor: string } => { 35 | if (!name) return {backgroundColor: 'bg-gray-500', textColor: 'text-white'}; 36 | 37 | // 预定义的颜色方案 38 | const colorSchemes = [ 39 | {bg: 'bg-blue-500', text: 'text-white'}, 40 | {bg: 'bg-green-500', text: 'text-white'}, 41 | {bg: 'bg-purple-500', text: 'text-white'}, 42 | {bg: 'bg-red-500', text: 'text-white'}, 43 | {bg: 'bg-orange-500', text: 'text-white'}, 44 | {bg: 'bg-teal-500', text: 'text-white'}, 45 | {bg: 'bg-pink-500', text: 'text-white'}, 46 | {bg: 'bg-indigo-500', text: 'text-white'}, 47 | {bg: 'bg-cyan-500', text: 'text-white'}, 48 | {bg: 'bg-emerald-500', text: 'text-white'}, 49 | {bg: 'bg-amber-500', text: 'text-white'}, 50 | {bg: 'bg-lime-500', text: 'text-white'}, 51 | {bg: 'bg-rose-500', text: 'text-white'}, 52 | {bg: 'bg-violet-500', text: 'text-white'}, 53 | {bg: 'bg-fuchsia-500', text: 'text-white'}, 54 | ]; 55 | 56 | // 基于名字的hash生成一致的颜色索引 57 | let hash = 0; 58 | for (let i = 0; i < name.length; i++) { 59 | const char = name.charCodeAt(i); 60 | hash = ((hash << 5) - hash) + char; 61 | hash = hash & hash; // Convert to 32-bit integer 62 | } 63 | 64 | const colorIndex = Math.abs(hash) % colorSchemes.length; 65 | return colorSchemes[colorIndex]; 66 | }; 67 | 68 | const displayChar = getDisplayChar(name); 69 | const colors = getAvatarColors(name); 70 | 71 | return { 72 | displayChar, 73 | backgroundColor: colors.bg, 74 | textColor: colors.text 75 | }; 76 | }, [name]); 77 | 78 | const sizeClasses = { 79 | xs: 'w-6 h-6 text-xs', 80 | sm: 'w-8 h-8 text-sm', 81 | md: 'w-10 h-10 text-base', 82 | lg: 'w-12 h-12 text-lg', 83 | xl: 'w-16 h-16 text-xl' 84 | }; 85 | 86 | return ( 87 |
99 | {showFallback && (!name || name.trim() === '') ? ( 100 | 101 | ) : ( 102 | displayChar 103 | )} 104 |
105 | ); 106 | } 107 | 108 | // 头像和名字组合组件 109 | interface AvatarWithNameProps { 110 | name: string; 111 | subtitle?: string; 112 | avatarSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'; 113 | layout?: 'horizontal' | 'vertical'; 114 | className?: string; 115 | showSubtitle?: boolean; 116 | } 117 | 118 | export function AvatarWithName({ 119 | name, 120 | subtitle, 121 | avatarSize = 'md', 122 | layout = 'horizontal', 123 | className = '', 124 | showSubtitle = true 125 | }: AvatarWithNameProps) { 126 | const layoutClasses = layout === 'horizontal' 127 | ? 'flex items-center space-x-3' 128 | : 'flex flex-col items-center space-y-2'; 129 | 130 | const textAlignClass = layout === 'horizontal' ? 'text-left' : 'text-center'; 131 | 132 | return ( 133 |
134 | 135 |
136 |

137 | {name || '未知用户'} 138 |

139 | {showSubtitle && subtitle && ( 140 |

141 | {subtitle} 142 |

143 | )} 144 |
145 |
146 | ); 147 | } 148 | 149 | // 用于消息气泡的小头像组件 150 | interface MessageAvatarProps { 151 | name: string; 152 | isOwn?: boolean; 153 | className?: string; 154 | } 155 | 156 | export function MessageAvatar({name, isOwn = false, className = ''}: MessageAvatarProps) { 157 | return ( 158 | 163 | ); 164 | } -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/hooks/useAutoConnect.ts: -------------------------------------------------------------------------------- 1 | import {useEffect, useState} from 'react'; 2 | import {useAtom} from 'jotai'; 3 | import {databasesAtom} from '../store/atoms'; 4 | import {AutoConnectService} from '../services/autoConnectService'; 5 | import {DatabaseInfo} from '../types'; 6 | 7 | export interface AutoConnectState { 8 | isAutoConnecting: boolean; 9 | autoConnectProgress: { 10 | message: string; 11 | current: number; 12 | total: number; 13 | } | null; 14 | autoConnectError: string | null; 15 | connectedDatabases: DatabaseInfo[]; 16 | } 17 | 18 | export function useAutoConnect() { 19 | const [databases, setDatabases] = useAtom(databasesAtom); 20 | const [state, setState] = useState({ 21 | isAutoConnecting: false, 22 | autoConnectProgress: null, 23 | autoConnectError: null, 24 | connectedDatabases: [] 25 | }); 26 | 27 | // 在组件挂载时自动连接 28 | useEffect(() => { 29 | let mounted = true; 30 | 31 | const performAutoConnect = async () => { 32 | if (!AutoConnectService.shouldShowAutoConnectPrompt()) { 33 | return; 34 | } 35 | 36 | setState(prev => ({ 37 | ...prev, 38 | isAutoConnecting: true, 39 | autoConnectError: null 40 | })); 41 | 42 | try { 43 | const connectedDatabases = await AutoConnectService.autoConnect( 44 | (message, current, total) => { 45 | if (mounted) { 46 | setState(prev => ({ 47 | ...prev, 48 | autoConnectProgress: {message, current, total} 49 | })); 50 | } 51 | }, 52 | (error) => { 53 | if (mounted) { 54 | setState(prev => ({ 55 | ...prev, 56 | autoConnectError: error 57 | })); 58 | } 59 | } 60 | ); 61 | 62 | if (mounted) { 63 | setState(prev => ({ 64 | ...prev, 65 | connectedDatabases, 66 | isAutoConnecting: false, 67 | autoConnectProgress: null 68 | })); 69 | 70 | // 更新全局数据库状态 71 | if (connectedDatabases.length > 0) { 72 | setDatabases(connectedDatabases); 73 | } 74 | } 75 | 76 | } catch (error) { 77 | if (mounted) { 78 | const errorMessage = error instanceof Error ? error.message : '自动连接失败'; 79 | setState(prev => ({ 80 | ...prev, 81 | isAutoConnecting: false, 82 | autoConnectError: errorMessage, 83 | autoConnectProgress: null 84 | })); 85 | } 86 | } 87 | }; 88 | 89 | // 延迟500ms开始自动连接，让UI先渲染 90 | const timer = setTimeout(performAutoConnect, 500); 91 | 92 | return () => { 93 | mounted = false; 94 | clearTimeout(timer); 95 | }; 96 | }, [setDatabases]); 97 | 98 | // 手动触发自动连接 99 | const triggerAutoConnect = async () => { 100 | setState(prev => ({ 101 | ...prev, 102 | isAutoConnecting: true, 103 | autoConnectError: null, 104 | autoConnectProgress: null 105 | })); 106 | 107 | try { 108 | const connectedDatabases = await AutoConnectService.autoConnect( 109 | (message, current, total) => { 110 | setState(prev => ({ 111 | ...prev, 112 | autoConnectProgress: {message, current, total} 113 | })); 114 | }, 115 | (error) => { 116 | setState(prev => ({ 117 | ...prev, 118 | autoConnectError: error 119 | })); 120 | } 121 | ); 122 | 123 | setState(prev => ({ 124 | ...prev, 125 | connectedDatabases, 126 | isAutoConnecting: false, 127 | autoConnectProgress: null 128 | })); 129 | 130 | // 更新全局数据库状态 131 | if (connectedDatabases.length > 0) { 132 | setDatabases(connectedDatabases); 133 | } 134 | 135 | } catch (error) { 136 | const errorMessage = error instanceof Error ? error.message : '自动连接失败'; 137 | setState(prev => ({ 138 | ...prev, 139 | isAutoConnecting: false, 140 | autoConnectError: errorMessage, 141 | autoConnectProgress: null 142 | })); 143 | } 144 | }; 145 | 146 | // 更新已连接数据库列表 147 | const updateConnectedDatabases = (newDatabases: DatabaseInfo[]) => { 148 | AutoConnectService.updateConnectedDatabases(newDatabases); 149 | setState(prev => ({ 150 | ...prev, 151 | connectedDatabases: newDatabases 152 | })); 153 | }; 154 | 155 | // 清除错误 156 | const clearError = () => { 157 | setState(prev => ({ 158 | ...prev, 159 | autoConnectError: null 160 | })); 161 | }; 162 | 163 | // 启用/禁用自动连接 164 | const toggleAutoConnect = (enabled: boolean) => { 165 | if (enabled) { 166 | AutoConnectService.enableAutoConnect(); 167 | } else { 168 | AutoConnectService.disableAutoConnect(); 169 | } 170 | }; 171 | 172 | return { 173 | ...state, 174 | triggerAutoConnect, 175 | updateConnectedDatabases, 176 | clearError, 177 | toggleAutoConnect 178 | }; 179 | } -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/services/autoConnectService.ts: -------------------------------------------------------------------------------- 1 | import {DatabaseInfo} from '../types'; 2 | import {dbManager} from '../api'; 3 | 4 | export interface AutoConnectSettings { 5 | enableAutoConnect: boolean; 6 | lastConnectedDatabases: DatabaseInfo[]; 7 | autoConnectTimeout: number; 8 | } 9 | 10 | export class AutoConnectService { 11 | private static readonly STORAGE_KEY = 'wechat-db-manager-autoconnect'; 12 | private static readonly DEFAULT_TIMEOUT = 30000; // 30秒超时 13 | 14 | /** 15 | * 保存自动连接设置 16 | */ 17 | static saveSettings(settings: AutoConnectSettings): void { 18 | try { 19 | localStorage.setItem(this.STORAGE_KEY, JSON.stringify(settings)); 20 | console.log('✅ 自动连接设置已保存'); 21 | } catch (error) { 22 | console.error('❌ 保存自动连接设置失败:', error); 23 | } 24 | } 25 | 26 | /** 27 | * 加载自动连接设置 28 | */ 29 | static loadSettings(): AutoConnectSettings { 30 | try { 31 | const saved = localStorage.getItem(this.STORAGE_KEY); 32 | if (saved) { 33 | const settings = JSON.parse(saved) as AutoConnectSettings; 34 | return { 35 | enableAutoConnect: settings.enableAutoConnect ?? true, 36 | lastConnectedDatabases: settings.lastConnectedDatabases ?? [], 37 | autoConnectTimeout: settings.autoConnectTimeout ?? this.DEFAULT_TIMEOUT 38 | }; 39 | } 40 | } catch (error) { 41 | console.error('❌ 加载自动连接设置失败:', error); 42 | } 43 | 44 | return { 45 | enableAutoConnect: true, 46 | lastConnectedDatabases: [], 47 | autoConnectTimeout: this.DEFAULT_TIMEOUT 48 | }; 49 | } 50 | 51 | /** 52 | * 更新已连接数据库列表 53 | */ 54 | static updateConnectedDatabases(databases: DatabaseInfo[]): void { 55 | const settings = this.loadSettings(); 56 | settings.lastConnectedDatabases = databases; 57 | this.saveSettings(settings); 58 | } 59 | 60 | /** 61 | * 自动连接到之前连接的数据库 62 | */ 63 | static async autoConnect( 64 | onProgress?: (message: string, current: number, total: number) => void, 65 | onError?: (error: string) => void 66 | ): Promise { 67 | const settings = this.loadSettings(); 68 | 69 | if (!settings.enableAutoConnect) { 70 | console.log('🚫 自动连接已禁用'); 71 | return []; 72 | } 73 | 74 | const databases = settings.lastConnectedDatabases; 75 | 76 | if (databases.length === 0) { 77 | console.log('ℹ️ 没有需要自动连接的数据库'); 78 | return []; 79 | } 80 | 81 | console.log(`🚀 开始自动连接 ${databases.length} 个数据库`); 82 | 83 | const successfulConnections: DatabaseInfo[] = []; 84 | const failedConnections: string[] = []; 85 | 86 | for (let i = 0; i < databases.length; i++) { 87 | const database = databases[i]; 88 | 89 | onProgress?.( 90 | `正在连接 ${database.filename}...`, 91 | i, 92 | databases.length 93 | ); 94 | 95 | try { 96 | // 检查文件是否仍然存在和可访问 97 | if (!database.accessible) { 98 | console.warn(`⚠️ 数据库 ${database.filename} 不可访问，跳过`); 99 | failedConnections.push(`${database.filename}: 文件不可访问`); 100 | continue; 101 | } 102 | 103 | // 尝试连接 104 | const connectPromise = dbManager.connectDatabase(database.id); 105 | const timeoutPromise = new Promise((_, reject) => { 106 | setTimeout(() => reject(new Error('连接超时')), settings.autoConnectTimeout); 107 | }); 108 | 109 | await Promise.race([connectPromise, timeoutPromise]); 110 | 111 | successfulConnections.push(database); 112 | console.log(`✅ 成功连接数据库: ${database.filename}`); 113 | 114 | } catch (error) { 115 | const errorMessage = error instanceof Error ? error.message : '未知错误'; 116 | console.error(`❌ 连接数据库 ${database.filename} 失败:`, errorMessage); 117 | failedConnections.push(`${database.filename}: ${errorMessage}`); 118 | } 119 | } 120 | 121 | onProgress?.( 122 | `自动连接完成`, 123 | databases.length, 124 | databases.length 125 | ); 126 | 127 | // 报告结果 128 | if (successfulConnections.length > 0) { 129 | console.log(`✅ 成功自动连接 ${successfulConnections.length}/${databases.length} 个数据库`); 130 | } 131 | 132 | if (failedConnections.length > 0) { 133 | const errorMessage = `部分数据库连接失败：\n${failedConnections.join('\n')}`; 134 | console.warn('⚠️ 自动连接部分失败:', errorMessage); 135 | onError?.(errorMessage); 136 | } 137 | 138 | return successfulConnections; 139 | } 140 | 141 | /** 142 | * 禁用自动连接 143 | */ 144 | static disableAutoConnect(): void { 145 | const settings = this.loadSettings(); 146 | settings.enableAutoConnect = false; 147 | this.saveSettings(settings); 148 | } 149 | 150 | /** 151 | * 启用自动连接 152 | */ 153 | static enableAutoConnect(): void { 154 | const settings = this.loadSettings(); 155 | settings.enableAutoConnect = true; 156 | this.saveSettings(settings); 157 | } 158 | 159 | /** 160 | * 清除自动连接设置 161 | */ 162 | static clearSettings(): void { 163 | try { 164 | localStorage.removeItem(this.STORAGE_KEY); 165 | console.log('✅ 自动连接设置已清除'); 166 | } catch (error) { 167 | console.error('❌ 清除自动连接设置失败:', error); 168 | } 169 | } 170 | 171 | /** 172 | * 检查是否应该显示自动连接提示 173 | */ 174 | static shouldShowAutoConnectPrompt(): boolean { 175 | const settings = this.loadSettings(); 176 | return settings.enableAutoConnect && settings.lastConnectedDatabases.length > 0; 177 | } 178 | } -------------------------------------------------------------------------------- /packages/wechat-db-manager/README.md: -------------------------------------------------------------------------------- 1 | # WeChat Database Manager 2 | 3 | A comprehensive Tauri application for managing and browsing WeChat SQLCipher databases. This application provides a user-friendly interface to explore WeChat database contents, execute queries, and export data. 4 | 5 | ## Features 6 | 7 | ### Database Management 8 | - **Automatic Key Parsing**: Parses `.keys` files generated by the WeChat database cracker 9 | - **Database Connection**: Securely connects to SQLCipher databases using extracted keys 10 | - **Database Browser**: Browse all available databases with metadata (size, type, accessibility) 11 | - **Connection Pool**: Manages multiple database connections efficiently 12 | 13 | ### Data Exploration 14 | - **Table Browser**: Navigate through database tables with column information 15 | - **Data Viewer**: Browse table contents with pagination and search 16 | - **Custom Queries**: Execute custom SQL queries with result visualization 17 | - **Schema Inspector**: View table structures and column details 18 | 19 | ### Export & Analysis 20 | - **CSV Export**: Export table data to CSV format 21 | - **Query Results**: Export custom query results 22 | - **Data Visualization**: View row counts, data types, and table statistics 23 | 24 | ### User Interface 25 | - **Modern UI**: Clean, responsive interface built with React and Tailwind CSS 26 | - **Database Types**: Color-coded database types (Messages, Contacts, Groups, etc.) 27 | - **Real-time Updates**: Live data loading with loading states 28 | - **Error Handling**: Comprehensive error handling with user-friendly messages 29 | 30 | ## Architecture 31 | 32 | ### Backend (Rust/Tauri) 33 | - **SQLCipher Integration**: Uses `rusqlite` with SQLCipher support 34 | - **Database Module**: Handles database parsing, connection, and queries 35 | - **API Endpoints**: Exposes database operations to frontend 36 | - **Security**: Secure key handling and database access 37 | 38 | ### Frontend (React/TypeScript) 39 | - **Component Architecture**: Modular React components for different views 40 | - **State Management**: React hooks for application state 41 | - **API Integration**: Tauri invoke API for backend communication 42 | - **Responsive Design**: Mobile-friendly interface with Tailwind CSS 43 | 44 | ## Usage 45 | 46 | ### 1. Prerequisites 47 | - Rust development environment 48 | - Node.js and pnpm 49 | - SQLCipher libraries 50 | - WeChat `.keys` file from the database cracker 51 | 52 | ### 2. Development Setup 53 | 54 | ```bash 55 | # Install dependencies 56 | pnpm install 57 | 58 | # Start development server 59 | pnpm tauri dev 60 | ``` 61 | 62 | ### 3. Loading Database Keys 63 | 64 | 1. **Generate Keys**: First, use the WeChat database cracker to generate a `.keys` file 65 | 2. **Load Keys**: In the application, click "Load Keys File" to import your database configurations 66 | 3. **Browse Databases**: Select databases from the sidebar to view their tables 67 | 68 | ### 4. Exploring Data 69 | 70 | 1. **Select Database**: Click on a database in the left sidebar 71 | 2. **Connect**: The application will automatically connect to the selected database 72 | 3. **Browse Tables**: Select tables from the table list to view their contents 73 | 4. **Query Data**: Use the search button to execute custom SQL queries 74 | 5. **Export Data**: Click the download button to export table data as CSV 75 | 76 | ### 5. Database Types 77 | 78 | The application recognizes these WeChat database types: 79 | - **Messages**: Chat messages (msg_0.db to msg_9.db) 80 | - **Contacts**: Contact information (wccontact_new2.db) 81 | - **Groups**: Group information (group_new.db) 82 | - **Sessions**: Session data (session_new.db) 83 | - **Favorites**: Bookmarked content (favorites.db) 84 | - **Media**: Media file metadata (mediaData.db) 85 | - **Search**: Full-text search indexes (ftsmessage.db) 86 | 87 | ### 6. Security Considerations 88 | 89 | - Database keys are handled securely in memory 90 | - No persistent storage of encryption keys 91 | - Read-only access to database files 92 | - Connection pooling with proper cleanup 93 | 94 | ## File Structure 95 | 96 | ``` 97 | src/ 98 | ├── components/ 99 | │ ├── DatabaseList.tsx # Database browser component 100 | │ ├── TableList.tsx # Table browser component 101 | │ └── TableView.tsx # Data viewer component 102 | ├── api.ts # Backend API interface 103 | ├── types.ts # TypeScript type definitions 104 | ├── App.tsx # Main application component 105 | └── main.tsx # Application entry point 106 | 107 | src-tauri/ 108 | ├── src/ 109 | │ ├── database.rs # Database management module 110 | │ ├── lib.rs # Tauri commands and setup 111 | │ └── main.rs # Application entry point 112 | ├── Cargo.toml # Rust dependencies 113 | └── tauri.conf.json # Tauri configuration 114 | ``` 115 | 116 | ## Build for Production 117 | 118 | ```bash 119 | # Build the application 120 | pnpm build 121 | 122 | # Create distribution package 123 | pnpm tauri build 124 | ``` 125 | 126 | ## Troubleshooting 127 | 128 | ### Common Issues 129 | 130 | 1. **SQLCipher Connection Error** 131 | - Ensure SQLCipher is properly installed 132 | - Verify database file accessibility 133 | - Check if the database keys are correct 134 | 135 | 2. **Database Not Found** 136 | - Verify the `.keys` file path is correct 137 | - Check file permissions 138 | - Ensure the database files exist at the specified paths 139 | 140 | 3. **Table Loading Issues** 141 | - Verify database connection is established 142 | - Check if the database is encrypted correctly 143 | - Ensure proper SQLCipher compatibility settings 144 | 145 | ### Development Tips 146 | 147 | 1. **Adding New Database Types** 148 | - Update the `DB_TYPE_LABELS` and `DB_TYPE_COLORS` in `types.ts` 149 | - Modify the `extract_db_type` function in `database.rs` 150 | 151 | 2. **Custom Query Features** 152 | - Use the custom query input to explore database schemas 153 | - Common queries: `SELECT * FROM sqlite_master` to view all tables 154 | - Use `PRAGMA table_info(table_name)` to inspect table structure 155 | 156 | 3. **Performance Optimization** 157 | - Use pagination for large datasets 158 | - Limit query results with `LIMIT` clause 159 | - Index frequently queried columns 160 | 161 | ## Security Notes 162 | 163 | This application is designed for legitimate database recovery and analysis purposes. It: 164 | - Handles sensitive personal data with appropriate security measures 165 | - Provides read-only access to database contents 166 | - Implements proper encryption key management 167 | - Follows security best practices for data handling 168 | 169 | ## License 170 | 171 | This project is part of the WeChat Database Cracker suite and follows the same licensing terms. -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/components/FilePathInput.tsx: -------------------------------------------------------------------------------- 1 | import {useState} from 'react'; 2 | import {useAtom} from 'jotai'; 3 | import {databasesAtom, errorAtom, loadingAtom, persistedKeysPathAtom} from '../store/atoms'; 4 | import {dbManager} from '../api'; 5 | import {AlertCircle, Check, File, X} from 'lucide-react'; 6 | 7 | interface FilePathInputProps { 8 | onFileLoaded?: () => void; 9 | } 10 | 11 | export function FilePathInput({onFileLoaded}: FilePathInputProps) { 12 | const [keysPath, setKeysPath] = useAtom(persistedKeysPathAtom); 13 | const [loading, setLoading] = useAtom(loadingAtom); 14 | const [error, setError] = useAtom(errorAtom); 15 | const [, setDatabases] = useAtom(databasesAtom); 16 | const [inputPath, setInputPath] = useState(keysPath || ''); 17 | const [isEditing, setIsEditing] = useState(false); 18 | 19 | const loadFile = async (path: string) => { 20 | try { 21 | setLoading(true); 22 | setError(null); 23 | 24 | const databases = await dbManager.loadKeysFile(path); 25 | setDatabases(databases); 26 | setKeysPath(path); 27 | setInputPath(path); 28 | setIsEditing(false); 29 | onFileLoaded?.(); 30 | } catch (err) { 31 | setError(`Failed to load keys file: ${err}`); 32 | } finally { 33 | setLoading(false); 34 | } 35 | }; 36 | 37 | const handleSubmit = async (e: React.FormEvent) => { 38 | e.preventDefault(); 39 | if (inputPath.trim()) { 40 | await loadFile(inputPath.trim()); 41 | } 42 | }; 43 | 44 | const handleCancel = () => { 45 | setInputPath(keysPath || ''); 46 | setIsEditing(false); 47 | }; 48 | 49 | const clearFile = () => { 50 | setKeysPath(null); 51 | setInputPath(''); 52 | setDatabases([]); 53 | setError(null); 54 | setIsEditing(false); 55 | }; 56 | 57 | return ( 58 |
59 |
60 |

Keys File Path

61 | {keysPath && !isEditing && ( 62 | 69 | )} 70 |
71 | 72 | {isEditing ? ( 73 |
74 |
75 | 76 | setInputPath(e.target.value)} 80 | placeholder="Enter path to .keys file..." 81 | className="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" 82 | disabled={loading} 83 | /> 84 |
85 | 86 |
87 | 95 | 96 | 104 |
105 | 106 | ) : keysPath ? ( 107 |
108 |
109 | 110 | 111 | {keysPath} 112 | 113 |
114 | 115 |
116 | 123 | 124 | 131 |
132 |
133 | ) : ( 134 |
135 |
136 | 137 | No keys file selected 138 |
139 | 140 | 146 |
147 | )} 148 | 149 | {error && ( 150 |
151 | {error} 152 |
153 | )} 154 |
155 | ); 156 | } -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/utils/contactParser.tsx: -------------------------------------------------------------------------------- 1 | import {QueryResult} from '../types'; 2 | 3 | export interface EnhancedContact { 4 | id: string; 5 | displayName: string; // 优先显示的名字 6 | nickname?: string; // 昵称 7 | remark?: string; // 备注名 8 | username?: string; // 用户名/微信号 9 | realName?: string; // 真实姓名 10 | avatar?: string; // 头像数据 11 | phoneNumber?: string; // 电话号码 12 | email?: string; // 邮箱 13 | contactType?: 'user' | 'group' | 'official' | 'unknown'; 14 | lastActiveTime?: string; // 最后活跃时间 15 | isBlocked?: boolean; // 是否被屏蔽 16 | isFriend?: boolean; // 是否为好友 17 | originalId?: string; // 原始ID（M_NSUSRNAME等）用于MD5映射 18 | } 19 | 20 | export class ContactParser { 21 | /** 22 | * 解析联系人数据，智能提取各种字段 23 | */ 24 | static parseContacts(result: QueryResult): EnhancedContact[] { 25 | const {columns, rows} = result; 26 | 27 | // 智能字段映射 28 | const fieldMapping = this.createFieldMapping(columns); 29 | 30 | return rows 31 | .map((row, index) => this.parseContact(row, fieldMapping, index)) 32 | .filter(contact => this.isValidContact(contact)); 33 | } 34 | 35 | /** 36 | * 搜索联系人 37 | */ 38 | static searchContacts(contacts: EnhancedContact[], searchTerm: string): EnhancedContact[] { 39 | if (!searchTerm.trim()) return contacts; 40 | 41 | const term = searchTerm.toLowerCase(); 42 | 43 | return contacts.filter(contact => 44 | contact.displayName.toLowerCase().includes(term) || 45 | contact.nickname?.toLowerCase().includes(term) || 46 | contact.remark?.toLowerCase().includes(term) || 47 | contact.username?.toLowerCase().includes(term) || 48 | contact.realName?.toLowerCase().includes(term) 49 | ); 50 | } 51 | 52 | /** 53 | * 按类型过滤联系人 54 | */ 55 | static filterByType(contacts: EnhancedContact[], type: EnhancedContact['contactType']): EnhancedContact[] { 56 | return contacts.filter(contact => contact.contactType === type); 57 | } 58 | 59 | /** 60 | * 获取联系人的最佳显示信息 61 | */ 62 | static getDisplayInfo(contact: EnhancedContact): { name: string; subtitle: string } { 63 | const name = contact.displayName; 64 | 65 | // 构建副标题 66 | const subtitleParts: string[] = []; 67 | 68 | if (contact.remark && contact.remark !== contact.displayName) { 69 | subtitleParts.push(`备注: ${contact.remark}`); 70 | } else if (contact.nickname && contact.nickname !== contact.displayName) { 71 | subtitleParts.push(`昵称: ${contact.nickname}`); 72 | } 73 | 74 | if (contact.username && contact.username !== contact.displayName) { 75 | subtitleParts.push(`微信号: ${contact.username}`); 76 | } 77 | 78 | const subtitle = subtitleParts.length > 0 79 | ? subtitleParts.join(' • ') 80 | : contact.contactType === 'group' 81 | ? '群聊' 82 | : contact.contactType === 'official' 83 | ? '公众号' 84 | : '点击查看聊天记录'; 85 | 86 | return {name, subtitle}; 87 | } 88 | 89 | /** 90 | * 创建字段映射 91 | */ 92 | private static createFieldMapping(columns: string[]) { 93 | const mapping: Record = {}; 94 | 95 | // 定义字段匹配规则 96 | const fieldRules = { 97 | // 名字相关字段（按优先级排序） 98 | remark: ['remark', 'remarkname', 'remark_name', 'contact_remark'], 99 | nickname: ['nickname', 'nick_name', 'displayname', 'display_name', 'name'], 100 | realname: ['realname', 'real_name', 'fullname', 'full_name'], 101 | 102 | // ID相关字段 - 添加M_NSUSRNAME支持 103 | username: ['M_NSUSRNAME', 'm_nsusrname', 'MUSRNAME', 'musrname', 'username', 'user_name', 'wxid', 'wx_id', 'userid', 'user_id'], 104 | contactid: ['contactid', 'contact_id', 'id', 'talker'], 105 | 106 | // 头像相关字段 107 | avatar: ['avatar', 'headimg', 'headimgurl', 'head_img_url', 'portrait', 'photo'], 108 | 109 | // 联系方式 110 | phone: ['phone', 'phonenumber', 'phone_number', 'mobile', 'tel'], 111 | email: ['email', 'mail', 'email_address'], 112 | 113 | // 状态字段 114 | type: ['type', 'contact_type', 'user_type', 'contacttype'], 115 | status: ['status', 'contact_status', 'friend_status'], 116 | blocked: ['blocked', 'is_blocked', 'blacklist'], 117 | 118 | // 时间字段 119 | lastactive: ['lastactive', 'last_active', 'lastseen', 'last_seen', 'updatetime', 'update_time'] 120 | }; 121 | 122 | // 为每个字段找到最匹配的列 123 | Object.entries(fieldRules).forEach(([field, patterns]) => { 124 | for (const pattern of patterns) { 125 | const index = columns.findIndex(col => 126 | col.toLowerCase().includes(pattern.toLowerCase()) 127 | ); 128 | if (index !== -1) { 129 | mapping[field] = index; 130 | break; 131 | } 132 | } 133 | }); 134 | 135 | return mapping; 136 | } 137 | 138 | /** 139 | * 解析单个联系人 140 | */ 141 | private static parseContact(row: any[], mapping: Record, index: number): EnhancedContact { 142 | const getValue = (field: string): string | undefined => { 143 | const colIndex = mapping[field]; 144 | if (colIndex === undefined || colIndex === -1) return undefined; 145 | const value = row[colIndex]; 146 | return value && String(value).trim() !== '' && String(value) !== 'null' 147 | ? String(value).trim() 148 | : undefined; 149 | }; 150 | 151 | // 提取各种名字字段 152 | const remark = getValue('remark'); 153 | const nickname = getValue('nickname'); 154 | const realname = getValue('realname'); 155 | const username = getValue('username'); 156 | 157 | // 确定显示名字的优先级：备注名 > 昵称 > 真实姓名 > 用户名 158 | const displayName = remark || nickname || realname || username || `联系人${index + 1}`; 159 | 160 | // 生成唯一ID 161 | const contactId = getValue('contactid') || getValue('username') || displayName || `contact_${index}`; 162 | 163 | // 保留原始ID和M_NSUSRNAME用于调试和MD5映射 164 | const originalId = getValue('username') || getValue('contactid'); 165 | 166 | // 判断联系人类型 167 | const contactType = this.determineContactType(displayName, username); 168 | 169 | return { 170 | id: contactId, 171 | displayName, 172 | nickname, 173 | remark, 174 | username, 175 | realName: realname, 176 | avatar: getValue('avatar'), 177 | phoneNumber: getValue('phone'), 178 | email: getValue('email'), 179 | contactType, 180 | lastActiveTime: getValue('lastactive'), 181 | isBlocked: this.parseBoolean(getValue('blocked')), 182 | isFriend: contactType === 'user', 183 | originalId: originalId // 添加原始ID用于MD5映射 184 | }; 185 | } 186 | 187 | /** 188 | * 判断联系人类型 189 | */ 190 | private static determineContactType(displayName?: string, username?: string): EnhancedContact['contactType'] { 191 | if (!displayName && !username) return 'unknown'; 192 | 193 | const name = displayName || username || ''; 194 | 195 | // 群聊识别 196 | if (name.includes('@chatroom') || name.startsWith('群聊') || name.includes('群')) { 197 | return 'group'; 198 | } 199 | 200 | // 公众号识别 201 | if (name.startsWith('gh_') || name.includes('公众号') || name.includes('服务号')) { 202 | return 'official'; 203 | } 204 | 205 | // 系统账号识别 206 | if (name.includes('微信') || name.includes('系统') || name.startsWith('wx')) { 207 | return 'official'; 208 | } 209 | 210 | return 'user'; 211 | } 212 | 213 | /** 214 | * 解析布尔值 215 | */ 216 | private static parseBoolean(value?: string): boolean { 217 | if (!value) return false; 218 | return value.toLowerCase() === 'true' || value === '1' || value === 'yes'; 219 | } 220 | 221 | /** 222 | * 验证联系人是否有效 223 | */ 224 | private static isValidContact(contact: EnhancedContact): boolean { 225 | return !!( 226 | contact.id && 227 | contact.displayName && 228 | contact.displayName.trim() !== '' && 229 | !contact.displayName.includes('null') 230 | ); 231 | } 232 | } -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/utils/contactParser.ts: -------------------------------------------------------------------------------- 1 | import {QueryResult} from '../types'; 2 | 3 | export interface EnhancedContact { 4 | id: string; 5 | originalId?: string; // 原始数据库标识符，用于消息匹配 6 | mNsUsrName?: string; // m_nsUsrName字段值，用于MD5表映射 7 | displayName: string; // 优先显示的名字 8 | nickname?: string; // 昵称 9 | remark?: string; // 备注名 10 | username?: string; // 用户名/微信号 11 | realName?: string; // 真实姓名 12 | avatar?: string; // 头像数据 13 | phoneNumber?: string; // 电话号码 14 | email?: string; // 邮箱 15 | contactType?: 'user' | 'group' | 'official' | 'unknown'; 16 | lastActiveTime?: string; // 最后活跃时间 17 | isBlocked?: boolean; // 是否被屏蔽 18 | isFriend?: boolean; // 是否为好友 19 | } 20 | 21 | export class ContactParser { 22 | /** 23 | * 解析联系人数据，智能提取各种字段 24 | */ 25 | static parseContacts(result: QueryResult): EnhancedContact[] { 26 | const {columns, rows} = result; 27 | 28 | // 智能字段映射 29 | const fieldMapping = this.createFieldMapping(columns); 30 | 31 | return rows 32 | .map((row, index) => this.parseContact(row, fieldMapping, index)) 33 | .filter(contact => this.isValidContact(contact)); 34 | } 35 | 36 | /** 37 | * 搜索联系人 38 | */ 39 | static searchContacts(contacts: EnhancedContact[], searchTerm: string): EnhancedContact[] { 40 | if (!searchTerm.trim()) return contacts; 41 | 42 | const term = searchTerm.toLowerCase(); 43 | 44 | return contacts.filter(contact => 45 | contact.displayName.toLowerCase().includes(term) || 46 | contact.nickname?.toLowerCase().includes(term) || 47 | contact.remark?.toLowerCase().includes(term) || 48 | contact.username?.toLowerCase().includes(term) || 49 | contact.realName?.toLowerCase().includes(term) 50 | ); 51 | } 52 | 53 | /** 54 | * 按类型过滤联系人 55 | */ 56 | static filterByType(contacts: EnhancedContact[], type: EnhancedContact['contactType']): EnhancedContact[] { 57 | return contacts.filter(contact => contact.contactType === type); 58 | } 59 | 60 | /** 61 | * 获取联系人的最佳显示信息 62 | */ 63 | static getDisplayInfo(contact: EnhancedContact): { name: string; subtitle: string } { 64 | const name = contact.displayName; 65 | 66 | // 构建副标题 67 | const subtitleParts: string[] = []; 68 | 69 | if (contact.remark && contact.remark !== contact.displayName) { 70 | subtitleParts.push(`备注: ${contact.remark}`); 71 | } else if (contact.nickname && contact.nickname !== contact.displayName) { 72 | subtitleParts.push(`昵称: ${contact.nickname}`); 73 | } 74 | 75 | if (contact.username && contact.username !== contact.displayName) { 76 | subtitleParts.push(`微信号: ${contact.username}`); 77 | } 78 | 79 | const subtitle = subtitleParts.length > 0 80 | ? subtitleParts.join(' • ') 81 | : contact.contactType === 'group' 82 | ? '群聊' 83 | : contact.contactType === 'official' 84 | ? '公众号' 85 | : '点击查看聊天记录'; 86 | 87 | return {name, subtitle}; 88 | } 89 | 90 | /** 91 | * 创建字段映射 92 | */ 93 | private static createFieldMapping(columns: string[]) { 94 | const mapping: Record = {}; 95 | 96 | // 定义字段匹配规则 97 | const fieldRules = { 98 | // 名字相关字段（按优先级排序） 99 | remark: ['remark', 'remarkname', 'remark_name', 'contact_remark'], 100 | nickname: ['nickname', 'nick_name', 'displayname', 'display_name', 'name'], 101 | realname: ['realname', 'real_name', 'fullname', 'full_name'], 102 | 103 | // ID相关字段 104 | username: ['username', 'user_name', 'wxid', 'wx_id', 'userid', 'user_id'], 105 | contactid: ['contactid', 'contact_id', 'id', 'talker'], 106 | m_nsusrname: ['m_nsusrname', 'nsusrname', 'usr_name', 'usrname', 'nsuser'], 107 | 108 | // 头像相关字段 109 | avatar: ['avatar', 'headimg', 'headimgurl', 'head_img_url', 'portrait', 'photo'], 110 | 111 | // 联系方式 112 | phone: ['phone', 'phonenumber', 'phone_number', 'mobile', 'tel'], 113 | email: ['email', 'mail', 'email_address'], 114 | 115 | // 状态字段 116 | type: ['type', 'contact_type', 'user_type', 'contacttype'], 117 | status: ['status', 'contact_status', 'friend_status'], 118 | blocked: ['blocked', 'is_blocked', 'blacklist'], 119 | 120 | // 时间字段 121 | lastactive: ['lastactive', 'last_active', 'lastseen', 'last_seen', 'updatetime', 'update_time'] 122 | }; 123 | 124 | // 为每个字段找到最匹配的列 125 | Object.entries(fieldRules).forEach(([field, patterns]) => { 126 | for (const pattern of patterns) { 127 | const index = columns.findIndex(col => 128 | col.toLowerCase().includes(pattern.toLowerCase()) 129 | ); 130 | if (index !== -1) { 131 | mapping[field] = index; 132 | break; 133 | } 134 | } 135 | }); 136 | 137 | return mapping; 138 | } 139 | 140 | /** 141 | * 解析单个联系人 142 | */ 143 | private static parseContact(row: any[], mapping: Record, index: number): EnhancedContact { 144 | const getValue = (field: string): string | undefined => { 145 | const colIndex = mapping[field]; 146 | if (colIndex === undefined || colIndex === -1) return undefined; 147 | const value = row[colIndex]; 148 | return value && String(value).trim() !== '' && String(value) !== 'null' 149 | ? String(value).trim() 150 | : undefined; 151 | }; 152 | 153 | // 提取各种名字字段 154 | const remark = getValue('remark'); 155 | const nickname = getValue('nickname'); 156 | const realname = getValue('realname'); 157 | const username = getValue('username'); 158 | 159 | // 确定显示名字的优先级：备注名 > 昵称 > 真实姓名 > 用户名 160 | const displayName = remark || nickname || realname || username || `联系人${index + 1}`; 161 | 162 | // 生成唯一ID - 保持原始标识符用于消息匹配 163 | const primaryId = getValue('contactid') || getValue('username'); 164 | const contactId = primaryId || `contact_${index}`; 165 | 166 | // 保存原始标识符用于消息匹配 - 优先使用m_nsUsrName 167 | const mNsUsrName = getValue('m_nsusrname'); 168 | const originalId = mNsUsrName || primaryId; 169 | 170 | // 判断联系人类型 171 | const contactType = this.determineContactType(displayName, username); 172 | 173 | return { 174 | id: contactId, 175 | originalId, 176 | mNsUsrName, 177 | displayName, 178 | nickname, 179 | remark, 180 | username, 181 | realName: realname, 182 | avatar: getValue('avatar'), 183 | phoneNumber: getValue('phone'), 184 | email: getValue('email'), 185 | contactType, 186 | lastActiveTime: getValue('lastactive'), 187 | isBlocked: this.parseBoolean(getValue('blocked')), 188 | isFriend: contactType === 'user' 189 | }; 190 | } 191 | 192 | /** 193 | * 判断联系人类型 194 | */ 195 | private static determineContactType(displayName?: string, username?: string): EnhancedContact['contactType'] { 196 | if (!displayName && !username) return 'unknown'; 197 | 198 | const name = displayName || username || ''; 199 | 200 | // 群聊识别 201 | if (name.includes('@chatroom') || name.startsWith('群聊') || name.includes('群')) { 202 | return 'group'; 203 | } 204 | 205 | // 公众号识别 206 | if (name.startsWith('gh_') || name.includes('公众号') || name.includes('服务号')) { 207 | return 'official'; 208 | } 209 | 210 | // 系统账号识别 211 | if (name.includes('微信') || name.includes('系统') || name.startsWith('wx')) { 212 | return 'official'; 213 | } 214 | 215 | return 'user'; 216 | } 217 | 218 | /** 219 | * 解析布尔值 220 | */ 221 | private static parseBoolean(value?: string): boolean { 222 | if (!value) return false; 223 | return value.toLowerCase() === 'true' || value === '1' || value === 'yes'; 224 | } 225 | 226 | /** 227 | * 验证联系人是否有效 228 | */ 229 | private static isValidContact(contact: EnhancedContact): boolean { 230 | return !!( 231 | contact.id && 232 | contact.displayName && 233 | contact.displayName.trim() !== '' && 234 | !contact.displayName.includes('null') 235 | ); 236 | } 237 | } -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/utils/PerformanceOptimizer.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 可取消的操作类 3 | */ 4 | export class CancellableOperation { 5 | private cancelled = false; 6 | private timeoutId?: NodeJS.Timeout; 7 | 8 | constructor(private timeoutMs: number = 10000) { 9 | } // 默认10秒超时 10 | 11 | cancel() { 12 | this.cancelled = true; 13 | if (this.timeoutId) { 14 | clearTimeout(this.timeoutId); 15 | } 16 | } 17 | 18 | isCancelled() { 19 | return this.cancelled; 20 | } 21 | 22 | withTimeout(promise: Promise): Promise { 23 | return Promise.race([ 24 | promise, 25 | new Promise((_, reject) => { 26 | this.timeoutId = setTimeout(() => { 27 | if (!this.cancelled) { 28 | reject(new Error('Operation timed out')); 29 | } 30 | }, this.timeoutMs); 31 | }) 32 | ]); 33 | } 34 | } 35 | 36 | /** 37 | * 性能优化工具类 38 | * 处理大数据集的查询和处理 39 | */ 40 | export class PerformanceOptimizer { 41 | private static readonly BATCH_SIZE = 100; // 每批处理的记录数 42 | private static readonly MAX_SAMPLE_SIZE = 1000; // 最大采样数量 43 | private static readonly QUERY_TIMEOUT = 10000; // 查询超时时间(毫秒) 44 | 45 | /** 46 | * 高效的表采样查询 47 | * 使用时间范围和LIMIT来避免全表扫描 48 | */ 49 | static async efficientTableSample( 50 | dbManager: any, 51 | dbId: string, 52 | tableName: string, 53 | operation: CancellableOperation, 54 | sampleSize: number = PerformanceOptimizer.MAX_SAMPLE_SIZE 55 | ): Promise { 56 | if (operation.isCancelled()) { 57 | throw new Error('Operation was cancelled'); 58 | } 59 | 60 | console.log(`⚡ 开始高效采样表 ${tableName}，目标样本数: ${sampleSize}`); 61 | 62 | // 策略1：尝试按时间范围查询最新数据 63 | const timeBasedQueries = [ 64 | // 最近一周的数据 65 | `SELECT * FROM ${tableName} WHERE timestamp > ${Date.now() - 7 * 24 * 60 * 60 * 1000} ORDER BY timestamp DESC LIMIT ${sampleSize}`, 66 | // 最近一个月的数据 67 | `SELECT * FROM ${tableName} WHERE timestamp > ${Date.now() - 30 * 24 * 60 * 60 * 1000} ORDER BY timestamp DESC LIMIT ${sampleSize}`, 68 | // 如果没有timestamp字段，尝试createtime 69 | `SELECT * FROM ${tableName} WHERE createtime > ${Date.now() - 7 * 24 * 60 * 60 * 1000} ORDER BY createtime DESC LIMIT ${sampleSize}`, 70 | ]; 71 | 72 | // 策略2：如果时间查询失败，使用ROWID或其他方法 73 | const fallbackQueries = [ 74 | `SELECT * FROM ${tableName} ORDER BY ROWID DESC LIMIT ${sampleSize}`, 75 | `SELECT * FROM ${tableName} LIMIT ${sampleSize}`, 76 | ]; 77 | 78 | const allQueries = [...timeBasedQueries, ...fallbackQueries]; 79 | 80 | for (const query of allQueries) { 81 | if (operation.isCancelled()) { 82 | throw new Error('Operation was cancelled'); 83 | } 84 | 85 | try { 86 | console.log(`🔍 尝试查询: ${query.substring(0, 100)}...`); 87 | const result = await operation.withTimeout( 88 | dbManager.executeQuery(dbId, query) 89 | ); 90 | 91 | if (result.rows.length > 0) { 92 | console.log(`✅ 查询成功，获得 ${result.rows.length} 条记录`); 93 | return result.rows; 94 | } 95 | } catch (error) { 96 | console.warn(`❌ 查询失败: ${error.message}`); 97 | 98 | } 99 | } 100 | 101 | console.warn(`⚠️ 所有查询策略都失败了，表 ${tableName} 可能为空或不可访问`); 102 | return []; 103 | } 104 | 105 | /** 106 | * 分批处理大数据集 107 | */ 108 | static async processBatches( 109 | items: T[], 110 | batchProcessor: (batch: T[], batchIndex: number) => Promise, 111 | operation: CancellableOperation, 112 | onProgress?: (processed: number, total: number) => void 113 | ): Promise { 114 | const results: R[] = []; 115 | const batchSize = this.BATCH_SIZE; 116 | const totalBatches = Math.ceil(items.length / batchSize); 117 | 118 | for (let i = 0; i < totalBatches; i++) { 119 | if (operation.isCancelled()) { 120 | throw new Error('Operation was cancelled'); 121 | } 122 | 123 | const batchStart = i * batchSize; 124 | const batchEnd = Math.min(batchStart + batchSize, items.length); 125 | const batch = items.slice(batchStart, batchEnd); 126 | 127 | try { 128 | const batchResults = await batchProcessor(batch, i); 129 | results.push(...batchResults); 130 | 131 | if (onProgress) { 132 | onProgress(batchEnd, items.length); 133 | } 134 | } catch (error) { 135 | console.warn(`❌ 批次 ${i + 1}/${totalBatches} 处理失败:`, error); 136 | 137 | } 138 | } 139 | 140 | return results; 141 | } 142 | 143 | /** 144 | * 内存友好的联系人活跃度检测 145 | */ 146 | static async memoryFriendlyActivityDetection( 147 | dbManager: any, 148 | messageDbs: any[], 149 | operation: CancellableOperation, 150 | onProgress?: (current: number, total: number, message: string) => void 151 | ): Promise> { 152 | const activityMap = new Map(); 153 | let processedDbs = 0; 154 | 155 | for (const messageDb of messageDbs) { 156 | if (operation.isCancelled()) { 157 | throw new Error('Operation was cancelled'); 158 | } 159 | 160 | if (onProgress) { 161 | onProgress(processedDbs, messageDbs.length, `处理数据库 ${messageDb.filename}`); 162 | } 163 | 164 | try { 165 | await dbManager.connectDatabase(messageDb.id); 166 | const tables = await dbManager.getTables(messageDb.id); 167 | 168 | // 只查找最有可能的聊天表，避免处理太多表 169 | const chatTables = tables.filter(table => { 170 | const name = table.name.toLowerCase(); 171 | return name.startsWith('chat_') || name === 'chat'; 172 | }).slice(0, 3); // 最多只处理前3个表 173 | 174 | for (const chatTable of chatTables) { 175 | if (operation.isCancelled()) { 176 | throw new Error('Operation was cancelled'); 177 | } 178 | 179 | try { 180 | const rows = await this.efficientTableSample( 181 | dbManager, 182 | messageDb.id, 183 | chatTable.name, 184 | operation, 185 | 200 // 每个表最多采样200条记录 186 | ); 187 | 188 | rows.forEach(row => { 189 | // 提取联系人标识符 - 只检查前几个字段 190 | const possibleContactIds = [row[0], row[1], row[2]].filter(field => 191 | field && typeof field === 'string' && field.includes('@') 192 | ); 193 | 194 | // 提取时间戳 - 只检查可能的时间字段 195 | const timestamp = [row[3], row[4], row[5]].find(field => 196 | field && (typeof field === 'number' || /^\d{10,13}$/.test(String(field))) 197 | ); 198 | 199 | if (timestamp) { 200 | const timestampStr = String(timestamp); 201 | possibleContactIds.forEach(contactId => { 202 | const currentTime = activityMap.get(contactId); 203 | if (!currentTime || timestampStr > currentTime) { 204 | activityMap.set(contactId, timestampStr); 205 | } 206 | }); 207 | } 208 | }); 209 | 210 | } catch (error) { 211 | console.warn(`❌ 处理表 ${chatTable.name} 失败:`, error); 212 | } 213 | } 214 | 215 | } catch (error) { 216 | console.warn(`❌ 处理数据库 ${messageDb.filename} 失败:`, error); 217 | } 218 | 219 | processedDbs++; 220 | } 221 | 222 | return activityMap; 223 | } 224 | 225 | /** 226 | * 延迟执行，避免阻塞UI 227 | */ 228 | static async delay(ms: number): Promise { 229 | return new Promise(resolve => setTimeout(resolve, ms)); 230 | } 231 | 232 | /** 233 | * 分时执行，避免长时间阻塞 234 | */ 235 | static async timeSlicedExecution( 236 | tasks: (() => Promise)[], 237 | timeSliceMs: number = 50 238 | ): Promise { 239 | const results: T[] = []; 240 | let startTime = Date.now(); 241 | 242 | for (const task of tasks) { 243 | const result = await task(); 244 | results.push(result); 245 | 246 | // 如果执行时间超过时间片，让出控制权 247 | if (Date.now() - startTime > timeSliceMs) { 248 | await this.delay(0); // 让出控制权给浏览器 249 | startTime = Date.now(); 250 | } 251 | } 252 | 253 | return results; 254 | } 255 | } -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/hooks/useChatState.ts: -------------------------------------------------------------------------------- 1 | import {useCallback, useMemo, useReducer} from 'react'; 2 | import {EnhancedContact} from '../utils/contactParser'; 3 | import {EnhancedMessage} from '../utils/messageParser'; 4 | 5 | // 统一状态定义 6 | interface ChatState { 7 | // 数据状态 8 | contacts: EnhancedContact[]; 9 | selectedContact: EnhancedContact | null; 10 | 11 | // 消息缓存 - 按联系人ID缓存消息，实现流畅切换 12 | messagesCache: Record; 13 | 14 | // 加载状态 15 | contactsPhase: 'idle' | 'loading' | 'ready' | 'error'; 16 | messagesPhase: 'idle' | 'loading' | 'ready' | 'error'; 17 | 18 | // 当前正在加载消息的联系人ID 19 | loadingMessagesForContact: string | null; 20 | 21 | // 错误状态 22 | contactsError: string | null; 23 | messagesError: string | null; 24 | 25 | // 连接状态 26 | connectedDatabases: Set; 27 | 28 | // 搜索状态 29 | searchTerm: string; 30 | } 31 | 32 | // 统一动作定义 33 | type ChatAction = 34 | | { type: 'START_LOADING_CONTACTS' } 35 | | { type: 'CONTACTS_LOADED'; contacts: EnhancedContact[] } 36 | | { type: 'CONTACTS_ERROR'; error: string } 37 | | { type: 'SELECT_CONTACT'; contact: EnhancedContact | null } 38 | | { type: 'START_LOADING_MESSAGES'; contactId: string } 39 | | { type: 'MESSAGES_LOADED'; contactId: string; messages: EnhancedMessage[] } 40 | | { type: 'MESSAGES_ERROR'; contactId: string; error: string } 41 | | { type: 'SET_SEARCH_TERM'; term: string } 42 | | { type: 'ADD_CONNECTED_DB'; dbId: string } 43 | | { type: 'CLEAR_CONTACTS_ERROR' } 44 | | { type: 'CLEAR_MESSAGES_ERROR' }; 45 | 46 | // 状态机reducer - 原子性更新 47 | function chatReducer(state: ChatState, action: ChatAction): ChatState { 48 | switch (action.type) { 49 | case 'START_LOADING_CONTACTS': 50 | return { 51 | ...state, 52 | contactsPhase: 'loading', 53 | contactsError: null 54 | }; 55 | 56 | case 'CONTACTS_LOADED': 57 | return { 58 | ...state, 59 | contactsPhase: 'ready', 60 | contacts: action.contacts, 61 | contactsError: null 62 | }; 63 | 64 | case 'CONTACTS_ERROR': 65 | return { 66 | ...state, 67 | contactsPhase: 'error', 68 | contactsError: action.error 69 | }; 70 | 71 | case 'SELECT_CONTACT': 72 | // 立即切换选中的联系人，不需要等待消息加载 73 | return { 74 | ...state, 75 | selectedContact: action.contact, 76 | messagesError: null // 清除之前的消息错误 77 | }; 78 | 79 | case 'START_LOADING_MESSAGES': 80 | return { 81 | ...state, 82 | messagesPhase: 'loading', 83 | loadingMessagesForContact: action.contactId, 84 | messagesError: null 85 | }; 86 | 87 | case 'MESSAGES_LOADED': 88 | // 只有当前选中联系人的消息才更新状态 89 | if (action.contactId === state.selectedContact?.id) { 90 | return { 91 | ...state, 92 | messagesPhase: 'ready', 93 | loadingMessagesForContact: null, 94 | messagesCache: { 95 | ...state.messagesCache, 96 | [action.contactId]: action.messages 97 | } 98 | }; 99 | } else { 100 | // 如果用户已经切换到其他联系人，只缓存消息，不更新UI状态 101 | return { 102 | ...state, 103 | messagesCache: { 104 | ...state.messagesCache, 105 | [action.contactId]: action.messages 106 | }, 107 | // 如果这是后台加载完成，清除对应的加载状态 108 | loadingMessagesForContact: state.loadingMessagesForContact === action.contactId 109 | ? null 110 | : state.loadingMessagesForContact 111 | }; 112 | } 113 | 114 | case 'MESSAGES_ERROR': 115 | // 只有当前选中联系人的错误才影响UI 116 | if (action.contactId === state.selectedContact?.id) { 117 | return { 118 | ...state, 119 | messagesPhase: 'error', 120 | loadingMessagesForContact: null, 121 | messagesError: action.error 122 | }; 123 | } else { 124 | // 其他联系人的错误只清除加载状态 125 | return { 126 | ...state, 127 | loadingMessagesForContact: state.loadingMessagesForContact === action.contactId 128 | ? null 129 | : state.loadingMessagesForContact 130 | }; 131 | } 132 | 133 | case 'SET_SEARCH_TERM': 134 | return { 135 | ...state, 136 | searchTerm: action.term 137 | }; 138 | 139 | case 'ADD_CONNECTED_DB': 140 | return { 141 | ...state, 142 | connectedDatabases: new Set([...state.connectedDatabases, action.dbId]) 143 | }; 144 | 145 | case 'CLEAR_CONTACTS_ERROR': 146 | return { 147 | ...state, 148 | contactsError: null 149 | }; 150 | 151 | case 'CLEAR_MESSAGES_ERROR': 152 | return { 153 | ...state, 154 | messagesError: null 155 | }; 156 | 157 | default: 158 | return state; 159 | } 160 | } 161 | 162 | // 初始状态 163 | const initialState: ChatState = { 164 | contacts: [], 165 | selectedContact: null, 166 | messagesCache: {}, 167 | contactsPhase: 'idle', 168 | messagesPhase: 'idle', 169 | loadingMessagesForContact: null, 170 | contactsError: null, 171 | messagesError: null, 172 | connectedDatabases: new Set(), 173 | searchTerm: '' 174 | }; 175 | 176 | // 统一状态管理Hook 177 | export function useChatState() { 178 | const [state, dispatch] = useReducer(chatReducer, initialState); 179 | 180 | // 派生状态 - 使用 useMemo 优化性能 181 | const derivedState = useMemo(() => { 182 | const currentMessages = state.selectedContact 183 | ? state.messagesCache[state.selectedContact.id] || [] 184 | : []; 185 | 186 | const isLoadingCurrentMessages = state.selectedContact 187 | ? state.loadingMessagesForContact === state.selectedContact.id 188 | : false; 189 | 190 | const hasCurrentMessages = state.selectedContact 191 | ? Boolean(state.messagesCache[state.selectedContact.id]) 192 | : false; 193 | 194 | const filteredContacts = state.contacts.filter(contact => 195 | contact.displayName.toLowerCase().includes(state.searchTerm.toLowerCase()) || 196 | contact.nickname?.toLowerCase().includes(state.searchTerm.toLowerCase()) || 197 | contact.remark?.toLowerCase().includes(state.searchTerm.toLowerCase()) || 198 | contact.username?.toLowerCase().includes(state.searchTerm.toLowerCase()) 199 | ); 200 | 201 | return { 202 | ...state, 203 | // 当前选中联系人的消息 204 | currentMessages, 205 | // 是否正在为当前联系人加载消息 206 | isLoadingCurrentMessages, 207 | // 当前联系人是否有缓存的消息 208 | hasCurrentMessages, 209 | // 过滤后的联系人列表 210 | filteredContacts, 211 | // 便捷的加载状态 212 | isLoadingContacts: state.contactsPhase === 'loading', 213 | canSelectContact: state.contactsPhase === 'ready', 214 | // 是否可以立即显示消息（有缓存或正在加载） 215 | canShowMessages: hasCurrentMessages || isLoadingCurrentMessages 216 | }; 217 | }, [state]); 218 | 219 | // 统一的动作创建器 220 | const actions = { 221 | startLoadingContacts: useCallback(() => 222 | dispatch({type: 'START_LOADING_CONTACTS'}), []), 223 | 224 | contactsLoaded: useCallback((contacts: EnhancedContact[]) => 225 | dispatch({type: 'CONTACTS_LOADED', contacts}), []), 226 | 227 | contactsError: useCallback((error: string) => 228 | dispatch({type: 'CONTACTS_ERROR', error}), []), 229 | 230 | selectContact: useCallback((contact: EnhancedContact | null) => 231 | dispatch({type: 'SELECT_CONTACT', contact}), []), 232 | 233 | startLoadingMessages: useCallback((contactId: string) => 234 | dispatch({type: 'START_LOADING_MESSAGES', contactId}), []), 235 | 236 | messagesLoaded: useCallback((contactId: string, messages: EnhancedMessage[]) => 237 | dispatch({type: 'MESSAGES_LOADED', contactId, messages}), []), 238 | 239 | messagesError: useCallback((contactId: string, error: string) => 240 | dispatch({type: 'MESSAGES_ERROR', contactId, error}), []), 241 | 242 | setSearchTerm: useCallback((term: string) => 243 | dispatch({type: 'SET_SEARCH_TERM', term}), []), 244 | 245 | addConnectedDb: useCallback((dbId: string) => 246 | dispatch({type: 'ADD_CONNECTED_DB', dbId}), []), 247 | 248 | clearContactsError: useCallback(() => 249 | dispatch({type: 'CLEAR_CONTACTS_ERROR'}), []), 250 | 251 | clearMessagesError: useCallback(() => 252 | dispatch({type: 'CLEAR_MESSAGES_ERROR'}), []) 253 | }; 254 | 255 | return { 256 | state: derivedState, 257 | actions 258 | }; 259 | } -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/utils/wechatTableMatcher.ts: -------------------------------------------------------------------------------- 1 | import {TableInfo} from '../types'; 2 | import * as crypto from 'crypto'; 3 | 4 | /** 5 | * 微信表匹配工具 - 精确识别微信数据库中的各种表 6 | */ 7 | export class WeChatTableMatcher { 8 | 9 | /** 10 | * 查找微信聊天记录表 (Chat_xxx, chat_xxx) 11 | * 微信聊天记录通常存储在以 Chat_ 或 chat_ 开头的表中 12 | */ 13 | static findChatTables(tables: TableInfo[]): TableInfo[] { 14 | const chatTables = tables.filter(table => { 15 | const name = table.name.toLowerCase(); 16 | 17 | // 精确匹配微信聊天表模式 18 | return ( 19 | name.startsWith('chat_') || // chat_xxx 或 Chat_xxx (主要聊天表) 20 | name === 'chat' || // 简单的 chat 表 21 | name.match(/^chat\d+$/) || // chat123 格式 22 | name.startsWith('chatroom_') || // 群聊表 23 | name.startsWith('message_') || // message_xxx 24 | (name.includes('chat') && name.includes('room')) // 包含 chat 和 room 的表 25 | ); 26 | }); 27 | 28 | console.log(`🔍 数据库中所有表:`, tables.map(t => t.name)); 29 | console.log(`📋 找到 ${chatTables.length} 个聊天相关表:`, chatTables.map(t => t.name)); 30 | 31 | // 按优先级排序：chat_ 开头的表优先 32 | return chatTables.sort((a, b) => { 33 | const aName = a.name.toLowerCase(); 34 | const bName = b.name.toLowerCase(); 35 | 36 | if (aName.startsWith('chat_') && !bName.startsWith('chat_')) return -1; 37 | if (!aName.startsWith('chat_') && bName.startsWith('chat_')) return 1; 38 | 39 | return aName.localeCompare(bName); 40 | }); 41 | } 42 | 43 | /** 44 | * 查找联系人表 45 | */ 46 | static findContactTables(tables: TableInfo[]): TableInfo[] { 47 | return tables.filter(table => { 48 | const name = table.name.toLowerCase(); 49 | 50 | return ( 51 | name.includes('contact') || 52 | name.includes('wccontact') || 53 | name.includes('friend') || 54 | name.includes('user') 55 | ); 56 | }); 57 | } 58 | 59 | /** 60 | * 验证表是否是有效的聊天记录表 61 | * 通过检查表的字段来验证 62 | */ 63 | static async validateChatTable( 64 | dbId: string, 65 | tableName: string, 66 | dbManager: any 67 | ): Promise { 68 | try { 69 | // 查询表结构和少量数据来验证 70 | const result = await dbManager.queryTable(dbId, tableName, 5); 71 | 72 | if (result.rows.length === 0) { 73 | console.log(`表 ${tableName} 无数据`); 74 | return false; 75 | } 76 | 77 | const columns = result.columns.map(col => col.toLowerCase()); 78 | 79 | // 检查是否包含聊天记录的关键字段 80 | const hasRequiredFields = ( 81 | columns.some(col => ['talker', 'sender', 'fromuser'].includes(col)) && 82 | columns.some(col => col.includes('time')) && 83 | columns.some(col => ['content', 'message', 'msg'].some(keyword => col.includes(keyword))) 84 | ); 85 | 86 | if (!hasRequiredFields) { 87 | console.log(`表 ${tableName} 缺少必要的聊天字段，字段:`, columns); 88 | return false; 89 | } 90 | 91 | console.log(`✓ 表 ${tableName} 验证通过，字段:`, columns); 92 | return true; 93 | 94 | } catch (err) { 95 | console.warn(`验证表 ${tableName} 失败:`, err); 96 | return false; 97 | } 98 | } 99 | 100 | /** 101 | * 获取所有有效的聊天表 102 | */ 103 | static async getValidChatTables( 104 | dbId: string, 105 | tables: TableInfo[], 106 | dbManager: any 107 | ): Promise { 108 | const chatTables = this.findChatTables(tables); 109 | const validTables: TableInfo[] = []; 110 | 111 | for (const table of chatTables) { 112 | const isValid = await this.validateChatTable(dbId, table.name, dbManager); 113 | if (isValid) { 114 | validTables.push(table); 115 | } 116 | } 117 | 118 | console.log(`数据库中有效的聊天表: ${validTables.length}/${chatTables.length}`, 119 | validTables.map(t => t.name)); 120 | 121 | return validTables; 122 | } 123 | 124 | /** 125 | * 检查数据库是否包含微信数据 126 | */ 127 | static async isWeChatDatabase( 128 | dbId: string, 129 | tables: TableInfo[], 130 | dbManager: any 131 | ): Promise { 132 | const chatTables = this.findChatTables(tables); 133 | const contactTables = this.findContactTables(tables); 134 | 135 | // 如果有 chat 表或 contact 表，很可能是微信数据库 136 | if (chatTables.length > 0 || contactTables.length > 0) { 137 | return true; 138 | } 139 | 140 | // 检查是否有其他微信特有的表名 141 | const wechatKeywords = ['wechat', 'wx', 'msg', 'chatroom', 'session']; 142 | const hasWeChatTables = tables.some(table => 143 | wechatKeywords.some(keyword => 144 | table.name.toLowerCase().includes(keyword) 145 | ) 146 | ); 147 | 148 | return hasWeChatTables; 149 | } 150 | 151 | /** 152 | * 为联系人生成可能的聊天表名 153 | * 通过MD5计算M_NSUSRNAME得到Chat_xxx表名 154 | */ 155 | static generateChatTableNames(contact: any): string[] { 156 | const identifiers = this.extractContactIdentifiers(contact); 157 | const candidates: string[] = []; 158 | 159 | for (const identifier of identifiers) { 160 | if (!identifier) continue; 161 | 162 | // 生成MD5变体 163 | candidates.push(...this.generateMD5Variants(identifier)); 164 | 165 | // 生成直接匹配变体（作为备用） 166 | candidates.push(...this.generateDirectVariants(identifier)); 167 | } 168 | 169 | return [...new Set(candidates)]; // 去重 170 | } 171 | 172 | /** 173 | * 在表列表中查找匹配的聊天表 174 | */ 175 | static findMatchingChatTables(contact: any, tables: TableInfo[]): TableInfo[] { 176 | const candidateNames = this.generateChatTableNames(contact); 177 | const matchedTables: TableInfo[] = []; 178 | 179 | for (const candidateName of candidateNames) { 180 | const matchedTable = tables.find(table => 181 | table.name.toLowerCase() === candidateName.toLowerCase() 182 | ); 183 | if (matchedTable) { 184 | matchedTables.push(matchedTable); 185 | } 186 | } 187 | 188 | return matchedTables; 189 | } 190 | 191 | /** 192 | * 诊断联系人到聊天表的映射 193 | */ 194 | static diagnoseChatMapping(contact: any, tables: TableInfo[]): { 195 | contact: any; 196 | candidates: string[]; 197 | matches: TableInfo[]; 198 | identifiers: string[]; 199 | } { 200 | const identifiers = this.extractContactIdentifiers(contact); 201 | const candidates = this.generateChatTableNames(contact); 202 | const matches = this.findMatchingChatTables(contact, tables); 203 | 204 | return { 205 | contact, 206 | identifiers, 207 | candidates, 208 | matches 209 | }; 210 | } 211 | 212 | /** 213 | * 从联系人对象提取可能的标识符 214 | */ 215 | private static extractContactIdentifiers(contact: any): string[] { 216 | const identifiers: string[] = []; 217 | 218 | // 尝试各种可能的标识符字段 219 | const possibleFields = [ 220 | 'mNsUsrName', // 来自解析器的标准化字段名 221 | 'originalId', // 备用标识符 222 | 'id', // 联系人ID 223 | 'username', // 用户名 224 | 'm_nsUsrName' // 原始字段名（大小写敏感） 225 | ]; 226 | 227 | possibleFields.forEach(field => { 228 | const value = contact[field]; 229 | if (value && typeof value === 'string' && value.trim()) { 230 | identifiers.push(value.trim()); 231 | } 232 | }); 233 | 234 | // 如果没有找到任何标识符，尝试使用displayName作为备用 235 | if (identifiers.length === 0 && contact.displayName) { 236 | identifiers.push(contact.displayName); 237 | } 238 | 239 | return identifiers; 240 | } 241 | 242 | /** 243 | * 生成MD5哈希变体 244 | */ 245 | private static generateMD5Variants(identifier: string): string[] { 246 | const variants: string[] = []; 247 | const prefixes = ['Chat_', 'chat_', 'ChatRoom_', 'chat', 'message_']; 248 | 249 | try { 250 | // 标准化标识符 251 | const normalized = this.normalizeIdentifier(identifier); 252 | 253 | // 计算MD5 254 | const hash = crypto.createHash('md5').update(normalized, 'utf8').digest('hex'); 255 | 256 | // 生成各种表名变体 257 | prefixes.forEach(prefix => { 258 | variants.push(`${prefix}${hash}`); 259 | variants.push(`${prefix}${hash.toUpperCase()}`); 260 | variants.push(`${prefix}${hash.substring(0, 8)}`); // 截断版本 261 | variants.push(`${prefix}${hash.substring(0, 16)}`); // 半长版本 262 | }); 263 | 264 | // 尝试不同的编码方式 265 | const hashUpper = crypto.createHash('md5').update(identifier.toUpperCase(), 'utf8').digest('hex'); 266 | const hashLower = crypto.createHash('md5').update(identifier.toLowerCase(), 'utf8').digest('hex'); 267 | 268 | prefixes.forEach(prefix => { 269 | if (hashUpper !== hash) { 270 | variants.push(`${prefix}${hashUpper}`); 271 | } 272 | if (hashLower !== hash) { 273 | variants.push(`${prefix}${hashLower}`); 274 | } 275 | }); 276 | 277 | } catch (error) { 278 | console.warn(`MD5计算失败 for ${identifier}:`, error); 279 | } 280 | 281 | return variants; 282 | } 283 | 284 | /** 285 | * 生成直接匹配变体（备用方案） 286 | */ 287 | private static generateDirectVariants(identifier: string): string[] { 288 | const variants: string[] = []; 289 | const prefixes = ['Chat_', 'chat_', 'ChatRoom_', 'chat', 'message_']; 290 | 291 | // 清理标识符 292 | const cleanId = identifier.replace(/[@\s\-\.]/g, ''); 293 | 294 | prefixes.forEach(prefix => { 295 | variants.push(`${prefix}${identifier}`); 296 | variants.push(`${prefix}${cleanId}`); 297 | variants.push(`${prefix}${identifier.toLowerCase()}`); 298 | variants.push(`${prefix}${identifier.toUpperCase()}`); 299 | }); 300 | 301 | return variants; 302 | } 303 | 304 | /** 305 | * 标识符标准化 306 | */ 307 | private static normalizeIdentifier(identifier: string): string { 308 | return identifier 309 | .trim() 310 | .normalize('NFC') // Unicode标准化 311 | .replace(/\s+/g, ''); // 移除空格 312 | } 313 | } -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/pages/DatabasePage.tsx: -------------------------------------------------------------------------------- 1 | import {useEffect, useState} from 'react'; 2 | import {DatabaseInfo, TableInfo} from '../types'; 3 | import {DatabaseList} from '../components/DatabaseList'; 4 | import {TableList} from '../components/TableList'; 5 | import {ContextPanel} from '../components/ContextPanel'; 6 | import {WelcomeGuide} from '../components/WelcomeGuide'; 7 | import {Database, Layers, RotateCcw, Search, Table} from 'lucide-react'; 8 | import {useAtom} from 'jotai'; 9 | import {databasesAtom, selectedDatabaseAtom, selectedTableAtom, thirdColumnModeAtom} from '../store/atoms'; 10 | import {Panel, PanelGroup, PanelResizeHandle} from 'react-resizable-panels'; 11 | import {hasCustomLayout, resetPanelLayout} from '../utils/layoutUtils'; 12 | 13 | export function DatabasePage() { 14 | const [selectedDatabase, setSelectedDatabase] = useAtom(selectedDatabaseAtom); 15 | const [selectedTable, setSelectedTable] = useAtom(selectedTableAtom); 16 | const [thirdColumnMode, setThirdColumnMode] = useAtom(thirdColumnModeAtom); 17 | const [databases] = useAtom(databasesAtom); 18 | const [searchTerm, setSearchTerm] = useState(''); 19 | const [showResetButton, setShowResetButton] = useState(false); 20 | 21 | useEffect(() => { 22 | // 当数据库改变时重置表格选择和第三列模式 23 | setSelectedTable(null); 24 | setThirdColumnMode('database-properties'); 25 | }, [selectedDatabase, setSelectedTable, setThirdColumnMode]); 26 | 27 | useEffect(() => { 28 | // 检查是否有自定义布局设置 29 | setShowResetButton(hasCustomLayout()); 30 | }, []); 31 | 32 | const handleSelectDatabase = (database: DatabaseInfo) => { 33 | setSelectedDatabase(database); 34 | setSelectedTable(null); 35 | setThirdColumnMode('database-properties'); 36 | }; 37 | 38 | const handleSelectTable = (table: TableInfo) => { 39 | setSelectedTable(table); 40 | setThirdColumnMode('table-data'); 41 | }; 42 | 43 | const handleResetLayout = () => { 44 | if (confirm('确定要重置面板布局到默认设置吗？')) { 45 | resetPanelLayout(); 46 | } 47 | }; 48 | 49 | const filteredDatabases = databases.filter(db => 50 | db.filename.toLowerCase().includes(searchTerm.toLowerCase()) || 51 | db.db_type.toLowerCase().includes(searchTerm.toLowerCase()) 52 | ); 53 | 54 | return ( 55 |
56 | { 60 | // 当面板布局改变时，检查是否需要显示重置按钮 61 | setTimeout(() => setShowResetButton(hasCustomLayout()), 100); 62 | }} 63 | > 64 | {/* 第一列 - 数据库列表 */} 65 | 71 |
72 | {/* 头部 - 不滚动 */} 73 |
74 |
75 |
76 |
77 | 78 |
79 |
80 |

数据库管理

81 |

Database Management

82 |
83 |
84 | 85 | {/* 重置布局按钮 */} 86 | {showResetButton && ( 87 | 95 | )} 96 |
97 | 98 | {/* 搜索框 */} 99 |
100 | 102 | setSearchTerm(e.target.value)} 107 | className="w-full pl-10 pr-4 py-3 bg-gray-50 border-0 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all" 108 | /> 109 |
110 |
111 | 112 | {/* 欢迎指引 */} 113 | {databases.length === 0 && ( 114 |
115 | 116 |
117 | )} 118 | 119 | {/* 数据库列表 - 独立滚动 */} 120 | {databases.length > 0 && ( 121 |
122 |
123 |
124 |

125 | 126 | 数据库列表 127 |

128 | 129 | {filteredDatabases.length} 130 | 131 |
132 | 137 |
138 |
139 | )} 140 |
141 | 142 | 143 | 145 |
147 | 148 | 149 | {/* 第二列 - 表格列表 */} 150 | 156 | {selectedDatabase ? ( 157 |
158 |
159 |

160 |

161 | 表格列表 162 | 163 |

{selectedDatabase.filename}

164 | 165 |
166 | 171 |
172 | 173 | ) : ( 174 |
176 |
177 |
179 |
180 | 181 |

表格列表

182 |

183 | 选择一个数据库后，其表格列表将在此显示 184 |

185 | 186 | 187 | )} 188 | 189 | 190 | 192 |
194 | 195 | 196 | {/* 第三列 - 上下文面板（数据库属性或表格数据） */} 197 | 202 | 207 | 208 | 209 |
210 | ); 211 | } -------------------------------------------------------------------------------- /packages/wechat-db-manager/src/components/FileManager.tsx: -------------------------------------------------------------------------------- 1 | import {useState} from 'react'; 2 | import {useAtom} from 'jotai'; 3 | import {databasesAtom, errorAtom, loadingAtom, persistedKeysPathAtom} from '../store/atoms'; 4 | import {dbManager} from '../api'; 5 | import {AlertCircle, Edit3, File, FolderOpen, RefreshCw, X} from 'lucide-react'; 6 | 7 | interface FileManagerProps { 8 | onFileLoaded?: () => void; 9 | } 10 | 11 | export function FileManager({onFileLoaded}: FileManagerProps) { 12 | const [keysPath, setKeysPath] = useAtom(persistedKeysPathAtom); 13 | const [loading, setLoading] = useAtom(loadingAtom); 14 | const [error, setError] = useAtom(errorAtom); 15 | const [, setDatabases] = useAtom(databasesAtom); 16 | const [inputPath, setInputPath] = useState(''); 17 | const [isEditing, setIsEditing] = useState(false); 18 | 19 | const loadFile = async (path: string) => { 20 | try { 21 | setLoading(true); 22 | setError(null); 23 | 24 | const databases = await dbManager.loadKeysFile(path); 25 | setDatabases(databases); 26 | setKeysPath(path); 27 | setIsEditing(false); 28 | onFileLoaded?.(); 29 | } catch (err) { 30 | setError(`Failed to load keys file: ${err}`); 31 | } finally { 32 | setLoading(false); 33 | } 34 | }; 35 | 36 | const handleFileSelect = async () => { 37 | try { 38 | // 尝试使用 Tauri 文件对话框 39 | const {open} = await import('@tauri-apps/plugin-dialog'); 40 | const selected = await open({ 41 | multiple: false, 42 | filters: [ 43 | { 44 | name: 'Keys File', 45 | extensions: ['keys', 'txt'] 46 | }, 47 | { 48 | name: 'All Files', 49 | extensions: ['*'] 50 | } 51 | ], 52 | title: 'Select WeChat Database Keys File' 53 | }); 54 | 55 | if (selected && typeof selected === 'string') { 56 | await loadFile(selected); 57 | } 58 | } catch (err) { 59 | // 如果文件对话框失败，切换到手动输入模式 60 | setError('File dialog not available. Please enter the file path manually.'); 61 | setIsEditing(true); 62 | } 63 | }; 64 | 65 | const handleManualInput = async (e: React.FormEvent) => { 66 | e.preventDefault(); 67 | if (inputPath.trim()) { 68 | await loadFile(inputPath.trim()); 69 | } 70 | }; 71 | 72 | const clearFile = () => { 73 | setKeysPath(null); 74 | setInputPath(''); 75 | setDatabases([]); 76 | setError(null); 77 | setIsEditing(false); 78 | }; 79 | 80 | const cancelEdit = () => { 81 | setInputPath(''); 82 | setIsEditing(false); 83 | }; 84 | 85 | return ( 86 |
87 |
88 |
89 |
90 | 91 |
92 |

Keys File

93 |
94 | {keysPath && !isEditing && ( 95 | 102 | )} 103 |
104 | 105 | {isEditing ? ( 106 |
107 |
108 |
109 | 110 |
111 | setInputPath(e.target.value)} 115 | placeholder="Enter full path to .keys file..." 116 | className="w-full pl-10 pr-3 py-3 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-slate-100" 117 | disabled={loading} 118 | /> 119 |
120 | 121 |
122 | 138 | 139 | 147 |
148 | 149 | ) : keysPath ? ( 150 |
151 |
152 |
153 | 154 |
155 |
156 |

157 | {keysPath.split('/').pop() || keysPath} 158 |

159 |

160 | {keysPath.split('/').slice(0, -1).join('/') || '/'} 161 |

162 |
163 |
164 | 165 |
166 | 174 | 175 | 183 | 184 | 192 |
193 |
194 | ) : ( 195 |
196 |
197 |
199 | 200 |
201 |

No keys file selected

202 |

Choose a .keys file to load WeChat databases

203 |
204 | 205 |
206 | 214 | 215 | 223 |
224 |
225 | )} 226 | 227 | {error && ( 228 |
229 |
230 | 231 |
232 |

Error

233 |

{error}

234 |
235 |
236 |
237 | )} 238 |
239 | ); 240 | } --------------------------------------------------------------------------------