Integrate role asset studio into custom world agent flow

src/components/custom-world-agent/CustomWorldAgentDraftDrawer.tsx

@@ -0,0 +1,115 @@
+import type { CustomWorldDraftCardSummary } from '../../../packages/shared/src/contracts/customWorldAgent';
+
+type CustomWorldAgentDraftDrawerProps = {
+  draftCards: CustomWorldDraftCardSummary[];
+  activeCardId?: string | null;
+  onSelectCard: (cardId: string) => void;
+};
+
+const DRAWER_KIND_ORDER: CustomWorldDraftCardSummary['kind'][] = [
+  'world',
+  'chapter',
+  'thread',
+  'faction',
+  'character',
+  'landmark',
+  'camp',
+];
+
+function resolveGroupLabel(kind: CustomWorldDraftCardSummary['kind']) {
+  if (kind === 'world') return '世界总卡';
+  if (kind === 'chapter') return '第一幕';
+  if (kind === 'thread') return '世界线程';
+  if (kind === 'faction') return '势力';
+  if (kind === 'character') return '关键角色';
+  if (kind === 'landmark') return '关键地点';
+  if (kind === 'camp') return '营地';
+  return '草稿卡';
+}
+
+export function CustomWorldAgentDraftDrawer({
+  draftCards,
+  activeCardId,
+  onSelectCard,
+}: CustomWorldAgentDraftDrawerProps) {
+  const groupedCards = DRAWER_KIND_ORDER.map((kind) => ({
+    kind,
+    items: draftCards.filter((card) => card.kind === kind),
+  })).filter((group) => group.items.length > 0);
+
+  return (
+    <div className="rounded-[1.5rem] border border-white/10 bg-black/18 px-4 py-4">
+      <div className="text-[11px] font-bold tracking-[0.2em] text-zinc-400">
+        草稿抽屉
+      </div>
+      {groupedCards.length > 0 ? (
+        <div className="mt-3 space-y-4">
+          {groupedCards.map((group) => (
+            <section key={group.kind}>
+              <div className="flex items-center justify-between gap-3">
+                <div className="text-[11px] tracking-[0.18em] text-zinc-400">
+                  {resolveGroupLabel(group.kind)}
+                </div>
+                <div className="text-[11px] text-zinc-500">
+                  {group.items.length}
+                </div>
+              </div>
+              <div className="mt-2 space-y-2">
+                {group.items.map((card) => {
+                  const isActive = activeCardId === card.id;
+
+                  return (
+                    <button
+                      key={card.id}
+                      type="button"
+                      onClick={() => onSelectCard(card.id)}
+                      className={`w-full rounded-[1.2rem] border px-3 py-3 text-left transition ${
+                        isActive
+                          ? 'border-sky-300/30 bg-sky-500/10'
+                          : 'border-white/8 bg-white/5 hover:border-white/14'
+                      }`}
+                    >
+                      <div className="flex items-start justify-between gap-3">
+                        <div className="text-sm font-semibold text-white">
+                          {card.title}
+                        </div>
+                        {card.warningCount > 0 ? (
+                          <span className="rounded-full border border-amber-300/20 bg-amber-500/10 px-2 py-0.5 text-[10px] text-amber-100">
+                            {card.warningCount}
+                          </span>
+                        ) : null}
+                      </div>
+                      <div className="mt-1 text-[11px] text-zinc-400">
+                        {card.subtitle}
+                      </div>
+                      <div className="mt-2 text-sm leading-6 text-zinc-300">
+                        {card.summary}
+                      </div>
+                      <div className="mt-3 flex flex-wrap gap-2">
+                        <span className="rounded-full border border-white/10 bg-black/24 px-2.5 py-1 text-[10px] text-zinc-200">
+                          关联 {card.linkedIds.length}
+                        </span>
+                        <span className="rounded-full border border-white/10 bg-black/24 px-2.5 py-1 text-[10px] text-zinc-200">
+                          {card.status === 'warning' ? '待精修' : '建议稿'}
+                        </span>
+                        {card.kind === 'character' && card.assetStatusLabel ? (
+                          <span className="rounded-full border border-amber-300/20 bg-amber-500/10 px-2.5 py-1 text-[10px] text-amber-100">
+                            {card.assetStatusLabel}
+                          </span>
+                        ) : null}
+                      </div>
+                    </button>
+                  );
+                })}
+              </div>
+            </section>
+          ))}
+        </div>
+      ) : (
+        <div className="mt-3 text-sm leading-7 text-zinc-400">
+          最小锚点齐备后，世界底稿会先从这里长出来。
+        </div>
+      )}
+    </div>
+  );
+}