fix(tasks): 扫光改为整条完整扫过 + 折叠/展开按钮分向

用户反馈两条:

1) 扫光只有「部分」:第一版是 45% 宽的窄带 + background-position 位移,
   亮带始终只覆盖小条的一部分(峰值 22.5%→77.5%,两端扫不到),看起来像
   中间游走的一块光斑。改为与小条等宽的渐变带 + transform
   translateX(-100%) → translateX(100%):光带从左外侧进入、中途覆盖整条、
   再向右外侧离开,行程用条宽本身表达(任意条宽成立),末 1/3 周期停在
   右侧外侧留白。theme.spec 新增守护钉住该形状(宽度 100%、transform 行程、
   不再有 background-position/size 位移)。

2) 折叠按钮与展开按钮长得一样:三处控件原本共用向下箭头(控制条的折叠开关
   更是无论折叠还是展开都画同一个清单图标)。现按动作方向区分——
   卡片小条的逐节点按钮 = chevron up(收进聚合),聚合卡片 = chevron down
   (展开),控制条开关随状态在两者之间切换(并复用同一个折叠图标)。
   组件守护见 tasks-page.spec 的「draws COLLAPSE and EXPAND with different
   glyphs」。

真机证据(3080,真实运行中的后台任务):242px 小条上每 90ms 采样 ::after 的
matrix 平移量得到 [-23,32,85,131,163,-139,-94,-46,9,64,114,152,179,188]
(左侧 -139 → 右侧 +188,跨度超过一个条宽,单调推进);三处 svg 比对
expandVsCollapse / clusterMatchesExpand / clusterFlips / clusterCollapseMatchesCard
全部为 true。

验证:typecheck / lint ✅;pnpm test 1256 passed / 9 skipped(新增 2 例)。

(cherry picked from commit 0bb8228e6a7acb4302d9a8a9881d2df04a285152)
This commit is contained in:
Menghuan1918
2026-09-27 22:18:57 +08:00
parent d38fefe55d
commit 7cce50c493
6 changed files with 123 additions and 15 deletions
+13 -2
View File
@@ -30,7 +30,8 @@ import {
} from 'react'
import clsx from 'clsx'
import {
Button, IconChecklistOutlineRegular, IconChevronDownOutlineRegular, IconFullscreenOutlineRegular,
Button, IconChevronDownOutlineRegular, IconChevronUpOutlineRegular,
IconFullscreenOutlineRegular,
IconLoadingOutlineRegular, IconTreeCornerRegular,
} from '@deepseek-ai/dsh-client-ui-primitives'
import type { TasksAgentNode, TasksFoldNode, TasksNode, TasksWorkflowNode } from './tasks-model.ts'
@@ -164,6 +165,14 @@ export function ViewModeToggle(props: {
}
/** The fold toggle (expand / re-collapse the settled aggregates). */
/**
* The cluster's fold switch. Its glyph names the action it will take, not the
* state it is in: while the settled nodes are folded the button offers to
* EXPAND (chevron down), and while they are open it offers to FOLD (chevron
* up, the same collapse direction the cards' own bar buttons wear). The old
* single checklist glyph read identically in both states, which is what the
* reader reported as "折叠按钮和展开一样".
*/
export function FoldToggleButton(props: { folded: boolean; onToggleFold(): void }): ReactNode {
const { folded, onToggleFold } = props
return (
@@ -171,7 +180,9 @@ export function FoldToggleButton(props: { folded: boolean; onToggleFold(): void
variant="ghost"
size="sm"
className={clsx(css.controlBtn, folded && css.controlBtnActive)}
icon={<IconChecklistOutlineRegular size={13} />}
icon={folded
? <IconChevronDownOutlineRegular size={13} />
: <IconChevronUpOutlineRegular size={13} />}
aria-pressed={folded}
aria-label={t(folded ? 'tasksFoldExpand' : 'tasksFoldCollapse')}
title={t(folded ? 'tasksFoldExpand' : 'tasksFoldCollapse')}