Polish static UI flows

电商AI平台/model-photo.html

@@ -15,9 +15,12 @@
     flex: 1; min-height: 0;
     display: grid;
     grid-template-columns: 260px 1fr;
+    transition: grid-template-columns var(--t-base);
   }
+  .mp-layout.side-collapsed { grid-template-columns: 0 1fr; }
   @media (max-width: 1280px) {
     .mp-layout { grid-template-columns: 240px 1fr; }
+    .mp-layout.side-collapsed { grid-template-columns: 0 1fr; }
   }
 
   /* ─── 主区: flat 双区 (头部 + body) · 无 card · 用 border 分隔 ─── */
@@ -55,6 +58,23 @@
     color: var(--black-alpha-48);
   }
   .mp-main-h .spacer { flex: 1; }
+  .mp-main-h .side-restore-btn {
+    height: 32px;
+    padding: 0 10px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: var(--surface);
+    border: 1px solid var(--border-faint);
+    border-radius: var(--r-sm);
+    color: var(--black-alpha-72);
+    font-family: inherit;
+    font-size: 12.5px;
+    cursor: pointer;
+  }
+  .mp-main-h .side-restore-btn:hover { border-color: var(--heat-20); color: var(--heat); }
+  .mp-main-h .side-restore-btn[hidden] { display: none; }
+  .mp-main-h .side-restore-btn svg { width: 14px; height: 14px; }
   .mp-main-h .search-btn {
     width: 32px; height: 32px;
     background: var(--surface);
@@ -177,6 +197,12 @@
     display: flex; flex-direction: column;
     min-height: 0;
     overflow: hidden;
+    transition: opacity var(--t-base), transform var(--t-base);
+  }
+  .mp-layout.side-collapsed .mp-prod-space {
+    opacity: 0;
+    transform: translateX(-8px);
+    pointer-events: none;
   }
   /* 顶部工具栏: 返回 + 折叠 (跟 image-optimize 视觉一致) */
   .mp-side-top {
@@ -2224,6 +2250,10 @@
 
       <!-- 主区顶部 · toolbar (商品标题 + 搜索 + 筛选 · 跟图片创作一致) -->
       <div class="mp-main-h">
+        <button class="side-restore-btn" type="button" id="mp-side-restore" hidden title="展开商品空间">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/></svg>
+          商品
+        </button>
         <div class="cur-title">
           <span class="crumb">// 商品空间</span>
           <span class="nm placeholder" id="cur-prod-nm">未选择 · 请在左侧商品空间选一个</span>
@@ -4737,6 +4767,22 @@ document.getElementById('pv-swap').addEventListener('click', () => {
   tasks = load();
 })();
 
+/* ---------- 商品空间折叠 / 展开 ---------- */
+(function () {
+  const layout = document.querySelector('.mp-layout');
+  const foldBtn = document.querySelector('.mp-side-top .fold');
+  const restoreBtn = document.getElementById('mp-side-restore');
+  function setSideCollapsed(collapsed) {
+    layout?.classList.toggle('side-collapsed', collapsed);
+    if (restoreBtn) restoreBtn.hidden = !collapsed;
+    if (foldBtn) foldBtn.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
+    try { localStorage.setItem('fs-mp-side-collapsed', collapsed ? '1' : '0'); } catch (e) {}
+  }
+  foldBtn?.addEventListener('click', () => setSideCollapsed(true));
+  restoreBtn?.addEventListener('click', () => setSideCollapsed(false));
+  try { setSideCollapsed(localStorage.getItem('fs-mp-side-collapsed') === '1'); } catch (e) {}
+})();
+
 // 初始化
 renderProdSpace();
 renderSelectedProds();