WuYongJie/gongxiangp2
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refine task detail image insert control

Browse Source
This commit is contained in:
chenpei 2026-08-28 20:52:18 +08:00
parent d27e86a7b1
commit a645326593
2 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/detail/ProductPackageDetail.test.tsx
View File

@ -47,6 +47,9 @@ describe('ProductPackageDetail task-detail editing affordances', () => {
const insertButtons = screen.getAllByRole('button', { name: /在详情图 \d 和详情图 \d 之间插入图片/ })
expect(insertButtons).toHaveLength(2)
expect(insertButtons[0]).toHaveClass('absolute', 'h-10', 'w-10', 'md:opacity-0')
expect(insertButtons[0].parentElement).toHaveClass('h-0')
expect(screen.queryByText('在这里插入图片')).not.toBeInTheDocument()
await user.click(screen.getByRole('button', { name: '追加图片，加入主图末尾' }))
expect(onRequestAppend).toHaveBeenCalledWith('main')

28
components/detail/ProductPackageDetail.tsx
View File

@ -109,18 +109,22 @@ function DetailInsertButton({
beforeIndex: number;
}) {
return (
<button
type="button"
disabled={disabled}
onClick={onClick}
aria-label={`在详情图 ${afterIndex} 和详情图 ${beforeIndex} 之间插入图片`}
className="my-2 flex w-full items-center justify-center gap-2 rounded-[8px] border border-dashed border-[#cfd6dd] bg-[#fafafa] px-3 py-2 text-[12px] font-medium tracking-[-0.02em] text-[#4f6077] transition-colors hover:border-[#1a1c1d] hover:bg-white hover:text-[#1a1c1d] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1a1c1d]/70 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
>
<svg viewBox="0 0 20 20" className="h-4 w-4" fill="none" stroke="currentColor" aria-hidden="true">
<path d="M10 4v12M4 10h12" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.6" />
</svg>
<span>在这里插入图片</span>
</button>
<div className="group/seam pointer-events-none relative z-20 h-0">
<button
type="button"
disabled={disabled}
onClick={onClick}
title="插入图片"
aria-label={`在详情图 ${afterIndex} 和详情图 ${beforeIndex} 之间插入图片`}
className="pointer-events-auto absolute left-1/2 top-0 flex h-10 w-10 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full text-[#4f6077] opacity-70 transition-[opacity,color] hover:text-[#1a1c1d] hover:opacity-100 focus-visible:text-[#1a1c1d] focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1a1c1d]/70 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-30 md:opacity-0 md:group-hover/seam:opacity-100"
>
<span className="flex h-7 w-7 items-center justify-center rounded-full border border-[#d9dde1] bg-white/95">
<svg viewBox="0 0 20 20" className="h-3.5 w-3.5" fill="none" stroke="currentColor" aria-hidden="true">
<path d="M10 5v10M5 10h10" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.6" />
</svg>
</span>
</button>
</div>
);
}