feat: 在场景编辑器中新增视图状态保存与恢复功能，优化用户体验

src/pages/scene-editor.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { getSceneById, pushSceneById, saveSceneById } from '@api/scene';
 import { EditorService } from '@core/editor.service';
+import { useViewState } from '@core/useViewState';
 import { decodeTextFile, downloadFile, selectFile, textToBlob } from '@core/utils';
 import { message, Modal } from 'ant-design-vue';
 import { computed, watch } from 'vue';
@@ -52,7 +53,11 @@ const pushScene = async () => {
 const title = ref<string>('');
 watch(
   () => props.id,
-  () => readScene(),
+  async () => {
+    await readScene();
+    // 在场景加载完成后恢复视图状态
+    await handleRestoreViewState();
+  },
   { immediate: true, flush: 'post' },
 );
 
@@ -124,6 +129,32 @@ const selectRobot = (id: string) => {
   current.value = { type: 'robot', id };
   editor.value?.inactive();
 };
+
+// 视图状态管理
+const { saveViewState, restoreViewState, isSaving } = useViewState();
+
+// 保存当前视图状态
+const handleSaveViewState = async () => {
+  if (!editor.value) return;
+
+  try {
+    await saveViewState(editor.value, props.id);
+    message.success('视图状态保存成功');
+  } catch {
+    message.error('视图状态保存失败');
+  }
+};
+
+// 恢复视图状态
+const handleRestoreViewState = async () => {
+  if (!editor.value) return;
+
+  const restored = await restoreViewState(editor.value, props.id);
+  if (!restored) {
+    // 如果没有保存的状态，使用默认的centerView
+    editor.value.centerView();
+  }
+};
 </script>
 
 <template>
@@ -132,6 +163,7 @@ const selectRobot = (id: string) => {
       <a-flex justify="space-between" align="center">
         <a-typography-text class="title">{{ title }} --场景编辑</a-typography-text>
         <a-space align="center">
+          <a-button type="primary" :loading="isSaving" @click="handleSaveViewState"> 保存比例 </a-button>
           <a-button v-if="editable" class="warning" @click="editable = false">
             <i class="icon exit size-18 mr-8" />
             <span>{{ $t('退出编辑器') }}</span>