Fix: 在isMobile=true时无法自定义Drawer的class问题 (#7941)

* fix: 在isMobile=true时无法自定义Drawer的class问题

* fix: 在ResizableHandle两边增加边距

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

@@ -54,7 +54,6 @@ const components = globalShareState.getComponents();
 const id = useId();
 provide('DISMISSABLE_DRAWER_ID', id);
 
-// @ts-expect-error unused
 const wrapperRef = ref<HTMLElement>();
 const { $t } = useSimpleLocale();
 const { isMobile } = useIsMobile();
@@ -185,11 +184,16 @@ const getForceMount = computed(() => {
     <SheetContent
       :append-to="getAppendTo"
       :class="
-        cn('flex w-130 flex-col', drawerClass, {
+        cn(
-          'w-full!': isMobile || placement === 'bottom' || placement === 'top',
+          'flex w-130 flex-col',
-          'max-h-screen': placement === 'bottom' || placement === 'top',
+          {
-          hidden: isClosed,
+            'w-full!':
-        })
+              isMobile || placement === 'bottom' || placement === 'top',
+            'max-h-screen': placement === 'bottom' || placement === 'top',
+            hidden: isClosed,
+          },
+          drawerClass,
+        )
       "
       :modal="modal"
       :open="state?.isOpen"

packages/effects/common-ui/src/components/col-page/col-page.vue

@@ -76,14 +76,16 @@ defineExpose({
         :min-size="leftMinWidth"
       >
         <template #default="slotProps">
-          <slot
+          <div class="h-full pr-2">
-            name="left"
+            <slot
-            v-bind="{
+              name="left"
-              ...slotProps,
+              v-bind="{
-              expand: expandLeft,
+                ...slotProps,
-              collapse: collapseLeft,
+                expand: expandLeft,
-            }"
+                collapse: collapseLeft,
-          ></slot>
+              }"
+            ></slot>
+          </div>
         </template>
       </ResizablePanel>
       <ResizableHandle
@@ -99,7 +101,9 @@ defineExpose({
         :min-size="rightMinWidth"
       >
         <template #default>
-          <slot></slot>
+          <div class="h-full pl-2">
+            <slot></slot>
+          </div>
         </template>
       </ResizablePanel>
     </ResizablePanelGroup>