From 66881c8e9f7fa801221b5366f102da7aad15c183 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, 13 Aug 2026 15:53:58 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20`SpriteBorder`=20=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增边框dragger
---
 .../SpriteBorder/SpriteBorderEditor.tsx       |  2 +-
 .../SpriteBorder/SpriteBorderGuideEditor.tsx  | 28 +++++++++++++++++--
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/SpriteBorder/SpriteBorderEditor.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/SpriteBorder/SpriteBorderEditor.tsx
index c7fbdd89e..72ca8ec6c 100644
--- a/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/SpriteBorder/SpriteBorderEditor.tsx
+++ b/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/SpriteBorder/SpriteBorderEditor.tsx
@@ -38,7 +38,7 @@ export function SpriteBorderEditor({
   const preset111 = spriteBorderRatioPreset(pixelSize, 1);
 
   return (
-    <section className="overflow-hidden rounded-xl border border-(--platform-subpanel-border) bg-white/35">
+    <section className="overflow-visible rounded-xl border border-(--platform-subpanel-border) bg-white/35">
       <button
         type="button"
         className="flex h-10 w-full items-center justify-between px-3 text-left text-xs font-semibold"
diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/SpriteBorder/SpriteBorderGuideEditor.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/SpriteBorder/SpriteBorderGuideEditor.tsx
index 2945f6f41..1b022b671 100644
--- a/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/SpriteBorder/SpriteBorderGuideEditor.tsx
+++ b/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/SpriteBorder/SpriteBorderGuideEditor.tsx
@@ -96,10 +96,10 @@ export function SpriteBorderGuideEditor({
   }
 
   return (
-    <div className="grid max-h-[220px] 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] p-2">
+    <div className="grid max-h-[220px] place-items-center overflow-visible 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] p-2">
       <div
         ref={previewRef}
-        className="relative inline-flex max-h-[204px] max-w-full touch-none select-none overflow-hidden"
+        className="relative inline-flex max-h-[204px] max-w-full touch-none select-none overflow-visible"
       >
         <img
           src={previewUrl}
@@ -202,6 +202,30 @@ function GuideHandle({
       style={style}
       {...events}
     >
+      <span
+        aria-hidden="true"
+        className={`absolute z-10 flex items-center justify-center rounded border border-orange-500/45 bg-white/95 text-[11px] font-semibold leading-none text-orange-600 shadow-sm ${
+          vertical
+            ? 'top-1/2 h-4 w-4 -translate-y-1/2'
+            : 'left-1/2 h-4 w-5 -translate-x-1/2'
+        } ${
+          side === 'left'
+            ? 'right-full mr-1'
+            : side === 'right'
+              ? 'left-full ml-1'
+              : side === 'top'
+                ? 'bottom-full mb-1'
+                : 'top-full mt-1'
+        }`}
+      >
+        {side === 'left'
+          ? '→'
+          : side === 'right'
+            ? '←'
+            : side === 'top'
+              ? '↓'
+              : '↑'}
+      </span>
       {active ? (
         <span className="pointer-events-none absolute top-1 left-1 rounded bg-orange-600 px-1 py-0.5 text-[9px] whitespace-nowrap text-white">
           {side.slice(0, 1).toUpperCase()} {value}