Merge pull request 'feat: enhance scenario tabs with more/expand toggle, template carousel navigation, and 16 new templates' (#23) from feat/ecommerce-scenario-tabs into main
Reviewed-on: #23
This commit was merged in pull request #23.
This commit is contained in:
Generated
+14
-8
@@ -9,6 +9,7 @@
|
|||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ant-design/icons": "5.3.0",
|
"@ant-design/icons": "5.3.0",
|
||||||
|
"@phosphor-icons/react": "^2.1.10",
|
||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
"react-dom": "18.2.0",
|
"react-dom": "18.2.0",
|
||||||
"scheduler": "0.23.0",
|
"scheduler": "0.23.0",
|
||||||
@@ -119,7 +120,6 @@
|
|||||||
"integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
|
"integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/code-frame": "^7.29.7",
|
"@babel/code-frame": "^7.29.7",
|
||||||
"@babel/generator": "^7.29.7",
|
"@babel/generator": "^7.29.7",
|
||||||
@@ -851,6 +851,19 @@
|
|||||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@phosphor-icons/react": {
|
||||||
|
"version": "2.1.10",
|
||||||
|
"resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.10.tgz",
|
||||||
|
"integrity": "sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">= 16.8",
|
||||||
|
"react-dom": ">= 16.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@rollup/pluginutils": {
|
"node_modules/@rollup/pluginutils": {
|
||||||
"version": "5.4.0",
|
"version": "5.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.4.0.tgz",
|
||||||
@@ -1296,7 +1309,6 @@
|
|||||||
"integrity": "sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==",
|
"integrity": "sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==",
|
||||||
"devOptional": true,
|
"devOptional": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/prop-types": "*",
|
"@types/prop-types": "*",
|
||||||
"@types/scheduler": "*",
|
"@types/scheduler": "*",
|
||||||
@@ -1581,7 +1593,6 @@
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"baseline-browser-mapping": "^2.10.12",
|
"baseline-browser-mapping": "^2.10.12",
|
||||||
"caniuse-lite": "^1.0.30001782",
|
"caniuse-lite": "^1.0.30001782",
|
||||||
@@ -2710,7 +2721,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
||||||
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
|
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"loose-envify": "^1.1.0"
|
"loose-envify": "^1.1.0"
|
||||||
},
|
},
|
||||||
@@ -2723,7 +2733,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
|
||||||
"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
|
"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"loose-envify": "^1.1.0",
|
"loose-envify": "^1.1.0",
|
||||||
"scheduler": "^0.23.0"
|
"scheduler": "^0.23.0"
|
||||||
@@ -2794,7 +2803,6 @@
|
|||||||
"integrity": "sha512-nc72Wgq62I7rtDV4izT5/aaS0zxy3kttkinf9586ApknY3jZO9NYsmtc24fUckA0X7Q2v+ML4a15pdUlV5V/jA==",
|
"integrity": "sha512-nc72Wgq62I7rtDV4izT5/aaS0zxy3kttkinf9586ApknY3jZO9NYsmtc24fUckA0X7Q2v+ML4a15pdUlV5V/jA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/estree": "1.0.9"
|
"@types/estree": "1.0.9"
|
||||||
},
|
},
|
||||||
@@ -3166,7 +3174,6 @@
|
|||||||
"integrity": "sha512-STmSFzhY4ljuhz14bg9LkMTk3d98IO6DIArnTY6MeBwiD1Za2StcQtz7fzOUnRCqrHSD5+OS2reg4HOz1eoLnw==",
|
"integrity": "sha512-STmSFzhY4ljuhz14bg9LkMTk3d98IO6DIArnTY6MeBwiD1Za2StcQtz7fzOUnRCqrHSD5+OS2reg4HOz1eoLnw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"esbuild": "^0.19.3",
|
"esbuild": "^0.19.3",
|
||||||
"postcss": "^8.4.35",
|
"postcss": "^8.4.35",
|
||||||
@@ -3257,7 +3264,6 @@
|
|||||||
"integrity": "sha512-Ljb1cnSJSivGN0LqXd/zmDbWEM0RNNg2t1QW/XUhYl/qPqyu7CsqeWtqQXHVaJsecLPuDoak2oJcZN2QoRIOag==",
|
"integrity": "sha512-Ljb1cnSJSivGN0LqXd/zmDbWEM0RNNg2t1QW/XUhYl/qPqyu7CsqeWtqQXHVaJsecLPuDoak2oJcZN2QoRIOag==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vitest/expect": "1.6.1",
|
"@vitest/expect": "1.6.1",
|
||||||
"@vitest/runner": "1.6.1",
|
"@vitest/runner": "1.6.1",
|
||||||
|
|||||||
@@ -16,6 +16,7 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ant-design/icons": "5.3.0",
|
"@ant-design/icons": "5.3.0",
|
||||||
|
"@phosphor-icons/react": "^2.1.10",
|
||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
"react-dom": "18.2.0",
|
"react-dom": "18.2.0",
|
||||||
"scheduler": "0.23.0",
|
"scheduler": "0.23.0",
|
||||||
|
|||||||
@@ -25,6 +25,17 @@ import {
|
|||||||
TableOutlined,
|
TableOutlined,
|
||||||
VideoCameraOutlined,
|
VideoCameraOutlined,
|
||||||
} from "@ant-design/icons";
|
} from "@ant-design/icons";
|
||||||
|
import {
|
||||||
|
ArrowsCounterClockwise,
|
||||||
|
Fire,
|
||||||
|
FrameCorners,
|
||||||
|
Gift,
|
||||||
|
MagicWand,
|
||||||
|
Mountains,
|
||||||
|
ShoppingBag,
|
||||||
|
User,
|
||||||
|
VideoCamera,
|
||||||
|
} from "@phosphor-icons/react";
|
||||||
import { Fragment, useEffect, useMemo, useRef, useState, type CSSProperties, type ChangeEvent, type DragEvent, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from "react";
|
import { Fragment, useEffect, useMemo, useRef, useState, type CSSProperties, type ChangeEvent, type DragEvent, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from "react";
|
||||||
import { createPortal } from "react-dom";
|
import { createPortal } from "react-dom";
|
||||||
import { useTypewriter } from "../../hooks/useTypewriter";
|
import { useTypewriter } from "../../hooks/useTypewriter";
|
||||||
@@ -1044,16 +1055,17 @@ const cloneOutputOptions: Array<{ key: ProductSetOutputKey; label: string; desc:
|
|||||||
...productSetOutputOptions,
|
...productSetOutputOptions,
|
||||||
];
|
];
|
||||||
const commerceScenarioOptions: Array<{ key: CommerceScenarioKey; label: string; desc: string; icon: ReactNode }> = [
|
const commerceScenarioOptions: Array<{ key: CommerceScenarioKey; label: string; desc: string; icon: ReactNode }> = [
|
||||||
{ key: "popular", label: "热门", desc: "高频模板", icon: <FireOutlined /> },
|
{ key: "popular", label: "热门", desc: "高频模板", icon: <span role="img" aria-label="fire">🔥</span> },
|
||||||
{ key: "poster", label: "海报生成", desc: "活动视觉", icon: <LayoutOutlined /> },
|
{ key: "poster", label: "海报生成", desc: "活动视觉", icon: <span role="img" aria-label="poster">🎨</span> },
|
||||||
{ key: "mainImage", label: "商品主图", desc: "主图转化", icon: <FileImageOutlined /> },
|
{ key: "mainImage", label: "商品主图", desc: "主图转化", icon: <span role="img" aria-label="product">🛍️</span> },
|
||||||
{ key: "scene", label: "场景图", desc: "生活氛围", icon: <AppstoreOutlined /> },
|
{ key: "model", label: "模特图", desc: "真人展示", icon: <span role="img" aria-label="model">🕴️</span> },
|
||||||
{ key: "festival", label: "节日风格图", desc: "节点营销", icon: <GlobalOutlined /> },
|
{ key: "scene", label: "场景图", desc: "生活氛围", icon: <span role="img" aria-label="scene">🌅</span> },
|
||||||
{ key: "model", label: "模特图", desc: "真人展示", icon: <SkinOutlined /> },
|
{ key: "festival", label: "节日风格图", desc: "节点营销", icon: <span role="img" aria-label="festival">🎉</span> },
|
||||||
{ key: "background", label: "更换背景", desc: "背景重构", icon: <ClearOutlined /> },
|
{ key: "background", label: "更换背景", desc: "背景重构", icon: <span role="img" aria-label="background">✨</span> },
|
||||||
{ key: "retouch", label: "无痕改图", desc: "精修优化", icon: <EditOutlined /> },
|
{ key: "retouch", label: "无痕改图", desc: "精修优化", icon: <span role="img" aria-label="retouch">🪄</span> },
|
||||||
{ key: "salesVideo", label: "带货视频", desc: "短视频脚本", icon: <VideoCameraOutlined /> },
|
{ key: "salesVideo", label: "带货视频", desc: "短视频脚本", icon: <span role="img" aria-label="video">🎬</span> },
|
||||||
];
|
];
|
||||||
|
const primaryCommerceScenarioKeys: CommerceScenarioKey[] = ["popular", "poster", "mainImage", "model"];
|
||||||
const commerceScenarioOutputMap: Record<Exclude<CommerceScenarioKey, "popular">, ProductSetOutputKey> = {
|
const commerceScenarioOutputMap: Record<Exclude<CommerceScenarioKey, "popular">, ProductSetOutputKey> = {
|
||||||
poster: "set",
|
poster: "set",
|
||||||
mainImage: "set",
|
mainImage: "set",
|
||||||
@@ -1225,6 +1237,166 @@ const commerceScenarioTemplates: CommerceScenarioTemplate[] = [
|
|||||||
prompt: "生成商品使用演示短视频分镜，围绕使用过程、关键卖点和效果对比展开，节奏清晰，适合带货转化。",
|
prompt: "生成商品使用演示短视频分镜，围绕使用过程、关键卖点和效果对比展开，节奏清晰，适合带货转化。",
|
||||||
mediaUrl: ossAssets.ecommerce.inspiration.asinListing,
|
mediaUrl: ossAssets.ecommerce.inspiration.asinListing,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: "poster-festival-gift",
|
||||||
|
scenario: "poster",
|
||||||
|
output: "set",
|
||||||
|
title: "节日礼赠海报",
|
||||||
|
desc: "适合父亲节、母亲节等节点礼赠氛围",
|
||||||
|
badge: "节点营销",
|
||||||
|
prompt: "生成一张节日礼赠风格电商海报，突出礼盒质感、温馨氛围和送礼情绪，画面高级克制，适合节日活动投放。",
|
||||||
|
mediaUrl: ossAssets.ecommerce.inspiration.fathersDaySet,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "poster-luxury-perfume",
|
||||||
|
scenario: "poster",
|
||||||
|
output: "set",
|
||||||
|
title: "奢品香水海报",
|
||||||
|
desc: "高端质感，适合美妆香氛品牌",
|
||||||
|
badge: "品牌感",
|
||||||
|
prompt: "生成一张奢品香水电商海报，突出瓶身质感、光影层次和高端氛围，画面精致有艺术感，适合品牌旗舰店投放。",
|
||||||
|
mediaUrl: ossAssets.ecommerce.inspiration.perfumeSet,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "main-image-model",
|
||||||
|
scenario: "mainImage",
|
||||||
|
output: "set",
|
||||||
|
title: "模特展示主图",
|
||||||
|
desc: "真人上身，提升列表点击率",
|
||||||
|
badge: "点击率优先",
|
||||||
|
prompt: "生成一张真人模特展示商品主图，突出上身效果、版型和搭配，背景简洁，适合提升搜索列表点击率和转化。",
|
||||||
|
mediaUrl: ossAssets.ecommerce.productSet.model,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "main-image-detail",
|
||||||
|
scenario: "mainImage",
|
||||||
|
output: "set",
|
||||||
|
title: "细节质感主图",
|
||||||
|
desc: "材质特写，强化购买信心",
|
||||||
|
badge: "转化优先",
|
||||||
|
prompt: "生成一张商品细节质感主图，突出材质纹理、工艺细节和真实触感，画面聚焦主体，适合强化用户购买信心。",
|
||||||
|
mediaUrl: ossAssets.ecommerce.productSet.detail,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "model-jacket",
|
||||||
|
scenario: "model",
|
||||||
|
output: "model",
|
||||||
|
title: "男装夹克模特",
|
||||||
|
desc: "硬朗风格，突出版型和质感",
|
||||||
|
badge: "风格推荐",
|
||||||
|
prompt: "生成男装夹克模特展示图，模特姿态自然有型，突出夹克版型、面料质感和整体搭配，适合男装电商详情和主图。",
|
||||||
|
mediaUrl: ossAssets.ecommerce.tryOn.jacketResultA,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "model-hat",
|
||||||
|
scenario: "model",
|
||||||
|
output: "model",
|
||||||
|
title: "帽子配饰模特",
|
||||||
|
desc: "细节展示，适合配饰品类",
|
||||||
|
badge: "高频推荐",
|
||||||
|
prompt: "生成帽子配饰模特展示图，突出帽型、佩戴效果和搭配细节，模特姿态自然，适合配饰、帽饰电商详情与主图。",
|
||||||
|
mediaUrl: ossAssets.ecommerce.tryOn.hatResultA,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "scene-camping",
|
||||||
|
scenario: "scene",
|
||||||
|
output: "set",
|
||||||
|
title: "户外露营场景",
|
||||||
|
desc: "把商品放进自然野趣环境",
|
||||||
|
badge: "生活方式",
|
||||||
|
prompt: "生成户外露营风格商品场景图，把产品自然融入露营环境，突出使用场景、自由氛围和生活品质，适合户外品类推广。",
|
||||||
|
mediaUrl: ossAssets.ecommerce.inspiration.campingCart,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "scene-beauty-spray",
|
||||||
|
scenario: "scene",
|
||||||
|
output: "set",
|
||||||
|
title: "美妆喷雾场景",
|
||||||
|
desc: "捕捉使用瞬间，增强氛围感",
|
||||||
|
badge: "氛围感",
|
||||||
|
prompt: "生成美妆喷雾使用场景图，捕捉产品使用瞬间和细腻喷雾，突出清爽感、仪式感和大片氛围，适合美妆护肤品类。",
|
||||||
|
mediaUrl: ossAssets.ecommerce.inspiration.sprayScene,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "festival-fathers-gift",
|
||||||
|
scenario: "festival",
|
||||||
|
output: "set",
|
||||||
|
title: "父亲节礼盒图",
|
||||||
|
desc: "礼赠场景，适合节日送礼营销",
|
||||||
|
badge: "父亲节",
|
||||||
|
prompt: "生成父亲节礼赠风格商品图，突出礼盒质感、沉稳色调和送礼仪式感，画面温暖有格调，适合父亲节活动投放。",
|
||||||
|
mediaUrl: ossAssets.ecommerce.inspiration.fathersDaySet,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "festival-candle-gift",
|
||||||
|
scenario: "festival",
|
||||||
|
output: "set",
|
||||||
|
title: "香薰蜡烛礼盒",
|
||||||
|
desc: "温暖氛围，适合节日礼赠场景",
|
||||||
|
badge: "热门模板",
|
||||||
|
prompt: "生成香薰蜡烛节日礼盒图，突出温暖烛光、包装质感和治愈氛围，画面柔和高级，适合节日礼赠和家居品类营销。",
|
||||||
|
mediaUrl: ossAssets.ecommerce.inspiration.etsyScentedCandleSet,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "background-premium-gray",
|
||||||
|
scenario: "background",
|
||||||
|
output: "set",
|
||||||
|
title: "高级灰背景",
|
||||||
|
desc: "简约商业，提升产品高级感",
|
||||||
|
badge: "高频推荐",
|
||||||
|
prompt: "为商品更换高级灰商业背景，保留产品主体和细节，背景简约有层次，突出产品轮廓和质感，适合电商主图和广告。",
|
||||||
|
mediaUrl: ossAssets.ecommerce.detail.productA,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "background-home-living",
|
||||||
|
scenario: "background",
|
||||||
|
output: "set",
|
||||||
|
title: "居家背景",
|
||||||
|
desc: "温馨生活场景，增强代入感",
|
||||||
|
badge: "场景增强",
|
||||||
|
prompt: "为商品更换温馨居家背景，保持主体自然融入，增强生活气息和使用代入感，适合家居、日用和生活方式品类。",
|
||||||
|
mediaUrl: ossAssets.ecommerce.productSet.hosting,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "retouch-color-correction",
|
||||||
|
scenario: "retouch",
|
||||||
|
output: "set",
|
||||||
|
title: "色彩统一精修",
|
||||||
|
desc: "多色校正，保持系列一致",
|
||||||
|
badge: "精修模板",
|
||||||
|
prompt: "对商品图进行色彩统一精修，校正色偏、统一光影和色调，保持系列素材一致性，画面自然真实，适合电商套图。",
|
||||||
|
mediaUrl: ossAssets.ecommerce.detail.productB,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "retouch-detail-sharpen",
|
||||||
|
scenario: "retouch",
|
||||||
|
output: "set",
|
||||||
|
title: "细节锐化精修",
|
||||||
|
desc: "纹理增强，提升商品质感",
|
||||||
|
badge: "高频推荐",
|
||||||
|
prompt: "对商品图进行细节锐化精修，增强纹理、边缘和材质细节，保持自然不过度，画面干净高级，适合主图和详情页。",
|
||||||
|
mediaUrl: ossAssets.ecommerce.productSet.detail,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "sales-video-painpoint",
|
||||||
|
scenario: "salesVideo",
|
||||||
|
output: "video",
|
||||||
|
title: "痛点种草视频",
|
||||||
|
desc: "直击痛点，快速建立购买动机",
|
||||||
|
badge: "转化优先",
|
||||||
|
prompt: "生成痛点种草风格带货短视频脚本和分镜，先抛出生活痛点再展示产品解决方案，节奏紧凑，适合清洁家电和功能性产品。",
|
||||||
|
mediaUrl: ossAssets.ecommerce.inspiration.cleanerPainpointDouyin,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "sales-video-unboxing",
|
||||||
|
scenario: "salesVideo",
|
||||||
|
output: "video",
|
||||||
|
title: "温馨开箱视频",
|
||||||
|
desc: "氛围产品，增强情感连接",
|
||||||
|
badge: "热门模板",
|
||||||
|
prompt: "生成温馨开箱风格带货短视频脚本和分镜，围绕拆箱仪式感、产品外观和初体验展开，画面温暖治愈，适合氛围类产品。",
|
||||||
|
mediaUrl: ossAssets.ecommerce.inspiration.nightLightUnboxingDouyin,
|
||||||
|
},
|
||||||
];
|
];
|
||||||
const popularCommerceScenarioTemplates = commerceScenarioOptions
|
const popularCommerceScenarioTemplates = commerceScenarioOptions
|
||||||
.filter((option): option is { key: Exclude<CommerceScenarioKey, "popular">; label: string; desc: string; icon: ReactNode } => option.key !== "popular")
|
.filter((option): option is { key: Exclude<CommerceScenarioKey, "popular">; label: string; desc: string; icon: ReactNode } => option.key !== "popular")
|
||||||
@@ -1673,6 +1845,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
const composerMenuCloseTimeoutRef = useRef<number | null>(null);
|
const composerMenuCloseTimeoutRef = useRef<number | null>(null);
|
||||||
const requirementTextareaRef = useRef<HTMLTextAreaElement>(null);
|
const requirementTextareaRef = useRef<HTMLTextAreaElement>(null);
|
||||||
const commandComposerWrapRef = useRef<HTMLElement | null>(null);
|
const commandComposerWrapRef = useRef<HTMLElement | null>(null);
|
||||||
|
const templateStripRef = useRef<HTMLElement | null>(null);
|
||||||
const garmentInputRef = useRef<HTMLInputElement>(null);
|
const garmentInputRef = useRef<HTMLInputElement>(null);
|
||||||
const detailInputRef = useRef<HTMLInputElement>(null);
|
const detailInputRef = useRef<HTMLInputElement>(null);
|
||||||
const detailProgressRef = useRef<number | null>(null);
|
const detailProgressRef = useRef<number | null>(null);
|
||||||
@@ -1747,9 +1920,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
const [imageWorkbenchResultUrl, setImageWorkbenchResultUrl] = useState<string | null>(null);
|
const [imageWorkbenchResultUrl, setImageWorkbenchResultUrl] = useState<string | null>(null);
|
||||||
const [imageWorkbenchProgress, setImageWorkbenchProgress] = useState(0);
|
const [imageWorkbenchProgress, setImageWorkbenchProgress] = useState(0);
|
||||||
const [isProductUploadDragging, setIsProductUploadDragging] = useState(false);
|
const [isProductUploadDragging, setIsProductUploadDragging] = useState(false);
|
||||||
const [activeCommerceScenario, setActiveCommerceScenario] = useState<CommerceScenarioKey>("popular");
|
const [activeCommerceScenario, setActiveCommerceScenario] = useState<CommerceScenarioKey | null>(null);
|
||||||
|
const [isCommerceScenarioMoreOpen, setIsCommerceScenarioMoreOpen] = useState(false);
|
||||||
const [cloneOutput, setCloneOutput] = useState<CloneOutputKey>(defaultCloneOutput);
|
const [cloneOutput, setCloneOutput] = useState<CloneOutputKey>(defaultCloneOutput);
|
||||||
const [isCloneTemplateStripVisible, setIsCloneTemplateStripVisible] = useState(true);
|
const [isCloneTemplateStripVisible, setIsCloneTemplateStripVisible] = useState(false);
|
||||||
const [videoHistoryVisible, setVideoHistoryVisible] = useState(false);
|
const [videoHistoryVisible, setVideoHistoryVisible] = useState(false);
|
||||||
const [isVideoWorkspaceVisible, setIsVideoWorkspaceVisible] = useState(false);
|
const [isVideoWorkspaceVisible, setIsVideoWorkspaceVisible] = useState(false);
|
||||||
const [videoPlanTrigger, setVideoPlanTrigger] = useState(0);
|
const [videoPlanTrigger, setVideoPlanTrigger] = useState(0);
|
||||||
@@ -2253,9 +2427,21 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
const selectedProductSetOutput =
|
const selectedProductSetOutput =
|
||||||
productSetOutputOptions.find((option) => option.key === productSetOutput) ?? productSetOutputOptions[0]!;
|
productSetOutputOptions.find((option) => option.key === productSetOutput) ?? productSetOutputOptions[0]!;
|
||||||
const selectedCloneOutput = cloneOutputOptions.find((option) => option.key === cloneOutput) ?? cloneOutputOptions[1]!;
|
const selectedCloneOutput = cloneOutputOptions.find((option) => option.key === cloneOutput) ?? cloneOutputOptions[1]!;
|
||||||
const activeCommerceScenarioTemplates = activeCommerceScenario === "popular"
|
const visibleCommerceScenarioOptions = useMemo(
|
||||||
? popularCommerceScenarioTemplates
|
() =>
|
||||||
: commerceScenarioTemplates.filter((template) => template.scenario === activeCommerceScenario);
|
isCommerceScenarioMoreOpen
|
||||||
|
? commerceScenarioOptions
|
||||||
|
: commerceScenarioOptions.filter((option) => primaryCommerceScenarioKeys.includes(option.key)),
|
||||||
|
[isCommerceScenarioMoreOpen],
|
||||||
|
);
|
||||||
|
const activeCommerceScenarioTemplates = activeCommerceScenario === null
|
||||||
|
? []
|
||||||
|
: activeCommerceScenario === "popular"
|
||||||
|
? popularCommerceScenarioTemplates
|
||||||
|
: commerceScenarioTemplates.filter((template) => template.scenario === activeCommerceScenario);
|
||||||
|
useEffect(() => {
|
||||||
|
templateStripRef.current?.scrollTo({ left: 0, behavior: "auto" });
|
||||||
|
}, [activeCommerceScenario, isCloneTemplateStripVisible]);
|
||||||
const cloneRequirementPlaceholder =
|
const cloneRequirementPlaceholder =
|
||||||
cloneOutput === "model"
|
cloneOutput === "model"
|
||||||
? "建议包含以下信息：产品名称、核心卖点、期望场景、模特外貌描述（如小麦色皮肤、齐刘海、眼角有泪痣）、具体参数"
|
? "建议包含以下信息：产品名称、核心卖点、期望场景、模特外貌描述（如小麦色皮肤、齐刘海、眼角有泪痣）、具体参数"
|
||||||
@@ -3663,6 +3849,23 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
if (mappedOutput !== cloneOutput) handleCloneOutputChange(mappedOutput);
|
if (mappedOutput !== cloneOutput) handleCloneOutputChange(mappedOutput);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleCommerceScenarioMoreToggle = () => {
|
||||||
|
setIsCommerceScenarioMoreOpen((visible) => !visible);
|
||||||
|
setComposerMenu(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const scrollCommerceTemplateStrip = (direction: -1 | 1) => {
|
||||||
|
const strip = templateStripRef.current;
|
||||||
|
if (!strip) return;
|
||||||
|
const firstCard = strip.querySelector<HTMLElement>(".ecom-command-template-card");
|
||||||
|
const cardStep = firstCard ? firstCard.offsetWidth + 14 : 0;
|
||||||
|
const viewportStep = Math.max(280, strip.clientWidth * 0.78);
|
||||||
|
strip.scrollBy({
|
||||||
|
left: direction * Math.max(cardStep, viewportStep),
|
||||||
|
behavior: "smooth",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
const handleCloneMarketChange = (nextMarket: string) => {
|
const handleCloneMarketChange = (nextMarket: string) => {
|
||||||
const normalizedMarket = normalizeMarket(nextMarket);
|
const normalizedMarket = normalizeMarket(nextMarket);
|
||||||
setMarket(normalizedMarket);
|
setMarket(normalizedMarket);
|
||||||
@@ -5745,6 +5948,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleCloneTemplateCardClick = (card: CommerceScenarioTemplate) => {
|
const handleCloneTemplateCardClick = (card: CommerceScenarioTemplate) => {
|
||||||
|
setActiveCommerceScenario(card.scenario);
|
||||||
if (card.output !== cloneOutput) handleCloneOutputChange(card.output);
|
if (card.output !== cloneOutput) handleCloneOutputChange(card.output);
|
||||||
setIsCloneTemplateStripVisible(true);
|
setIsCloneTemplateStripVisible(true);
|
||||||
setComposerMenu(null);
|
setComposerMenu(null);
|
||||||
@@ -6084,23 +6288,38 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
onChange={handleSmartCutoutUpload}
|
onChange={handleSmartCutoutUpload}
|
||||||
aria-label="上传智能抠图素材"
|
aria-label="上传智能抠图素材"
|
||||||
/>
|
/>
|
||||||
<div className="ecom-command-mode-tabs ecom-command-scenario-tabs" aria-label="电商场景">
|
<div className="ecom-command-scenario-shell" data-expanded={isCommerceScenarioMoreOpen ? "true" : "false"}>
|
||||||
{commerceScenarioOptions.map((option) => (
|
<div className="ecom-command-mode-tabs ecom-command-scenario-tabs" aria-label="电商场景">
|
||||||
|
{visibleCommerceScenarioOptions.map((option) => (
|
||||||
|
<button
|
||||||
|
key={option.key}
|
||||||
|
type="button"
|
||||||
|
className={`${activeCommerceScenario === option.key ? "is-active" : ""}${activeCommerceScenario === option.key && isCloneTemplateStripVisible ? " is-open" : ""}`}
|
||||||
|
onClick={() => handleCommerceScenarioClick(option.key)}
|
||||||
|
>
|
||||||
|
<span className={`ecom-command-mode-icon ecom-command-mode-icon--${option.key}`} aria-hidden="true">{option.icon}</span>
|
||||||
|
<strong>{option.label}</strong>
|
||||||
|
{activeCommerceScenario === option.key && isCloneTemplateStripVisible ? (
|
||||||
|
<span className="ecom-command-scenario-close" aria-hidden="true"><CloseOutlined /></span>
|
||||||
|
) : null}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
<button
|
<button
|
||||||
key={option.key}
|
|
||||||
type="button"
|
type="button"
|
||||||
className={`${activeCommerceScenario === option.key ? "is-active" : ""}${activeCommerceScenario === option.key && isCloneTemplateStripVisible ? " is-open" : ""}`}
|
className={`ecom-command-scenario-more${isCommerceScenarioMoreOpen ? " is-open" : ""}`}
|
||||||
onClick={() => handleCommerceScenarioClick(option.key)}
|
onClick={handleCommerceScenarioMoreToggle}
|
||||||
|
aria-expanded={isCommerceScenarioMoreOpen}
|
||||||
>
|
>
|
||||||
<span className={`ecom-command-mode-icon ecom-command-mode-icon--${option.key}`} aria-hidden="true">{option.icon}</span>
|
<span className="ecom-command-mode-icon ecom-command-mode-icon--more" aria-hidden="true">
|
||||||
<strong>{option.label}</strong>
|
{isCommerceScenarioMoreOpen ? <CloseOutlined /> : "···"}
|
||||||
{activeCommerceScenario === option.key && isCloneTemplateStripVisible ? (
|
</span>
|
||||||
<span className="ecom-command-scenario-close" aria-hidden="true"><CloseOutlined /></span>
|
<strong>{isCommerceScenarioMoreOpen ? "收起" : "更多"}</strong>
|
||||||
) : null}
|
|
||||||
</button>
|
</button>
|
||||||
))}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span className="ecom-command-scenario-scroll-hint" aria-hidden="true">左右滑动查看更多</span>
|
<span className="ecom-command-scenario-scroll-hint" aria-hidden="true">
|
||||||
|
{isCommerceScenarioMoreOpen ? "左右滑动查看全部场景" : "点击更多查看全部场景"}
|
||||||
|
</span>
|
||||||
<div className="clone-ai-input-wrapper ecom-command-composer">
|
<div className="clone-ai-input-wrapper ecom-command-composer">
|
||||||
{productImages.length ? (
|
{productImages.length ? (
|
||||||
<div className="ecom-command-asset-popover" aria-label={`已上传素材，${productImages.length}/${maxCloneProductImages}张`}>
|
<div className="ecom-command-asset-popover" aria-label={`已上传素材，${productImages.length}/${maxCloneProductImages}张`}>
|
||||||
@@ -6193,31 +6412,53 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
|||||||
</div>
|
</div>
|
||||||
{renderComposerMenu()}
|
{renderComposerMenu()}
|
||||||
</div>
|
</div>
|
||||||
{(status === "idle" || status === "ready") && !showMainVideoWorkspace && isCloneTemplateStripVisible ? (
|
{(status === "idle" || status === "ready") && !showMainVideoWorkspace && activeCommerceScenario !== null && isCloneTemplateStripVisible ? (
|
||||||
<section className={`ecom-command-template-strip ecom-command-template-strip--${activeCommerceScenario}`} aria-label="模板卡片">
|
<div className={`ecom-command-template-carousel ecom-command-template-carousel--${activeCommerceScenario}`}>
|
||||||
{activeCommerceScenarioTemplates.map((card) => (
|
<button
|
||||||
<button
|
type="button"
|
||||||
key={card.id}
|
className="ecom-command-template-nav ecom-command-template-nav--prev"
|
||||||
type="button"
|
onClick={() => scrollCommerceTemplateStrip(-1)}
|
||||||
className="ecom-command-template-card"
|
aria-label="查看上一组模板"
|
||||||
aria-label={card.title}
|
>
|
||||||
onClick={(event) => {
|
‹
|
||||||
event.preventDefault();
|
</button>
|
||||||
event.stopPropagation();
|
<section
|
||||||
handleCloneTemplateCardClick(card);
|
ref={templateStripRef}
|
||||||
}}
|
className={`ecom-command-template-strip ecom-command-template-strip--${activeCommerceScenario}`}
|
||||||
>
|
aria-label="模板卡片"
|
||||||
<span className="ecom-command-template-card__media" aria-hidden="true">
|
>
|
||||||
<img src={card.mediaUrl} alt="" loading="lazy" />
|
{activeCommerceScenarioTemplates.map((card) => (
|
||||||
</span>
|
<button
|
||||||
<span className="ecom-command-template-card__body">
|
key={card.id}
|
||||||
<span className="ecom-command-template-card__badge">{card.badge}</span>
|
type="button"
|
||||||
<strong>{card.title}</strong>
|
className="ecom-command-template-card"
|
||||||
<em>{card.desc}</em>
|
aria-label={card.title}
|
||||||
</span>
|
onClick={(event) => {
|
||||||
</button>
|
event.preventDefault();
|
||||||
))}
|
event.stopPropagation();
|
||||||
</section>
|
handleCloneTemplateCardClick(card);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span className="ecom-command-template-card__media" aria-hidden="true">
|
||||||
|
<img src={card.mediaUrl} alt="" loading="lazy" />
|
||||||
|
</span>
|
||||||
|
<span className="ecom-command-template-card__body">
|
||||||
|
<span className="ecom-command-template-card__badge">{card.badge}</span>
|
||||||
|
<strong>{card.title}</strong>
|
||||||
|
<em>{card.desc}</em>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</section>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="ecom-command-template-nav ecom-command-template-nav--next"
|
||||||
|
onClick={() => scrollCommerceTemplateStrip(1)}
|
||||||
|
aria-label="查看下一组模板"
|
||||||
|
>
|
||||||
|
›
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
{(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="快捷功能">
|
||||||
|
|||||||
@@ -17437,27 +17437,19 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
|
|||||||
/* Ecommerce home scenario templates */
|
/* Ecommerce home scenario templates */
|
||||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs.ecom-command-mode-tabs {
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs.ecom-command-mode-tabs {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
align-items: center !important;
|
align-items: stretch !important;
|
||||||
justify-content: flex-start !important;
|
justify-content: center !important;
|
||||||
gap: 8px !important;
|
gap: 9px !important;
|
||||||
width: fit-content !important;
|
width: min(100%, 1180px) !important;
|
||||||
max-width: min(100%, 1120px) !important;
|
margin: 0 auto 10px !important;
|
||||||
margin: 0 auto 12px !important;
|
padding: 5px 0 !important;
|
||||||
padding: 6px !important;
|
|
||||||
box-sizing: border-box !important;
|
|
||||||
overflow-x: auto !important;
|
overflow-x: auto !important;
|
||||||
overflow-y: hidden !important;
|
|
||||||
overscroll-behavior-x: contain !important;
|
|
||||||
scrollbar-width: none !important;
|
scrollbar-width: none !important;
|
||||||
scroll-snap-type: x proximity !important;
|
scroll-snap-type: x proximity !important;
|
||||||
border: 1px solid rgba(30, 189, 219, 0.12) !important;
|
border: 0 !important;
|
||||||
border-radius: 24px !important;
|
border-radius: 0 !important;
|
||||||
background: rgba(255, 255, 255, 0.42) !important;
|
background: transparent !important;
|
||||||
box-shadow:
|
box-shadow: none !important;
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.68),
|
|
||||||
0 10px 28px rgba(16, 115, 204, 0.05) !important;
|
|
||||||
backdrop-filter: blur(16px) saturate(1.05) !important;
|
|
||||||
-webkit-backdrop-filter: blur(16px) saturate(1.05) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs.ecom-command-mode-tabs::-webkit-scrollbar {
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs.ecom-command-mode-tabs::-webkit-scrollbar {
|
||||||
@@ -17479,9 +17471,9 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
|
|||||||
min-height: 40px !important;
|
min-height: 40px !important;
|
||||||
padding: 7px 14px 7px 10px !important;
|
padding: 7px 14px 7px 10px !important;
|
||||||
scroll-snap-align: start !important;
|
scroll-snap-align: start !important;
|
||||||
border: 1px solid rgba(16, 32, 44, 0.07) !important;
|
border: 1px solid color-mix(in srgb, var(--mode-accent) 16%, transparent) !important;
|
||||||
border-radius: 18px !important;
|
border-radius: 18px !important;
|
||||||
background: rgba(255, 255, 255, 0.68) !important;
|
background: color-mix(in srgb, var(--mode-accent) 7%, rgba(255, 255, 255, 0.68)) !important;
|
||||||
color: rgba(16, 32, 44, 0.68) !important;
|
color: rgba(16, 32, 44, 0.68) !important;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 2px 6px rgba(16, 32, 44, 0.03),
|
0 2px 6px rgba(16, 32, 44, 0.03),
|
||||||
@@ -17501,15 +17493,19 @@ 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"]:not(.is-history-detail) .ecom-command-scenario-tabs.ecom-command-mode-tabs button:hover {
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs.ecom-command-mode-tabs button:hover {
|
||||||
background: rgba(255, 255, 255, 0.86) !important;
|
background: color-mix(in srgb, var(--mode-accent) 18%, rgba(255, 255, 255, 0.88)) !important;
|
||||||
border-color: color-mix(in srgb, var(--mode-accent) 22%, transparent) !important;
|
border-color: color-mix(in srgb, var(--mode-accent) 48%, transparent) !important;
|
||||||
color: rgba(16, 32, 44, 0.86) !important;
|
color: rgba(16, 32, 44, 0.88) !important;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 8px 18px color-mix(in srgb, var(--mode-accent) 10%, transparent),
|
0 8px 20px color-mix(in srgb, var(--mode-accent) 16%, transparent),
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
|
inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
|
||||||
transform: translateY(-1px) !important;
|
transform: translateY(-1px) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs.ecom-command-mode-tabs button:hover .ecom-command-mode-icon {
|
||||||
|
background: color-mix(in srgb, var(--mode-accent) 20%, rgba(255, 255, 255, 0.85)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-active {
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-active {
|
||||||
background:
|
background:
|
||||||
radial-gradient(circle at 24% 16%, color-mix(in srgb, var(--mode-accent) 14%, transparent), transparent 54%),
|
radial-gradient(circle at 24% 16%, color-mix(in srgb, var(--mode-accent) 14%, transparent), transparent 54%),
|
||||||
@@ -17540,24 +17536,22 @@ 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"]:not(.is-history-detail) .ecom-command-scenario-tabs .ecom-command-mode-icon {
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs .ecom-command-mode-icon {
|
||||||
grid-row: auto !important;
|
grid-row: auto !important;
|
||||||
display: inline-grid !important;
|
display: inline-grid !important;
|
||||||
width: 22px !important;
|
width: 26px !important;
|
||||||
min-width: 22px !important;
|
min-width: 26px !important;
|
||||||
height: 22px !important;
|
height: 26px !important;
|
||||||
place-items: center !important;
|
place-items: center !important;
|
||||||
border: 0 !important;
|
border: 0 !important;
|
||||||
border-radius: 7px !important;
|
border-radius: 8px !important;
|
||||||
background: color-mix(in srgb, var(--mode-accent) 10%, rgba(255, 255, 255, 0.9)) !important;
|
background: transparent !important;
|
||||||
color: var(--mode-accent) !important;
|
box-shadow: none !important;
|
||||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
|
font-size: 17px !important;
|
||||||
font-size: 13px !important;
|
line-height: 1 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button.is-active .ecom-command-mode-icon,
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button.is-active .ecom-command-mode-icon,
|
||||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button.is-open .ecom-command-mode-icon {
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button.is-open .ecom-command-mode-icon {
|
||||||
background: color-mix(in srgb, var(--mode-accent) 16%, rgba(255, 255, 255, 0.95)) !important;
|
background: transparent !important;
|
||||||
box-shadow:
|
box-shadow: none !important;
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.9),
|
|
||||||
0 2px 6px color-mix(in srgb, var(--mode-accent) 12%, transparent) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs strong {
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs strong {
|
||||||
@@ -17616,24 +17610,39 @@ 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"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--popular) {
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--popular) {
|
||||||
--mode-accent: #c04468;
|
--mode-accent: #D45C5C;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--poster) {
|
||||||
|
--mode-accent: #7A6BD1;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--mainImage) {
|
||||||
|
--mode-accent: #2E9E9E;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--model) {
|
||||||
|
--mode-accent: #B56B7A;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--scene) {
|
||||||
|
--mode-accent: #4A9B7F;
|
||||||
}
|
}
|
||||||
|
|
||||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--poster),
|
|
||||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--festival) {
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--festival) {
|
||||||
--mode-accent: #cc6b14;
|
--mode-accent: #C78A3E;
|
||||||
}
|
}
|
||||||
|
|
||||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--mainImage),
|
|
||||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--scene),
|
|
||||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--background) {
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--background) {
|
||||||
--mode-accent: #0f8f72;
|
--mode-accent: #5A8BAE;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--retouch) {
|
||||||
|
--mode-accent: #9A8BB8;
|
||||||
}
|
}
|
||||||
|
|
||||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--model),
|
|
||||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--retouch),
|
|
||||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--salesVideo) {
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--salesVideo) {
|
||||||
--mode-accent: #1073cc;
|
--mode-accent: #3A7CA5;
|
||||||
}
|
}
|
||||||
|
|
||||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-strip {
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-strip {
|
||||||
@@ -17742,13 +17751,42 @@ 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"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint {
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
width: min(100%, 1180px) !important;
|
width: min(100%, 1180px) !important;
|
||||||
margin: -4px auto 6px !important;
|
margin: -6px auto 4px !important;
|
||||||
text-align: center !important;
|
text-align: center !important;
|
||||||
font-size: 11px !important;
|
font-size: 11px !important;
|
||||||
font-weight: 480 !important;
|
font-weight: 480 !important;
|
||||||
line-height: 1 !important;
|
line-height: 1 !important;
|
||||||
color: rgba(16, 32, 44, 0.36) !important;
|
color: rgba(16, 32, 44, 0.26) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint::before,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint::after {
|
||||||
|
display: inline-block !important;
|
||||||
|
font-size: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint::before {
|
||||||
|
content: "←" !important;
|
||||||
|
margin-right: 5px !important;
|
||||||
|
animation: ecom-scroll-hint-left 1.6s ease-in-out infinite !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint::after {
|
||||||
|
content: "→" !important;
|
||||||
|
margin-left: 5px !important;
|
||||||
|
animation: ecom-scroll-hint-right 1.6s ease-in-out infinite !important;
|
||||||
|
animation-delay: 0.8s !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes ecom-scroll-hint-left {
|
||||||
|
0%, 100% { opacity: 0.25; transform: translateX(0); }
|
||||||
|
50% { opacity: 0.6; transform: translateX(-2px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes ecom-scroll-hint-right {
|
||||||
|
0%, 100% { opacity: 0.25; transform: translateX(0); }
|
||||||
|
50% { opacity: 0.6; transform: translateX(2px); }
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
@@ -18320,3 +18358,430 @@ html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"][data-w
|
|||||||
background: rgba(232, 249, 253, 0.92) !important;
|
background: rgba(232, 249, 253, 0.92) !important;
|
||||||
transform: translateY(-1px) !important;
|
transform: translateY(-1px) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Ecommerce home scenario navigation and template carousel refinement */
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell {
|
||||||
|
display: flex !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
width: 100% !important;
|
||||||
|
margin: 0 auto 10px !important;
|
||||||
|
padding: 0 16px !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs {
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
gap: 10px !important;
|
||||||
|
width: auto !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
margin: 0 auto !important;
|
||||||
|
padding: 4px !important;
|
||||||
|
overflow-x: auto !important;
|
||||||
|
overflow-y: hidden !important;
|
||||||
|
overscroll-behavior-x: contain !important;
|
||||||
|
scrollbar-width: none !important;
|
||||||
|
scroll-snap-type: x proximity !important;
|
||||||
|
border: 0 !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
background: transparent !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
backdrop-filter: none !important;
|
||||||
|
-webkit-backdrop-filter: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button {
|
||||||
|
min-height: 42px !important;
|
||||||
|
padding: 8px 15px 8px 11px !important;
|
||||||
|
border-radius: 999px !important;
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(249, 253, 255, 0.78)) !important;
|
||||||
|
box-shadow:
|
||||||
|
0 8px 22px rgba(16, 115, 204, 0.06),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-open {
|
||||||
|
padding-right: 31px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.ecom-command-scenario-more {
|
||||||
|
--mode-accent: #1073cc;
|
||||||
|
border-style: dashed !important;
|
||||||
|
color: rgba(16, 32, 44, 0.64) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.ecom-command-scenario-more.is-open {
|
||||||
|
border-style: solid !important;
|
||||||
|
color: rgba(16, 32, 44, 0.92) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-mode-icon--more {
|
||||||
|
background: rgba(232, 249, 253, 0.82) !important;
|
||||||
|
color: #1073cc !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
font-weight: 900 !important;
|
||||||
|
letter-spacing: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint {
|
||||||
|
display: block !important;
|
||||||
|
width: min(100%, 1180px) !important;
|
||||||
|
margin: -6px auto 8px !important;
|
||||||
|
text-align: center !important;
|
||||||
|
color: rgba(16, 32, 44, 0.28) !important;
|
||||||
|
font-size: 11px !important;
|
||||||
|
font-weight: 620 !important;
|
||||||
|
line-height: 1.1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel {
|
||||||
|
position: relative !important;
|
||||||
|
justify-self: center !important;
|
||||||
|
width: 100% !important;
|
||||||
|
max-width: 1180px !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
margin: 16px auto 12px !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
isolation: isolate !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel::before,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel::after {
|
||||||
|
content: "" !important;
|
||||||
|
position: absolute !important;
|
||||||
|
top: 0 !important;
|
||||||
|
bottom: 0 !important;
|
||||||
|
z-index: 2 !important;
|
||||||
|
width: 54px !important;
|
||||||
|
pointer-events: none !important;
|
||||||
|
opacity: 0.9 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel::before {
|
||||||
|
left: 0 !important;
|
||||||
|
background: linear-gradient(90deg, rgba(245, 252, 255, 0.96), rgba(245, 252, 255, 0)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel::after {
|
||||||
|
right: 0 !important;
|
||||||
|
background: linear-gradient(270deg, rgba(245, 252, 255, 0.96), rgba(245, 252, 255, 0)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel .ecom-command-template-strip {
|
||||||
|
display: flex !important;
|
||||||
|
grid-template-columns: none !important;
|
||||||
|
gap: 14px !important;
|
||||||
|
width: 100% !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 2px 2px 6px !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
overflow-x: auto !important;
|
||||||
|
overflow-y: hidden !important;
|
||||||
|
scroll-behavior: smooth !important;
|
||||||
|
scroll-padding: 4px !important;
|
||||||
|
scroll-snap-type: x mandatory !important;
|
||||||
|
overscroll-behavior-x: contain !important;
|
||||||
|
scrollbar-width: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel .ecom-command-template-strip::-webkit-scrollbar {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel .ecom-command-template-card {
|
||||||
|
flex: 0 0 clamp(260px, 24vw, 312px) !important;
|
||||||
|
display: grid !important;
|
||||||
|
grid-template-columns: 96px minmax(0, 1fr) !important;
|
||||||
|
min-height: 126px !important;
|
||||||
|
scroll-snap-align: start !important;
|
||||||
|
border-color: rgba(30, 189, 219, 0.13) !important;
|
||||||
|
border-radius: 18px !important;
|
||||||
|
background:
|
||||||
|
linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 250, 253, 0.9)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav {
|
||||||
|
position: absolute !important;
|
||||||
|
top: 50% !important;
|
||||||
|
z-index: 4 !important;
|
||||||
|
display: inline-flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
width: 38px !important;
|
||||||
|
height: 38px !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
border: 1px solid rgba(30, 189, 219, 0.2) !important;
|
||||||
|
border-radius: 50% !important;
|
||||||
|
background: rgba(255, 255, 255, 0.92) !important;
|
||||||
|
color: #1073cc !important;
|
||||||
|
box-shadow: 0 12px 28px rgba(16, 115, 204, 0.14) !important;
|
||||||
|
font-size: 24px !important;
|
||||||
|
font-weight: 760 !important;
|
||||||
|
line-height: 1 !important;
|
||||||
|
cursor: pointer !important;
|
||||||
|
opacity: 0 !important;
|
||||||
|
transform: translateY(-50%) scale(0.94) !important;
|
||||||
|
transition:
|
||||||
|
opacity 180ms ease,
|
||||||
|
transform 180ms ease,
|
||||||
|
border-color 180ms ease,
|
||||||
|
background 180ms ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav--prev {
|
||||||
|
left: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav--next {
|
||||||
|
right: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel:hover .ecom-command-template-nav,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav:focus-visible {
|
||||||
|
opacity: 1 !important;
|
||||||
|
transform: translateY(-50%) scale(1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav:hover {
|
||||||
|
border-color: rgba(30, 189, 219, 0.42) !important;
|
||||||
|
background: rgba(232, 249, 253, 0.98) !important;
|
||||||
|
transform: translateY(-50%) scale(1.04) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell {
|
||||||
|
justify-content: flex-start !important;
|
||||||
|
padding-right: 12px !important;
|
||||||
|
padding-left: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs {
|
||||||
|
justify-content: flex-start !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav {
|
||||||
|
opacity: 0.86 !important;
|
||||||
|
transform: translateY(-50%) scale(0.96) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell {
|
||||||
|
padding-right: 8px !important;
|
||||||
|
padding-left: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs {
|
||||||
|
gap: 8px !important;
|
||||||
|
padding-bottom: 6px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button {
|
||||||
|
min-height: 40px !important;
|
||||||
|
padding: 7px 12px 7px 9px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel .ecom-command-template-card {
|
||||||
|
flex-basis: min(82vw, 340px) !important;
|
||||||
|
grid-template-columns: 86px minmax(0, 1fr) !important;
|
||||||
|
min-height: 116px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel .ecom-command-template-card__media {
|
||||||
|
width: 86px !important;
|
||||||
|
min-width: 86px !important;
|
||||||
|
height: 96px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav {
|
||||||
|
width: 34px !important;
|
||||||
|
height: 34px !important;
|
||||||
|
font-size: 21px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Keep scenario tabs on the original ecommerce theme instead of category-specific colors. */
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell {
|
||||||
|
margin-bottom: 2px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs {
|
||||||
|
padding-top: 2px !important;
|
||||||
|
padding-bottom: 2px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button {
|
||||||
|
--mode-accent: #0f8fa8 !important;
|
||||||
|
border-color: rgba(30, 189, 219, 0.15) !important;
|
||||||
|
background: rgba(255, 255, 255, 0.72) !important;
|
||||||
|
color: rgba(16, 32, 44, 0.74) !important;
|
||||||
|
box-shadow:
|
||||||
|
0 6px 18px rgba(16, 115, 204, 0.045),
|
||||||
|
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"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button:hover {
|
||||||
|
border-color: rgba(30, 189, 219, 0.24) !important;
|
||||||
|
background: rgba(255, 255, 255, 0.84) !important;
|
||||||
|
color: rgba(16, 32, 44, 0.88) !important;
|
||||||
|
box-shadow:
|
||||||
|
0 8px 20px rgba(16, 115, 204, 0.06),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-active,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-open {
|
||||||
|
border-color: rgba(30, 189, 219, 0.34) !important;
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 253, 255, 0.86)) !important;
|
||||||
|
color: rgba(16, 32, 44, 0.94) !important;
|
||||||
|
box-shadow:
|
||||||
|
0 10px 24px rgba(16, 115, 204, 0.075),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs .ecom-command-mode-icon {
|
||||||
|
background: rgba(232, 249, 253, 0.86) !important;
|
||||||
|
color: #0f829b !important;
|
||||||
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button.is-active .ecom-command-mode-icon,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button.is-open .ecom-command-mode-icon {
|
||||||
|
background: rgba(220, 247, 252, 0.95) !important;
|
||||||
|
color: #0b8ea6 !important;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.92),
|
||||||
|
0 3px 8px rgba(30, 189, 219, 0.1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.ecom-command-scenario-more {
|
||||||
|
border-style: solid !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint {
|
||||||
|
max-height: 10px !important;
|
||||||
|
margin: -6px auto 2px !important;
|
||||||
|
opacity: 0.36 !important;
|
||||||
|
color: rgba(16, 32, 44, 0.22) !important;
|
||||||
|
font-size: 10px !important;
|
||||||
|
font-weight: 560 !important;
|
||||||
|
line-height: 10px !important;
|
||||||
|
transform: scale(0.92) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint::before,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint::after {
|
||||||
|
content: none !important;
|
||||||
|
display: none !important;
|
||||||
|
animation: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell {
|
||||||
|
width: 100% !important;
|
||||||
|
max-width: calc(100vw - 16px) !important;
|
||||||
|
padding-right: 0 !important;
|
||||||
|
padding-left: 0 !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs {
|
||||||
|
width: 100% !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
justify-content: flex-start !important;
|
||||||
|
padding-right: 2px !important;
|
||||||
|
padding-left: 2px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint {
|
||||||
|
width: calc(100vw - 24px) !important;
|
||||||
|
max-width: calc(100vw - 24px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel {
|
||||||
|
width: calc(100vw - 24px) !important;
|
||||||
|
max-width: calc(100vw - 24px) !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel .ecom-command-template-card {
|
||||||
|
flex-basis: min(78vw, 320px) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Restore the colorful scenario feedback while keeping the compact responsive layout. */
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--popular) {
|
||||||
|
--mode-accent: #c04468 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--poster),
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--festival) {
|
||||||
|
--mode-accent: #cc6b14 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--mainImage),
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--scene),
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--background) {
|
||||||
|
--mode-accent: #0f8f72 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--model),
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--retouch),
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--salesVideo),
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button.ecom-command-scenario-more {
|
||||||
|
--mode-accent: #1073cc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button {
|
||||||
|
border-color: rgba(16, 32, 44, 0.07) !important;
|
||||||
|
background: rgba(255, 255, 255, 0.68) !important;
|
||||||
|
color: rgba(16, 32, 44, 0.68) !important;
|
||||||
|
box-shadow:
|
||||||
|
0 2px 6px rgba(16, 32, 44, 0.03),
|
||||||
|
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"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs .ecom-command-mode-icon {
|
||||||
|
background: color-mix(in srgb, var(--mode-accent) 10%, rgba(255, 255, 255, 0.9)) !important;
|
||||||
|
color: var(--mode-accent) !important;
|
||||||
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button:hover {
|
||||||
|
border-color: color-mix(in srgb, var(--mode-accent) 22%, transparent) !important;
|
||||||
|
background: rgba(255, 255, 255, 0.86) !important;
|
||||||
|
color: rgba(16, 32, 44, 0.86) !important;
|
||||||
|
box-shadow:
|
||||||
|
0 8px 18px color-mix(in srgb, var(--mode-accent) 10%, transparent),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-active,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-open {
|
||||||
|
border-color: color-mix(in srgb, var(--mode-accent) 42%, transparent) !important;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 24% 16%, color-mix(in srgb, var(--mode-accent) 17%, transparent), transparent 52%),
|
||||||
|
rgba(255, 255, 255, 0.98) !important;
|
||||||
|
color: rgba(16, 32, 44, 0.96) !important;
|
||||||
|
box-shadow:
|
||||||
|
0 12px 28px color-mix(in srgb, var(--mode-accent) 15%, transparent),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button.is-active .ecom-command-mode-icon,
|
||||||
|
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button.is-open .ecom-command-mode-icon {
|
||||||
|
background: color-mix(in srgb, var(--mode-accent) 16%, rgba(255, 255, 255, 0.95)) !important;
|
||||||
|
color: var(--mode-accent) !important;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.9),
|
||||||
|
0 2px 6px color-mix(in srgb, var(--mode-accent) 12%, transparent) !important;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user