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

feat: 新增引导式新手指引 (OnboardingTour) 组件，全站页面接入

Browse Source
This commit is contained in:
OmniAI Developer
2026-06-08 21:30:48 +08:00
parent 1e756808c1
commit 6ed65ca3ee
24 changed files with 1414 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/pages/ecommerce.css
+72 -97
View File
@@ -1542,9 +1542,7 @@
.product-clone-page[data-tool="clone"] .clone-ai-replicate-panel {
display: grid;
flex: 0 0 auto;
grid-template-rows: auto auto minmax(0, 1fr);
gap: 9px;
min-height: 0;
overflow: visible;
border: 1px solid #303540;
border-radius: 14px;
@@ -1874,11 +1872,8 @@
.product-clone-page[data-tool="clone"] .clone-ai-module-panel {
display: grid;
flex: 0 0 272px;
grid-template-rows: auto minmax(0, 1fr);
flex: 0 0 auto;
gap: 10px;
height: 272px;
min-height: 0;
border: 1px solid #303540;
border-radius: 14px;
background: #1c1f26;
@@ -1906,25 +1901,6 @@
grid-template-columns: repeat(2, minmax(0, 1fr));
align-content: start;
gap: 8px;
min-height: 0;
overflow-y: auto;
padding-right: 4px;
scrollbar-width: thin;
scrollbar-color: #3d4552 #171a20;
}
.product-clone-page[data-tool="clone"] .clone-ai-module-list::-webkit-scrollbar {
width: 6px;
}
.product-clone-page[data-tool="clone"] .clone-ai-module-list::-webkit-scrollbar-track {
border-radius: 999px;
background: #171a20;
}
.product-clone-page[data-tool="clone"] .clone-ai-module-list::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #3d4552;
}
.product-clone-page[data-tool="clone"] .clone-ai-module-list button {
@@ -1981,11 +1957,8 @@
.product-clone-page[data-tool="clone"] .clone-ai-model-panel {
display: grid;
flex: 0 0 272px;
grid-template-rows: auto minmax(0, 1fr);
flex: 0 0 auto;
gap: 10px;
height: 272px;
min-height: 0;
border: 1px solid #303540;
border-radius: 14px;
background: #1c1f26;
@@ -2032,25 +2005,7 @@
}
.product-clone-page[data-tool="clone"] .clone-ai-model-scroll {
min-height: 0;
overflow-y: auto;
padding-right: 4px;
scrollbar-width: thin;
scrollbar-color: #3d4552 #171a20;
}
.product-clone-page[data-tool="clone"] .clone-ai-model-scroll::-webkit-scrollbar {
width: 6px;
}
.product-clone-page[data-tool="clone"] .clone-ai-model-scroll::-webkit-scrollbar-track {
border-radius: 999px;
background: #171a20;
}
.product-clone-page[data-tool="clone"] .clone-ai-model-scroll::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #3d4552;
overflow: visible;
}
.product-clone-page[data-tool="clone"] .clone-ai-model-scenes,
@@ -2223,16 +2178,12 @@
z-index: 30;
display: grid;
gap: 4px;
max-height: 150px;
overflow-y: auto;
border: 1px solid #303540;
border-radius: 8px;
background: #22252d;
background-image: none;
padding: 5px;
box-shadow: none;
scrollbar-width: thin;
scrollbar-color: #3d4552 #171a20;
transform-origin: top center;
animation: clone-ai-model-select-pop 160ms cubic-bezier(0.2, 0.82, 0.2, 1) both;
}
@@ -2244,20 +2195,6 @@
animation-name: clone-ai-model-select-pop-up;
}
.product-clone-page[data-tool="clone"] .clone-ai-model-select__menu::-webkit-scrollbar {
width: 6px;
}
.product-clone-page[data-tool="clone"] .clone-ai-model-select__menu::-webkit-scrollbar-track {
border-radius: 999px;
background: #171a20;
}
.product-clone-page[data-tool="clone"] .clone-ai-model-select__menu::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #3d4552;
}
.product-clone-page[data-tool="clone"] .clone-ai-model-select__menu button {
display: flex;
align-items: center;
@@ -2351,31 +2288,14 @@
.product-clone-page[data-tool="clone"] .clone-ai-video-panel {
display: grid;
flex: 1 1 auto;
flex: 0 0 auto;
align-content: start;
gap: 12px;
min-height: 0;
overflow-y: auto;
overflow: visible;
border: 1px solid #303540;
border-radius: 14px;
background: #1c1f26;
padding: 12px;
scrollbar-width: thin;
scrollbar-color: #3d4552 #171a20;
}
.product-clone-page[data-tool="clone"] .clone-ai-video-panel::-webkit-scrollbar {
width: 6px;
}
.product-clone-page[data-tool="clone"] .clone-ai-video-panel::-webkit-scrollbar-track {
border-radius: 999px;
background: #171a20;
}
.product-clone-page[data-tool="clone"] .clone-ai-video-panel::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #3d4552;
}
.product-clone-page[data-tool="clone"] .clone-ai-video-section {
@@ -8611,31 +8531,86 @@
transition: none;
}
.clone-ai-video-outfit-upload {
display: flex;
align-items: center;
gap: 10px;
position: relative;
display: grid;
gap: 8px;
margin-top: 6px;
}
.clone-ai-video-outfit-upload-btn {
padding: 7px 16px;
border: 1px solid var(--border-subtle);
border-radius: 8px;
background: var(--bg-inset);
color: var(--fg-body);
display: flex;
width: 100%;
min-height: 118px;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1.5px dashed var(--ecm-line, var(--border-subtle));
border-radius: var(--ecm-radius-md, 14px);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 65%),
var(--ecm-inset, var(--bg-inset));
color: var(--ecm-text, var(--fg-body));
font-size: 13px;
font-weight: 850;
line-height: 1.35;
cursor: pointer;
transition: border-color 150ms, background 150ms;
text-align: center;
transition:
border-color 150ms,
background 150ms,
color 150ms,
transform 150ms;
}
.clone-ai-video-outfit-upload-btn::before {
display: grid;
width: 38px;
height: 38px;
place-items: center;
margin-bottom: 8px;
border: 1px solid rgba(var(--ecm-accent-rgb, 0, 255, 136), 0.26);
border-radius: 999px;
background: rgba(var(--ecm-accent-rgb, 0, 255, 136), 0.08);
color: var(--ecm-accent, var(--accent));
content: "+";
font-size: 24px;
font-weight: 800;
line-height: 1;
}
.clone-ai-video-outfit-upload-btn:hover {
border-color: var(--border-default);
background: var(--bg-hover);
border-color: rgba(var(--ecm-accent-rgb, 0, 255, 136), 0.48);
background:
linear-gradient(180deg, rgba(var(--ecm-accent-rgb, 0, 255, 136), 0.08), transparent 72%),
var(--ecm-inset-hover, var(--bg-hover));
color: var(--ecm-text, var(--fg-body));
}
.clone-ai-video-outfit-upload-btn:active {
transform: scale(0.99);
}
.clone-ai-video-outfit-info {
position: absolute;
top: 10px;
right: 10px;
max-width: calc(100% - 20px);
padding: 4px 8px;
border: 1px solid rgba(var(--ecm-accent-rgb, 0, 255, 136), 0.28);
border-radius: 999px;
background: rgba(var(--ecm-accent-rgb, 0, 255, 136), 0.1);
font-size: 12px;
color: var(--accent);
font-weight: 850;
color: var(--ecm-accent, var(--accent));
pointer-events: none;
}
.clone-ai-video-outfit-upload:has(.clone-ai-video-outfit-info) .clone-ai-video-outfit-upload-btn {
border-style: solid;
border-color: rgba(var(--ecm-accent-rgb, 0, 255, 136), 0.38);
background:
linear-gradient(180deg, rgba(var(--ecm-accent-rgb, 0, 255, 136), 0.075), transparent 74%),
var(--ecm-inset, var(--bg-inset));
}
/* Ecommerce generation page SaaS polish: visual-only refinement for the product creation workspace. */
src/styles/pages/script-tokens-v5.css
+11
View File
@@ -1620,12 +1620,23 @@
border: 0;
background: transparent;
cursor: default;
position: relative;
}
.script-eval-v5-illustration:hover {
background: transparent;
}
.script-eval-v5-illustration.is-dragging .script-eval-v5-illustration-hit {
background: var(--v5-green-deep);
outline: 2px dashed var(--v5-green);
transform: scale(1.02);
}
.script-eval-v5-illustration .script-eval-v5-upload-drop-overlay {
border-radius: 10px;
}
.script-eval-v5-illustration-hit {
display: inline-flex;
flex-direction: column;
src/styles/pages/studio-layout.css
+19
View File
@@ -299,6 +299,25 @@
gap: 10px;
padding: 32px;
text-align: center;
border-radius: 12px;
cursor: pointer;
transition: background 0.18s ease, outline 0.18s ease, transform 0.18s ease;
}
.studio-canvas-ghost:hover {
background: rgba(var(--accent-rgb), 0.05);
outline: 1px dashed rgba(var(--accent-rgb), 0.25);
}
.studio-canvas-ghost:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.studio-canvas-ghost.is-dragging {
background: rgba(var(--accent-rgb), 0.1);
outline: 2px dashed var(--accent);
transform: scale(1.02);
}
.studio-canvas-ghost__icon {