OmniAI/omniai-ds-code-package
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: 优化记录详情对话面板布局与视觉层次 #17

Merged
stringadmin merged 2 commits from feat/ecommerce-chat-polish into main 2026-06-15 10:24:35 +00:00
Conversation 0 Commits 2 Files Changed 2
+141 -20
2 changed files with 141 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/ecommerce/EcommercePage.tsx
+20 -20
View File
@@ -6941,26 +6941,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
</div> </div>
) : null} ) : null}
</section> </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}`}> <section className={`clone-ai-chat-message clone-ai-chat-message--assistant is-${status}`}>
<span>电商图设计师</span> <span>电商图设计师</span>
<p> <p>
@@ -6990,6 +6970,26 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
</div> </div>
) : null} ) : null}
</section> </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> </div>
</aside> </aside>
<button <button
src/styles/ecommerce-standalone.css
+121
View File
@@ -16651,3 +16651,124 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
height: 38px !important; 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;
}
}