From a346766b3dcf96152ca4aa87e412c36320e62bba Mon Sep 17 00:00:00 2001
From: xudan <staysky25@outlook.com>
Date: Thu, 11 Sep 2025 15:42:27 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4editor=20token?=
 =?UTF-8?q?=EF=BC=8C=E6=94=B9=E4=B8=BA=E4=BD=BF=E7=94=A8editorStore?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E7=BC=96=E8=BE=91=E5=99=A8=E5=AE=9E=E4=BE=8B?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E6=9C=BA=E5=99=A8=E4=BA=BA=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=E8=8E=B7=E5=8F=96=E9=80=BB=E8=BE=91=EF=BC=8C=E6=8F=90?=
 =?UTF-8?q?=E5=8D=87=E4=BB=A3=E7=A0=81=E5=8F=AF=E8=AF=BB=E6=80=A7=E5=92=8C?=
 =?UTF-8?q?=E7=BB=B4=E6=8A=A4=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/context-menu/context-menu.vue  |  5 +-
 src/components/context-menu/robot-menu.vue    | 12 ++---
 .../modal/robot-image-settings-modal.vue      |  5 +-
 src/pages/movement-supervision.vue            | 13 +++--
 src/pages/scene-editor.vue                    | 17 +++---
 src/stores/editor.store.ts                    | 53 +++++++++++++++++++
 6 files changed, 78 insertions(+), 27 deletions(-)
 create mode 100644 src/stores/editor.store.ts

diff --git a/src/components/context-menu/context-menu.vue b/src/components/context-menu/context-menu.vue
index 2884e9a..940edf4 100644
--- a/src/components/context-menu/context-menu.vue
+++ b/src/components/context-menu/context-menu.vue
@@ -36,7 +36,6 @@
         <RobotMenu
           v-else-if="menuType === 'robot' && robotId"
           :robot-id="robotId"
-          :token="token"
           @action-complete="handleActionComplete"
           @custom-image="handleCustomImage"
         />
@@ -53,10 +52,9 @@
 
 <script setup lang="ts">
 import { message } from 'ant-design-vue';
-import { computed, defineAsyncComponent, type InjectionKey, ref, type ShallowRef } from 'vue';
+import { computed, defineAsyncComponent, ref } from 'vue';
 
 import type { StorageLocationInfo } from '../../services/context-menu';
-import type { EditorService } from '../../services/editor.service';
 
 // 使用动态导入避免 TypeScript 错误
 const DefaultMenu = defineAsyncComponent(() => import('./default-menu.vue'));
@@ -70,7 +68,6 @@ interface Props {
   menuType?: 'default' | 'storage' | 'storage-background' | 'robot' | 'point' | 'area';
   storageLocations?: StorageLocationInfo[];
   robotId?: string; // 改为传递机器人ID
-  token?: InjectionKey<ShallowRef<EditorService>>; // 添加 editor token
   apiBaseUrl?: string;
 }
 
diff --git a/src/components/context-menu/robot-menu.vue b/src/components/context-menu/robot-menu.vue
index 7965336..308167c 100644
--- a/src/components/context-menu/robot-menu.vue
+++ b/src/components/context-menu/robot-menu.vue
@@ -126,7 +126,7 @@
 
 <script setup lang="ts">
 import { message } from 'ant-design-vue';
-import { computed, inject, type InjectionKey, ref, type ShallowRef } from 'vue';
+import { computed, ref } from 'vue';
 
 import type { RobotInfo } from '../../apis/robot';
 import type { RobotAction } from '../../services/context-menu/robot-menu.service';
@@ -135,12 +135,11 @@ import {
   getRobotStatusColor,
   getRobotStatusText
 } from '../../services/context-menu/robot-menu.service';
-import type { EditorService } from '../../services/editor.service';
+import { editorStore } from '../../stores/editor.store';
 import RobotImageSettingsModal from '../modal/robot-image-settings-modal.vue';
 
 interface Props {
   robotId?: string; // 改为传递机器人ID而不是完整的机器人信息
-  token?: InjectionKey<ShallowRef<EditorService>>; // 添加 editor token
 }
 
 interface Emits {
@@ -152,13 +151,10 @@ const props = defineProps<Props>();
 
 const emit = defineEmits<Emits>();
 
-// 注入 editor service
-const editor = props.token ? inject(props.token) : null;
-
 // 根据 robotId 获取机器人信息
 const robotInfo = computed<RobotInfo | null>(() => {
-  if (!props.robotId || !editor?.value) return null;
-  return editor.value.getRobotById(props.robotId) || null;
+  if (!props.robotId || !editorStore.hasEditor()) return null;
+  return editorStore.getEditorValue()?.getRobotById(props.robotId) || null;
 });
 
 // 图片设置模态框状态
diff --git a/src/components/modal/robot-image-settings-modal.vue b/src/components/modal/robot-image-settings-modal.vue
index f333d21..cdc1b84 100644
--- a/src/components/modal/robot-image-settings-modal.vue
+++ b/src/components/modal/robot-image-settings-modal.vue
@@ -76,7 +76,7 @@ import { message } from 'ant-design-vue';
 import { computed, onMounted, ref, watch } from 'vue';
 
 import colorConfig from '../../services/color/color-config.service';
-import { EditorService } from '../../services/editor.service';
+import { editorStore } from '../../stores/editor.store';
 
 interface RobotInfo {
   name: string;
@@ -88,7 +88,6 @@ interface Props {
   open: boolean;
   robots: RobotInfo[];
   selectedRobotName?: string;
-  editor?: EditorService; // 添加editor作为props
 }
 
 interface Emits {
@@ -119,7 +118,7 @@ const formData = ref({
 });
 
 // 获取编辑器服务实例
-const editor = computed(() => props.editor);
+const editor = computed(() => editorStore.getEditorValue());
 
 // 计算属性
 const availableRobots = computed(() => props.robots);
diff --git a/src/pages/movement-supervision.vue b/src/pages/movement-supervision.vue
index b55e06c..21385ce 100644
--- a/src/pages/movement-supervision.vue
+++ b/src/pages/movement-supervision.vue
@@ -2,7 +2,7 @@
 import {  LockState } from '@meta2d/core';
 import { message } from 'ant-design-vue';
 import { isNil } from 'lodash-es';
-import { computed, onMounted, onUnmounted, provide, ref, shallowRef, watch } from 'vue';
+import { computed, onMounted, onUnmounted, provide, ref, type ShallowRef, shallowRef, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 import type { RobotRealtimeInfo } from '../apis/robot';
@@ -15,6 +15,7 @@ import {
 import { EditorService } from '../services/editor.service';
 import { StorageLocationService } from '../services/storage-location.service';
 import { useViewState } from '../services/useViewState';
+import { editorStore } from '../stores/editor.store';
 
 const EDITOR_KEY = Symbol('editor-key');
 
@@ -215,6 +216,10 @@ const monitorScene = async () => {
 //#region 服务初始化
 onMounted(() => {
   editor.value = new EditorService(container.value!);
+  
+  // 将 editor 存储到 store 中
+  editorStore.setEditor(editor as ShallowRef<EditorService>);
+  
   storageLocationService.value = new StorageLocationService(editor.value, props.sid);
 });
 //#endregion
@@ -345,9 +350,9 @@ const contextMenuState = ref<ContextMenuState>(contextMenuManager.getState());
 //#endregion
 
 // 返回到父级 iframe 的场景卡片
-const backToCards = () => {
-  window.parent?.postMessage({ type: 'scene_return_to_cards' }, '*');
-};
+// const backToCards = () => {
+//   window.parent?.postMessage({ type: 'scene_return_to_cards' }, '*');
+// };
 
 //#region 右键菜单处理
 /**
diff --git a/src/pages/scene-editor.vue b/src/pages/scene-editor.vue
index 418f841..ce478c5 100644
--- a/src/pages/scene-editor.vue
+++ b/src/pages/scene-editor.vue
@@ -1,17 +1,15 @@
 <script setup lang="ts">
 import { message, Modal } from 'ant-design-vue';
-import { computed, watch } from 'vue';
-import { ref } from 'vue';
-import { onMounted, provide, shallowRef } from 'vue';
+import { computed, onMounted, provide, ref, type ShallowRef, shallowRef, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import type { MapPen } from '../apis/map';
 import { getSceneById, pushSceneById, saveSceneById } from '../apis/scene';
 import BatchEditToolbar from '../components/batch-edit-toolbar.vue';
 import AutoCreateStorageModal from '../components/modal/auto-create-storage-modal.vue';
 import { EditorService } from '../services/editor.service';
 import { useViewState } from '../services/useViewState';
 import { decodeTextFile, downloadFile, selectFile, textToBlob } from '../services/utils';
+import { editorStore } from '../stores/editor.store';
 
 const EDITOR_KEY = Symbol('editor-key');
 
@@ -88,6 +86,9 @@ const autoCreateStorageData = ref<{
 onMounted(() => {
   editor.value = new EditorService(container.value!);
   
+  // 将 editor 存储到 store 中
+  editorStore.setEditor(editor as ShallowRef<EditorService>);
+  
   // 监听自动生成库位对话框事件
   editor.value?.on('autoCreateStorageDialog', (data: any) => {
     autoCreateStorageData.value = data;
@@ -178,10 +179,10 @@ const handleAutoSaveAndRestoreViewState = async () => {
 
   await autoSaveAndRestoreViewState(editor.value, props.id);
 };
-// 返回到父级 iframe 的场景卡片
-const backToCards = () => {
-  window.parent?.postMessage({ type: 'scene_return_to_cards' }, '*');
-};
+// // 返回到父级 iframe 的场景卡片
+// const backToCards = () => {
+//   window.parent?.postMessage({ type: 'scene_return_to_cards' }, '*');
+// };
 
 // 处理自动生成库位确认
 const handleAutoCreateStorageConfirm = (actionPoints: any[]) => {
diff --git a/src/stores/editor.store.ts b/src/stores/editor.store.ts
new file mode 100644
index 0000000..994bf07
--- /dev/null
+++ b/src/stores/editor.store.ts
@@ -0,0 +1,53 @@
+import type { ShallowRef } from 'vue';
+
+import type { EditorService } from '../services/editor.service';
+
+/**
+ * Editor Store
+ * 管理编辑器实例的全局状态
+ */
+class EditorStore {
+  private _editor: ShallowRef<EditorService> | null = null;
+
+  /**
+   * 获取编辑器实例
+   */
+  get editor(): ShallowRef<EditorService> | null {
+    return this._editor;
+  }
+
+  /**
+   * 设置编辑器实例
+   * @param editor 编辑器实例
+   */
+  setEditor(editor: ShallowRef<EditorService>): void {
+    this._editor = editor;
+  }
+
+  /**
+   * 清除编辑器实例
+   */
+  clearEditor(): void {
+    this._editor = null;
+  }
+
+  /**
+   * 检查是否有编辑器实例
+   */
+  hasEditor(): boolean {
+    return this._editor !== null && this._editor.value !== undefined;
+  }
+
+  /**
+   * 获取编辑器实例的值
+   */
+  getEditorValue(): EditorService | null {
+    return this._editor?.value || null;
+  }
+}
+
+// 创建单例实例
+export const editorStore = new EditorStore();
+
+// 导出类型
+export type { EditorService };