refactor: ♻️ StatusTip 底部插槽移除默认样式并优化示例

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
 
 | 参数       | 说明                                               | 类型                          | 可选值                                                          | 默认值                                                        | 最低版本         |
@@ -86,3 +112,4 @@
 | name    | 说明                     | 最低版本 |
 | ------- | ------------------------ | -------- |
 | image   | 图片内容                  | 1.3.12 |
+| bottom  | 底部内容                  | $LOWEST_VERSION$ |

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 |
@@ -86,3 +111,4 @@ Use the `image` slot to customize image content.
 | Name | Description | Version |
 |------|-------------|----------|
 | image | Image content | 1.3.12 |
+| bottom | Bottom content | $LOWEST_VERSION$ |

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>

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%;
-  }
 }

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>