fix: header 隐藏时 contentEditorPanel 无法通过 API 调用关闭

packages/webview/src/components/HeaderItems/HeaderItems.vue

@@ -63,7 +63,16 @@
       <template v-for="(item, index) in rightItems" :key="`${item.type}-${item.dataElement || index}`">
         <CustomButton v-if="item.name === 'customButton' && !item.hidden && !item.dropItem" :item="item" :data-element="item.dataElement" />
         <SearchButton v-else-if="item.type === 'searchButton' && !item.hidden" :item="item" :data-element="item.dataElement" />
-        <ToggleRightPanelButton v-else-if="item.type === 'toggleRightPanelButton' && !item.hidden" :item="item" :disabled="!load" :data-element="item.dataElement" />
+        <ToggleRightPanelButton
+          v-else-if="item.type === 'toggleRightPanelButton' && !item.hidden"
+          :item="item"
+          :disabled="!load"
+          :data-element="item.dataElement"
+          :isActive="isActive"
+          :contentEditorPanel="contentEditorPanel"
+          :rightPanelButtonDisabled="rightPanelButtonDisabled"
+          @changeToggleBtnDisabled="changeToggleBtnDisabled"
+          />
         <OpenFileButton v-else-if="item.type === 'openFileButton' && !item.hidden" :item="item" :data-element="item.dataElement" />
         <PageMode v-else-if="item.type === 'pageModeButton' && !item.hidden" :class="{ disabled: !load }" :data-element="item.dataElement" />
         <div v-else-if="['spacer', 'divider'].includes(item.type)" :class="item.type"></div>
@@ -158,6 +167,53 @@ const changeToolMode = (mode) => {
     useViewer.resetPanels()
   }
 }
+
+const isActive = computed(() => {
+  return useViewer.isElementOpen('rightPanel')
+})
+const contentEditorPanel = computed(() => useViewer.isElementOpen('contentEditorPanel'))
+const contentEditorType = computed(() => useViewer.getContentEditorType)
+const rightPanelButtonDisabled = computed(() => useViewer.getRightPanelButtonDisabled)
+
+let isDisabled = ref(true)
+let isEditorPanelDisabled = ref(true)
+
+const changeToggleBtnDisabled = (val) => {
+  isDisabled.value = val
+}
+
+watch(() => contentEditorPanel.value, (newValue, oldValue) => {
+  isEditorPanelDisabled.value = !contentEditorPanel.value && !document.querySelector('.frame-container.selected')
+})
+
+watch(() => prop.toolMode, (newValue, oldValue) => {
+  if (oldValue === 'form' && newValue !== 'form') {
+    useViewer.closeElement('rightPanel')
+  }
+})
+
+watch(() => [isDisabled, isEditorPanelDisabled, prop.toolMode], (newValues, oldValues) => {
+  const disabled = (newValues[0] && newValues[1]) || (newValues[2] !== 'form' && newValues[2] !== 'editor')
+  useViewer.setRightPanelButtonDisabled(disabled)
+})
+
+watch([isActive, contentEditorPanel], (newValue, oldValue) => {
+  if (newValue[0] || newValue[1]) {
+    core.eventBus().dispatch('isRightSidePanelOpened', true)
+  } else {
+    core.eventBus().dispatch('isRightSidePanelOpened', false)
+  }
+})
+
+watch(rightPanelButtonDisabled, (newValue, oldValue) => {
+  core.eventBus().dispatch('isRightSidePanelBtnDisabled', newValue)
+})
+
+const changeDisabled = (val) => {
+  isEditorPanelDisabled.value = val
+  isDisabled.value = document.getElementsByClassName('outline-container').length === 0
+}
+core.addEvent('changeRightPanelBtnDisabled', changeDisabled)
 </script>
 
 <style lang="scss">

packages/webview/src/components/ToggleRightPanelButton/index.vue

@@ -9,52 +9,17 @@
   import { computed, ref, watch } from 'vue'
   import core from '@/core'
 
+  const { item } = defineProps(['isActive', 'item', 'contentEditorPanel', 'rightPanelButtonDisabled'])
+  const emits = defineEmits(['changeToggleBtnDisabled'])
   const useViewer = useViewerStore()
-  const { item } = defineProps(['item'])
-
   const toolMode = computed(() => useViewer.getToolMode)
-  const isActive = computed(() => {
-    return useViewer.isElementOpen(item.element)
-  })
-  const contentEditorPanel = computed(() => useViewer.isElementOpen('contentEditorPanel'))
-  const contentEditorType = computed(() => useViewer.getContentEditorType)
-  const rightPanelButtonDisabled = computed(() => useViewer.getRightPanelButtonDisabled)
-
-  let isDisabled = ref(true)
-  let isEditorPanelDisabled = ref(true)
-
-  watch(() => contentEditorPanel.value, (newValue, oldValue) => {
-    isEditorPanelDisabled.value = !contentEditorPanel.value && !document.querySelector('.frame-container.selected')
-  })
-
-  watch(toolMode, (newValue, oldValue) => {
-    if (oldValue === 'form' && newValue !== 'form') {
-      useViewer.closeElement(item.element)
-    }
-  })
-
-  watch([isDisabled, isEditorPanelDisabled, toolMode], (newValues, oldValues) => {
-    const disabled = (newValues[0] && newValues[1]) || (newValues[2] !== 'form' && newValues[2] !== 'editor')
-    useViewer.setRightPanelButtonDisabled(disabled)
-  })
-
-  watch([isActive, contentEditorPanel], (newValue, oldValue) => {
-    if (newValue[0] || newValue[1]) {
-      core.eventBus().dispatch('isRightSidePanelOpened', true)
-    } else {
-      core.eventBus().dispatch('isRightSidePanelOpened', false)
-    }
-  })
-
-  watch(rightPanelButtonDisabled, (newValue, oldValue) => {
-    core.eventBus().dispatch('isRightSidePanelBtnDisabled', newValue)
-  })
 
   const onClick = () => {
     setTimeout(() => {
-      isDisabled.value = document.getElementsByClassName('outline-container').length === 0
+      const isDisabled = document.getElementsByClassName('outline-container').length === 0
+      emits('changeToggleBtnDisabled', isDisabled)
 
-      if (toolMode.value === 'form' && isDisabled.value && document.getElementsByClassName('right-panel')[0].className.indexOf('closed') !== -1) return
+      if (toolMode.value === 'form' && isDisabled && document.getElementsByClassName('right-panel')[0].className.indexOf('closed') !== -1) return
 
       if (toolMode.value === 'form') {
         useViewer.toggleElement(item.element)
@@ -63,10 +28,4 @@
       }
     }, 1);
   }
-
-  const changeDisabled = (val) => {
-    isEditorPanelDisabled.value = val
-    isDisabled.value = document.getElementsByClassName('outline-container').length === 0
-  }
-  core.addEvent('changeRightPanelBtnDisabled', changeDisabled)
 </script>