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/assets/AssetsPage.tsx
+21 -2
View File
@@ -10,7 +10,7 @@ import {
SearchOutlined,
UserOutlined,
} from "@ant-design/icons";
import { useCallback, useEffect, useMemo, useRef, useState, type JSX } from "react";
import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent, type DragEvent, type JSX } from "react";
import "../../styles/pages/assets.css";
import { assetClient, type ServerAssetItem } from "../../api/assetClient";
import { aiGenerationClient } from "../../api/aiGenerationClient";
@@ -95,6 +95,17 @@ function AssetsPage({ isAuthenticated, onOpenLogin }: AssetsPageProps) {
const [contextMenu, setContextMenu] = useState<{ x: number; y: number; asset: LibraryAssetItem } | null>(null);
const contextMenuRef = useRef<HTMLDivElement>(null);
const uploadInputRef = useRef<HTMLInputElement>(null);
const [isUploadDragging, setIsUploadDragging] = useState(false);
const handleUploadDragOver = (e: DragEvent) => { e.preventDefault(); if (e.dataTransfer.types.includes("Files")) setIsUploadDragging(true); };
const handleUploadDragLeave = (e: DragEvent) => { e.preventDefault(); if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsUploadDragging(false); };
const handleUploadDrop = (e: DragEvent) => {
e.preventDefault();
setIsUploadDragging(false);
if (e.dataTransfer.files.length) {
void handleUploadFiles(e.dataTransfer.files);
}
};
const handleContextMenu = useCallback((e: React.MouseEvent, asset: LibraryAssetItem) => {
e.preventDefault();
@@ -270,7 +281,15 @@ function AssetsPage({ isAuthenticated, onOpenLogin }: AssetsPageProps) {
placeholder="搜索资产..."
/>
</label>
<button type="button" className="studio-generate-btn studio-generate-btn--compact" onClick={() => uploadInputRef.current?.click()} disabled={isUploading}>
<button
type="button"
className={`studio-generate-btn studio-generate-btn--compact${isUploadDragging ? " is-dragging" : ""}`}
onClick={() => uploadInputRef.current?.click()}
onDragOver={handleUploadDragOver}
onDragLeave={handleUploadDragLeave}
onDrop={handleUploadDrop}
disabled={isUploading}
>
{isUploading ? <LoadingOutlined /> : <PlusOutlined />}
{isUploading ? "上传中..." : "添加"}
</button>
src/features/character-mix/CharacterMixPage.tsx
+33 -2
View File
@@ -61,6 +61,9 @@ function CharacterMixPage({
const abortRef = useRef(false);
const taskIdRef = useRef<string | null>(null);
const [isDragging, setIsDragging] = useState(false);
const [isCanvasDragging, setIsCanvasDragging] = useState(false);
const characterInputRef = useRef<HTMLInputElement | null>(null);
const videoInputRef = useRef<HTMLInputElement | null>(null);
useEffect(() => {
return () => {
@@ -262,6 +265,23 @@ function CharacterMixPage({
}
};
const handleCanvasDragOver = (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); if (e.dataTransfer.types.includes("Files")) setIsCanvasDragging(true); };
const handleCanvasDragLeave = (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); if (e.currentTarget === e.target || !e.currentTarget.contains(e.relatedTarget as Node)) setIsCanvasDragging(false); };
const handleCanvasDrop = (e: DragEvent) => {
e.preventDefault();
e.stopPropagation();
setIsCanvasDragging(false);
handleDrop(e);
};
const handleCanvasClick = () => {
if (!characterPreview) {
characterInputRef.current?.click();
} else if (!videoPreview) {
videoInputRef.current?.click();
}
};
return (
<section className="image-workbench-page character-mix-page" aria-label="角色迁移">
<header className="image-workbench-topbar">
@@ -342,6 +362,7 @@ function CharacterMixPage({
<div className="studio-panel__section-body">
<label className={characterFile ? "studio-upload-slot--filled" : "studio-upload-slot--empty"}>
<input
ref={characterInputRef}
type="file"
accept="image/*"
onChange={(event) => {
@@ -383,6 +404,7 @@ function CharacterMixPage({
<div className="studio-panel__section-body">
<label className={videoFile ? "studio-upload-slot--filled" : "studio-upload-slot--empty"}>
<input
ref={videoInputRef}
type="file"
accept="video/*"
onChange={(event) => {
@@ -441,12 +463,21 @@ function CharacterMixPage({
) : null}
</div>
) : (
<div className="studio-canvas-ghost">
<div
className={`studio-canvas-ghost${isCanvasDragging ? " is-dragging" : ""}`}
onClick={handleCanvasClick}
onDragOver={handleCanvasDragOver}
onDragLeave={handleCanvasDragLeave}
onDrop={handleCanvasDrop}
role="button"
tabIndex={0}
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") handleCanvasClick(); }}
>
<div className="studio-canvas-ghost__icon">
<SwapOutlined />
</div>
<div className="studio-canvas-ghost__title">上传人物图与参考视频</div>
<div className="studio-canvas-ghost__hint">将静态角色迁移到参考视频的动作与表情中。</div>
<div className="studio-canvas-ghost__hint">点击或拖拽上传；支持人物图片 (PNG/JPG) 和参考视频 (MP4/MOV/AVI)</div>
</div>
)
}
src/features/community-review/CommunityCaseAddPage.tsx
+40 -3
View File
@@ -6,7 +6,7 @@ import {
PictureOutlined,
UploadOutlined,
} from "@ant-design/icons";
import { useEffect, useMemo, useRef, useState, type ChangeEvent } from "react";
import { useEffect, useMemo, useRef, useState, type ChangeEvent, type DragEvent } from "react";
import { aiGenerationClient } from "../../api/aiGenerationClient";
import { communityClient } from "../../api/communityClient";
import WorkspacePageShell from "../../components/WorkspacePageShell";
@@ -73,6 +73,29 @@ export default function CommunityCaseAddPage({ session, onOpenLogin, onOpenRevie
const allowed = canManageCommunityCases(session);
const imageInputRef = useRef<HTMLInputElement | null>(null);
const workflowInputRef = useRef<HTMLInputElement | null>(null);
const [isImageDragging, setIsImageDragging] = useState(false);
const [isWorkflowDragging, setIsWorkflowDragging] = useState(false);
const handleImageDragOver = (e: DragEvent) => { e.preventDefault(); if (e.dataTransfer.types.includes("Files")) setIsImageDragging(true); };
const handleImageDragLeave = (e: DragEvent) => { e.preventDefault(); if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsImageDragging(false); };
const handleImageDrop = (e: DragEvent) => {
e.preventDefault();
setIsImageDragging(false);
if (e.dataTransfer.files.length) {
void handleImageChange({ target: { files: e.dataTransfer.files } } as ChangeEvent<HTMLInputElement>);
}
};
const handleWorkflowDragOver = (e: DragEvent) => { e.preventDefault(); if (e.dataTransfer.types.includes("Files")) setIsWorkflowDragging(true); };
const handleWorkflowDragLeave = (e: DragEvent) => { e.preventDefault(); if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsWorkflowDragging(false); };
const handleWorkflowDrop = (e: DragEvent) => {
e.preventDefault();
setIsWorkflowDragging(false);
if (e.dataTransfer.files.length) {
void handleWorkflowChange({ target: { files: e.dataTransfer.files } } as ChangeEvent<HTMLInputElement>);
}
};
const [target, setTarget] = useState<CaseTarget>("generation");
const [title, setTitle] = useState("");
const [description, setDescription] = useState("");
@@ -331,7 +354,14 @@ export default function CommunityCaseAddPage({ session, onOpenLogin, onOpenRevie
</label>
<div className="community-case-add-upload-row">
<input ref={imageInputRef} type="file" accept="image/*" hidden onChange={handleImageChange} />
<button type="button" onClick={() => imageInputRef.current?.click()}>
<button
type="button"
className={isImageDragging ? "is-dragging" : ""}
onClick={() => imageInputRef.current?.click()}
onDragOver={handleImageDragOver}
onDragLeave={handleImageDragLeave}
onDrop={handleImageDrop}
>
<UploadOutlined />
上传图片
</button>
@@ -345,7 +375,14 @@ export default function CommunityCaseAddPage({ session, onOpenLogin, onOpenRevie
<>
<div className="community-case-add-upload-row">
<input ref={workflowInputRef} type="file" accept="application/json,.json" hidden onChange={handleWorkflowChange} />
<button type="button" onClick={() => workflowInputRef.current?.click()}>
<button
type="button"
className={isWorkflowDragging ? "is-dragging" : ""}
onClick={() => workflowInputRef.current?.click()}
onDragOver={handleWorkflowDragOver}
onDragLeave={handleWorkflowDragLeave}
onDrop={handleWorkflowDrop}
>
<UploadOutlined />
上传 JSON
</button>
src/features/digital-human/DigitalHumanPage.tsx
+50 -2
View File
@@ -98,6 +98,10 @@ function DigitalHumanPage({
activeTaskIdRef.current = activeTaskId;
const keepaliveRestoredRef = useRef(false);
const [isDragging, setIsDragging] = useState(false);
const imageInputRef = useRef<HTMLInputElement | null>(null);
const audioInputRef = useRef<HTMLInputElement | null>(null);
const canvasDragCounterRef = useRef(0);
const [isCanvasDragging, setIsCanvasDragging] = useState(false);
useEffect(() => {
return () => {
@@ -171,6 +175,39 @@ function DigitalHumanPage({
}
};
const handleCanvasDragOver = (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); if (e.dataTransfer.types.includes("Files")) setIsCanvasDragging(true); };
const handleCanvasDragLeave = (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); if (e.currentTarget === e.target || !e.currentTarget.contains(e.relatedTarget as Node)) setIsCanvasDragging(false); };
const handleCanvasDrop = (e: DragEvent) => {
e.preventDefault();
e.stopPropagation();
setIsCanvasDragging(false);
const file = e.dataTransfer.files[0];
if (!file) return;
if (file.type.startsWith("image/")) {
if (imagePreview) URL.revokeObjectURL(imagePreview);
setImageName(file.name);
setImageFile(file);
setImagePreview(URL.createObjectURL(file));
pushDebugEntry("选择图片", `${file.name} / ${file.type || "unknown"} / ${formatFileSize(file.size)}`);
setNotice(`已拖放参考图 ${file.name}`);
} else if (file.type.startsWith("audio/")) {
if (audioPreview) URL.revokeObjectURL(audioPreview);
setAudioName(file.name);
setAudioFile(file);
setAudioPreview(URL.createObjectURL(file));
pushDebugEntry("选择音频", `${file.name} / ${file.type || "unknown"} / ${formatFileSize(file.size)}`);
setNotice(`已拖放音频 ${file.name}`);
}
};
const handleCanvasClick = () => {
if (!imagePreview) {
imageInputRef.current?.click();
} else if (!audioPreview) {
audioInputRef.current?.click();
}
};
const handleDownloadResult = async () => {
if (!resultVideoUrl || isDownloadingResult) return;
setIsDownloadingResult(true);
@@ -463,6 +500,7 @@ function DigitalHumanPage({
<div className="studio-panel__section-body">
<label className={imageName ? "studio-upload-slot--filled" : "studio-upload-slot--empty"}>
<input
ref={imageInputRef}
type="file"
accept="image/*"
onChange={(event) => {
@@ -501,6 +539,7 @@ function DigitalHumanPage({
<div className="studio-panel__section-body">
<label className={audioName ? "studio-upload-slot--filled" : "studio-upload-slot--empty"}>
<input
ref={audioInputRef}
type="file"
accept="audio/*"
onChange={(event) => {
@@ -541,12 +580,21 @@ function DigitalHumanPage({
<img src={imagePreview} alt="参考人像" />
</div>
) : (
<div className="studio-canvas-ghost">
<div
className={`studio-canvas-ghost${isCanvasDragging ? " is-dragging" : ""}`}
onClick={handleCanvasClick}
onDragOver={handleCanvasDragOver}
onDragLeave={handleCanvasDragLeave}
onDrop={handleCanvasDrop}
role="button"
tabIndex={0}
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") handleCanvasClick(); }}
>
<div className="studio-canvas-ghost__icon">
<CustomerServiceOutlined />
</div>
<div className="studio-canvas-ghost__title">上传参考人像与音频</div>
<div className="studio-canvas-ghost__hint">网页端首版只做本地预览，正式生成仍会继续走服务端队列。</div>
<div className="studio-canvas-ghost__hint">点击或拖拽上传；支持图片 (PNG/JPG/WEBP) 和音频 (MP3/WAV/M4A)</div>
</div>
)
}
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 />
服装图片
src/features/home/HomePage.tsx
+3 -2
View File
@@ -35,6 +35,7 @@ const {
interface HomePageProps {
onOpenGenerate: () => void;
onStartOnboarding?: () => void;
onOpenCanvas?: () => void;
onOpenEcommerce: () => void;
onOpenScriptReview?: () => void;
@@ -468,7 +469,7 @@ function EcommerceFeatureShowcase() {
);
}
function HomePage({ onOpenGenerate, onOpenCanvas, onOpenEcommerce, onOpenScriptReview, onOpenTokenMonitor, onSelectView, onOpenImageTool }: HomePageProps) {
function HomePage({ onOpenGenerate, onStartOnboarding, onOpenCanvas, onOpenEcommerce, onOpenScriptReview, onOpenTokenMonitor, onSelectView, onOpenImageTool }: HomePageProps) {
const [splashDismissed, setSplashDismissed] = useState(() => sessionStorage.getItem("omniai:splash-seen") === "1");
const [activeSlideIndex, setActiveSlideIndex] = useState(0);
const [carouselMotion, setCarouselMotion] = useState<HomeCarouselMotion | null>(null);
@@ -620,7 +621,7 @@ function HomePage({ onOpenGenerate, onOpenCanvas, onOpenEcommerce, onOpenScriptR
</div>
<div className="omni-home__actions" aria-label="首页入口">
<button type="button" className="omni-home__entry" onClick={onOpenGenerate}>
<button type="button" className="omni-home__entry" onClick={onStartOnboarding || onOpenGenerate}>
<PlusOutlined />
<span>新手</span>
</button>
src/features/image-workbench/ImageWorkbenchPage.tsx
+22 -10
View File
@@ -947,19 +947,22 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
</div>
</div>
) : (
<button
type="button"
className={`image-workbench-empty image-workbench-empty--button${isInpaintDragging ? " is-dragging" : ""}`}
<div
className={`studio-canvas-ghost${isInpaintDragging ? " is-dragging" : ""}`}
onClick={() => inpaintFileInputRef.current?.click()}
onDragOver={handleInpaintDragOver}
onDragLeave={handleInpaintDragLeave}
onDrop={handleInpaintDrop}
role="button"
tabIndex={0}
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") inpaintFileInputRef.current?.click(); }}
>
{isInpaintDragging ? <span className="image-workbench-upload-drop-overlay" style={{ borderRadius: "var(--radius-sm)" }}><span>释放文件以上传</span></span> : null}
<FileImageOutlined />
<strong>拖拽或选择图片</strong>
<span>支持 PNG / JPG / WebP</span>
</button>
<div className="studio-canvas-ghost__icon">
<FileImageOutlined />
</div>
<div className="studio-canvas-ghost__title">点击或拖拽上传图片</div>
<div className="studio-canvas-ghost__hint">支持 PNG / JPG / WebP，上传后使用画笔标注需要重绘的区域</div>
</div>
)}
</section>
@@ -1389,12 +1392,21 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
<img src={referenceImage} alt="参考图预览" />
</div>
) : (
<div className="studio-canvas-ghost">
<div
className={`studio-canvas-ghost${isDragging ? " is-dragging" : ""}`}
onClick={() => fileInputRef.current?.click()}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
role="button"
tabIndex={0}
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") fileInputRef.current?.click(); }}
>
<div className="studio-canvas-ghost__icon">
<PictureOutlined />
</div>
<div className="studio-canvas-ghost__title">上传参考图后在此预览</div>
<div className="studio-canvas-ghost__hint">生成结果也会显示在这里</div>
<div className="studio-canvas-ghost__hint">点击或拖拽上传 (PNG / JPG / WebP)，生成结果也会显示在这里</div>
</div>
)}
</section>
src/features/profile/ProfilePage.tsx
+37 -4
View File
@@ -18,7 +18,7 @@ import {
ShareAltOutlined,
UserOutlined,
} from "@ant-design/icons";
import { useEffect, useMemo, useRef, useState, type ChangeEvent, type FormEvent, type KeyboardEvent } from "react";
import { useEffect, useMemo, useRef, useState, type ChangeEvent, type DragEvent, type FormEvent, type KeyboardEvent } from "react";
import { createPortal } from "react-dom";
import "../../styles/pages/profile.css";
import { aiGenerationClient } from "../../api/aiGenerationClient";
@@ -228,6 +228,28 @@ function ProfilePage({
const avatarLabel = displayName.trim().slice(0, 1).toUpperCase() || "访";
const avatarInputRef = useRef<HTMLInputElement | null>(null);
const bannerInputRef = useRef<HTMLInputElement | null>(null);
const [isBannerDragging, setIsBannerDragging] = useState(false);
const [isAvatarDragging, setIsAvatarDragging] = useState(false);
const handleBannerDragOver = (e: DragEvent) => { e.preventDefault(); if (e.dataTransfer.types.includes("Files")) setIsBannerDragging(true); };
const handleBannerDragLeave = (e: DragEvent) => { e.preventDefault(); if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsBannerDragging(false); };
const handleBannerDrop = (e: DragEvent) => {
e.preventDefault();
setIsBannerDragging(false);
if (e.dataTransfer.files.length) {
handleBannerUpload({ target: { files: e.dataTransfer.files } } as ChangeEvent<HTMLInputElement>);
}
};
const handleAvatarDragOver = (e: DragEvent) => { e.preventDefault(); if (e.dataTransfer.types.includes("Files")) setIsAvatarDragging(true); };
const handleAvatarDragLeave = (e: DragEvent) => { e.preventDefault(); if (!e.currentTarget.contains(e.relatedTarget as Node)) setIsAvatarDragging(false); };
const handleAvatarDrop = (e: DragEvent) => {
e.preventDefault();
setIsAvatarDragging(false);
if (e.dataTransfer.files.length) {
handleAvatarUpload({ target: { files: e.dataTransfer.files } } as ChangeEvent<HTMLInputElement>);
}
};
const [mode, setMode] = useState<WebAuthMode>("login");
const [authTab, setAuthTab] = useState<AuthTab>("password");
@@ -1047,8 +1069,11 @@ function ProfilePage({
<input ref={avatarInputRef} type="file" accept="image/*" hidden onChange={(event) => void handleAvatarUpload(event)} />
<input ref={bannerInputRef} type="file" accept="image/*" hidden onChange={(event) => void handleBannerUpload(event)} />
<header
className={`profile-page__banner${bannerUrl ? " has-image" : ""}`}
className={`profile-page__banner${bannerUrl ? " has-image" : ""}${isBannerDragging ? " is-dragging" : ""}`}
style={bannerUrl ? { backgroundImage: `url(${bannerUrl})` } : undefined}
onDragOver={handleBannerDragOver}
onDragLeave={handleBannerDragLeave}
onDrop={handleBannerDrop}
>
<button type="button" className="profile-page__banner-btn" onClick={() => bannerInputRef.current?.click()} aria-label="更换背景">
<CameraOutlined />
@@ -1060,13 +1085,21 @@ function ProfilePage({
<div className="profile-page__body">
<aside className="profile-page__sidebar">
<div className="profile-page__sidebar-head">
<div className="profile-page__avatar-ring">
<div className={`profile-page__avatar-ring${isAvatarDragging ? " is-dragging" : ""}`}>
{avatarUrl ? (
<img className="profile-page__avatar" src={avatarUrl} alt="" />
) : (
<span className="profile-page__avatar">{avatarLabel}</span>
)}
<button type="button" className="profile-page__avatar-edit" onClick={() => avatarInputRef.current?.click()} aria-label="更换头像">
<button
type="button"
className="profile-page__avatar-edit"
onClick={() => avatarInputRef.current?.click()}
onDragOver={handleAvatarDragOver}
onDragLeave={handleAvatarDragLeave}
onDrop={handleAvatarDrop}
aria-label="更换头像"
>
<CameraOutlined />
</button>
<span className="profile-page__avatar-badge">
src/features/resolution-upscale/ResolutionUpscalePage.tsx
+11 -2
View File
@@ -601,11 +601,20 @@ function ResolutionUpscalePage({
</div>
)
) : (
<div className="studio-canvas-ghost">
<div
className={`studio-canvas-ghost${isDragging ? " is-dragging" : ""}`}
onClick={() => fileInputRef.current?.click()}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
role="button"
tabIndex={0}
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") fileInputRef.current?.click(); }}
>
<div className="studio-canvas-ghost__icon">
<ThunderboltOutlined />
</div>
<div className="studio-canvas-ghost__title">{mode === "image" ? "拖拽或选择图片" : "拖拽或选择视频"}</div>
<div className="studio-canvas-ghost__title">{mode === "image" ? "点击或拖拽上传图片" : "点击或拖拽上传视频"}</div>
<div className="studio-canvas-ghost__hint">{mode === "image" ? "支持 PNG / JPG / WebP" : "支持 MP4 / MOV / WebM"}</div>
</div>
)}
src/features/script-tokens/ScriptTokensPage.tsx
+10 -1
View File
@@ -679,14 +679,23 @@ function ScriptTokensPage() {
</div>
) : !result && (
<div className="script-eval-v5-input-section">
<div className="script-eval-v5-illustration" aria-label="上传剧本并开始评测">
<div className={`script-eval-v5-illustration${isDragging ? " is-dragging" : ""}`} aria-label="上传剧本并开始评测">
<div
className="script-eval-v5-illustration-hit"
role="button"
tabIndex={0}
onClick={() => fileInputRef.current?.click()}
onKeyDown={uploadKeyDown}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
>
{isDragging && (
<div className="script-eval-v5-upload-drop-overlay">
<UploadOutlined />
<span>释放文件以上传</span>
</div>
)}
<div className="script-eval-v5-upload-card-icon">
<ShellIcon name="file-text" />
</div>
src/features/subtitle-removal/SubtitleRemovalPage.tsx
+6 -2
View File
@@ -447,15 +447,19 @@ function SubtitleRemovalPage({
</div>
) : (
<div
className="studio-canvas-ghost"
className={`studio-canvas-ghost${isDragging ? " is-dragging" : ""}`}
onClick={() => fileInputRef.current?.click()}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleFileDrop}
role="button"
tabIndex={0}
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") fileInputRef.current?.click(); }}
>
<div className="studio-canvas-ghost__icon">
<VideoCameraOutlined />
</div>
<div className="studio-canvas-ghost__title">拖拽或选择视频</div>
<div className="studio-canvas-ghost__title">点击或拖拽上传视频</div>
<div className="studio-canvas-ghost__hint">仅支持 MP4，最大 1GB，最高 1080P</div>
</div>
)}
src/features/watermark-removal/WatermarkRemovalPage.tsx
+20 -10
View File
@@ -12,7 +12,7 @@ import {
ScissorOutlined,
SwapOutlined,
} from "@ant-design/icons";
import { useCallback, useEffect, useRef, useState } from "react";
import { useCallback, useEffect, useRef, useState, type DragEvent } from "react";
import "../../styles/pages/more-tools.css";
import "../../styles/pages/image-workbench.css";
import { aiGenerationClient } from "../../api/aiGenerationClient";
@@ -48,6 +48,7 @@ function WatermarkRemovalPage({
const [status, setStatus] = useState("上传含水印的图片，点击开始去水印");
const [activeTaskId, setActiveTaskId] = useState("");
const [taskProgress, setTaskProgress] = useState(0);
const [isDragging, setIsDragging] = useState(false);
const [isProcessing, setIsProcessing] = useState(false);
const [isSavingAsset, setIsSavingAsset] = useState(false);
const [isDownloading, setIsDownloading] = useState(false);
@@ -124,6 +125,10 @@ function WatermarkRemovalPage({
setStatus(`已导入 ${file.name}`);
};
const handleDragOver = (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); if (e.dataTransfer.types.includes("Files")) setIsDragging(true); };
const handleDragLeave = (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); if (e.currentTarget === e.target || !e.currentTarget.contains(e.relatedTarget as Node)) setIsDragging(false); };
const handleCanvasDrop = (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); setIsDragging(false); handleFileDrop(e); };
const handleImportUrl = () => {
const normalizedUrl = sourceUrl.trim();
if (!/^https?:\/\//i.test(normalizedUrl)) {
@@ -403,17 +408,22 @@ function WatermarkRemovalPage({
</div>
</div>
) : (
<button
type="button"
className="image-workbench-empty image-workbench-empty--button"
<div
className={`studio-canvas-ghost${isDragging ? " is-dragging" : ""}`}
onClick={() => fileInputRef.current?.click()}
onDragOver={(e) => e.preventDefault()}
onDrop={handleFileDrop}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleCanvasDrop}
role="button"
tabIndex={0}
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") fileInputRef.current?.click(); }}
>
<DeleteOutlined />
<strong>拖拽或选择含水印图片</strong>
<span>支持 PNG / JPG / WebP</span>
</button>
<div className="studio-canvas-ghost__icon">
<DeleteOutlined />
</div>
<div className="studio-canvas-ghost__title">点击或拖拽上传图片</div>
<div className="studio-canvas-ghost__hint">支持 PNG / JPG / WebP，上传含水印图片后点击"开始去水印"</div>
</div>
)}
</section>
</main>
src/features/workbench/WorkbenchPage.tsx
+148 -1
View File
@@ -193,12 +193,15 @@ import {
PromptPreviewLayer,
} from "./WorkbenchPromptPreview";
import { SelectChip, CompoundSelectChip, InlineOptionChip } from "./WorkbenchSelectChips";
import OnboardingTour, { type TourPhaseId } from "../../components/OnboardingTour";
export type { WorkbenchResultActionPayload } from "./workbenchConstants";
interface WorkbenchPageProps {
isAuthenticated: boolean;
session: WebUserSession | null;
onboarding?: boolean;
onEndOnboarding?: () => void;
onRequireLogin: (input: CreatePreviewTaskInput) => void;
onOpenResultInCanvas?: (payload: import("./workbenchConstants").WorkbenchResultActionPayload) => void;
onRefreshUsage?: () => void;
@@ -231,6 +234,8 @@ function formatCreditValue(value: number): string {
function WorkbenchPage({
isAuthenticated,
session,
onboarding,
onEndOnboarding,
onRequireLogin,
onOpenResultInCanvas,
onRefreshUsage,
@@ -264,7 +269,41 @@ function WorkbenchPage({
const renderedMessageIdsRef = useRef<string[]>([]);
const hasHandledInitialMessagesRef = useRef(false);
const [activeMode, setActiveMode] = useState<WorkbenchMode>("video");
// Onboarding signal — init from prop or localStorage
const [effectiveOnboarding, setEffectiveOnboarding] = useState(
() => onboarding || (() => { try { return window.localStorage.getItem("omniai:onboarding") === "1"; } catch { return false; } })(),
);
// Track whether onboarding prop was ever true, to avoid overwriting localStorage-initiated true
const obWasActiveRef = useRef(onboarding);
useEffect(() => {
if (onboarding) {
obWasActiveRef.current = true;
setEffectiveOnboarding(true);
} else if (obWasActiveRef.current) {
// Only deactivate when prop transitions true→false (user dismissed)
setEffectiveOnboarding(false);
obWasActiveRef.current = false;
}
// If prop was never true, don't touch effectiveOnboarding (preserves localStorage init)
}, [onboarding]);
// Poll localStorage as a fallback (handles cases where prop isn't propagated)
useEffect(() => {
if (effectiveOnboarding) return;
const check = () => {
try {
if (window.localStorage.getItem("omniai:onboarding") === "1") {
setEffectiveOnboarding(true);
}
} catch {}
};
check();
const interval = setInterval(check, 200);
return () => clearInterval(interval);
}, [effectiveOnboarding]);
const [activeMode, setActiveMode] = useState<WorkbenchMode>(() => effectiveOnboarding ? "chat" : "video");
const [inputValue, setInputValue] = useState("");
const [messages, setMessages] = useState<ChatMessage[]>(() => (resetToken ? [] : readStoredMessages()));
const [promptHistory, setPromptHistory] = useState<string[]>(() => readStoredPromptHistory());
@@ -294,6 +333,34 @@ function WorkbenchPage({
const [sidebarCollapsed, setSidebarCollapsed] = useState(true);
const [deleteDialog, setDeleteDialog] = useState<DeleteDialogState | null>(null);
const [deleteSubmitting, setDeleteSubmitting] = useState(false);
// ── Onboarding tour state ──────────────────────────────
const [tourPhase, setTourPhase] = useState<TourPhaseId>("chat");
const [tourStep, setTourStep] = useState(0);
// Sync activeMode with tour phase and keep home view during onboarding
useEffect(() => {
if (!effectiveOnboarding) return;
// Reset tour state for repeat runs
setTourPhase("chat");
setTourStep(0);
// Force "今天想生成什么？" home view — prevent conversation auto-select
skipConversationAutoSelectRef.current = true;
setWorkspaceStarted(false);
setActiveConversationId(null);
activeConversationIdRef.current = null;
persistActiveConversationId(null);
messagesRef.current = [];
setMessages([]);
}, [effectiveOnboarding]);
useEffect(() => {
if (effectiveOnboarding) {
if (tourPhase === "chat") setActiveMode("chat");
else if (tourPhase === "image") setActiveMode("image");
else if (tourPhase === "video") setActiveMode("video");
}
}, [effectiveOnboarding, tourPhase]);
// ───────────────────────────────────────────────────────
const [, setGenerationProgress] = useState(0);
const [cursorIndex, setCursorIndex] = useState(0);
const [promptSelectionRange, setPromptSelectionRange] = useState({ start: 0, end: 0 });
@@ -427,6 +494,7 @@ function WorkbenchPage({
const toolTheme = MODE_META[activeMode];
const workbenchAccent = "#00ff88";
const hasConversationRecords = activeConversationId !== null || messages.length > 0;
const hasActivatedWorkspace = !effectiveOnboarding && (workspaceStarted || isGenerating || hasConversationRecords);
const referenceCount = referenceItems.length;
const activeVideoModelValue = toHappyHorseDisplayModel(videoModel);
const activeModelValue =
@@ -1572,7 +1640,41 @@ function WorkbenchPage({
setToolbarMenuId((current) => (current === menuId ? null : menuId));
};
// ── Onboarding tour helpers ────────────────────────────
const obTarget = (map: Partial<Record<TourPhaseId, string>>): string | undefined =>
effectiveOnboarding ? map[tourPhase] : undefined;
const handleTourNext = useCallback((_phase: TourPhaseId, stepIndex: number) => {
setTourStep(stepIndex);
}, []);
const handleTourSkip = useCallback((phase: TourPhaseId) => {
const next: Record<TourPhaseId, TourPhaseId> = { chat: "image", image: "video", video: "video" };
const nextPhase = next[phase];
if (nextPhase === phase) {
onEndOnboarding?.();
} else {
setTourPhase(nextPhase);
setTourStep(0);
if (nextPhase === "image") setActiveMode("image");
else if (nextPhase === "video") setActiveMode("video");
}
}, [onEndOnboarding, setActiveMode]);
const handleTourDone = useCallback(() => {
setEffectiveOnboarding(false);
onEndOnboarding?.();
}, [onEndOnboarding]);
// Advance tour phase when user switches mode during onboarding
const handleModeChange = (mode: WorkbenchMode) => {
if (effectiveOnboarding) {
// Advance tour phase when switching to the next mode
if (tourPhase === "chat" && mode === "image") { setTourPhase("image"); setTourStep(0); }
else if (tourPhase === "image" && mode === "video") { setTourPhase("video"); setTourStep(0); }
// Block switching to other modes during guided tour
else if (mode !== tourPhase) return;
}
setActiveMode(mode);
setToolbarMenuId(null);
setReferencePreviewOpen(false);
@@ -2795,6 +2897,7 @@ function WorkbenchPage({
className="wb-composer__ref-upload"
onClick={handleReferenceUploadClick}
disabled={disabled}
data-onboarding={obTarget({ chat: "onboarding-chat-upload", image: "onboarding-image-upload", video: "onboarding-video-upload" })}
aria-label={`上传${referenceUploadLabel}`}
aria-expanded={referenceItems.length > 0 ? referencePreviewOpen : undefined}
aria-controls={referenceItems.length > 0 ? "workbench-reference-stack" : undefined}
@@ -2854,6 +2957,7 @@ function WorkbenchPage({
const renderComposerToolbar = (disabled = false, showStop = false) => (
<div className="wb-composer__toolbar">
<div className="wb-composer__toolbar-left">
<span data-onboarding={obTarget({ chat: "onboarding-mode-selector", image: "onboarding-mode-selector" })}>
<SelectChip
chipId="studio-mode"
value={activeMode}
@@ -2866,8 +2970,10 @@ function WorkbenchPage({
ariaLabel="工作台模式"
direction={dropdownDirection}
/>
</span>
{activeMode === "chat" && (
<>
<span data-onboarding={obTarget({ chat: "onboarding-chat-model" })}>
<SelectChip
chipId="chat-model"
value={chatModel}
@@ -2880,6 +2986,8 @@ function WorkbenchPage({
ariaLabel="对话模型"
direction={dropdownDirection}
/>
</span>
<span data-onboarding={obTarget({ chat: "onboarding-chat-speed" })}>
<SelectChip
chipId="chat-speed"
value={thinkingSpeed}
@@ -2892,6 +3000,8 @@ function WorkbenchPage({
ariaLabel="思考速度"
direction={dropdownDirection}
/>
</span>
<span data-onboarding={obTarget({ chat: "onboarding-chat-depth" })}>
<SelectChip
chipId="chat-depth"
value={thinkingDepth}
@@ -2904,10 +3014,12 @@ function WorkbenchPage({
ariaLabel="思考深度"
direction={dropdownDirection}
/>
</span>
</>
)}
{activeMode === "image" && (
<>
<span data-onboarding={obTarget({ image: "onboarding-image-model" })}>
<SelectChip
chipId="image-model"
value={imageModel}
@@ -2919,6 +3031,8 @@ function WorkbenchPage({
onChange={(v) => { setImageModel(v); if (!GRID_SUPPORTED_MODELS.has(v)) setImageGridMode("single"); }}
direction={dropdownDirection}
/>
</span>
<span data-onboarding={obTarget({ image: "onboarding-image-settings" })}>
<CompoundSelectChip
chipId="image-settings"
summary={imageSettingsSummary}
@@ -2928,7 +3042,9 @@ function WorkbenchPage({
onToggle={() => toggleToolbarMenu("image-settings")}
direction={dropdownDirection}
/>
</span>
{GRID_SUPPORTED_MODELS.has(imageModel) && (
<span data-onboarding={obTarget({ image: "onboarding-image-grid" })}>
<SelectChip
chipId="image-grid-mode"
value={imageGridMode}
@@ -2940,11 +3056,13 @@ function WorkbenchPage({
onChange={setImageGridMode}
direction={dropdownDirection}
/>
</span>
)}
</>
)}
{activeMode === "video" && (
<>
<span data-onboarding={obTarget({ video: "onboarding-video-model" })}>
<SelectChip
chipId="video-model"
value={videoModel}
@@ -2956,6 +3074,8 @@ function WorkbenchPage({
onChange={setVideoModel}
direction={dropdownDirection}
/>
</span>
<span data-onboarding={obTarget({ video: "onboarding-video-frame" })}>
<SelectChip
chipId="video-mode"
value={videoFrameMode}
@@ -2967,6 +3087,8 @@ function WorkbenchPage({
onChange={setVideoFrameMode}
direction={dropdownDirection}
/>
</span>
<span data-onboarding={obTarget({ video: "onboarding-video-ratio" })}>
<CompoundSelectChip
chipId="video-ratio"
summary={videoRatio}
@@ -2976,6 +3098,8 @@ function WorkbenchPage({
onToggle={() => toggleToolbarMenu("video-ratio")}
direction={dropdownDirection}
/>
</span>
<span data-onboarding={obTarget({ video: "onboarding-video-duration" })}>
<InlineOptionChip
chipId="video-duration"
value={videoDuration}
@@ -2988,6 +3112,8 @@ function WorkbenchPage({
onChange={setVideoDuration}
direction={dropdownDirection}
/>
</span>
<span data-onboarding={obTarget({ video: "onboarding-video-quality" })}>
<InlineOptionChip
chipId="video-quality"
value={videoQuality}
@@ -3000,6 +3126,7 @@ function WorkbenchPage({
onChange={setVideoQuality}
direction={dropdownDirection}
/>
</span>
</>
)}
</div>
@@ -3013,6 +3140,7 @@ function WorkbenchPage({
disabled={sendDisabled || isGenerating}
title={isGenerating ? "任务处理中" : sendButtonTitle}
aria-label={isGenerating ? "任务处理中" : sendButtonTitle}
data-onboarding={obTarget({ video: "onboarding-video-generate" })}
onClick={() => {
if (getCachedRole() === "admin") console.log("[ai/workbench-send-click]", {
mode: activeMode,
@@ -3171,6 +3299,7 @@ function WorkbenchPage({
className={`wb-composer__textarea${showPromptPreview ? " wb-composer__textarea--overlay-mode" : ""}`}
placeholder={composerPlaceholder}
value={inputValue}
data-onboarding={obTarget({ chat: "onboarding-chat-input", image: "onboarding-image-input" })}
onChange={handlePromptChange}
onSelect={handlePromptSelectionChange}
onKeyUp={handlePromptSelectionChange}
@@ -3236,6 +3365,14 @@ function WorkbenchPage({
{renderMessagePreviewOverlay()}
{renderPromptCaseOverlay()}
{renderDeleteDialog()}
<OnboardingTour
active={Boolean(effectiveOnboarding)}
phase={tourPhase}
stepIndex={tourStep}
onNext={handleTourNext}
onSkip={handleTourSkip}
onDone={handleTourDone}
/>
</section>
);
}
@@ -3357,6 +3494,7 @@ function WorkbenchPage({
placeholder={composerPlaceholder}
value={inputValue}
disabled={false}
data-onboarding={obTarget({ chat: "onboarding-chat-input", image: "onboarding-image-input" })}
onChange={handlePromptChange}
onSelect={handlePromptSelectionChange}
onKeyUp={handlePromptSelectionChange}
@@ -3404,6 +3542,15 @@ function WorkbenchPage({
{showRechargeModal && RechargeModal ? (
<RechargeModal open={showRechargeModal} onClose={() => setShowRechargeModal(false)} currentBalance={session?.user?.balanceCents} />
) : null}
<OnboardingTour
active={Boolean(effectiveOnboarding)}
phase={tourPhase}
stepIndex={tourStep}
onNext={handleTourNext}
onSkip={handleTourSkip}
onDone={handleTourDone}
/>
</section>
);
}
src/features/workbench/workbenchConstants.ts
+4 -4
View File
@@ -149,14 +149,14 @@ export const CHAT_MODEL_OPTIONS: WorkbenchOption[] = [
export const THINKING_SPEED_OPTIONS: WorkbenchOption[] = [
{ value: "default", label: "默认" },
{ value: "high", label: "高" },
{ value: "ultra", label: "急速" },
{ value: "high", label: "思考速度：高" },
{ value: "ultra", label: "思考速度：急速" },
];
export const THINKING_DEPTH_OPTIONS: WorkbenchOption[] = [
{ value: "default", label: "默认" },
{ value: "strong", label: "强" },
{ value: "extreme", label: "极限" },
{ value: "strong", label: "推理深度：强" },
{ value: "extreme", label: "推理深度：极限" },
];
export const CHAT_NATURAL_SYSTEM_PROMPT = [