fix: 修复属性编辑未失焦时切换元素异常

- 点击画布元素或空白区域前，先提交右侧属性面板中正在编辑的输入框
- 属性面板改为按元素 id 回写数据，避免选中态切换影响更新目标
- 修复编辑位置等属性时直接点击其他元素导致旧元素状态丢失、面板异常的问题

src/components/mt-edit/components/layout/main-panel/index.vue

@@ -141,6 +141,16 @@ const done_json = computed({
     globalStore.setGlobalStoreDoneJson(val)
   }
 })
+const commitActiveRightAsideEditor = () => {
+  const activeElement = document.activeElement
+  if (!(activeElement instanceof HTMLElement)) {
+    return
+  }
+  if (!activeElement.closest('#mt-right-aside')) {
+    return
+  }
+  activeElement.blur()
+}
 const sys_line_init = configStore.sysComponent.find((f) => f.type == 'sys-line')!
 const draw_line_init_data: IDoneJson = {
   id: sys_line_init.id + '-' + randomString(),
@@ -277,6 +287,7 @@ const onDragOver = (e: DragEvent) => {
   e.preventDefault()
 }
 const onRenderCoreMouseDown = (item: IDoneJson, e: MouseEvent) => {
+  commitActiveRightAsideEditor()
   beginListenerKeyDown()
   if (isSystemShortcutKey(e)) {
     shortcut_drag_select_item_id.value = item.lock ? '' : item.id
@@ -324,6 +335,7 @@ const onRenderCoreMouseDown = (item: IDoneJson, e: MouseEvent) => {
   }
 }
 const onMouseDown = (e: MouseEvent) => {
+  commitActiveRightAsideEditor()
   beginListenerKeyDown()
   if (isSystemShortcutKey(e)) {
     shortcut_drag_select_item_id.value = ''
@@ -776,7 +788,9 @@ const dragCanvasMouseUp = () => {
     globalStore.setIntention('endDragCanvas')
   } else {
     if (shortcut_drag_select_item_id.value) {
-      const find_item = globalStore.done_json.find((f) => f.id == shortcut_drag_select_item_id.value)
+      const find_item = globalStore.done_json.find(
+        (f) => f.id == shortcut_drag_select_item_id.value
+      )
       if (find_item) {
         find_item.active = !find_item.active
         globalStore.refreshSelectedItemsId()

src/components/mt-edit/components/layout/right-aside/index.vue

@@ -1,10 +1,11 @@
 <template>
   <div id="mt-right-aside" class="px-4">
     <select-item-setting
-      v-if="globalStore.selected_items_id.length == 1"
+      v-if="selected_item_json"
       :key="selected_item_id"
-      v-model:item-json="globalStore.done_json[find_index_item_json]"
+      :item-json="selected_item_json"
       :done-json="globalStore.done_json"
+      @update:item-json="onUpdateItemJson"
       @add-history="onAddHistory">
       <template v-if="hasDeviceBindSlot" #deviceBind="{ item }">
         <slot name="deviceBind" :item="item"></slot> </template
@@ -21,11 +22,24 @@ import PageSetting from './page-setting.vue'
 import SelectItemSetting from './select-item-setting.vue'
 import { globalStore } from '@/components/mt-edit/store/global'
 import { cacheStore } from '@/components/mt-edit/store/cache'
+import type { IDoneJson } from '@/components/mt-edit/store/types'
 const slots = useSlots()
-const find_index_item_json = computed(() => {
-  return globalStore.done_json.findIndex((f) => f.id == globalStore.selected_items_id[0])
-})
 const selected_item_id = computed(() => globalStore.selected_items_id[0] || '')
+const selected_item_json = computed(() => {
+  if (globalStore.selected_items_id.length !== 1) {
+    return null
+  }
+  return globalStore.done_json.find((f) => f.id == selected_item_id.value) || null
+})
+const onUpdateItemJson = (item: IDoneJson) => {
+  const find_index_item_json = globalStore.done_json.findIndex((f) => f.id == item.id)
+  if (find_index_item_json < 0) {
+    return
+  }
+  const done_json_temp = [...globalStore.done_json]
+  done_json_temp[find_index_item_json] = item
+  globalStore.setGlobalStoreDoneJson(done_json_temp)
+}
 const onAddHistory = () => {
   cacheStore.addHistory(globalStore.done_json)
 }