1

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

@@ -44,7 +44,7 @@ export function CustomWorldAgentComposer({
 
   return (
     <div className="shrink-0">
-      <div className="platform-remap-surface relative">
+      <div className="platform-remap-surface platform-subpanel relative rounded-[1.5rem] p-1.5">
         <textarea
           ref={textareaRef}
           value={text}
@@ -58,13 +58,13 @@ export function CustomWorldAgentComposer({
           rows={2}
           disabled={disabled}
           placeholder="输入消息"
-          className="min-h-[5.5rem] w-full resize-none rounded-[1.35rem] border border-white/10 bg-[#111318]/92 px-4 pb-11 pr-18 pt-2.5 text-sm leading-5.5 text-white outline-none transition focus:border-emerald-300/35 disabled:cursor-not-allowed disabled:opacity-60"
+          className="platform-input min-h-[5.5rem] resize-none rounded-[1.2rem] pb-12 pr-20 pt-3 text-sm leading-5.5 disabled:cursor-not-allowed disabled:opacity-60"
         />
         <button
           type="button"
           onClick={submit}
           disabled={disabled || !text.trim()}
-          className="absolute bottom-2.5 right-2.5 rounded-full border border-emerald-300/20 bg-emerald-500/10 px-3 py-1.5 text-xs font-medium text-emerald-100 transition hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
+          className="platform-button platform-button--primary absolute bottom-3 right-3 h-9 min-h-0 rounded-full px-3 py-1.5 text-xs disabled:cursor-not-allowed disabled:opacity-45"
         >
           发送
         </button>

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

@@ -4,11 +4,11 @@ type CustomWorldAgentHeaderProps = {
 
 export function CustomWorldAgentHeader({ onBack }: CustomWorldAgentHeaderProps) {
   return (
-    <div className="platform-remap-surface flex items-center rounded-[1.5rem] border border-white/10 bg-[#111318]/95 px-4 py-3">
+    <div className="platform-remap-surface platform-subpanel flex items-center rounded-[1.5rem] px-4 py-3">
       <button
         type="button"
         onClick={onBack}
-        className="rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-[11px] text-zinc-300 transition hover:text-white"
+        className="platform-button platform-button--ghost h-9 min-h-0 rounded-full px-3 py-1.5 text-[11px]"
       >
         返回
       </button>

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

@@ -35,37 +35,41 @@ export function CustomWorldAgentOperationBanner({
   const isFailed = visibleOperation.status === 'failed';
   const isRunning =
     visibleOperation.status === 'running' || visibleOperation.status === 'queued';
+  // 操作横幅直接复用平台状态横幅，亮暗主题都从同一套 token 取色。
+  const bannerToneClass = isFailed
+    ? 'platform-banner--danger'
+    : isRunning
+      ? 'platform-banner--info'
+      : 'platform-banner--success';
+  const progressFillStyle = isFailed
+    ? { background: 'linear-gradient(90deg, #fb7185 0%, #f43f5e 100%)' }
+    : isRunning
+      ? { background: 'var(--platform-button-primary-fill)' }
+      : { background: 'linear-gradient(90deg, #86efac 0%, #34d399 100%)' };
 
   return (
     <div
-      className={`platform-remap-surface rounded-[1.4rem] border px-4 py-4 ${
-        isFailed
-          ? 'border-rose-400/20 bg-[#111318]/95'
-          : isRunning
-            ? 'border-emerald-300/20 bg-[#111318]/95'
-            : 'border-emerald-300/20 bg-[#111318]/95'
-      }`}
+      className={`platform-remap-surface platform-banner rounded-[1.4rem] px-4 py-4 ${bannerToneClass}`}
     >
       <div className="flex items-center justify-between gap-3">
-        <div className="text-sm font-semibold text-white">
+        <div className="text-sm font-semibold">
           {visibleOperation.phaseLabel}
         </div>
-        <div className="text-xs text-zinc-300">
+        <div className="text-xs opacity-80">
           {Math.max(0, Math.min(100, Math.round(visibleOperation.progress)))}%
         </div>
       </div>
       {visibleOperation.error ? (
-        <div className="mt-2 text-sm text-zinc-200">
+        <div className="mt-2 text-sm opacity-90">
           {visibleOperation.error}
         </div>
       ) : null}
-      <div className="mt-3 h-2 overflow-hidden rounded-full bg-white/10">
+      <div className="platform-progress-track mt-3 h-2 overflow-hidden rounded-full">
         <div
-          className={`h-full rounded-full transition-[width] duration-300 ${
-            isFailed ? 'bg-rose-300' : 'bg-emerald-300'
-          }`}
+          className="h-full rounded-full transition-[width] duration-300"
           style={{
             width: `${Math.max(8, Math.min(100, visibleOperation.progress))}%`,
+            ...progressFillStyle,
           }}
         />
       </div>

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

@@ -37,9 +37,9 @@ export function CustomWorldAgentThread({
   }, [messages, streamingReplyText, isStreamingReply]);
 
   return (
-    <div className="platform-remap-surface flex h-full min-h-0 flex-1 flex-col overflow-y-auto px-1 py-2 sm:px-2">
+    <div className="platform-remap-surface platform-subpanel flex h-full min-h-0 flex-1 flex-col overflow-y-auto rounded-[1.75rem] px-2 py-3 sm:px-3">
       {messages.length === 0 ? (
-        <div className="m-auto text-sm text-zinc-400">
+        <div className="m-auto text-sm text-[var(--platform-text-soft)]">
           暂无消息
         </div>
       ) : (
@@ -47,6 +47,12 @@ export function CustomWorldAgentThread({
           {messages.map((message, index) => {
             const isUser = message.role === 'user';
             const isSystem = message.role === 'system';
+            // 聊天气泡统一映射到平台主题 token，避免亮色主题继续透出历史深色底。
+            const bubbleToneClass = isUser
+              ? 'border border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] text-[var(--platform-text-strong)]'
+              : isSystem
+                ? 'border border-[var(--platform-warm-border)] bg-[var(--platform-warm-bg)] text-[var(--platform-warm-text)]'
+                : 'platform-subpanel text-[var(--platform-text-strong)]';
 
             return (
               <div
@@ -56,13 +62,7 @@ export function CustomWorldAgentThread({
                 }`}
               >
                 <div
-                  className={`max-w-[90%] rounded-[1.4rem] px-4 py-3 text-sm leading-7 break-words sm:max-w-[82%] ${
-                    isUser
-                      ? 'border border-white/10 bg-white/10 text-zinc-50'
-                      : isSystem
-                        ? 'border border-amber-300/16 bg-amber-500/10 text-amber-50'
-                        : 'border border-white/10 bg-white/6 text-zinc-100'
-                  }`}
+                  className={`max-w-[90%] rounded-[1.4rem] px-4 py-3 text-sm leading-7 break-words sm:max-w-[82%] ${bubbleToneClass}`}
                 >
                   <div className="whitespace-pre-wrap">{message.text}</div>
                   {!isUser &&
@@ -74,7 +74,7 @@ export function CustomWorldAgentThread({
                           key={`recommended-reply-${replyIndex}-${reply}`}
                           type="button"
                           onClick={() => onRecommendedReply?.(reply)}
-                          className="rounded-[0.95rem] border border-white/10 bg-white/5 px-2.5 py-1.5 text-left text-[11px] leading-4.5 text-zinc-200 transition hover:border-emerald-300/25 hover:text-white"
+                          className="platform-button platform-button--ghost min-h-0 justify-start rounded-[0.95rem] px-2.5 py-1.5 text-left text-[11px] leading-4.5 whitespace-normal"
                         >
                           {reply}
                         </button>
@@ -87,17 +87,17 @@ export function CustomWorldAgentThread({
           })}
           {isStreamingReply ? (
             <div className="flex justify-start">
-              <div className="max-w-[90%] rounded-[1.4rem] border border-white/10 bg-white/6 px-4 py-3 text-sm leading-7 text-zinc-100 sm:max-w-[82%]">
+              <div className="platform-subpanel max-w-[90%] rounded-[1.4rem] px-4 py-3 text-sm leading-7 text-[var(--platform-text-strong)] sm:max-w-[82%]">
                 {streamingReplyText ? (
                   <div className="whitespace-pre-wrap">
                     {streamingReplyText}
-                    <span className="ml-1 inline-block h-4 w-1 animate-pulse rounded-full bg-emerald-200/80 align-[-2px]" />
+                    <span className="ml-1 inline-block h-4 w-1 animate-pulse rounded-full bg-[var(--platform-cool-text)] align-[-2px]" />
                   </div>
                 ) : (
                   <div className="flex items-center gap-1.5 py-1">
-                    <span className="h-2 w-2 animate-pulse rounded-full bg-zinc-300/70 [animation-delay:-0.2s]" />
-                    <span className="h-2 w-2 animate-pulse rounded-full bg-zinc-300/70 [animation-delay:-0.1s]" />
-                    <span className="h-2 w-2 animate-pulse rounded-full bg-zinc-300/70" />
+                    <span className="h-2 w-2 animate-pulse rounded-full bg-[var(--platform-text-soft)] [animation-delay:-0.2s]" />
+                    <span className="h-2 w-2 animate-pulse rounded-full bg-[var(--platform-text-soft)] [animation-delay:-0.1s]" />
+                    <span className="h-2 w-2 animate-pulse rounded-full bg-[var(--platform-text-soft)]" />
                   </div>
                 )}
               </div>

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

@@ -42,7 +42,7 @@ export function CustomWorldAgentWorkspace({
 }: CustomWorldAgentWorkspaceProps) {
   if (!session) {
     return (
-      <div className="platform-remap-surface mx-auto flex h-full w-full max-w-4xl items-center justify-center rounded-[1.75rem] border border-white/10 bg-black/20 px-6 py-8 text-center text-sm text-zinc-400">
+      <div className="platform-remap-surface platform-subpanel mx-auto flex h-full w-full max-w-4xl items-center justify-center rounded-[1.75rem] px-6 py-8 text-center text-sm text-[var(--platform-text-soft)]">
         正在恢复
       </div>
     );

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

@@ -46,36 +46,42 @@ export function EightAnchorProgressBar({
   const normalizedProgress = clampProgress(progressPercent);
   const isCompleted = normalizedProgress >= 100;
   const canQuickFill = currentTurn >= 2;
+  const progressFillStyle = isCompleted
+    ? { background: 'linear-gradient(90deg, #86efac 0%, #34d399 100%)' }
+    : { background: 'var(--platform-button-primary-fill)' };
 
   return (
-    <div className="platform-remap-surface rounded-[1.75rem] border border-white/10 bg-[#111318]/95 p-4">
+    <div className="platform-remap-surface platform-subpanel rounded-[1.75rem] p-4">
       <div className="flex flex-col gap-3">
         <div className="flex items-start justify-between gap-3">
           <div>
-            <div className="text-xs font-semibold tracking-[0.14em] text-zinc-300">
+            <div className="text-xs font-semibold tracking-[0.14em] text-[var(--platform-text-base)]">
               创作进度
             </div>
-            <div className="mt-1 text-sm text-zinc-400">
+            <div className="mt-1 text-sm text-[var(--platform-text-soft)]">
               {resolveProgressHint(normalizedProgress)}
             </div>
           </div>
-          <div className="text-lg font-semibold text-white">
+          <div className="text-lg font-semibold text-[var(--platform-text-strong)]">
             {normalizedProgress}%
           </div>
         </div>
 
-        <div className="h-3 overflow-hidden rounded-full bg-white/8">
+        <div className="platform-progress-track h-3 overflow-hidden rounded-full">
           <div
-            className="h-full rounded-full bg-[linear-gradient(90deg,#d8ffd9_0%,#6ee7b7_45%,#34d399_100%)] transition-[width] duration-500"
-            style={{ width: `${Math.max(6, normalizedProgress)}%` }}
+            className="h-full rounded-full transition-[width] duration-500"
+            style={{
+              width: `${Math.max(6, normalizedProgress)}%`,
+              ...progressFillStyle,
+            }}
           />
         </div>
-        <div className="flex items-center justify-between gap-3">
+        <div className="flex flex-wrap items-center justify-between gap-3">
           <button
             type="button"
             onClick={onSummaryClick}
             disabled={disabled}
-            className="rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-zinc-200 transition hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
+            className="platform-button platform-button--ghost min-h-0 rounded-full px-3 py-1.5 text-xs disabled:cursor-not-allowed disabled:opacity-45"
           >
             总结当前设定
           </button>
@@ -84,7 +90,7 @@ export function EightAnchorProgressBar({
               type="button"
               onClick={onGenerateDraft}
               disabled={disabled}
-              className="flex min-h-[3rem] items-center justify-center rounded-[1.1rem] border border-emerald-300/25 bg-emerald-500/12 px-4 py-3 text-sm font-semibold text-emerald-50 transition hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
+              className="platform-button platform-button--primary min-h-[3rem] rounded-[1.1rem] px-4 py-3 text-sm disabled:cursor-not-allowed disabled:opacity-45"
             >
               生成游戏设定草稿
             </button>
@@ -93,7 +99,7 @@ export function EightAnchorProgressBar({
               type="button"
               onClick={onQuickFill}
               disabled={disabled}
-              className="rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-zinc-200 transition hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
+              className="platform-button platform-button--ghost min-h-0 rounded-full px-3 py-1.5 text-xs disabled:cursor-not-allowed disabled:opacity-45"
             >
               补全剩余设定
             </button>