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/features/ecommerce/EcommercePage.tsx
+5 -4
View File
@@ -988,6 +988,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
const selectedProductSetOutput =
productSetOutputOptions.find((option) => option.key === productSetOutput) ?? productSetOutputOptions[0]!;
const selectedCloneOutput = cloneOutputOptions.find((option) => option.key === cloneOutput) ?? cloneOutputOptions[1]!;
const cloneRequirementPlaceholder =
cloneOutput === "model"
? "建议包含以下信息：产品名称、核心卖点、期望场景、模特外貌描写（如小麦色皮肤、齐刘海、眼角有泪痣）、具体参数"
: "建议包含以下信息，产品名称，核心卖点，期望场景，具体参数";
const productSetPreviewReady = productSetStatus === "done";
const cloneSetTotal = useMemo(
() => Object.values(cloneSetCounts).reduce((sum, value) => sum + value, 0),
@@ -1934,7 +1938,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
age: cloneModelAge,
ethnicity: cloneModelEthnicity,
body: cloneModelBody,
appearance: cloneModelAppearance,
scenes: selectedCloneModelScenes,
customScene: cloneModelCustomScene,
}
@@ -2225,7 +2228,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
cloneModelSelects={cloneModelSelects}
openCloneModelSelect={openCloneModelSelect}
cloneModelSelectDropUp={cloneModelSelectDropUp}
cloneModelAppearance={cloneModelAppearance}
cloneVideoQuality={cloneVideoQuality}
cloneVideoQualityOptions={cloneVideoQualityOptions}
cloneVideoDuration={cloneVideoDuration}
@@ -2257,7 +2259,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
setCloneModelCustomScene={setCloneModelCustomScene}
setOpenCloneModelSelect={setOpenCloneModelSelect}
setCloneModelSelectDropUp={setCloneModelSelectDropUp}
setCloneModelAppearance={setCloneModelAppearance}
setCloneVideoQuality={setCloneVideoQuality}
setCloneVideoDuration={setCloneVideoDuration}
clampCloneVideoDuration={clampCloneVideoDuration}
@@ -2620,7 +2621,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
if (event.key === "Escape") setRequirementImageMentionQuery(null);
}}
maxLength={500}
placeholder="建议包含以下信息，产品名称，核心卖点，期望场景，具体参数"
placeholder={cloneRequirementPlaceholder}
/>
{requirementImageMentionQuery !== null && ecommerceMentionImages.length ? (
<ImageMentionMenu images={ecommerceMentionImages} query={requirementImageMentionQuery} onSelect={insertRequirementImageMention} />
src/features/ecommerce/panels/EcommerceClonePanel.tsx
+2 -14
View File
@@ -100,7 +100,6 @@ interface EcommerceClonePanelProps {
cloneModelSelects: CloneModelSelectItem[];
openCloneModelSelect: CloneModelSelectKey | null;
cloneModelSelectDropUp: boolean;
cloneModelAppearance: string;
cloneVideoQuality: CloneVideoQualityKey;
cloneVideoQualityOptions: CloneVideoQualityOption[];
cloneVideoDuration: number;
@@ -132,7 +131,6 @@ interface EcommerceClonePanelProps {
setCloneModelCustomScene: (value: string) => void;
setOpenCloneModelSelect: (value: CloneModelSelectKey | null) => void;
setCloneModelSelectDropUp: (value: boolean) => void;
setCloneModelAppearance: (value: string) => void;
setCloneVideoQuality: (value: CloneVideoQualityKey) => void;
setCloneVideoDuration: (value: number) => void;
clampCloneVideoDuration: (value: number) => number;
@@ -172,7 +170,6 @@ export default function EcommerceClonePanel({
cloneModelSelects,
openCloneModelSelect,
cloneModelSelectDropUp,
cloneModelAppearance,
cloneVideoQuality,
cloneVideoQualityOptions,
cloneVideoDuration,
@@ -204,7 +201,6 @@ export default function EcommerceClonePanel({
setCloneModelCustomScene,
setOpenCloneModelSelect,
setCloneModelSelectDropUp,
setCloneModelAppearance,
setCloneVideoQuality,
setCloneVideoDuration,
clampCloneVideoDuration,
@@ -668,14 +664,6 @@ export default function EcommerceClonePanel({
);
})}
</div>
<label className="clone-ai-model-textarea">
<strong>外貌细节（可选）</strong>
<textarea
value={cloneModelAppearance}
onChange={(event) => setCloneModelAppearance(event.target.value)}
placeholder="例如：小麦色皮肤、齐刘海、眼角有泪痣..."
/>
</label>
</div>
)}
</div>
@@ -758,7 +746,7 @@ export default function EcommerceClonePanel({
style={{ display: "none" }}
/>
<button type="button" className="clone-ai-video-outfit-upload-btn" onClick={() => videoOutfitVideoRef.current?.click()}>
{videoOutfitVideoUrl ? "重新选择视频" : "选择视频文件"}
{videoOutfitVideoUrl ? "重新上传视频" : "点击上传视频"}
</button>
{videoOutfitVideoUrl ? <span className="clone-ai-video-outfit-info">已选择视频</span> : null}
</div>
@@ -774,7 +762,7 @@ export default function EcommerceClonePanel({
style={{ display: "none" }}
/>
<button type="button" className="clone-ai-video-outfit-upload-btn" onClick={() => videoOutfitRefRef.current?.click()}>
{videoOutfitRefUrl ? "重新选择参考图" : "选择参考图"}
{videoOutfitRefUrl ? "重新上传参考图" : "点击上传参考图"}
</button>
{videoOutfitRefUrl ? <span className="clone-ai-video-outfit-info">已选择参考图</span> : null}
</div>
src/features/ecommerce/panels/EcommerceDetailPanel.tsx
+34 -2
View File
@@ -1,5 +1,5 @@
import { CloudUploadOutlined, LoadingOutlined, QuestionCircleOutlined } from "@ant-design/icons";
import type { ChangeEvent, RefObject } from "react";
import { useState, type ChangeEvent, type DragEvent, type RefObject } from "react";
import { EcommerceProgressBar } from "../EcommerceProgressBar";
interface EcommerceDetailPanelProps {
@@ -59,6 +59,31 @@ export default function EcommerceDetailPanel({
handleDetailGenerate,
onCancelGenerate,
}: EcommerceDetailPanelProps) {
const [isDragging, setIsDragging] = useState(false);
const handleDragOver = (e: DragEvent<HTMLButtonElement>) => {
e.preventDefault();
e.stopPropagation();
if (e.dataTransfer.types.includes("Files")) setIsDragging(true);
};
const handleDragLeave = (e: DragEvent<HTMLButtonElement>) => {
e.preventDefault();
e.stopPropagation();
if (e.currentTarget === e.target || !e.currentTarget.contains(e.relatedTarget as Node)) {
setIsDragging(false);
}
};
const handleDrop = (e: DragEvent<HTMLButtonElement>) => {
e.preventDefault();
e.stopPropagation();
setIsDragging(false);
if (e.dataTransfer.files.length) {
handleDetailUpload({ target: { files: e.dataTransfer.files } } as ChangeEvent<HTMLInputElement>);
}
};
return (
<>
<div className="product-clone-panel__scroll">
@@ -67,7 +92,14 @@ export default function EcommerceDetailPanel({
商品原图
<QuestionCircleOutlined />
</h2>
<button type="button" className="product-clone-upload-zone product-detail-upload" onClick={() => detailInputRef.current?.click()}>
<button
type="button"
className={`product-clone-upload-zone product-detail-upload${isDragging ? " is-dragging" : ""}`}
onClick={() => detailInputRef.current?.click()}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
>
<strong>
<CloudUploadOutlined />
上传图片
src/features/ecommerce/panels/EcommerceTryOnPanel.tsx
+34 -2
View File
@@ -1,5 +1,5 @@
import { CloudUploadOutlined, LoadingOutlined, QuestionCircleOutlined } from "@ant-design/icons";
import type { ChangeEvent, RefObject } from "react";
import { useState, type ChangeEvent, type DragEvent, type RefObject } from "react";
import { EcommerceProgressBar } from "../EcommerceProgressBar";
interface EcommerceTryOnPanelProps {
@@ -73,12 +73,44 @@ export default function EcommerceTryOnPanel({
handleTryOnGenerate,
onCancelGenerate,
}: EcommerceTryOnPanelProps) {
const [isDragging, setIsDragging] = useState(false);
const handleDragOver = (e: DragEvent<HTMLButtonElement>) => {
e.preventDefault();
e.stopPropagation();
if (e.dataTransfer.types.includes("Files")) setIsDragging(true);
};
const handleDragLeave = (e: DragEvent<HTMLButtonElement>) => {
e.preventDefault();
e.stopPropagation();
if (e.currentTarget === e.target || !e.currentTarget.contains(e.relatedTarget as Node)) {
setIsDragging(false);
}
};
const handleDrop = (e: DragEvent<HTMLButtonElement>) => {
e.preventDefault();
e.stopPropagation();
setIsDragging(false);
if (e.dataTransfer.files.length) {
handleGarmentUpload({ target: { files: e.dataTransfer.files } } as ChangeEvent<HTMLInputElement>);
}
};
return (
<>
<div className="product-clone-panel__scroll">
<section className="product-clone-field">
<h2>服装图片</h2>
<button type="button" className="product-clone-upload-zone product-try-on-upload" onClick={() => garmentInputRef.current?.click()}>
<button
type="button"
className={`product-clone-upload-zone product-try-on-upload${isDragging ? " is-dragging" : ""}`}
onClick={() => garmentInputRef.current?.click()}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
>
<strong>
<CloudUploadOutlined />
服装图片