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',
+          {
+            '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,6 +76,7 @@ defineExpose({
         :min-size="leftMinWidth"
       >
         <template #default="slotProps">
+          <div class="h-full pr-2">
             <slot
               name="left"
               v-bind="{
@@ -84,6 +85,7 @@ defineExpose({
                 collapse: collapseLeft,
               }"
             ></slot>
+          </div>
         </template>
       </ResizablePanel>
       <ResizableHandle
@@ -99,7 +101,9 @@ defineExpose({
         :min-size="rightMinWidth"
       >
         <template #default>
+          <div class="h-full pl-2">
             <slot></slot>
+          </div>
         </template>
       </ResizablePanel>
     </ResizablePanelGroup>