diff --git a/src/drawer/__test__/__snapshots__/demo.test.jsx.snap b/src/drawer/__test__/__snapshots__/demo.test.jsx.snap
index e3decdf38..f96eec14e 100644
--- a/src/drawer/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/drawer/__test__/__snapshots__/demo.test.jsx.snap
@@ -24,9 +24,8 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
       <div
         class="t-drawer"
       >
-        <!--v-if-->
-        
-        
+        <!---->
+        <!---->
         <div
           class="t-drawer__sidebar"
         >
@@ -34,7 +33,7 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -44,7 +43,7 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -54,7 +53,7 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -64,7 +63,7 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -74,7 +73,7 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -84,7 +83,7 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -93,11 +92,7 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
           </div>
           
         </div>
-        <div
-          class="t-drawer__footer"
-        >
-          <!---->
-        </div>
+        <!---->
       </div>
       
     </div>
@@ -146,9 +141,8 @@ exports[`Drawer > Drawer footerVue demo works fine 1`] = `
       <div
         class="t-drawer"
       >
-        <!--v-if-->
-        
-        
+        <!---->
+        <!---->
         <div
           class="t-drawer__sidebar"
         >
@@ -156,7 +150,7 @@ exports[`Drawer > Drawer footerVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -166,7 +160,7 @@ exports[`Drawer > Drawer footerVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -176,7 +170,7 @@ exports[`Drawer > Drawer footerVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -186,7 +180,7 @@ exports[`Drawer > Drawer footerVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -196,7 +190,7 @@ exports[`Drawer > Drawer footerVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -206,7 +200,7 @@ exports[`Drawer > Drawer footerVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -290,9 +284,8 @@ exports[`Drawer > Drawer iconVue demo works fine 1`] = `
       <div
         class="t-drawer"
       >
-        <!--v-if-->
-        
-        
+        <!---->
+        <!---->
         <div
           class="t-drawer__sidebar"
         >
@@ -449,11 +442,7 @@ exports[`Drawer > Drawer iconVue demo works fine 1`] = `
           </div>
           
         </div>
-        <div
-          class="t-drawer__footer"
-        >
-          <!---->
-        </div>
+        <!---->
       </div>
       
     </div>
@@ -538,9 +527,8 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
           <div
             class="t-drawer"
           >
-            <!--v-if-->
-            
-            
+            <!---->
+            <!---->
             <div
               class="t-drawer__sidebar"
             >
@@ -548,7 +536,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -558,7 +546,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -568,7 +556,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -578,7 +566,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -588,7 +576,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -598,7 +586,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -607,11 +595,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               </div>
               
             </div>
-            <div
-              class="t-drawer__footer"
-            >
-              <!---->
-            </div>
+            <!---->
           </div>
           
         </div>
@@ -675,9 +659,8 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
           <div
             class="t-drawer"
           >
-            <!--v-if-->
-            
-            
+            <!---->
+            <!---->
             <div
               class="t-drawer__sidebar"
             >
@@ -834,11 +817,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               </div>
               
             </div>
-            <div
-              class="t-drawer__footer"
-            >
-              <!---->
-            </div>
+            <!---->
           </div>
           
         </div>
@@ -911,8 +890,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
             >
               标题
             </div>
-            
-            
+            <!---->
             <div
               class="t-drawer__sidebar"
             >
@@ -920,7 +898,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -930,7 +908,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -940,7 +918,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -950,7 +928,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -960,7 +938,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -970,7 +948,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -979,11 +957,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               </div>
               
             </div>
-            <div
-              class="t-drawer__footer"
-            >
-              <!---->
-            </div>
+            <!---->
           </div>
           
         </div>
@@ -1046,9 +1020,8 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
           <div
             class="t-drawer"
           >
-            <!--v-if-->
-            
-            
+            <!---->
+            <!---->
             <div
               class="t-drawer__sidebar"
             >
@@ -1056,7 +1029,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -1066,7 +1039,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -1076,7 +1049,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -1086,7 +1059,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -1096,7 +1069,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -1106,7 +1079,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
               <div
                 class="t-drawer__sidebar-item"
               >
-                <!--v-if-->
+                <!---->
                 <div
                   class="t-drawer__sidebar-item-title"
                 >
@@ -1258,8 +1231,7 @@ exports[`Drawer > Drawer titleVue demo works fine 1`] = `
         >
           标题
         </div>
-        
-        
+        <!---->
         <div
           class="t-drawer__sidebar"
         >
@@ -1267,7 +1239,7 @@ exports[`Drawer > Drawer titleVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -1277,7 +1249,7 @@ exports[`Drawer > Drawer titleVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -1287,7 +1259,7 @@ exports[`Drawer > Drawer titleVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -1297,7 +1269,7 @@ exports[`Drawer > Drawer titleVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -1307,7 +1279,7 @@ exports[`Drawer > Drawer titleVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -1317,7 +1289,7 @@ exports[`Drawer > Drawer titleVue demo works fine 1`] = `
           <div
             class="t-drawer__sidebar-item"
           >
-            <!--v-if-->
+            <!---->
             <div
               class="t-drawer__sidebar-item-title"
             >
@@ -1326,11 +1298,7 @@ exports[`Drawer > Drawer titleVue demo works fine 1`] = `
           </div>
           
         </div>
-        <div
-          class="t-drawer__footer"
-        >
-          <!---->
-        </div>
+        <!---->
       </div>
       
     </div>
diff --git a/src/drawer/__test__/index.test.jsx b/src/drawer/__test__/index.test.jsx
index 4ea6f006e..8a7857ad1 100644
--- a/src/drawer/__test__/index.test.jsx
+++ b/src/drawer/__test__/index.test.jsx
@@ -1,6 +1,6 @@
 import { config, mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
-import drawer from '../drawer.vue';
+import drawer from '../drawer';
 import { ref, h } from 'vue';
 import { AppIcon } from 'tdesign-icons-vue-next';
 
diff --git a/src/drawer/drawer.tsx b/src/drawer/drawer.tsx
new file mode 100644
index 000000000..ef88b9d9b
--- /dev/null
+++ b/src/drawer/drawer.tsx
@@ -0,0 +1,96 @@
+import { ref, watch, toRefs, defineComponent, h } from 'vue';
+import TPopup from '../popup';
+import config from '../config';
+import props from './props';
+import { DrawerItem } from './type';
+import { useTNodeJSX } from '@/hooks/tnode';
+import { usePrefixClass } from '@/hooks/useClass';
+
+const { prefix } = config;
+const name = `${prefix}-drawer`;
+
+export default defineComponent({
+  name,
+  components: { TPopup },
+  props,
+  emits: ['update:visible', 'itemClick', 'overlayClick'],
+  setup(props, context) {
+    const renderTNodeJSX = useTNodeJSX();
+    const drawerClass = usePrefixClass('drawer');
+    const { visible, showOverlay } = toRefs(props);
+    const open = ref(visible.value || false);
+
+    watch(open, () => {
+      context.emit('update:visible', open.value);
+    });
+
+    watch(visible, () => {
+      open.value = visible.value;
+    });
+
+    const onItemClick = (index: number, item: DrawerItem, context: { e: MouseEvent }) => {
+      props.onItemClick?.(index, item, context);
+    };
+
+    const onVisibleChange = (visible: boolean) => {
+      if (showOverlay.value) {
+        props.onOverlayClick?.({ visible });
+      }
+    };
+
+    const onClose = () => {
+      props.onClose?.('overlay');
+    };
+
+    return () => {
+      const { attach, zIndex, closeOnOverlayClick, destroyOnClose, items, placement, showOverlay } = props;
+      const renderTitleNode = () => {
+        const titleNode = renderTNodeJSX('title');
+        if (!titleNode) {
+          return null;
+        }
+        return <div class={`${drawerClass.value}__title`}>{titleNode}</div>;
+      };
+      const renderFooterNode = () => {
+        const footerNode = renderTNodeJSX('footer');
+        if (!footerNode) {
+          return null;
+        }
+        return <div class={`${drawerClass.value}__footer`}>{footerNode}</div>;
+      };
+      return (
+        <t-popup
+          v-model={open.value}
+          placement={placement}
+          attach={attach}
+          showOverlay={showOverlay}
+          zIndex={zIndex}
+          closeOnOverlayClick={closeOnOverlayClick}
+          destroyOnClose={destroyOnClose}
+          onVisibleChange={onVisibleChange}
+          onClose={onClose}
+        >
+          <div class={`${drawerClass.value}`}>
+            {renderTitleNode()}
+            {renderTNodeJSX('default')}
+
+            <div class={`${drawerClass.value}__sidebar`}>
+              {(items || []).map((item, index) => (
+                <div
+                  key={item.title}
+                  class={`${drawerClass.value}__sidebar-item`}
+                  onClick={(e) => onItemClick(index, item, { e })}
+                >
+                  {item.icon && <span class={`${drawerClass.value}__sidebar-item-icon`}>{item.icon(h)}</span>}
+                  <div class={`${drawerClass.value}__sidebar-item-title`}>{item.title}</div>
+                </div>
+              ))}
+            </div>
+
+            {renderFooterNode()}
+          </div>
+        </t-popup>
+      );
+    };
+  },
+});
diff --git a/src/drawer/drawer.vue b/src/drawer/drawer.vue
deleted file mode 100644
index 6d773f0f0..000000000
--- a/src/drawer/drawer.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <t-popup
-    v-model="open"
-    :placement="placement"
-    :attach="attach"
-    :show-overlay="showOverlay"
-    :z-index="zIndex"
-    :close-on-overlay-click="closeOnOverlayClick"
-    :destroy-on-close="destroyOnClose"
-    @visible-change="onVisibleChange"
-    @close="onClose"
-  >
-    <div :class="`${name}`">
-      <div v-if="titleNode" :class="`${name}__title`">
-        <t-node :content="titleNode" />
-      </div>
-      <slot />
-
-      <div :class="`${name}__sidebar`">
-        <div
-          v-for="(item, index) in items"
-          :key="item.title"
-          :class="`${name}__sidebar-item`"
-          @click="onItemClick(index, item, { e: $event })"
-        >
-          <span v-if="!!item.icon" :class="`${name}__sidebar-item-icon`">
-            <component :is="item.icon" />
-          </span>
-          <div :class="`${name}__sidebar-item-title`">{{ item.title }}</div>
-        </div>
-      </div>
-
-      <div :class="`${name}__footer`">
-        <t-node :content="footerNode" />
-      </div>
-    </div>
-  </t-popup>
-</template>
-
-<script lang="ts">
-import { ref, watch, toRefs, computed, defineComponent, getCurrentInstance } from 'vue';
-import TPopup from '../popup';
-import config from '../config';
-import { renderTNode, TNode } from '../shared';
-import DrawerProps from './props';
-import { DrawerItem } from './type';
-
-const { prefix } = config;
-const name = `${prefix}-drawer`;
-
-export default defineComponent({
-  name,
-  components: { TPopup, TNode },
-  props: DrawerProps,
-  emits: ['update:visible', 'itemClick', 'overlayClick'],
-  setup(props, context) {
-    const currentInstance = getCurrentInstance();
-    const { visible, placement, showOverlay } = toRefs(props);
-    const open = ref(visible.value || false);
-
-    const titleNode = computed(() => renderTNode(currentInstance, 'title'));
-    const footerNode = computed(() => renderTNode(currentInstance, 'footer'));
-
-    watch(open, () => {
-      context.emit('update:visible', open.value);
-    });
-
-    watch(visible, () => {
-      open.value = visible.value;
-    });
-
-    const onItemClick = (index: number, item: DrawerItem, context: { e: MouseEvent }) => {
-      props.onItemClick?.(index, item, context);
-    };
-
-    const onVisibleChange = (visible: boolean) => {
-      if (showOverlay.value) {
-        props.onOverlayClick?.({ visible });
-      }
-    };
-
-    const onClose = () => {
-      props.onClose?.('overlay');
-    };
-
-    return {
-      name,
-      placement,
-      showOverlay,
-      open,
-      titleNode,
-      footerNode,
-      onItemClick,
-      onVisibleChange,
-      onClose,
-    };
-  },
-});
-</script>
diff --git a/src/drawer/index.ts b/src/drawer/index.ts
index 6993407e5..e45567a1f 100644
--- a/src/drawer/index.ts
+++ b/src/drawer/index.ts
@@ -1,4 +1,4 @@
-import _Drawer from './drawer.vue';
+import _Drawer from './drawer';
 import { withInstall, WithInstallType } from '../shared';
 
 import './style';
diff --git a/src/drawer/plugin.ts b/src/drawer/plugin.ts
index d1aec43b1..fde3efc9b 100644
--- a/src/drawer/plugin.ts
+++ b/src/drawer/plugin.ts
@@ -1,5 +1,5 @@
 import { createApp, App, h, ref, nextTick } from 'vue';
-import vueDrawer from './drawer.vue';
+import vueDrawer from './drawer';
 import { WithInstallType, isBrowser } from '../shared';
 import { TdDrawerProps } from './type';