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..24a8d377b
--- /dev/null
+++ b/src/drawer/drawer.tsx
@@ -0,0 +1,98 @@
+import { ref, watch, toRefs, computed, defineComponent, getCurrentInstance, h } from 'vue';
+import TPopup from '../popup';
+import config from '../config';
+import { renderTNode, TNode } from '../shared';
+import DrawerProps from './props';
+import { DrawerItem } from './type';
+import { useContent, useTNodeJSX } from '@/hooks/tnode';
+import { usePrefixClass } from '@/hooks/useClass';
+
+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 renderTNodeJSX = useTNodeJSX();
+    const currentInstance = getCurrentInstance();
+    const drawerClass = usePrefixClass('drawer');
+    const { attach, visible, placement, 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 } = 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.value}
+          attach={attach}
+          showOverlay={showOverlay.value}
+          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';