From 741ef4215652ca69975c2c473b14f3140625503b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Thu, 3 Sep 2026 14:23:01 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E7=B4=A0=E6=9D=90=E7=BC=A9?=
 =?UTF-8?q?=E7=95=A5=E5=9B=BE=E6=A3=8B=E7=9B=98=E8=83=8C=E6=99=AF=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

抽取共享棋盘背景 class 常量供素材侧栏和选择器复用

保持现有图片加载失败处理与缩略图布局不变
---
 .../features/ui-editor/components/SpriteImagePreview.tsx | 3 +++
 .../src/view/ui-editor/components/InputSidebar.tsx       | 3 ++-
 .../Inspector/Components/ImageAssetSelector.tsx          | 9 +++++++--
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/components/SpriteImagePreview.tsx b/apps/ai-game-creator-shell/src/features/ui-editor/components/SpriteImagePreview.tsx
index a724c4e42..98071bd37 100644
--- a/apps/ai-game-creator-shell/src/features/ui-editor/components/SpriteImagePreview.tsx
+++ b/apps/ai-game-creator-shell/src/features/ui-editor/components/SpriteImagePreview.tsx
@@ -1,3 +1,6 @@
+export const SPRITE_CHECKERBOARD_CLASS_NAME =
+  'bg-[linear-gradient(45deg,#eee_25%,transparent_25%),linear-gradient(-45deg,#eee_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#eee_75%),linear-gradient(-45deg,transparent_75%,#eee_75%)] bg-[length:14px_14px]';
+
 export function SpriteImagePreview({
   src,
   alt,
diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/components/InputSidebar.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/components/InputSidebar.tsx
index 83e8ff1ae..495db5bd9 100644
--- a/apps/ai-game-creator-shell/src/view/ui-editor/components/InputSidebar.tsx
+++ b/apps/ai-game-creator-shell/src/view/ui-editor/components/InputSidebar.tsx
@@ -1,6 +1,7 @@
 import { Image as ImageIcon, Plus, Type } from 'lucide-react';
 import { useMemo } from 'react';
 
+import { SPRITE_CHECKERBOARD_CLASS_NAME } from '../../../features/ui-editor/components/SpriteImagePreview';
 import { visitUiNodes } from '../../../features/ui-editor/treeUtils';
 import type { Node as UiNode } from '../../../features/ui-editor/types/Node';
 import type { NodeId } from '../../../features/ui-editor/types/NodeId';
@@ -184,7 +185,7 @@ export function InputSidebar({ input }: { input: UiEditorInputProjection }) {
             <button
               key={sprite.asset_id}
               type="button"
-              className="relative aspect-square overflow-hidden rounded-lg border border-(--platform-subpanel-border) bg-[linear-gradient(45deg,#eee_25%,transparent_25%),linear-gradient(-45deg,#eee_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#eee_75%),linear-gradient(-45deg,transparent_75%,#eee_75%)] bg-[length:14px_14px]"
+              className={`relative aspect-square overflow-hidden rounded-lg border border-(--platform-subpanel-border) ${SPRITE_CHECKERBOARD_CLASS_NAME}`}
               title={`${sprite.metadata.name} · 引用 ${spriteReferenceCounts[sprite.asset_id] ?? 0}`}
               onClick={() => input.selectSprite(sprite.asset_id)}
             >
diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/Components/ImageAssetSelector.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/Components/ImageAssetSelector.tsx
index e4c0d0419..4ab6255f8 100644
--- a/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/Components/ImageAssetSelector.tsx
+++ b/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/Components/ImageAssetSelector.tsx
@@ -2,6 +2,7 @@ import { Check, ImageIcon, X } from 'lucide-react';
 import { useState } from 'react';
 
 import { ThemedModal } from '../../../../../components/modal/ThemedModal';
+import { SPRITE_CHECKERBOARD_CLASS_NAME } from '../../../../../features/ui-editor/components/SpriteImagePreview';
 import type { SpriteAsset } from '../../../../../features/ui-editor/types/SpriteAsset';
 
 export function ImageAssetSelector({
@@ -120,13 +121,17 @@ export function ImageAssetSelector({
                   aria-pressed={selected}
                   onClick={() => select(id)}
                 >
-                  <div className="grid aspect-[4/3] place-items-center overflow-hidden rounded-lg bg-[linear-gradient(45deg,#eee_25%,transparent_25%),linear-gradient(-45deg,#eee_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#eee_75%),linear-gradient(-45deg,transparent_75%,#eee_75%)] bg-[length:14px_14px]">
+                  <div
+                    className={`grid aspect-[4/3] place-items-center overflow-hidden rounded-lg ${SPRITE_CHECKERBOARD_CLASS_NAME}`}
+                  >
                     {hasPreview ? (
                       <img
                         src={previewUrl}
                         alt={sprite.metadata.name || id}
                         className="size-full object-contain"
-                        onError={() => markPreviewFailed(id, previewUrl)}
+                        onError={() => {
+                          if (previewUrl) markPreviewFailed(id, previewUrl);
+                        }}
                       />
                     ) : (
                       <ImageIcon