docs(drawer): refactor custom content demo

src/drawer/demos/enUS/slot.demo.md

@@ -1,4 +1,4 @@
-# Custom header and bottom information
+# Custom Header and Bottom Content
 
 ```html
 <n-button-group>
@@ -6,17 +6,10 @@
 </n-button-group>
 <n-drawer v-model:show="active" :width="502">
   <n-drawer-content>
-    <template #header>
-      <n-tabs v-model:value="tabsActive" @update:value="updateValue">
-        <n-tab-pane name="messages" tab="Messages" />
-        <n-tab-pane name="notifications" tab="Notifications" />
-      </n-tabs>
-    </template>
+    <template #header>Header</template>
     <template #footer>
-      <n-button>Mark all as read</n-button>
+      <n-button>Footer</n-button>
     </template>
-    <p v-if="tabsActive === 'messages'">Message content</p>
-    <p v-else>Notification content</p>
   </n-drawer-content>
 </n-drawer>
 ```
@@ -27,21 +20,12 @@ import { defineComponent, ref } from 'vue'
 export default defineComponent({
   setup () {
     const active = ref(false)
-    const tabsActive = ref('messages')
-
     const activate = () => {
       active.value = true
     }
-
-    const updateValue = (e) => {
-      console.log(e)
-    }
-
     return {
       active,
-      tabsActive,
-      activate,
-      updateValue
+      activate
     }
   }
 })

src/drawer/demos/zhCN/slot.demo.md

@@ -1,4 +1,4 @@
-# 自定义头部和底部信息
+# 自定义头部和底部内容
 
 ```html
 <n-button-group>
@@ -6,17 +6,10 @@
 </n-button-group>
 <n-drawer v-model:show="active" :width="502">
   <n-drawer-content>
-    <template #header>
-      <n-tabs v-model:value="tabsActive" @update:value="updateValue">
-        <n-tab-pane name="messages" tab="消息" />
-        <n-tab-pane name="notifications" tab="通知" />
-      </n-tabs>
-    </template>
+    <template #header>Header</template>
     <template #footer>
-      <n-button>全部标记为已读</n-button>
+      <n-button>Footer</n-button>
     </template>
-    <p v-if="tabsActive === 'messages'">消息内容</p>
-    <p v-else>通知内容</p>
   </n-drawer-content>
 </n-drawer>
 ```
@@ -27,21 +20,12 @@ import { defineComponent, ref } from 'vue'
 export default defineComponent({
   setup () {
     const active = ref(false)
-    const tabsActive = ref('messages')
-
     const activate = () => {
       active.value = true
     }
-
-    const updateValue = (e) => {
-      console.log(e)
-    }
-
     return {
       active,
-      tabsActive,
-      activate,
-      updateValue
+      activate
     }
   }
 })

src/drawer/styles/light.ts

@@ -23,7 +23,7 @@ export const self = (vars: ThemeCommonVars) => {
     color: modalColor,
     textColor: textColor2,
     titleTextColor: textColor1,
-    titleFontSize: '20px',
+    titleFontSize: '18px',
     titleFontWeight: fontWeightStrong,
     boxShadow: boxShadow3,
     lineHeight,