From ec60f22761c7e445eca429417031c074b9a0bae8 Mon Sep 17 00:00:00 2001
From: baiqing <lbx12309@icloud.com>
Date: Sat, 16 May 2026 17:18:56 +0800
Subject: [PATCH] =?UTF-8?q?fix(marketplace):=20=E4=B8=8A=E4=BC=A0=20picker?=
 =?UTF-8?q?=20=E4=B8=A4=E6=AD=A5=E5=BC=8F=E7=A1=AE=E8=AE=A4=20+=20z-index?=
 =?UTF-8?q?=20=E4=BF=AE=E5=A4=8D=EF=BC=88=E8=A2=AB=E3=80=8C=E6=88=91?=
 =?UTF-8?q?=E7=9A=84=E5=8F=91=E5=B8=83=E3=80=8D=E8=A6=86=E7=9B=96=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

UX 问题：用户在「我的发布」点 上传 → 选 pack 卡片 → 直接上传（无确认）；
                    + 弹框被「我的发布」(zIndex 50) DOM 顺序后渲染挡住。

修法：
1. Modal helper 接受可选 zIndex prop（默认 50）；上传 picker 用 zIndex={60} 叠在 mypacks 之上。
2. 新 selectedUploadPackId state：点 pack 卡片切换选中（不立刻上传），蓝边 + 蓝实心圆 ✓。
3. 底部加「确定上传」按钮，未选中时 disabled；取消按钮重置选中状态。
4. openUploadPicker：更新流程下预选「建议更新」的同名本地包（多数情况下一键确认）。
5. onUpload / cancel 退出时 setSelectedUploadPackId(null) 清状态。
---
 openless-all/app/src/pages/Marketplace.tsx | 90 ++++++++++++++++++----
 1 file changed, 74 insertions(+), 16 deletions(-)

diff --git a/openless-all/app/src/pages/Marketplace.tsx b/openless-all/app/src/pages/Marketplace.tsx
index 82b68674..39954b02 100644
--- a/openless-all/app/src/pages/Marketplace.tsx
+++ b/openless-all/app/src/pages/Marketplace.tsx
@@ -76,6 +76,8 @@ export function Marketplace() {
   const [uploadOriginPackId, setUploadOriginPackId] = useState<string | null>(null);
   const [uploadTargetName, setUploadTargetName] = useState<string | null>(null);
   const [localPacks, setLocalPacks] = useState<StylePack[]>([]);
+  // 上传选包器选中态：点 pack 卡片选中（不立刻上传），底部「确定上传」才真正提交。
+  const [selectedUploadPackId, setSelectedUploadPackId] = useState<string | null>(null);
   const [myPacks, setMyPacks] = useState<MarketplaceMyPackItem[]>([]);
   // 「我的发布」改为弹框形态：showMyPacks 控制开关，myPacksQuery 是弹框内独立搜索词
   // （不与外层 marketplace 搜索 query 互相干扰）。
@@ -290,6 +292,11 @@ export function Marketplace() {
           return a.name.localeCompare(b.name);
         });
       setLocalPacks(editable);
+      // 更新流程下预选「建议更新」的本地包（同名），用户多数情况下一键确认。
+      const recommended = target.length > 0
+        ? editable.find(p => p.name.trim().toLowerCase() === target)
+        : undefined;
+      setSelectedUploadPackId(recommended?.id ?? null);
       setShowUpload(true);
     } catch (error) {
       setActionMsg({ kind: 'err', text: t('marketplace.errors.loadLocal', { err: errorMessage(error) }) });
@@ -377,6 +384,7 @@ export function Marketplace() {
       setShowUpload(false);
       setUploadOriginPackId(null);
       setUploadTargetName(null);
+      setSelectedUploadPackId(null);
       // 后续 polling 用服务端真实数据校准（审核状态可能 pending→approved/rejected）。
       window.setTimeout(() => { void refresh(); void refreshMyPacks(); }, 1500);
       window.setTimeout(() => { void refresh(); void refreshMyPacks(); }, 5000);
@@ -772,14 +780,22 @@ export function Marketplace() {
         </Modal>
       )}
 
-      {/* 上传选包器 */}
+      {/* 上传选包器 —— zIndex 60 让它叠在「我的发布」(zIndex 50) 之上 */}
       {showUpload && (
-        <Modal onClose={() => { setShowUpload(false); setUploadOriginPackId(null); setUploadTargetName(null); }}>
+        <Modal
+          zIndex={60}
+          onClose={() => {
+            setShowUpload(false);
+            setUploadOriginPackId(null);
+            setUploadTargetName(null);
+            setSelectedUploadPackId(null);
+          }}
+        >
           <h2 style={{ margin: '0 0 12px', fontSize: 16, fontWeight: 650 }}>
             {uploadOriginPackId ? `更新「${uploadTargetName ?? '风格包'}」` : t('marketplace.uploadTitle')}
           </h2>
           <div style={{ fontSize: 12, color: 'var(--ol-ink-3)', marginBottom: 12 }}>
-            {uploadOriginPackId ? '请选择本地对应的新版本风格包；同名本地包会排在最上面。' : t('marketplace.uploadHint', { login: prefs?.marketplaceDevLogin ?? '' })}
+            {uploadOriginPackId ? '选中要上传的本地新版本风格包，下方点「确定上传」。同名包默认预选。' : t('marketplace.uploadHint', { login: prefs?.marketplaceDevLogin ?? '' })}
           </div>
           <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxHeight: 360, overflow: 'auto' }}>
             {localPacks.length === 0 ? (
@@ -789,35 +805,68 @@ export function Marketplace() {
             ) : (
               localPacks.map(p => {
                 const recommended = !!uploadTargetName && p.name.trim().toLowerCase() === uploadTargetName.trim().toLowerCase();
+                const selected = selectedUploadPackId === p.id;
                 return (
                   <button
                     key={p.id}
-                    onClick={() => void onUpload(p.id)}
+                    type="button"
+                    onClick={() => setSelectedUploadPackId(prev => (prev === p.id ? null : p.id))}
                     style={{
                       textAlign: 'left',
                       padding: 10,
-                      border: recommended ? '0.5px solid var(--ol-blue)' : '0.5px solid var(--ol-line-strong)',
+                      border: selected ? '1px solid var(--ol-blue)' : '0.5px solid var(--ol-line-strong)',
                       borderRadius: 8,
-                      background: recommended ? 'var(--ol-blue-soft)' : 'var(--ol-surface)',
+                      background: selected ? 'var(--ol-blue-soft)' : 'var(--ol-surface)',
                       cursor: 'pointer',
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 10,
                     }}
                   >
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'space-between' }}>
-                      <div style={{ fontSize: 13, fontWeight: 600 }}>{p.name}</div>
-                      {recommended && <Pill size="sm" tone="blue">建议更新</Pill>}
-                    </div>
-                    <div style={{ fontSize: 11, color: 'var(--ol-ink-4)', marginTop: 2 }}>
-                      {p.description || t('marketplace.noDescription')}
+                    {/* 选中圈：未选空圆，选中蓝实心 + 白勾 */}
+                    <span style={{
+                      flexShrink: 0,
+                      width: 18, height: 18, borderRadius: 999,
+                      border: selected ? '1px solid var(--ol-blue)' : '1px solid var(--ol-line-strong)',
+                      background: selected ? 'var(--ol-blue)' : 'transparent',
+                      display: 'inline-grid', placeItems: 'center',
+                      color: '#fff', fontSize: 11, fontWeight: 700,
+                      transition: 'background 0.12s, border-color 0.12s',
+                    }}>
+                      {selected && '✓'}
+                    </span>
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'space-between' }}>
+                        <div style={{ fontSize: 13, fontWeight: 600 }}>{p.name}</div>
+                        {recommended && <Pill size="sm" tone="blue">建议更新</Pill>}
+                      </div>
+                      <div style={{ fontSize: 11, color: 'var(--ol-ink-4)', marginTop: 2 }}>
+                        {p.description || t('marketplace.noDescription')}
+                      </div>
                     </div>
                   </button>
                 );
               })
             )}
           </div>
-          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 14 }}>
-            <Btn variant="ghost" size="sm" onClick={() => { setShowUpload(false); setUploadOriginPackId(null); setUploadTargetName(null); }}>
+          {/* 底部：取消 / 确定上传（未选中时 disabled）*/}
+          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 14 }}>
+            <Btn variant="ghost" size="sm" onClick={() => {
+              setShowUpload(false);
+              setUploadOriginPackId(null);
+              setUploadTargetName(null);
+              setSelectedUploadPackId(null);
+            }}>
               {t('common.cancel')}
             </Btn>
+            <Btn
+              variant="blue"
+              size="sm"
+              disabled={!selectedUploadPackId}
+              onClick={() => { if (selectedUploadPackId) void onUpload(selectedUploadPackId); }}
+            >
+              确定上传
+            </Btn>
           </div>
         </Modal>
       )}
@@ -1107,7 +1156,16 @@ export function Marketplace() {
   );
 }
 
-function Modal({ children, onClose }: { children: React.ReactNode; onClose: () => void }) {
+function Modal({
+  children,
+  onClose,
+  zIndex = 50,
+}: {
+  children: React.ReactNode;
+  onClose: () => void;
+  /** 默认 50；多层叠加时（如上传 picker 在「我的发布」之上）传更大的值。*/
+  zIndex?: number;
+}) {
   return (
     <div
       className="ol-modal-backdrop"
@@ -1118,7 +1176,7 @@ function Modal({ children, onClose }: { children: React.ReactNode; onClose: () =
         background: 'rgba(0,0,0,0.22)',
         display: 'grid',
         placeItems: 'center',
-        zIndex: 50,
+        zIndex,
         padding: 20,
       }}
     >