From a7cdf2c69b9cee961ae91990e8c3c52838d6ff51 Mon Sep 17 00:00:00 2001
From: unanmed <1319491857@qq.com>
Date: Sat, 21 Jun 2025 12:05:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BC=A9=E7=95=A5=E5=9B=BE=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/render/components/thumbnail.tsx       | 55 +++++++++++++++++++
 src/types/declaration/map.d.ts                |  2 +-
 2 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 packages-user/client-modules/src/render/components/thumbnail.tsx

diff --git a/packages-user/client-modules/src/render/components/thumbnail.tsx b/packages-user/client-modules/src/render/components/thumbnail.tsx
new file mode 100644
index 0000000..34e0ce8
--- /dev/null
+++ b/packages-user/client-modules/src/render/components/thumbnail.tsx
@@ -0,0 +1,55 @@
+import {
+    ElementLocator,
+    MotaOffscreenCanvas2D,
+    Sprite
+} from '@motajs/render-core';
+import { SpriteProps } from '@motajs/render-vue';
+import { defineComponent, ref, watch } from 'vue';
+
+export interface ThumbnailProps extends SpriteProps {
+    loc: ElementLocator;
+    padStyle: CanvasStyle;
+    floorId: FloorIds;
+    map?: Block[];
+    hero?: HeroStatus;
+    // configs
+    damage?: boolean;
+    all?: boolean;
+}
+
+export const Thumbnail = defineComponent<ThumbnailProps>(props => {
+    const spriteRef = ref<Sprite>();
+
+    const update = () => {
+        spriteRef.value?.update();
+    };
+
+    const drawThumbnail = (canvas: MotaOffscreenCanvas2D) => {
+        const hero = props.hero;
+        const options: Partial<DrawThumbnailConfig> = {
+            damage: props.damage,
+            ctx: canvas.ctx,
+            x: 0,
+            y: 0,
+            size: 1,
+            all: props.all,
+            noHD: false,
+            v2: true,
+            inFlyMap: false
+        };
+        if (hero) {
+            options.heroLoc = hero.loc;
+            options.heroIcon = hero.image;
+            options.flags = hero.flags;
+            options.centerX = hero.loc.x;
+            options.centerY = hero.loc.y;
+        }
+        core.drawThumbnail(props.floorId, props.map, options);
+    };
+
+    watch(props, update);
+
+    return () => (
+        <sprite ref={spriteRef} loc={props.loc} render={drawThumbnail} />
+    );
+});
diff --git a/src/types/declaration/map.d.ts b/src/types/declaration/map.d.ts
index fa17d96..ae0fb95 100644
--- a/src/types/declaration/map.d.ts
+++ b/src/types/declaration/map.d.ts
@@ -370,7 +370,7 @@ interface DrawThumbnailConfig {
     /**
      * 勇士的位置
      */
-    heroLoc: LocArr;
+    heroLoc: Loc;
 
     /**
      * 勇士的图标