1

src/components/CustomWorldGenerationView.tsx

@@ -2,7 +2,6 @@ import { motion } from 'motion/react';
 
 import type { CustomWorldGenerationProgress } from '../../packages/shared/src/contracts/runtime';
 import type { CustomWorldStructuredAnchorEntry } from '../services/customWorldAgentGenerationProgress';
-import { getNineSliceStyle, UI_CHROME } from '../uiAssets';
 
 interface CustomWorldGenerationViewProps {
   settingText: string;
@@ -95,16 +94,16 @@ export function CustomWorldGenerationView({
       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 mb-4 flex items-center justify-between gap-3 bg-[linear-gradient(180deg,rgba(10,12,18,0.96),rgba(10,12,18,0.86),rgba(10,12,18,0))] px-3 pb-3 pt-1 sm:static sm:mx-0 sm:bg-none sm:px-0 sm:pb-0 sm:pt-0">
+      <div className="sticky top-0 z-20 -mx-3 mb-4 flex items-center justify-between gap-3 bg-[linear-gradient(180deg,rgba(255,247,250,0.96),rgba(255,244,248,0.86),rgba(255,244,248,0))] px-3 pb-3 pt-1 sm:static sm:mx-0 sm:bg-none sm:px-0 sm:pb-0 sm:pt-0">
         <button
           type="button"
           onClick={onBack}
           disabled={isGenerating}
-          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 ${isGenerating ? 'cursor-not-allowed opacity-45' : ''}`}
+          className={`platform-button platform-button--ghost min-h-0 px-3 py-1.5 text-[11px] ${isGenerating ? 'cursor-not-allowed opacity-45' : ''}`}
         >
           {backLabel}
         </button>
-        <div className="rounded-full border border-sky-300/16 bg-sky-500/10 px-3 py-1 text-[10px] tracking-[0.2em] text-sky-100">
+        <div className="platform-pill platform-pill--cool px-3 py-1 text-[10px] tracking-[0.2em]">
           {isGenerating
             ? activeBadgeLabel
             : error
@@ -114,19 +113,13 @@ export function CustomWorldGenerationView({
       </div>
 
       <div className="flex flex-none flex-col gap-4 xl:min-h-0 xl:flex-1">
-        <section
-          className="pixel-nine-slice pixel-panel flex flex-col xl:min-h-0 xl:flex-1"
-          style={getNineSliceStyle(UI_CHROME.panel, {
-            paddingX: 16,
-            paddingY: 14,
-          })}
-        >
+        <section className="platform-surface platform-surface--soft flex flex-col px-4 py-3.5 xl:min-h-0 xl:flex-1">
           <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
             <div className="min-w-0">
               <div className="text-[11px] font-bold tracking-[0.2em] text-zinc-400">
                 {progressTitle}
               </div>
-              <div className="mt-1 text-xl font-black leading-tight text-white sm:text-[2rem]">
+              <div className="mt-1 text-xl font-black leading-tight text-[var(--platform-text-strong)] sm:text-[2rem]">
                 {progress?.phaseLabel ?? '正在启动世界生成'}
               </div>
               <div className="mt-2 max-w-[36rem] text-sm leading-6 text-zinc-300">
@@ -137,22 +130,22 @@ export function CustomWorldGenerationView({
               <div className="text-[11px] tracking-[0.16em] text-zinc-500">
                 总进度
               </div>
-              <div className="mt-1 text-3xl font-black text-sky-100 sm:text-4xl">
+              <div className="mt-1 text-3xl font-black text-[var(--platform-cool-text)] sm:text-4xl">
                 {progressValue}%
               </div>
             </div>
           </div>
 
-          <div className="mt-4 h-4 overflow-hidden rounded-full border border-white/10 bg-black/35">
+          <div className="platform-progress-track mt-4 h-4 overflow-hidden rounded-full">
             <motion.div
-              className="h-full bg-[linear-gradient(90deg,#38bdf8_0%,#67e8f9_45%,#fde68a_100%)]"
+              className="h-full bg-[linear-gradient(90deg,#ff4f8b_0%,#ff8a73_52%,#ffd2a6_100%)]"
               animate={{ width: `${progressValue}%` }}
               transition={{ duration: 0.35, ease: 'easeOut' }}
             />
           </div>
 
           <div className="mt-4 grid gap-2 sm:grid-cols-3">
-            <div className="rounded-2xl border border-white/8 bg-black/20 px-4 py-3">
+            <div className="platform-subpanel rounded-2xl px-4 py-3">
               <div className="text-[11px] tracking-[0.16em] text-zinc-500">
                 当前批次
               </div>
@@ -160,7 +153,7 @@ export function CustomWorldGenerationView({
                 {progress?.batchLabel ?? '准备中'}
               </div>
             </div>
-            <div className="rounded-2xl border border-white/8 bg-black/20 px-4 py-3">
+            <div className="platform-subpanel rounded-2xl px-4 py-3">
               <div className="text-[11px] tracking-[0.16em] text-zinc-500">
                 预计等待
               </div>
@@ -168,7 +161,7 @@ export function CustomWorldGenerationView({
                 {estimatedWaitText}
               </div>
             </div>
-            <div className="rounded-2xl border border-white/8 bg-black/20 px-4 py-3">
+            <div className="platform-subpanel rounded-2xl px-4 py-3">
               <div className="text-[11px] tracking-[0.16em] text-zinc-500">
                 计时
               </div>
@@ -187,7 +180,7 @@ export function CustomWorldGenerationView({
                     ? 'border-emerald-400/16 bg-emerald-500/8'
                     : step.status === 'active'
                       ? 'border-sky-300/22 bg-sky-500/10'
-                      : 'border-white/8 bg-black/18'
+                      : 'platform-subpanel'
                 }`}
               >
                 <div className="flex items-center justify-between gap-3">
@@ -217,25 +210,16 @@ export function CustomWorldGenerationView({
                 <button
                   type="button"
                   onClick={onEditSetting}
-                  className="rounded-full border border-white/10 bg-black/20 px-4 py-2 text-sm text-zinc-300 transition-colors hover:text-white"
+                  className="platform-button platform-button--ghost min-h-0 rounded-full px-4 py-2 text-sm"
                 >
                   {settingActionLabel}
                 </button>
                 <button
                   type="button"
                   onClick={onRetry}
-                  className="pixel-nine-slice pixel-pressable w-full text-left sm:w-auto"
-                  style={getNineSliceStyle(UI_CHROME.choiceButton, {
-                    paddingX: 16,
-                    paddingY: 10,
-                  })}
+                  className="platform-button platform-button--primary w-full sm:w-auto"
                 >
-                  <div className="flex items-center justify-between gap-4">
-                    <span className="text-sm font-semibold text-white">
-                      {retryLabel}
-                    </span>
-                    <span className="text-white/60">→</span>
-                  </div>
+                  {retryLabel}
                 </button>
               </>
             ) : onInterrupt ? (
@@ -250,16 +234,10 @@ export function CustomWorldGenerationView({
           </div>
         </section>
 
-        <section
-          className="pixel-nine-slice pixel-panel overflow-hidden"
-          style={getNineSliceStyle(UI_CHROME.storyPanel, {
-            paddingX: 16,
-            paddingY: 14,
-          })}
-        >
+        <section className="platform-surface platform-surface--soft overflow-hidden px-4 py-3.5">
           <div className="mb-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <div className="min-w-0">
-              <div className="text-[11px] font-bold tracking-[0.2em] text-sky-100/85">
+              <div className="text-[11px] font-bold tracking-[0.2em] text-[var(--platform-cool-text)]">
                 {settingTitle}
               </div>
               <div className="mt-1 text-sm text-zinc-400">
@@ -270,7 +248,7 @@ export function CustomWorldGenerationView({
               type="button"
               onClick={onEditSetting}
               disabled={isGenerating}
-              className={`rounded-full border border-white/10 bg-black/20 px-3 py-1.5 text-[11px] text-zinc-300 transition-colors hover:text-white ${isGenerating ? 'cursor-not-allowed opacity-40' : ''}`}
+              className={`platform-button platform-button--ghost min-h-0 px-3 py-1.5 text-[11px] ${isGenerating ? 'cursor-not-allowed opacity-40' : ''}`}
             >
               {settingActionLabel}
             </button>
@@ -283,7 +261,7 @@ export function CustomWorldGenerationView({
                     entry.id,
                     `anchor-entry-${index}`,
                   )}
-                  className="rounded-2xl border border-white/8 bg-black/22 px-4 py-4"
+                  className="platform-subpanel rounded-2xl px-4 py-4"
                 >
                   <div className="text-[11px] font-bold tracking-[0.18em] text-zinc-500">
                     {entry.label}
@@ -295,7 +273,7 @@ export function CustomWorldGenerationView({
               ))}
             </div>
           ) : (
-            <div className="whitespace-pre-line rounded-2xl border border-white/8 bg-black/22 px-4 py-4 text-sm leading-7 text-zinc-200 md:max-h-[16rem] md:overflow-y-auto">
+            <div className="platform-subpanel whitespace-pre-line rounded-2xl px-4 py-4 text-sm leading-7 text-zinc-200 md:max-h-[16rem] md:overflow-y-auto">
               {settingText || structuredEmptyText}
             </div>
           )}