成员消息导出单拎出来

This commit is contained in:
xuncha
2026-02-19 17:40:41 +08:00
parent c1a393eaf6
commit e88c859f4f
4 changed files with 604 additions and 124 deletions

View File

@@ -777,6 +777,159 @@
}
}
.member-export-panel {
display: flex;
flex-direction: column;
gap: 16px;
min-height: 0;
.member-export-empty {
padding: 20px;
border-radius: 12px;
background: var(--bg-tertiary);
color: var(--text-secondary);
text-align: center;
font-size: 14px;
}
.member-export-grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.member-export-field {
display: flex;
flex-direction: column;
gap: 6px;
span {
font-size: 12px;
color: var(--text-secondary);
}
select {
width: 100%;
border: 1px solid var(--border-color);
border-radius: 10px;
background: var(--bg-tertiary);
color: var(--text-primary);
font-size: 13px;
padding: 8px 10px;
outline: none;
}
}
.member-export-folder {
grid-column: 1 / -1;
}
.member-export-folder-row {
display: flex;
gap: 8px;
input {
flex: 1;
border: 1px solid var(--border-color);
border-radius: 10px;
background: var(--bg-tertiary);
color: var(--text-primary);
font-size: 13px;
padding: 8px 10px;
outline: none;
}
button {
border: none;
border-radius: 10px;
background: var(--bg-tertiary);
color: var(--text-primary);
padding: 0 12px;
font-size: 12px;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
&:hover {
background: var(--bg-hover);
}
}
}
.member-export-options {
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 14px;
background: rgba(255, 255, 255, 0.05);
display: flex;
flex-direction: column;
gap: 12px;
}
.member-export-switch {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
color: var(--text-primary);
input {
width: 16px;
height: 16px;
cursor: pointer;
}
}
.member-export-checkboxes {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
label {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text-primary);
input {
width: 16px;
height: 16px;
cursor: pointer;
}
}
}
.member-export-actions {
display: flex;
justify-content: flex-end;
}
.member-export-start-btn {
display: inline-flex;
align-items: center;
gap: 8px;
border: none;
border-radius: 10px;
background: var(--primary);
color: #fff;
padding: 10px 16px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
&:hover {
opacity: 0.9;
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
}
.rankings-list {
display: flex;
flex-direction: column;
@@ -1143,38 +1296,6 @@
text-align: center;
}
.member-action-row {
width: 100%;
margin-bottom: 16px;
}
.export-member-btn {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: none;
border-radius: 10px;
padding: 10px 14px;
background: var(--bg-tertiary);
color: var(--text-primary);
cursor: pointer;
transition: all 0.15s;
font-size: 13px;
font-weight: 500;
&:hover {
background: var(--bg-hover);
color: var(--primary);
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
.member-details {
width: 100%;
display: flex;

View File

@@ -1,9 +1,10 @@
import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
import { useLocation } from 'react-router-dom'
import { Users, BarChart3, Clock, Image, Loader2, RefreshCw, User, Medal, Search, X, ChevronLeft, Copy, Check, Download } from 'lucide-react'
import { Users, BarChart3, Clock, Image, Loader2, RefreshCw, Medal, Search, X, ChevronLeft, Copy, Check, Download } from 'lucide-react'
import { Avatar } from '../components/Avatar'
import ReactECharts from 'echarts-for-react'
import DateRangePicker from '../components/DateRangePicker'
import * as configService from '../services/config'
import './GroupAnalyticsPage.scss'
interface GroupChatInfo {
@@ -28,7 +29,20 @@ interface GroupMessageRank {
messageCount: number
}
type AnalysisFunction = 'members' | 'ranking' | 'activeHours' | 'mediaStats'
type AnalysisFunction = 'members' | 'memberExport' | 'ranking' | 'activeHours' | 'mediaStats'
type MemberExportFormat = 'chatlab' | 'chatlab-jsonl' | 'json' | 'html' | 'txt' | 'excel' | 'weclone'
interface MemberMessageExportOptions {
format: MemberExportFormat
exportAvatars: boolean
exportMedia: boolean
exportImages: boolean
exportVoices: boolean
exportVideos: boolean
exportEmojis: boolean
exportVoiceAsText: boolean
displayNamePreference: 'group-nickname' | 'remark' | 'nickname'
}
function GroupAnalyticsPage() {
const location = useLocation()
@@ -47,6 +61,19 @@ function GroupAnalyticsPage() {
const [functionLoading, setFunctionLoading] = useState(false)
const [isExportingMembers, setIsExportingMembers] = useState(false)
const [isExportingMemberMessages, setIsExportingMemberMessages] = useState(false)
const [selectedExportMemberUsername, setSelectedExportMemberUsername] = useState('')
const [exportFolder, setExportFolder] = useState('')
const [memberExportOptions, setMemberExportOptions] = useState<MemberMessageExportOptions>({
format: 'excel',
exportAvatars: true,
exportMedia: false,
exportImages: true,
exportVoices: true,
exportVideos: true,
exportEmojis: true,
exportVoiceAsText: false,
displayNamePreference: 'remark'
})
// 成员详情弹框
const [selectedMember, setSelectedMember] = useState<GroupMember | null>(null)
@@ -75,9 +102,49 @@ function GroupAnalyticsPage() {
.filter(Boolean)
}, [location.state])
const memberExportFormatOptions = useMemo<Array<{ value: MemberExportFormat; label: string }>>(() => ([
{ value: 'excel', label: 'Excel' },
{ value: 'txt', label: 'TXT' },
{ value: 'json', label: 'JSON' },
{ value: 'chatlab', label: 'ChatLab' },
{ value: 'chatlab-jsonl', label: 'ChatLab JSONL' },
{ value: 'html', label: 'HTML' },
{ value: 'weclone', label: 'WeClone CSV' }
]), [])
const loadExportPath = useCallback(async () => {
try {
const savedPath = await configService.getExportPath()
if (savedPath) {
setExportFolder(savedPath)
return
}
const downloadsPath = await window.electronAPI.app.getDownloadsPath()
setExportFolder(downloadsPath)
} catch (e) {
console.error('加载导出路径失败:', e)
}
}, [])
const loadGroups = useCallback(async () => {
setIsLoading(true)
try {
const result = await window.electronAPI.groupAnalytics.getGroupChats()
if (result.success && result.data) {
setGroups(result.data)
setFilteredGroups(result.data)
}
} catch (e) {
console.error(e)
} finally {
setIsLoading(false)
}
}, [])
useEffect(() => {
loadGroups()
}, [])
loadExportPath()
}, [loadGroups, loadExportPath])
useEffect(() => {
preselectAppliedRef.current = false
@@ -91,6 +158,17 @@ function GroupAnalyticsPage() {
}
}, [searchQuery, groups])
useEffect(() => {
if (members.length === 0) {
setSelectedExportMemberUsername('')
return
}
const exists = members.some(member => member.username === selectedExportMemberUsername)
if (!exists) {
setSelectedExportMemberUsername(members[0].username)
}
}, [members, selectedExportMemberUsername])
useEffect(() => {
if (preselectAppliedRef.current) return
if (groups.length === 0 || preselectGroupIds.length === 0) return
@@ -126,27 +204,12 @@ function GroupAnalyticsPage() {
// 日期范围变化时自动刷新
useEffect(() => {
if (dateRangeReady && selectedGroup && selectedFunction && selectedFunction !== 'members') {
if (dateRangeReady && selectedGroup && selectedFunction && selectedFunction !== 'members' && selectedFunction !== 'memberExport') {
setDateRangeReady(false)
loadFunctionData(selectedFunction)
}
}, [dateRangeReady])
const loadGroups = useCallback(async () => {
setIsLoading(true)
try {
const result = await window.electronAPI.groupAnalytics.getGroupChats()
if (result.success && result.data) {
setGroups(result.data)
setFilteredGroups(result.data)
}
} catch (e) {
console.error(e)
} finally {
setIsLoading(false)
}
}, [])
useEffect(() => {
const handleChange = () => {
setGroups([])
@@ -158,15 +221,17 @@ function GroupAnalyticsPage() {
setActiveHours({})
setMediaStats(null)
void loadGroups()
void loadExportPath()
}
window.addEventListener('wxid-changed', handleChange as EventListener)
return () => window.removeEventListener('wxid-changed', handleChange as EventListener)
}, [loadGroups])
}, [loadExportPath, loadGroups])
const handleGroupSelect = (group: GroupChatInfo) => {
if (selectedGroup?.username !== group.username) {
setSelectedGroup(group)
setSelectedFunction(null)
setSelectedExportMemberUsername('')
}
}
@@ -192,6 +257,11 @@ function GroupAnalyticsPage() {
if (result.success && result.data) setMembers(result.data)
break
}
case 'memberExport': {
const result = await window.electronAPI.groupAnalytics.getGroupMembers(selectedGroup.username)
if (result.success && result.data) setMembers(result.data)
break
}
case 'ranking': {
const result = await window.electronAPI.groupAnalytics.getGroupMessageRanking(selectedGroup.username, 20, startTime, endTime)
if (result.success && result.data) setRankings(result.data)
@@ -287,6 +357,7 @@ function GroupAnalyticsPage() {
}
const handleDateRangeComplete = () => {
if (selectedFunction === 'memberExport') return
setDateRangeReady(true)
}
@@ -324,32 +395,75 @@ function GroupAnalyticsPage() {
}
}
const handleExportMemberMessages = async (member: GroupMember) => {
if (!selectedGroup || !member || isExportingMemberMessages) return
const handleMemberExportFormatChange = (format: MemberExportFormat) => {
setMemberExportOptions(prev => {
const next = { ...prev, format }
if (format === 'html') {
return {
...next,
exportMedia: true,
exportImages: true,
exportVoices: true,
exportVideos: true,
exportEmojis: true
}
}
return next
})
}
const handleChooseExportFolder = async () => {
try {
const result = await window.electronAPI.dialog.openDirectory({
title: '选择导出目录'
})
if (!result.canceled && result.filePaths.length > 0) {
setExportFolder(result.filePaths[0])
await configService.setExportPath(result.filePaths[0])
}
} catch (e) {
console.error('选择导出目录失败:', e)
alert(`选择导出目录失败:${String(e)}`)
}
}
const handleExportMemberMessages = async () => {
if (!selectedGroup || !selectedExportMemberUsername || !exportFolder || isExportingMemberMessages) return
const member = members.find(item => item.username === selectedExportMemberUsername)
if (!member) {
alert('请先选择成员')
return
}
setIsExportingMemberMessages(true)
try {
const downloadsPath = await window.electronAPI.app.getDownloadsPath()
const memberName = member.displayName || member.username
const baseName = sanitizeFileName(`${selectedGroup.displayName || selectedGroup.username}_${memberName}_消息记录`)
const separator = downloadsPath && downloadsPath.includes('\\') ? '\\' : '/'
const defaultPath = downloadsPath ? `${downloadsPath}${separator}${baseName}.xlsx` : `${baseName}.xlsx`
const saveResult = await window.electronAPI.dialog.saveFile({
title: `导出 ${memberName} 的群聊消息`,
defaultPath,
filters: [
{ name: 'Excel', extensions: ['xlsx'] },
{ name: 'CSV', extensions: ['csv'] }
]
})
if (!saveResult || saveResult.canceled || !saveResult.filePath) return
const result = await window.electronAPI.groupAnalytics.exportGroupMemberMessages(
selectedGroup.username,
member.username,
saveResult.filePath
const hasDateRange = Boolean(startDate && endDate)
const result = await window.electronAPI.export.exportSessions(
[selectedGroup.username],
exportFolder,
{
format: memberExportOptions.format,
dateRange: hasDateRange
? {
start: Math.floor(new Date(startDate).getTime() / 1000),
end: Math.floor(new Date(`${endDate}T23:59:59`).getTime() / 1000)
}
: null,
exportAvatars: memberExportOptions.exportAvatars,
exportMedia: memberExportOptions.exportMedia,
exportImages: memberExportOptions.exportMedia && memberExportOptions.exportImages,
exportVoices: memberExportOptions.exportMedia && memberExportOptions.exportVoices,
exportVideos: memberExportOptions.exportMedia && memberExportOptions.exportVideos,
exportEmojis: memberExportOptions.exportMedia && memberExportOptions.exportEmojis,
exportVoiceAsText: memberExportOptions.exportVoiceAsText,
sessionLayout: memberExportOptions.exportMedia ? 'per-session' : 'shared',
displayNamePreference: memberExportOptions.displayNamePreference,
senderUsername: member.username,
fileNameSuffix: sanitizeFileName(member.displayName || member.username)
}
)
if (result.success) {
alert(`导出成功,共 ${result.count ?? 0} 条消息`)
if (result.success && (result.successCount ?? 0) > 0) {
alert(`导出成功${member.displayName || member.username}`)
} else {
alert(`导出失败:${result.error || '未知错误'}`)
}
@@ -389,16 +503,6 @@ function GroupAnalyticsPage() {
<Avatar src={selectedMember.avatarUrl} name={selectedMember.displayName} size={96} />
</div>
<h3 className="member-display-name">{selectedMember.displayName}</h3>
<div className="member-action-row">
<button
className="export-member-btn"
onClick={() => handleExportMemberMessages(selectedMember)}
disabled={isExportingMemberMessages}
>
{isExportingMemberMessages ? <Loader2 size={16} className="spin" /> : <Download size={16} />}
<span>{isExportingMemberMessages ? '导出中...' : '导出该成员全部消息'}</span>
</button>
</div>
<div className="member-details">
<div className="detail-row">
<span className="detail-label">ID</span>
@@ -527,6 +631,10 @@ function GroupAnalyticsPage() {
<Users size={32} />
<span></span>
</div>
<div className="function-card" onClick={() => handleFunctionSelect('memberExport')}>
<Download size={32} />
<span></span>
</div>
<div className="function-card" onClick={() => handleFunctionSelect('ranking')}>
<BarChart3 size={32} />
<span></span>
@@ -547,6 +655,7 @@ function GroupAnalyticsPage() {
const getFunctionTitle = () => {
switch (selectedFunction) {
case 'members': return '群成员查看'
case 'memberExport': return '成员消息导出'
case 'ranking': return '群聊发言排行'
case 'activeHours': return '群聊活跃时段'
case 'mediaStats': return '媒体内容统计'
@@ -602,6 +711,140 @@ function GroupAnalyticsPage() {
))}
</div>
)}
{selectedFunction === 'memberExport' && (
<div className="member-export-panel">
{members.length === 0 ? (
<div className="member-export-empty"></div>
) : (
<>
<div className="member-export-grid">
<label className="member-export-field">
<span></span>
<select
value={selectedExportMemberUsername}
onChange={e => setSelectedExportMemberUsername(e.target.value)}
>
{members.map(member => (
<option key={member.username} value={member.username}>
{member.displayName || member.username}
</option>
))}
</select>
</label>
<label className="member-export-field">
<span></span>
<select
value={memberExportOptions.format}
onChange={e => handleMemberExportFormatChange(e.target.value as MemberExportFormat)}
>
{memberExportFormatOptions.map(option => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
</label>
<div className="member-export-field member-export-folder">
<span></span>
<div className="member-export-folder-row">
<input value={exportFolder} readOnly placeholder="请选择导出目录" />
<button type="button" onClick={handleChooseExportFolder}>
</button>
</div>
</div>
</div>
<div className="member-export-options">
<label className="member-export-switch">
<span></span>
<input
type="checkbox"
checked={memberExportOptions.exportMedia}
onChange={e => setMemberExportOptions(prev => ({ ...prev, exportMedia: e.target.checked }))}
/>
</label>
<div className="member-export-checkboxes">
<label>
<input
type="checkbox"
checked={memberExportOptions.exportImages}
disabled={!memberExportOptions.exportMedia}
onChange={e => setMemberExportOptions(prev => ({ ...prev, exportImages: e.target.checked }))}
/>
<span></span>
</label>
<label>
<input
type="checkbox"
checked={memberExportOptions.exportVoices}
disabled={!memberExportOptions.exportMedia}
onChange={e => setMemberExportOptions(prev => ({ ...prev, exportVoices: e.target.checked }))}
/>
<span></span>
</label>
<label>
<input
type="checkbox"
checked={memberExportOptions.exportVideos}
disabled={!memberExportOptions.exportMedia}
onChange={e => setMemberExportOptions(prev => ({ ...prev, exportVideos: e.target.checked }))}
/>
<span></span>
</label>
<label>
<input
type="checkbox"
checked={memberExportOptions.exportEmojis}
disabled={!memberExportOptions.exportMedia}
onChange={e => setMemberExportOptions(prev => ({ ...prev, exportEmojis: e.target.checked }))}
/>
<span></span>
</label>
<label>
<input
type="checkbox"
checked={memberExportOptions.exportVoiceAsText}
onChange={e => setMemberExportOptions(prev => ({ ...prev, exportVoiceAsText: e.target.checked }))}
/>
<span></span>
</label>
<label>
<input
type="checkbox"
checked={memberExportOptions.exportAvatars}
onChange={e => setMemberExportOptions(prev => ({ ...prev, exportAvatars: e.target.checked }))}
/>
<span></span>
</label>
</div>
<label className="member-export-field">
<span></span>
<select
value={memberExportOptions.displayNamePreference}
onChange={e => setMemberExportOptions(prev => ({ ...prev, displayNamePreference: e.target.value as MemberMessageExportOptions['displayNamePreference'] }))}
>
<option value="group-nickname"></option>
<option value="remark"></option>
<option value="nickname"></option>
</select>
</label>
</div>
<div className="member-export-actions">
<button
className="member-export-start-btn"
onClick={handleExportMemberMessages}
disabled={isExportingMemberMessages || !selectedExportMemberUsername || !exportFolder}
>
{isExportingMemberMessages ? <Loader2 size={16} className="spin" /> : <Download size={16} />}
<span>{isExportingMemberMessages ? '导出中...' : '开始导出'}</span>
</button>
</div>
</>
)}
</div>
)}
{selectedFunction === 'ranking' && (
<div className="rankings-list">
{rankings.map((item, index) => (

View File

@@ -511,12 +511,15 @@ export interface ElectronAPI {
}
export interface ExportOptions {
format: 'chatlab' | 'chatlab-jsonl' | 'json' | 'html' | 'txt' | 'excel' | 'sql'
format: 'chatlab' | 'chatlab-jsonl' | 'json' | 'html' | 'txt' | 'excel' | 'weclone' | 'sql'
dateRange?: { start: number; end: number } | null
senderUsername?: string
fileNameSuffix?: string
exportMedia?: boolean
exportAvatars?: boolean
exportImages?: boolean
exportVoices?: boolean
exportVideos?: boolean
exportEmojis?: boolean
exportVoiceAsText?: boolean
excelCompactColumns?: boolean