docs(alert): add a button to redisplay alert component when it is closed in usage demo (#5646)

* docs(alert): add '显示 Alert' button to alert usage demo when closable is enabled

Enhance the alert usage demo by adding a "显示 Alert" button that only appears when the alert is
closed.

This improves the UX by allowing users to bring back the alert without refreshing the page.

The change only affects the usage demo and does not modify the core component logic.

* chore: stash changelog [ci skip]

---------

Co-authored-by: baozhangjie <[email protected]>
Co-authored-by: tdesign-bot <[email protected]>

Author: 3 people

packages/components/alert/_usage/index.vue

@@ -1,7 +1,13 @@
 <!-- 该脚本为自动生成，如有需要请在 /script/generate-usage/index.js 中调整 -->
 <template>
   <base-usage :code="usageCode" :config-list="configList" :panel-list="panelList" @panel-change="onPanelChange">
-    <template #alert="{ configProps }"><t-alert message="这是一条信息" v-bind="configProps" /></template>
+    <template #alert="{ configProps }">
+      <t-alert v-if="visible" message="这是一条信息" v-bind="configProps" @close="visible = false" />
+
+      <t-button v-if="!visible" size="small" theme="default" variant="outline" @click="showAlert">
+        显示 Alert
+      </t-button>
+    </template>
   </base-usage>
 </template>
 
@@ -19,4 +25,9 @@ const usageCode = ref(`<template>${usageCodeMap[panelList[0].value].trim()}</tem
 function onPanelChange(panel) {
   usageCode.value = `<template>${usageCodeMap[panel].trim()}</template>`;
 }
+
+const visible = ref(true);
+function showAlert() {
+  visible.value = true;
+}
 </script>

packages/tdesign-vue-next/.changelog/pr-5646.md

@@ -0,0 +1,6 @@
+---
+pr_number: 5646
+contributor: baozjj
+---
+
+- docs(alert): 优化 Alert 演示交互，在关闭后显示“显示 Alert”按钮以恢复显示 @baozjj ([#5646](https://github.com/Tencent/tdesign-vue-next/pull/5646))