1

src/components/CustomWorldResultView.tsx

@@ -13,7 +13,6 @@ import {
   CustomWorldPlayableNpc,
   CustomWorldProfile,
 } from '../types';
-import { getNineSliceStyle, UI_CHROME } from '../uiAssets';
 import {
   CustomWorldEntityCatalog,
   type ResultTab,
@@ -71,11 +70,11 @@ function SmallButton({
       type="button"
       onClick={onClick}
       disabled={disabled}
-      className={`rounded-full border px-3 py-2 text-sm transition-colors ${
+      className={`${
         tone === 'sky'
-          ? 'border-sky-300/20 bg-sky-500/10 text-sky-100 hover:text-white'
-          : 'border-white/10 bg-black/20 text-zinc-300 hover:text-white'
-      } ${disabled ? 'cursor-not-allowed opacity-45' : ''}`}
+          ? 'platform-button platform-button--primary'
+          : 'platform-button platform-button--ghost'
+      } min-h-0 rounded-full px-3 py-2 text-sm ${disabled ? 'cursor-not-allowed opacity-45' : ''}`}
     >
       {children}
     </button>
@@ -351,15 +350,15 @@ export function CustomWorldResultView({
   };
   const autoSaveBadge =
     autoSaveState === 'saved' ? (
-      <div className="rounded-full border border-emerald-300/20 bg-emerald-500/10 px-3 py-1 text-[11px] text-emerald-100">
+      <div className="platform-pill platform-pill--success px-3 py-1 text-[11px]">
         已自动保存
       </div>
     ) : autoSaveState === 'saving' ? (
-      <div className="rounded-full border border-amber-300/20 bg-amber-500/10 px-3 py-1 text-[11px] text-amber-100">
+      <div className="platform-pill platform-pill--warm px-3 py-1 text-[11px]">
         保存中
       </div>
     ) : autoSaveState === 'error' ? (
-      <div className="rounded-full border border-rose-300/20 bg-rose-500/10 px-3 py-1 text-[11px] text-rose-100">
+      <div className="platform-pill platform-pill--rose px-3 py-1 text-[11px]">
         保存失败
       </div>
     ) : null;
@@ -371,7 +370,7 @@ export function CustomWorldResultView({
           type="button"
           onClick={onBack}
           disabled={isGenerating}
-          className={`self-start 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 ? 'opacity-45' : ''}`}
+          className={`platform-button platform-button--ghost min-h-0 self-start px-3 py-1.5 text-[11px] ${isGenerating ? 'opacity-45' : ''}`}
         >
           {backLabel}
         </button>
@@ -418,16 +417,18 @@ export function CustomWorldResultView({
       </div>
 
       {isGenerating && (
-        <div className="mt-3 rounded-2xl border border-sky-400/18 bg-sky-500/10 px-4 py-4">
+        <div className="platform-banner platform-banner--info mt-3 rounded-2xl px-4 py-4">
           <div className="flex items-center justify-between gap-3">
-            <div className="text-sm font-semibold text-white">
+            <div className="text-sm font-semibold text-[var(--platform-text-strong)]">
               {progressLabel}
             </div>
-            <div className="text-xs text-sky-100">{Math.round(progress)}%</div>
+            <div className="text-xs text-[var(--platform-text-base)]">
+              {Math.round(progress)}%
+            </div>
           </div>
-          <div className="mt-3 h-3 overflow-hidden rounded-full border border-white/10 bg-black/35">
+          <div className="platform-progress-track mt-3 h-3 overflow-hidden rounded-full">
             <div
-              className="h-full bg-[linear-gradient(90deg,#38bdf8_0%,#67e8f9_48%,#fef08a_100%)] transition-[width] duration-300"
+              className="h-full bg-[linear-gradient(90deg,#ff4f8b_0%,#ff8a73_48%,#ffd2a6_100%)] transition-[width] duration-300"
               style={{ width: `${Math.max(0, Math.min(100, progress))}%` }}
             />
           </div>
@@ -435,19 +436,19 @@ export function CustomWorldResultView({
       )}
 
       {error ? (
-        <div className="mt-3 rounded-2xl border border-rose-400/18 bg-rose-500/10 px-4 py-3 text-sm leading-6 text-rose-100">
+        <div className="platform-banner platform-banner--danger mt-3 rounded-2xl text-sm leading-6">
           {error}
         </div>
       ) : null}
       {!error && localGenerationError ? (
-        <div className="mt-3 rounded-2xl border border-rose-400/18 bg-rose-500/10 px-4 py-3 text-sm leading-6 text-rose-100">
+        <div className="platform-banner platform-banner--danger mt-3 rounded-2xl text-sm leading-6">
           {localGenerationError}
         </div>
       ) : null}
 
       <div className="mt-4 flex flex-col gap-3">
         {profile.generationStatus === 'key_only' ? (
-          <div className="rounded-2xl border border-amber-300/16 bg-amber-500/10 px-4 py-3 text-sm leading-6 text-amber-100">
+          <div className="platform-banner platform-banner--warning rounded-2xl text-sm leading-6">
             当前世界处于快速预览模式，只生成了关键对象。继续补全后，系统会生成长尾场景角色与完整场景网络。
           </div>
         ) : null}
@@ -474,18 +475,9 @@ export function CustomWorldResultView({
               type="button"
               onClick={onEnterWorld}
               disabled={isGenerating}
-              className={`pixel-nine-slice pixel-pressable text-left ${isGenerating ? 'opacity-55' : ''}`}
-              style={getNineSliceStyle(UI_CHROME.choiceButton, {
-                paddingX: 16,
-                paddingY: 10,
-              })}
+              className={`platform-button platform-button--primary ${isGenerating ? 'opacity-55' : ''}`}
             >
-              <div className="flex items-center justify-between gap-4">
-                <span className="text-sm font-semibold text-white">
-                  {enterWorldActionLabel}
-                </span>
-                <span className="text-white/60">→</span>
-              </div>
+              {enterWorldActionLabel}
             </button>
           ) : null}
         </div>