1075 lines
37 KiB
TypeScript
1075 lines
37 KiB
TypeScript
"use client";
|
||
|
||
import { Clock3, Loader2, Sparkles, Upload } from "lucide-react";
|
||
import {
|
||
type KeyboardEvent as ReactKeyboardEvent,
|
||
type PointerEvent as ReactPointerEvent,
|
||
useCallback,
|
||
useEffect,
|
||
useMemo,
|
||
useRef,
|
||
useState,
|
||
} from "react";
|
||
import useSWR from "swr";
|
||
import { toast } from "sonner";
|
||
import { BrandTopBar } from "@/components/layout/brand-top-bar";
|
||
import { Button } from "@/components/ui/button";
|
||
import { imageGenerationService } from "@/services/canvas";
|
||
import { cn, fetcher } from "@/lib/utils";
|
||
import type {
|
||
PublicStyleProCategory,
|
||
PublicStyleProConfig,
|
||
StyleProHistoryItem,
|
||
StyleProPersistedState,
|
||
StyleProSelectionMap,
|
||
} from "@/lib/style-pro/config";
|
||
|
||
type BrandingSettings = {
|
||
siteName?: string;
|
||
siteLogo?: string | null;
|
||
siteLogoDark?: string | null;
|
||
};
|
||
|
||
type StyleProConfigResponse = {
|
||
success: boolean;
|
||
config?: PublicStyleProConfig;
|
||
error?: string;
|
||
};
|
||
|
||
type StyleProModelOption = {
|
||
id: string;
|
||
modelId: string;
|
||
displayName: string;
|
||
avatarUrl?: string | null;
|
||
providerName: string;
|
||
providerType: string;
|
||
isDefault: boolean;
|
||
unitCost: number;
|
||
creditDiscountLabel?: string | null;
|
||
};
|
||
|
||
type StyleProModelsResponse = {
|
||
success: boolean;
|
||
defaultModelId?: string | null;
|
||
models?: StyleProModelOption[];
|
||
error?: string;
|
||
};
|
||
|
||
type StyleProGenerateResponse = {
|
||
success: boolean;
|
||
error?: string;
|
||
data?: {
|
||
imageUrl: string;
|
||
thumbnailUrl?: string;
|
||
model?: string;
|
||
modelRef?: string;
|
||
selections: StyleProSelectionMap;
|
||
optionLabels: string[];
|
||
};
|
||
};
|
||
|
||
type StyleProWorkspaceProps = {
|
||
canvasId: string;
|
||
initialSourceImageUrl?: string | null;
|
||
persistedState?: StyleProPersistedState | null;
|
||
onAddToCanvas?: (item: StyleProHistoryItem) => void | Promise<void>;
|
||
onBack?: () => void;
|
||
onPersistState?: (state: StyleProPersistedState) => void | Promise<void>;
|
||
};
|
||
|
||
const STYLE_PRO_HISTORY_LIMIT = 4;
|
||
|
||
function getHistoryId() {
|
||
if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
|
||
return crypto.randomUUID();
|
||
}
|
||
return `style-pro-${Date.now()}-${Math.random().toString(36).slice(2)}`;
|
||
}
|
||
|
||
function loadImageDimensions(url: string) {
|
||
return new Promise<{ width?: number; height?: number }>((resolve) => {
|
||
if (typeof window === "undefined" || !url) {
|
||
resolve({});
|
||
return;
|
||
}
|
||
const image = new window.Image();
|
||
image.onload = () => {
|
||
resolve({
|
||
width: image.naturalWidth || undefined,
|
||
height: image.naturalHeight || undefined,
|
||
});
|
||
};
|
||
image.onerror = () => resolve({});
|
||
image.src = url;
|
||
});
|
||
}
|
||
|
||
function normalizeHistory(history: StyleProHistoryItem[] | undefined) {
|
||
return Array.isArray(history)
|
||
? history.slice(0, STYLE_PRO_HISTORY_LIMIT)
|
||
: [];
|
||
}
|
||
|
||
function getLocalStyleProStateKey(canvasId: string) {
|
||
return `style-pro-state:${canvasId || "draft"}`;
|
||
}
|
||
|
||
function readLocalStyleProState(
|
||
canvasId: string
|
||
): StyleProPersistedState | null {
|
||
if (typeof window === "undefined") return null;
|
||
try {
|
||
const raw = window.localStorage.getItem(getLocalStyleProStateKey(canvasId));
|
||
if (!raw) return null;
|
||
const parsed = JSON.parse(raw) as StyleProPersistedState;
|
||
return {
|
||
sourceImageUrl:
|
||
typeof parsed.sourceImageUrl === "string"
|
||
? parsed.sourceImageUrl
|
||
: undefined,
|
||
history: normalizeHistory(
|
||
Array.isArray(parsed.history)
|
||
? parsed.history.filter(
|
||
(item) =>
|
||
item &&
|
||
typeof item.sourceImageUrl === "string" &&
|
||
typeof item.resultImageUrl === "string"
|
||
)
|
||
: []
|
||
),
|
||
};
|
||
} catch {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
function writeLocalStyleProState(
|
||
canvasId: string,
|
||
state: StyleProPersistedState
|
||
) {
|
||
if (typeof window === "undefined") return;
|
||
try {
|
||
window.localStorage.setItem(
|
||
getLocalStyleProStateKey(canvasId),
|
||
JSON.stringify({
|
||
sourceImageUrl: state.sourceImageUrl,
|
||
history: normalizeHistory(state.history),
|
||
})
|
||
);
|
||
} catch {
|
||
// Local persistence is a safety net; server persistence remains authoritative.
|
||
}
|
||
}
|
||
|
||
function mergeStyleProHistory(
|
||
...historyGroups: Array<StyleProHistoryItem[] | undefined>
|
||
) {
|
||
const byKey = new Map<string, StyleProHistoryItem>();
|
||
for (const history of historyGroups) {
|
||
for (const item of history || []) {
|
||
if (!item?.sourceImageUrl || !item?.resultImageUrl) continue;
|
||
const key = item.id || `${item.sourceImageUrl}::${item.resultImageUrl}`;
|
||
if (!byKey.has(key)) {
|
||
byKey.set(key, item);
|
||
}
|
||
}
|
||
}
|
||
return Array.from(byKey.values())
|
||
.sort((left, right) => {
|
||
const leftTime = Date.parse(left.createdAt || "") || 0;
|
||
const rightTime = Date.parse(right.createdAt || "") || 0;
|
||
return rightTime - leftTime;
|
||
})
|
||
.slice(0, STYLE_PRO_HISTORY_LIMIT);
|
||
}
|
||
|
||
function mergeStyleProState(
|
||
...states: Array<StyleProPersistedState | null | undefined>
|
||
): StyleProPersistedState {
|
||
return {
|
||
sourceImageUrl:
|
||
states.find((state) => String(state?.sourceImageUrl || "").trim())
|
||
?.sourceImageUrl || undefined,
|
||
history: mergeStyleProHistory(...states.map((state) => state?.history)),
|
||
};
|
||
}
|
||
|
||
function ImagePreview({
|
||
alt,
|
||
className,
|
||
imageUrl,
|
||
}: {
|
||
alt: string;
|
||
className?: string;
|
||
imageUrl?: string | null;
|
||
}) {
|
||
if (!imageUrl) {
|
||
return (
|
||
<div
|
||
className={cn(
|
||
"flex h-full min-h-[220px] items-center justify-center rounded-lg border border-dashed border-gray-200 bg-gray-50 text-gray-400 text-sm",
|
||
className
|
||
)}
|
||
>
|
||
等待图片
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<img
|
||
alt={alt}
|
||
className={cn("h-full w-full rounded-lg object-contain", className)}
|
||
draggable={false}
|
||
src={imageUrl}
|
||
/>
|
||
);
|
||
}
|
||
|
||
function GeneratingImagePlaceholder() {
|
||
return (
|
||
<div className="min-h-[460px] rounded-lg border border-white/10 bg-white p-5 text-neutral-800">
|
||
<div className="mb-4 flex items-center justify-between gap-3">
|
||
<div>
|
||
<div className="font-semibold text-[15px] text-neutral-700">
|
||
正在创建图片
|
||
</div>
|
||
<div className="mt-1 text-xs text-neutral-400">
|
||
正在理解图片与提示词组合
|
||
</div>
|
||
</div>
|
||
<span className="inline-flex items-center gap-2 rounded-lg bg-neutral-100 px-3 py-1.5 text-xs font-medium text-neutral-500">
|
||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||
生成中
|
||
</span>
|
||
</div>
|
||
<div className="style-pro-generating-frame relative mx-auto h-[390px] max-h-[58vh] w-full max-w-[340px] overflow-hidden rounded-[28px] p-[2px]">
|
||
<div className="style-pro-generating-surface relative h-full overflow-hidden rounded-[26px] bg-[#f4f4f4]">
|
||
<div className="style-pro-dot-field absolute inset-0" />
|
||
<div className="style-pro-light-field absolute inset-0" />
|
||
</div>
|
||
</div>
|
||
<style>{`
|
||
@keyframes styleProBorderSpin {
|
||
to { transform: rotate(1turn); }
|
||
}
|
||
@keyframes styleProDotDrift {
|
||
0% { transform: translate3d(-10px, -8px, 0); opacity: 0.35; }
|
||
45% { transform: translate3d(8px, 18px, 0); opacity: 0.78; }
|
||
100% { transform: translate3d(18px, -4px, 0); opacity: 0.42; }
|
||
}
|
||
@keyframes styleProLightFloat {
|
||
0% { transform: translate3d(-18%, -10%, 0) scale(1); opacity: 0.72; }
|
||
50% { transform: translate3d(18%, 16%, 0) scale(1.06); opacity: 0.98; }
|
||
100% { transform: translate3d(34%, -4%, 0) scale(1); opacity: 0.74; }
|
||
}
|
||
.style-pro-generating-frame {
|
||
background: rgba(255,255,255,0.82);
|
||
box-shadow: 0 18px 50px rgba(0,0,0,0.08);
|
||
isolation: isolate;
|
||
}
|
||
.style-pro-generating-frame::before {
|
||
position: absolute;
|
||
content: "";
|
||
inset: -42%;
|
||
z-index: -1;
|
||
background:
|
||
conic-gradient(
|
||
from 0deg,
|
||
rgba(22, 163, 74, 0.18),
|
||
rgba(37, 99, 235, 0.46),
|
||
rgba(245, 158, 11, 0.32),
|
||
rgba(20, 184, 166, 0.42),
|
||
rgba(22, 163, 74, 0.18)
|
||
);
|
||
animation: styleProBorderSpin 5.2s linear infinite;
|
||
}
|
||
.style-pro-generating-frame::after {
|
||
position: absolute;
|
||
content: "";
|
||
inset: 2px;
|
||
border-radius: 26px;
|
||
pointer-events: none;
|
||
box-shadow:
|
||
inset 0 0 0 1px rgba(255,255,255,0.72),
|
||
inset 0 0 28px rgba(255,255,255,0.55);
|
||
}
|
||
.style-pro-generating-surface {
|
||
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.025);
|
||
}
|
||
.style-pro-dot-field {
|
||
background-image: radial-gradient(circle, rgba(116,116,116,0.32) 1.05px, transparent 1.05px);
|
||
background-size: 16px 16px;
|
||
mask-image: radial-gradient(ellipse 88% 72% at 50% 44%, #000 0%, rgba(0,0,0,0.78) 48%, transparent 82%);
|
||
animation: styleProDotDrift 3.8s ease-in-out infinite alternate;
|
||
}
|
||
.style-pro-light-field {
|
||
background:
|
||
radial-gradient(ellipse 52% 38% at 28% 28%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.52) 38%, transparent 72%),
|
||
radial-gradient(ellipse 56% 42% at 72% 70%, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.42) 36%, transparent 74%),
|
||
radial-gradient(ellipse 90% 70% at 50% 50%, rgba(255,255,255,0.28) 0%, transparent 68%);
|
||
filter: blur(14px);
|
||
inset: -14%;
|
||
mix-blend-mode: screen;
|
||
animation: styleProLightFloat 4.4s ease-in-out infinite alternate;
|
||
will-change: transform, opacity;
|
||
}
|
||
`}</style>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function BeforeAfterSlider({
|
||
afterUrl,
|
||
beforeUrl,
|
||
generating = false,
|
||
}: {
|
||
afterUrl?: string | null;
|
||
beforeUrl?: string | null;
|
||
generating?: boolean;
|
||
}) {
|
||
const [position, setPosition] = useState(50);
|
||
const sliderRef = useRef<HTMLDivElement | null>(null);
|
||
const updatePositionFromClientX = useCallback((clientX: number) => {
|
||
const rect = sliderRef.current?.getBoundingClientRect();
|
||
if (!rect || rect.width <= 0) return;
|
||
const next = ((clientX - rect.left) / rect.width) * 100;
|
||
setPosition(Math.min(96, Math.max(4, Math.round(next * 10) / 10)));
|
||
}, []);
|
||
const handlePointerDown = useCallback(
|
||
(event: ReactPointerEvent<HTMLDivElement>) => {
|
||
event.currentTarget.setPointerCapture(event.pointerId);
|
||
updatePositionFromClientX(event.clientX);
|
||
},
|
||
[updatePositionFromClientX]
|
||
);
|
||
const handlePointerMove = useCallback(
|
||
(event: ReactPointerEvent<HTMLDivElement>) => {
|
||
if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
|
||
updatePositionFromClientX(event.clientX);
|
||
},
|
||
[updatePositionFromClientX]
|
||
);
|
||
const handlePointerEnd = useCallback(
|
||
(event: ReactPointerEvent<HTMLDivElement>) => {
|
||
if (event.currentTarget.hasPointerCapture(event.pointerId)) {
|
||
event.currentTarget.releasePointerCapture(event.pointerId);
|
||
}
|
||
},
|
||
[]
|
||
);
|
||
const handleSliderKeyDown = useCallback(
|
||
(event: ReactKeyboardEvent<HTMLDivElement>) => {
|
||
const step = event.shiftKey ? 10 : 3;
|
||
if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
|
||
event.preventDefault();
|
||
setPosition((current) => Math.max(4, current - step));
|
||
} else if (event.key === "ArrowRight" || event.key === "ArrowUp") {
|
||
event.preventDefault();
|
||
setPosition((current) => Math.min(96, current + step));
|
||
} else if (event.key === "Home") {
|
||
event.preventDefault();
|
||
setPosition(4);
|
||
} else if (event.key === "End") {
|
||
event.preventDefault();
|
||
setPosition(96);
|
||
}
|
||
},
|
||
[]
|
||
);
|
||
|
||
if (generating) {
|
||
return <GeneratingImagePlaceholder />;
|
||
}
|
||
|
||
if (!beforeUrl && !afterUrl) {
|
||
return (
|
||
<div className="flex min-h-[460px] items-center justify-center rounded-lg border border-dashed border-gray-200 bg-gray-50 text-gray-400">
|
||
上传图片后开始生成
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (!afterUrl) {
|
||
return (
|
||
<div className="min-h-[460px] rounded-lg border border-gray-200 bg-gray-50 p-3">
|
||
<ImagePreview alt="上传图片" imageUrl={beforeUrl} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div
|
||
className="relative min-h-[460px] select-none overflow-hidden rounded-lg border border-gray-200 bg-gray-50"
|
||
ref={sliderRef}
|
||
>
|
||
<ImagePreview
|
||
alt="生成后"
|
||
className="absolute inset-0 h-full w-full"
|
||
imageUrl={afterUrl}
|
||
/>
|
||
<div
|
||
className="absolute inset-0 overflow-hidden"
|
||
style={{ clipPath: `inset(0 ${100 - position}% 0 0)` }}
|
||
>
|
||
<ImagePreview
|
||
alt="生成前"
|
||
className="h-full w-full"
|
||
imageUrl={beforeUrl}
|
||
/>
|
||
</div>
|
||
<div
|
||
className="absolute inset-y-0 w-px bg-white"
|
||
style={{ left: `${position}%` }}
|
||
>
|
||
<div
|
||
aria-label="拖动查看原图和结果对比"
|
||
aria-valuemax={96}
|
||
aria-valuemin={4}
|
||
aria-valuenow={Math.round(position)}
|
||
className="-translate-x-1/2 absolute top-1/2 flex h-11 w-11 -translate-y-1/2 cursor-ew-resize touch-none select-none items-center justify-center rounded-full border border-white/80 bg-black/75 text-[11px] font-semibold text-white shadow-lg outline-none transition hover:bg-black focus-visible:ring-2 focus-visible:ring-black/40 focus-visible:ring-offset-2"
|
||
onKeyDown={handleSliderKeyDown}
|
||
onPointerCancel={handlePointerEnd}
|
||
onPointerDown={handlePointerDown}
|
||
onPointerMove={handlePointerMove}
|
||
onPointerUp={handlePointerEnd}
|
||
role="slider"
|
||
tabIndex={0}
|
||
>
|
||
对比
|
||
</div>
|
||
</div>
|
||
<div className="absolute left-4 top-4 rounded-full bg-black/65 px-3 py-1 text-xs text-white/80">
|
||
原图
|
||
</div>
|
||
<div className="absolute right-4 top-4 rounded-full bg-emerald-500/90 px-3 py-1 text-xs font-semibold text-black">
|
||
结果
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function StyleProWorkspace({
|
||
canvasId,
|
||
initialSourceImageUrl,
|
||
onAddToCanvas,
|
||
onPersistState,
|
||
persistedState,
|
||
}: StyleProWorkspaceProps) {
|
||
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
||
const { data: brandingData } = useSWR<BrandingSettings>(
|
||
"/api/site-settings?scope=branding",
|
||
fetcher
|
||
);
|
||
const { data: configData, isLoading: configLoading } =
|
||
useSWR<StyleProConfigResponse>("/api/style-pro/config", fetcher);
|
||
const { data: modelsData, isLoading: modelsLoading } =
|
||
useSWR<StyleProModelsResponse>("/api/style-pro/model-options", fetcher);
|
||
const config = configData?.config;
|
||
const modelOptions = useMemo(
|
||
() => (modelsData?.models || []).filter((model) => Boolean(model.id)),
|
||
[modelsData?.models]
|
||
);
|
||
const enabledCategories = useMemo(
|
||
() =>
|
||
(config?.categories || [])
|
||
.filter((category) => category.enabled)
|
||
.map((category) => ({
|
||
...category,
|
||
options: category.options.filter((option) => option.enabled),
|
||
}))
|
||
.filter((category) => category.options.length > 0),
|
||
[config?.categories]
|
||
);
|
||
|
||
const [sourceImageUrl, setSourceImageUrl] = useState(
|
||
() =>
|
||
mergeStyleProState(
|
||
persistedState,
|
||
readLocalStyleProState(canvasId),
|
||
initialSourceImageUrl
|
||
? { sourceImageUrl: initialSourceImageUrl, history: [] }
|
||
: null
|
||
).sourceImageUrl || ""
|
||
);
|
||
const [currentResult, setCurrentResult] =
|
||
useState<StyleProHistoryItem | null>(() => {
|
||
const merged = mergeStyleProState(
|
||
persistedState,
|
||
readLocalStyleProState(canvasId)
|
||
);
|
||
return merged.history[0] || null;
|
||
});
|
||
const [history, setHistory] = useState<StyleProHistoryItem[]>(
|
||
() =>
|
||
mergeStyleProState(persistedState, readLocalStyleProState(canvasId))
|
||
.history
|
||
);
|
||
const [selections, setSelections] = useState<StyleProSelectionMap>({});
|
||
const [selectedModelId, setSelectedModelId] = useState("");
|
||
const [uploading, setUploading] = useState(false);
|
||
const [generating, setGenerating] = useState(false);
|
||
|
||
useEffect(() => {
|
||
if (modelOptions.length === 0) {
|
||
setSelectedModelId("");
|
||
return;
|
||
}
|
||
setSelectedModelId((current) => {
|
||
if (current && modelOptions.some((model) => model.id === current)) {
|
||
return current;
|
||
}
|
||
return modelsData?.defaultModelId || modelOptions[0]?.id || "";
|
||
});
|
||
}, [modelOptions, modelsData?.defaultModelId]);
|
||
|
||
useEffect(() => {
|
||
const localState = readLocalStyleProState(canvasId);
|
||
const nextSource =
|
||
persistedState?.sourceImageUrl ||
|
||
localState?.sourceImageUrl ||
|
||
initialSourceImageUrl ||
|
||
"";
|
||
setSourceImageUrl((current) => current || nextSource);
|
||
setHistory((currentHistory) =>
|
||
mergeStyleProHistory(
|
||
currentHistory,
|
||
persistedState?.history,
|
||
localState?.history
|
||
)
|
||
);
|
||
setCurrentResult(
|
||
(current) =>
|
||
current ||
|
||
mergeStyleProHistory(persistedState?.history, localState?.history)[0] ||
|
||
null
|
||
);
|
||
}, [
|
||
canvasId,
|
||
initialSourceImageUrl,
|
||
persistedState?.history,
|
||
persistedState?.sourceImageUrl,
|
||
]);
|
||
|
||
const siteName = brandingData?.siteName || "由壹点AI";
|
||
const logo = brandingData?.siteLogoDark || brandingData?.siteLogo || "";
|
||
|
||
const selectedOptionLabels = useMemo(() => {
|
||
const labels: string[] = [];
|
||
for (const category of enabledCategories) {
|
||
const selected = selections[category.id] || [];
|
||
for (const optionId of selected) {
|
||
const option = category.options.find((item) => item.id === optionId);
|
||
if (option) {
|
||
labels.push(`${category.title}：${option.label}`);
|
||
}
|
||
}
|
||
}
|
||
return labels;
|
||
}, [enabledCategories, selections]);
|
||
|
||
const selectedModel = useMemo(
|
||
() =>
|
||
modelOptions.find((model) => model.id === selectedModelId) ||
|
||
modelOptions[0] ||
|
||
null,
|
||
[modelOptions, selectedModelId]
|
||
);
|
||
|
||
const selectedModelCostLabel = selectedModel
|
||
? selectedModel.unitCost > 0
|
||
? `${selectedModel.unitCost} 积分/张`
|
||
: "未设置积分"
|
||
: modelsLoading
|
||
? "加载价格"
|
||
: "暂无模型";
|
||
|
||
const missingRequiredCategories = useMemo(
|
||
() =>
|
||
enabledCategories.filter((category) => {
|
||
if (!category.required && category.minSelections <= 0) return false;
|
||
const selectedCount = selections[category.id]?.length || 0;
|
||
return (
|
||
selectedCount <
|
||
Math.max(category.required ? 1 : 0, category.minSelections)
|
||
);
|
||
}),
|
||
[enabledCategories, selections]
|
||
);
|
||
|
||
const persistState = useCallback(
|
||
async (nextState: StyleProPersistedState) => {
|
||
const normalizedState = {
|
||
sourceImageUrl: nextState.sourceImageUrl,
|
||
history: normalizeHistory(nextState.history),
|
||
};
|
||
writeLocalStyleProState(canvasId, normalizedState);
|
||
await onPersistState?.(normalizedState);
|
||
},
|
||
[canvasId, onPersistState]
|
||
);
|
||
|
||
const updateSourceImage = useCallback(
|
||
async (url: string) => {
|
||
const nextUrl = String(url || "").trim();
|
||
setSourceImageUrl(nextUrl);
|
||
setCurrentResult(null);
|
||
await persistState({ sourceImageUrl: nextUrl, history });
|
||
},
|
||
[history, persistState]
|
||
);
|
||
|
||
const handleFile = useCallback(
|
||
async (file: File | null | undefined) => {
|
||
if (!file) return;
|
||
if (!file.type.startsWith("image/")) {
|
||
toast.error("请上传图片文件");
|
||
return;
|
||
}
|
||
setUploading(true);
|
||
try {
|
||
const result = await imageGenerationService.uploadImage(file);
|
||
if (!result.success || !result.data?.url) {
|
||
throw new Error(result.error || "上传失败");
|
||
}
|
||
await updateSourceImage(result.data.url);
|
||
toast.success("图片已上传");
|
||
} catch (error) {
|
||
toast.error(error instanceof Error ? error.message : "上传失败");
|
||
} finally {
|
||
setUploading(false);
|
||
}
|
||
},
|
||
[updateSourceImage]
|
||
);
|
||
|
||
const toggleOption = useCallback(
|
||
(category: PublicStyleProCategory, optionId: string) => {
|
||
setSelections((current) => {
|
||
const previous = current[category.id] || [];
|
||
const selected = previous.includes(optionId);
|
||
let nextSelected = selected
|
||
? previous.filter((id) => id !== optionId)
|
||
: [...previous, optionId];
|
||
if (!selected && category.maxSelections <= 1) {
|
||
nextSelected = [optionId];
|
||
}
|
||
if (nextSelected.length > category.maxSelections) {
|
||
nextSelected = nextSelected.slice(-category.maxSelections);
|
||
}
|
||
return {
|
||
...current,
|
||
[category.id]: nextSelected,
|
||
};
|
||
});
|
||
},
|
||
[]
|
||
);
|
||
|
||
const handleGenerate = useCallback(async () => {
|
||
if (!sourceImageUrl) {
|
||
toast.error("请先上传一张图片");
|
||
return;
|
||
}
|
||
if (!config?.enabled) {
|
||
toast.error("风格化 PRO 暂未启用");
|
||
return;
|
||
}
|
||
if (missingRequiredCategories.length > 0) {
|
||
toast.error(`请完成必选项：${missingRequiredCategories[0].title}`);
|
||
return;
|
||
}
|
||
|
||
setGenerating(true);
|
||
try {
|
||
const response = await fetch("/api/style-pro/generate", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
canvasId,
|
||
modelId: selectedModel?.id || selectedModelId || undefined,
|
||
sourceImageUrl,
|
||
selections,
|
||
}),
|
||
});
|
||
const payload = (await response.json().catch(() => ({}))) as
|
||
| StyleProGenerateResponse
|
||
| undefined;
|
||
if (!response.ok || !payload?.success || !payload.data?.imageUrl) {
|
||
throw new Error(payload?.error || "生成失败");
|
||
}
|
||
const dimensions = await loadImageDimensions(payload.data.imageUrl);
|
||
const item: StyleProHistoryItem = {
|
||
id: getHistoryId(),
|
||
sourceImageUrl,
|
||
resultImageUrl: payload.data.imageUrl,
|
||
selections: payload.data.selections || selections,
|
||
optionLabels: payload.data.optionLabels || selectedOptionLabels,
|
||
createdAt: new Date().toISOString(),
|
||
model: payload.data.model,
|
||
modelRef: payload.data.modelRef,
|
||
width: dimensions.width,
|
||
height: dimensions.height,
|
||
};
|
||
const nextHistory = [
|
||
item,
|
||
...history.filter((entry) => entry.id !== item.id),
|
||
].slice(0, 4);
|
||
setHistory(nextHistory);
|
||
setCurrentResult(item);
|
||
await persistState({ sourceImageUrl, history: nextHistory });
|
||
toast.success("风格化 PRO 生成完成");
|
||
} catch (error) {
|
||
toast.error(error instanceof Error ? error.message : "生成失败");
|
||
} finally {
|
||
setGenerating(false);
|
||
}
|
||
}, [
|
||
canvasId,
|
||
config?.enabled,
|
||
history,
|
||
missingRequiredCategories,
|
||
persistState,
|
||
selectedOptionLabels,
|
||
selectedModel?.id,
|
||
selectedModelId,
|
||
selections,
|
||
sourceImageUrl,
|
||
]);
|
||
|
||
const restoreHistoryItem = useCallback((item: StyleProHistoryItem) => {
|
||
setSourceImageUrl(item.sourceImageUrl);
|
||
setSelections(item.selections || {});
|
||
setCurrentResult(item);
|
||
}, []);
|
||
|
||
const disabledReason = !sourceImageUrl
|
||
? "请先上传图片"
|
||
: modelsData?.success === true && modelOptions.length === 0
|
||
? "暂无可用生图模型"
|
||
: missingRequiredCategories.length > 0
|
||
? `还差：${missingRequiredCategories[0].title}`
|
||
: "";
|
||
const promptDisplayMode = config?.promptDisplayMode || "stacked";
|
||
const renderPromptCategory = (
|
||
category: PublicStyleProCategory,
|
||
layout: "stacked" | "carousel" = "stacked"
|
||
) => {
|
||
const selectedIds = selections[category.id] || [];
|
||
return (
|
||
<div
|
||
className={cn(
|
||
"rounded-[20px] bg-black/[0.025] p-4",
|
||
layout === "carousel" && "h-full min-h-[126px]"
|
||
)}
|
||
>
|
||
<div className="mb-3 flex items-start gap-4">
|
||
<span className="subsection-title mt-2 w-20 shrink-0">
|
||
{category.title}
|
||
</span>
|
||
<div className="min-w-0 flex-1">
|
||
<div className="flex flex-wrap gap-2">
|
||
{category.options.map((option) => {
|
||
const selected = selectedIds.includes(option.id);
|
||
return (
|
||
<button
|
||
className={cn(
|
||
"option-btn rounded-full px-4 py-2 text-[14px] font-semibold",
|
||
selected && "active"
|
||
)}
|
||
key={option.id}
|
||
onClick={() => toggleOption(category, option.id)}
|
||
title={option.description || option.label}
|
||
type="button"
|
||
>
|
||
{option.label}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<div className="style-pro-index-shell flex h-dvh w-full overflow-hidden bg-[#f4f4f4] text-[#171717]">
|
||
<style>{`
|
||
.style-pro-index-shell .section-card {
|
||
background: #fff;
|
||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||
border-radius: 24px;
|
||
box-shadow: 0 12px 35px rgba(15, 23, 42, 0.05);
|
||
}
|
||
.style-pro-index-shell .subsection-title {
|
||
color: #2563eb;
|
||
font-size: 13px;
|
||
font-weight: 650;
|
||
white-space: nowrap;
|
||
}
|
||
.style-pro-index-shell .option-btn {
|
||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||
background: #fff;
|
||
color: rgba(17, 24, 39, 0.78);
|
||
transition: all 0.18s ease;
|
||
}
|
||
.style-pro-index-shell .option-btn:hover {
|
||
background: #1c1c1e;
|
||
border-color: #1c1c1e;
|
||
color: #fff;
|
||
}
|
||
.style-pro-index-shell .option-btn.active {
|
||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.05));
|
||
color: #2563eb;
|
||
border-color: #60a5fa;
|
||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
|
||
}
|
||
.style-pro-index-shell .prompt-carousel-scroll {
|
||
scrollbar-width: thin;
|
||
scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
|
||
scroll-padding-inline: 8px;
|
||
}
|
||
.style-pro-index-shell .prompt-carousel-scroll::-webkit-scrollbar {
|
||
height: 8px;
|
||
}
|
||
.style-pro-index-shell .prompt-carousel-scroll::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
.style-pro-index-shell .prompt-carousel-scroll::-webkit-scrollbar-thumb {
|
||
background: rgba(15, 23, 42, 0.16);
|
||
border-radius: 999px;
|
||
}
|
||
`}</style>
|
||
|
||
<main className="min-w-0 flex-1 overflow-y-auto">
|
||
<BrandTopBar
|
||
logo={logo}
|
||
onLogoClick={() => {
|
||
window.location.href = "/";
|
||
}}
|
||
position="sticky"
|
||
siteName={siteName}
|
||
/>
|
||
|
||
<div className="mx-auto max-w-[1920px] space-y-5 px-6 py-6">
|
||
<section className="section-card p-6">
|
||
<div className="rounded-[20px] bg-black/[0.025] p-4">
|
||
<div className="mb-3 flex items-center justify-between gap-3">
|
||
<span className="subsection-title">上传图片</span>
|
||
<span className="text-[12px] text-black/40">支持拖拽上传</span>
|
||
</div>
|
||
<button
|
||
className="flex min-h-[260px] w-full items-center justify-center overflow-hidden rounded-2xl border border-dashed border-black/15 bg-white transition hover:border-black/35"
|
||
onClick={() => fileInputRef.current?.click()}
|
||
onDragOver={(event) => event.preventDefault()}
|
||
onDrop={(event) => {
|
||
event.preventDefault();
|
||
void handleFile(event.dataTransfer.files?.[0]);
|
||
}}
|
||
type="button"
|
||
>
|
||
{sourceImageUrl ? (
|
||
<img
|
||
alt="上传图片"
|
||
className="h-full max-h-[360px] w-full object-contain"
|
||
src={sourceImageUrl}
|
||
/>
|
||
) : (
|
||
<span className="flex flex-col items-center gap-3 text-gray-500">
|
||
{uploading ? (
|
||
<Loader2 className="h-6 w-6 animate-spin" />
|
||
) : (
|
||
<Upload className="h-6 w-6" />
|
||
)}
|
||
<span className="text-[13px]">点击上传，或拖入图片</span>
|
||
</span>
|
||
)}
|
||
</button>
|
||
<input
|
||
accept="image/*"
|
||
className="hidden"
|
||
onChange={(event) => {
|
||
void handleFile(event.target.files?.[0]);
|
||
event.currentTarget.value = "";
|
||
}}
|
||
ref={fileInputRef}
|
||
type="file"
|
||
/>
|
||
</div>
|
||
</section>
|
||
|
||
{configLoading ? (
|
||
<section className="section-card flex min-h-[180px] items-center justify-center p-6 text-[13px] text-black/45">
|
||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||
正在加载配置
|
||
</section>
|
||
) : !config?.enabled ? (
|
||
<section className="section-card border-amber-200 bg-amber-50 p-6 text-amber-800">
|
||
风格化 PRO 暂未启用，请联系管理员开启。
|
||
</section>
|
||
) : promptDisplayMode === "carousel" ? (
|
||
<section className="section-card p-6">
|
||
<div className="prompt-carousel-scroll -mx-2 flex snap-x gap-4 overflow-x-auto px-2 pb-2">
|
||
{enabledCategories.map((category) => (
|
||
<div
|
||
className="w-[min(760px,calc(100vw-96px))] shrink-0 snap-start"
|
||
key={category.id}
|
||
>
|
||
{renderPromptCategory(category, "carousel")}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
) : (
|
||
enabledCategories.map((category) => (
|
||
<section className="section-card p-6" key={category.id}>
|
||
{renderPromptCategory(category)}
|
||
</section>
|
||
))
|
||
)}
|
||
|
||
<section className="section-card p-6">
|
||
<div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
|
||
<div className="rounded-[20px] bg-black/[0.025] p-4">
|
||
<div className="mb-4 flex flex-wrap items-center justify-between gap-3">
|
||
<div>
|
||
<span className="subsection-title">生图结果</span>
|
||
<p className="mt-1 text-[13px] text-black/45">
|
||
生成后拖动滑块查看原图与结果图。
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<div className="flex h-8 items-center gap-2 rounded-[14px] border border-black/10 bg-white px-2 text-[12px] text-black/65 shadow-sm">
|
||
<span className="text-black/45">模型</span>
|
||
<select
|
||
aria-label="选择生图模型"
|
||
className="h-6 max-w-[210px] bg-transparent font-semibold text-black/75 outline-none"
|
||
disabled={
|
||
modelsLoading ||
|
||
modelOptions.length === 0 ||
|
||
generating
|
||
}
|
||
onChange={(event) =>
|
||
setSelectedModelId(event.target.value)
|
||
}
|
||
value={selectedModel?.id || selectedModelId}
|
||
>
|
||
{modelOptions.length > 0 ? (
|
||
modelOptions.map((model) => (
|
||
<option key={model.id} value={model.id}>
|
||
{model.displayName} ·{" "}
|
||
{model.unitCost > 0
|
||
? `${model.unitCost}积分/张`
|
||
: "未设置积分"}
|
||
</option>
|
||
))
|
||
) : (
|
||
<option value="">
|
||
{modelsLoading ? "加载模型" : "暂无模型"}
|
||
</option>
|
||
)}
|
||
</select>
|
||
<span className="rounded-full bg-black/[0.04] px-2 py-0.5 font-semibold text-black/55">
|
||
{selectedModelCostLabel}
|
||
</span>
|
||
{selectedModel?.creditDiscountLabel ? (
|
||
<span className="rounded-full bg-emerald-50 px-2 py-0.5 font-semibold text-emerald-600">
|
||
{selectedModel.creditDiscountLabel}
|
||
</span>
|
||
) : null}
|
||
</div>
|
||
<Button
|
||
className="h-8 rounded-[14px] bg-[#1c1c1e] px-4 text-[12px] text-white hover:bg-black"
|
||
disabled={generating || Boolean(disabledReason)}
|
||
onClick={handleGenerate}
|
||
title={disabledReason || selectedModelCostLabel}
|
||
>
|
||
{generating ? (
|
||
<Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
|
||
) : (
|
||
<Sparkles className="mr-1.5 h-3.5 w-3.5" />
|
||
)}
|
||
{generating
|
||
? "正在创建图片"
|
||
: selectedModel?.unitCost
|
||
? `执行 · ${selectedModel.unitCost}积分`
|
||
: "执行"}
|
||
</Button>
|
||
<Button
|
||
className="h-8 rounded-[14px] border-black/10 bg-white px-4 text-[12px] text-black/70 shadow-sm hover:bg-black/5"
|
||
disabled={!currentResult}
|
||
onClick={() =>
|
||
currentResult && onAddToCanvas?.(currentResult)
|
||
}
|
||
variant="outline"
|
||
>
|
||
添加到画布
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<BeforeAfterSlider
|
||
afterUrl={currentResult?.resultImageUrl}
|
||
beforeUrl={currentResult?.sourceImageUrl || sourceImageUrl}
|
||
generating={generating}
|
||
/>
|
||
</div>
|
||
|
||
<div className="rounded-[20px] bg-black/[0.025] p-4">
|
||
<div className="mb-3 flex items-center justify-between gap-3">
|
||
<span className="subsection-title">历史记录</span>
|
||
<span className="text-[12px] text-black/40">最近 4 条</span>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-3">
|
||
{history.length > 0 ? (
|
||
history.map((item) => (
|
||
<button
|
||
className={cn(
|
||
"overflow-hidden rounded-2xl border bg-white text-left transition hover:border-black/35",
|
||
currentResult?.id === item.id
|
||
? "border-black/30 shadow-[0_4px_12px_rgba(15,23,42,0.12)]"
|
||
: "border-black/10"
|
||
)}
|
||
key={item.id}
|
||
onClick={() => restoreHistoryItem(item)}
|
||
type="button"
|
||
>
|
||
<div className="aspect-square bg-gray-100">
|
||
<img
|
||
alt="风格化历史"
|
||
className="h-full w-full object-cover"
|
||
src={item.resultImageUrl}
|
||
/>
|
||
</div>
|
||
<div className="space-y-1 p-2">
|
||
<div className="flex items-center gap-1 text-[11px] text-gray-400">
|
||
<Clock3 className="h-3 w-3" />
|
||
{new Date(item.createdAt).toLocaleTimeString(
|
||
"zh-CN",
|
||
{
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
}
|
||
)}
|
||
</div>
|
||
<div className="line-clamp-1 text-[12px] text-black/70">
|
||
{item.optionLabels[0] || "风格化结果"}
|
||
</div>
|
||
</div>
|
||
</button>
|
||
))
|
||
) : (
|
||
<div className="col-span-2 rounded-2xl border border-dashed border-black/15 bg-white p-5 text-center text-[13px] text-black/40">
|
||
生成后会在这里保存历史。
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
);
|
||
}
|