Commit c482de02 by luoqi

fix(web): 伴飞分段条响应式不溢出 + 深度过程步骤箭头更友好

- 伴飞(copilot)分段进度条:按钮加 min-w-0(flex 子项默认 min-width:auto 不收缩 → truncate 失效 →
  6步时溢出截断),序号圈加 flex-none。现在多段自适应收缩 + 省略,不再被右侧切掉。
- 深度过程面板:展开标识改成'右指箭头→展开旋90°朝下'的经典 disclosure(更清晰友好)+ 整行 hover 高亮 +
  aria-expanded;detail 缩进对齐按钮 padding。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
parent 1f2e3288
......@@ -44,25 +44,29 @@ export function ScriptDeepProcess({ steps }: { steps: DeepStep[] }) {
<button
type="button"
onClick={hasDetail ? toggle : undefined}
className={`flex w-full items-center gap-2 text-left ${hasDetail ? 'cursor-pointer' : 'cursor-default'}`}
aria-expanded={hasDetail ? open : undefined}
className={`flex w-full items-center gap-2 rounded px-1.5 py-1 text-left transition-colors ${
hasDetail ? 'cursor-pointer hover:bg-slate-100' : 'cursor-default'
}`}
>
<StepIcon status={s.status} />
<span className="font-medium text-slate-700">{STEP_LABEL[s.step]}</span>
{s.status === 'running' && <span className="shimmer-text text-slate-400"></span>}
{hasDetail && (
// 右指箭头(收起)→ 旋转 90° 朝下(展开):清晰的可展开标识
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
className={`ml-auto h-3 w-3 flex-none text-slate-400 transition-transform ${open ? 'rotate-180' : ''}`}
strokeWidth="2.5"
className={`ml-auto h-3.5 w-3.5 flex-none text-slate-400 transition-transform ${open ? 'rotate-90' : ''}`}
>
<path d="M6 9l6 6 6-6" strokeLinecap="round" strokeLinejoin="round" />
<path d="M9 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
</svg>
)}
</button>
{hasDetail && open && (
<div className="mt-1 pl-[22px]">
<div className="mt-1 pl-7">
<StepDetail step={s} />
</div>
)}
......
......@@ -99,7 +99,7 @@ export function ScriptCopilot({ sections, streaming = false }: { sections: Scrip
key={s.id}
onClick={() => setActive(i)}
className={cn(
'flex-1 text-[11px] font-medium px-2 py-1.5 rounded transition-colors flex items-center justify-center gap-1.5',
'flex-1 min-w-0 text-[11px] font-medium px-2 py-1.5 rounded transition-colors flex items-center justify-center gap-1.5',
i === active
? 'bg-teal-600 text-white shadow-sm'
: i < active
......@@ -109,7 +109,7 @@ export function ScriptCopilot({ sections, streaming = false }: { sections: Scrip
>
<span
className={cn(
'w-4 h-4 rounded-full flex items-center justify-center text-[9.5px]',
'w-4 h-4 flex-none rounded-full flex items-center justify-center text-[9.5px]',
i === active
? 'bg-white/20 text-white'
: i < active
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment