1

src/components/CustomWorldRoleAssetStudioModal.tsx

@@ -32,6 +32,7 @@ import {
 } from './asset-studio/characterAssetWorkflowPersistence';
 import { buildDefaultRolePromptBundle } from './asset-studio/customWorldRolePromptDefaults';
 import { buildProjectPixelStyleReferenceBoard } from './asset-studio/projectPixelStyleReference';
+import { useAuthUi } from './auth/AuthUiContext';
 import { CharacterAnimator } from './CharacterAnimator';
 
 type EditableCustomWorldRole = {
@@ -136,9 +137,15 @@ function ModalShell({
   disableClose?: boolean;
   children: React.ReactNode;
 }) {
+  const authUi = useAuthUi();
+  const platformThemeClass =
+    authUi?.platformTheme === 'dark'
+      ? 'platform-theme--dark'
+      : 'platform-theme--light';
+
   return (
     <div
-      className="fixed inset-0 z-[100] flex items-end justify-center bg-black/78 p-0 backdrop-blur-sm sm:items-center sm:p-4"
+      className={`platform-overlay platform-theme ${platformThemeClass} fixed inset-0 z-[100] flex items-end justify-center p-0 backdrop-blur-sm sm:items-center sm:p-4`}
       onClick={
         disableClose
           ? undefined
@@ -150,7 +157,7 @@ function ModalShell({
       }
     >
       <div
-        className="flex h-[92vh] w-full max-w-6xl flex-col overflow-hidden rounded-t-[1.75rem] border border-white/10 bg-[linear-gradient(180deg,rgba(19,24,39,0.98),rgba(8,10,17,0.96))] shadow-[0_24px_80px_rgba(0,0,0,0.6)] sm:h-auto sm:max-h-[min(92vh,58rem)] sm:rounded-[1.75rem]"
+        className={`platform-modal-shell platform-role-studio platform-ui-shell platform-theme ${platformThemeClass} flex h-[92vh] w-full max-w-6xl flex-col overflow-hidden rounded-t-[1.75rem] shadow-[0_24px_80px_rgba(0,0,0,0.6)] sm:h-auto sm:max-h-[min(92vh,58rem)] sm:rounded-[1.75rem]`}
         onClick={(event) => event.stopPropagation()}
       >
         <div className="flex items-start justify-between gap-4 border-b border-white/10 px-4 py-4 sm:px-5">
@@ -1146,7 +1153,7 @@ export function CustomWorldRoleAssetStudioModal({
       <div className="space-y-5">
         <Section title="角色形象">
           <div className="space-y-4">
-            <div className="overflow-hidden rounded-3xl border border-white/10 bg-[radial-gradient(circle_at_top,rgba(56,189,248,0.16),transparent_48%),linear-gradient(180deg,rgba(19,24,39,0.96),rgba(8,10,17,0.92))]">
+            <div className="platform-role-studio__preview overflow-hidden rounded-3xl">
               <div className="flex min-h-[18rem] items-center justify-center p-4 sm:min-h-[22rem]">
                 {previewImageSrc ? (
                   <img
@@ -1249,8 +1256,8 @@ export function CustomWorldRoleAssetStudioModal({
 
         <Section title="动作">
           <div className="space-y-4">
-            <div className="rounded-3xl border border-white/10 bg-[linear-gradient(180deg,rgba(19,24,39,0.96),rgba(8,10,17,0.92))] p-4">
-              <div className="flex min-h-[28rem] items-center justify-center rounded-2xl border border-white/10 bg-black/20 p-4">
+            <div className="platform-role-studio__preview rounded-3xl p-4">
+              <div className="platform-role-studio__stage flex min-h-[28rem] items-center justify-center rounded-2xl p-4">
                 {previewCharacter &&
                 hasGeneratedAnimation(workingRole, selectedAnimation) ? (
                   <div
@@ -1402,7 +1409,7 @@ export function CustomWorldRoleAssetStudioModal({
           </div>
         </Section>
 
-        <div className="sticky bottom-0 z-10 -mx-4 border-t border-white/10 bg-[linear-gradient(180deg,rgba(8,10,17,0.2)_0%,rgba(8,10,17,0.96)_28%)] px-4 pb-[calc(env(safe-area-inset-bottom,0px)+0.35rem)] pt-3 backdrop-blur sm:mx-0 sm:rounded-3xl sm:border sm:px-4">
+        <div className="platform-role-studio__footer sticky bottom-0 z-10 -mx-4 px-4 pb-[calc(env(safe-area-inset-bottom,0px)+0.35rem)] pt-3 sm:mx-0 sm:rounded-3xl sm:border sm:border-[var(--platform-subpanel-border)] sm:px-4">
           <div className="space-y-3">
             {saveStatus ? (
               <div className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-zinc-300">