fix: keepAlive not working for popup appendToMain (#5666)

* 修复弹窗和抽屉 `appendToMain` 时且启用`keepAlive` 时未能正确缓存的问题

packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue

@@ -127,7 +127,9 @@ function handleFocusOutside(e: Event) {
 }
 
 const getAppendTo = computed(() => {
-  return appendToMain.value ? `#${ELEMENT_ID_MAIN_CONTENT}` : undefined;
+  return appendToMain.value
+    ? `#${ELEMENT_ID_MAIN_CONTENT}>div:not(.absolute)>div`
+    : undefined;
 });
 </script>
 <template>

packages/@core/ui-kit/popup-ui/src/modal/modal.vue

@@ -172,7 +172,9 @@ function handleFocusOutside(e: Event) {
   e.stopPropagation();
 }
 const getAppendTo = computed(() => {
-  return appendToMain.value ? `#${ELEMENT_ID_MAIN_CONTENT}` : undefined;
+  return appendToMain.value
+    ? `#${ELEMENT_ID_MAIN_CONTENT}>div:not(.absolute)>div`
+    : undefined;
 });
 </script>
 <template>

playground/src/router/routes/modules/examples.ts

@@ -213,6 +213,7 @@ const routes: RouteRecordRaw[] = [
         component: () => import('#/views/examples/modal/index.vue'),
         meta: {
           icon: 'system-uicons:window-content',
+          keepAlive: true,
           title: $t('examples.modal.title'),
         },
       },
@@ -222,6 +223,7 @@ const routes: RouteRecordRaw[] = [
         component: () => import('#/views/examples/drawer/index.vue'),
         meta: {
           icon: 'iconoir:drawer',
+          keepAlive: true,
           title: $t('examples.drawer.title'),
         },
       },

playground/src/views/examples/drawer/in-content-demo.vue

@@ -1,7 +1,11 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+
 import { useVbenDrawer } from '@vben/common-ui';
 
-import { message } from 'ant-design-vue';
+import { Input, message } from 'ant-design-vue';
+
+const value = ref('');
 
 const [Drawer, drawerApi] = useVbenDrawer({
   onCancel() {
@@ -17,5 +21,6 @@ const [Drawer, drawerApi] = useVbenDrawer({
   <Drawer append-to-main title="基础抽屉示例" title-tooltip="标题提示内容">
     <template #extra> extra </template>
     本抽屉指定在内容区域打开
+    <Input v-model="value" placeholder="KeepAlive测试" />
   </Drawer>
 </template>

playground/src/views/examples/drawer/index.vue

@@ -13,6 +13,7 @@ import FormDrawerDemo from './form-drawer-demo.vue';
 import inContentDemo from './in-content-demo.vue';
 import SharedDataDemo from './shared-data-demo.vue';
 
+defineOptions({ name: 'DrawerExample' });
 const [BaseDrawer, baseDrawerApi] = useVbenDrawer({
   // 连接抽离的组件
   connectedComponent: BaseDemo,

playground/src/views/examples/modal/in-content-demo.vue

@@ -1,9 +1,12 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+
 import { useVbenModal } from '@vben/common-ui';
 
-import { message } from 'ant-design-vue';
+import { Input, message } from 'ant-design-vue';
 
 const [Modal, modalApi] = useVbenModal({
+  destroyOnClose: false,
   onCancel() {
     modalApi.close();
   },
@@ -12,6 +15,7 @@ const [Modal, modalApi] = useVbenModal({
     // modalApi.close();
   },
 });
+const value = ref();
 </script>
 <template>
   <Modal
@@ -21,5 +25,6 @@ const [Modal, modalApi] = useVbenModal({
     title-tooltip="标题提示内容"
   >
     此弹窗指定在内容区域打开
+    <Input v-model="value" placeholder="KeepAlive测试" />
   </Modal>
 </template>

playground/src/views/examples/modal/index.vue

@@ -14,6 +14,8 @@ import InContentModalDemo from './in-content-demo.vue';
 import NestedDemo from './nested-demo.vue';
 import SharedDataDemo from './shared-data-demo.vue';
 
+defineOptions({ name: 'ModalExample' });
+
 const [BaseModal, baseModalApi] = useVbenModal({
   // 连接抽离的组件
   connectedComponent: BaseDemo,