mirror of
https://github.com/hicccc77/WeFlow.git
synced 2026-03-24 23:06:51 +00:00
feat(export): compact task center entry
This commit is contained in:
aits2026
@@ -20,6 +20,12 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.export-top-bar {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.export-section-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -255,6 +261,7 @@
|
||||
}
|
||||
|
||||
.global-export-controls {
|
||||
flex: 1;
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
@@ -499,81 +506,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.task-center-control {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.task-center-inline {
|
||||
min-height: 34px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-secondary);
|
||||
padding: 0 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.task-summary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.task-open-btn {
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-primary);
|
||||
border-radius: 7px;
|
||||
padding: 3px 7px;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
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 {
|
||||
border-radius: 7px;
|
||||
padding: 6px 9px;
|
||||
@@ -583,6 +515,58 @@
|
||||
}
|
||||
}
|
||||
|
||||
.task-center-card {
|
||||
min-width: 92px;
|
||||
min-height: 42px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
background: var(--card-bg);
|
||||
color: var(--text-primary);
|
||||
padding: 10px 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&.has-alert {
|
||||
border-color: rgba(255, 77, 79, 0.28);
|
||||
box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.task-center-card-label {
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.task-center-card-badge {
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 999px;
|
||||
background: #ff4d4f;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 5px;
|
||||
line-height: 1;
|
||||
box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.16);
|
||||
animation: exportTaskBadgePulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.content-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
|
||||
@@ -3288,6 +3272,10 @@
|
||||
}
|
||||
|
||||
@media (max-width: 1360px) {
|
||||
.export-top-bar {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.global-export-controls {
|
||||
padding: 10px;
|
||||
gap: 8px;
|
||||
@@ -3307,12 +3295,18 @@
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.export-top-bar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.global-export-controls {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.task-center-control {
|
||||
grid-column: 1 / -1;
|
||||
.task-center-card {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -4884,6 +4884,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 taskCenterAlertCount = taskRunningCount + taskQueuedCount
|
||||
const hasFilteredContacts = filteredContacts.length > 0
|
||||
const sessionLoadDetailUpdatedAt = useMemo(() => {
|
||||
let latest = 0
|
||||
@@ -5149,60 +5150,54 @@ function ExportPage() {
|
||||
return (
|
||||
<div className="export-board-page">
|
||||
<div className="export-top-panel">
|
||||
<div className="global-export-controls">
|
||||
<div className="path-control">
|
||||
<span className="control-label">导出位置</span>
|
||||
<div className="path-inline-row">
|
||||
<div className="path-value">
|
||||
<button
|
||||
className="path-link"
|
||||
type="button"
|
||||
title={exportFolder}
|
||||
onClick={() => void chooseExportFolder()}
|
||||
>
|
||||
{exportFolder || '未设置'}
|
||||
</button>
|
||||
<button className="path-change-btn" type="button" onClick={() => void chooseExportFolder()}>
|
||||
更换
|
||||
<div className="export-top-bar">
|
||||
<div className="global-export-controls">
|
||||
<div className="path-control">
|
||||
<span className="control-label">导出位置</span>
|
||||
<div className="path-inline-row">
|
||||
<div className="path-value">
|
||||
<button
|
||||
className="path-link"
|
||||
type="button"
|
||||
title={exportFolder}
|
||||
onClick={() => void chooseExportFolder()}
|
||||
>
|
||||
{exportFolder || '未设置'}
|
||||
</button>
|
||||
<button className="path-change-btn" type="button" onClick={() => void chooseExportFolder()}>
|
||||
更换
|
||||
</button>
|
||||
</div>
|
||||
<button className="secondary-btn" onClick={() => exportFolder && void window.electronAPI.shell.openPath(exportFolder)}>
|
||||
<ExternalLink size={14} /> 打开
|
||||
</button>
|
||||
</div>
|
||||
<button className="secondary-btn" onClick={() => exportFolder && void window.electronAPI.shell.openPath(exportFolder)}>
|
||||
<ExternalLink size={14} /> 打开
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<WriteLayoutSelector
|
||||
writeLayout={writeLayout}
|
||||
onChange={async (value) => {
|
||||
setWriteLayout(value)
|
||||
await configService.setExportWriteLayout(value)
|
||||
}}
|
||||
sessionNameWithTypePrefix={sessionNameWithTypePrefix}
|
||||
onSessionNameWithTypePrefixChange={async (enabled) => {
|
||||
setSessionNameWithTypePrefix(enabled)
|
||||
await configService.setExportSessionNamePrefixEnabled(enabled)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<WriteLayoutSelector
|
||||
writeLayout={writeLayout}
|
||||
onChange={async (value) => {
|
||||
setWriteLayout(value)
|
||||
await configService.setExportWriteLayout(value)
|
||||
}}
|
||||
sessionNameWithTypePrefix={sessionNameWithTypePrefix}
|
||||
onSessionNameWithTypePrefixChange={async (enabled) => {
|
||||
setSessionNameWithTypePrefix(enabled)
|
||||
await configService.setExportSessionNamePrefixEnabled(enabled)
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="task-center-control">
|
||||
<span className="control-label">任务中心</span>
|
||||
<div className="task-center-inline">
|
||||
<div className="task-summary">
|
||||
<span>进行中 {taskRunningCount}</span>
|
||||
<span>排队 {taskQueuedCount}</span>
|
||||
<span>总计 {tasks.length}</span>
|
||||
</div>
|
||||
<button
|
||||
className={`task-open-btn ${taskRunningCount > 0 ? 'active-running' : ''}`}
|
||||
type="button"
|
||||
onClick={() => setIsTaskCenterOpen(true)}
|
||||
>
|
||||
任务卡片
|
||||
{taskRunningCount > 0 && <span className="task-running-badge">{taskRunningCount}</span>}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className={`task-center-card ${taskCenterAlertCount > 0 ? 'has-alert' : ''}`}
|
||||
type="button"
|
||||
onClick={() => setIsTaskCenterOpen(true)}
|
||||
>
|
||||
<span className="task-center-card-label">任务中心</span>
|
||||
{taskCenterAlertCount > 0 && (
|
||||
<span className="task-center-card-badge">{taskCenterAlertCount}</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user