refactor: ♻️ 替换 statusTip 演示页面的 url-prefix

✅ Closes: #1070

docs/.vitepress/theme/components/Banner.vue

@@ -100,6 +100,19 @@ watch(currentBanner, (newBanner) => {
 html.banner-show {
   --vp-layout-top-height: 64px;
 }
+
+/* 移动端优化高度 */
+@media (max-width: 768px) {
+  html.banner-show {
+    --vp-layout-top-height: 56px;
+  }
+}
+
+@media (max-width: 480px) {
+  html.banner-show {
+    --vp-layout-top-height: 48px;
+  }
+}
 </style>
 
 <style scoped>
@@ -111,7 +124,7 @@ html.banner-show {
   left: 0;
   right: 0;
   height: var(--vp-layout-top-height, 64px);
-  line-height: var(--vp-layout-top-height, 64px);
+  padding: 0 48px 0 12px;
   text-align: center;
   font-size: 18px;
   font-weight: 600;
@@ -155,55 +168,51 @@ html.banner-show .banner {
   opacity: 0.3;
 }
 
-@media (min-width: 768px) {
-  .glow.glow--blue {
-    top: -15%;
-    right: -40%;
-    width: 80%;
-  }
-
-  .glow.glow--purple {
-    bottom: -15%;
-    left: -40%;
-    width: 80%;
-  }
-}
-
-@media (min-width: 1025px) {
-  .glow.glow--blue {
-    top: -15%;
-    right: -40%;
-    width: 80%;
-  }
-
-  .glow.glow--purple {
-    bottom: -15%;
-    left: -40%;
-    width: 80%;
-  }
-}
-
-
-
 button {
   position: absolute;
-  right: 0;
+  right: 8px;
   top: 50%;
   transform: translateY(-50%);
-  padding: 5px 5px;
+  padding: 4px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.2s ease;
+}
+
+button:hover {
+  opacity: 0.8;
+}
+
+button:active {
+  opacity: 0.6;
 }
 
 .close {
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   fill: #fff;
   transform: rotate(45deg);
+  transition: transform 0.2s ease;
+}
+
+button:hover .close {
+  transform: rotate(45deg) scale(1.1);
 }
 
 .vt-banner-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 8px;
   color: #fff;
-  font-size: 20px;
-  margin-left: 0.75rem;
+  font-size: 18px;
+  line-height: 1.4;
+  padding: 8px 0;
 }
 
 .vt-banner-title {
@@ -217,55 +226,160 @@ button {
   font-size: 18px;
   font-style: normal;
   font-weight: 700;
-  line-height: normal;
+  line-height: 1.4;
+  white-space: nowrap;
 }
 
 .vt-primary-action {
+  display: inline-block;
   background:
     radial-gradient(140.35% 140.35% at 175% 94.74%, #2bfdd2, #bd34fe00),
     radial-gradient(89.94% 89.94% at 18.42% 15.79%, #4d80f0, #41d1ff00);
   color: #fff;
-  padding: 4px 8px;
-  border-radius: 5px;
-  font-size: 18px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 600;
   text-decoration: none;
-  margin: 0 0.75rem;
   transition: all 0.2s ease-in-out;
+  white-space: nowrap;
 }
 
-@media (max-width: 1280px) {
-  .banner .vt-banner-text,
-  .banner .vt-primary-action {
-    font-size: 10px;
+.vt-primary-action:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(77, 128, 240, 0.4);
+}
+
+.vt-primary-action:active {
+  transform: translateY(0);
+}
+
+/* 桌面端优化 */
+@media (min-width: 769px) {
+  .banner {
+    padding: 0 60px 0 20px;
   }
 
-  .vt-tagline {
-    display: none;
+  .glow.glow--blue {
+    top: -15%;
+    right: -40%;
+    width: 80%;
+  }
+
+  .glow.glow--purple {
+    bottom: -15%;
+    left: -40%;
+    width: 80%;
+  }
+
+  .vt-banner-text {
+    gap: 12px;
   }
 }
 
-@media (max-width: 780px) {
-  .vt-tagline {
-    display: none;
+/* 平板端优化 */
+@media (max-width: 768px) {
+  .banner {
+    padding: 0 40px 0 10px;
   }
 
-  .vt-coupon {
-    display: none;
+  button {
+    right: 6px;
+  }
+
+  .close {
+    width: 24px;
+    height: 24px;
+  }
+
+  .vt-banner-text {
+    font-size: 16px;
+    gap: 6px;
+  }
+
+  .vt-banner-title {
+    font-size: 16px;
   }
 
   .vt-primary-action {
-    margin: 0 10px;
-    padding: 4px 8px;
-  }
-
-  .vt-time-now {
-    display: none;
+    font-size: 14px;
+    padding: 5px 10px;
   }
 }
 
-@media (max-width: 560px) {
-  .vt-place {
-    display: none;
+/* 手机端优化 */
+@media (max-width: 640px) {
+  .banner {
+    padding: 0 36px 0 8px;
+  }
+
+  .vt-banner-text {
+    font-size: 14px;
+    gap: 6px;
+  }
+
+  .vt-banner-title {
+    font-size: 14px;
+  }
+
+  .vt-primary-action {
+    font-size: 13px;
+    padding: 4px 8px;
+  }
+}
+
+/* 小屏手机优化 */
+@media (max-width: 480px) {
+  .banner {
+    padding: 0 32px 0 6px;
+  }
+
+  button {
+    right: 4px;
+    padding: 2px;
+  }
+
+  .close {
+    width: 20px;
+    height: 20px;
+  }
+
+  .vt-banner-text {
+    font-size: 12px;
+    gap: 4px;
+    flex-direction: column;
+    line-height: 1.3;
+  }
+
+  .vt-banner-title {
+    font-size: 12px;
+  }
+
+  .vt-primary-action {
+    font-size: 12px;
+    padding: 3px 8px;
+    border-radius: 4px;
+  }
+}
+
+/* 超小屏优化 */
+@media (max-width: 375px) {
+  .banner {
+    padding: 0 28px 0 4px;
+  }
+
+  .vt-banner-text {
+    font-size: 11px;
+    gap: 3px;
+  }
+
+  .vt-banner-title {
+    font-size: 11px;
+  }
+
+  .vt-primary-action {
+    font-size: 11px;
+    padding: 2px 6px;
   }
 }
 </style>

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

src/locale/en-US.json

@@ -1114,6 +1114,7 @@
   "sortbutton-title": "SortButton",
   "sou-suo": "search for",
   "sou-suo-wu-jie-guo": "No results found in the search",
+  "di-bu-cha-cao": "Bottom slot",
   "sou-suo-zhan-wei-fu-ju-zuo": "Search placeholder on the left",
   "statustip-que-sheng-ti-shi": "StatusTip",
   "statustip-title": "StatusTip",
@@ -1640,4 +1641,4 @@
   "zuo-xia": "lower left",
   "zuo-you-hua-dong": "Slide left and right",
   "zuo-zhong": "Middle Left"
-}
+}

src/locale/zh-CN.json

@@ -1114,6 +1114,7 @@
   "sortbutton-title": "SortButton 排序按钮",
   "sou-suo": "搜索",
   "sou-suo-wu-jie-guo": "搜索无结果",
+  "di-bu-cha-cao": "底部插槽",
   "sou-suo-zhan-wei-fu-ju-zuo": "搜索占位符居左",
   "statustip-que-sheng-ti-shi": "StatusTip 缺省提示",
   "statustip-title": "StatusTip 缺省提示",
@@ -1640,4 +1641,4 @@
   "zuo-xia": "左下",
   "zuo-you-hua-dong": "左右滑动",
   "zuo-zhong": "左中"
-}
+}

src/subPages/statusTip/Index.vue

@@ -1,35 +1,36 @@
 <template>
   <page-wraper>
     <demo-block :title="$t('sou-suo-wu-jie-guo')">
-      <wd-status-tip image="search" tip="当前搜索无结果" />
+      <wd-status-tip :url-prefix="urlPrefix" image="search" tip="当前搜索无结果" />
     </demo-block>
 
     <demo-block :title="$t('404-ye-mian')">
-      <wd-status-tip image="network" tip="当前网络不可用，请检查你的网络设置" />
+      <wd-status-tip :url-prefix="urlPrefix" image="network" tip="当前网络不可用，请检查你的网络设置" />
     </demo-block>
 
     <demo-block :title="$t('ye-mian-zan-wu-nei-rong')">
-      <wd-status-tip image="content" tip="暂无内容" />
+      <wd-status-tip :url-prefix="urlPrefix" image="content" tip="暂无内容" />
     </demo-block>
 
     <demo-block :title="$t('wo-de-shou-cang-wei-kong')">
-      <wd-status-tip image="collect" tip="暂无收藏" />
+      <wd-status-tip :url-prefix="urlPrefix" image="collect" tip="暂无收藏" />
     </demo-block>
 
     <demo-block :title="$t('wo-de-ping-lun-wei-kong')">
-      <wd-status-tip image="comment" tip="暂无评论" />
+      <wd-status-tip :url-prefix="urlPrefix" image="comment" tip="暂无评论" />
     </demo-block>
 
     <demo-block :title="$t('zhi-fu-shi-bai')">
-      <wd-status-tip image="halo" tip="支付失败，请重新订购" />
+      <wd-status-tip :url-prefix="urlPrefix" image="halo" tip="支付失败，请重新订购" />
     </demo-block>
 
     <demo-block :title="$t('yi-ding-yue-quan-bu-xiao-xi')">
-      <wd-status-tip image="message" tip="已订阅全部消息" />
+      <wd-status-tip :url-prefix="urlPrefix" image="message" tip="已订阅全部消息" />
     </demo-block>
 
     <demo-block :title="$t('zi-ding-yi-da-xiao')">
       <wd-status-tip
+        :url-prefix="urlPrefix"
         :image-size="{
           height: 200,
           width: 300
@@ -50,7 +51,27 @@
         </template>
       </wd-status-tip>
     </demo-block>
+
+    <!-- 底部插槽示例移动到最后一个示例，并添加合理样式 -->
+    <demo-block :title="$t('di-bu-cha-cao')">
+      <wd-status-tip image="content" :url-prefix="urlPrefix" 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>
+<script lang="ts" setup>
+const urlPrefix = 'https://wot-ui.cn/assets/'
+</script>
+<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-button/index.scss

@@ -47,7 +47,6 @@
   display: inline-block;
   outline: none;
   -webkit-appearance: none;
-  outline: none;
   background: transparent;
   box-sizing: border-box;
   border: none;

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,6 +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>
+    <slot name="bottom" />
   </view>
 </template>