984 lines
37 KiB
TypeScript
984 lines
37 KiB
TypeScript
import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
|
||
import { useNavigate } from 'react-router-dom'
|
||
import { AlertCircle, AtSign, CheckCircle2, Download, Loader2, MessageCircle, RefreshCw, Search, Sparkles, Users } from 'lucide-react'
|
||
import DateRangePicker from '../components/DateRangePicker'
|
||
import './MyFootprintPage.scss'
|
||
|
||
type RangePreset = 'today' | 'yesterday' | 'this_week' | 'last_week' | 'custom'
|
||
type TimelineMode = 'all' | 'mention' | 'private'
|
||
type TimelineTimeMode = 'clock' | 'month_day_clock' | 'full_date_clock'
|
||
type PrivateDotVariant = 'both' | 'inbound_only' | 'outbound_only'
|
||
type ExportModalStatus = 'idle' | 'progress' | 'success' | 'error'
|
||
type FootprintAiStatus = 'idle' | 'loading' | 'success' | 'error'
|
||
|
||
interface MyFootprintSummary {
|
||
private_inbound_people: number
|
||
private_replied_people: number
|
||
private_outbound_people: number
|
||
private_reply_rate: number
|
||
mention_count: number
|
||
mention_group_count: number
|
||
}
|
||
|
||
interface MyFootprintPrivateSession {
|
||
session_id: string
|
||
incoming_count: number
|
||
outgoing_count: number
|
||
replied: boolean
|
||
first_incoming_ts: number
|
||
first_reply_ts: number
|
||
latest_ts: number
|
||
anchor_local_id: number
|
||
anchor_create_time: number
|
||
displayName?: string
|
||
avatarUrl?: string
|
||
}
|
||
|
||
interface MyFootprintPrivateSegment {
|
||
session_id: string
|
||
segment_index: number
|
||
start_ts: number
|
||
end_ts: number
|
||
duration_sec: number
|
||
incoming_count: number
|
||
outgoing_count: number
|
||
message_count: number
|
||
replied: boolean
|
||
first_incoming_ts: number
|
||
first_reply_ts: number
|
||
latest_ts: number
|
||
anchor_local_id: number
|
||
anchor_create_time: number
|
||
displayName?: string
|
||
avatarUrl?: string
|
||
}
|
||
|
||
interface MyFootprintMention {
|
||
session_id: string
|
||
local_id: number
|
||
create_time: number
|
||
sender_username: string
|
||
message_content: string
|
||
source: string
|
||
sessionDisplayName?: string
|
||
senderDisplayName?: string
|
||
senderAvatarUrl?: string
|
||
}
|
||
|
||
interface MyFootprintMentionGroup {
|
||
session_id: string
|
||
count: number
|
||
latest_ts: number
|
||
displayName?: string
|
||
avatarUrl?: string
|
||
}
|
||
|
||
interface MyFootprintDiagnostics {
|
||
truncated: boolean
|
||
scanned_dbs: number
|
||
elapsed_ms: number
|
||
mention_truncated?: boolean
|
||
private_truncated?: boolean
|
||
}
|
||
|
||
interface MyFootprintData {
|
||
summary: MyFootprintSummary
|
||
private_sessions: MyFootprintPrivateSession[]
|
||
private_segments: MyFootprintPrivateSegment[]
|
||
mentions: MyFootprintMention[]
|
||
mention_groups: MyFootprintMentionGroup[]
|
||
diagnostics: MyFootprintDiagnostics
|
||
}
|
||
|
||
interface TimelineBoundaryItem {
|
||
kind: 'boundary'
|
||
edge: 'start' | 'end'
|
||
key: string
|
||
time: number
|
||
label: string
|
||
}
|
||
|
||
interface TimelineMentionItem {
|
||
kind: 'mention'
|
||
key: string
|
||
time: number
|
||
sessionId: string
|
||
localId: number
|
||
createTime: number
|
||
groupName: string
|
||
groupAvatarUrl?: string
|
||
senderName: string
|
||
messageContent: string
|
||
}
|
||
|
||
interface TimelinePrivateItem {
|
||
kind: 'private'
|
||
key: string
|
||
time: number
|
||
endTime: number
|
||
sessionId: string
|
||
anchorLocalId: number
|
||
anchorCreateTime: number
|
||
displayName: string
|
||
avatarUrl?: string
|
||
subtitle: string
|
||
totalInteractions: number
|
||
summaryText: string
|
||
dotVariant: PrivateDotVariant
|
||
isRange: boolean
|
||
}
|
||
|
||
type TimelineItem = TimelineBoundaryItem | TimelineMentionItem | TimelinePrivateItem
|
||
|
||
const EMPTY_DATA: MyFootprintData = {
|
||
summary: {
|
||
private_inbound_people: 0,
|
||
private_replied_people: 0,
|
||
private_outbound_people: 0,
|
||
private_reply_rate: 0,
|
||
mention_count: 0,
|
||
mention_group_count: 0
|
||
},
|
||
private_sessions: [],
|
||
private_segments: [],
|
||
mentions: [],
|
||
mention_groups: [],
|
||
diagnostics: {
|
||
truncated: false,
|
||
scanned_dbs: 0,
|
||
elapsed_ms: 0,
|
||
mention_truncated: false,
|
||
private_truncated: false
|
||
}
|
||
}
|
||
|
||
function toDayStart(date: Date): Date {
|
||
const next = new Date(date)
|
||
next.setHours(0, 0, 0, 0)
|
||
return next
|
||
}
|
||
|
||
function toDayEnd(date: Date): Date {
|
||
const next = new Date(date)
|
||
next.setHours(23, 59, 59, 999)
|
||
return next
|
||
}
|
||
|
||
function toSeconds(date: Date): number {
|
||
return Math.floor(date.getTime() / 1000)
|
||
}
|
||
|
||
function toDateInputValue(date: Date): string {
|
||
const y = date.getFullYear()
|
||
const m = `${date.getMonth() + 1}`.padStart(2, '0')
|
||
const d = `${date.getDate()}`.padStart(2, '0')
|
||
return `${y}-${m}-${d}`
|
||
}
|
||
|
||
function getWeekStart(date: Date): Date {
|
||
const base = toDayStart(date)
|
||
const day = base.getDay()
|
||
const diff = day === 0 ? -6 : 1 - day
|
||
base.setDate(base.getDate() + diff)
|
||
return base
|
||
}
|
||
|
||
function formatTimelineMoment(seconds: number, mode: TimelineTimeMode): string {
|
||
if (!seconds || !Number.isFinite(seconds)) return '--'
|
||
const date = new Date(seconds * 1000)
|
||
const yyyy = `${date.getFullYear()}`
|
||
const mm = `${date.getMonth() + 1}`.padStart(2, '0')
|
||
const dd = `${date.getDate()}`.padStart(2, '0')
|
||
const hh = `${date.getHours()}`.padStart(2, '0')
|
||
const min = `${date.getMinutes()}`.padStart(2, '0')
|
||
if (mode === 'full_date_clock') {
|
||
return `${yyyy}-${mm}-${dd} ${hh}:${min}`
|
||
}
|
||
if (mode === 'month_day_clock') {
|
||
return `${mm}-${dd} ${hh}:${min}`
|
||
}
|
||
return `${hh}:${min}`
|
||
}
|
||
|
||
function formatPercent(value: number): string {
|
||
const safe = Number.isFinite(value) ? value : 0
|
||
return `${(safe * 100).toFixed(1)}%`
|
||
}
|
||
|
||
function decodeHtmlEntities(content: string): string {
|
||
return String(content || '')
|
||
.replace(/&/g, '&')
|
||
.replace(/</g, '<')
|
||
.replace(/>/g, '>')
|
||
.replace(/"/g, '"')
|
||
.replace(/'/g, "'")
|
||
}
|
||
|
||
function stripGroupSenderPrefix(content: string): string {
|
||
return String(content || '')
|
||
.replace(/^[\s]*([a-zA-Z0-9_@-]+):(?!\/\/)(?:\s*(?:\r?\n|<br\s*\/?>)\s*|\s*)/i, '')
|
||
.replace(/^[a-zA-Z0-9]+@openim:\n?/i, '')
|
||
}
|
||
|
||
function normalizeFootprintMessageContent(content: string): string {
|
||
const decoded = decodeHtmlEntities(content || '')
|
||
const stripped = stripGroupSenderPrefix(decoded)
|
||
return stripped.trim()
|
||
}
|
||
|
||
function renderMentionContent(content: string): ReactNode {
|
||
const normalized = String(content || '').trim() || '[空消息]'
|
||
const parts = normalized.split(/(@我|＠我)/g)
|
||
if (parts.length <= 1) return normalized
|
||
return parts.map((part, index) => {
|
||
if (part === '@我' || part === '＠我') {
|
||
return (
|
||
<span key={index} className="mention-token">
|
||
{part}
|
||
</span>
|
||
)
|
||
}
|
||
return <span key={index}>{part}</span>
|
||
})
|
||
}
|
||
|
||
function formatDurationLabel(beginTimestamp: number, endTimestamp: number): string {
|
||
if (!beginTimestamp || !endTimestamp || endTimestamp <= beginTimestamp) {
|
||
return '持续不足 1 分钟'
|
||
}
|
||
const minutes = Math.max(1, Math.round((endTimestamp - beginTimestamp) / 60))
|
||
return `持续 ${minutes} 分钟`
|
||
}
|
||
|
||
function resolveRangePresetLabel(preset: RangePreset): string {
|
||
switch (preset) {
|
||
case 'today':
|
||
return '今天'
|
||
case 'yesterday':
|
||
return '昨天'
|
||
case 'this_week':
|
||
return '本周'
|
||
case 'last_week':
|
||
return '上周'
|
||
default:
|
||
return '自定义'
|
||
}
|
||
}
|
||
|
||
function buildRange(preset: RangePreset, customStart: string, customEnd: string): { begin: number; end: number; label: string } {
|
||
const now = new Date()
|
||
|
||
if (preset === 'today') {
|
||
return {
|
||
begin: toSeconds(toDayStart(now)),
|
||
end: toSeconds(now),
|
||
label: '今天'
|
||
}
|
||
}
|
||
|
||
if (preset === 'yesterday') {
|
||
const yesterday = new Date(now)
|
||
yesterday.setDate(yesterday.getDate() - 1)
|
||
return {
|
||
begin: toSeconds(toDayStart(yesterday)),
|
||
end: toSeconds(toDayEnd(yesterday)),
|
||
label: '昨天'
|
||
}
|
||
}
|
||
|
||
if (preset === 'this_week') {
|
||
const weekStart = getWeekStart(now)
|
||
const weekEnd = new Date(weekStart)
|
||
weekEnd.setDate(weekStart.getDate() + 6)
|
||
return {
|
||
begin: toSeconds(toDayStart(weekStart)),
|
||
end: toSeconds(toDayEnd(weekEnd)),
|
||
label: '本周'
|
||
}
|
||
}
|
||
|
||
if (preset === 'last_week') {
|
||
const thisWeekStart = getWeekStart(now)
|
||
const lastWeekStart = new Date(thisWeekStart)
|
||
lastWeekStart.setDate(lastWeekStart.getDate() - 7)
|
||
const lastWeekEnd = new Date(thisWeekStart)
|
||
lastWeekEnd.setDate(lastWeekEnd.getDate() - 1)
|
||
return {
|
||
begin: toSeconds(toDayStart(lastWeekStart)),
|
||
end: toSeconds(toDayEnd(lastWeekEnd)),
|
||
label: '上周'
|
||
}
|
||
}
|
||
|
||
const customStartDate = customStart ? new Date(`${customStart}T00:00:00`) : toDayStart(now)
|
||
const customEndDate = customEnd ? new Date(`${customEnd}T23:59:59`) : toDayEnd(now)
|
||
const begin = toSeconds(customStartDate)
|
||
const end = Math.max(begin, toSeconds(customEndDate))
|
||
|
||
return {
|
||
begin,
|
||
end,
|
||
label: `${toDateInputValue(customStartDate)} 至 ${toDateInputValue(customEndDate)}`
|
||
}
|
||
}
|
||
|
||
function MyFootprintPage() {
|
||
const navigate = useNavigate()
|
||
const [preset, setPreset] = useState<RangePreset>('today')
|
||
const [customStartDate, setCustomStartDate] = useState(() => toDateInputValue(toDayStart(new Date())))
|
||
const [customEndDate, setCustomEndDate] = useState(() => toDateInputValue(toDayStart(new Date())))
|
||
const [searchKeyword, setSearchKeyword] = useState('')
|
||
const [timelineMode, setTimelineMode] = useState<TimelineMode>('all')
|
||
const [data, setData] = useState<MyFootprintData>(EMPTY_DATA)
|
||
const [loading, setLoading] = useState(false)
|
||
const [exporting, setExporting] = useState(false)
|
||
const [exportModalStatus, setExportModalStatus] = useState<ExportModalStatus>('idle')
|
||
const [exportModalTitle, setExportModalTitle] = useState('')
|
||
const [exportModalDescription, setExportModalDescription] = useState('')
|
||
const [exportModalPath, setExportModalPath] = useState('')
|
||
const [error, setError] = useState<string | null>(null)
|
||
const [footprintAiStatus, setFootprintAiStatus] = useState<FootprintAiStatus>('idle')
|
||
const [footprintAiText, setFootprintAiText] = useState('')
|
||
const inflightRangeKeyRef = useRef<string | null>(null)
|
||
|
||
const currentRange = useMemo(() => buildRange(preset, customStartDate, customEndDate), [preset, customStartDate, customEndDate])
|
||
const timelineTimeMode = useMemo<TimelineTimeMode>(() => {
|
||
const span = Math.max(0, currentRange.end - currentRange.begin)
|
||
if (span > 365 * 24 * 60 * 60) return 'full_date_clock'
|
||
if (span > 24 * 60 * 60) return 'month_day_clock'
|
||
return 'clock'
|
||
}, [currentRange.begin, currentRange.end])
|
||
|
||
const handleJump = useCallback((sessionId: string, localId: number, createTime: number) => {
|
||
if (!sessionId || !localId || !createTime) return
|
||
const query = new URLSearchParams({
|
||
sessionId,
|
||
jumpLocalId: String(localId),
|
||
jumpCreateTime: String(createTime),
|
||
jumpSource: 'footprint'
|
||
})
|
||
navigate(`/chat?${query.toString()}`)
|
||
}, [navigate])
|
||
|
||
const loadData = useCallback(async () => {
|
||
const rangeKey = `${currentRange.begin}-${currentRange.end}`
|
||
if (inflightRangeKeyRef.current === rangeKey) {
|
||
return
|
||
}
|
||
inflightRangeKeyRef.current = rangeKey
|
||
setLoading(true)
|
||
setError(null)
|
||
try {
|
||
const result = await window.electronAPI.chat.getMyFootprintStats(currentRange.begin, currentRange.end)
|
||
if (!result.success || !result.data) {
|
||
setError(result.error || '读取统计失败')
|
||
setData(EMPTY_DATA)
|
||
return
|
||
}
|
||
setData({
|
||
...result.data,
|
||
private_segments: Array.isArray(result.data.private_segments) ? result.data.private_segments : []
|
||
})
|
||
} catch (loadError) {
|
||
setError(String(loadError))
|
||
setData(EMPTY_DATA)
|
||
} finally {
|
||
setLoading(false)
|
||
if (inflightRangeKeyRef.current === rangeKey) {
|
||
inflightRangeKeyRef.current = null
|
||
}
|
||
}
|
||
}, [currentRange.begin, currentRange.end])
|
||
|
||
useEffect(() => {
|
||
void loadData()
|
||
}, [loadData])
|
||
|
||
const keyword = searchKeyword.trim().toLowerCase()
|
||
|
||
const privateSessionMetaMap = useMemo(() => {
|
||
const map = new Map<string, { displayName?: string; avatarUrl?: string }>()
|
||
for (const item of data.private_sessions) {
|
||
map.set(item.session_id, {
|
||
displayName: item.displayName,
|
||
avatarUrl: item.avatarUrl
|
||
})
|
||
}
|
||
for (const item of data.private_segments) {
|
||
if (!map.has(item.session_id)) {
|
||
map.set(item.session_id, {
|
||
displayName: item.displayName,
|
||
avatarUrl: item.avatarUrl
|
||
})
|
||
}
|
||
}
|
||
return map
|
||
}, [data.private_sessions, data.private_segments])
|
||
|
||
const filteredMentions = useMemo(() => {
|
||
if (!keyword) return data.mentions
|
||
return data.mentions.filter((item) => {
|
||
const sessionName = (item.sessionDisplayName || '').toLowerCase()
|
||
const senderName = (item.senderDisplayName || '').toLowerCase()
|
||
const sender = item.sender_username.toLowerCase()
|
||
const content = normalizeFootprintMessageContent(item.message_content).toLowerCase()
|
||
return sessionName.includes(keyword) || senderName.includes(keyword) || sender.includes(keyword) || content.includes(keyword)
|
||
})
|
||
}, [data.mentions, keyword])
|
||
|
||
const filteredPrivateSegments = useMemo(() => {
|
||
const rawSegments = data.private_segments.length > 0
|
||
? data.private_segments
|
||
: data.private_sessions.map((item, index) => ({
|
||
session_id: item.session_id,
|
||
segment_index: index + 1,
|
||
start_ts: item.first_incoming_ts > 0
|
||
? item.first_incoming_ts
|
||
: item.first_reply_ts > 0
|
||
? item.first_reply_ts
|
||
: item.latest_ts,
|
||
end_ts: item.latest_ts,
|
||
duration_sec: Math.max(0, item.latest_ts - (item.first_incoming_ts || item.first_reply_ts || item.latest_ts)),
|
||
incoming_count: item.incoming_count,
|
||
outgoing_count: item.outgoing_count,
|
||
message_count: Math.max(0, item.incoming_count + item.outgoing_count),
|
||
replied: item.replied,
|
||
first_incoming_ts: item.first_incoming_ts,
|
||
first_reply_ts: item.first_reply_ts,
|
||
latest_ts: item.latest_ts,
|
||
anchor_local_id: item.anchor_local_id,
|
||
anchor_create_time: item.anchor_create_time,
|
||
displayName: item.displayName,
|
||
avatarUrl: item.avatarUrl
|
||
}))
|
||
|
||
if (!keyword) return rawSegments
|
||
return rawSegments.filter((item) => {
|
||
const meta = privateSessionMetaMap.get(item.session_id)
|
||
const name = String(item.displayName || meta?.displayName || '').toLowerCase()
|
||
const id = item.session_id.toLowerCase()
|
||
return name.includes(keyword) || id.includes(keyword)
|
||
})
|
||
}, [data.private_segments, data.private_sessions, keyword, privateSessionMetaMap])
|
||
|
||
const mentionGroupMetaMap = useMemo(() => {
|
||
const map = new Map<string, { displayName?: string; avatarUrl?: string }>()
|
||
for (const item of data.mention_groups) {
|
||
map.set(item.session_id, { displayName: item.displayName, avatarUrl: item.avatarUrl })
|
||
}
|
||
for (const item of data.private_sessions) {
|
||
if (!map.has(item.session_id)) {
|
||
map.set(item.session_id, { displayName: item.displayName, avatarUrl: item.avatarUrl })
|
||
}
|
||
}
|
||
return map
|
||
}, [data.mention_groups, data.private_sessions])
|
||
|
||
const mentionTimelineItems = useMemo<TimelineMentionItem[]>(() => {
|
||
return filteredMentions
|
||
.filter((item) => item.create_time > 0)
|
||
.map((item) => {
|
||
const groupMeta = mentionGroupMetaMap.get(item.session_id)
|
||
return {
|
||
kind: 'mention' as const,
|
||
key: `mention:${item.session_id}:${item.local_id}`,
|
||
time: item.create_time,
|
||
sessionId: item.session_id,
|
||
localId: item.local_id,
|
||
createTime: item.create_time,
|
||
groupName: item.sessionDisplayName || groupMeta?.displayName || item.session_id,
|
||
groupAvatarUrl: groupMeta?.avatarUrl,
|
||
senderName: item.senderDisplayName || item.sender_username || '未知',
|
||
messageContent: normalizeFootprintMessageContent(item.message_content)
|
||
}
|
||
})
|
||
}, [filteredMentions, mentionGroupMetaMap])
|
||
|
||
const privateTimelineItems = useMemo<TimelinePrivateItem[]>(() => {
|
||
return filteredPrivateSegments
|
||
.map((item) => {
|
||
const startTime = item.start_ts > 0
|
||
? item.start_ts
|
||
: item.first_incoming_ts > 0
|
||
? item.first_incoming_ts
|
||
: item.first_reply_ts > 0
|
||
? item.first_reply_ts
|
||
: item.latest_ts
|
||
|
||
const endTime = item.end_ts > 0 ? item.end_ts : item.latest_ts
|
||
const isRange = endTime > startTime + 60
|
||
const totalInteractions = Math.max(0, item.message_count || (item.incoming_count + item.outgoing_count))
|
||
const durationLabel = item.duration_sec > 0
|
||
? `持续 ${Math.max(1, Math.round(item.duration_sec / 60))} 分钟`
|
||
: formatDurationLabel(startTime, endTime)
|
||
const subtitle = isRange
|
||
? `${formatTimelineMoment(startTime, timelineTimeMode)} 至 ${formatTimelineMoment(endTime || startTime, timelineTimeMode)} · ${durationLabel}`
|
||
: ''
|
||
const summaryText = `收到 ${item.incoming_count} 条 / 发送 ${item.outgoing_count} 条${item.replied ? ' · 已回复' : ''}`
|
||
const sessionMeta = privateSessionMetaMap.get(item.session_id)
|
||
let dotVariant: PrivateDotVariant = 'both'
|
||
if (item.incoming_count > 0 && item.outgoing_count === 0) {
|
||
dotVariant = 'inbound_only'
|
||
} else if (item.incoming_count === 0 && item.outgoing_count > 0) {
|
||
dotVariant = 'outbound_only'
|
||
}
|
||
|
||
return {
|
||
kind: 'private' as const,
|
||
key: `private:${item.session_id}:${item.segment_index}:${item.start_ts}`,
|
||
time: startTime,
|
||
endTime,
|
||
sessionId: item.session_id,
|
||
anchorLocalId: item.anchor_local_id,
|
||
anchorCreateTime: item.anchor_create_time,
|
||
displayName: item.displayName || sessionMeta?.displayName || item.session_id,
|
||
avatarUrl: item.avatarUrl || sessionMeta?.avatarUrl,
|
||
subtitle,
|
||
totalInteractions,
|
||
summaryText,
|
||
dotVariant,
|
||
isRange
|
||
}
|
||
})
|
||
.filter((item) => item.time > 0)
|
||
}, [filteredPrivateSegments, privateSessionMetaMap, timelineTimeMode])
|
||
|
||
const timelineItems = useMemo<TimelineItem[]>(() => {
|
||
const events: TimelineItem[] = []
|
||
if (timelineMode !== 'private') {
|
||
events.push(...mentionTimelineItems)
|
||
}
|
||
if (timelineMode !== 'mention') {
|
||
events.push(...privateTimelineItems)
|
||
}
|
||
|
||
events.sort((a, b) => {
|
||
if (a.time !== b.time) return a.time - b.time
|
||
const rankA = a.kind === 'mention' ? 0 : a.kind === 'private' ? 1 : 2
|
||
const rankB = b.kind === 'mention' ? 0 : b.kind === 'private' ? 1 : 2
|
||
return rankA - rankB
|
||
})
|
||
|
||
const presetLabel = resolveRangePresetLabel(preset)
|
||
const startNode: TimelineBoundaryItem = {
|
||
kind: 'boundary',
|
||
edge: 'start',
|
||
key: 'boundary:start',
|
||
time: currentRange.begin,
|
||
label: `区域时间开始（${presetLabel}）`
|
||
}
|
||
|
||
const endNode: TimelineBoundaryItem = {
|
||
kind: 'boundary',
|
||
edge: 'end',
|
||
key: 'boundary:end',
|
||
time: currentRange.end,
|
||
label: `区域时间结束（${preset === 'today' ? '现在' : presetLabel}）`
|
||
}
|
||
|
||
return [startNode, ...events, endNode]
|
||
}, [timelineMode, mentionTimelineItems, privateTimelineItems, currentRange.begin, currentRange.end, preset])
|
||
|
||
const timelineEventCount = useMemo(
|
||
() => timelineItems.filter((item) => item.kind !== 'boundary').length,
|
||
[timelineItems]
|
||
)
|
||
|
||
const handleExport = useCallback(async (format: 'csv' | 'json') => {
|
||
try {
|
||
setExporting(true)
|
||
setExportModalStatus('progress')
|
||
setExportModalTitle(`正在准备导出 ${format.toUpperCase()}`)
|
||
setExportModalDescription('正在准备文件保存信息...')
|
||
setExportModalPath('')
|
||
const downloadsPath = await window.electronAPI.app.getDownloadsPath()
|
||
const separator = downloadsPath && downloadsPath.includes('\\') ? '\\' : '/'
|
||
const rangeName = currentRange.label.replace(/[\\/:*?"<>|\s]+/g, '_')
|
||
const suggestedName = `my_footprint_${rangeName}_${Date.now()}.${format}`
|
||
const defaultPath = downloadsPath ? `${downloadsPath}${separator}${suggestedName}` : suggestedName
|
||
|
||
setExportModalDescription('请在弹窗中选择导出路径...')
|
||
const saveResult = await window.electronAPI.dialog.saveFile({
|
||
title: format === 'csv' ? '导出我的足迹 CSV' : '导出我的足迹 JSON',
|
||
defaultPath,
|
||
filters: format === 'csv'
|
||
? [{ name: 'CSV', extensions: ['csv'] }]
|
||
: [{ name: 'JSON', extensions: ['json'] }]
|
||
})
|
||
if (saveResult.canceled || !saveResult.filePath) {
|
||
setExportModalStatus('idle')
|
||
setExportModalTitle('')
|
||
setExportModalDescription('')
|
||
setExportModalPath('')
|
||
return
|
||
}
|
||
|
||
setExportModalDescription('正在导出数据，请稍候...')
|
||
setExportModalPath(saveResult.filePath)
|
||
const exportResult = await window.electronAPI.chat.exportMyFootprint(
|
||
currentRange.begin,
|
||
currentRange.end,
|
||
format,
|
||
saveResult.filePath
|
||
)
|
||
if (!exportResult.success) {
|
||
setExportModalStatus('error')
|
||
setExportModalTitle('导出失败')
|
||
setExportModalDescription(exportResult.error || '未知错误')
|
||
setExportModalPath(saveResult.filePath)
|
||
return
|
||
}
|
||
setExportModalStatus('success')
|
||
setExportModalTitle('导出完成')
|
||
setExportModalDescription(`文件已成功导出为 ${format.toUpperCase()}。`)
|
||
setExportModalPath(exportResult.filePath || saveResult.filePath)
|
||
} catch (exportError) {
|
||
setExportModalStatus('error')
|
||
setExportModalTitle('导出失败')
|
||
setExportModalDescription(String(exportError))
|
||
} finally {
|
||
setExporting(false)
|
||
}
|
||
}, [currentRange.begin, currentRange.end, currentRange.label])
|
||
|
||
const handleGenerateAiSummary = useCallback(async () => {
|
||
setFootprintAiStatus('loading')
|
||
setFootprintAiText('')
|
||
try {
|
||
const privateSegments = (data.private_segments.length > 0 ? data.private_segments : data.private_sessions).slice(0, 12)
|
||
const result = await window.electronAPI.insight.generateFootprintInsight({
|
||
rangeLabel: currentRange.label,
|
||
summary: data.summary,
|
||
privateSegments: privateSegments.map((item: MyFootprintPrivateSegment | MyFootprintPrivateSession) => ({
|
||
session_id: item.session_id,
|
||
displayName: item.displayName,
|
||
incoming_count: item.incoming_count,
|
||
outgoing_count: item.outgoing_count,
|
||
message_count: 'message_count' in item ? item.message_count : item.incoming_count + item.outgoing_count,
|
||
replied: item.replied
|
||
})),
|
||
mentionGroups: data.mention_groups.slice(0, 12).map((item) => ({
|
||
session_id: item.session_id,
|
||
displayName: item.displayName,
|
||
count: item.count
|
||
}))
|
||
})
|
||
if (!result.success || !result.insight) {
|
||
setFootprintAiStatus('error')
|
||
setFootprintAiText(result.message || '生成失败')
|
||
return
|
||
}
|
||
setFootprintAiStatus('success')
|
||
setFootprintAiText(result.insight)
|
||
} catch (generateError) {
|
||
setFootprintAiStatus('error')
|
||
setFootprintAiText(String(generateError))
|
||
}
|
||
}, [currentRange.label, data])
|
||
|
||
return (
|
||
<div className="my-footprint-page">
|
||
<section className="footprint-header">
|
||
<div className="footprint-title-wrap">
|
||
<h1>我的微信足迹</h1>
|
||
<p>范围：{currentRange.label}</p>
|
||
</div>
|
||
|
||
<div className="footprint-toolbar">
|
||
<div className="range-preset-group">
|
||
{[
|
||
{ value: 'today', label: '今天' },
|
||
{ value: 'yesterday', label: '昨天' },
|
||
{ value: 'this_week', label: '本周' },
|
||
{ value: 'last_week', label: '上周' },
|
||
{ value: 'custom', label: '自定义' }
|
||
].map((item) => (
|
||
<button
|
||
key={item.value}
|
||
type="button"
|
||
className={`preset-chip ${preset === item.value ? 'active' : ''}`}
|
||
onClick={() => setPreset(item.value as RangePreset)}
|
||
>
|
||
{item.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{preset === 'custom' && (
|
||
<div className="custom-range-row">
|
||
<DateRangePicker
|
||
startDate={customStartDate}
|
||
endDate={customEndDate}
|
||
onStartDateChange={setCustomStartDate}
|
||
onEndDateChange={setCustomEndDate}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
<div className="toolbar-actions">
|
||
<div className="search-input">
|
||
<Search size={15} />
|
||
<input
|
||
value={searchKeyword}
|
||
onChange={(event) => setSearchKeyword(event.target.value)}
|
||
placeholder="搜索联系人/群聊/内容"
|
||
/>
|
||
</div>
|
||
<button type="button" className="action-btn" onClick={() => void loadData()} disabled={loading}>
|
||
<RefreshCw size={15} className={loading ? 'spin' : ''} />
|
||
<span>刷新</span>
|
||
</button>
|
||
<button type="button" className="action-btn" onClick={() => void handleGenerateAiSummary()} disabled={loading || footprintAiStatus === 'loading'}>
|
||
{footprintAiStatus === 'loading' ? <Loader2 size={15} className="spin" /> : <Sparkles size={15} />}
|
||
<span>{footprintAiStatus === 'loading' ? '生成中...' : 'AI 总结'}</span>
|
||
</button>
|
||
<button type="button" className="action-btn" onClick={() => void handleExport('csv')} disabled={exporting || loading}>
|
||
<Download size={15} />
|
||
<span>导出 CSV</span>
|
||
</button>
|
||
<button type="button" className="action-btn" onClick={() => void handleExport('json')} disabled={exporting || loading}>
|
||
<Download size={15} />
|
||
<span>导出 JSON</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{loading ? (
|
||
<section className="footprint-loading" aria-live="polite">
|
||
<div className="kpi-skeleton-grid">
|
||
{Array.from({ length: 4 }).map((_, index) => (
|
||
<div key={index} className="kpi-skeleton-card skeleton-shimmer" />
|
||
))}
|
||
</div>
|
||
<div className="timeline-skeleton-list">
|
||
{Array.from({ length: 7 }).map((_, index) => (
|
||
<div key={index} className="timeline-skeleton-item skeleton-shimmer" />
|
||
))}
|
||
</div>
|
||
</section>
|
||
) : error ? (
|
||
<section className="footprint-error" role="alert">
|
||
<h3>读取我的足迹失败</h3>
|
||
<p>{error}</p>
|
||
<button type="button" className="action-btn" onClick={() => void loadData()}>
|
||
<RefreshCw size={15} />
|
||
<span>重试</span>
|
||
</button>
|
||
</section>
|
||
) : (
|
||
<>
|
||
<section className="kpi-grid">
|
||
<button type="button" className="kpi-card" onClick={() => setTimelineMode('private')}>
|
||
<span className="kpi-label">有聊天的人数</span>
|
||
<strong>{data.summary.private_inbound_people}</strong>
|
||
<small>回复了其中 {data.summary.private_replied_people} 人</small>
|
||
</button>
|
||
<button type="button" className="kpi-card" onClick={() => setTimelineMode('private')}>
|
||
<span className="kpi-label">我有回复的人数</span>
|
||
<strong>{data.summary.private_outbound_people}</strong>
|
||
<small>回复率 {formatPercent(data.summary.private_reply_rate)}</small>
|
||
</button>
|
||
<button type="button" className="kpi-card" onClick={() => setTimelineMode('mention')}>
|
||
<span className="kpi-label">@我次数</span>
|
||
<strong>{data.summary.mention_count}</strong>
|
||
<small>可点击查看原消息</small>
|
||
</button>
|
||
<button type="button" className="kpi-card" onClick={() => setTimelineMode('mention')}>
|
||
<span className="kpi-label">涉及群聊</span>
|
||
<strong>{data.summary.mention_group_count}</strong>
|
||
<small>按群聚合 @我消息</small>
|
||
</button>
|
||
</section>
|
||
|
||
{footprintAiStatus !== 'idle' && (
|
||
<section className={`footprint-ai-result footprint-ai-result-${footprintAiStatus}`}>
|
||
<div className="footprint-ai-head">
|
||
<strong>AI 足迹总结</strong>
|
||
<span>{currentRange.label}</span>
|
||
</div>
|
||
<p>{footprintAiText}</p>
|
||
</section>
|
||
)}
|
||
|
||
<section
|
||
className={`footprint-timeline timeline-time-${timelineTimeMode}`}
|
||
key={`${timelineMode}:${currentRange.begin}:${currentRange.end}`}
|
||
>
|
||
<div className="timeline-head">
|
||
<div className="timeline-head-left">
|
||
<h2>联络时间线</h2>
|
||
<p>最上方是时间区间开始，最下方是时间区间终点，中间按时间展示群聊 @我 与私聊分段会话节点。</p>
|
||
</div>
|
||
<div className="timeline-mode-row">
|
||
<button
|
||
type="button"
|
||
className={`timeline-mode-chip ${timelineMode === 'all' ? 'active' : ''}`}
|
||
onClick={() => setTimelineMode('all')}
|
||
>
|
||
全部 {timelineEventCount}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`timeline-mode-chip ${timelineMode === 'mention' ? 'active' : ''}`}
|
||
onClick={() => setTimelineMode('mention')}
|
||
>
|
||
@我群聊 {mentionTimelineItems.length}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`timeline-mode-chip ${timelineMode === 'private' ? 'active' : ''}`}
|
||
onClick={() => setTimelineMode('private')}
|
||
>
|
||
私聊 {privateTimelineItems.length}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{timelineEventCount === 0 ? (
|
||
<div className="panel-empty-state">当前区间暂无联络事件，试试切换日期范围或清空关键词筛选。</div>
|
||
) : (
|
||
<div className="timeline-stream">
|
||
{timelineItems.map((item, index) => (
|
||
<div
|
||
key={item.key}
|
||
className={`timeline-item timeline-item-${item.kind}`}
|
||
style={{ animationDelay: `${Math.min(index, 12) * 0.04}s` }}
|
||
>
|
||
<div className={`timeline-time timeline-time-${item.kind}`}>
|
||
{item.kind === 'private' ? (
|
||
<div className="timeline-time-range">
|
||
<span className="timeline-time-main">{formatTimelineMoment(item.time, timelineTimeMode)}</span>
|
||
{item.isRange && (
|
||
<span className="timeline-time-end-wrap">
|
||
<span className="timeline-time-end">{formatTimelineMoment(item.endTime, timelineTimeMode)}</span>
|
||
</span>
|
||
)}
|
||
</div>
|
||
) : (
|
||
formatTimelineMoment(item.time, timelineTimeMode)
|
||
)}
|
||
</div>
|
||
<div className={`timeline-dot-col timeline-dot-col-${item.kind}`}>
|
||
{item.kind === 'private' ? (
|
||
<div className="timeline-dot-range">
|
||
<div className={`timeline-dot timeline-dot-private timeline-dot-private-start timeline-dot-private-${item.dotVariant}`} />
|
||
{item.isRange && (
|
||
<>
|
||
<div className={`timeline-dot-range-line timeline-dot-range-line-${item.dotVariant}`} />
|
||
<div className={`timeline-dot timeline-dot-private timeline-dot-private-end timeline-dot-private-${item.dotVariant}`} />
|
||
</>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<div className={`timeline-dot timeline-dot-${item.kind}${item.kind === 'boundary' ? ` timeline-dot-${item.edge}` : ''}`} />
|
||
)}
|
||
</div>
|
||
<div className="timeline-content-wrap">
|
||
{item.kind === 'boundary' && (
|
||
<div className={`timeline-boundary timeline-boundary-${item.edge}`}>{item.label}</div>
|
||
)}
|
||
|
||
{item.kind === 'mention' && (
|
||
<div className="timeline-card timeline-card-mention">
|
||
<div className="timeline-card-head">
|
||
<div className="timeline-identity">
|
||
<div className="timeline-avatar">
|
||
{item.groupAvatarUrl ? (
|
||
<img src={item.groupAvatarUrl} alt={item.groupName} />
|
||
) : (
|
||
<Users size={16} />
|
||
)}
|
||
</div>
|
||
<div className="timeline-title-group">
|
||
<div className="timeline-title">{item.groupName}</div>
|
||
<div className="timeline-subtitle">发送人：{item.senderName}</div>
|
||
</div>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="jump-btn timeline-jump-btn"
|
||
onClick={() => handleJump(item.sessionId, item.localId, item.createTime)}
|
||
>
|
||
跳转
|
||
</button>
|
||
</div>
|
||
<div className="timeline-message mention-message">{renderMentionContent(item.messageContent)}</div>
|
||
</div>
|
||
)}
|
||
|
||
{item.kind === 'private' && (
|
||
<div className="timeline-card timeline-card-private">
|
||
<div className="timeline-card-head">
|
||
<div className="timeline-identity">
|
||
<div className="timeline-avatar timeline-avatar-private">
|
||
{item.avatarUrl ? (
|
||
<img src={item.avatarUrl} alt={item.displayName} />
|
||
) : (
|
||
<MessageCircle size={16} />
|
||
)}
|
||
</div>
|
||
<div className="timeline-title-group">
|
||
<div className="timeline-title">{item.displayName}</div>
|
||
<div className="timeline-subtitle">{item.subtitle}</div>
|
||
</div>
|
||
</div>
|
||
<div className="timeline-right-tools">
|
||
<span className="timeline-count-badge">共 {item.totalInteractions} 条</span>
|
||
<button
|
||
type="button"
|
||
className="jump-btn timeline-jump-btn"
|
||
disabled={!item.anchorLocalId || !item.anchorCreateTime}
|
||
onClick={() => handleJump(item.sessionId, item.anchorLocalId, item.anchorCreateTime)}
|
||
>
|
||
跳转
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="timeline-message private-message">{item.summaryText}</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</section>
|
||
</>
|
||
)}
|
||
{exportModalStatus !== 'idle' && (
|
||
<div className="footprint-export-modal-mask" role="presentation">
|
||
<div className="footprint-export-modal" role="dialog" aria-modal="true" aria-live="polite">
|
||
<div className={`export-modal-icon export-modal-icon-${exportModalStatus}`}>
|
||
{exportModalStatus === 'progress' && <RefreshCw size={20} className="spin" />}
|
||
{exportModalStatus === 'success' && <CheckCircle2 size={20} />}
|
||
{exportModalStatus === 'error' && <AlertCircle size={20} />}
|
||
</div>
|
||
<h3>{exportModalTitle}</h3>
|
||
<p>{exportModalDescription}</p>
|
||
{exportModalPath && <code className="export-modal-path">{exportModalPath}</code>}
|
||
{exportModalStatus !== 'progress' && (
|
||
<div className="export-modal-actions">
|
||
<button
|
||
type="button"
|
||
className="action-btn"
|
||
onClick={() => {
|
||
setExportModalStatus('idle')
|
||
setExportModalTitle('')
|
||
setExportModalDescription('')
|
||
setExportModalPath('')
|
||
}}
|
||
>
|
||
知道了
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default MyFootprintPage
|