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

feat: 工具子页面隐藏Topbar、限制素材上传数量、修复移动端布局 #30

Merged
stringadmin merged 1 commits from feat/ecommerce-tool-page-topbar into main 2026-06-18 05:26:36 +00:00
Conversation 0 Commits 1 Files Changed 4
+450 -49
4 changed files with 450 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2a2ab701e3 - Show all commits
src/App.tsx
+15 -11
View File
@@ -347,6 +347,8 @@ function App() {
toast.info("Bug 反馈入口已保留，后续可接入反馈页面。"); toast.info("Bug 反馈入口已保留，后续可接入反馈页面。");
}; };
const shouldShowEcommerceTopbar = currentPage === "workspace" && !workspaceChrome.isToolPage;
return ( return (
<div <div
className="ecommerce-standalone web-shell" className="ecommerce-standalone web-shell"
@@ -355,17 +357,19 @@ function App() {
data-view="ecommerce" data-view="ecommerce"
data-workspace-tool-page={workspaceChrome.isToolPage ? "true" : "false"} data-workspace-tool-page={workspaceChrome.isToolPage ? "true" : "false"}
> >
<Topbar {shouldShowEcommerceTopbar ? (
session={session} <Topbar
usage={usage} session={session}
profileMenuOpen={profileMenuOpen} usage={usage}
onProfileMenuOpenChange={setProfileMenuOpen} profileMenuOpen={profileMenuOpen}
onOpenWorkspace={handleOpenWorkspace} onProfileMenuOpenChange={setProfileMenuOpen}
onOpenProfile={handleOpenProfile} onOpenWorkspace={handleOpenWorkspace}
onOpenAuth={openAuth} onOpenProfile={handleOpenProfile}
onLogout={handleLogout} onOpenAuth={openAuth}
onBugFeedback={handleBugFeedback} onLogout={handleLogout}
/> onBugFeedback={handleBugFeedback}
/>
) : null}
<main className="ecommerce-standalone__content"> <main className="ecommerce-standalone__content">
{session ? ( {session ? (
src/features/ecommerce/EcommercePage.tsx
+55 -11
View File
@@ -1,5 +1,7 @@
import { import {
AppstoreOutlined, AppstoreOutlined,
AppstoreAddOutlined,
BorderOuterOutlined,
ClearOutlined, ClearOutlined,
CloudUploadOutlined, CloudUploadOutlined,
CloseOutlined, CloseOutlined,
@@ -7,14 +9,17 @@ import {
EditOutlined, EditOutlined,
FireOutlined, FireOutlined,
FileImageOutlined, FileImageOutlined,
FileTextOutlined,
FolderOpenOutlined, FolderOpenOutlined,
FrownOutlined, FrownOutlined,
GlobalOutlined, GlobalOutlined,
HighlightOutlined,
LayoutOutlined, LayoutOutlined,
LoadingOutlined, LoadingOutlined,
MenuFoldOutlined, MenuFoldOutlined,
MenuUnfoldOutlined, MenuUnfoldOutlined,
PaperClipOutlined, PaperClipOutlined,
PlayCircleOutlined,
PlusOutlined, PlusOutlined,
QuestionCircleOutlined, QuestionCircleOutlined,
ReloadOutlined, ReloadOutlined,
@@ -22,6 +27,7 @@ import {
SettingOutlined, SettingOutlined,
SkinOutlined, SkinOutlined,
TableOutlined, TableOutlined,
TranslationOutlined,
VideoCameraOutlined, VideoCameraOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { import {
@@ -256,6 +262,7 @@ import {
interface ProductClonePageProps { interface ProductClonePageProps {
onWorkspaceChromeChange?: (state: { isToolPage: boolean }) => void;
[key: string]: unknown; [key: string]: unknown;
} }
@@ -811,7 +818,7 @@ const cloneSetCountOptions: Array<{
const cloneSetCountKeys = cloneSetCountOptions.map((option) => option.key); const cloneSetCountKeys = cloneSetCountOptions.map((option) => option.key);
const minCloneSetTotal = 1; const minCloneSetTotal = 1;
const maxCloneSetTotal = 16; const maxCloneSetTotal = 16;
const maxCloneProductImages = 20; const maxCloneProductImages = 10;
const maxCloneReferenceImages = 20; const maxCloneReferenceImages = 20;
const cloneVideoDurationMin = 5; const cloneVideoDurationMin = 5;
const cloneVideoDurationMax = 45; const cloneVideoDurationMax = 45;
@@ -1084,6 +1091,7 @@ function mergeEcommerceHistoryRecords(...recordGroups: EcommerceHistoryRecord[][
} }
function ProductClonePage(_props: ProductClonePageProps = {}) { function ProductClonePage(_props: ProductClonePageProps = {}) {
const { onWorkspaceChromeChange } = _props;
const setInputRef = useRef<HTMLInputElement>(null); const setInputRef = useRef<HTMLInputElement>(null);
const productInputRef = useRef<HTMLInputElement>(null); const productInputRef = useRef<HTMLInputElement>(null);
const cloneReferenceInputRef = useRef<HTMLInputElement>(null); const cloneReferenceInputRef = useRef<HTMLInputElement>(null);
@@ -2939,7 +2947,13 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
const imageFiles = notifyRejectedImages(files); const imageFiles = notifyRejectedImages(files);
if (!imageFiles.length) return; if (!imageFiles.length) return;
const remainingSlots = maxCloneProductImages - productImages.length; const remainingSlots = maxCloneProductImages - productImages.length;
if (remainingSlots <= 0) return; if (remainingSlots <= 0) {
toast.info(`最多上传 ${maxCloneProductImages} 张素材`);
return;
}
if (imageFiles.length > remainingSlots) {
toast.info(`最多上传 ${maxCloneProductImages} 张素材，已自动保留前 ${remainingSlots} 张`);
}
const localItems = createLocalImageItems(imageFiles, remainingSlots, "product"); const localItems = createLocalImageItems(imageFiles, remainingSlots, "product");
setProductImages((current) => [...current, ...localItems].slice(0, maxCloneProductImages)); setProductImages((current) => [...current, ...localItems].slice(0, maxCloneProductImages));
@@ -4668,6 +4682,29 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
const isQuickSetTool = isCloneTool && activeQuickTool === "quick-set"; const isQuickSetTool = isCloneTool && activeQuickTool === "quick-set";
const isCopywritingTool = isCloneTool && activeQuickTool === "copywriting"; const isCopywritingTool = isCloneTool && activeQuickTool === "copywriting";
const isOneClickVideoTool = isCloneTool && activeQuickTool === "oneClickVideo"; const isOneClickVideoTool = isCloneTool && activeQuickTool === "oneClickVideo";
const isWorkspaceToolPage =
!isCloneTool ||
isSmartCutoutTool ||
isQuickDetailTool ||
isWatermarkTool ||
isTranslateTool ||
isImageEditTool ||
isHotCloneTool ||
isQuickSetTool ||
isCopywritingTool ||
isOneClickVideoTool ||
isVideoWorkspaceVisible ||
Boolean(activeHistoryRecordId);
useEffect(() => {
onWorkspaceChromeChange?.({ isToolPage: isWorkspaceToolPage });
}, [isWorkspaceToolPage, onWorkspaceChromeChange]);
useEffect(() => {
return () => {
onWorkspaceChromeChange?.({ isToolPage: false });
};
}, [onWorkspaceChromeChange]);
const pageLabel = isSetTool ? "商品套图" : isDetail ? "A+/详情页" : isTryOn ? "AI服饰穿戴" : activeToolMeta?.label || "商品工具"; const pageLabel = isSetTool ? "商品套图" : isDetail ? "A+/详情页" : isTryOn ? "AI服饰穿戴" : activeToolMeta?.label || "商品工具";
const setPrimaryLabel = const setPrimaryLabel =
setImages.length === 0 setImages.length === 0
@@ -6328,7 +6365,13 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
<button <button
type="button" type="button"
className={`ecom-command-reference ecom-command-reference--bottom ecom-command-tool ecom-command-tool--upload${productImages.length ? " has-images" : ""}${isProductUploadDragging ? " is-dragging" : ""}`} className={`ecom-command-reference ecom-command-reference--bottom ecom-command-tool ecom-command-tool--upload${productImages.length ? " has-images" : ""}${isProductUploadDragging ? " is-dragging" : ""}`}
onClick={() => productInputRef.current?.click()} onClick={() => {
if (productImages.length >= maxCloneProductImages) {
toast.info(`最多上传 ${maxCloneProductImages} 张素材`);
return;
}
productInputRef.current?.click();
}}
onDragEnter={(event) => { onDragEnter={(event) => {
event.preventDefault(); event.preventDefault();
setIsProductUploadDragging(true); setIsProductUploadDragging(true);
@@ -6341,8 +6384,9 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
const files = Array.from(event.dataTransfer.files); const files = Array.from(event.dataTransfer.files);
if (files.length) addComposerAssets(files); if (files.length) addComposerAssets(files);
}} }}
aria-label="上传素材" aria-disabled={productImages.length >= maxCloneProductImages}
title="上传素材" aria-label={productImages.length >= maxCloneProductImages ? `最多上传 ${maxCloneProductImages} 张素材` : "上传素材"}
title={productImages.length >= maxCloneProductImages ? `最多上传 ${maxCloneProductImages} 张素材` : "上传素材"}
> >
<span aria-hidden="true"><PaperClipOutlined /></span> <span aria-hidden="true"><PaperClipOutlined /></span>
<strong>上传素材</strong> <strong>上传素材</strong>
@@ -6458,15 +6502,15 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
{(status === "idle" || status === "ready") && !showMainVideoWorkspace ? ( {(status === "idle" || status === "ready") && !showMainVideoWorkspace ? (
<section className="ecom-command-quick-board" aria-label="快捷功能"> <section className="ecom-command-quick-board" aria-label="快捷功能">
{[ {[
{ label: "A+/详情页", tone: "detail", icon: <LayoutOutlined />, onClick: openQuickDetailPage }, { label: "A+/详情页", tone: "detail", icon: <BorderOuterOutlined />, onClick: openQuickDetailPage },
{ label: "爆款复刻", tone: "hot", icon: <FireOutlined />, onClick: openHotClonePage }, { label: "爆款复刻", tone: "hot", icon: <FireOutlined />, onClick: openHotClonePage },
{ label: "图片修改", tone: "edit", icon: <EditOutlined />, onClick: openImageWorkbenchPage }, { label: "图片修改", tone: "edit", icon: <HighlightOutlined />, onClick: openImageWorkbenchPage },
{ label: "智能抠图", tone: "cutout", icon: <ScissorOutlined />, onClick: openSmartCutoutUpload }, { label: "智能抠图", tone: "cutout", icon: <ScissorOutlined />, onClick: openSmartCutoutUpload },
{ label: "去除水印", tone: "watermark", icon: <ClearOutlined />, onClick: openWatermarkRemovalPage }, { label: "去除水印", tone: "watermark", icon: <ClearOutlined />, onClick: openWatermarkRemovalPage },
{ label: "图片翻译", tone: "translate", icon: <GlobalOutlined />, onClick: openImageTranslatePage }, { label: "图片翻译", tone: "translate", icon: <TranslationOutlined />, onClick: openImageTranslatePage },
{ label: "商品套图", tone: "product", icon: <AppstoreOutlined />, onClick: openQuickSetPage }, { label: "商品套图", tone: "product", icon: <AppstoreAddOutlined />, onClick: openQuickSetPage },
{ label: "一键文案", tone: "copywriting", icon: <EditOutlined />, onClick: openCopywritingPage }, { label: "一键文案", tone: "copywriting", icon: <FileTextOutlined />, onClick: openCopywritingPage },
{ label: "一键视频", tone: "video", icon: <VideoCameraOutlined />, onClick: openOneClickVideoPage }, { label: "一键视频", tone: "video", icon: <PlayCircleOutlined />, onClick: openOneClickVideoPage },
{ label: "更多功能", tone: "more", icon: <SettingOutlined />, disabled: true }, { label: "更多功能", tone: "more", icon: <SettingOutlined />, disabled: true },
].map((item) => ( ].map((item) => (
<button <button
src/styles/ecommerce-standalone.css
+209
View File
@@ -20784,3 +20784,212 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
grid-template-rows: auto minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) !important;
} }
} }
/* Ecommerce home quick tools: match the soft product-card background language. */
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board {
gap: 10px !important;
padding: 8px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--detail {
--quick-card-glow: rgba(198, 213, 255, 0.56) !important;
--quick-card-glow-hover: rgba(177, 196, 252, 0.72) !important;
--quick-card-icon: #4967c8 !important;
--quick-card-text: #142133 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--hot {
--quick-card-glow: rgba(255, 226, 184, 0.54) !important;
--quick-card-glow-hover: rgba(255, 211, 151, 0.72) !important;
--quick-card-icon: #b56a1f !important;
--quick-card-text: #1f2630 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--edit {
--quick-card-glow: rgba(244, 204, 234, 0.54) !important;
--quick-card-glow-hover: rgba(237, 181, 222, 0.7) !important;
--quick-card-icon: #a44986 !important;
--quick-card-text: #1d2330 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--cutout {
--quick-card-glow: rgba(188, 234, 255, 0.56) !important;
--quick-card-glow-hover: rgba(161, 222, 250, 0.72) !important;
--quick-card-icon: #2479a7 !important;
--quick-card-text: #122431 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--watermark {
--quick-card-glow: rgba(250, 210, 199, 0.52) !important;
--quick-card-glow-hover: rgba(243, 188, 174, 0.7) !important;
--quick-card-icon: #b64e3c !important;
--quick-card-text: #20242c !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--translate {
--quick-card-glow: rgba(181, 230, 219, 0.55) !important;
--quick-card-glow-hover: rgba(154, 217, 202, 0.72) !important;
--quick-card-icon: #167667 !important;
--quick-card-text: #13272a !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--product {
--quick-card-glow: rgba(207, 237, 194, 0.56) !important;
--quick-card-glow-hover: rgba(185, 226, 169, 0.72) !important;
--quick-card-icon: #3f7d3d !important;
--quick-card-text: #17252a !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--copywriting {
--quick-card-glow: rgba(205, 218, 236, 0.54) !important;
--quick-card-glow-hover: rgba(185, 203, 226, 0.7) !important;
--quick-card-icon: #3e587f !important;
--quick-card-text: #162231 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--video {
--quick-card-glow: rgba(214, 204, 250, 0.56) !important;
--quick-card-glow-hover: rgba(196, 182, 244, 0.72) !important;
--quick-card-icon: #6b50b6 !important;
--quick-card-text: #1b2132 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--more {
--quick-card-glow: rgba(219, 226, 232, 0.56) !important;
--quick-card-glow-hover: rgba(201, 211, 220, 0.72) !important;
--quick-card-icon: #52606f !important;
--quick-card-text: #17212c !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card {
--quick-card-glow: rgba(205, 231, 238, 0.5);
--quick-card-glow-hover: rgba(181, 221, 231, 0.68);
--quick-card-icon: #1073cc;
--quick-card-text: #10202c;
min-height: 58px !important;
gap: 10px !important;
justify-content: flex-start !important;
padding: 12px 14px !important;
border: 1px solid rgba(16, 32, 44, 0.08) !important;
border-radius: 15px !important;
background:
radial-gradient(circle at 18% 12%, var(--quick-card-glow), transparent 54%),
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.86)) !important;
color: var(--quick-card-text) !important;
box-shadow: none !important;
transform: none !important;
transition:
background 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease,
color 180ms ease,
transform 180ms ease !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card:hover,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card:focus-visible {
border-color: rgba(16, 32, 44, 0.1) !important;
background:
radial-gradient(circle at 18% 12%, var(--quick-card-glow-hover), transparent 58%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9)) !important;
color: var(--quick-card-icon) !important;
box-shadow: 0 10px 24px rgba(16, 32, 44, 0.045) !important;
transform: translateY(-1px) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card > span {
position: relative !important;
display: grid !important;
place-items: center !important;
width: 30px !important;
height: 30px !important;
flex: 0 0 30px !important;
border: 0 !important;
border-radius: 10px !important;
background: transparent !important;
color: var(--quick-card-icon) !important;
box-shadow: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card > span::after {
content: "→";
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: var(--quick-card-icon);
font-size: 24px;
font-weight: 400;
line-height: 1;
opacity: 0;
transform: translateX(-4px);
transition: opacity 160ms ease, transform 160ms ease;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card > span .anticon,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card > span svg {
width: 17px !important;
height: 17px !important;
color: inherit !important;
fill: currentColor !important;
transition: opacity 160ms ease, transform 160ms ease !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card:hover > span .anticon,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card:hover > span svg,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card:focus-visible > span .anticon,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card:focus-visible > span svg {
opacity: 0 !important;
transform: translateX(4px) scale(0.92) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card:hover > span::after,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card:focus-visible > span::after {
opacity: 1;
transform: translateX(0);
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card strong {
color: var(--quick-card-text) !important;
font-size: 14px !important;
font-weight: 750 !important;
}
@media (max-width: 760px) {
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board {
gap: 8px !important;
padding: 6px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card {
min-height: 54px !important;
gap: 8px !important;
padding: 10px !important;
border-radius: 14px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card > span {
width: 26px !important;
height: 26px !important;
flex-basis: 26px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card strong {
font-size: 13px !important;
}
}
/* Ecommerce home hero rhythm: bring the command area closer to the topbar. */
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap.is-before-generate:has(.ecom-inspiration-lab) {
top: -18px !important;
}
@media (max-width: 760px) {
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap.is-before-generate:has(.ecom-inspiration-lab) {
top: -10px !important;
}
}
src/styles/pages/ecommerce.css
+171 -27
View File
@@ -11281,50 +11281,155 @@
} }
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board { .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board {
border: 1px solid rgba(30, 189, 219, 0.12) !important; gap: 10px !important;
border-radius: 22px !important; padding: 12px !important;
background: #feffff !important; border: 1px solid rgba(30, 189, 219, 0.14) !important;
box-shadow: 0 22px 58px rgba(16, 115, 204, 0.08) !important; border-radius: 18px !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(247, 252, 253, 0.58)) !important;
box-shadow:
0 18px 46px rgba(16, 115, 204, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
} }
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button { .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button {
border: 1px solid rgba(30, 189, 219, 0.1) !important; --quick-accent: #1073cc;
border-radius: 18px !important; --quick-tint: rgba(16, 115, 204, 0.1);
--quick-line: rgba(16, 115, 204, 0.14);
min-height: 58px !important;
gap: 10px !important;
justify-content: flex-start !important;
padding: 12px 14px !important;
border: 1px solid var(--quick-line) !important;
border-radius: 14px !important;
background: background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 253, 0.88)) !important; linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(250, 253, 254, 0.78)) !important;
color: var(--ecom-entry-text) !important; color: var(--ecom-entry-text) !important;
box-shadow: box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.86), inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 12px 28px rgba(16, 115, 204, 0.06) !important; 0 8px 22px rgba(16, 115, 204, 0.045) !important;
transition: transition:
border-color 180ms ease, border-color 180ms ease,
color 180ms ease,
box-shadow 180ms ease, box-shadow 180ms ease,
transform 180ms ease, transform 180ms ease,
background 180ms ease !important; background 180ms ease !important;
} }
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:hover { .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:hover {
border-color: rgba(30, 189, 219, 0.32) !important; border-color: color-mix(in srgb, var(--quick-accent) 34%, transparent) !important;
background: background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 251, 254, 0.94)) !important; linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 253, 0.92)) !important;
box-shadow: 0 18px 34px rgba(16, 115, 204, 0.12) !important; color: #0f2533 !important;
transform: translateY(-2px); box-shadow:
0 14px 30px rgba(16, 115, 204, 0.09),
inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
transform: translateY(-1px);
} }
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:active { .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:active {
transform: translateY(0); transform: translateY(0);
} }
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--detail {
--quick-accent: #4f70d9;
--quick-tint: rgba(79, 112, 217, 0.12);
--quick-line: rgba(79, 112, 217, 0.16);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--hot {
--quick-accent: #c66b1f;
--quick-tint: rgba(198, 107, 31, 0.12);
--quick-line: rgba(198, 107, 31, 0.16);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--edit {
--quick-accent: #8d6cdb;
--quick-tint: rgba(141, 108, 219, 0.12);
--quick-line: rgba(141, 108, 219, 0.16);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--cutout {
--quick-accent: #0a7ca8;
--quick-tint: rgba(10, 124, 168, 0.12);
--quick-line: rgba(10, 124, 168, 0.16);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--watermark {
--quick-accent: #b14f6f;
--quick-tint: rgba(177, 79, 111, 0.12);
--quick-line: rgba(177, 79, 111, 0.16);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--translate {
--quick-accent: #0a8a8a;
--quick-tint: rgba(10, 138, 138, 0.12);
--quick-line: rgba(10, 138, 138, 0.16);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--product {
--quick-accent: #19856d;
--quick-tint: rgba(25, 133, 109, 0.12);
--quick-line: rgba(25, 133, 109, 0.16);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--copywriting {
--quick-accent: #3f64cf;
--quick-tint: rgba(63, 100, 207, 0.12);
--quick-line: rgba(63, 100, 207, 0.16);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--video {
--quick-accent: #2878a8;
--quick-tint: rgba(40, 120, 168, 0.12);
--quick-line: rgba(40, 120, 168, 0.16);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--more {
--quick-accent: #778894;
--quick-tint: rgba(119, 136, 148, 0.12);
--quick-line: rgba(119, 136, 148, 0.16);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board strong { .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board strong {
color: var(--ecom-entry-text) !important; color: var(--ecom-entry-text) !important;
font-size: 15px !important; font-size: 14px !important;
font-weight: 800 !important;
line-height: 1.35 !important; line-height: 1.35 !important;
} }
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board span { .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board span {
color: var(--ecom-entry-muted) !important; display: grid !important;
font-size: 12px !important; place-items: center !important;
line-height: 1.45 !important; width: 28px !important;
height: 28px !important;
min-width: 28px !important;
border: 1px solid color-mix(in srgb, var(--quick-accent) 18%, transparent) !important;
border-radius: 10px !important;
color: var(--quick-accent) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.66), var(--quick-tint)) !important;
font-size: 14px !important;
line-height: 1 !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
transition:
background 180ms ease,
border-color 180ms ease,
transform 180ms ease !important;
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:hover span {
border-color: color-mix(in srgb, var(--quick-accent) 30%, transparent) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.82), color-mix(in srgb, var(--quick-accent) 17%, white)) !important;
transform: scale(1.04);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board span svg {
width: 14px !important;
height: 14px !important;
} }
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover, .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover,
@@ -11361,7 +11466,7 @@
} }
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button { .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button {
min-height: 72px !important; min-height: 58px !important;
} }
} }
@@ -11427,22 +11532,28 @@
} }
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board { .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board {
border-radius: 20px !important; gap: 8px !important;
padding: 10px !important; border-radius: 16px !important;
padding: 8px !important;
} }
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button { .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button {
min-height: 62px !important; min-height: 54px !important;
padding: 12px !important; gap: 8px !important;
border-radius: 16px !important; padding: 10px !important;
border-radius: 13px !important;
} }
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board strong { .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board strong {
font-size: 14px !important; font-size: 13px !important;
} }
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board span { .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board span {
font-size: 11px !important; width: 26px !important;
height: 26px !important;
min-width: 26px !important;
border-radius: 9px !important;
font-size: 13px !important;
} }
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover, .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover,
@@ -11484,7 +11595,8 @@
} }
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button { .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button {
min-height: 58px !important; min-height: 52px !important;
padding-inline: 9px !important;
} }
} }
@@ -11498,7 +11610,7 @@
} }
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button { .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button {
min-height: 64px !important; min-height: 54px !important;
} }
} }
@@ -12782,10 +12894,22 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
} }
@media (max-width: 640px) { @media (max-width: 640px) {
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap {
width: min(100%, calc(100vw - 24px)) !important;
max-width: calc(100vw - 24px) !important;
min-width: 0 !important;
overflow: visible !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
gap: 12px !important; gap: 12px !important;
min-height: 318px !important; min-height: 318px !important;
padding: 18px 16px 16px !important; padding: 18px 16px 16px !important;
overflow: hidden !important;
box-sizing: border-box !important;
} }
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) { html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) {
@@ -12794,17 +12918,33 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-asset-popover, html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-asset-popover,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover { html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover {
align-self: stretch !important;
gap: 10px !important; gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 58px !important; min-height: 58px !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
overscroll-behavior-inline: contain !important;
scrollbar-width: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-asset-popover::-webkit-scrollbar,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover::-webkit-scrollbar {
display: none !important;
} }
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add, html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb, html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add, html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb { html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb {
flex: 0 0 58px !important;
flex-basis: 58px !important; flex-basis: 58px !important;
width: 58px !important; width: 58px !important;
height: 58px !important; height: 58px !important;
min-width: 58px !important;
min-height: 58px !important; min-height: 58px !important;
border-radius: 14px !important; border-radius: 14px !important;
} }
@@ -12823,6 +12963,8 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
} }
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar { html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
width: 100% !important;
min-width: 0 !important;
min-height: 58px !important; min-height: 58px !important;
padding-top: 12px !important; padding-top: 12px !important;
} }
@@ -12842,9 +12984,11 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb, html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add, html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb { html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb {
flex: 0 0 54px !important;
flex-basis: 54px !important; flex-basis: 54px !important;
width: 54px !important; width: 54px !important;
height: 54px !important; height: 54px !important;
min-width: 54px !important;
min-height: 54px !important; min-height: 54px !important;
} }
} }