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[] }) { ...@@ -44,25 +44,29 @@ export function ScriptDeepProcess({ steps }: { steps: DeepStep[] }) {
<button <button
type="button" type="button"
onClick={hasDetail ? toggle : undefined} 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} /> <StepIcon status={s.status} />
<span className="font-medium text-slate-700">{STEP_LABEL[s.step]}</span> <span className="font-medium text-slate-700">{STEP_LABEL[s.step]}</span>
{s.status === 'running' && <span className="shimmer-text text-slate-400"></span>} {s.status === 'running' && <span className="shimmer-text text-slate-400"></span>}
{hasDetail && ( {hasDetail && (
// 右指箭头(收起)→ 旋转 90° 朝下(展开):清晰的可展开标识
<svg <svg
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
strokeWidth="2" strokeWidth="2.5"
className={`ml-auto h-3 w-3 flex-none text-slate-400 transition-transform ${open ? 'rotate-180' : ''}`} 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> </svg>
)} )}
</button> </button>
{hasDetail && open && ( {hasDetail && open && (
<div className="mt-1 pl-[22px]"> <div className="mt-1 pl-7">
<StepDetail step={s} /> <StepDetail step={s} />
</div> </div>
)} )}
......
...@@ -99,7 +99,7 @@ export function ScriptCopilot({ sections, streaming = false }: { sections: Scrip ...@@ -99,7 +99,7 @@ export function ScriptCopilot({ sections, streaming = false }: { sections: Scrip
key={s.id} key={s.id}
onClick={() => setActive(i)} onClick={() => setActive(i)}
className={cn( 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 i === active
? 'bg-teal-600 text-white shadow-sm' ? 'bg-teal-600 text-white shadow-sm'
: i < active : i < active
...@@ -109,7 +109,7 @@ export function ScriptCopilot({ sections, streaming = false }: { sections: Scrip ...@@ -109,7 +109,7 @@ export function ScriptCopilot({ sections, streaming = false }: { sections: Scrip
> >
<span <span
className={cn( 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 i === active
? 'bg-white/20 text-white' ? 'bg-white/20 text-white'
: i < active : 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