diff --git a/src/components/Container/src/collapse/CollapseHeader.vue b/src/components/Container/src/collapse/CollapseHeader.vue
index 4196c0a6f..ffc170c68 100644
--- a/src/components/Container/src/collapse/CollapseHeader.vue
+++ b/src/components/Container/src/collapse/CollapseHeader.vue
@@ -1,38 +1,40 @@
-<template>
-  <div :class="[`${prefixCls}__header px-2 py-5`, $attrs.class]">
-    <BasicTitle :helpMessage="helpMessage" normal>
-      <template v-if="title">
-        {{ title }}
-      </template>
-      <template v-else>
-        <slot name="title"></slot>
-      </template>
-    </BasicTitle>
-    <div :class="`${prefixCls}__action`">
-      <slot name="action"></slot>
-      <BasicArrow v-if="canExpan" up :expand="show" @click="$emit('expand')" />
-    </div>
-  </div>
-</template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
+<script lang="tsx">
+  import { defineComponent, computed, unref, type ExtractPropTypes } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
   import { BasicArrow, BasicTitle } from '/@/components/Basic';
 
-  const props = {
-    prefixCls: { type: String },
+  const collapseHeaderProps = {
+    prefixCls: String,
+    title: String,
+    show: Boolean,
+    canExpan: Boolean,
     helpMessage: {
       type: [Array, String] as PropType<string[] | string>,
       default: '',
     },
-    title: { type: String },
-    show: { type: Boolean },
-    canExpan: { type: Boolean },
   };
 
+  export type CollapseHeaderProps = ExtractPropTypes<typeof collapseHeaderProps>;
+
   export default defineComponent({
-    components: { BasicArrow, BasicTitle },
+    name: 'CollapseHeader',
     inheritAttrs: false,
-    props,
+    props: collapseHeaderProps,
     emits: ['expand'],
+    setup(props, { slots, attrs, emit }) {
+      const { prefixCls } = useDesign('collapse-container');
+      const _prefixCls = computed(() => props.prefixCls || unref(prefixCls));
+      return () => (
+        <div class={[`${unref(_prefixCls)}__header px-2 py-5`, attrs.class]}>
+          <BasicTitle helpMessage={props.helpMessage} normal>
+            {slots.title?.() || props.title}
+          </BasicTitle>
+
+          <div class={`${unref(_prefixCls)}__action`}>
+            {props.canExpan && <BasicArrow up expand={props.show} onClick={() => emit('expand')} />}
+          </div>
+        </div>
+      );
+    },
   });
 </script>