From 70ee1c840333c8b1d06b5bc059bc482d4832e082 Mon Sep 17 00:00:00 2001
From: luocong2016 <luocong2016@126.com>
Date: Wed, 22 Feb 2023 18:31:27 +0800
Subject: [PATCH] =?UTF-8?q?refactor=EF=BC=9A=20=E6=8F=92=E6=A7=BD=E4=BC=98?=
 =?UTF-8?q?=E5=85=88=E5=B1=9E=E6=80=A7=E8=B0=83=E6=95=B4=EF=BC=8CprefixCls?=
 =?UTF-8?q?=E4=BC=98=E5=85=88=E5=85=B3=E7=B3=BB=E8=B0=83=E6=95=B4=20(#2570?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Container/src/collapse/CollapseHeader.vue | 52 ++++++++++---------
 1 file changed, 27 insertions(+), 25 deletions(-)

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>