feat(design): popover 添加destroyOnClose props

packages/design/src/Popover.vue

@@ -2,12 +2,14 @@
   <slot name="reference"></slot>
   <Teleport to="body">
     <div
-      v-if="popoverVisible"
+      v-if="popoverVisible || !destroyOnClose"
+      v-show="popoverVisible"
       class="tmagic-design-popper"
-      tabindex="-1"
       ref="popperElementRef"
+      :tabindex="tabindex"
       :class="popperClass"
       :style="style"
+      @mouseenter.once="popperMouseenterHandler"
     >
       <slot></slot>
       <span class="tmagic-design-popper-arrow" data-popper-arrow></span>
@@ -24,7 +26,9 @@ import { useZIndex } from './index';
 import type { PopoverProps } from './types';
 
 defineSlots<{
+  /** 触发 Popover 显示的 HTML 元素 */
   reference(props: {}): any;
+  /** Popover 内嵌 HTML 文本 */
   default(props: {}): any;
 }>();
 
@@ -37,6 +41,8 @@ const props = withDefaults(defineProps<PopoverProps>(), {
   trigger: 'hover',
   disabled: false,
   visible: undefined,
+  tabindex: 0,
+  destroyOnClose: false,
 });
 
 const popoverVisible = ref(false);
@@ -84,12 +90,11 @@ onMounted(() => {
 });
 
 const zIndex = useZIndex();
-watch([referenceElementRef, popperElementRef], ([referenceElement, popperElement]) => {
+watch([referenceElementRef, popperElementRef, popoverVisible], ([referenceElement, popperElement, popoverVisible]) => {
   destroy();
-  if (!referenceElement || !popperElement) return;
+  if (!referenceElement || !popperElement || !popoverVisible) return;
 
   popperElement.style.zIndex = `${zIndex.nextZIndex()}`;
-  popperElement.focus();
 
   instanceRef.value = createPopper(referenceElement, popperElement, {
     placement: props.placement || 'bottom',
@@ -105,6 +110,10 @@ watch([referenceElementRef, popperElementRef], ([referenceElement, popperElement
   });
 });
 
+const popperMouseenterHandler = () => {
+  popperElementRef.value?.focus();
+};
+
 const clickHandler = () => {
   if (props.disabled) return;
 
@@ -129,9 +138,9 @@ const mouseleaveHandler = () => {
     clearTimeout(timer);
   }
 
-  timer = setTimeout(() => {
+  timer = globalThis.setTimeout(() => {
     popoverVisible.value = false;
-  }, 500);
+  }, 350);
 };
 
 if (props.trigger === 'click' && typeof props.visible === 'undefined') {

packages/design/src/types.ts

@@ -230,6 +230,8 @@ export interface PopoverProps {
   disabled?: boolean;
   visible?: boolean;
   popperClass?: string;
+  tabindex?: number;
+  destroyOnClose?: boolean;
 }
 
 export interface RadioProps {

packages/editor/src/editorProps.ts

@@ -82,7 +82,7 @@ export interface EditorProps {
   /** 禁用属性配置面板右下角显示源码的按钮 */
   disabledShowSrc?: boolean;
   /** 中间工作区域中画布渲染的内容 */
-  render?: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
+  render?: (stage: StageCore) => HTMLDivElement | void | Promise<HTMLDivElement | void>;
   /** 选中时会在画布上复制出一个大小相同的dom，实际拖拽的是这个dom，此方法用于干预这个dom的生成方式 */
   updateDragEl?: UpdateDragEl;
   /** 用于设置画布上的dom是否可以被选中 */

packages/editor/src/layouts/page-bar/PageBar.vue

@@ -24,7 +24,13 @@
           </slot>
         </div>
 
-        <TMagicPopover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
+        <TMagicPopover
+          popper-class="page-bar-popover"
+          placement="top"
+          trigger="hover"
+          :width="160"
+          :destroy-on-close="true"
+        >
           <div>
             <slot name="page-bar-popover" :page="item">
               <ToolButton

packages/editor/src/layouts/page-bar/PageList.vue

@@ -4,7 +4,13 @@
     id="m-editor-page-bar-list-icon"
     class="m-editor-page-bar-item m-editor-page-bar-item-icon"
   >
-    <TMagicPopover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
+    <TMagicPopover
+      popper-class="page-bar-popover"
+      placement="top"
+      trigger="hover"
+      :width="160"
+      :destroy-on-close="true"
+    >
       <div>
         <slot name="page-list-popover" :list="list">
           <ToolButton

packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -2,7 +2,13 @@
   <TMagicScrollbar class="data-source-list-panel m-editor-layer-panel">
     <div class="search-wrapper">
       <SearchInput @search="filterTextChangeHandler"></SearchInput>
-      <TMagicPopover v-if="editable" placement="right" trigger="hover" popper-class="data-source-list-panel-add-menu">
+      <TMagicPopover
+        v-if="editable"
+        placement="right"
+        trigger="hover"
+        popper-class="data-source-list-panel-add-menu"
+        :destroy-on-close="true"
+      >
         <template #reference>
           <TMagicButton type="primary" size="small">新增</TMagicButton>
         </template>

packages/editor/src/theme/page-bar.scss

@@ -5,12 +5,13 @@
   width: 100%;
 
   .tmagic-design-button.m-editor-page-bar-switch-type-button {
-    margin-left: 7px;
+    margin-left: 10px;
     position: relative;
     top: 1px;
     border-radius: 3px 3px 0 0;
     border: 1px solid $--border-color;
     border-bottom: 1px solid transparent;
+    padding: 5px 10px;
 
     &.active {
       background-color: #f3f3f3;

packages/table/src/PopoverColumn.vue

@@ -6,6 +6,7 @@
         :placement="config.popover.placement"
         :width="config.popover.width"
         :trigger="config.popover.trigger"
+        :destroy-on-close="config.popover.destroyOnClose ?? true"
       >
         <MTable
           v-if="config.popover.tableEmbed"

packages/table/src/schema.ts

@@ -50,7 +50,7 @@ export interface ColumnConfig<T = any> {
   table?: ColumnConfig[];
   formatter?: 'datetime' | ((item: any, row: T) => any);
   popover?: {
-    placement:
+    placement?:
       | 'auto'
       | 'auto-start'
       | 'auto-end'
@@ -66,9 +66,10 @@ export interface ColumnConfig<T = any> {
       | 'right-end'
       | 'left-start'
       | 'left-end';
-    width: string | number;
+    width?: string | number;
-    trigger: 'hover' | 'click';
+    trigger?: 'hover' | 'click';
-    tableEmbed: boolean;
+    tableEmbed?: boolean;
+    destroyOnClose?: boolean;
   };
   sortable?: boolean | 'custom';
   action?: 'tip' | 'actionLink' | 'img' | 'link' | 'tag';