feat: 移除右侧任务概览面板，任务列表占满整屏
- 删除 TasksPage 的 aside 任务概览区块及其全部 CSS - 空状态并入列表: 无任务时在列表内显示「还没有任务+新建按钮」, 搜索无结果显示原提示 - .tasks-content 改为单列布局, 任务列表占满可用宽度
This commit is contained in:
yu
parent
56d00fba49
commit
03e3d31a83
@ -44,8 +44,6 @@ function formatDuration(value?: number): string {
|
||||
return `${(value / 1000).toFixed(value < 10000 ? 1 : 0)} s`;
|
||||
}
|
||||
|
||||
const RUN_LABEL = { succeeded: "成功", failed: "失败", cancelled: "已取消", never: "未运行" } as const;
|
||||
|
||||
export function TasksPage({ flows, onCreate, onCreateExamples, onOpenEditor, onRun, onDelete, onRefresh, onToast }: TasksPageProps) {
|
||||
const [query, setQuery] = useState("");
|
||||
const [selectedId, setSelectedId] = useState<string | null>(flows[0]?.id || null);
|
||||
@ -172,38 +170,13 @@ export function TasksPage({ flows, onCreate, onCreateExamples, onOpenEditor, onR
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
{!filtered.length && (
|
||||
{!flows.length ? (
|
||||
<div className="task-empty"><ListChecks className="icon" /><strong>还没有任务</strong><span>新建一个任务开始搭建自动化流程。</span><button type="button" className="btn btn-primary" onClick={onCreate}><Plus className="icon" />新建任务</button></div>
|
||||
) : !filtered.length ? (
|
||||
<div className="task-empty"><ListChecks className="icon" /><strong>没有匹配的任务</strong><span>调整搜索条件，或新建一个自动化任务。</span></div>
|
||||
)}
|
||||
) : null}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside className="panel task-overview" aria-label="任务概览">
|
||||
{selected ? (
|
||||
<>
|
||||
<div className="task-overview-head">
|
||||
<span className="task-icon large"><ListChecks className="icon" /></span>
|
||||
<div><span className="eyebrow">任务概览</span><h2>{selected.name}</h2></div>
|
||||
</div>
|
||||
<div className="overview-status"><span className="status-dot" />{selected.enabled === false ? "未启用" : "已启用"}<span className="overview-sep" />本地执行</div>
|
||||
<div className="overview-actions">
|
||||
<button type="button" className="btn btn-primary" onClick={() => onRun(selected.id)}><CirclePlay className="icon" />运行任务</button>
|
||||
<button type="button" className="btn" onClick={() => onOpenEditor(selected.id)}><Pencil className="icon" />编辑流程</button>
|
||||
</div>
|
||||
<dl className="overview-meta">
|
||||
<div><dt>触发方式</dt><dd><CalendarClock className="icon" />{selected.triggerLabel || "手动运行"}</dd></div>
|
||||
<div><dt>流程节点</dt><dd>{selected.nodeCount} 个</dd></div>
|
||||
<div><dt>最近运行</dt><dd className={`overview-run ${selected.lastRunStatus || "never"}`}>{RUN_LABEL[selected.lastRunStatus || "never"]} · {selected.lastRunAt ? formatTime(selected.lastRunAt) : "尚未运行"}</dd></div>
|
||||
<div><dt>运行耗时</dt><dd>{selected.lastRunDurationMs === undefined ? "—" : formatDuration(selected.lastRunDurationMs)}</dd></div>
|
||||
{selected.lastRunError && <div><dt>失败原因</dt><dd className="overview-error" title={selected.lastRunError}>{selected.lastRunError}</dd></div>}
|
||||
<div><dt>最近修改</dt><dd>{formatTime(selected.updatedAt)}</dd></div>
|
||||
</dl>
|
||||
<div className="overview-note"><Zap className="icon" /><span>任务打开后先查看概览；只有点击“编辑流程”才进入画布。</span></div>
|
||||
</>
|
||||
) : (
|
||||
<div className="task-empty overview-empty"><ListChecks className="icon" /><strong>还没有任务</strong><span>新建一个任务开始搭建自动化流程。</span><button type="button" className="btn btn-primary" onClick={onCreate}><Plus className="icon" />新建任务</button></div>
|
||||
)}
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -2705,8 +2705,7 @@ textarea:focus-visible {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.page-heading-actions,
|
||||
.overview-actions {
|
||||
.page-heading-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
@ -2756,12 +2755,10 @@ textarea:focus-visible {
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.75fr);
|
||||
gap: 12px;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.task-list-panel,
|
||||
.task-overview {
|
||||
.task-list-panel {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
@ -2863,9 +2860,7 @@ textarea:focus-visible {
|
||||
.task-name-cell,
|
||||
.task-trigger,
|
||||
.task-updated,
|
||||
.task-status,
|
||||
.overview-status,
|
||||
.overview-meta dd {
|
||||
.task-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
@ -2883,22 +2878,11 @@ textarea:focus-visible {
|
||||
color: var(--blue-dark);
|
||||
}
|
||||
|
||||
.task-icon.large {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.task-icon .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.task-icon.large .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.task-copy {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
@ -2933,29 +2917,18 @@ textarea:focus-visible {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.run-result.failed,
|
||||
.overview-run.failed,
|
||||
.overview-error {
|
||||
.run-result.failed {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.run-result.succeeded,
|
||||
.overview-run.succeeded {
|
||||
.run-result.succeeded {
|
||||
color: var(--success-deep);
|
||||
}
|
||||
|
||||
.run-result.cancelled,
|
||||
.overview-run.cancelled {
|
||||
.run-result.cancelled {
|
||||
color: var(--warn-deep);
|
||||
}
|
||||
|
||||
.overview-error {
|
||||
max-width: 210px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.task-status {
|
||||
font-size: 10.5px;
|
||||
white-space: nowrap;
|
||||
@ -3036,108 +3009,6 @@ textarea:focus-visible {
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.overview-empty {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.task-overview {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.task-overview-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
}
|
||||
|
||||
.task-overview-head h2 {
|
||||
max-width: 230px;
|
||||
margin-top: 3px;
|
||||
overflow: hidden;
|
||||
color: var(--ink);
|
||||
font-size: 17px;
|
||||
line-height: 23px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.overview-status {
|
||||
margin-top: 16px;
|
||||
color: var(--success-deep);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.overview-sep {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background: var(--line-strong);
|
||||
}
|
||||
|
||||
.overview-actions {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.overview-actions .btn {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.overview-meta {
|
||||
margin-top: 20px;
|
||||
display: grid;
|
||||
gap: 0;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.overview-meta > div {
|
||||
min-height: 48px;
|
||||
padding: 8px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.overview-meta dt {
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.overview-meta dd {
|
||||
justify-content: flex-end;
|
||||
color: var(--ink-2);
|
||||
font-size: 11px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.overview-meta dd .icon {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.overview-note {
|
||||
margin-top: auto;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
border: 1px solid rgba(34, 100, 229, 0.1);
|
||||
border-radius: 9px;
|
||||
background: var(--blue-mist);
|
||||
color: var(--ink-2);
|
||||
font-size: 10.5px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.overview-note .icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex: none;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
/* ---------- 组件树 ---------- */
|
||||
.palette-expand-all {
|
||||
min-height: 24px;
|
||||
@ -3333,10 +3204,6 @@ textarea:focus-visible {
|
||||
}
|
||||
|
||||
@media (max-width: 1250px) {
|
||||
.tasks-content {
|
||||
grid-template-columns: minmax(0, 1fr) 300px;
|
||||
}
|
||||
|
||||
.task-table-head,
|
||||
.task-row {
|
||||
grid-template-columns: minmax(170px, 1.3fr) 82px minmax(90px, 0.8fr) 96px 96px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user