Integrate role asset studio into custom world agent flow

src/components/custom-world-home/CustomWorldCreationHub.tsx

@@ -0,0 +1,154 @@
+import { useMemo, useState } from 'react';
+
+import type { CustomWorldWorkSummary } from '../../../packages/shared/src/contracts/customWorldAgent';
+import { CustomWorldCreationStartCard } from './CustomWorldCreationStartCard';
+import { CustomWorldWorkCard } from './CustomWorldWorkCard';
+import {
+  type CustomWorldWorkFilter,
+  CustomWorldWorkTabs,
+} from './CustomWorldWorkTabs';
+
+type CustomWorldCreationHubProps = {
+  items: CustomWorldWorkSummary[];
+  loading: boolean;
+  error: string | null;
+  onBack: () => void;
+  onRetry: () => void;
+  onCreateNew: () => void;
+  onResumeDraft: (sessionId: string) => void;
+  onEnterPublished: (profileId: string) => void;
+};
+
+function EmptyState({ title }: { title: string }) {
+  return (
+    <div className="flex min-h-[16rem] flex-col items-center justify-center rounded-[1.8rem] border border-white/8 bg-white/5 px-6 py-8 text-center">
+      <div className="text-lg font-semibold text-white">{title}</div>
+    </div>
+  );
+}
+
+export function CustomWorldCreationHub({
+  items,
+  loading,
+  error,
+  onBack,
+  onRetry,
+  onCreateNew,
+  onResumeDraft,
+  onEnterPublished,
+}: CustomWorldCreationHubProps) {
+  const [activeFilter, setActiveFilter] =
+    useState<CustomWorldWorkFilter>('all');
+  const draftCount = items.filter((item) => item.status === 'draft').length;
+  const publishedCount = items.filter(
+    (item) => item.status === 'published',
+  ).length;
+  const filteredItems = useMemo(
+    () =>
+      items.filter((item) =>
+        activeFilter === 'all' ? true : item.status === activeFilter,
+      ),
+    [activeFilter, items],
+  );
+
+  return (
+    <div
+      className="flex h-full min-h-0 flex-col overflow-y-auto overscroll-y-contain pr-1 pb-[max(1rem,env(safe-area-inset-bottom))]"
+      style={{ WebkitOverflowScrolling: 'touch' }}
+    >
+      <div className="sticky top-0 z-20 -mx-3 bg-[linear-gradient(180deg,rgba(10,12,18,0.96),rgba(10,12,18,0.88),rgba(10,12,18,0))] px-3 pb-4 pt-1 sm:static sm:mx-0 sm:bg-none sm:px-0 sm:pb-5 sm:pt-0">
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <button
+              type="button"
+              onClick={onBack}
+              className="rounded-full border border-white/10 bg-black/18 px-3 py-1.5 text-[11px] text-zinc-300 transition-colors hover:text-white"
+            >
+              返回
+            </button>
+            <div className="mt-4 text-[1.8rem] font-black leading-tight text-white sm:text-[2.3rem]">
+              创作中心
+            </div>
+          </div>
+          <div className="hidden shrink-0 gap-2 sm:flex">
+            <span className="rounded-full border border-amber-300/20 bg-amber-500/10 px-3 py-1 text-[11px] text-amber-100">
+              草稿 {draftCount}
+            </span>
+            <span className="rounded-full border border-emerald-300/20 bg-emerald-500/10 px-3 py-1 text-[11px] text-emerald-100">
+              已发布 {publishedCount}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <CustomWorldCreationStartCard onCreateNew={onCreateNew} />
+
+        <CustomWorldWorkTabs
+          activeFilter={activeFilter}
+          draftCount={draftCount}
+          publishedCount={publishedCount}
+          onChange={setActiveFilter}
+        />
+
+        {error ? (
+          <div className="rounded-3xl border border-rose-400/18 bg-rose-500/10 px-4 py-4 text-sm leading-7 text-rose-100">
+            <div>{error}</div>
+            <button
+              type="button"
+              onClick={onRetry}
+              className="mt-3 rounded-full border border-white/10 bg-black/20 px-4 py-2 text-sm text-zinc-200 transition hover:text-white"
+            >
+              重试
+            </button>
+          </div>
+        ) : null}
+
+        {loading ? (
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+            {Array.from({ length: 3 }).map((_, index) => (
+              <div
+                key={`skeleton-${index}`}
+                className="min-h-[12rem] rounded-[1.8rem] border border-white/8 bg-white/5 p-5"
+              >
+                <div className="h-4 w-20 rounded-full bg-white/10" />
+                <div className="mt-6 h-8 w-36 rounded-full bg-white/10" />
+                <div className="mt-4 h-4 w-full rounded-full bg-white/10" />
+                <div className="mt-2 h-4 w-4/5 rounded-full bg-white/10" />
+                <div className="mt-8 flex gap-2">
+                  <div className="h-7 w-20 rounded-full bg-white/10" />
+                  <div className="h-7 w-20 rounded-full bg-white/10" />
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : filteredItems.length > 0 ? (
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+            {filteredItems.map((item) => (
+              <CustomWorldWorkCard
+                key={item.workId}
+                item={item}
+                onClick={() => {
+                  if (item.status === 'draft' && item.sessionId) {
+                    onResumeDraft(item.sessionId);
+                    return;
+                  }
+
+                  if (item.status === 'published' && item.profileId) {
+                    onEnterPublished(item.profileId);
+                  }
+                }}
+              />
+            ))}
+          </div>
+        ) : items.length === 0 ? (
+          <EmptyState title="还没有作品" />
+        ) : (
+          <EmptyState title="当前筛选下没有内容" />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export type { CustomWorldWorkFilter };