Integrate role asset studio into custom world agent flow

2026-04-14 20:16:41 +08:00
parent 0981d6ee1b
commit bc2999ffb9
118 changed files with 31211 additions and 1232 deletions
--- a/src/components/custom-world-agent/CustomWorldGenerateEntityModal.tsx
+++ b/src/components/custom-world-agent/CustomWorldGenerateEntityModal.tsx
@@ -0,0 +1,139 @@
+import { useEffect, useState } from 'react';
+
+type CustomWorldGenerateEntityModalProps = {
+  open: boolean;
+  mode: 'character' | 'landmark';
+  anchorCardTitle?: string | null;
+  disabled?: boolean;
+  onClose: () => void;
+  onSubmit: (payload: {
+    count: number;
+    promptText: string;
+  }) => void;
+};
+
+export function CustomWorldGenerateEntityModal({
+  open,
+  mode,
+  anchorCardTitle,
+  disabled = false,
+  onClose,
+  onSubmit,
+}: CustomWorldGenerateEntityModalProps) {
+  const [count, setCount] = useState(2);
+  const [promptText, setPromptText] = useState('');
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    setCount(2);
+    setPromptText('');
+  }, [open, mode]);
+
+  if (!open) {
+    return null;
+  }
+
+  const title = mode === 'character' ? '新增角色' : '新增场景';
+  const submitLabel = mode === 'character' ? '生成角色' : '生成场景';
+
+  return (
+    <div className="fixed inset-0 z-[96] flex items-end justify-center bg-black/72 p-3 backdrop-blur-sm sm:items-center">
+      <button
+        type="button"
+        aria-label="关闭新增弹窗"
+        onClick={onClose}
+        className="absolute inset-0 cursor-default"
+      />
+      <div className="relative z-10 w-full max-w-xl rounded-[1.8rem] border border-white/10 bg-[linear-gradient(180deg,rgba(10,12,18,0.96),rgba(8,10,14,0.96))] px-4 py-4 shadow-[0_18px_60px_rgba(0,0,0,0.35)] sm:px-5 sm:py-5">
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <div className="text-[11px] font-bold tracking-[0.2em] text-zinc-400">
+              AI 扩写
+            </div>
+            <div className="mt-2 text-lg font-semibold text-white">{title}</div>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={disabled}
+            className="rounded-full border border-white/10 bg-black/20 px-3 py-1 text-[11px] text-zinc-300 transition hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
+          >
+            关闭
+          </button>
+        </div>
+
+        <div className="mt-4 space-y-4">
+          {anchorCardTitle ? (
+            <div className="rounded-[1.1rem] border border-white/8 bg-white/5 px-3 py-3">
+              <div className="text-[11px] tracking-[0.16em] text-zinc-400">
+                当前参考卡
+              </div>
+              <div className="mt-2 text-sm text-zinc-100">{anchorCardTitle}</div>
+            </div>
+          ) : null}
+
+          <div className="rounded-[1.1rem] border border-white/8 bg-white/5 px-3 py-3">
+            <div className="text-[11px] tracking-[0.16em] text-zinc-400">数量</div>
+            <div className="mt-3 flex gap-2">
+              {[1, 2, 3].map((value) => (
+                <button
+                  key={value}
+                  type="button"
+                  onClick={() => setCount(value)}
+                  disabled={disabled}
+                  className={`rounded-full border px-4 py-2 text-sm transition ${
+                    count === value
+                      ? 'border-sky-300/20 bg-sky-500/10 text-sky-100'
+                      : 'border-white/10 bg-black/20 text-zinc-300 hover:text-white'
+                  } disabled:cursor-not-allowed disabled:opacity-45`}
+                >
+                  {value}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <label className="block rounded-[1.1rem] border border-white/8 bg-white/5 px-3 py-3">
+            <div className="text-[11px] tracking-[0.16em] text-zinc-400">
+              补充要求
+            </div>
+            <textarea
+              value={promptText}
+              onChange={(event) => setPromptText(event.target.value)}
+              rows={5}
+              disabled={disabled}
+              className="mt-2 w-full resize-none rounded-[0.9rem] border border-white/10 bg-black/26 px-3 py-3 text-sm leading-7 text-white outline-none transition focus:border-sky-400/40 disabled:cursor-not-allowed disabled:opacity-60"
+            />
+          </label>
+        </div>
+
+        <div className="mt-4 flex items-center justify-end gap-3">
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={disabled}
+            className="rounded-full border border-white/10 bg-black/20 px-4 py-2 text-sm text-zinc-200 transition hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
+          >
+            取消
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              onSubmit({
+                count,
+                promptText: promptText.trim(),
+              });
+            }}
+            disabled={disabled}
+            className="rounded-full border border-sky-300/20 bg-sky-500/10 px-4 py-2 text-sm font-medium text-sky-100 transition hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
+          >
+            {submitLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}