Compare commits
14 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| a2875738ce | |||
| 85adcdceef | |||
| ab99e3bf2f | |||
| e3b48e2614 | |||
| 5b316a2399 | |||
| 3f1954b38d | |||
| 96d335db8a | |||
| 307537a7ce | |||
| 0b2d6b901f | |||
| e1fdbe5f9b | |||
| f51dfb17e1 | |||
| e88edbe165 | |||
| 863f1f075e | |||
| aa133d0f5c |
+1
-1
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<html lang="zh-CN" data-theme="dark" data-ui-theme="dark-green" style="color-scheme: dark">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
+30
-46
@@ -1,4 +1,4 @@
|
||||
import { Suspense, useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { lazy, Suspense, useCallback, useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
BugOutlined,
|
||||
CheckCircleFilled,
|
||||
@@ -20,9 +20,7 @@ import {
|
||||
import ErrorBoundary from "./components/ErrorBoundary";
|
||||
import ToastContainer from "./components/toast/ToastContainer";
|
||||
import { toast } from "./components/toast/toastStore";
|
||||
import EcommercePage from "./features/ecommerce/EcommercePage";
|
||||
import { flushPendingGenerationRecords } from "./api/generationRecordClient";
|
||||
import { ossAssets } from "./data/ossAssets";
|
||||
import { keyServerClient } from "./api/keyServerClient";
|
||||
import { setUserMaxConcurrency } from "./api/generationConcurrency";
|
||||
import {
|
||||
@@ -38,6 +36,8 @@ import { useAppStore, useSessionStore } from "./stores";
|
||||
import type { WebUserSession } from "./types";
|
||||
import "./styles/ecommerce-standalone.css";
|
||||
|
||||
const EcommercePage = lazy(() => import("./features/ecommerce/EcommercePage"));
|
||||
|
||||
type AuthMode = "login" | "register";
|
||||
type AuthMethod = "account" | "email" | "phone";
|
||||
|
||||
@@ -51,17 +51,6 @@ interface LocalProfilePageProps {
|
||||
onLogout: () => void;
|
||||
}
|
||||
|
||||
const profileWorks = [
|
||||
{ title: "主图套图生成", desc: "电商主图与场景图自动生成", image: ossAssets.ecommerce.templateCases[0], type: "图像", time: "6/9 18:13" },
|
||||
{ title: "A+详情页设计", desc: "产品卖点与长图详情版式", image: ossAssets.ecommerce.templateCases[1], type: "图像", time: "6/9 10:11" },
|
||||
{ title: "短视频广告", desc: "产品展示短视频脚本与画面", image: ossAssets.ecommerce.productSet.hosting, type: "视频", time: "6/9 10:05" },
|
||||
{ title: "模特图生成", desc: "服饰商品真人上身展示", image: ossAssets.ecommerce.tryOn.tryA, type: "图像", time: "6/9 10:03" },
|
||||
{ title: "商品场景图", desc: "按平台比例输出营销素材", image: ossAssets.ecommerce.detail.gridA, type: "图像", time: "6/9 10:01" },
|
||||
{ title: "高度复刻", desc: "参考图结构复刻与商品替换", image: ossAssets.ecommerce.detail.gridB, type: "图像", time: "6/9 09:39" },
|
||||
{ title: "详情模块", desc: "功能卖点、参数和包装模块", image: ossAssets.ecommerce.detail.gridC, type: "图像", time: "6/8 21:20" },
|
||||
{ title: "平台素材", desc: "淘宝/天猫投放图批量生成", image: ossAssets.ecommerce.detail.gridD, type: "图像", time: "6/8 18:26" },
|
||||
];
|
||||
|
||||
function LocalAvatar({ session, size = "md" }: { session: WebUserSession; size?: "sm" | "md" | "lg" }) {
|
||||
const displayName = session.user.displayName || session.user.username || "用户";
|
||||
const label = displayName.trim().slice(0, 1).toUpperCase() || "用";
|
||||
@@ -75,9 +64,9 @@ function LocalAvatar({ session, size = "md" }: { session: WebUserSession; size?:
|
||||
|
||||
function LocalProfilePage({ session, balance, imageCount, videoCount, onBack, onBugFeedback, onLogout }: LocalProfilePageProps) {
|
||||
const displayName = session.user.displayName || session.user.username || "用户";
|
||||
const workCount = Math.max(imageCount + videoCount, profileWorks.length);
|
||||
const projectCount = Math.max(1, Math.round(workCount / 18));
|
||||
const assetCount = Math.max(1, Math.round(workCount / 20));
|
||||
const workCount = Math.max(imageCount + videoCount, 0);
|
||||
const projectCount = 0;
|
||||
const assetCount = 0;
|
||||
|
||||
return (
|
||||
<section className="local-profile-page">
|
||||
@@ -142,22 +131,15 @@ function LocalProfilePage({ session, balance, imageCount, videoCount, onBack, on
|
||||
<header>
|
||||
<div>
|
||||
<strong>代表作</strong>
|
||||
<span>最近完成的高质量生成内容</span>
|
||||
<span>后续将展示接口返回的真实作品</span>
|
||||
</div>
|
||||
<em>{workCount} 项</em>
|
||||
</header>
|
||||
<div className="local-profile-work-grid">
|
||||
{profileWorks.map((work) => (
|
||||
<article key={`${work.title}-${work.time}`} className="local-profile-work-card">
|
||||
<img src={work.image} alt="" />
|
||||
<div>
|
||||
<span>{work.type}</span>
|
||||
<strong>{work.title}</strong>
|
||||
<p>{work.desc}</p>
|
||||
<em>已完成 · {work.time}</em>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
<div className="local-profile-work-grid local-profile-work-grid--empty">
|
||||
<div className="local-profile-empty">
|
||||
<strong>暂无代表作数据</strong>
|
||||
<span>作品接口接入后,这里会显示你的真实生成内容。</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
@@ -184,7 +166,6 @@ function App() {
|
||||
const [sessionNotice, setSessionNotice] = useState<string | null>(null);
|
||||
const [profileMenuOpen, setProfileMenuOpen] = useState(false);
|
||||
const [currentPage, setCurrentPage] = useState<"workspace" | "profile">("workspace");
|
||||
const [workspaceKey, setWorkspaceKey] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
void loadDarkGreenTheme();
|
||||
@@ -339,7 +320,7 @@ function App() {
|
||||
const balance = Math.max(usage.balanceCents, 0) / 100;
|
||||
const displayName = session?.user.displayName || session?.user.username || "用户";
|
||||
const actualWorkCount = Math.max(usage.imageUsed + usage.videoUsed, 0);
|
||||
const shownWorkCount = Math.max(actualWorkCount, profileWorks.length);
|
||||
const shownWorkCount = actualWorkCount;
|
||||
|
||||
const avatarMenuStats = useMemo(
|
||||
() => [
|
||||
@@ -360,7 +341,6 @@ function App() {
|
||||
const handleOpenWorkspace = () => {
|
||||
setProfileMenuOpen(false);
|
||||
setCurrentPage("workspace");
|
||||
setWorkspaceKey((k) => k + 1);
|
||||
};
|
||||
|
||||
const handleBugFeedback = () => {
|
||||
@@ -447,17 +427,22 @@ function App() {
|
||||
</header>
|
||||
|
||||
<main className="ecommerce-standalone__content">
|
||||
{currentPage === "profile" && session ? (
|
||||
<LocalProfilePage
|
||||
session={session}
|
||||
balance={balance}
|
||||
imageCount={usage.imageUsed}
|
||||
videoCount={usage.videoUsed}
|
||||
onBack={handleOpenWorkspace}
|
||||
onBugFeedback={handleBugFeedback}
|
||||
onLogout={handleLogout}
|
||||
/>
|
||||
) : (
|
||||
{session ? (
|
||||
<div className="ecommerce-standalone__page" hidden={currentPage !== "profile"}>
|
||||
<LocalProfilePage
|
||||
session={session}
|
||||
balance={balance}
|
||||
imageCount={usage.imageUsed}
|
||||
videoCount={usage.videoUsed}
|
||||
onBack={handleOpenWorkspace}
|
||||
onBugFeedback={handleBugFeedback}
|
||||
onLogout={handleLogout}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
{/* 工作台常驻挂载,仅用 hidden 切换。切到个人中心时不卸载,
|
||||
生成任务、进度动画、已上传图片等本地状态全部保留,切回即继续。 */}
|
||||
<div className="ecommerce-standalone__page" hidden={Boolean(session) && currentPage === "profile"}>
|
||||
<ErrorBoundary>
|
||||
<Suspense
|
||||
fallback={
|
||||
@@ -468,7 +453,6 @@ function App() {
|
||||
}
|
||||
>
|
||||
<EcommercePage
|
||||
key={workspaceKey}
|
||||
projects={[]}
|
||||
isAuthenticated={Boolean(session)}
|
||||
onStartCreate={() => undefined}
|
||||
@@ -482,7 +466,7 @@ function App() {
|
||||
/>
|
||||
</Suspense>
|
||||
</ErrorBoundary>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{authOpen ? (
|
||||
|
||||
@@ -38,6 +38,20 @@ export interface SaveGenerationRecordResult {
|
||||
id: string;
|
||||
}
|
||||
|
||||
// 同一 clientRecordId 的保存去重:套图主流程、backgroundTaskRunner、useGenerationTasks
|
||||
// 三处都可能对同一条终态任务调用 saveGenerationRecord,SSE 重复推送 completed 时
|
||||
// 单个 poller 内也会重复触发。这里做客户端幂等:in-flight 合流 + 成功后短期拦截,
|
||||
// 避免后端在缺少去重时插入重复记录。
|
||||
const inFlightSaves = new Map<string, Promise<SaveGenerationRecordResult>>();
|
||||
const recentlySavedAt = new Map<string, number>();
|
||||
const SAVE_DEDUPE_WINDOW_MS = 60_000;
|
||||
|
||||
function pruneRecentlySaved(now: number): void {
|
||||
for (const [id, savedAt] of recentlySavedAt) {
|
||||
if (now - savedAt > SAVE_DEDUPE_WINDOW_MS) recentlySavedAt.delete(id);
|
||||
}
|
||||
}
|
||||
|
||||
function readPendingRecords(): SaveGenerationRecordInput[] {
|
||||
try {
|
||||
const raw = window.localStorage.getItem(PENDING_RECORDS_KEY);
|
||||
@@ -60,6 +74,36 @@ function writePendingRecord(input: SaveGenerationRecordInput): void {
|
||||
}
|
||||
|
||||
export async function saveGenerationRecord(input: SaveGenerationRecordInput): Promise<SaveGenerationRecordResult> {
|
||||
const now = Date.now();
|
||||
pruneRecentlySaved(now);
|
||||
|
||||
const recordId = input.clientRecordId;
|
||||
if (recordId) {
|
||||
const inFlight = inFlightSaves.get(recordId);
|
||||
if (inFlight) return inFlight;
|
||||
const savedAt = recentlySavedAt.get(recordId);
|
||||
if (savedAt !== undefined && now - savedAt <= SAVE_DEDUPE_WINDOW_MS) {
|
||||
// 终态记录只需落库一次;窗口内的重复调用直接视为已保存。
|
||||
return { source: "server", id: recordId };
|
||||
}
|
||||
}
|
||||
|
||||
const promise = saveGenerationRecordInternal(input);
|
||||
if (recordId) {
|
||||
inFlightSaves.set(recordId, promise);
|
||||
void promise
|
||||
.then((result) => {
|
||||
if (result.source === "server") recentlySavedAt.set(recordId, Date.now());
|
||||
})
|
||||
.catch(() => undefined)
|
||||
.finally(() => {
|
||||
inFlightSaves.delete(recordId);
|
||||
});
|
||||
}
|
||||
return promise;
|
||||
}
|
||||
|
||||
async function saveGenerationRecordInternal(input: SaveGenerationRecordInput): Promise<SaveGenerationRecordResult> {
|
||||
try {
|
||||
const response = await serverRequest<{ id?: string | number }>("ai/generation-records", {
|
||||
method: "POST",
|
||||
|
||||
@@ -156,6 +156,16 @@ const ecommerceInspirationRows = [
|
||||
},
|
||||
] as const;
|
||||
|
||||
// 把灵感卡片的标题 + 卖点要点合成一段可直接填入指令栏的提示词。
|
||||
const buildInspirationPrompt = (title: string, meta: string): string => {
|
||||
const points = meta
|
||||
.split(/[·、,,]/)
|
||||
.map((part) => part.trim())
|
||||
.filter(Boolean);
|
||||
const base = title.trim();
|
||||
return points.length ? `${base}。风格要点:${points.join("、")}。` : `${base}。`;
|
||||
};
|
||||
|
||||
const clampNumber = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
|
||||
|
||||
const normalizeHexColor = (value: string) => {
|
||||
@@ -304,6 +314,21 @@ interface CanvasNode {
|
||||
y: number;
|
||||
}
|
||||
|
||||
interface PreviewTouchPoint {
|
||||
id: number;
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
interface PreviewTouchGesture {
|
||||
mode: "none" | "pan" | "pinch";
|
||||
points: PreviewTouchPoint[];
|
||||
startOffset: { x: number; y: number };
|
||||
startZoom: number;
|
||||
startDistance: number;
|
||||
startCenter: { x: number; y: number };
|
||||
}
|
||||
|
||||
interface CloneSavedSetting {
|
||||
id: string;
|
||||
name: string;
|
||||
@@ -997,7 +1022,7 @@ const defaultCloneSetCounts: Record<CloneSetCountKey, number> = {
|
||||
};
|
||||
const minCloneSetTotal = 1;
|
||||
const maxCloneSetTotal = 16;
|
||||
const maxCloneProductImages = 7;
|
||||
const maxCloneProductImages = 20;
|
||||
const maxCloneReferenceImages = 20;
|
||||
const cloneVideoDurationMin = 5;
|
||||
const cloneVideoDurationMax = 45;
|
||||
@@ -1385,6 +1410,9 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
const [productSetRequirement, setProductSetRequirement] = useState("");
|
||||
const [productSetOutput, setProductSetOutput] = useState<ProductSetOutputKey>(defaultProductSetOutput);
|
||||
const [productSetStatus, setProductSetStatus] = useState<ProductSetStatus>("idle");
|
||||
// 套图/图像生成的真实进度(0-100):多张串行生成时按"已完成张数 + 当前张子进度"推进,
|
||||
// 替代进度条原先写死 50 导致卡在 75% 的假进度。
|
||||
const [generationProgress, setGenerationProgress] = useState(0);
|
||||
const [productSetResultImages, setProductSetResultImages] = useState<string[]>([]);
|
||||
const [isSetUploadDragging, setIsSetUploadDragging] = useState(false);
|
||||
const [selectedProductSetPreview, setSelectedProductSetPreview] = useState<ProductSetPreviewSelection | null>(null);
|
||||
@@ -1411,9 +1439,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
const [watermarkResultUrl, setWatermarkResultUrl] = useState<string | null>(null);
|
||||
const [watermarkProgress, setWatermarkProgress] = useState(0);
|
||||
const [translateImage, setTranslateImage] = useState<{ src: string; name: string; format: string } | null>(null);
|
||||
const [translateStatus, setTranslateStatus] = useState<"idle" | "processing" | "done">("idle");
|
||||
const [translateStatus, setTranslateStatus] = useState<"idle" | "processing" | "done" | "failed">("idle");
|
||||
const [isTranslateDragging, setIsTranslateDragging] = useState(false);
|
||||
const [translateLanguage, setTranslateLanguage] = useState("zh");
|
||||
const [translateResultUrl, setTranslateResultUrl] = useState<string | null>(null);
|
||||
const [imageWorkbenchImage, setImageWorkbenchImage] = useState<{ src: string; name: string; format: string } | null>(null);
|
||||
const [imageWorkbenchPrompt, setImageWorkbenchPrompt] = useState("");
|
||||
const [imageWorkbenchBrushSize, setImageWorkbenchBrushSize] = useState(50);
|
||||
@@ -1437,8 +1466,9 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
const [visibleComposerMenu, setVisibleComposerMenu] = useState<ComposerMenuKey | null>(null);
|
||||
const [isComposerMenuClosing, setIsComposerMenuClosing] = useState(false);
|
||||
const [composerPopoverLeft, setComposerPopoverLeft] = useState(0);
|
||||
const [composerPopoverTop, setComposerPopoverTop] = useState(0);
|
||||
const [isCommandHistoryCollapsed, setIsCommandHistoryCollapsed] = useState(true);
|
||||
const [inspirationPreview, setInspirationPreview] = useState<{ mediaUrl: string; mediaType: "image" | "video" } | null>(null);
|
||||
const [inspirationPreview, setInspirationPreview] = useState<{ mediaUrl: string; mediaType: "image" | "video"; prompt: string } | null>(null);
|
||||
const [isQuickPanelCollapsed, setIsQuickPanelCollapsed] = useState(false);
|
||||
const [openCloneModelSelect, setOpenCloneModelSelect] = useState<CloneModelSelectKey | null>(null);
|
||||
const [cloneModelSelectDropUp, setCloneModelSelectDropUp] = useState(false);
|
||||
@@ -1459,6 +1489,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
const [cloneVideoDuration, setCloneVideoDuration] = useState(10);
|
||||
const [cloneVideoSmart, setCloneVideoSmart] = useState(true);
|
||||
const [isCloneSettingsCollapsed, setIsCloneSettingsCollapsed] = useState(false);
|
||||
const [isCloneConversationCollapsed, setIsCloneConversationCollapsed] = useState(false);
|
||||
const [previewZoom, setPreviewZoom] = useState(1);
|
||||
const quickSetSelectTimerRef = useRef<number | null>(null);
|
||||
const openQuickSetSelectRef = useRef<CloneBasicSelectKey | null>(null);
|
||||
@@ -1478,6 +1509,14 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
});
|
||||
const previewTouchGestureRef = useRef<PreviewTouchGesture>({
|
||||
mode: "none",
|
||||
points: [],
|
||||
startOffset: { x: 0, y: 0 },
|
||||
startZoom: 1,
|
||||
startDistance: 0,
|
||||
startCenter: { x: 0, y: 0 },
|
||||
});
|
||||
const nodeDragRef = useRef<{ active: boolean; nodeId: string; startX: number; startY: number; originX: number; originY: number }>({
|
||||
active: false,
|
||||
nodeId: "",
|
||||
@@ -1519,6 +1558,114 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
[previewOffset.x, previewOffset.y, previewZoom],
|
||||
);
|
||||
|
||||
const updatePreviewTransform = (nextZoom: number, nextOffset: { x: number; y: number }) => {
|
||||
previewZoomRef.current = nextZoom;
|
||||
previewOffsetRef.current = nextOffset;
|
||||
setPreviewZoom(nextZoom);
|
||||
setPreviewOffset(nextOffset);
|
||||
};
|
||||
|
||||
const getPreviewGestureDistance = (points: PreviewTouchPoint[]) => {
|
||||
if (points.length < 2) return 0;
|
||||
return Math.hypot(points[0]!.x - points[1]!.x, points[0]!.y - points[1]!.y);
|
||||
};
|
||||
|
||||
const getPreviewGestureCenter = (points: PreviewTouchPoint[]) => {
|
||||
if (points.length < 2) return points[0] ? { x: points[0].x, y: points[0].y } : { x: 0, y: 0 };
|
||||
return {
|
||||
x: (points[0]!.x + points[1]!.x) / 2,
|
||||
y: (points[0]!.y + points[1]!.y) / 2,
|
||||
};
|
||||
};
|
||||
|
||||
const isPreviewTouchInteractiveTarget = (target: HTMLElement | null) =>
|
||||
Boolean(target?.closest(".ecom-command-composer-wrap, .clone-ai-preview-header, .clone-ai-source-corner-action, input, textarea, select, a, button"));
|
||||
|
||||
const startPreviewTouchGesture = (event: ReactPointerEvent<HTMLElement>) => {
|
||||
if (event.pointerType === "mouse" || isPreviewTouchInteractiveTarget(event.target as HTMLElement | null)) return;
|
||||
event.preventDefault();
|
||||
event.currentTarget.setPointerCapture(event.pointerId);
|
||||
const points = [
|
||||
...previewTouchGestureRef.current.points.filter((point) => point.id !== event.pointerId),
|
||||
{ id: event.pointerId, x: event.clientX, y: event.clientY },
|
||||
].slice(-2);
|
||||
const mode = points.length >= 2 ? "pinch" : "pan";
|
||||
previewTouchGestureRef.current = {
|
||||
mode,
|
||||
points,
|
||||
startOffset: previewOffsetRef.current,
|
||||
startZoom: previewZoomRef.current,
|
||||
startDistance: getPreviewGestureDistance(points),
|
||||
startCenter: getPreviewGestureCenter(points),
|
||||
};
|
||||
event.currentTarget.classList.add("is-touch-panning");
|
||||
};
|
||||
|
||||
const movePreviewTouchGesture = (event: ReactPointerEvent<HTMLElement>) => {
|
||||
const gesture = previewTouchGestureRef.current;
|
||||
if (gesture.mode === "none" || event.pointerType === "mouse") return;
|
||||
event.preventDefault();
|
||||
const points = gesture.points.map((point) => point.id === event.pointerId ? { ...point, x: event.clientX, y: event.clientY } : point);
|
||||
if (!points.some((point) => point.id === event.pointerId)) return;
|
||||
|
||||
if (gesture.mode === "pinch" && points.length >= 2 && gesture.startDistance > 0) {
|
||||
const rect = event.currentTarget.getBoundingClientRect();
|
||||
const center = getPreviewGestureCenter(points);
|
||||
const zoomRatio = getPreviewGestureDistance(points) / gesture.startDistance;
|
||||
const nextZoom = Math.min(2, Math.max(0.25, gesture.startZoom * zoomRatio));
|
||||
const startCenterX = gesture.startCenter.x - rect.left;
|
||||
const startCenterY = gesture.startCenter.y - rect.top;
|
||||
const currentCenterX = center.x - rect.left;
|
||||
const currentCenterY = center.y - rect.top;
|
||||
const contentX = (startCenterX - gesture.startOffset.x) / gesture.startZoom;
|
||||
const contentY = (startCenterY - gesture.startOffset.y) / gesture.startZoom;
|
||||
updatePreviewTransform(nextZoom, {
|
||||
x: currentCenterX - contentX * nextZoom,
|
||||
y: currentCenterY - contentY * nextZoom,
|
||||
});
|
||||
} else {
|
||||
const point = points[0]!;
|
||||
const startPoint = gesture.points[0]!;
|
||||
updatePreviewTransform(gesture.startZoom, {
|
||||
x: gesture.startOffset.x + point.x - startPoint.x,
|
||||
y: gesture.startOffset.y + point.y - startPoint.y,
|
||||
});
|
||||
}
|
||||
|
||||
previewTouchGestureRef.current = { ...gesture, points };
|
||||
};
|
||||
|
||||
const stopPreviewTouchGesture = (event: ReactPointerEvent<HTMLElement>) => {
|
||||
const gesture = previewTouchGestureRef.current;
|
||||
if (event.pointerType === "mouse" || gesture.mode === "none") return;
|
||||
const points = gesture.points.filter((point) => point.id !== event.pointerId);
|
||||
if (points.length) {
|
||||
previewTouchGestureRef.current = {
|
||||
mode: "pan",
|
||||
points,
|
||||
startOffset: previewOffsetRef.current,
|
||||
startZoom: previewZoomRef.current,
|
||||
startDistance: 0,
|
||||
startCenter: getPreviewGestureCenter(points),
|
||||
};
|
||||
} else {
|
||||
previewTouchGestureRef.current = {
|
||||
mode: "none",
|
||||
points: [],
|
||||
startOffset: previewOffsetRef.current,
|
||||
startZoom: previewZoomRef.current,
|
||||
startDistance: 0,
|
||||
startCenter: { x: 0, y: 0 },
|
||||
};
|
||||
event.currentTarget.classList.remove("is-touch-panning");
|
||||
}
|
||||
try {
|
||||
event.currentTarget.releasePointerCapture(event.pointerId);
|
||||
} catch {
|
||||
// Pointer capture can already be released by the browser after cancel.
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const container = previewSurfaceRef.current;
|
||||
if (!container) return undefined;
|
||||
@@ -1628,8 +1775,43 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
onAuxClick: (event: ReactMouseEvent<HTMLElement>) => {
|
||||
if (event.button === 1) event.preventDefault();
|
||||
},
|
||||
onPointerDown: startPreviewTouchGesture,
|
||||
onPointerMove: movePreviewTouchGesture,
|
||||
onPointerUp: stopPreviewTouchGesture,
|
||||
onPointerCancel: stopPreviewTouchGesture,
|
||||
});
|
||||
|
||||
const startCanvasNodeDrag = (event: ReactPointerEvent<HTMLElement>, node: CanvasNode) => {
|
||||
if (event.button !== 0 || event.pointerType === "mouse") return;
|
||||
if ((event.target as HTMLElement | null)?.closest("button, a, input, textarea, select")) return;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
event.currentTarget.setPointerCapture(event.pointerId);
|
||||
nodeDragRef.current = { active: true, nodeId: node.id, startX: event.clientX, startY: event.clientY, originX: node.x, originY: node.y };
|
||||
};
|
||||
|
||||
const moveCanvasNodeDrag = (event: ReactPointerEvent<HTMLElement>, nodeId: string) => {
|
||||
const drag = nodeDragRef.current;
|
||||
if (!drag.active || drag.nodeId !== nodeId || event.pointerType === "mouse") return;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const zoom = previewZoomRef.current;
|
||||
const dx = (event.clientX - drag.startX) / zoom;
|
||||
const dy = (event.clientY - drag.startY) / zoom;
|
||||
setCanvasNodes((prev) => prev.map((node) => node.id === nodeId ? { ...node, x: drag.originX + dx, y: drag.originY + dy } : node));
|
||||
};
|
||||
|
||||
const stopCanvasNodeDrag = (event: ReactPointerEvent<HTMLElement>, nodeId: string) => {
|
||||
if (nodeDragRef.current.nodeId !== nodeId || event.pointerType === "mouse") return;
|
||||
nodeDragRef.current = { ...nodeDragRef.current, active: false };
|
||||
event.stopPropagation();
|
||||
try {
|
||||
event.currentTarget.releasePointerCapture(event.pointerId);
|
||||
} catch {
|
||||
// Pointer capture can already be released by the browser after cancel.
|
||||
}
|
||||
};
|
||||
|
||||
const handlePreviewWheel = (event: React.WheelEvent<HTMLElement>) => {
|
||||
if (!event.currentTarget) return;
|
||||
const container = event.currentTarget as HTMLElement;
|
||||
@@ -2082,6 +2264,15 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
stopWatermarkProgress();
|
||||
setWatermarkProgress(100);
|
||||
toast.success("去水印处理完成");
|
||||
void saveUnifiedEcommerceGenerationRecord({
|
||||
clientRecordId: crypto.randomUUID(),
|
||||
title: `去水印 ${watermarkImage.name || ""}`.trim(),
|
||||
mode: "watermark",
|
||||
taskIds: [taskId],
|
||||
sourceImages: [{ url: imageUrl, label: watermarkImage.name || "watermark-source" }],
|
||||
results: [{ url: persistedUrl, label: "去水印结果", mediaType: "image", taskId }],
|
||||
createdAt: new Date().toISOString(),
|
||||
});
|
||||
} else {
|
||||
setWatermarkStatus("failed");
|
||||
stopWatermarkProgress();
|
||||
@@ -2128,6 +2319,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
}
|
||||
setActiveQuickTool(null);
|
||||
setTranslateStatus("idle");
|
||||
setTranslateResultUrl(null);
|
||||
setTranslateImage((current) => {
|
||||
if (current?.src) URL.revokeObjectURL(current.src);
|
||||
return null;
|
||||
@@ -2145,6 +2337,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
return nextImage;
|
||||
});
|
||||
setTranslateStatus("idle");
|
||||
setTranslateResultUrl(null);
|
||||
setActiveQuickTool("translate");
|
||||
};
|
||||
|
||||
@@ -2154,6 +2347,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
translateProcessTimeoutRef.current = null;
|
||||
}
|
||||
setTranslateStatus("idle");
|
||||
setTranslateResultUrl(null);
|
||||
setTranslateImage((current) => {
|
||||
if (current?.src) URL.revokeObjectURL(current.src);
|
||||
return null;
|
||||
@@ -2182,28 +2376,76 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
return nextImage;
|
||||
});
|
||||
setTranslateStatus("idle");
|
||||
setTranslateResultUrl(null);
|
||||
toast.success("图片已导入");
|
||||
};
|
||||
|
||||
const handleTranslateGenerate = () => {
|
||||
const handleTranslateGenerate = async () => {
|
||||
if (!translateImage || translateStatus === "processing") return;
|
||||
if (translateProcessTimeoutRef.current !== null) window.clearTimeout(translateProcessTimeoutRef.current);
|
||||
const targetLabel = translateLanguageOptions.find((option) => option.value === translateLanguage)?.label || "中文";
|
||||
setTranslateStatus("processing");
|
||||
translateProcessTimeoutRef.current = window.setTimeout(() => {
|
||||
translateProcessTimeoutRef.current = null;
|
||||
setTranslateStatus("done");
|
||||
toast.success("图片翻译完成");
|
||||
}, 900);
|
||||
setTranslateResultUrl(null);
|
||||
|
||||
try {
|
||||
const sourceBlob = await fetch(translateImage.src).then((res) => res.blob());
|
||||
const sourceMime = normalizeEcommerceImageMime(sourceBlob.type || "image/png");
|
||||
const { url: imageUrl } = await aiGenerationClient.uploadAssetBinary(sourceBlob, {
|
||||
name: `translate-source-${Date.now()}.png`,
|
||||
mimeType: sourceMime,
|
||||
scope: ecommerceOssScopes.productSource,
|
||||
});
|
||||
|
||||
const prompt = `将图片中的所有文字翻译成${targetLabel},保持原有的排版、字体风格、位置和整体设计不变,只替换文字内容。`;
|
||||
const { taskId } = await aiGenerationClient.createImageEditTask({
|
||||
imageUrl,
|
||||
function: "description_edit",
|
||||
prompt,
|
||||
});
|
||||
|
||||
const resultUrl = await waitForTask(taskId, {
|
||||
kind: "image",
|
||||
abortRef: { current: false },
|
||||
onProgress: () => {},
|
||||
});
|
||||
|
||||
if (resultUrl) {
|
||||
const persistedUrl = await persistGeneratedImageUrl(resultUrl, ecommerceOssScopes.cloneResult("translate"), "ecommerce-translate");
|
||||
setTranslateResultUrl(persistedUrl);
|
||||
setTranslateStatus("done");
|
||||
toast.success("图片翻译完成");
|
||||
void saveUnifiedEcommerceGenerationRecord({
|
||||
clientRecordId: crypto.randomUUID(),
|
||||
title: `图片翻译(${targetLabel}) ${translateImage.name || ""}`.trim(),
|
||||
mode: "translate",
|
||||
prompt,
|
||||
taskIds: [taskId],
|
||||
sourceImages: [{ url: imageUrl, label: translateImage.name || "translate-source" }],
|
||||
results: [{ url: persistedUrl, label: "翻译结果", mediaType: "image", taskId }],
|
||||
config: { targetLanguage: translateLanguage },
|
||||
createdAt: new Date().toISOString(),
|
||||
});
|
||||
} else {
|
||||
setTranslateStatus("failed");
|
||||
toast.error("翻译未返回结果");
|
||||
}
|
||||
} catch (err) {
|
||||
setTranslateStatus("failed");
|
||||
if (err instanceof ServerRequestError && err.status === 402) {
|
||||
toast.error("余额不足,请充值后继续");
|
||||
} else {
|
||||
toast.error(err instanceof Error ? err.message : "图片翻译失败");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleTranslateDownload = () => {
|
||||
if (!translateImage || translateStatus !== "done") {
|
||||
if (!translateResultUrl || translateStatus !== "done") {
|
||||
toast.info("请先完成图片翻译");
|
||||
return;
|
||||
}
|
||||
const link = document.createElement("a");
|
||||
const safeName = (translateImage.name || "translate-result").replace(/\.[^.]+$/, "").replace(/[\\/:*?"<>|]+/g, "-");
|
||||
link.href = translateImage.src;
|
||||
const safeName = (translateImage?.name || "translate-result").replace(/\.[^.]+$/, "").replace(/[\\/:*?"<>|]+/g, "-");
|
||||
link.href = translateResultUrl;
|
||||
link.download = `${safeName || "translate-result"}-翻译.png`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
@@ -2402,6 +2644,17 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
stopWorkbenchProgress();
|
||||
setImageWorkbenchProgress(100);
|
||||
toast.success("局部重绘已完成");
|
||||
void saveUnifiedEcommerceGenerationRecord({
|
||||
clientRecordId: crypto.randomUUID(),
|
||||
title: imageWorkbenchPrompt.trim() || `图片修改 ${imageWorkbenchImage.name || ""}`.trim(),
|
||||
mode: "inpaint",
|
||||
prompt: imageWorkbenchPrompt || undefined,
|
||||
taskIds: [taskId],
|
||||
sourceImages: [{ url: imageUrl, label: imageWorkbenchImage.name || "inpaint-source" }],
|
||||
results: [{ url: persistedUrl, label: "局部重绘结果", mediaType: "image", taskId }],
|
||||
config: { ratio: imageWorkbenchRatio },
|
||||
createdAt: new Date().toISOString(),
|
||||
});
|
||||
} else {
|
||||
setImageWorkbenchStatus("failed");
|
||||
stopWorkbenchProgress();
|
||||
@@ -3557,6 +3810,9 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
|
||||
const generatedUrls: string[] = [];
|
||||
const stamp = Date.now();
|
||||
const totalCount = Math.max(1, cloneSetCountKeys.reduce((sum, key) => sum + counts[key], 0));
|
||||
let completedCount = 0;
|
||||
setGenerationProgress(0);
|
||||
|
||||
for (const countKey of cloneSetCountKeys) {
|
||||
if (imageAbortRef.current.current) break;
|
||||
@@ -3580,8 +3836,14 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
let resultUrl: string | null = null;
|
||||
try {
|
||||
resultUrl = await waitForTask(taskId, {
|
||||
kind: "image",
|
||||
abortRef: imageAbortRef.current,
|
||||
onProgress: () => {},
|
||||
onProgress: (event) => {
|
||||
// 整体进度 = (已完成张数 + 当前张子进度) / 总张数。
|
||||
const sub = Math.max(0, Math.min(100, Number(event.progress) || 0));
|
||||
const overall = ((completedCount + sub / 100) / totalCount) * 100;
|
||||
setGenerationProgress(Math.round(Math.min(99, overall)));
|
||||
},
|
||||
});
|
||||
} finally {
|
||||
untrackEcommerceTask(taskId);
|
||||
@@ -3597,6 +3859,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
generatedUrls.push("");
|
||||
imageGen.updateTask(storeId, { status: "failed", error: "生成未返回结果" });
|
||||
}
|
||||
completedCount += 1;
|
||||
setGenerationProgress(Math.round(Math.min(99, (completedCount / totalCount) * 100)));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3648,6 +3912,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
|
||||
const prompt = buildEcommerceImagePrompt(outputKey, userText, pPlatform, pRatio, pLanguage, pMarket, tryOnOptions);
|
||||
const stamp = Date.now();
|
||||
setGenerationProgress(0);
|
||||
|
||||
const { taskId } = await aiGenerationClient.createImageTask({
|
||||
prompt,
|
||||
@@ -3663,8 +3928,12 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
let resultUrl: string | null = null;
|
||||
try {
|
||||
resultUrl = await waitForTask(taskId, {
|
||||
kind: "image",
|
||||
abortRef: imageAbortRef.current,
|
||||
onProgress: () => {},
|
||||
onProgress: (event) => {
|
||||
const sub = Math.max(0, Math.min(100, Number(event.progress) || 0));
|
||||
setGenerationProgress(Math.round(Math.min(99, sub)));
|
||||
},
|
||||
});
|
||||
} finally {
|
||||
untrackEcommerceTask(taskId);
|
||||
@@ -4501,7 +4770,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
<section className="product-set-empty-preview" aria-live="polite">
|
||||
{productSetStatus === "generating" ? <LoadingOutlined /> : <FileImageOutlined />}
|
||||
<strong>{productSetStatus === "generating" ? "正在生成" : "等待生成"}</strong>
|
||||
{productSetStatus === "generating" ? <EcommerceProgressBar status="generating" onCancel={handleCancelGenerate} label="商品套图" /> : null}
|
||||
{productSetStatus === "generating" ? <EcommerceProgressBar status="generating" progress={generationProgress} onCancel={handleCancelGenerate} label="商品套图" /> : null}
|
||||
<span>{productSetStatus === "generating" ? "AI 正在整理主图、场景、细节与卖点图。" : "上传商品原图并填写信息后,AI 将为您生成专业的电商商品图。"}</span>
|
||||
</section>
|
||||
)}
|
||||
@@ -4554,7 +4823,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
language: item,
|
||||
countries: marketLanguageOptions.filter((option) => option.languages.includes(item)).map((option) => option.country),
|
||||
}));
|
||||
const composerPopoverStyle: CSSProperties = { left: composerPopoverLeft };
|
||||
const composerPopoverStyle = {
|
||||
"--composer-popover-left": `${composerPopoverLeft}px`,
|
||||
"--composer-popover-top": `${composerPopoverTop}px`,
|
||||
} as CSSProperties;
|
||||
const menuToRender = composerMenu ?? visibleComposerMenu;
|
||||
if (!menuToRender) return null;
|
||||
const popoverClosingClass = !composerMenu && isComposerMenuClosing ? " is-closing" : "";
|
||||
@@ -4735,7 +5007,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
const toggleComposerMenu = (menuKey: ComposerMenuKey, event: ReactMouseEvent<HTMLButtonElement>) => {
|
||||
const composerRect = event.currentTarget.closest(".clone-ai-input-wrapper.ecom-command-composer")?.getBoundingClientRect();
|
||||
const buttonRect = event.currentTarget.getBoundingClientRect();
|
||||
setComposerPopoverLeft(Math.max(0, buttonRect.left - (composerRect?.left ?? 0)));
|
||||
const composerLeft = composerRect?.left ?? buttonRect.left;
|
||||
const composerTop = composerRect?.top ?? buttonRect.top;
|
||||
setComposerPopoverLeft(Math.max(0, buttonRect.left - composerLeft));
|
||||
setComposerPopoverTop(Math.max(0, buttonRect.bottom - composerTop + 8));
|
||||
setComposerMenu((menu) => (menu === menuKey ? null : menuKey));
|
||||
};
|
||||
|
||||
@@ -4772,6 +5047,24 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
strip.scrollBy({ left: direction * Math.max(280, strip.clientWidth * 0.78), behavior: "smooth" });
|
||||
};
|
||||
|
||||
const applyInspirationPrompt = (prompt: string) => {
|
||||
const nextValue = prompt.slice(0, 500);
|
||||
// 回到主指令栏(关闭可能打开的快捷工具页),把提示词填入并聚焦。
|
||||
setActiveQuickTool(null);
|
||||
setRequirement(nextValue);
|
||||
syncRequirementMentionQuery(nextValue, nextValue.length);
|
||||
setInspirationPreview(null);
|
||||
requestAnimationFrame(() => {
|
||||
const textarea = requirementTextareaRef.current;
|
||||
if (textarea) {
|
||||
textarea.focus();
|
||||
textarea.setSelectionRange(nextValue.length, nextValue.length);
|
||||
textarea.scrollIntoView({ behavior: "smooth", block: "center" });
|
||||
}
|
||||
});
|
||||
toast.success("提示词已填入指令栏");
|
||||
};
|
||||
|
||||
const inspirationPreviewOverlay =
|
||||
inspirationPreview && typeof document !== "undefined"
|
||||
? createPortal(
|
||||
@@ -4790,6 +5083,18 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
) : (
|
||||
<img src={inspirationPreview.mediaUrl} alt="" className="ecom-inspiration-preview__media" />
|
||||
)}
|
||||
{inspirationPreview.prompt ? (
|
||||
<div className="ecom-inspiration-preview__actions">
|
||||
<button
|
||||
type="button"
|
||||
className="ecom-inspiration-preview__use-prompt"
|
||||
onClick={() => applyInspirationPrompt(inspirationPreview.prompt)}
|
||||
>
|
||||
<EditOutlined />
|
||||
<span>使用此提示词</span>
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
@@ -4812,6 +5117,9 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
<button type="button" onClick={() => setPreviewZoom((z) => Math.max(0.25, z - 0.1))} disabled={previewZoom <= 0.25} aria-label="缩小">-</button>
|
||||
<span>{Math.round(previewZoom * 100)}%</span>
|
||||
<button type="button" onClick={() => setPreviewZoom((z) => Math.min(2, z + 0.1))} disabled={previewZoom >= 2} aria-label="放大">+</button>
|
||||
{activeHistoryRecordId ? (
|
||||
<button type="button" onClick={() => { setPreviewZoom(1); setPreviewOffset({ x: 0, y: 0 }); }} aria-label="重置画布">重置</button>
|
||||
) : null}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -4929,7 +5237,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
<>
|
||||
<LoadingOutlined style={{ fontSize: 28 }} />
|
||||
<strong>正在生成</strong>
|
||||
<EcommerceProgressBar status="generating" onCancel={handleCancelGenerate} label={`${selectedCloneOutput.label}生成`} />
|
||||
<EcommerceProgressBar status="generating" progress={generationProgress} onCancel={handleCancelGenerate} label={`${selectedCloneOutput.label}生成`} />
|
||||
<span>AI 正在为 {platform} / {market} 整理{selectedCloneOutput.label}。</span>
|
||||
</>
|
||||
) : status === "failed" ? (
|
||||
@@ -4960,6 +5268,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
data-mode={node.mode}
|
||||
data-node-id={node.id}
|
||||
style={{ transform: `translate(${node.x}px, ${node.y}px)` }}
|
||||
onPointerDown={(event) => startCanvasNodeDrag(event, node)}
|
||||
onPointerMove={(event) => moveCanvasNodeDrag(event, node.id)}
|
||||
onPointerUp={(event) => stopCanvasNodeDrag(event, node.id)}
|
||||
onPointerCancel={(event) => stopCanvasNodeDrag(event, node.id)}
|
||||
>
|
||||
<div
|
||||
className="clone-ai-node-drag-handle"
|
||||
@@ -4985,21 +5297,34 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
}}
|
||||
/>
|
||||
{node.sourceImage ? (
|
||||
<button
|
||||
type="button"
|
||||
className="clone-ai-main-result"
|
||||
onClick={() => openProductSetPreview({ src: node.sourceImage!, label: "原图素材" })}
|
||||
>
|
||||
<img src={node.sourceImage} alt="原图素材" />
|
||||
</button>
|
||||
<div className="clone-ai-source-stack">
|
||||
<button
|
||||
type="button"
|
||||
className="clone-ai-source-corner-action"
|
||||
onClick={() => openProductSetPreview({ src: node.sourceImage!, label: "原图素材" })}
|
||||
>
|
||||
原图素材
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="clone-ai-main-result"
|
||||
aria-label="预览原图素材"
|
||||
onClick={() => openProductSetPreview({ src: node.sourceImage!, label: "原图素材" })}
|
||||
>
|
||||
<img src={node.sourceImage} alt="原图素材" />
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="clone-ai-flow-arrow" aria-hidden="true" />
|
||||
<div className="clone-ai-result-grid result-reveal">
|
||||
{node.results.map((card) => (
|
||||
<button key={card.id} type="button" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(card, { nodeId: node.id, removable: true })}>
|
||||
<img src={card.src} alt={card.label} />
|
||||
</button>
|
||||
))}
|
||||
<div className="clone-ai-result-stack">
|
||||
<span className="clone-ai-node-label">{node.mode === "set" ? "套图" : node.mode === "detail" ? "详情图" : node.mode === "model" ? "模特图" : node.mode === "hot" ? "爆款图" : node.mode}</span>
|
||||
<div className="clone-ai-result-grid result-reveal">
|
||||
{node.results.map((card) => (
|
||||
<button key={card.id} type="button" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(card, { nodeId: node.id, removable: true })}>
|
||||
<img src={card.src} alt={card.label} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
@@ -5015,7 +5340,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
<section className="clone-ai-empty-state" aria-live="polite">
|
||||
{status === "generating" ? <LoadingOutlined /> : status === "failed" ? <FrownOutlined /> : <FileImageOutlined />}
|
||||
<strong>{status === "generating" ? "正在生成" : status === "failed" ? "生成失败" : "等待生成"}</strong>
|
||||
{status === "generating" ? <EcommerceProgressBar status="generating" onCancel={handleCancelGenerate} label={`${selectedCloneOutput.label}生成`} /> : null}
|
||||
{status === "generating" ? <EcommerceProgressBar status="generating" progress={generationProgress} onCancel={handleCancelGenerate} label={`${selectedCloneOutput.label}生成`} /> : null}
|
||||
<span>
|
||||
{status === "generating"
|
||||
? "AI 正在为 " + platform + " / " + market + " 整理" + selectedCloneOutput.label + "。"
|
||||
@@ -5087,19 +5412,26 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
</div>
|
||||
<div className="clone-ai-input-wrapper ecom-command-composer">
|
||||
{productImages.length ? (
|
||||
<div className="ecom-command-asset-popover" aria-label="已上传素材">
|
||||
<div className="ecom-command-asset-popover" aria-label={`已上传素材,${productImages.length}/${maxCloneProductImages}张`}>
|
||||
<button
|
||||
type="button"
|
||||
className="ecom-command-asset-add"
|
||||
onClick={() => productImages.length < maxCloneProductImages && productInputRef.current?.click()}
|
||||
disabled={productImages.length >= maxCloneProductImages}
|
||||
aria-label={productImages.length >= maxCloneProductImages ? `最多上传${maxCloneProductImages}张素材` : "继续上传素材"}
|
||||
title={productImages.length >= maxCloneProductImages ? `最多上传 ${maxCloneProductImages} 张素材` : `继续上传素材 ${productImages.length}/${maxCloneProductImages}`}
|
||||
>
|
||||
<span aria-hidden="true">+</span>
|
||||
<small>{productImages.length >= maxCloneProductImages ? "已满" : "上传"}</small>
|
||||
</button>
|
||||
{productImages.map((image) => (
|
||||
<figure key={image.id} className="ecom-command-asset-thumb">
|
||||
<img src={image.src} alt={image.name || "上传图片"} />
|
||||
<span className="ecom-command-asset-zoom" aria-hidden="true">
|
||||
<img src={image.src} alt="" />
|
||||
</span>
|
||||
<button type="button" onClick={() => removeProductImage(image.id)} aria-label="删除图片">
|
||||
<DeleteOutlined />
|
||||
</button>
|
||||
</figure>
|
||||
))}
|
||||
<button type="button" className="ecom-command-asset-add" onClick={() => productInputRef.current?.click()} aria-label="继续上传">+</button>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="ecom-command-option-row ecom-command-option-row--settings">
|
||||
@@ -5210,7 +5542,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
</div>
|
||||
<div className="ecom-inspiration-strip" tabIndex={0}>
|
||||
{row.cards.map((card, index) => (
|
||||
<article key={card.title} className="ecom-inspiration-card" onClick={() => setInspirationPreview({ mediaUrl: card.mediaUrl, mediaType: card.mediaType })}>
|
||||
<article key={card.title} className="ecom-inspiration-card" onClick={() => setInspirationPreview({ mediaUrl: card.mediaUrl, mediaType: card.mediaType, prompt: buildInspirationPrompt(card.title, card.meta) })}>
|
||||
<div className="ecom-inspiration-card__visual" aria-hidden="true">
|
||||
{card.mediaType === "video" ? (
|
||||
<video src={card.mediaUrl} muted playsInline loop autoPlay preload="metadata" />
|
||||
@@ -6122,13 +6454,19 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
<strong>正在翻译</strong>
|
||||
<em>AI 正在识别并翻译图片中的文字</em>
|
||||
</div>
|
||||
) : translateStatus === "done" ? (
|
||||
) : translateStatus === "done" && translateResultUrl ? (
|
||||
<>
|
||||
<img src={translateImage.src} alt="翻译结果" />
|
||||
<img src={translateResultUrl} alt="翻译结果" />
|
||||
<button type="button" className="ecom-watermark-zoom" aria-label="查看大图">
|
||||
<QuestionCircleOutlined />
|
||||
</button>
|
||||
</>
|
||||
) : translateStatus === "failed" ? (
|
||||
<div className="ecom-watermark-empty">
|
||||
<GlobalOutlined />
|
||||
<strong>翻译失败</strong>
|
||||
<em>请重试或更换图片</em>
|
||||
</div>
|
||||
) : (
|
||||
<div className="ecom-watermark-empty">
|
||||
<GlobalOutlined />
|
||||
@@ -6500,10 +6838,34 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
)
|
||||
: clonePreview
|
||||
: placeholderPreview;
|
||||
const isMainCloneWorkspace = isCloneTool && !isSmartCutoutTool && !isQuickDetailTool && !isWatermarkTool && !isTranslateTool && !isImageEditTool;
|
||||
const isRecordDetailWorkspace = isMainCloneWorkspace && Boolean(activeHistoryRecordId);
|
||||
const currentResultCount = canvasNodes.reduce((count, node) => count + node.results.length, 0);
|
||||
const activeHistoryRecord = activeHistoryRecordId ? ecommerceHistoryRecords.find((record) => record.id === activeHistoryRecordId) : null;
|
||||
const currentResultThumbs = canvasNodes.flatMap((node) => node.results).slice(0, 6);
|
||||
const activeHistoryImageIds = new Set((activeHistoryRecord?.productImages ?? []).map((image) => image.id));
|
||||
const historyConversationImages = activeHistoryRecord?.productImages?.length ? activeHistoryRecord.productImages : productImages;
|
||||
const newConversationImages = activeHistoryRecord ? productImages.filter((image) => !activeHistoryImageIds.has(image.id)) : [];
|
||||
const historyRequirementText = activeHistoryRecord?.requirement?.trim() || requirement.trim();
|
||||
const newRequirementText = requirement.trim() && requirement.trim() !== historyRequirementText
|
||||
? requirement.trim()
|
||||
: "继续上传素材,准备下一轮生成。";
|
||||
const historyRequirementMeta = [
|
||||
{ label: "平台", value: activeHistoryRecord?.platform || platform },
|
||||
{ label: "语种", value: activeHistoryRecord?.language || language },
|
||||
{ label: "比例", value: formatRatioDisplayValue(activeHistoryRecord?.ratio || ratio) },
|
||||
{ label: "设置", value: composerSettingLabel },
|
||||
];
|
||||
const currentRequirementMeta = [
|
||||
{ label: "平台", value: platform },
|
||||
{ label: "语种", value: language },
|
||||
{ label: "比例", value: formatRatioDisplayValue(ratio) },
|
||||
{ label: "设置", value: composerSettingLabel },
|
||||
];
|
||||
|
||||
return (
|
||||
<section
|
||||
className={`product-clone-page page-motion${isCloneTool && isCloneSettingsCollapsed ? " is-settings-collapsed" : ""}${isCloneTool && isCommandHistoryCollapsed ? " is-history-collapsed" : ""}${isCloneTool && activeHistoryRecordId ? " is-history-detail" : ""}${isSmartCutoutTool ? " is-smart-cutout-page" : ""}${isQuickDetailTool ? " is-quick-set-page" : ""}${isWatermarkTool ? " is-watermark-page" : ""}${isTranslateTool ? " is-translate-page" : ""}${isImageEditTool ? " is-image-workbench-page" : ""}`}
|
||||
className={`product-clone-page page-motion${isCloneTool && isCloneSettingsCollapsed ? " is-settings-collapsed" : ""}${isCloneTool && isCommandHistoryCollapsed ? " is-history-collapsed" : ""}${isRecordDetailWorkspace && isCloneConversationCollapsed ? " is-conversation-collapsed" : ""}${isRecordDetailWorkspace ? " is-history-detail" : ""}${isSmartCutoutTool ? " is-smart-cutout-page" : ""}${isQuickDetailTool ? " is-quick-set-page" : ""}${isWatermarkTool ? " is-watermark-page" : ""}${isTranslateTool ? " is-translate-page" : ""}${isImageEditTool ? " is-image-workbench-page" : ""}`}
|
||||
data-tool={activeTool}
|
||||
aria-label={pageLabel}
|
||||
>
|
||||
@@ -6541,6 +6903,108 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
</button>
|
||||
) : null}
|
||||
|
||||
{isRecordDetailWorkspace ? (
|
||||
<>
|
||||
<aside className="clone-ai-conversation-panel" aria-label="AI 对话">
|
||||
<header className="clone-ai-conversation-head">
|
||||
<div>
|
||||
<strong>{activeHistoryRecord?.title || "生成详情"}</strong>
|
||||
<span>{selectedCloneOutput.label} · {platform} · {language}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsCloneConversationCollapsed(true)}
|
||||
aria-label="收起对话"
|
||||
title="收起对话"
|
||||
>
|
||||
<MenuFoldOutlined />
|
||||
</button>
|
||||
</header>
|
||||
<div className="clone-ai-conversation-body">
|
||||
<section className="clone-ai-chat-message clone-ai-chat-message--user">
|
||||
<span>需求</span>
|
||||
<p>{historyRequirementText || "上传商品素材,描述你想生成的商品图、详情图、模特图或短视频。"}</p>
|
||||
<div className="clone-ai-chat-meta" aria-label="需求参数">
|
||||
{historyRequirementMeta.map((item) => (
|
||||
<em key={item.label}>
|
||||
<span>{item.label}</span>
|
||||
<strong>{item.value}</strong>
|
||||
</em>
|
||||
))}
|
||||
</div>
|
||||
{historyConversationImages.length ? (
|
||||
<div className="clone-ai-chat-assets" aria-label="已上传素材">
|
||||
{historyConversationImages.slice(0, 4).map((image) => (
|
||||
<img key={image.id} src={image.src} alt={image.name || "商品素材"} />
|
||||
))}
|
||||
{historyConversationImages.length > 4 ? <em>+{historyConversationImages.length - 4}</em> : null}
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
<section className={`clone-ai-chat-message clone-ai-chat-message--assistant is-${status}`}>
|
||||
<span>电商图设计师</span>
|
||||
<p>
|
||||
{status === "done" || currentResultCount > 0
|
||||
? `已生成 ${currentResultCount || results.length || productSetResultImages.filter(Boolean).length} 张结果,可在画布中拖拽、缩放和预览。`
|
||||
: status === "generating"
|
||||
? `正在为 ${platform} / ${market} 生成${selectedCloneOutput.label},结果会自动出现在中间画布。`
|
||||
: status === "failed"
|
||||
? "生成失败,请检查网络或参数后重试。"
|
||||
: "我会根据商品图、平台规则和提示词整理生成任务。"}
|
||||
</p>
|
||||
{status === "generating" ? (
|
||||
<EcommerceProgressBar status="generating" progress={generationProgress} onCancel={handleCancelGenerate} label={`${selectedCloneOutput.label}生成`} />
|
||||
) : null}
|
||||
{currentResultThumbs.length ? (
|
||||
<div className="clone-ai-chat-results" aria-label="生成结果缩略图">
|
||||
{currentResultThumbs.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
type="button"
|
||||
onClick={() => openProductSetPreview(item)}
|
||||
aria-label={`预览${item.label}`}
|
||||
>
|
||||
<img src={item.src} alt={item.label} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
{newConversationImages.length ? (
|
||||
<section className="clone-ai-chat-message clone-ai-chat-message--user clone-ai-chat-message--followup">
|
||||
<span>新需求</span>
|
||||
<p>{newRequirementText}</p>
|
||||
<div className="clone-ai-chat-meta" aria-label="新需求参数">
|
||||
{currentRequirementMeta.map((item) => (
|
||||
<em key={item.label}>
|
||||
<span>{item.label}</span>
|
||||
<strong>{item.value}</strong>
|
||||
</em>
|
||||
))}
|
||||
</div>
|
||||
<div className="clone-ai-chat-assets" aria-label="新增素材">
|
||||
{newConversationImages.slice(0, 4).map((image) => (
|
||||
<img key={image.id} src={image.src} alt={image.name || "新增商品素材"} />
|
||||
))}
|
||||
{newConversationImages.length > 4 ? <em>+{newConversationImages.length - 4}</em> : null}
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
</div>
|
||||
</aside>
|
||||
<button
|
||||
type="button"
|
||||
className="clone-ai-conversation-toggle"
|
||||
onClick={() => setIsCloneConversationCollapsed((current) => !current)}
|
||||
aria-label={isCloneConversationCollapsed ? "展开对话" : "收起对话"}
|
||||
title={isCloneConversationCollapsed ? "展开对话" : "收起对话"}
|
||||
aria-expanded={!isCloneConversationCollapsed}
|
||||
>
|
||||
{isCloneConversationCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||||
</button>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{activePreview}
|
||||
|
||||
</div>
|
||||
@@ -6575,7 +7039,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
onClick={refreshEcommerceHistory}
|
||||
disabled={isHistoryRefreshing}
|
||||
>
|
||||
↻
|
||||
<ReloadOutlined />
|
||||
</button>
|
||||
</div>
|
||||
<div className="ecom-command-history__heading">
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { useSmoothedProgress } from "../../hooks/useSmoothedProgress";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
interface EcommerceProgressBarProps {
|
||||
status: "idle" | "generating" | "done" | "failed" | string;
|
||||
label?: string;
|
||||
onCancel?: () => void;
|
||||
/** 0-100 真实进度。传入时进度条按真实值推进;省略时按状态做平滑蠕动。 */
|
||||
progress?: number;
|
||||
}
|
||||
|
||||
function mapStatus(status: string): "running" | "completed" | "failed" {
|
||||
@@ -14,9 +15,13 @@ function mapStatus(status: string): "running" | "completed" | "failed" {
|
||||
return "running";
|
||||
}
|
||||
|
||||
export function EcommerceProgressBar({ status, label, onCancel }: EcommerceProgressBarProps) {
|
||||
const progress = mapStatus(status) === "running" ? 50 : 100;
|
||||
const smoothed = useSmoothedProgress(progress, mapStatus(status));
|
||||
export function EcommerceProgressBar({ status, label, onCancel, progress }: EcommerceProgressBarProps) {
|
||||
const mapped = mapStatus(status);
|
||||
// running 时目标取「真实进度」与兜底值 88 的较大者:有真实进度则跟随推进,
|
||||
// 后端不推中间进度时也由平滑器持续蠕动到高位,不再卡死在 75%。
|
||||
const realProgress = typeof progress === "number" ? Math.max(0, Math.min(100, progress)) : 0;
|
||||
const target = mapped === "running" ? Math.max(realProgress, 88) : 100;
|
||||
const smoothed = useSmoothedProgress(target, mapped);
|
||||
|
||||
if (status === "idle") return null;
|
||||
|
||||
|
||||
@@ -2,15 +2,6 @@ import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import "./styles/index.css";
|
||||
import App from "./App";
|
||||
import { reportError } from "./utils/errorReporting";
|
||||
|
||||
window.addEventListener("unhandledrejection", (event) => {
|
||||
reportError(event.reason, "rejection");
|
||||
});
|
||||
|
||||
window.addEventListener("error", (event) => {
|
||||
if (event.error) reportError(event.error, "unhandled");
|
||||
});
|
||||
|
||||
const root = document.getElementById("root");
|
||||
|
||||
|
||||
@@ -24,17 +24,33 @@ interface PersistedQueueSnapshot {
|
||||
savedAt: number;
|
||||
}
|
||||
|
||||
const STORAGE_KEY = "omniai:generation-queue";
|
||||
const STORAGE_KEY_PREFIX = "omniai:generation-queue";
|
||||
const MAX_ITEMS = 80;
|
||||
const STALE_MS = 2 * 60 * 60 * 1000; // 2 hours
|
||||
|
||||
function hashUserId(): string {
|
||||
try {
|
||||
const raw = localStorage.getItem("omniai-web-session");
|
||||
if (!raw) return "anon";
|
||||
const parsed = JSON.parse(raw) as { user?: { id?: number | string } };
|
||||
return String(parsed?.user?.id || "anon");
|
||||
} catch {
|
||||
return "anon";
|
||||
}
|
||||
}
|
||||
|
||||
// 队列按用户分桶持久化:不同账号读写不同 key,避免登出再登他人账号时读到上一个用户的队列。
|
||||
function getStorageKey(): string {
|
||||
return `${STORAGE_KEY_PREFIX}:${hashUserId()}`;
|
||||
}
|
||||
|
||||
function loadPersistedQueue(): GenerationQueueItem[] {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
const raw = localStorage.getItem(getStorageKey());
|
||||
if (!raw) return [];
|
||||
const snapshot = JSON.parse(raw) as PersistedQueueSnapshot;
|
||||
if (Date.now() - (snapshot.savedAt || 0) > STALE_MS) {
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
localStorage.removeItem(getStorageKey());
|
||||
return [];
|
||||
}
|
||||
return snapshot.items.filter(
|
||||
@@ -48,7 +64,7 @@ function loadPersistedQueue(): GenerationQueueItem[] {
|
||||
function persistQueue(items: GenerationQueueItem[]): void {
|
||||
try {
|
||||
const snapshot: PersistedQueueSnapshot = { version: 1, items, savedAt: Date.now() };
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(snapshot));
|
||||
localStorage.setItem(getStorageKey(), JSON.stringify(snapshot));
|
||||
} catch { /* quota exceeded */ }
|
||||
}
|
||||
|
||||
@@ -63,17 +79,6 @@ interface GenerationStoreState {
|
||||
clearTerminal: () => void;
|
||||
}
|
||||
|
||||
function hashUserId(): string {
|
||||
try {
|
||||
const raw = localStorage.getItem("omniai-web-session");
|
||||
if (!raw) return "anon";
|
||||
const parsed = JSON.parse(raw) as { user?: { id?: number | string } };
|
||||
return String(parsed?.user?.id || "anon");
|
||||
} catch {
|
||||
return "anon";
|
||||
}
|
||||
}
|
||||
|
||||
const initialQueue = loadPersistedQueue();
|
||||
|
||||
export const useGenerationStore = create<GenerationStoreState>((set, get) => ({
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -2950,6 +2950,15 @@
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-result-stack > .clone-ai-node-label {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 50%;
|
||||
z-index: 5;
|
||||
transform: translate(-50%, -100%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-source-corner-action {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
@@ -12093,3 +12102,110 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
|
||||
grid-row: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Composer menu anchors: place option popovers under the clicked control, not under the whole composer. */
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover {
|
||||
position: absolute !important;
|
||||
inset: var(--composer-popover-top, 48px) auto auto var(--composer-popover-left, 0px) !important;
|
||||
right: auto !important;
|
||||
bottom: auto !important;
|
||||
margin: 0 !important;
|
||||
transform: none !important;
|
||||
translate: none !important;
|
||||
z-index: 160 !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--platform {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
||||
}
|
||||
|
||||
/* 平台弹窗宽度仅桌面/平板固定;≤640px 由移动端断点的全宽规则接管。 */
|
||||
@media (min-width: 641px) {
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--platform {
|
||||
width: min(460px, calc(100% - 24px)) !important;
|
||||
max-width: min(460px, calc(100% - 24px)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 平台选项:logo + 名称横排,名称过长省略,避免在窄网格里溢出弹窗。 */
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--platform button {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-start !important;
|
||||
gap: 8px !important;
|
||||
min-width: 0 !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--platform button .ecom-platform-name {
|
||||
min-width: 0 !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--languages,
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--ratio-picker {
|
||||
width: max-content !important;
|
||||
min-width: 200px !important;
|
||||
max-width: min(420px, calc(100% - var(--composer-popover-left, 0px))) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 宽设置面板:固定宽度并靠右对齐 composer,避免从靠右的"设置"按钮左对齐展开时顶出右边缘被裁。
|
||||
仅桌面/平板生效;≤640px 由移动端断点的全宽规则接管。 */
|
||||
@media (min-width: 641px) {
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--settings {
|
||||
width: min(520px, calc(100% - 24px)) !important;
|
||||
max-width: min(520px, calc(100% - 24px)) !important;
|
||||
left: auto !important;
|
||||
inset: var(--composer-popover-top, 48px) 12px auto auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Uploaded assets stay as compact attachments inside the composer hierarchy. */
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) {
|
||||
min-height: 0 !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-popover,
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover {
|
||||
position: static !important;
|
||||
grid-column: 1 !important;
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-start !important;
|
||||
justify-self: start !important;
|
||||
gap: 10px !important;
|
||||
width: auto !important;
|
||||
max-width: 100% !important;
|
||||
min-height: 0 !important;
|
||||
max-height: none !important;
|
||||
padding: 2px 2px 0 !important;
|
||||
overflow: visible !important;
|
||||
border: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb,
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb {
|
||||
flex: 0 0 64px !important;
|
||||
width: 64px !important;
|
||||
height: 64px !important;
|
||||
border-radius: 14px !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add,
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add {
|
||||
flex: 0 0 44px !important;
|
||||
width: 44px !important;
|
||||
height: 64px !important;
|
||||
min-height: 44px !important;
|
||||
margin: 0 !important;
|
||||
font-size: 24px !important;
|
||||
}
|
||||
|
||||
+9
-5
@@ -2,8 +2,14 @@ import react from "@vitejs/plugin-react";
|
||||
import { compression } from "vite-plugin-compression2";
|
||||
import { defineConfig } from "vite";
|
||||
|
||||
export default defineConfig(() => {
|
||||
const devApiTarget = process.env.OMNIAI_DEV_API_TARGET?.trim();
|
||||
export default defineConfig(({ command }) => {
|
||||
// dev 模式下默认把 /api 代理到线上电商后端,本地 `npm run dev` 即可直接登录/生成。
|
||||
// 想连本地或 SSH 隧道的后端时,用环境变量覆盖:
|
||||
// $env:OMNIAI_DEV_API_TARGET="http://127.0.0.1:3601"; npm run dev
|
||||
// 仅 dev 代理用途,不会打进生产构建产物。
|
||||
const devApiTarget =
|
||||
process.env.OMNIAI_DEV_API_TARGET?.trim() ||
|
||||
(command === "serve" ? "https://omniai.com.cn" : "");
|
||||
const apiProxy = devApiTarget
|
||||
? {
|
||||
"/api": {
|
||||
@@ -27,9 +33,7 @@ export default defineConfig(() => {
|
||||
port: 4174,
|
||||
host: "127.0.0.1",
|
||||
},
|
||||
esbuild: {
|
||||
drop: ["console", "debugger"],
|
||||
},
|
||||
...(command === "build" ? { esbuild: { drop: ["console", "debugger"] } } : {}),
|
||||
build: {
|
||||
sourcemap: false,
|
||||
rollupOptions: {
|
||||
|
||||
Reference in New Issue
Block a user