feat: 插件开发 ozon 端主体完成

extension/entrypoints/sidepanel/index.html

@@ -41,7 +41,14 @@
     .two-col { display: flex; gap: 14px; align-items: stretch; margin-bottom: 14px; }
     .two-col .section { flex: 1; min-width: 0; margin-bottom: 0; display: flex; flex-direction: column; }
     .two-col .section .section-head { flex-shrink: 0; }
-    .img-groups { flex: 1; overflow-y: auto; max-height: 560px; }
+    /* 图片列表占满 section 除标题外的剩余高度；min-height:0 是 flex 子项内滚动的关键 */
+    .img-groups { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-height: 78vh; }
+    /* 采集图片区：section 自身去掉左右 padding，标题行自持 padding；
+       图片区左侧对齐标题，右侧只留窄缝给滚动条（滚动条贴卡片内缘，图片与滚动条之间有小间距） */
+    .section-images { padding: 14px 0 !important; }
+    .section-images .section-head { padding: 0 16px; }
+    .section-images .img-groups { padding: 2px 8px 0 16px; }
+    .section-images .empty { margin: 0 16px; }
     .divider { border-top: 1px solid var(--border); margin: 12px 0; }
 
     /* ── 顶部 ── */
@@ -60,7 +67,7 @@
     .topbar .sub { font-size: 12px; color: var(--text-2); margin-top: 1px; }
     .topbar .spacer { flex: 1; }
     .btn {
-      display: inline-flex; align-items: center; gap: 6px;
+      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
       padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border-strong);
       font-size: 14px; cursor: pointer; user-select: none;
       background: #fff; color: var(--text);
@@ -72,6 +79,25 @@
       font-weight: 600;
     }
     .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
+    /* AI 智能规划：深靛紫渐变（智慧/深度感） */
+    .btn-ai {
+      background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
+      border: none; color: #fff; font-weight: 600;
+      box-shadow: 0 2px 10px rgba(88, 60, 210, 0.35);
+    }
+    .btn-ai:hover:not([disabled]) {
+      background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+      color: #fff; box-shadow: 0 3px 14px rgba(88, 60, 210, 0.45);
+    }
+    /* 三个主操作按钮统一宽度 */
+    .btn-main { width: 160px; }
+    /* 「规划并生成」复选框 */
+    .auto-chk {
+      display: inline-flex; align-items: center; gap: 5px;
+      font-size: 12.5px; color: var(--text-2); cursor: pointer; user-select: none;
+    }
+    .auto-chk input { accent-color: var(--primary); width: 14px; height: 14px; cursor: pointer; }
+    .auto-chk:hover { color: var(--text); }
     .btn[disabled] { opacity: .5; cursor: not-allowed; }
     .btn-sm { padding: 5px 11px; font-size: 12.5px; }
     .icon-btn {
@@ -120,9 +146,10 @@
     /* ── 药丸选择 ── */
     .pills { display: flex; flex-wrap: wrap; gap: 7px; }
     .pill {
+      display: inline-flex; align-items: center; justify-content: center;
       padding: 5px 13px; border-radius: 999px; border: 1px solid var(--border-strong);
       background: #fff; font-size: 13px; cursor: pointer; color: var(--text-2);
-      user-select: none; transition: all .15s; line-height: 1.6;
+      user-select: none; transition: all .15s; line-height: 1.4;
     }
     .pill:hover { border-color: var(--primary); color: var(--primary); }
     .pill.on {
@@ -138,7 +165,7 @@
     }
     .group-head .mini-check { margin-left: auto; font-size: 12px; color: var(--primary); cursor: pointer; user-select: none; }
     .group-head .mini-check:hover { text-decoration: underline; }
-    .img-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
+    .img-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
     .img-cell {
       position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden;
       border: 2px solid transparent; cursor: zoom-in; background: var(--card-soft);
@@ -181,10 +208,26 @@
     }
     .platform-label { font-size: 13px; font-weight: 700; }
     .platform-spec { margin-left: auto; font-size: 12.5px; color: var(--text-2); }
+
+    /* 平台切换：Button.Group 形式，选中态用低饱和灰绿（不抢主题色） */
+    .seg-group { display: inline-flex; }
+    .seg-btn {
+      padding: 7px 20px; font-size: 13.5px; font-family: inherit;
+      min-width: 120px; text-align: center;   /* 选中加粗会让文字变宽，固定宽度消除跳动 */
+      background: #fff; border: 1px solid var(--border-strong); border-left-width: 0;
+      color: var(--text-2); cursor: pointer; user-select: none; transition: all .15s;
+    }
+    .seg-group .seg-btn:first-child { border-left-width: 1px; border-radius: 8px 0 0 8px; }
+    .seg-group .seg-btn:last-child { border-radius: 0 8px 8px 0; }
+    .seg-btn:hover { color: var(--text); background: var(--card-soft); }
+    .seg-btn.on {
+      background: #eef0eb; border-color: #c9cec6; color: #3f453c; font-weight: 700;
+    }
+    .seg-group .seg-btn.on + .seg-btn { border-left-color: #c9cec6; }
     /* 三个平台药丸等宽：选中态加粗会让文字变宽，用固定 min-width 消除抖动 */
     .platform-bar .pill { min-width: 108px; text-align: center; }
 
-    /* ── 图片放大预览 ── */
+    /* ── 图片放大预览（画廊）── */
     .lightbox {
       position: fixed; inset: 0; z-index: 1000;
       background: rgba(0, 0, 0, 0.82);
@@ -192,9 +235,26 @@
       flex-direction: column; gap: 12px; cursor: zoom-out;
     }
     .lightbox img {
-      max-width: 92%; max-height: 86%;
+      max-width: 88%; max-height: 82%;
       border-radius: 8px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
     }
+    .lightbox-nav {
+      position: absolute; top: 50%; transform: translateY(-50%);
+      width: 40px; height: 64px; border: none; border-radius: 8px;
+      background: rgba(255, 255, 255, 0.12); color: #fff;
+      font-size: 30px; line-height: 1; cursor: pointer;
+      display: flex; align-items: center; justify-content: center;
+      transition: background .15s; user-select: none;
+    }
+    .lightbox-nav:hover { background: rgba(255, 255, 255, 0.28); }
+    .lightbox-nav.prev { left: 14px; }
+    .lightbox-nav.next { right: 14px; }
+    .lightbox-counter {
+      position: absolute; top: 14px; right: 16px;
+      background: rgba(0, 0, 0, 0.5); color: #fff;
+      font-size: 13px; padding: 3px 10px; border-radius: 999px;
+      font-variant-numeric: tabular-nums;
+    }
     .lightbox-tip { color: rgba(255, 255, 255, 0.75); font-size: 12.5px; }
 
     /* ── 出图方案 ── */
@@ -233,6 +293,10 @@
     }
 
     .hint { font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
+
+    /* ── 模型下拉选项 ── */
+    .model-opt-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
+    .model-opt-desc { font-size: 12px; color: var(--text-2); margin-top: 2px; }
     .ok-chip {
       display: inline-flex; align-items: center; gap: 5px;
       background: #f6ffed; border: 1px solid #b7eb8f; color: #389e0d;