From 5b3e07c46ce54bbe82184b5c0928217a93b4f184 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=A6=82=E6=91=B8=E9=B1=BC=E5=8E=BB?=
 <1780903673@qq.com>
Date: Sat, 8 Nov 2025 16:00:07 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E2=99=BB=EF=B8=8F=20=20StatusTip?=
 =?UTF-8?q?=20=E5=BA=95=E9=83=A8=E6=8F=92=E6=A7=BD=E7=A7=BB=E9=99=A4?=
 =?UTF-8?q?=E9=BB=98=E8=AE=A4=E6=A0=B7=E5=BC=8F=E5=B9=B6=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/component/status-tip.md                  | 29 ++++++++++++++++++-
 docs/en-US/component/status-tip.md            | 28 +++++++++++++++++-
 src/subPages/statusTip/Index.vue              | 28 ++++++++++++------
 .../components/wd-status-tip/index.scss       |  6 ----
 .../wd-status-tip/wd-status-tip.vue           | 10 +++----
 5 files changed, 78 insertions(+), 23 deletions(-)

diff --git a/docs/component/status-tip.md b/docs/component/status-tip.md
index 80f562b4..8585d89f 100644
--- a/docs/component/status-tip.md
+++ b/docs/component/status-tip.md
@@ -64,6 +64,32 @@
 </wd-status-tip>
 ```
 
+## 自定义底部内容
+
+使用插槽 `bottom` 可以在提示底部渲染自定义内容（如操作按钮）。推荐在插槽中包一层容器，便于控制布局与与上方内容的间距。
+
+```html
+<wd-status-tip image="content" tip="当前搜索无结果">
+  <template #bottom>
+    <view class="bottom-actions">
+      <wd-button type="info">重新加载</wd-button>
+    </view>
+  </template>
+</wd-status-tip>
+```
+
+建议样式（可在页面或全局样式中添加）：
+
+```css
+.bottom-actions {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+```
+
+
 ## Attributes
 
 | 参数       | 说明                                               | 类型                          | 可选值                                                          | 默认值                                                        | 最低版本         |
@@ -85,4 +111,5 @@
 
 | name    | 说明                     | 最低版本 |
 | ------- | ------------------------ | -------- |
-| image   | 图片内容                  | 1.3.12 |
\ No newline at end of file
+| image   | 图片内容                  | 1.3.12 |
+| bottom  | 底部内容                  | $LOWEST_VERSION$ |
\ No newline at end of file
diff --git a/docs/en-US/component/status-tip.md b/docs/en-US/component/status-tip.md
index ba0c9824..4e7622f0 100644
--- a/docs/en-US/component/status-tip.md
+++ b/docs/en-US/component/status-tip.md
@@ -64,6 +64,31 @@ Use the `image` slot to customize image content.
 </wd-status-tip>
 ```
 
+## Custom Bottom Content
+
+Use the `bottom` slot to render custom content at the bottom (e.g., action buttons). It’s recommended to wrap slot content with a container for layout and spacing control.
+
+```html
+<wd-status-tip image="content" tip="No search results">
+  <template #bottom>
+    <view class="bottom-actions">
+      <wd-button type="info">Reload</wd-button>
+    </view>
+  </template>
+</wd-status-tip>
+```
+
+Suggested styles (add to page or global styles):
+
+```css
+.bottom-actions {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+```
+
 ## Attributes
 
 | Parameter | Description | Type | Options | Default | Version |
@@ -85,4 +110,5 @@ Use the `image` slot to customize image content.
 
 | Name | Description | Version |
 |------|-------------|----------|
-| image | Image content | 1.3.12 |
\ No newline at end of file
+| image | Image content | 1.3.12 |
+| bottom | Bottom content | $LOWEST_VERSION$ |
\ No newline at end of file
diff --git a/src/subPages/statusTip/Index.vue b/src/subPages/statusTip/Index.vue
index 334f4bf9..cfb2f2d7 100644
--- a/src/subPages/statusTip/Index.vue
+++ b/src/subPages/statusTip/Index.vue
@@ -1,13 +1,5 @@
 <template>
   <page-wraper>
-    <demo-block :title="$t('di-bu-cha-cao')">
-      <wd-status-tip image="content" tip="当前搜索无结果">
-        <template #bottom>
-          <wd-button type="info">重新加载</wd-button>
-        </template>
-      </wd-status-tip>
-    </demo-block>
-
     <demo-block :title="$t('sou-suo-wu-jie-guo')">
       <wd-status-tip image="search" tip="当前搜索无结果" />
     </demo-block>
@@ -58,7 +50,25 @@
         </template>
       </wd-status-tip>
     </demo-block>
+
+    <!-- 底部插槽示例移动到最后一个示例，并添加合理样式 -->
+    <demo-block :title="$t('di-bu-cha-cao')">
+      <wd-status-tip image="content" tip="当前搜索无结果">
+        <template #bottom>
+          <view class="bottom-actions">
+            <wd-button type="info">重新加载</wd-button>
+          </view>
+        </template>
+      </wd-status-tip>
+    </demo-block>
   </page-wraper>
 </template>
 <script lang="ts" setup></script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.bottom-actions {
+  margin-top: var(--wot-statustip-bottom-margin-top, 20px);
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-status-tip/index.scss b/src/uni_modules/wot-design-uni/components/wd-status-tip/index.scss
index 3ed16cc5..9ba494a3 100644
--- a/src/uni_modules/wot-design-uni/components/wd-status-tip/index.scss
+++ b/src/uni_modules/wot-design-uni/components/wd-status-tip/index.scss
@@ -34,10 +34,4 @@
     text-align: center;
     overflow-wrap: break-word;
   }
-  @include e(bottom) {
-    margin-top: 20px;
-    display: flex;
-    justify-content: center;
-    width: 100%;
-  }
 }
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue b/src/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue
index 1e05555d..58bb19ee 100644
--- a/src/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue
@@ -1,10 +1,10 @@
 <!--
  * @Author: weisheng
  * @Date: 2023-06-12 10:04:19
- * @LastEditTime: 2024-09-20 10:23:38
- * @LastEditors: jiaoxueyan
+ * @LastEditTime: 2025-11-08 15:19:55
+ * @LastEditors: weisheng
  * @Description: 
- * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-status-tip\wd-status-tip.vue
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue
  * 记得注释
 -->
 <template>
@@ -12,9 +12,7 @@
     <slot name="image" v-if="$slots.image"></slot>
     <wd-img v-else-if="imgUrl" :mode="imageMode" :src="imgUrl" custom-class="wd-status-tip__image" :custom-style="imgStyle"></wd-img>
     <view v-if="tip" class="wd-status-tip__text">{{ tip }}</view>
-    <view v-if="$slots.bottom" class="wd-status-tip__bottom">
-      <slot name="bottom" />
-    </view>
+    <slot name="bottom" />
   </view>
 </template>