From b2e5948e8fb0fbe3a4723970068908c24687cf5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Mon, 17 Aug 2026 14:16:03 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E6=A3=80=E6=9F=A5=E5=99=A8?=
 =?UTF-8?q?=E5=8F=AA=E8=AF=BB=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将只读视觉状态提升至 Inspector 容器

移除矩形变换卡片内的局部状态徽标
---
 .../components/Inspector/InspectorSidebar.tsx | 14 ++++++--
 .../Inspector/Transform/TransformEditor.tsx   | 33 +++++--------------
 2 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/InspectorSidebar.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/InspectorSidebar.tsx
index 281f268cd..daf35b0c0 100644
--- a/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/InspectorSidebar.tsx
+++ b/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/InspectorSidebar.tsx
@@ -1,4 +1,4 @@
-import { Boxes, Trash2 } from 'lucide-react';
+import { Boxes, LockKeyhole, Trash2 } from 'lucide-react';
 import type {
   InputHTMLAttributes,
   ReactNode,
@@ -60,6 +60,7 @@ export function InspectorSidebar({
   controller: UiEditorPageController;
 }) {
   const view = getInspectorView(controller);
+  const isReadOnly = controller.editor.isLocked;
   let inspectorContent: ReactNode;
   switch (view.kind) {
     case 'node':
@@ -125,12 +126,21 @@ export function InspectorSidebar({
   }
 
   return (
-    <aside className="flex min-h-0 flex-col overflow-y-auto border-l border-(--platform-subpanel-border) bg-(--platform-subpanel-fill) p-4">
+    <aside
+      aria-readonly={isReadOnly}
+      className={`flex min-h-0 flex-col overflow-y-auto border-l p-4 transition-colors ${isReadOnly ? 'border-slate-300 bg-slate-100/90' : 'border-(--platform-subpanel-border) bg-(--platform-subpanel-fill)'}`}
+    >
       <div className="flex items-center gap-2">
         <Boxes size={15} />
         <h2 className="m-0 text-sm font-semibold">
           {INSPECTOR_VIEW_TITLES[view.kind]}
         </h2>
+        {isReadOnly ? (
+          <span className="ml-auto inline-flex items-center gap-1 rounded-full border border-slate-300 bg-slate-200 px-2 py-1 text-[10px] font-semibold text-slate-600">
+            <LockKeyhole size={12} aria-hidden="true" />
+            只读
+          </span>
+        ) : null}
       </div>
       {inspectorContent}
 
diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/Transform/TransformEditor.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/Transform/TransformEditor.tsx
index a3831bc00..554ba8d2f 100644
--- a/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/Transform/TransformEditor.tsx
+++ b/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/Transform/TransformEditor.tsx
@@ -4,11 +4,9 @@ import {
   ChevronUp,
   Crosshair,
   Info,
-  LockKeyhole,
   Maximize2,
   Move,
   SlidersHorizontal,
-  Unlock,
 } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
@@ -72,8 +70,10 @@ const FIELD_HINTS = {
     '锚点最小值：用父容器的比例位置（0 到 1）定义元素的左上边界。0 表示左侧或顶部，1 表示右侧或底部。',
   anchor_max:
     '锚点最大值：用父容器的比例位置（0 到 1）定义元素的右下边界。与最小值不同可让元素随父容器拉伸。',
-  offset_min: '偏移最小值：相对于最小锚点的像素偏移，控制元素左侧和顶部的位置。',
-  offset_max: '偏移最大值：相对于最大锚点的像素偏移，控制元素右侧和底部的位置。',
+  offset_min:
+    '偏移最小值：相对于最小锚点的像素偏移，控制元素左侧和顶部的位置。',
+  offset_max:
+    '偏移最大值：相对于最大锚点的像素偏移，控制元素右侧和底部的位置。',
 } as const;
 
 function cloneTransform(transform: Transform): Transform {
@@ -341,8 +341,8 @@ export function TransformEditor({
   onChange,
 }: TransformEditorProps) {
   const [presetOpen, setPresetOpen] = useState(false);
-  const [customOpen, setCustomOpen] = useState(() =>
-    findPreset(transform).id === CUSTOM_PRESET.id,
+  const [customOpen, setCustomOpen] = useState(
+    () => findPreset(transform).id === CUSTOM_PRESET.id,
   );
   const presetRef = useRef<HTMLDivElement | null>(null);
   const matchedPreset = useMemo(() => findPreset(transform), [transform]);
@@ -386,10 +386,7 @@ export function TransformEditor({
     geometry?.invalid;
 
   return (
-    <section
-      aria-readonly={readOnly}
-      className={`w-full min-w-72.5 max-w-none overflow-visible rounded-2xl border text-(--platform-text-strong) shadow-[0_16px_40px_rgb(91_62_45/10%)] ${readOnly ? 'border-slate-300 bg-slate-100/90' : 'border-(--platform-subpanel-border) bg-(--platform-subpanel-fill)'}`}
-    >
+    <section className="w-full min-w-72.5 max-w-none overflow-visible rounded-2xl border border-(--platform-subpanel-border) bg-(--platform-subpanel-fill) text-(--platform-text-strong) shadow-[0_16px_40px_rgb(91_62_45/10%)]">
       <header className="flex items-center justify-between border-b border-(--platform-subpanel-border) px-4 py-3">
         <div className="flex items-center gap-2">
           <span className="grid size-8 place-items-center rounded-xl bg-orange-100 text-orange-600">
@@ -405,17 +402,6 @@ export function TransformEditor({
             </p>
           </div>
         </div>
-        {readOnly ? (
-          <span className="inline-flex items-center gap-1 rounded-full border border-slate-300 bg-slate-200 px-2 py-1 text-[10px] font-semibold text-slate-600">
-            <LockKeyhole size={12} aria-hidden="true" />
-            只读
-          </span>
-        ) : (
-          <span className="inline-flex items-center gap-1 rounded-full border border-emerald-200 bg-emerald-50 px-2 py-1 text-[10px] font-semibold text-emerald-600">
-            <Unlock size={12} aria-hidden="true" />
-            可编辑
-          </span>
-        )}
       </header>
 
       <div className="grid gap-4 p-4">
@@ -569,9 +555,7 @@ export function TransformEditor({
               className="mt-0.5 shrink-0"
               aria-hidden="true"
             />
-            <span>
-              锚点值超出标准范围，或当前配置会产生无效的矩形区域。
-            </span>
+            <span>锚点值超出标准范围，或当前配置会产生无效的矩形区域。</span>
           </div>
         ) : null}
 
@@ -593,7 +577,6 @@ export function TransformEditor({
             onCommit={(axis, value) => updateVector('offset_max', axis, value)}
           />
         </div>
-
       </div>
     </section>
   );