添加艾特角色功能
This commit is contained in:
Azmat@qq.com
@@ -11,7 +11,7 @@ const SIDEBAR_COLLAPSED_KEY = "airshelf:sidebar-collapsed";
|
||||
// 全局命令面板(Ctrl K / 点搜索框)—— 忠实搬设计稿 SHELL_COMMANDS,href 改成真路由导航
|
||||
type Command = { id: string; group: string; label: string; sub: string; page: Page; icon: string; key?: string };
|
||||
const SHELL_COMMANDS: Command[] = [
|
||||
{ id: "omni-create", group: "导航", label: "全能创作", sub: "预设工作流 + 对话式 Agent", page: "omniCreate", icon: "sparkles", key: "O" },
|
||||
{ id: "omni-create", group: "导航", label: "全能创作", sub: "预设工作流 + 对话式创作", page: "omniCreate", icon: "sparkles", key: "O" },
|
||||
{ id: "omni-history", group: "导航", label: "创作历史", sub: "查看与继续独立会话", page: "omniHistory", icon: "history", key: "H" },
|
||||
{ id: "products", group: "导航", label: "商品库", sub: "管理 SKU、商品图册、卖点信息", page: "products", icon: "package", key: "P" },
|
||||
{ id: "projects", group: "导航", label: "视频创作", sub: "从商品或参考视频出发，选择生产方式", page: "projects", icon: "clapperboard", key: "V" },
|
||||
|
||||
@@ -0,0 +1,374 @@
|
||||
.omni-asset-picker-layer {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.omni-asset-picker.modal {
|
||||
width: min(880px, calc(100vw - 48px));
|
||||
max-width: 880px;
|
||||
height: min(680px, calc(100vh - 48px));
|
||||
}
|
||||
|
||||
.omni-asset-picker .modal-h {
|
||||
min-height: 76px;
|
||||
}
|
||||
|
||||
.omni-asset-picker-head-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.omni-asset-picker-head-actions .icon-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.omni-asset-picker-toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 136px;
|
||||
gap: 12px;
|
||||
padding: 16px 24px 0;
|
||||
}
|
||||
|
||||
.omni-asset-picker-search {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.omni-asset-picker-search > svg {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 12px;
|
||||
z-index: 1;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--black-alpha-48);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.omni-asset-picker-search .input {
|
||||
padding-left: 38px;
|
||||
}
|
||||
|
||||
.omni-asset-picker-sort {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.omni-asset-picker-body.modal-b {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.omni-asset-picker-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.omni-asset-picker-grid.is-loading {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.omni-asset-picker-skeleton {
|
||||
min-width: 0;
|
||||
padding: 8px;
|
||||
border-radius: var(--r-md);
|
||||
background: var(--background-lighter);
|
||||
box-shadow: inset 0 0 0 1px var(--border-faint);
|
||||
}
|
||||
|
||||
.omni-asset-picker-skeleton-thumb {
|
||||
width: 100%;
|
||||
display: block;
|
||||
aspect-ratio: 1;
|
||||
border-radius: var(--r-md);
|
||||
background: var(--black-alpha-4);
|
||||
}
|
||||
|
||||
.omni-asset-picker.is-character .omni-asset-picker-skeleton-thumb {
|
||||
aspect-ratio: 3 / 4;
|
||||
}
|
||||
|
||||
.omni-asset-picker-skeleton-name,
|
||||
.omni-asset-picker-skeleton-meta {
|
||||
height: 10px;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
border-radius: var(--r-sm);
|
||||
background: var(--black-alpha-7);
|
||||
}
|
||||
|
||||
.omni-asset-picker-skeleton-name {
|
||||
width: 72%;
|
||||
}
|
||||
|
||||
.omni-asset-picker-skeleton-meta {
|
||||
width: 44%;
|
||||
height: 7px;
|
||||
margin-top: 7px;
|
||||
background: var(--black-alpha-4);
|
||||
}
|
||||
|
||||
.omni-asset-picker-card {
|
||||
min-width: 0;
|
||||
padding: 8px;
|
||||
border: 0;
|
||||
border-radius: var(--r-md);
|
||||
color: var(--accent-black);
|
||||
background: var(--background-lighter);
|
||||
box-shadow: inset 0 0 0 1px var(--border-faint);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background var(--t-base), box-shadow var(--t-base);
|
||||
}
|
||||
|
||||
.omni-asset-picker-card:hover {
|
||||
background: var(--surface);
|
||||
box-shadow: inset 0 0 0 1px var(--black-alpha-24);
|
||||
}
|
||||
|
||||
.omni-asset-picker-card.is-selected {
|
||||
background: var(--heat-12);
|
||||
box-shadow: inset 0 0 0 1px var(--heat);
|
||||
}
|
||||
|
||||
.omni-asset-picker-card:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--heat-40);
|
||||
}
|
||||
|
||||
.omni-asset-picker-thumb {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
overflow: hidden;
|
||||
border-radius: var(--r-md);
|
||||
background: var(--black-alpha-4);
|
||||
}
|
||||
|
||||
.omni-asset-picker.is-character .omni-asset-picker-thumb {
|
||||
aspect-ratio: 3 / 4;
|
||||
}
|
||||
|
||||
.omni-asset-picker-thumb > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.omni-asset-picker-fallback {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--black-alpha-32);
|
||||
}
|
||||
|
||||
.omni-asset-picker-fallback svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.omni-asset-picker-check {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: var(--r-pill);
|
||||
color: var(--surface);
|
||||
background: var(--heat);
|
||||
}
|
||||
|
||||
.omni-asset-picker-check svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
.omni-asset-picker-card-name {
|
||||
display: block;
|
||||
margin-top: 9px;
|
||||
overflow: hidden;
|
||||
color: var(--accent-black);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.omni-asset-picker-card > .mono {
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
color: var(--black-alpha-48);
|
||||
font-size: 10.5px;
|
||||
}
|
||||
|
||||
.omni-asset-picker-state {
|
||||
min-height: 360px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
color: var(--black-alpha-48);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.omni-asset-picker-state > svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
color: var(--heat);
|
||||
}
|
||||
|
||||
.omni-asset-picker-state strong {
|
||||
margin-top: 4px;
|
||||
color: var(--accent-black);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.omni-asset-picker-state > span:not(.omni-asset-picker-state-icon) {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.omni-asset-picker-state .btn {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.omni-asset-picker-state-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: var(--r-md);
|
||||
color: var(--heat);
|
||||
background: var(--heat-12);
|
||||
}
|
||||
|
||||
.omni-asset-picker-state-icon svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.omni-asset-picker .modal-f {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.omni-asset-picker-selection {
|
||||
margin-right: auto;
|
||||
overflow: hidden;
|
||||
color: var(--black-alpha-48);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: .04em;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.omni-asset-upload-pane.modal-b {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(280px, 1.2fr) minmax(240px, .8fr);
|
||||
align-items: start;
|
||||
gap: 24px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.omni-asset-dropzone {
|
||||
width: 100%;
|
||||
min-height: 340px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
padding: 20px;
|
||||
border: 1px dashed var(--black-alpha-24);
|
||||
border-radius: var(--r-md);
|
||||
color: var(--black-alpha-56);
|
||||
background: var(--background-lighter);
|
||||
cursor: pointer;
|
||||
transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
|
||||
}
|
||||
|
||||
.omni-asset-dropzone:hover {
|
||||
border-color: var(--heat-40);
|
||||
color: var(--heat);
|
||||
background: var(--heat-12);
|
||||
}
|
||||
|
||||
.omni-asset-dropzone:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--heat-40);
|
||||
}
|
||||
|
||||
.omni-asset-dropzone.has-preview {
|
||||
background: var(--black-alpha-4);
|
||||
}
|
||||
|
||||
.omni-asset-dropzone-prompt {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.omni-asset-dropzone-prompt > svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.omni-asset-dropzone-prompt strong {
|
||||
color: var(--accent-black);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.omni-asset-dropzone-prompt small {
|
||||
color: var(--black-alpha-48);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.omni-asset-upload-thumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 380px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.omni-asset-upload-field {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.omni-asset-picker-layer {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.omni-asset-picker.modal {
|
||||
width: calc(100vw - 24px);
|
||||
height: calc(100vh - 24px);
|
||||
}
|
||||
|
||||
.omni-asset-picker-toolbar,
|
||||
.omni-asset-upload-pane.modal-b {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.omni-asset-picker-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.omni-asset-dropzone {
|
||||
min-height: 240px;
|
||||
}
|
||||
|
||||
.omni-asset-picker-selection {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,413 @@
|
||||
import { useEffect, useId, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
ArrowLeft,
|
||||
Box,
|
||||
Check,
|
||||
LoaderCircle,
|
||||
Plus,
|
||||
Search,
|
||||
Upload,
|
||||
UserRound,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { api } from "../api";
|
||||
import type { CreationRef } from "../types";
|
||||
import "./asset-select-modal.css";
|
||||
|
||||
export type AssetModalType = "product" | "character";
|
||||
|
||||
interface AssetSelectModalProps {
|
||||
open: boolean;
|
||||
type: AssetModalType;
|
||||
onClose: () => void;
|
||||
onSelect: (ref: CreationRef) => void;
|
||||
onNotify?: (type: "success" | "error" | "info", text: string) => void;
|
||||
}
|
||||
|
||||
const assetLibraryCache = new Map<string, CreationRef[]>();
|
||||
|
||||
function assetLibraryKey(type: AssetModalType, query: string) {
|
||||
return `${type}:${query.trim().toLocaleLowerCase("zh-CN")}`;
|
||||
}
|
||||
|
||||
export function AssetSelectModal({
|
||||
open,
|
||||
type,
|
||||
onClose,
|
||||
onSelect,
|
||||
onNotify,
|
||||
}: AssetSelectModalProps) {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [debouncedQuery, setDebouncedQuery] = useState("");
|
||||
const [items, setItems] = useState<CreationRef[]>([]);
|
||||
const [loadedKey, setLoadedKey] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [selectedRef, setSelectedRef] = useState<CreationRef | null>(null);
|
||||
const [sortOrder, setSortOrder] = useState<"recent" | "name">("recent");
|
||||
const [isAddingNew, setIsAddingNew] = useState(false);
|
||||
const [newName, setNewName] = useState("");
|
||||
const [newFile, setNewFile] = useState<File | null>(null);
|
||||
const [newPreview, setNewPreview] = useState("");
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const notifyRef = useRef(onNotify);
|
||||
const nameInputId = useId();
|
||||
const titleId = useId();
|
||||
notifyRef.current = onNotify;
|
||||
|
||||
const titleText = type === "product" ? "商品" : "角色";
|
||||
const title = type === "product" ? "商品库" : "角色库";
|
||||
const subtitle = type === "product" ? "[ PRODUCT · SELECT ]" : "[ CHARACTER · SELECT ]";
|
||||
const requestKey = assetLibraryKey(type, debouncedQuery);
|
||||
const cachedItems = assetLibraryCache.get(requestKey);
|
||||
const currentItems = loadedKey === requestKey ? items : (cachedItems || []);
|
||||
const hasCurrentData = loadedKey === requestKey || Boolean(cachedItems);
|
||||
const visibleItems = useMemo(() => {
|
||||
if (sortOrder === "recent") return currentItems;
|
||||
return [...currentItems].sort((left, right) => left.name.localeCompare(right.name, "zh-CN"));
|
||||
}, [currentItems, sortOrder]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
setIsAddingNew(false);
|
||||
setSearchQuery("");
|
||||
setSelectedRef(null);
|
||||
setSortOrder("recent");
|
||||
setNewFile(null);
|
||||
setNewPreview("");
|
||||
setNewName("");
|
||||
return;
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
setDebouncedQuery("");
|
||||
return;
|
||||
}
|
||||
const query = searchQuery.trim();
|
||||
if (!query) {
|
||||
setDebouncedQuery("");
|
||||
return;
|
||||
}
|
||||
const timer = window.setTimeout(() => setDebouncedQuery(query), 180);
|
||||
return () => window.clearTimeout(timer);
|
||||
}, [open, searchQuery]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
|
||||
const cached = assetLibraryCache.get(requestKey);
|
||||
if (cached) {
|
||||
setItems(cached);
|
||||
setLoadedKey(requestKey);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
setLoading(true);
|
||||
setSelectedRef(null);
|
||||
const types: CreationRef["type"][] = type === "product" ? ["product"] : ["model", "character"];
|
||||
void api
|
||||
.searchMentions({ q: debouncedQuery, types, limit: 20 })
|
||||
.then((response) => {
|
||||
if (cancelled) return;
|
||||
const results = response.results || [];
|
||||
assetLibraryCache.set(requestKey, results);
|
||||
setItems(results);
|
||||
setLoadedKey(requestKey);
|
||||
})
|
||||
.catch((error) => {
|
||||
if (cancelled) return;
|
||||
assetLibraryCache.set(requestKey, []);
|
||||
setItems([]);
|
||||
setLoadedKey(requestKey);
|
||||
notifyRef.current?.("error", (error as Error).message || "加载失败");
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setLoading(false);
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [debouncedQuery, open, requestKey, type]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const onKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key !== "Escape" || uploading) return;
|
||||
event.preventDefault();
|
||||
onClose();
|
||||
};
|
||||
document.addEventListener("keydown", onKeyDown);
|
||||
return () => document.removeEventListener("keydown", onKeyDown);
|
||||
}, [onClose, open, uploading]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (newPreview) URL.revokeObjectURL(newPreview);
|
||||
};
|
||||
}, [newPreview]);
|
||||
|
||||
const handleFilePick = (file: File) => {
|
||||
if (!file.type.startsWith("image/")) {
|
||||
notifyRef.current?.("info", "请选择图片文件");
|
||||
return;
|
||||
}
|
||||
setNewFile(file);
|
||||
setNewName((current) => current.trim() || file.name.replace(/\.[^/.]+$/, ""));
|
||||
setNewPreview(URL.createObjectURL(file));
|
||||
};
|
||||
|
||||
const handleUploadSubmit = async () => {
|
||||
if (!newFile || uploading) {
|
||||
if (!newFile) notifyRef.current?.("info", `请先选择${titleText}图片`);
|
||||
return;
|
||||
}
|
||||
const name = newName.trim() || newFile.name.replace(/\.[^/.]+$/, "");
|
||||
setUploading(true);
|
||||
try {
|
||||
let finalRef: CreationRef;
|
||||
if (type === "character") {
|
||||
const form = new FormData();
|
||||
form.append("file", newFile);
|
||||
form.append("name", name);
|
||||
const model = await api.uploadModel(form);
|
||||
finalRef = {
|
||||
type: "model",
|
||||
id: model.id,
|
||||
name: model.name,
|
||||
cover: model.portrait,
|
||||
};
|
||||
} else {
|
||||
const form = new FormData();
|
||||
form.append("file", newFile);
|
||||
const uploaded = await api.uploadFreeVideoRef(form);
|
||||
const product = await api.createProduct({
|
||||
title: name,
|
||||
cover_asset: uploaded.asset_id,
|
||||
images: [{ asset: uploaded.asset_id, sort_order: 0, is_primary: true }],
|
||||
});
|
||||
finalRef = {
|
||||
type: "product",
|
||||
id: product.id,
|
||||
name: product.title,
|
||||
cover: product.cover_preview_url || uploaded.thumb_url || uploaded.url,
|
||||
};
|
||||
}
|
||||
|
||||
notifyRef.current?.("success", `已新增${titleText}：${finalRef.name}`);
|
||||
for (const key of assetLibraryCache.keys()) {
|
||||
if (key.startsWith(`${type}:`)) assetLibraryCache.delete(key);
|
||||
}
|
||||
onSelect(finalRef);
|
||||
onClose();
|
||||
} catch (error) {
|
||||
notifyRef.current?.("error", (error as Error).message || `新增${titleText}失败`);
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal-bg modal-priority show omni-asset-picker-layer"
|
||||
onMouseDown={(event) => {
|
||||
if (event.target === event.currentTarget && !uploading) onClose();
|
||||
}}
|
||||
>
|
||||
<section
|
||||
className={`modal omni-asset-picker${type === "character" ? " is-character" : " is-product"}`}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby={titleId}
|
||||
>
|
||||
<span className="corner-tr" />
|
||||
<span className="corner-bl" />
|
||||
<header className="modal-h">
|
||||
<span className="ic-m" aria-hidden="true">
|
||||
{type === "product" ? <Box /> : <UserRound />}
|
||||
</span>
|
||||
<div className="ti" id={titleId}>
|
||||
{isAddingNew ? `新增${titleText}` : title}
|
||||
<span>{isAddingNew ? "[ UPLOAD · CREATE ]" : subtitle}</span>
|
||||
</div>
|
||||
<div className="omni-asset-picker-head-actions">
|
||||
{isAddingNew ? (
|
||||
<button type="button" className="btn btn-sm" disabled={uploading} onClick={() => setIsAddingNew(false)}>
|
||||
<ArrowLeft /> 返回选择
|
||||
</button>
|
||||
) : (
|
||||
<button type="button" className="btn btn-sm" onClick={() => setIsAddingNew(true)}>
|
||||
<Plus /> 新增{titleText}
|
||||
</button>
|
||||
)}
|
||||
<button type="button" className="icon-btn" disabled={uploading} onClick={onClose} aria-label="关闭">
|
||||
<X />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{isAddingNew ? (
|
||||
<>
|
||||
<div className="modal-b omni-asset-upload-pane">
|
||||
<button
|
||||
type="button"
|
||||
className={`omni-asset-dropzone${newPreview ? " has-preview" : ""}`}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={uploading}
|
||||
>
|
||||
{newPreview ? (
|
||||
<img src={newPreview} alt={`${titleText}图片预览`} className="omni-asset-upload-thumb" />
|
||||
) : (
|
||||
<span className="omni-asset-dropzone-prompt">
|
||||
<Upload />
|
||||
<strong>上传一张清晰的{titleText}图片</strong>
|
||||
<small>支持 JPG、PNG、WebP · 建议主体完整、无遮挡</small>
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
hidden
|
||||
onChange={(event) => {
|
||||
const file = event.target.files?.[0];
|
||||
event.target.value = "";
|
||||
if (file) handleFilePick(file);
|
||||
}}
|
||||
/>
|
||||
<div className="field omni-asset-upload-field">
|
||||
<label className="field-label" htmlFor={nameInputId}>{titleText}名称</label>
|
||||
<input
|
||||
id={nameInputId}
|
||||
className="input"
|
||||
type="text"
|
||||
placeholder={`输入${titleText}名称`}
|
||||
value={newName}
|
||||
disabled={uploading}
|
||||
onChange={(event) => setNewName(event.target.value)}
|
||||
/>
|
||||
<span className="field-hint">
|
||||
{type === "product" ? "创建后会进入商品库，可继续补充卖点与规格。" : "创建后会进入角色库，后续镜头可持续锁定同一人物。"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<footer className="modal-f">
|
||||
<button type="button" className="btn" disabled={uploading} onClick={() => setIsAddingNew(false)}>取消</button>
|
||||
<button type="button" className="btn btn-primary" disabled={!newFile || uploading} onClick={handleUploadSubmit}>
|
||||
{uploading ? <><LoaderCircle className="spin" /> 正在创建</> : `创建并使用${titleText}`}
|
||||
</button>
|
||||
</footer>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="omni-asset-picker-toolbar">
|
||||
<label className="omni-asset-picker-search">
|
||||
<Search aria-hidden="true" />
|
||||
<input
|
||||
className="input"
|
||||
type="search"
|
||||
placeholder={`搜索已有${titleText}`}
|
||||
value={searchQuery}
|
||||
onChange={(event) => setSearchQuery(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<select
|
||||
className="select omni-asset-picker-sort"
|
||||
aria-label="排序方式"
|
||||
value={sortOrder}
|
||||
onChange={(event) => setSortOrder(event.target.value as "recent" | "name")}
|
||||
>
|
||||
<option value="recent">最近添加</option>
|
||||
<option value="name">按名称</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="modal-b omni-asset-picker-body" aria-busy={loading || !hasCurrentData}>
|
||||
{!hasCurrentData ? (
|
||||
<div className="omni-asset-picker-grid is-loading" role="status" aria-label={`正在加载${titleText}库`}>
|
||||
{Array.from({ length: 10 }, (_, index) => (
|
||||
<div className="omni-asset-picker-skeleton" key={index} aria-hidden="true">
|
||||
<span className="omni-asset-picker-skeleton-thumb" />
|
||||
<span className="omni-asset-picker-skeleton-name" />
|
||||
<span className="omni-asset-picker-skeleton-meta" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : visibleItems.length === 0 ? (
|
||||
<div className="omni-asset-picker-state">
|
||||
<span className="omni-asset-picker-state-icon" aria-hidden="true">
|
||||
{type === "product" ? <Box /> : <UserRound />}
|
||||
</span>
|
||||
<strong>{searchQuery ? `没有找到“${searchQuery}”` : `暂时没有${titleText}`}</strong>
|
||||
<span>{searchQuery ? "换个关键词试试" : `可以先新增一个${titleText}`}</span>
|
||||
{!searchQuery ? (
|
||||
<button type="button" className="btn btn-primary" onClick={() => setIsAddingNew(true)}>
|
||||
<Plus /> 新增{titleText}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
) : (
|
||||
<div className="omni-asset-picker-grid">
|
||||
{visibleItems.map((item) => {
|
||||
const isSelected = selectedRef?.type === item.type && selectedRef.id === item.id;
|
||||
const displayName = item.name.split(" · ")[0];
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
key={`${item.type}:${item.id}`}
|
||||
className={`omni-asset-picker-card${isSelected ? " is-selected" : ""}`}
|
||||
aria-pressed={isSelected}
|
||||
onClick={() => setSelectedRef(item)}
|
||||
onDoubleClick={() => {
|
||||
onSelect(item);
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
<span className="omni-asset-picker-thumb">
|
||||
{item.cover ? (
|
||||
<img src={item.cover} alt="" />
|
||||
) : (
|
||||
<span className="omni-asset-picker-fallback">
|
||||
{type === "product" ? <Box /> : <UserRound />}
|
||||
</span>
|
||||
)}
|
||||
{isSelected ? <span className="omni-asset-picker-check"><Check /></span> : null}
|
||||
</span>
|
||||
<span className="omni-asset-picker-card-name" title={displayName}>{displayName}</span>
|
||||
<span className="mono">// {item.type === "product" ? "商品" : item.type === "model" ? "角色库" : "角色素材"}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<footer className="modal-f">
|
||||
<span className="omni-asset-picker-selection">
|
||||
{selectedRef ? `已选择：${selectedRef.name.split(" · ")[0]}` : `选择一个${titleText}后添加`}
|
||||
</span>
|
||||
<button type="button" className="btn" onClick={onClose}>取消</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
disabled={!selectedRef}
|
||||
onClick={() => {
|
||||
if (!selectedRef) return;
|
||||
onSelect(selectedRef);
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
添加{titleText}
|
||||
</button>
|
||||
</footer>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
.rich-mention-editor {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
color: var(--accent-black);
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
line-height: 1.65;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.rich-mention-editor:empty::before {
|
||||
color: var(--black-alpha-48);
|
||||
content: attr(data-placeholder);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.rich-mention-editor[aria-disabled="true"] {
|
||||
color: var(--black-alpha-48);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.rich-mention-token {
|
||||
position: relative;
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
max-width: 32px;
|
||||
height: 32px;
|
||||
min-height: 32px;
|
||||
max-height: 32px;
|
||||
aspect-ratio: 1;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
overflow: visible;
|
||||
margin: 0 3px;
|
||||
border-radius: var(--r-md);
|
||||
color: var(--black-alpha-56);
|
||||
background: var(--background-lighter);
|
||||
box-shadow: inset 0 0 0 1px var(--border-faint);
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.rich-mention-editor .rich-mention-token > img,
|
||||
.rich-mention-fallback {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
max-height: 100%;
|
||||
display: block;
|
||||
border-radius: var(--r-md);
|
||||
}
|
||||
|
||||
.rich-mention-editor .rich-mention-token > img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.rich-mention-fallback {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.rich-mention-preview {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 80;
|
||||
width: 264px;
|
||||
min-width: 264px;
|
||||
max-width: 264px;
|
||||
display: none;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
border-radius: var(--r-md);
|
||||
color: var(--accent-black);
|
||||
background: var(--surface-raised);
|
||||
box-shadow: var(--shadow-floating);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
text-align: left;
|
||||
transform: translateY(-4px);
|
||||
transition: opacity var(--t-base), transform var(--t-base);
|
||||
}
|
||||
|
||||
.rich-mention-token:hover .rich-mention-preview,
|
||||
.rich-mention-token:focus-within .rich-mention-preview {
|
||||
display: grid;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.rich-mention-preview-head {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.rich-mention-preview-head strong {
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rich-mention-preview-head small {
|
||||
flex: 0 0 auto;
|
||||
color: var(--black-alpha-48);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10.5px;
|
||||
}
|
||||
|
||||
.rich-mention-preview-media {
|
||||
width: 240px;
|
||||
min-width: 240px;
|
||||
max-width: 240px;
|
||||
height: 240px;
|
||||
min-height: 240px;
|
||||
max-height: 240px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
border-radius: var(--r-md);
|
||||
color: var(--black-alpha-48);
|
||||
background: var(--background-lighter);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.rich-mention-preview-media img {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
max-height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
@@ -0,0 +1,336 @@
|
||||
import {
|
||||
forwardRef,
|
||||
type ClipboardEvent,
|
||||
type FormEvent,
|
||||
type KeyboardEvent,
|
||||
type PointerEvent as ReactPointerEvent,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useRef,
|
||||
} from "react";
|
||||
import type { CreationRef } from "../types";
|
||||
import "./rich-mention-editor.css";
|
||||
|
||||
const TYPE_LABELS: Record<CreationRef["type"], string> = {
|
||||
asset: "素材",
|
||||
character: "角色",
|
||||
model: "角色",
|
||||
product: "商品",
|
||||
scene: "场景",
|
||||
};
|
||||
|
||||
function shortName(name: string) {
|
||||
return name.split(" · ")[0].trim();
|
||||
}
|
||||
|
||||
export function getMentionFreeText(value: string, refs: CreationRef[]) {
|
||||
const mentionNames = Array.from(
|
||||
new Set(refs.map((ref) => shortName(ref.name)).filter(Boolean)),
|
||||
).sort((a, b) => b.length - a.length);
|
||||
|
||||
let text = value;
|
||||
mentionNames.forEach((name) => {
|
||||
text = text.split(`@${name}`).join(" ");
|
||||
});
|
||||
return text
|
||||
.replace(/[\u200B-\u200D\uFEFF]/g, "")
|
||||
.replace(/\s+/g, " ")
|
||||
.trim();
|
||||
}
|
||||
|
||||
function escapeRegExp(value: string) {
|
||||
return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
||||
}
|
||||
|
||||
function serializeNode(node: Node): string {
|
||||
if (node.nodeType === Node.TEXT_NODE) return node.textContent || "";
|
||||
if (!(node instanceof HTMLElement)) {
|
||||
return Array.from(node.childNodes).map(serializeNode).join("");
|
||||
}
|
||||
if (node.dataset.mentionName) return `@${node.dataset.mentionName}`;
|
||||
if (node.tagName === "BR") return "\n";
|
||||
const text = Array.from(node.childNodes).map(serializeNode).join("");
|
||||
if ((node.tagName === "DIV" || node.tagName === "P") && node.nextSibling && !text.endsWith("\n")) {
|
||||
return `${text}\n`;
|
||||
}
|
||||
return text;
|
||||
}
|
||||
|
||||
function serializeEditor(root: HTMLElement) {
|
||||
return Array.from(root.childNodes)
|
||||
.map(serializeNode)
|
||||
.join("")
|
||||
.replace(/\u00a0/g, " ");
|
||||
}
|
||||
|
||||
function createMentionToken(ref: CreationRef) {
|
||||
const name = shortName(ref.name) || TYPE_LABELS[ref.type];
|
||||
const token = document.createElement("span");
|
||||
token.className = "rich-mention-token";
|
||||
token.contentEditable = "false";
|
||||
token.dataset.mentionName = name;
|
||||
token.dataset.refKey = `${ref.type}:${ref.id}`;
|
||||
token.setAttribute("aria-label", `${TYPE_LABELS[ref.type]}：${name}`);
|
||||
token.title = `${TYPE_LABELS[ref.type]}：${name}`;
|
||||
|
||||
if (ref.cover) {
|
||||
const image = document.createElement("img");
|
||||
image.src = ref.cover;
|
||||
image.alt = "";
|
||||
token.append(image);
|
||||
} else {
|
||||
const fallback = document.createElement("span");
|
||||
fallback.className = "rich-mention-fallback";
|
||||
fallback.textContent = TYPE_LABELS[ref.type].slice(0, 1);
|
||||
token.append(fallback);
|
||||
}
|
||||
|
||||
const preview = document.createElement("span");
|
||||
preview.className = "rich-mention-preview";
|
||||
preview.setAttribute("role", "tooltip");
|
||||
|
||||
const head = document.createElement("span");
|
||||
head.className = "rich-mention-preview-head";
|
||||
const title = document.createElement("strong");
|
||||
title.textContent = name;
|
||||
const type = document.createElement("small");
|
||||
type.textContent = TYPE_LABELS[ref.type];
|
||||
head.append(title, type);
|
||||
|
||||
const media = document.createElement("span");
|
||||
media.className = "rich-mention-preview-media";
|
||||
if (ref.cover) {
|
||||
const image = document.createElement("img");
|
||||
image.src = ref.cover;
|
||||
image.alt = name;
|
||||
media.append(image);
|
||||
} else {
|
||||
media.textContent = TYPE_LABELS[ref.type];
|
||||
}
|
||||
preview.append(head, media);
|
||||
token.append(preview);
|
||||
return token;
|
||||
}
|
||||
|
||||
function renderValue(root: HTMLElement, value: string, refs: CreationRef[]) {
|
||||
root.replaceChildren();
|
||||
if (!value) return;
|
||||
|
||||
const byName = new Map<string, CreationRef>();
|
||||
refs.forEach((ref) => {
|
||||
const name = shortName(ref.name);
|
||||
if (name && !byName.has(name)) byName.set(name, ref);
|
||||
});
|
||||
const names = Array.from(byName.keys()).sort((a, b) => b.length - a.length);
|
||||
if (!names.length) {
|
||||
root.append(document.createTextNode(value));
|
||||
return;
|
||||
}
|
||||
|
||||
const matcher = new RegExp(`@(${names.map(escapeRegExp).join("|")})`, "g");
|
||||
let cursor = 0;
|
||||
let match: RegExpExecArray | null;
|
||||
while ((match = matcher.exec(value))) {
|
||||
if (match.index > cursor) root.append(document.createTextNode(value.slice(cursor, match.index)));
|
||||
const ref = byName.get(match[1]);
|
||||
root.append(ref ? createMentionToken(ref) : document.createTextNode(match[0]));
|
||||
cursor = match.index + match[0].length;
|
||||
}
|
||||
if (cursor < value.length) root.append(document.createTextNode(value.slice(cursor)));
|
||||
}
|
||||
|
||||
function placeCaretAtEnd(root: HTMLElement) {
|
||||
const range = document.createRange();
|
||||
range.selectNodeContents(root);
|
||||
range.collapse(false);
|
||||
const selection = window.getSelection();
|
||||
selection?.removeAllRanges();
|
||||
selection?.addRange(range);
|
||||
}
|
||||
|
||||
export type RichMentionEditorHandle = {
|
||||
focus: () => void;
|
||||
focusAtEnd: () => void;
|
||||
insertMention: (ref: CreationRef, replaceTrigger?: boolean) => void;
|
||||
};
|
||||
|
||||
type RichMentionEditorProps = {
|
||||
id?: string;
|
||||
value: string;
|
||||
refs: CreationRef[];
|
||||
placeholder: string;
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
submitOnEnter?: boolean;
|
||||
onChange: (value: string) => void;
|
||||
onAtTrigger?: () => void;
|
||||
onSubmit?: () => void;
|
||||
};
|
||||
|
||||
export const RichMentionEditor = forwardRef<RichMentionEditorHandle, RichMentionEditorProps>(
|
||||
function RichMentionEditor(
|
||||
{
|
||||
id,
|
||||
value,
|
||||
refs,
|
||||
placeholder,
|
||||
ariaLabel = "创作描述",
|
||||
className = "",
|
||||
disabled = false,
|
||||
submitOnEnter = false,
|
||||
onChange,
|
||||
onAtTrigger,
|
||||
onSubmit,
|
||||
},
|
||||
forwardedRef,
|
||||
) {
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
const signatureRef = useRef("");
|
||||
const changeRef = useRef(onChange);
|
||||
const atTriggerRef = useRef(onAtTrigger);
|
||||
const submitRef = useRef(onSubmit);
|
||||
changeRef.current = onChange;
|
||||
atTriggerRef.current = onAtTrigger;
|
||||
submitRef.current = onSubmit;
|
||||
|
||||
const emitChange = () => {
|
||||
const root = rootRef.current;
|
||||
if (!root) return;
|
||||
const next = serializeEditor(root);
|
||||
const isVisuallyEmpty = !next
|
||||
.replace(/[\u200B-\u200D\uFEFF]/g, "")
|
||||
.trim();
|
||||
if (isVisuallyEmpty) root.replaceChildren();
|
||||
changeRef.current(isVisuallyEmpty ? "" : next);
|
||||
};
|
||||
|
||||
useImperativeHandle(forwardedRef, () => ({
|
||||
focus: () => rootRef.current?.focus(),
|
||||
focusAtEnd: () => {
|
||||
const root = rootRef.current;
|
||||
if (!root) return;
|
||||
root.focus();
|
||||
placeCaretAtEnd(root);
|
||||
},
|
||||
insertMention: (ref, replaceTrigger = false) => {
|
||||
const root = rootRef.current;
|
||||
if (!root || disabled) return;
|
||||
root.focus();
|
||||
const selection = window.getSelection();
|
||||
const range = selection?.rangeCount ? selection.getRangeAt(0) : document.createRange();
|
||||
if (!root.contains(range.commonAncestorContainer)) {
|
||||
range.selectNodeContents(root);
|
||||
range.collapse(false);
|
||||
}
|
||||
|
||||
if (replaceTrigger && range.collapsed && range.startContainer.nodeType === Node.TEXT_NODE) {
|
||||
const text = range.startContainer.textContent || "";
|
||||
const trigger = text.slice(0, range.startOffset).match(/@\S*$/)?.[0];
|
||||
if (trigger) range.setStart(range.startContainer, range.startOffset - trigger.length);
|
||||
}
|
||||
|
||||
const before = document.createRange();
|
||||
before.selectNodeContents(root);
|
||||
before.setEnd(range.startContainer, range.startOffset);
|
||||
const prefix = serializeNode(before.cloneContents());
|
||||
const fragment = document.createDocumentFragment();
|
||||
if (prefix && !/\s$/.test(prefix)) fragment.append(document.createTextNode(" "));
|
||||
fragment.append(createMentionToken(ref));
|
||||
const tail = document.createTextNode(" ");
|
||||
fragment.append(tail);
|
||||
range.deleteContents();
|
||||
range.insertNode(fragment);
|
||||
range.setStartAfter(tail);
|
||||
range.collapse(true);
|
||||
selection?.removeAllRanges();
|
||||
selection?.addRange(range);
|
||||
emitChange();
|
||||
},
|
||||
}), [disabled]);
|
||||
|
||||
useEffect(() => {
|
||||
const root = rootRef.current;
|
||||
if (!root) return;
|
||||
const signature = refs.map((ref) => `${ref.type}:${ref.id}:${ref.name}:${ref.cover || ""}`).join("|");
|
||||
const current = serializeEditor(root);
|
||||
if (current === value && signature === signatureRef.current) return;
|
||||
const focused = document.activeElement === root;
|
||||
renderValue(root, value, refs);
|
||||
signatureRef.current = signature;
|
||||
if (focused) placeCaretAtEnd(root);
|
||||
}, [refs, value]);
|
||||
|
||||
const handleInput = (event: FormEvent<HTMLDivElement>) => {
|
||||
emitChange();
|
||||
const native = event.nativeEvent as InputEvent;
|
||||
if (native.data === "@") atTriggerRef.current?.();
|
||||
};
|
||||
|
||||
const handlePaste = (event: ClipboardEvent<HTMLDivElement>) => {
|
||||
event.preventDefault();
|
||||
const text = event.clipboardData.getData("text/plain");
|
||||
const selection = window.getSelection();
|
||||
if (!selection?.rangeCount) return;
|
||||
const range = selection.getRangeAt(0);
|
||||
range.deleteContents();
|
||||
const node = document.createTextNode(text);
|
||||
range.insertNode(node);
|
||||
range.setStartAfter(node);
|
||||
range.collapse(true);
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(range);
|
||||
emitChange();
|
||||
};
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
|
||||
if (submitOnEnter && event.key === "Enter" && !event.shiftKey) {
|
||||
event.preventDefault();
|
||||
submitRef.current?.();
|
||||
}
|
||||
};
|
||||
|
||||
const positionPreview = (event: ReactPointerEvent<HTMLDivElement>) => {
|
||||
const root = rootRef.current;
|
||||
const target = event.target as Element;
|
||||
const token = target.closest<HTMLElement>(".rich-mention-token");
|
||||
if (!root || !token || !root.contains(token)) return;
|
||||
const preview = token.querySelector<HTMLElement>(".rich-mention-preview");
|
||||
if (!preview) return;
|
||||
const tokenRect = token.getBoundingClientRect();
|
||||
const previewHeight = preview.offsetHeight || 302;
|
||||
const previewWidth = preview.offsetWidth || 244;
|
||||
const left = Math.min(Math.max(12, tokenRect.left), window.innerWidth - previewWidth - 12);
|
||||
const hasRoomBelow = window.innerHeight - tokenRect.bottom >= previewHeight + 20;
|
||||
const desiredTop = hasRoomBelow
|
||||
? tokenRect.bottom + 8
|
||||
: Math.max(12, tokenRect.top - previewHeight - 8);
|
||||
const top = Math.min(
|
||||
Math.max(12, desiredTop),
|
||||
Math.max(12, window.innerHeight - previewHeight - 12),
|
||||
);
|
||||
preview.style.left = `${left}px`;
|
||||
preview.style.top = `${top}px`;
|
||||
preview.dataset.side = hasRoomBelow ? "below" : "above";
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
id={id}
|
||||
ref={rootRef}
|
||||
className={`rich-mention-editor${className ? ` ${className}` : ""}`}
|
||||
contentEditable={!disabled}
|
||||
suppressContentEditableWarning
|
||||
role="textbox"
|
||||
aria-label={ariaLabel}
|
||||
aria-multiline="true"
|
||||
aria-disabled={disabled}
|
||||
data-placeholder={placeholder}
|
||||
onInput={handleInput}
|
||||
onPaste={handlePaste}
|
||||
onKeyDown={handleKeyDown}
|
||||
onPointerOver={positionPreview}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
@@ -779,6 +779,12 @@
|
||||
box-shadow: 0 9px 18px rgba(0, 47, 167, .17);
|
||||
}
|
||||
|
||||
.omni-start-generate:disabled {
|
||||
opacity: .42;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.omni-case-library {
|
||||
padding: 0 4px;
|
||||
transition: opacity 180ms ease, transform 180ms ease;
|
||||
@@ -1685,3 +1691,288 @@
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
/* 全能创作 · 结构化引用槽位 */
|
||||
.omni-composer-main-wrap {
|
||||
display: grid;
|
||||
grid-template-columns: max-content minmax(0, 1fr);
|
||||
gap: 20px;
|
||||
align-items: stretch;
|
||||
padding: 4px 0 12px;
|
||||
}
|
||||
|
||||
.omni-composer-slots {
|
||||
width: max-content;
|
||||
max-width: 300px;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
height: 164px;
|
||||
min-height: 164px;
|
||||
max-height: 164px;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow: hidden;
|
||||
padding: 2px 16px 2px 2px;
|
||||
border-right: 1px solid var(--border-faint);
|
||||
}
|
||||
|
||||
.omni-slots-grid {
|
||||
width: max-content;
|
||||
max-width: 280px;
|
||||
min-height: 0;
|
||||
flex: 1 1 auto;
|
||||
display: grid;
|
||||
grid-auto-rows: auto;
|
||||
align-content: start;
|
||||
gap: 8px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
padding: 0 2px 2px 0;
|
||||
}
|
||||
|
||||
.omni-slots-grid.is-columns-1 {
|
||||
grid-template-columns: 88px;
|
||||
}
|
||||
|
||||
.omni-slots-grid.is-columns-2 {
|
||||
grid-template-columns: repeat(2, 88px);
|
||||
}
|
||||
|
||||
.omni-slots-grid.is-columns-3 {
|
||||
grid-template-columns: repeat(3, 88px);
|
||||
}
|
||||
|
||||
.omni-slots-grid.is-columns-4 {
|
||||
grid-template-columns: repeat(4, 64px);
|
||||
}
|
||||
|
||||
.omni-slots-grid:focus-within {
|
||||
scrollbar-color: var(--black-alpha-12) transparent;
|
||||
}
|
||||
|
||||
.omni-slot-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 11 / 12;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: var(--r-md);
|
||||
color: var(--black-alpha-56);
|
||||
background: var(--surface);
|
||||
box-shadow: inset 0 0 0 1px var(--border-faint);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.omni-slot-box.is-empty {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px dashed var(--border-faint);
|
||||
border-style: dashed;
|
||||
background: var(--background-lighter);
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
|
||||
}
|
||||
|
||||
.omni-slot-box.is-empty:hover {
|
||||
border-color: var(--heat-40);
|
||||
color: var(--heat);
|
||||
background: var(--heat-12);
|
||||
}
|
||||
|
||||
.omni-slot-box:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--heat-40);
|
||||
}
|
||||
|
||||
.omni-slot-tag {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
z-index: 2;
|
||||
min-height: 17px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
max-width: calc(100% - 10px);
|
||||
overflow: hidden;
|
||||
padding: 0 6px;
|
||||
border-radius: var(--r-pill);
|
||||
color: var(--surface);
|
||||
background: var(--accent-black);
|
||||
font-size: 9.5px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
pointer-events: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.omni-slot-plus {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.omni-slot-plus svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.omni-slot-box.is-filled {
|
||||
background: var(--black-alpha-4);
|
||||
}
|
||||
|
||||
.omni-slot-img,
|
||||
.omni-slot-img-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.omni-slot-preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: var(--r-md);
|
||||
overflow: hidden;
|
||||
background: var(--black-alpha-4);
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.omni-slot-preview:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 2px var(--heat-40);
|
||||
}
|
||||
|
||||
.omni-slot-img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.omni-slot-img-placeholder {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: var(--black-alpha-32);
|
||||
background: var(--black-alpha-4);
|
||||
}
|
||||
|
||||
.omni-slot-img-placeholder svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.omni-slot-remove,
|
||||
.omni-slot-at-btn {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
transition: color var(--t-base), background var(--t-base), opacity var(--t-base);
|
||||
}
|
||||
|
||||
.omni-slot-remove {
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
border: 0;
|
||||
border-radius: var(--r-sm);
|
||||
color: var(--black-alpha-48);
|
||||
background: var(--surface);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.omni-slot-box:hover .omni-slot-remove,
|
||||
.omni-slot-remove:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.omni-slot-remove:hover {
|
||||
color: var(--accent-crimson);
|
||||
background: var(--crimson-bg);
|
||||
}
|
||||
|
||||
.omni-slot-at-btn {
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 0;
|
||||
border-radius: var(--r-md);
|
||||
color: var(--accent-black);
|
||||
background: var(--surface);
|
||||
box-shadow: inset 0 0 0 1px var(--border-faint);
|
||||
}
|
||||
|
||||
.omni-slot-at-btn:hover {
|
||||
color: var(--heat);
|
||||
background: var(--heat-12);
|
||||
box-shadow: inset 0 0 0 1px var(--heat-40);
|
||||
}
|
||||
|
||||
.omni-slot-at-char {
|
||||
font-family: var(--font-inter);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.omni-slots-counter {
|
||||
flex: 0 0 auto;
|
||||
margin: auto 0 0;
|
||||
color: var(--black-alpha-48);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10.5px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.omni-composer-editor {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.omni-composer-editor #omniStartPrompt {
|
||||
min-height: 164px;
|
||||
max-height: 190px;
|
||||
padding: 8px 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.omni-composer-main-wrap {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.omni-composer-slots {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
min-height: 88px;
|
||||
max-height: none;
|
||||
padding: 0 2px 12px;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--border-faint);
|
||||
}
|
||||
|
||||
.omni-slots-grid,
|
||||
.omni-slots-grid.is-columns-1,
|
||||
.omni-slots-grid.is-columns-2,
|
||||
.omni-slots-grid.is-columns-3,
|
||||
.omni-slots-grid.is-columns-4 {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
grid-template-columns: repeat(auto-fit, minmax(64px, 88px));
|
||||
grid-auto-rows: auto;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.omni-slot-remove {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2019,7 +2019,7 @@
|
||||
gap: 6px;
|
||||
max-width: 220px;
|
||||
padding: 3px 8px 3px 4px;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--r-pill);
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
@@ -2027,7 +2027,7 @@
|
||||
.omni-mention-chip.has-thumb {
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
border-radius: 10px;
|
||||
border-radius: var(--r-md);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
overflow: visible;
|
||||
@@ -2038,10 +2038,11 @@
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
padding: 0;
|
||||
border: 1px solid rgba(34, 42, 54, .1);
|
||||
border-radius: 10px;
|
||||
border: 0;
|
||||
border-radius: var(--r-md);
|
||||
overflow: hidden;
|
||||
background: #f3f4f7;
|
||||
background: var(--background-lighter);
|
||||
box-shadow: inset 0 0 0 1px var(--border-faint);
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
@@ -2055,15 +2056,15 @@
|
||||
.omni-mention-chip i {
|
||||
flex: 0 0 auto;
|
||||
padding: 2px 6px;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--r-pill);
|
||||
font-style: normal;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.omni-mention-chip b {
|
||||
overflow: hidden;
|
||||
font-weight: 650;
|
||||
font-weight: 500;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -2076,7 +2077,7 @@
|
||||
margin-left: 2px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
border-radius: var(--r-pill);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -2087,9 +2088,8 @@
|
||||
right: -6px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #fff;
|
||||
background: rgba(34, 42, 54, .72);
|
||||
box-shadow: 0 2px 6px rgba(20, 27, 38, .18);
|
||||
color: var(--surface);
|
||||
background: var(--black-alpha-72);
|
||||
}
|
||||
|
||||
.omni-mention-chip .omni-mention-remove svg {
|
||||
@@ -2098,13 +2098,13 @@
|
||||
}
|
||||
|
||||
.omni-mention-chips.is-user .omni-mention-chip:not(.has-thumb) {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, .14);
|
||||
color: var(--surface);
|
||||
background: var(--black-alpha-12);
|
||||
}
|
||||
|
||||
.omni-mention-chips.is-user .omni-mention-chip i {
|
||||
color: var(--klein);
|
||||
background: #edf5ff;
|
||||
color: var(--heat);
|
||||
background: var(--heat-12);
|
||||
}
|
||||
|
||||
.omni-chat-stack .omni-mention-chips.is-user {
|
||||
@@ -2117,22 +2117,113 @@
|
||||
}
|
||||
|
||||
.omni-mention-chips.is-composer {
|
||||
margin: 0 2px 8px;
|
||||
margin: 0 2px 6px;
|
||||
}
|
||||
|
||||
.omni-mention-chips.is-composer .omni-mention-chip:not(.has-thumb) {
|
||||
color: #2b3240;
|
||||
background: #edf5ff;
|
||||
border: 1px solid rgba(0, 47, 167, .12);
|
||||
color: var(--accent-black);
|
||||
background: var(--heat-12);
|
||||
box-shadow: inset 0 0 0 1px var(--heat-20);
|
||||
}
|
||||
|
||||
.omni-mention-chips.is-composer .omni-mention-chip i {
|
||||
color: #fff;
|
||||
background: var(--klein);
|
||||
color: var(--surface);
|
||||
background: var(--heat);
|
||||
}
|
||||
|
||||
.omni-mention-chips.is-composer .omni-mention-chip:not(.has-thumb) .omni-mention-remove {
|
||||
color: #66707d;
|
||||
color: var(--black-alpha-56);
|
||||
}
|
||||
|
||||
.omni-mention-chips.is-composer .omni-mention-thumb {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: var(--r-md);
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.omni-mention-chips.is-composer .omni-mention-chip.has-thumb .omni-mention-remove {
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
opacity: 0;
|
||||
transition: opacity var(--t-base);
|
||||
}
|
||||
|
||||
.omni-mention-chips.is-composer .omni-mention-chip.has-thumb:hover .omni-mention-remove,
|
||||
.omni-mention-chips.is-composer .omni-mention-chip.has-thumb:focus-within .omni-mention-remove {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.omni-mention-hover-preview {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 10px);
|
||||
left: 0;
|
||||
z-index: 40;
|
||||
width: 244px;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
border-radius: var(--r-md);
|
||||
color: var(--accent-black);
|
||||
background: var(--surface-raised);
|
||||
box-shadow: var(--shadow-floating);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
text-align: left;
|
||||
transform: translateY(4px);
|
||||
transition: opacity var(--t-base), transform var(--t-base);
|
||||
}
|
||||
|
||||
.omni-mention-chip.has-thumb:hover .omni-mention-hover-preview,
|
||||
.omni-mention-chip.has-thumb:focus-within .omni-mention-hover-preview {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.omni-mention-chips.is-user .omni-mention-hover-preview {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.omni-mention-hover-head {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.omni-mention-hover-head strong {
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.omni-mention-hover-head small {
|
||||
flex: 0 0 auto;
|
||||
color: var(--black-alpha-48);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10.5px;
|
||||
}
|
||||
|
||||
.omni-mention-hover-media {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border-radius: var(--r-md);
|
||||
background: var(--background-lighter);
|
||||
}
|
||||
|
||||
.omni-mention-hover-media img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.omni-chat-stack {
|
||||
|
||||
@@ -21,7 +21,13 @@ import {
|
||||
import { api, ApiError } from "../api";
|
||||
import { findCatalogModel } from "../components/omni-param-bar";
|
||||
import { modelResolutions } from "../components/free-create/constants";
|
||||
import { ConfirmModal } from "../components/overlays";
|
||||
import { ConfirmModal, MediaLightbox } from "../components/overlays";
|
||||
import { AssetSelectModal, type AssetModalType } from "../components/asset-select-modal";
|
||||
import {
|
||||
getMentionFreeText,
|
||||
RichMentionEditor,
|
||||
type RichMentionEditorHandle,
|
||||
} from "../components/rich-mention-editor";
|
||||
import type { CreationConversation, CreationRef, ModelConfig } from "../types";
|
||||
import type { NavigateFn } from "./route-config";
|
||||
|
||||
@@ -62,7 +68,8 @@ const IMAGE_PRESETS: PresetItem[] = [
|
||||
{ name: "新中式", category: "style", mode: "image", title: "新中式", cover: "/assets/image-presets/neo-chinese.png" },
|
||||
];
|
||||
|
||||
const MENTION_REF_LIMIT = 5;
|
||||
const MENTION_REF_LIMIT = 20;
|
||||
const ROLE_REF_LIMIT = 3;
|
||||
|
||||
const MENTION_TABS: Array<{ type: CreationRef["type"]; label: string; Icon: typeof ImageIcon }> = [
|
||||
{ type: "asset", label: "素材", Icon: ImageIcon },
|
||||
@@ -119,7 +126,11 @@ export function OmniCreatePage({
|
||||
const [typeLabels, setTypeLabels] = useState<Record<string, string>>({});
|
||||
const [pendingRefs, setPendingRefs] = useState<CreationRef[]>([]);
|
||||
const [previewCase, setPreviewCase] = useState<PresetItem | null>(null);
|
||||
const [assetPreview, setAssetPreview] = useState<{ src: string; name: string } | null>(null);
|
||||
const [assetModalOpen, setAssetModalOpen] = useState(false);
|
||||
const [assetModalType, setAssetModalType] = useState<AssetModalType>("product");
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const promptRef = useRef<RichMentionEditorHandle>(null);
|
||||
const toolsRef = useRef<HTMLDivElement>(null);
|
||||
const [starting, setStarting] = useState(false);
|
||||
|
||||
@@ -156,6 +167,28 @@ export function OmniCreatePage({
|
||||
const presets = useMemo(() => {
|
||||
return outputMode === "video" ? VIDEO_PRESETS : IMAGE_PRESETS;
|
||||
}, [outputMode]);
|
||||
const productRefs = useMemo(
|
||||
() => pendingRefs.filter((ref) => ref.type === "product"),
|
||||
[pendingRefs],
|
||||
);
|
||||
const roleRefs = useMemo(
|
||||
() => pendingRefs.filter((ref) => ref.type === "character" || ref.type === "model"),
|
||||
[pendingRefs],
|
||||
);
|
||||
const materialRefs = useMemo(
|
||||
() => pendingRefs.filter((ref) => ref.type === "asset" || ref.type === "scene"),
|
||||
[pendingRefs],
|
||||
);
|
||||
const hasPromptDescription = useMemo(
|
||||
() => Boolean(getMentionFreeText(prompt, pendingRefs)),
|
||||
[pendingRefs, prompt],
|
||||
);
|
||||
const visibleSlotCount =
|
||||
(productRefs.length || 1)
|
||||
+ roleRefs.length
|
||||
+ (roleRefs.length < ROLE_REF_LIMIT ? 1 : 0)
|
||||
+ materialRefs.length;
|
||||
const slotColumnCount = Math.min(Math.max(visibleSlotCount, 1), 4);
|
||||
|
||||
const applyPreset = (preset: PresetItem) => {
|
||||
setSelectedCase(preset);
|
||||
@@ -181,21 +214,53 @@ export function OmniCreatePage({
|
||||
}
|
||||
};
|
||||
|
||||
const insertMention = (ref: CreationRef) => {
|
||||
if (pendingRefs.some((r) => r.id === ref.id)) {
|
||||
setMentionMenuOpen(false);
|
||||
return;
|
||||
const insertVisibleMention = (ref: CreationRef, replaceTrigger: boolean) => {
|
||||
const name = ref.name.split(" · ")[0].trim();
|
||||
const tag = `@${name} `;
|
||||
if (promptRef.current) {
|
||||
promptRef.current.insertMention(ref, replaceTrigger);
|
||||
} else {
|
||||
setPrompt((prev) => (prev ? `${prev} ${tag}` : tag));
|
||||
}
|
||||
if (pendingRefs.length >= MENTION_REF_LIMIT) {
|
||||
};
|
||||
|
||||
const insertMention = (ref: CreationRef) => {
|
||||
const exists = pendingRefs.some((item) => item.type === ref.type && item.id === ref.id);
|
||||
if (!exists && pendingRefs.length >= MENTION_REF_LIMIT) {
|
||||
onNotify?.("info", `最多引用 ${MENTION_REF_LIMIT} 个`);
|
||||
setMentionMenuOpen(false);
|
||||
return;
|
||||
}
|
||||
setPendingRefs((prev) => [...prev, ref]);
|
||||
setPrompt((prev) => prev.replace(/@\S*$/, "").replace(/\s+$/, " "));
|
||||
if (!exists) setPendingRefs((prev) => [...prev, ref]);
|
||||
insertVisibleMention(ref, true);
|
||||
setMentionMenuOpen(false);
|
||||
};
|
||||
|
||||
const insertCardMention = (ref: CreationRef) => insertVisibleMention(ref, false);
|
||||
|
||||
const removePendingRef = (ref: CreationRef) => {
|
||||
setPendingRefs((prev) => prev.filter((item) => !(item.type === ref.type && item.id === ref.id)));
|
||||
const name = ref.name.split(" · ")[0].trim().replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
||||
setPrompt((prev) => prev.replace(new RegExp(`(^|\\s)@${name}(?=\\s|$)`, "g"), " ").replace(/\s{2,}/g, " ").trimStart());
|
||||
};
|
||||
|
||||
const addStructuredRef = (ref: CreationRef) => {
|
||||
setPendingRefs((prev) => {
|
||||
if (prev.some((item) => item.type === ref.type && item.id === ref.id)) return prev;
|
||||
if (prev.length >= MENTION_REF_LIMIT) {
|
||||
onNotify?.("info", `最多添加 ${MENTION_REF_LIMIT} 个引用`);
|
||||
return prev;
|
||||
}
|
||||
const isRole = ref.type === "character" || ref.type === "model";
|
||||
const currentRoleCount = prev.filter((item) => item.type === "character" || item.type === "model").length;
|
||||
if (isRole && currentRoleCount >= ROLE_REF_LIMIT) {
|
||||
onNotify?.("info", `最多添加 ${ROLE_REF_LIMIT} 个角色`);
|
||||
return prev;
|
||||
}
|
||||
return [...prev, ref];
|
||||
});
|
||||
};
|
||||
|
||||
const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = Array.from(event.target.files || []);
|
||||
event.target.value = "";
|
||||
@@ -243,7 +308,7 @@ export function OmniCreatePage({
|
||||
创作历史
|
||||
</button>
|
||||
<span className="omni-home-kicker">
|
||||
<Sparkles /> YINGQING CREATIVE AGENT
|
||||
<Sparkles /> YINGQING CREATIVE STUDIO
|
||||
</span>
|
||||
<h1>和全能创作聊聊你的想法</h1>
|
||||
<p>选择一种创作方法，或直接描述你想生成的画面。</p>
|
||||
@@ -254,77 +319,228 @@ export function OmniCreatePage({
|
||||
</header>
|
||||
|
||||
<section className="omni-start-composer" aria-label="全能创作输入区">
|
||||
<div className="omni-start-context" hidden={!selectedCase && pendingRefs.length === 0}>
|
||||
<div className="omni-selected-case" hidden={!selectedCase}>
|
||||
<span>
|
||||
<WandSparkles />
|
||||
<strong>{selectedCase?.title}</strong>
|
||||
</span>
|
||||
<button type="button" aria-label="取消预设" onClick={() => setSelectedCase(null)}>
|
||||
<X />
|
||||
</button>
|
||||
</div>
|
||||
<div className="omni-start-attachments" aria-live="polite">{pendingRefs.map((ref) => (
|
||||
<span className="omni-attachment-chip" key={ref.id}>
|
||||
{ref.cover ? <img src={ref.cover} alt="" /> : <ImageIcon />}
|
||||
<span>{ref.name.split(" · ")[0]}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="omni-attachment-remove"
|
||||
aria-label={`删除 ${ref.name}`}
|
||||
onClick={() => setPendingRefs((prev) => prev.filter((item) => item.id !== ref.id))}
|
||||
>
|
||||
{selectedCase && (
|
||||
<div className="omni-start-context">
|
||||
<div className="omni-selected-case">
|
||||
<span>
|
||||
<WandSparkles />
|
||||
<strong>{selectedCase.title}</strong>
|
||||
</span>
|
||||
<button type="button" aria-label="取消预设" onClick={() => setSelectedCase(null)}>
|
||||
<X />
|
||||
</button>
|
||||
</span>
|
||||
))}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="omni-composer-main-wrap">
|
||||
<div className="omni-composer-slots" aria-label="创作槽位">
|
||||
<div className={`omni-slots-grid is-columns-${slotColumnCount}`}>
|
||||
{/* 1. 商品槽位 */}
|
||||
{productRefs.map((ref) => (
|
||||
<div className="omni-slot-box is-filled" key={`${ref.type}:${ref.id}`} title={ref.name}>
|
||||
<span className="omni-slot-tag">商品</span>
|
||||
{ref.cover ? (
|
||||
<button
|
||||
type="button"
|
||||
className="omni-slot-preview"
|
||||
aria-label={`放大预览商品 ${ref.name}`}
|
||||
title="点击放大预览"
|
||||
onClick={() => setAssetPreview({ src: ref.cover || "", name: ref.name })}
|
||||
>
|
||||
<img src={ref.cover} alt={ref.name} className="omni-slot-img" />
|
||||
</button>
|
||||
) : (
|
||||
<div className="omni-slot-img-placeholder">
|
||||
<Box size={24} />
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="omni-slot-remove"
|
||||
aria-label={`移除商品 ${ref.name}`}
|
||||
title="移除"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
removePendingRef(ref);
|
||||
}}
|
||||
>
|
||||
<X size={11} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="omni-slot-at-btn"
|
||||
aria-label={`艾特 ${ref.name}`}
|
||||
title={`在输入框中艾特 ${ref.name}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
insertCardMention(ref);
|
||||
}}
|
||||
>
|
||||
<span className="omni-slot-at-char">@</span>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{productRefs.length === 0 && (
|
||||
<button
|
||||
type="button"
|
||||
className="omni-slot-box is-empty"
|
||||
onClick={() => {
|
||||
setAssetModalType("product");
|
||||
setAssetModalOpen(true);
|
||||
}}
|
||||
title="点击添加商品"
|
||||
>
|
||||
<span className="omni-slot-tag">商品</span>
|
||||
<span className="omni-slot-plus">
|
||||
<Plus size={20} />
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* 2. 角色槽位 */}
|
||||
{roleRefs.map((ref, idx) => (
|
||||
<div className="omni-slot-box is-filled" key={`${ref.type}:${ref.id}`} title={ref.name}>
|
||||
<span className="omni-slot-tag">
|
||||
{`角色${idx + 1}`}
|
||||
</span>
|
||||
{ref.cover ? (
|
||||
<button
|
||||
type="button"
|
||||
className="omni-slot-preview"
|
||||
aria-label={`放大预览角色 ${ref.name}`}
|
||||
title="点击放大预览"
|
||||
onClick={() => setAssetPreview({ src: ref.cover || "", name: ref.name })}
|
||||
>
|
||||
<img src={ref.cover} alt={ref.name} className="omni-slot-img" />
|
||||
</button>
|
||||
) : (
|
||||
<div className="omni-slot-img-placeholder">
|
||||
<UserRound size={24} />
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="omni-slot-remove"
|
||||
aria-label={`移除角色 ${ref.name}`}
|
||||
title="移除"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
removePendingRef(ref);
|
||||
}}
|
||||
>
|
||||
<X size={11} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="omni-slot-at-btn"
|
||||
aria-label={`艾特 ${ref.name}`}
|
||||
title={`在输入框中艾特 ${ref.name}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
insertCardMention(ref);
|
||||
}}
|
||||
>
|
||||
<span className="omni-slot-at-char">@</span>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{roleRefs.length < ROLE_REF_LIMIT && (
|
||||
<button
|
||||
type="button"
|
||||
className="omni-slot-box is-empty"
|
||||
onClick={() => {
|
||||
setAssetModalType("character");
|
||||
setAssetModalOpen(true);
|
||||
}}
|
||||
title={roleRefs.length ? "继续添加角色" : "点击添加角色"}
|
||||
>
|
||||
<span className="omni-slot-tag">{roleRefs.length ? `角色${roleRefs.length + 1}` : "角色"}</span>
|
||||
<span className="omni-slot-plus">
|
||||
<Plus size={20} />
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* 3. 素材槽位 (直接上传算素材) */}
|
||||
{materialRefs.map((ref) => (
|
||||
<div className="omni-slot-box is-filled" key={`${ref.type}:${ref.id}`} title={ref.name}>
|
||||
<span className="omni-slot-tag">{ref.type === "scene" ? "场景" : "素材"}</span>
|
||||
{ref.cover ? (
|
||||
<button
|
||||
type="button"
|
||||
className="omni-slot-preview"
|
||||
aria-label={`放大预览素材 ${ref.name}`}
|
||||
title="点击放大预览"
|
||||
onClick={() => setAssetPreview({ src: ref.cover || "", name: ref.name })}
|
||||
>
|
||||
<img src={ref.cover} alt={ref.name} className="omni-slot-img" />
|
||||
</button>
|
||||
) : (
|
||||
<div className="omni-slot-img-placeholder">
|
||||
<ImageIcon size={24} />
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="omni-slot-remove"
|
||||
aria-label={`移除素材 ${ref.name}`}
|
||||
title="移除"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
removePendingRef(ref);
|
||||
}}
|
||||
>
|
||||
<X size={11} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="omni-slot-at-btn"
|
||||
aria-label={`艾特 ${ref.name}`}
|
||||
title={`在输入框中艾特 ${ref.name}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
insertCardMention(ref);
|
||||
}}
|
||||
>
|
||||
<span className="omni-slot-at-char">@</span>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<span className="omni-slots-counter">{pendingRefs.length}/20</span>
|
||||
</div>
|
||||
|
||||
<div className="omni-composer-editor">
|
||||
<RichMentionEditor
|
||||
id="omniStartPrompt"
|
||||
ref={promptRef}
|
||||
placeholder="添加商品，写下核心卖点或创意方向，系统将为你补全生成方案"
|
||||
value={prompt}
|
||||
refs={pendingRefs}
|
||||
onChange={setPrompt}
|
||||
onAtTrigger={() => void openMentions()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<textarea
|
||||
id="omniStartPrompt"
|
||||
rows={3}
|
||||
placeholder="描述你想制作的内容，@ 可引用商品、模特、场景、素材或刚上传的图片……"
|
||||
value={prompt}
|
||||
onChange={(event) => {
|
||||
const value = event.target.value;
|
||||
setPrompt(value);
|
||||
const caret = event.target.selectionStart ?? 0;
|
||||
if (caret > 0 && value.charAt(caret - 1) === "@") void openMentions();
|
||||
}}
|
||||
/>
|
||||
<div className="omni-start-toolbar">
|
||||
<div className="omni-start-tools" ref={toolsRef}>
|
||||
<div className="omni-upload-wrap">
|
||||
<button
|
||||
type="button"
|
||||
className={`omni-icon-tool${uploading ? " is-uploading" : ""}`}
|
||||
aria-label={uploading ? "正在上传参考素材" : "添加参考素材"}
|
||||
aria-label={uploading ? "正在上传素材" : "上传素材"}
|
||||
title={uploading ? "正在上传素材…" : "上传素材（直接添加为素材参考）"}
|
||||
aria-busy={uploading}
|
||||
disabled={uploading}
|
||||
onClick={() => {
|
||||
setUploadMenuOpen((open) => !open);
|
||||
setMentionMenuOpen(false);
|
||||
}}
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
>
|
||||
{uploading ? <LoaderCircle /> : <Plus />}
|
||||
</button>
|
||||
<div className="omni-upload-menu" hidden={!uploadMenuOpen}>
|
||||
<strong>添加参考素材</strong>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setUploadMenuOpen(false);
|
||||
void openMentions();
|
||||
}}
|
||||
>
|
||||
<FolderOpen />
|
||||
<span>从资产库选择<small>使用平台已有商品、人物或场景</small></span>
|
||||
</button>
|
||||
<button type="button" onClick={() => fileInputRef.current?.click()}>
|
||||
<Upload />
|
||||
<span>本地上传<small>添加电脑中的图片</small></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{uploading ? (
|
||||
<span className="omni-upload-status" role="status" aria-live="polite">
|
||||
<LoaderCircle aria-hidden="true" />
|
||||
@@ -395,12 +611,14 @@ export function OmniCreatePage({
|
||||
<button
|
||||
type="button"
|
||||
className="omni-start-generate"
|
||||
disabled={starting || uploading}
|
||||
aria-label={hasPromptDescription ? "开始创作" : "请先输入创作描述"}
|
||||
title={hasPromptDescription ? "开始创作" : "请先输入创作描述，@引用不能代替描述"}
|
||||
disabled={starting || uploading || !hasPromptDescription}
|
||||
onClick={() => {
|
||||
const text = prompt.trim();
|
||||
const creationBrief = text || selectedCase?.starter || "";
|
||||
if (!text && !selectedCase && pendingRefs.length === 0) {
|
||||
onNotify?.("info", "请先输入你想制作的内容，或选择一个创作预设");
|
||||
if (!getMentionFreeText(text, pendingRefs)) {
|
||||
onNotify?.("info", "请先输入具体的创作描述，@引用不能单独提交");
|
||||
return;
|
||||
}
|
||||
if (starting) return;
|
||||
@@ -545,6 +763,21 @@ export function OmniCreatePage({
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<AssetSelectModal
|
||||
open={assetModalOpen}
|
||||
type={assetModalType}
|
||||
onClose={() => setAssetModalOpen(false)}
|
||||
onSelect={addStructuredRef}
|
||||
onNotify={onNotify}
|
||||
/>
|
||||
<MediaLightbox
|
||||
open={Boolean(assetPreview?.src)}
|
||||
src={assetPreview?.src || ""}
|
||||
kind="image"
|
||||
name={assetPreview?.name}
|
||||
close={() => setAssetPreview(null)}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -26,6 +26,12 @@ import { api } from "../api";
|
||||
import { findCatalogModel, normalizeDurationValue, OmniParamBar } from "../components/omni-param-bar";
|
||||
import { estimateCost, pointsPerImageFromCatalog } from "../components/free-create/constants";
|
||||
import { MediaLightbox } from "../components/overlays";
|
||||
import { AssetSelectModal, type AssetModalType } from "../components/asset-select-modal";
|
||||
import {
|
||||
getMentionFreeText,
|
||||
RichMentionEditor,
|
||||
type RichMentionEditorHandle,
|
||||
} from "../components/rich-mention-editor";
|
||||
import type {
|
||||
CreationConversationDetail,
|
||||
CreationField,
|
||||
@@ -542,14 +548,25 @@ function MentionChips({
|
||||
return (
|
||||
<span className={`omni-mention-chip${cover ? " has-thumb" : ""}`} key={`${ref.type}-${ref.id}`}>
|
||||
{cover ? (
|
||||
<button
|
||||
type="button"
|
||||
className="omni-mention-thumb"
|
||||
aria-label={`预览 ${label}`}
|
||||
onClick={() => setPreview({ src: cover, name: label })}
|
||||
>
|
||||
<img src={cover} alt={label} />
|
||||
</button>
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className="omni-mention-thumb"
|
||||
aria-label={`预览 ${label}`}
|
||||
onClick={() => setPreview({ src: cover, name: label })}
|
||||
>
|
||||
<img src={cover} alt={label} />
|
||||
</button>
|
||||
<span className="omni-mention-hover-preview" role="tooltip">
|
||||
<span className="omni-mention-hover-head">
|
||||
<strong>{label}</strong>
|
||||
<small>{REF_CHIP_LABEL[ref.type] || ref.type}</small>
|
||||
</span>
|
||||
<span className="omni-mention-hover-media">
|
||||
<img src={cover} alt={label} />
|
||||
</span>
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<i>{REF_CHIP_LABEL[ref.type] || ref.type}</i>
|
||||
@@ -1444,6 +1461,7 @@ function ElicitCard({
|
||||
|
||||
if (interaction === "chat") {
|
||||
const question = message.text || fields[0]?.label || "这项你想怎么定？";
|
||||
const compactChoiceOnly = String(message.payload.topic || "") === "cast_relation";
|
||||
const choiceField = fields.find(
|
||||
(field) => field.type === "single" && Array.isArray(field.options) && field.options.length > 0,
|
||||
);
|
||||
@@ -1469,7 +1487,10 @@ function ElicitCard({
|
||||
{!submitted ? (
|
||||
<div className="omni-reply-guide" aria-label="回复操作">
|
||||
{choiceField ? (
|
||||
<div className="omni-gate-actions omni-chat-choice-actions" aria-label={choiceField.label}>
|
||||
<div
|
||||
className={`omni-gate-actions${compactChoiceOnly ? "" : " omni-chat-choice-actions"}`}
|
||||
aria-label={choiceField.label}
|
||||
>
|
||||
{(choiceField.options || []).map((option) => (
|
||||
<button
|
||||
type="button"
|
||||
@@ -1482,19 +1503,21 @@ function ElicitCard({
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
<form className="omni-chat-question-input" onSubmit={submitChatAnswer}>
|
||||
<input
|
||||
className="input"
|
||||
value={chatAnswer}
|
||||
disabled={disabled}
|
||||
onChange={(event) => setChatAnswer(event.target.value)}
|
||||
placeholder="输入你的想法…"
|
||||
aria-label="回答这个问题"
|
||||
/>
|
||||
<button type="submit" aria-label="发送回答" disabled={disabled || !chatAnswer.trim()}>
|
||||
<ArrowUp size={14} />
|
||||
</button>
|
||||
</form>
|
||||
{!compactChoiceOnly ? (
|
||||
<form className="omni-chat-question-input" onSubmit={submitChatAnswer}>
|
||||
<input
|
||||
className="input"
|
||||
value={chatAnswer}
|
||||
disabled={disabled}
|
||||
onChange={(event) => setChatAnswer(event.target.value)}
|
||||
placeholder="输入你的想法…"
|
||||
aria-label="回答这个问题"
|
||||
/>
|
||||
<button type="submit" aria-label="发送回答" disabled={disabled || !chatAnswer.trim()}>
|
||||
<ArrowUp size={14} />
|
||||
</button>
|
||||
</form>
|
||||
) : null}
|
||||
</div>
|
||||
) : savedChoiceText ? (
|
||||
<p className="omni-gate-answered">已选择：{savedChoiceText}</p>
|
||||
@@ -2206,6 +2229,10 @@ export function OmniSessionPage({
|
||||
const [prompt, setPrompt] = useState("");
|
||||
const [composerHint, setComposerHint] = useState<string | null>(null);
|
||||
const [pendingRefs, setPendingRefs] = useState<CreationRef[]>([]);
|
||||
const hasComposerDescription = useMemo(
|
||||
() => Boolean(getMentionFreeText(prompt, pendingRefs)),
|
||||
[pendingRefs, prompt],
|
||||
);
|
||||
const [sessionUploads, setSessionUploads] = useState<CreationRef[]>(firstUploads || []);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
@@ -2216,7 +2243,7 @@ export function OmniSessionPage({
|
||||
messageId: string;
|
||||
source: "local_upload" | "model_library";
|
||||
} | null>(null);
|
||||
const composerRef = useRef<HTMLTextAreaElement>(null);
|
||||
const composerRef = useRef<RichMentionEditorHandle>(null);
|
||||
const [streaming, setStreaming] = useState(false);
|
||||
const [liveText, setLiveText] = useState("");
|
||||
const [liveReasoning, setLiveReasoning] = useState("");
|
||||
@@ -2228,6 +2255,8 @@ export function OmniSessionPage({
|
||||
const [typeLabels, setTypeLabels] = useState<Record<string, string>>({});
|
||||
const mentionWrapRef = useRef<HTMLDivElement>(null);
|
||||
const [uploadMenuOpen, setUploadMenuOpen] = useState(false);
|
||||
const [sessionAssetModalOpen, setSessionAssetModalOpen] = useState(false);
|
||||
const [sessionAssetModalType, setSessionAssetModalType] = useState<AssetModalType>("product");
|
||||
const [confirming, setConfirming] = useState(false);
|
||||
const [mergingMessageIds, setMergingMessageIds] = useState<string[]>([]);
|
||||
const [stopping, setStopping] = useState(false);
|
||||
@@ -2258,15 +2287,11 @@ export function OmniSessionPage({
|
||||
|
||||
const editUserMessage = useCallback((message: CreationMessage) => {
|
||||
const refs = message.refs || [];
|
||||
setPrompt(stripMentionText(message.text, refs));
|
||||
setPrompt(message.text);
|
||||
setPendingRefs(refs);
|
||||
setComposerHint(null);
|
||||
requestAnimationFrame(() => {
|
||||
composerRef.current?.focus();
|
||||
composerRef.current?.setSelectionRange(
|
||||
composerRef.current.value.length,
|
||||
composerRef.current.value.length,
|
||||
);
|
||||
composerRef.current?.focusAtEnd();
|
||||
});
|
||||
}, []);
|
||||
|
||||
@@ -2840,7 +2865,10 @@ export function OmniSessionPage({
|
||||
if (uploading) return;
|
||||
if (streaming && conversation?.agent_status !== "awaiting_user") return;
|
||||
const text = prompt.trim();
|
||||
if (!text && pendingRefs.length === 0) return;
|
||||
if (!getMentionFreeText(text, pendingRefs)) {
|
||||
notify("info", "请先输入具体的创作描述，@引用不能单独发送");
|
||||
return;
|
||||
}
|
||||
setPrompt("");
|
||||
setComposerHint(null);
|
||||
const refs = pendingRefs;
|
||||
@@ -2876,6 +2904,16 @@ export function OmniSessionPage({
|
||||
return () => document.removeEventListener("mousedown", onDoc);
|
||||
}, [mentionMenuOpen]);
|
||||
|
||||
const insertPromptMention = (ref: CreationRef, replaceTrigger = false) => {
|
||||
const name = ref.name.split(" · ")[0].trim();
|
||||
const tag = `@${name} `;
|
||||
if (!composerRef.current) {
|
||||
setPrompt((prev) => (prev ? `${prev} ${tag}` : tag));
|
||||
return;
|
||||
}
|
||||
composerRef.current.insertMention(ref, replaceTrigger);
|
||||
};
|
||||
|
||||
const insertMention = (ref: CreationRef) => {
|
||||
const personRequest = personSourceRequestRef.current;
|
||||
if (personRequest) {
|
||||
@@ -2908,17 +2946,14 @@ export function OmniSessionPage({
|
||||
return;
|
||||
}
|
||||
// 整条 Ref 存起来一起发:只把名字拼进文本的话,后端取不到卖点和参考图
|
||||
if (pendingRefs.some((r) => r.id === ref.id)) {
|
||||
setMentionMenuOpen(false);
|
||||
return;
|
||||
}
|
||||
if (pendingRefs.length >= MENTION_REF_LIMIT) {
|
||||
const exists = pendingRefs.some((item) => item.type === ref.type && item.id === ref.id);
|
||||
if (!exists && pendingRefs.length >= MENTION_REF_LIMIT) {
|
||||
notify("info", `最多引用 ${MENTION_REF_LIMIT} 个`);
|
||||
setMentionMenuOpen(false);
|
||||
return;
|
||||
}
|
||||
setPendingRefs((prev) => [...prev, ref]);
|
||||
setPrompt((prev) => prev.replace(/@\S*$/, "").replace(/\s+$/, " "));
|
||||
if (!exists) setPendingRefs((prev) => [...prev, ref]);
|
||||
insertPromptMention(ref, true);
|
||||
setMentionMenuOpen(false);
|
||||
};
|
||||
|
||||
@@ -2984,7 +3019,9 @@ export function OmniSessionPage({
|
||||
}
|
||||
if (source === "model_library") {
|
||||
personSourceRequestRef.current = { messageId: message.id, source };
|
||||
void openMentions("", "model");
|
||||
setMentionMenuOpen(false);
|
||||
setSessionAssetModalType("character");
|
||||
setSessionAssetModalOpen(true);
|
||||
return;
|
||||
}
|
||||
setMessages((prev) =>
|
||||
@@ -3226,30 +3263,17 @@ export function OmniSessionPage({
|
||||
</main>
|
||||
|
||||
<footer className={`omni-session-composer${composerHint ? " is-revise-hint" : ""}`}>
|
||||
<MentionChips
|
||||
refs={pendingRefs}
|
||||
tone="composer"
|
||||
onRemove={(id) => setPendingRefs((prev) => prev.filter((ref) => ref.id !== id))}
|
||||
/>
|
||||
<textarea
|
||||
<RichMentionEditor
|
||||
id="omniSessionPrompt"
|
||||
ref={composerRef}
|
||||
rows={2}
|
||||
placeholder={composerHint || "回复创作助手，也可以继续补充图片或要求……"}
|
||||
placeholder={composerHint || "继续补充图片或创作要求……"}
|
||||
value={prompt}
|
||||
refs={pendingRefs}
|
||||
disabled={uploading || (streaming && conversation?.agent_status !== "awaiting_user")}
|
||||
onChange={(event) => {
|
||||
const value = event.target.value;
|
||||
setPrompt(value);
|
||||
const caret = event.target.selectionStart ?? 0;
|
||||
if (caret > 0 && value.charAt(caret - 1) === "@") void openMentions();
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Enter" && !event.shiftKey) {
|
||||
event.preventDefault();
|
||||
handleSend();
|
||||
}
|
||||
}}
|
||||
submitOnEnter
|
||||
onChange={setPrompt}
|
||||
onAtTrigger={() => void openMentions()}
|
||||
onSubmit={handleSend}
|
||||
/>
|
||||
<div className="omni-session-composer-tools">
|
||||
<div className="omni-session-composer-options">
|
||||
@@ -3278,12 +3302,27 @@ export function OmniSessionPage({
|
||||
onClick={() => {
|
||||
personSourceRequestRef.current = null;
|
||||
setUploadMenuOpen(false);
|
||||
void openMentions();
|
||||
setSessionAssetModalType("product");
|
||||
setSessionAssetModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<FolderOpen />
|
||||
<Box />
|
||||
<span>
|
||||
从资产库选择<small>引用已有商品、人物或场景</small>
|
||||
添加商品<small>从商品库选择或新增商品</small>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
personSourceRequestRef.current = null;
|
||||
setUploadMenuOpen(false);
|
||||
setSessionAssetModalType("character");
|
||||
setSessionAssetModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<UserRound />
|
||||
<span>
|
||||
添加角色<small>从角色库选择或新增人物</small>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
@@ -3297,7 +3336,7 @@ export function OmniSessionPage({
|
||||
>
|
||||
<Upload />
|
||||
<span>
|
||||
本地上传<small>添加电脑中的图片</small>
|
||||
上传素材<small>添加电脑中的图片作为素材</small>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -3346,6 +3385,7 @@ export function OmniSessionPage({
|
||||
if (prev.some((item) => item.id === ref.id) || prev.length >= MENTION_REF_LIMIT) return prev;
|
||||
return [...prev, ref];
|
||||
});
|
||||
insertPromptMention(ref);
|
||||
}
|
||||
}
|
||||
notify(
|
||||
@@ -3443,14 +3483,15 @@ export function OmniSessionPage({
|
||||
<button
|
||||
type="button"
|
||||
className={`omni-session-send${isPlanning ? " is-stop" : ""}`}
|
||||
aria-label={isPlanning ? "终止" : "发送"}
|
||||
title={isPlanning ? "终止整理方案" : "发送"}
|
||||
aria-label={isPlanning ? "终止" : hasComposerDescription ? "发送" : "请先输入创作描述"}
|
||||
title={isPlanning ? "终止整理方案" : hasComposerDescription ? "发送" : "请先输入创作描述，@引用不能单独发送"}
|
||||
disabled={
|
||||
isPlanning
|
||||
? stopping
|
||||
: (
|
||||
uploading
|
||||
|| (streaming && conversation?.agent_status !== "awaiting_user")
|
||||
|| !hasComposerDescription
|
||||
)
|
||||
}
|
||||
onClick={() => {
|
||||
@@ -3689,6 +3730,55 @@ export function OmniSessionPage({
|
||||
name={assetPreview?.name}
|
||||
close={() => setAssetPreview(null)}
|
||||
/>
|
||||
<AssetSelectModal
|
||||
open={sessionAssetModalOpen}
|
||||
type={sessionAssetModalType}
|
||||
onClose={() => {
|
||||
setSessionAssetModalOpen(false);
|
||||
if (personSourceRequestRef.current?.source === "model_library") {
|
||||
personSourceRequestRef.current = null;
|
||||
}
|
||||
}}
|
||||
onSelect={(newRef) => {
|
||||
const personRequest = personSourceRequestRef.current;
|
||||
if (personRequest) {
|
||||
if (newRef.type !== "model" && newRef.type !== "character") {
|
||||
notify("info", "请选择一位角色");
|
||||
return;
|
||||
}
|
||||
personSourceRequestRef.current = null;
|
||||
setMessages((prev) =>
|
||||
prev.map((item) =>
|
||||
item.id === personRequest.messageId
|
||||
? {
|
||||
...item,
|
||||
payload: {
|
||||
...item.payload,
|
||||
submitted: true,
|
||||
answers: { person_source: "model_library" },
|
||||
},
|
||||
}
|
||||
: item,
|
||||
),
|
||||
);
|
||||
void send({
|
||||
kind: "elicit_answer",
|
||||
reply_to: personRequest.messageId,
|
||||
answers: { person_source: "model_library" },
|
||||
refs: [newRef],
|
||||
});
|
||||
return;
|
||||
}
|
||||
setPendingRefs((prev) => {
|
||||
if (prev.some((item) => item.type === newRef.type && item.id === newRef.id) || prev.length >= MENTION_REF_LIMIT) {
|
||||
return prev;
|
||||
}
|
||||
return [...prev, newRef];
|
||||
});
|
||||
insertPromptMention(newRef);
|
||||
}}
|
||||
onNotify={notify}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user