Merge pull request 'feat: 优化记录详情对话面板布局与视觉层次' (#17 ) from feat/ecommerce-chat-polish into main

Reviewed-on: #17
Merge branch 'main' into feat/ecommerce-chat-polish
2026-06-15 10:24:35 +00:00 · 2026-06-15 10:24:30 +00:00 · 2026-06-15 18:23:36 +08:00 · 2026-06-15 08:38:41 +00:00
2 changed files with 141 additions and 20 deletions
@@ -6941,26 +6941,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                    </div>
                  ) : null}
                </section>
-                {newConversationImages.length ? (
-                  <section className="clone-ai-chat-message clone-ai-chat-message--user clone-ai-chat-message--followup">
-                    <span>新需求</span>
-                    <p>{newRequirementText}</p>
-                    <div className="clone-ai-chat-meta" aria-label="新需求参数">
-                      {currentRequirementMeta.map((item) => (
-                        <em key={item.label}>
-                          <span>{item.label}</span>
-                          <strong>{item.value}</strong>
-                        </em>
-                      ))}
-                    </div>
-                    <div className="clone-ai-chat-assets" aria-label="新增素材">
-                      {newConversationImages.slice(0, 4).map((image) => (
-                        <img key={image.id} src={image.src} alt={image.name || "新增商品素材"} />
-                      ))}
-                      {newConversationImages.length > 4 ? <em>+{newConversationImages.length - 4}</em> : null}
-                    </div>
-                  </section>
-                ) : null}
                <section className={`clone-ai-chat-message clone-ai-chat-message--assistant is-${status}`}>
                  <span>电商图设计师</span>
                  <p>
@@ -6990,6 +6970,26 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                    </div>
                  ) : null}
                </section>
+                {newConversationImages.length ? (
+                  <section className="clone-ai-chat-message clone-ai-chat-message--user clone-ai-chat-message--followup">
+                    <span>新需求</span>
+                    <p>{newRequirementText}</p>
+                    <div className="clone-ai-chat-meta" aria-label="新需求参数">
+                      {currentRequirementMeta.map((item) => (
+                        <em key={item.label}>
+                          <span>{item.label}</span>
+                          <strong>{item.value}</strong>
+                        </em>
+                      ))}
+                    </div>
+                    <div className="clone-ai-chat-assets" aria-label="新增素材">
+                      {newConversationImages.slice(0, 4).map((image) => (
+                        <img key={image.id} src={image.src} alt={image.name || "新增商品素材"} />
+                      ))}
+                      {newConversationImages.length > 4 ? <em>+{newConversationImages.length - 4}</em> : null}
+                    </div>
+                  </section>
+                ) : null}
              </div>
            </aside>
            <button
@@ -16651,3 +16651,124 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
    height: 38px !important;
  }
 }
+
+/* Record detail chat polish: wider drawer and clearer turn-taking. */
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail {
+  --clone-chat-width: clamp(408px, 30vw, 440px);
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-conversation-panel {
+  width: var(--clone-chat-width) !important;
+  min-width: var(--clone-chat-width) !important;
+  border-right-color: rgba(30, 189, 219, 0.18) !important;
+  box-shadow:
+    24px 0 58px rgba(16, 115, 204, 0.09),
+    inset -1px 0 0 rgba(255, 255, 255, 0.72) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail.is-conversation-collapsed .clone-ai-conversation-panel {
+  transform: translateX(calc(-1 * var(--clone-chat-width))) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-conversation-toggle {
+  left: var(--clone-chat-width) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-conversation-head {
+  padding: 18px 18px 15px !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-conversation-body {
+  gap: 16px !important;
+  padding-right: 18px !important;
+  padding-left: 18px !important;
+  scroll-padding-bottom: 124px !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-message {
+  gap: 10px !important;
+  padding: 15px 16px !important;
+  border-radius: 20px !important;
+  box-shadow:
+    0 14px 34px rgba(16, 115, 204, 0.075),
+    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-message--user {
+  margin-left: clamp(26px, 7%, 36px) !important;
+  border-color: rgba(30, 189, 219, 0.22) !important;
+  background:
+    linear-gradient(180deg, rgba(232, 249, 253, 0.96), rgba(255, 255, 255, 0.94)) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-message--assistant {
+  margin-right: clamp(26px, 7%, 36px) !important;
+  border-color: rgba(16, 115, 204, 0.13) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-message--followup {
+  margin-top: 2px !important;
+  border-color: rgba(30, 189, 219, 0.24) !important;
+  background:
+    linear-gradient(180deg, rgba(225, 248, 253, 0.92), rgba(255, 255, 255, 0.95)) !important;
+  box-shadow:
+    0 16px 38px rgba(30, 189, 219, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-message > span {
+  font-size: 12px !important;
+  font-weight: 820 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-message p {
+  font-size: 13px !important;
+  line-height: 1.64 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-meta {
+  gap: 8px !important;
+  margin-top: 10px !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-meta em {
+  min-height: 28px !important;
+  padding: 7px 11px !important;
+  border-color: rgba(30, 189, 219, 0.16) !important;
+  background: rgba(248, 253, 255, 0.98) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-assets {
+  gap: 9px !important;
+  margin-top: 2px !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-assets img,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-assets em {
+  width: 46px !important;
+  height: 46px !important;
+  border-radius: 14px !important;
+}
+
+@media (max-width: 900px) {
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail {
+    --clone-chat-width: min(92vw, 408px);
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-conversation-body {
+    padding-right: 14px !important;
+    padding-left: 14px !important;
+  }
+}
+
+@media (max-width: 480px) {
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail {
+    --clone-chat-width: min(94vw, 364px);
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-message--user,
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-detail .clone-ai-chat-message--assistant {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+  }
+}
Author	SHA1	Message	Date
stringadmin	f929be30ed	Merge pull request 'feat: 优化记录详情对话面板布局与视觉层次' (#17 ) from feat/ecommerce-chat-polish into main Reviewed-on: #17	2026-06-15 10:24:35 +00:00
stringadmin	a2875738ce	Merge branch 'main' into feat/ecommerce-chat-polish	2026-06-15 10:24:30 +00:00
ludan	85adcdceef	feat: 优化记录详情对话面板布局与视觉层次本次修改聚焦于电商记录详情页的对话面板体验打磨：一、对话顺序优化（EcommercePage.tsx）： - 将"新需求"跟进消息从AI回复之前移至AI回复之后 - 调整后的对话时间线：用户历史需求 → AI回复 → 用户新需求，逻辑更符合真实对话流程二、对话面板视觉升级（ecommerce-standalone.css）： - 对话面板宽度采用CSS变量动态控制（408-440px），视觉更宽敞 - 消息气泡区分明确： · 用户消息：左侧缩进26-36px，蓝色调渐变背景，青色边框 · AI消息：右侧缩进26-36px，蓝调边框，中性背景 · 跟进消息：独特高亮样式，更强边框(0.24透明度)和投影 - 排版细节打磨： · 消息标签字号12px/权重820 · 正文13px/行高1.64 · 气泡内间距15px、圆角20px、投影加深 - 元信息标签(emo)精修：28px高度、圆角胶囊样式 - 素材缩略图：46x46px、圆角14px - 响应式适配：≤900px面板收窄至92vw，≤480px去除消息缩进变更文件： - src/features/ecommerce/EcommercePage.tsx (+20/-20) - src/styles/ecommerce-standalone.css (+121)	2026-06-15 18:23:36 +08:00
stringadmin	ab99e3bf2f	Merge pull request 'feat: 完善电商记录详情页，支持触摸手势交互、对话式需求面板与画布节点拖拽' (#16 ) from feat/ecommerce-record-detail-polish into main Reviewed-on: #16	2026-06-15 08:38:41 +00:00