From a6453265936a05cf9fe24624316d5b7c5439c71a Mon Sep 17 00:00:00 2001
From: chenpei <chenpei@1080p.hk>
Date: Fri, 28 Aug 2026 20:52:18 +0800
Subject: [PATCH] refine task detail image insert control

---
 .../detail/ProductPackageDetail.test.tsx      |  3 ++
 components/detail/ProductPackageDetail.tsx    | 28 +++++++++++--------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/components/detail/ProductPackageDetail.test.tsx b/components/detail/ProductPackageDetail.test.tsx
index 3d36be2..e11b9ac 100644
--- a/components/detail/ProductPackageDetail.test.tsx
+++ b/components/detail/ProductPackageDetail.test.tsx
@@ -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')
diff --git a/components/detail/ProductPackageDetail.tsx b/components/detail/ProductPackageDetail.tsx
index fe3afa6..3eb97a7 100644
--- a/components/detail/ProductPackageDetail.tsx
+++ b/components/detail/ProductPackageDetail.tsx
@@ -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>
   );
 }