mirror of
https://github.com/hicccc77/WeFlow.git
synced 2026-03-25 07:16:51 +00:00
feat(export): modal task center with pause/stop controls
This commit is contained in:
tisonhuang
@@ -236,7 +236,7 @@
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.task-collapse-btn {
|
||||
.task-open-btn {
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-primary);
|
||||
border-radius: 7px;
|
||||
@@ -245,14 +245,38 @@
|
||||
color: var(--text-secondary);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&.active-running {
|
||||
border-color: rgba(255, 77, 79, 0.45);
|
||||
color: #ff4d4f;
|
||||
box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.16);
|
||||
}
|
||||
}
|
||||
|
||||
.task-running-badge {
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 999px;
|
||||
background: #ff4d4f;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 4px;
|
||||
line-height: 1;
|
||||
box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
|
||||
animation: exportTaskBadgePulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.secondary-btn {
|
||||
@@ -351,122 +375,232 @@
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.task-center {
|
||||
.task-center-modal-overlay {
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1180;
|
||||
background: rgba(15, 23, 42, 0.28);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 24px 20px;
|
||||
}
|
||||
|
||||
.task-center-modal {
|
||||
width: min(980px, calc(100vw - 40px));
|
||||
max-height: calc(100vh - 72px);
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
background: var(--card-bg);
|
||||
padding: 12px;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.24);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.task-empty {
|
||||
padding: 12px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.task-center-modal-header {
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.task-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
max-height: 190px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.task-center-modal-title {
|
||||
min-width: 0;
|
||||
|
||||
.task-card {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
background: var(--bg-secondary);
|
||||
|
||||
&.running {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-color: rgba(255, 77, 79, 0.45);
|
||||
}
|
||||
|
||||
&.success {
|
||||
border-color: rgba(82, 196, 26, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.task-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.task-title {
|
||||
font-size: 13px;
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.task-meta {
|
||||
margin-top: 2px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.task-status {
|
||||
border-radius: 999px;
|
||||
padding: 2px 8px;
|
||||
font-weight: 600;
|
||||
|
||||
&.queued {
|
||||
background: rgba(var(--primary-rgb), 0.14);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&.running {
|
||||
background: rgba(var(--primary-rgb), 0.2);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&.success {
|
||||
background: rgba(82, 196, 26, 0.18);
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background: rgba(255, 77, 79, 0.15);
|
||||
color: #ff4d4f;
|
||||
}
|
||||
}
|
||||
|
||||
.task-progress-bar {
|
||||
margin-top: 8px;
|
||||
height: 6px;
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.task-progress-fill {
|
||||
height: 100%;
|
||||
background: var(--primary);
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
|
||||
.task-progress-text {
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.task-error {
|
||||
margin-top: 6px;
|
||||
span {
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.task-center-modal-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.task-empty {
|
||||
padding: 12px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.task-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.task-card {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
background: var(--bg-secondary);
|
||||
|
||||
&.running {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
&.paused {
|
||||
border-color: rgba(250, 173, 20, 0.55);
|
||||
}
|
||||
|
||||
&.stopped {
|
||||
border-color: rgba(148, 163, 184, 0.46);
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-color: rgba(255, 77, 79, 0.45);
|
||||
}
|
||||
|
||||
&.success {
|
||||
border-color: rgba(82, 196, 26, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.task-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.task-title {
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.task-meta {
|
||||
margin-top: 2px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.task-status {
|
||||
border-radius: 999px;
|
||||
padding: 2px 8px;
|
||||
font-weight: 600;
|
||||
|
||||
&.queued {
|
||||
background: rgba(var(--primary-rgb), 0.14);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&.running {
|
||||
background: rgba(var(--primary-rgb), 0.2);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&.paused {
|
||||
background: rgba(250, 173, 20, 0.2);
|
||||
color: #d48806;
|
||||
}
|
||||
|
||||
&.stopped {
|
||||
background: rgba(148, 163, 184, 0.2);
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background: rgba(82, 196, 26, 0.18);
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background: rgba(255, 77, 79, 0.15);
|
||||
color: #ff4d4f;
|
||||
}
|
||||
}
|
||||
|
||||
.task-progress-bar {
|
||||
margin-top: 8px;
|
||||
height: 6px;
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.task-progress-fill {
|
||||
height: 100%;
|
||||
background: var(--primary);
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
|
||||
.task-progress-text {
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.task-error {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.task-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.task-action-btn {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-secondary);
|
||||
min-height: 30px;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.65;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
border-color: rgba(var(--primary-rgb), 0.35);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
border-color: rgba(255, 77, 79, 0.36);
|
||||
color: #ff4d4f;
|
||||
}
|
||||
}
|
||||
@@ -1034,6 +1168,12 @@
|
||||
background: color-mix(in srgb, var(--primary) 80%, #000);
|
||||
}
|
||||
|
||||
&.paused {
|
||||
background: rgba(250, 173, 20, 0.16);
|
||||
color: #d48806;
|
||||
border: 1px solid rgba(250, 173, 20, 0.38);
|
||||
}
|
||||
|
||||
&.no-session {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-tertiary);
|
||||
@@ -1677,6 +1817,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes exportTaskBadgePulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.35);
|
||||
}
|
||||
70% {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 0 0 6px rgba(255, 77, 79, 0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 0 rgba(255, 77, 79, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1360px) {
|
||||
.global-export-controls {
|
||||
padding: 10px;
|
||||
@@ -1725,6 +1880,19 @@
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.task-center-modal-overlay {
|
||||
padding: 12px 10px;
|
||||
}
|
||||
|
||||
.task-center-modal {
|
||||
width: calc(100vw - 20px);
|
||||
max-height: calc(100vh - 56px);
|
||||
}
|
||||
|
||||
.task-actions {
|
||||
width: 84px;
|
||||
}
|
||||
|
||||
.export-session-detail-panel {
|
||||
width: calc(100vw - 12px);
|
||||
}
|
||||
|
||||
@@ -5,8 +5,6 @@ import {
|
||||
Aperture,
|
||||
Calendar,
|
||||
Check,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
CheckSquare,
|
||||
Copy,
|
||||
Database,
|
||||
@@ -35,7 +33,8 @@ import { useContactTypeCountsStore } from '../stores/contactTypeCountsStore'
|
||||
import './ExportPage.scss'
|
||||
|
||||
type ConversationTab = 'private' | 'group' | 'official' | 'former_friend'
|
||||
type TaskStatus = 'queued' | 'running' | 'success' | 'error'
|
||||
type TaskStatus = 'queued' | 'running' | 'paused' | 'stopped' | 'success' | 'error'
|
||||
type TaskControlState = 'pausing' | 'stopping'
|
||||
type TaskScope = 'single' | 'multi' | 'content' | 'sns'
|
||||
type ContentType = 'text' | 'voice' | 'image' | 'video' | 'emoji'
|
||||
type ContentCardType = ContentType | 'sns'
|
||||
@@ -97,6 +96,7 @@ interface ExportTask {
|
||||
id: string
|
||||
title: string
|
||||
status: TaskStatus
|
||||
controlState?: TaskControlState
|
||||
createdAt: number
|
||||
startedAt?: number
|
||||
finishedAt?: number
|
||||
@@ -167,6 +167,19 @@ const createEmptyProgress = (): TaskProgress => ({
|
||||
phaseTotal: 0
|
||||
})
|
||||
|
||||
const getTaskStatusLabel = (task: ExportTask): string => {
|
||||
if (task.status === 'queued') return '排队中'
|
||||
if (task.status === 'running') {
|
||||
if (task.controlState === 'pausing') return '暂停中'
|
||||
if (task.controlState === 'stopping') return '停止中'
|
||||
return '进行中'
|
||||
}
|
||||
if (task.status === 'paused') return '已暂停'
|
||||
if (task.status === 'stopped') return '已停止'
|
||||
if (task.status === 'success') return '已完成'
|
||||
return '失败'
|
||||
}
|
||||
|
||||
const formatAbsoluteDate = (timestamp: number): string => {
|
||||
const d = new Date(timestamp)
|
||||
const y = d.getFullYear()
|
||||
@@ -548,7 +561,7 @@ function ExportPage() {
|
||||
const [isSessionEnriching, setIsSessionEnriching] = useState(false)
|
||||
const [isSnsStatsLoading, setIsSnsStatsLoading] = useState(true)
|
||||
const [isBaseConfigLoading, setIsBaseConfigLoading] = useState(true)
|
||||
const [isTaskCenterExpanded, setIsTaskCenterExpanded] = useState(false)
|
||||
const [isTaskCenterOpen, setIsTaskCenterOpen] = useState(false)
|
||||
const [sessions, setSessions] = useState<SessionRow[]>([])
|
||||
const [sessionDataSource, setSessionDataSource] = useState<SessionDataSource>(null)
|
||||
const [sessionContactsUpdatedAt, setSessionContactsUpdatedAt] = useState<number | null>(null)
|
||||
@@ -1630,36 +1643,49 @@ function ExportPage() {
|
||||
if (!next) return
|
||||
|
||||
runningTaskIdRef.current = next.id
|
||||
updateTask(next.id, task => ({ ...task, status: 'running', startedAt: Date.now() }))
|
||||
updateTask(next.id, task => ({
|
||||
...task,
|
||||
status: 'running',
|
||||
controlState: undefined,
|
||||
startedAt: Date.now(),
|
||||
finishedAt: undefined,
|
||||
error: undefined
|
||||
}))
|
||||
|
||||
progressUnsubscribeRef.current?.()
|
||||
if (next.payload.scope === 'sns') {
|
||||
progressUnsubscribeRef.current = window.electronAPI.sns.onExportProgress((payload) => {
|
||||
updateTask(next.id, task => ({
|
||||
...task,
|
||||
progress: {
|
||||
current: payload.current || 0,
|
||||
total: payload.total || 0,
|
||||
currentName: '',
|
||||
phaseLabel: payload.status || '',
|
||||
phaseProgress: payload.total > 0 ? payload.current : 0,
|
||||
phaseTotal: payload.total || 0
|
||||
updateTask(next.id, task => {
|
||||
if (task.status !== 'running') return task
|
||||
return {
|
||||
...task,
|
||||
progress: {
|
||||
current: payload.current || 0,
|
||||
total: payload.total || 0,
|
||||
currentName: '',
|
||||
phaseLabel: payload.status || '',
|
||||
phaseProgress: payload.total > 0 ? payload.current : 0,
|
||||
phaseTotal: payload.total || 0
|
||||
}
|
||||
}
|
||||
}))
|
||||
})
|
||||
})
|
||||
} else {
|
||||
progressUnsubscribeRef.current = window.electronAPI.export.onProgress((payload: ExportProgress) => {
|
||||
updateTask(next.id, task => ({
|
||||
...task,
|
||||
progress: {
|
||||
current: payload.current,
|
||||
total: payload.total,
|
||||
currentName: payload.currentSession,
|
||||
phaseLabel: payload.phaseLabel || '',
|
||||
phaseProgress: payload.phaseProgress || 0,
|
||||
phaseTotal: payload.phaseTotal || 0
|
||||
updateTask(next.id, task => {
|
||||
if (task.status !== 'running') return task
|
||||
return {
|
||||
...task,
|
||||
progress: {
|
||||
current: payload.current,
|
||||
total: payload.total,
|
||||
currentName: payload.currentSession,
|
||||
phaseLabel: payload.phaseLabel || '',
|
||||
phaseProgress: payload.phaseProgress || 0,
|
||||
phaseTotal: payload.phaseTotal || 0
|
||||
}
|
||||
}
|
||||
}))
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1671,16 +1697,40 @@ function ExportPage() {
|
||||
format: snsOptions.format,
|
||||
exportMedia: snsOptions.exportMedia,
|
||||
startTime: snsOptions.startTime,
|
||||
endTime: snsOptions.endTime
|
||||
endTime: snsOptions.endTime,
|
||||
taskId: next.id
|
||||
})
|
||||
|
||||
if (!result.success) {
|
||||
updateTask(next.id, task => ({
|
||||
...task,
|
||||
status: 'error',
|
||||
controlState: undefined,
|
||||
finishedAt: Date.now(),
|
||||
error: result.error || '朋友圈导出失败'
|
||||
}))
|
||||
} else if (result.stopped) {
|
||||
updateTask(next.id, task => ({
|
||||
...task,
|
||||
status: 'stopped',
|
||||
controlState: undefined,
|
||||
finishedAt: Date.now(),
|
||||
progress: {
|
||||
...task.progress,
|
||||
phaseLabel: '已停止'
|
||||
}
|
||||
}))
|
||||
} else if (result.paused) {
|
||||
updateTask(next.id, task => ({
|
||||
...task,
|
||||
status: 'paused',
|
||||
controlState: undefined,
|
||||
finishedAt: Date.now(),
|
||||
progress: {
|
||||
...task.progress,
|
||||
phaseLabel: '已暂停'
|
||||
}
|
||||
}))
|
||||
} else {
|
||||
const doneAt = Date.now()
|
||||
const exportedPosts = Math.max(0, result.postCount || 0)
|
||||
@@ -1692,6 +1742,7 @@ function ExportPage() {
|
||||
updateTask(next.id, task => ({
|
||||
...task,
|
||||
status: 'success',
|
||||
controlState: undefined,
|
||||
finishedAt: doneAt,
|
||||
progress: {
|
||||
...task.progress,
|
||||
@@ -1711,13 +1762,15 @@ function ExportPage() {
|
||||
const result = await window.electronAPI.export.exportSessions(
|
||||
next.payload.sessionIds,
|
||||
next.payload.outputDir,
|
||||
next.payload.options
|
||||
next.payload.options,
|
||||
next.id
|
||||
)
|
||||
|
||||
if (!result.success) {
|
||||
updateTask(next.id, task => ({
|
||||
...task,
|
||||
status: 'error',
|
||||
controlState: undefined,
|
||||
finishedAt: Date.now(),
|
||||
error: result.error || '导出失败'
|
||||
}))
|
||||
@@ -1726,29 +1779,94 @@ function ExportPage() {
|
||||
const contentTypes = next.payload.contentType
|
||||
? [next.payload.contentType]
|
||||
: inferContentTypesFromOptions(next.payload.options)
|
||||
const successSessionIds = Array.isArray(result.successSessionIds)
|
||||
? result.successSessionIds
|
||||
: []
|
||||
if (successSessionIds.length > 0) {
|
||||
markSessionExported(successSessionIds, doneAt)
|
||||
markContentExported(successSessionIds, contentTypes, doneAt)
|
||||
}
|
||||
|
||||
markSessionExported(next.payload.sessionIds, doneAt)
|
||||
markContentExported(next.payload.sessionIds, contentTypes, doneAt)
|
||||
if (result.stopped) {
|
||||
updateTask(next.id, task => ({
|
||||
...task,
|
||||
status: 'stopped',
|
||||
controlState: undefined,
|
||||
finishedAt: doneAt,
|
||||
progress: {
|
||||
...task.progress,
|
||||
current: result.successCount + result.failCount,
|
||||
total: task.progress.total || next.payload.sessionIds.length,
|
||||
phaseLabel: '已停止'
|
||||
}
|
||||
}))
|
||||
} else if (result.paused) {
|
||||
const pendingSessionIds = Array.isArray(result.pendingSessionIds)
|
||||
? result.pendingSessionIds
|
||||
: []
|
||||
const sessionNameMap = new Map<string, string>()
|
||||
next.payload.sessionIds.forEach((sessionId, index) => {
|
||||
sessionNameMap.set(sessionId, next.payload.sessionNames[index] || sessionId)
|
||||
})
|
||||
const pendingSessionNames = pendingSessionIds.map(sessionId => sessionNameMap.get(sessionId) || sessionId)
|
||||
|
||||
updateTask(next.id, task => ({
|
||||
...task,
|
||||
status: 'success',
|
||||
finishedAt: doneAt,
|
||||
progress: {
|
||||
...task.progress,
|
||||
current: task.progress.total || next.payload.sessionIds.length,
|
||||
total: task.progress.total || next.payload.sessionIds.length,
|
||||
phaseLabel: '完成',
|
||||
phaseProgress: 1,
|
||||
phaseTotal: 1
|
||||
if (pendingSessionIds.length === 0) {
|
||||
updateTask(next.id, task => ({
|
||||
...task,
|
||||
status: 'success',
|
||||
controlState: undefined,
|
||||
finishedAt: doneAt,
|
||||
progress: {
|
||||
...task.progress,
|
||||
current: task.progress.total || next.payload.sessionIds.length,
|
||||
total: task.progress.total || next.payload.sessionIds.length,
|
||||
phaseLabel: '完成',
|
||||
phaseProgress: 1,
|
||||
phaseTotal: 1
|
||||
}
|
||||
}))
|
||||
} else {
|
||||
updateTask(next.id, task => ({
|
||||
...task,
|
||||
status: 'paused',
|
||||
controlState: undefined,
|
||||
finishedAt: doneAt,
|
||||
payload: {
|
||||
...task.payload,
|
||||
sessionIds: pendingSessionIds,
|
||||
sessionNames: pendingSessionNames
|
||||
},
|
||||
progress: {
|
||||
...task.progress,
|
||||
current: result.successCount + result.failCount,
|
||||
total: task.progress.total || next.payload.sessionIds.length,
|
||||
phaseLabel: '已暂停'
|
||||
}
|
||||
}))
|
||||
}
|
||||
}))
|
||||
} else {
|
||||
updateTask(next.id, task => ({
|
||||
...task,
|
||||
status: 'success',
|
||||
controlState: undefined,
|
||||
finishedAt: doneAt,
|
||||
progress: {
|
||||
...task.progress,
|
||||
current: task.progress.total || next.payload.sessionIds.length,
|
||||
total: task.progress.total || next.payload.sessionIds.length,
|
||||
phaseLabel: '完成',
|
||||
phaseProgress: 1,
|
||||
phaseTotal: 1
|
||||
}
|
||||
}))
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
updateTask(next.id, task => ({
|
||||
...task,
|
||||
status: 'error',
|
||||
controlState: undefined,
|
||||
finishedAt: Date.now(),
|
||||
error: String(error)
|
||||
}))
|
||||
@@ -1771,6 +1889,88 @@ function ExportPage() {
|
||||
}
|
||||
}, [])
|
||||
|
||||
const pauseTask = useCallback(async (taskId: string) => {
|
||||
const target = tasksRef.current.find(task => task.id === taskId)
|
||||
if (!target) return
|
||||
|
||||
if (target.status === 'queued') {
|
||||
updateTask(taskId, task => ({
|
||||
...task,
|
||||
status: 'paused',
|
||||
controlState: undefined
|
||||
}))
|
||||
return
|
||||
}
|
||||
|
||||
if (target.status !== 'running') return
|
||||
|
||||
updateTask(taskId, task => (
|
||||
task.status === 'running'
|
||||
? { ...task, controlState: 'pausing' }
|
||||
: task
|
||||
))
|
||||
|
||||
const result = await window.electronAPI.export.pauseTask(taskId)
|
||||
if (!result.success) {
|
||||
updateTask(taskId, task => (
|
||||
task.status === 'running'
|
||||
? { ...task, controlState: undefined }
|
||||
: task
|
||||
))
|
||||
window.alert(result.error || '暂停任务失败，请重试')
|
||||
}
|
||||
}, [updateTask])
|
||||
|
||||
const resumeTask = useCallback((taskId: string) => {
|
||||
updateTask(taskId, task => {
|
||||
if (task.status !== 'paused') return task
|
||||
return {
|
||||
...task,
|
||||
status: 'queued',
|
||||
controlState: undefined
|
||||
}
|
||||
})
|
||||
}, [updateTask])
|
||||
|
||||
const stopTask = useCallback(async (taskId: string) => {
|
||||
const target = tasksRef.current.find(task => task.id === taskId)
|
||||
if (!target) return
|
||||
const shouldStop = window.confirm('确认停止该导出任务吗？')
|
||||
if (!shouldStop) return
|
||||
|
||||
if (target.status === 'queued' || target.status === 'paused') {
|
||||
updateTask(taskId, task => ({
|
||||
...task,
|
||||
status: 'stopped',
|
||||
controlState: undefined,
|
||||
finishedAt: Date.now(),
|
||||
progress: {
|
||||
...task.progress,
|
||||
phaseLabel: '已停止'
|
||||
}
|
||||
}))
|
||||
return
|
||||
}
|
||||
|
||||
if (target.status !== 'running') return
|
||||
|
||||
updateTask(taskId, task => (
|
||||
task.status === 'running'
|
||||
? { ...task, controlState: 'stopping' }
|
||||
: task
|
||||
))
|
||||
|
||||
const result = await window.electronAPI.export.stopTask(taskId)
|
||||
if (!result.success) {
|
||||
updateTask(taskId, task => (
|
||||
task.status === 'running'
|
||||
? { ...task, controlState: undefined }
|
||||
: task
|
||||
))
|
||||
window.alert(result.error || '停止任务失败，请重试')
|
||||
}
|
||||
}, [updateTask])
|
||||
|
||||
const createTask = async () => {
|
||||
if (!exportDialog.open || !exportFolder) return
|
||||
if (exportDialog.scope !== 'sns' && exportDialog.sessionIds.length === 0) return
|
||||
@@ -1892,6 +2092,17 @@ function ExportPage() {
|
||||
return set
|
||||
}, [tasks])
|
||||
|
||||
const pausedSessionIds = useMemo(() => {
|
||||
const set = new Set<string>()
|
||||
for (const task of tasks) {
|
||||
if (task.status !== 'paused') continue
|
||||
for (const id of task.payload.sessionIds) {
|
||||
set.add(id)
|
||||
}
|
||||
}
|
||||
return set
|
||||
}, [tasks])
|
||||
|
||||
const runningCardTypes = useMemo(() => {
|
||||
const set = new Set<ContentCardType>()
|
||||
for (const task of tasks) {
|
||||
@@ -2299,6 +2510,7 @@ function ExportPage() {
|
||||
|
||||
const isRunning = runningSessionIds.has(session.username)
|
||||
const isQueued = queuedSessionIds.has(session.username)
|
||||
const isPaused = pausedSessionIds.has(session.username)
|
||||
const recent = formatRecentExportTime(lastExportBySession[session.username], nowTick)
|
||||
|
||||
return (
|
||||
@@ -2311,8 +2523,8 @@ function ExportPage() {
|
||||
详情
|
||||
</button>
|
||||
<button
|
||||
className={`row-export-btn ${isRunning ? 'running' : ''}`}
|
||||
disabled={isRunning}
|
||||
className={`row-export-btn ${isRunning ? 'running' : ''} ${isPaused ? 'paused' : ''}`}
|
||||
disabled={isRunning || isPaused}
|
||||
onClick={() => openSingleExport(session)}
|
||||
>
|
||||
{isRunning ? (
|
||||
@@ -2320,7 +2532,7 @@ function ExportPage() {
|
||||
<Loader2 size={14} className="spin" />
|
||||
导出中
|
||||
</>
|
||||
) : isQueued ? '排队中' : '导出'}
|
||||
) : isPaused ? '已暂停' : isQueued ? '排队中' : '导出'}
|
||||
</button>
|
||||
</div>
|
||||
{recent && <span className="row-export-time">{recent}</span>}
|
||||
@@ -2395,6 +2607,7 @@ function ExportPage() {
|
||||
const isSnsCardStatsLoading = !hasSeededSnsStats
|
||||
const taskRunningCount = tasks.filter(task => task.status === 'running').length
|
||||
const taskQueuedCount = tasks.filter(task => task.status === 'queued').length
|
||||
const taskPausedCount = tasks.filter(task => task.status === 'paused').length
|
||||
const showInitialSkeleton = isLoading && sessions.length === 0
|
||||
const chooseExportFolder = useCallback(async () => {
|
||||
const result = await window.electronAPI.dialog.openFile({
|
||||
@@ -2448,62 +2661,119 @@ function ExportPage() {
|
||||
<div className="task-summary">
|
||||
<span>进行中 {taskRunningCount}</span>
|
||||
<span>排队 {taskQueuedCount}</span>
|
||||
<span>暂停 {taskPausedCount}</span>
|
||||
<span>总计 {tasks.length}</span>
|
||||
</div>
|
||||
<button
|
||||
className="task-collapse-btn"
|
||||
className={`task-open-btn ${taskRunningCount > 0 ? 'active-running' : ''}`}
|
||||
type="button"
|
||||
onClick={() => setIsTaskCenterExpanded(prev => !prev)}
|
||||
onClick={() => setIsTaskCenterOpen(true)}
|
||||
>
|
||||
{isTaskCenterExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
|
||||
{isTaskCenterExpanded ? '收起' : '展开'}
|
||||
任务卡片
|
||||
{taskRunningCount > 0 && <span className="task-running-badge">{taskRunningCount}</span>}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isTaskCenterExpanded && (
|
||||
<div className="task-center expanded">
|
||||
{tasks.length === 0 ? (
|
||||
<div className="task-empty">暂无任务。点击会话导出或卡片导出后会在这里创建任务。</div>
|
||||
) : (
|
||||
<div className="task-list">
|
||||
{tasks.map(task => (
|
||||
<div key={task.id} className={`task-card ${task.status}`}>
|
||||
<div className="task-main">
|
||||
<div className="task-title">{task.title}</div>
|
||||
<div className="task-meta">
|
||||
<span className={`task-status ${task.status}`}>{task.status === 'queued' ? '排队中' : task.status === 'running' ? '进行中' : task.status === 'success' ? '已完成' : '失败'}</span>
|
||||
<span>{new Date(task.createdAt).toLocaleString('zh-CN')}</span>
|
||||
</div>
|
||||
{task.status === 'running' && (
|
||||
<>
|
||||
<div className="task-progress-bar">
|
||||
<div
|
||||
className="task-progress-fill"
|
||||
style={{ width: `${task.progress.total > 0 ? (task.progress.current / task.progress.total) * 100 : 0}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="task-progress-text">
|
||||
{task.progress.total > 0
|
||||
? `${task.progress.current} / ${task.progress.total}`
|
||||
: '处理中'}
|
||||
{task.progress.phaseLabel ? ` · ${task.progress.phaseLabel}` : ''}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{task.status === 'error' && <div className="task-error">{task.error || '任务失败'}</div>}
|
||||
</div>
|
||||
<div className="task-actions">
|
||||
<button className="secondary-btn" onClick={() => exportFolder && void window.electronAPI.shell.openPath(exportFolder)}>
|
||||
<FolderOpen size={14} /> 目录
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{isTaskCenterOpen && (
|
||||
<div
|
||||
className="task-center-modal-overlay"
|
||||
onClick={() => setIsTaskCenterOpen(false)}
|
||||
>
|
||||
<div
|
||||
className="task-center-modal"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="任务中心"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<div className="task-center-modal-header">
|
||||
<div className="task-center-modal-title">
|
||||
<h3>任务中心</h3>
|
||||
<span>进行中 {taskRunningCount} · 排队 {taskQueuedCount} · 暂停 {taskPausedCount} · 总计 {tasks.length}</span>
|
||||
</div>
|
||||
<button
|
||||
className="close-icon-btn"
|
||||
type="button"
|
||||
onClick={() => setIsTaskCenterOpen(false)}
|
||||
aria-label="关闭任务中心"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div className="task-center-modal-body">
|
||||
{tasks.length === 0 ? (
|
||||
<div className="task-empty">暂无任务。点击会话导出或卡片导出后会在这里创建任务。</div>
|
||||
) : (
|
||||
<div className="task-list">
|
||||
{tasks.map(task => (
|
||||
<div key={task.id} className={`task-card ${task.status} ${task.controlState ? `request-${task.controlState}` : ''}`}>
|
||||
<div className="task-main">
|
||||
<div className="task-title">{task.title}</div>
|
||||
<div className="task-meta">
|
||||
<span className={`task-status ${task.status}`}>{getTaskStatusLabel(task)}</span>
|
||||
<span>{new Date(task.createdAt).toLocaleString('zh-CN')}</span>
|
||||
</div>
|
||||
{(task.status === 'running' || task.status === 'paused') && (
|
||||
<>
|
||||
<div className="task-progress-bar">
|
||||
<div
|
||||
className="task-progress-fill"
|
||||
style={{ width: `${task.progress.total > 0 ? (task.progress.current / task.progress.total) * 100 : 0}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="task-progress-text">
|
||||
{task.progress.total > 0
|
||||
? `${task.progress.current} / ${task.progress.total}`
|
||||
: '处理中'}
|
||||
{task.progress.phaseLabel ? ` · ${task.progress.phaseLabel}` : ''}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{task.status === 'error' && <div className="task-error">{task.error || '任务失败'}</div>}
|
||||
</div>
|
||||
<div className="task-actions">
|
||||
{(task.status === 'running' || task.status === 'queued') && (
|
||||
<button
|
||||
className="task-action-btn"
|
||||
type="button"
|
||||
onClick={() => void pauseTask(task.id)}
|
||||
disabled={task.status === 'running' && task.controlState === 'pausing'}
|
||||
>
|
||||
{task.status === 'running' && task.controlState === 'pausing' ? '暂停中' : '暂停'}
|
||||
</button>
|
||||
)}
|
||||
{task.status === 'paused' && (
|
||||
<button
|
||||
className="task-action-btn primary"
|
||||
type="button"
|
||||
onClick={() => resumeTask(task.id)}
|
||||
>
|
||||
继续
|
||||
</button>
|
||||
)}
|
||||
{(task.status === 'running' || task.status === 'queued' || task.status === 'paused') && (
|
||||
<button
|
||||
className="task-action-btn danger"
|
||||
type="button"
|
||||
onClick={() => void stopTask(task.id)}
|
||||
disabled={task.status === 'running' && task.controlState === 'stopping'}
|
||||
>
|
||||
{task.status === 'running' && task.controlState === 'stopping' ? '停止中' : '停止'}
|
||||
</button>
|
||||
)}
|
||||
<button className="task-action-btn" onClick={() => task.payload.outputDir && void window.electronAPI.shell.openPath(task.payload.outputDir)}>
|
||||
<FolderOpen size={14} /> 目录
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -2677,6 +2947,7 @@ function ExportPage() {
|
||||
const canExport = Boolean(matchedSession?.hasSession)
|
||||
const isRunning = canExport && runningSessionIds.has(contact.username)
|
||||
const isQueued = canExport && queuedSessionIds.has(contact.username)
|
||||
const isPaused = canExport && pausedSessionIds.has(contact.username)
|
||||
const recent = canExport ? formatRecentExportTime(lastExportBySession[contact.username], nowTick) : ''
|
||||
return (
|
||||
<div
|
||||
@@ -2708,8 +2979,8 @@ function ExportPage() {
|
||||
详情
|
||||
</button>
|
||||
<button
|
||||
className={`row-export-btn ${isRunning ? 'running' : ''} ${!canExport ? 'no-session' : ''}`}
|
||||
disabled={!canExport || isRunning}
|
||||
className={`row-export-btn ${isRunning ? 'running' : ''} ${isPaused ? 'paused' : ''} ${!canExport ? 'no-session' : ''}`}
|
||||
disabled={!canExport || isRunning || isPaused}
|
||||
onClick={() => {
|
||||
if (!matchedSession || !matchedSession.hasSession) return
|
||||
openSingleExport({
|
||||
@@ -2723,7 +2994,7 @@ function ExportPage() {
|
||||
<Loader2 size={14} className="spin" />
|
||||
导出中
|
||||
</>
|
||||
) : !canExport ? '暂无会话' : isQueued ? '排队中' : '导出'}
|
||||
) : !canExport ? '暂无会话' : isPaused ? '已暂停' : isQueued ? '排队中' : '导出'}
|
||||
</button>
|
||||
</div>
|
||||
{recent && <span className="row-export-time">{recent}</span>}
|
||||
|
||||
Reference in New Issue
Block a user