style(toast): 调整toast组件样式间距并添加左边距变量(破坏性更新) (#1329)

* style(toast): 调整toast组件样式间距并添加左边距变量

移除图标右边距，为消息内容添加左边距变量以保持样式一致性

* feat(toast): 添加垂直方向时的消息样式

当direction为vertical时，移除消息的左外边距并添加垂直布局样式

* style(wd-toast): 移除垂直布局下多余的右边距

垂直布局时图标不需要右边距，保持样式简洁

* style(toast): 优化成仅在图标显示的时候显示文字左边距

* refactor(样式变量): 移除未使用的toast图标右边距变量

src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss

@@ -651,7 +651,7 @@ $-toast-fs: var(--wot-toast-fs, $-fs-content) !default; // 字号
 $-toast-line-height: var(--wot-toast-line-height, 20px) !default; // 行高
 $-toast-with-icon-min-width: var(--wot-toast-with-icon-min-width, 150px) !default; // 有图标的情况下最小宽度
 $-toast-icon-size: var(--wot-toast-icon-size, 32px) !default; // 图标大小
-$-toast-icon-margin-right: var(--wot-toast-icon-margin-right, 12px) !default; // 图标右边距
+$-toast-msg-margin-left: var(--wot-toast-msg-margin-left, 12px) !default; // 消息内容左边距
 $-toast-icon-margin-bottom: var(--wot-toast-icon-margin-bottom, 12px) !default; // 图标下边距
 $-toast-loading-padding: var(--wot-toast-loading-padding, 10px) !default; // loading状态下的padding
 $-toast-loading-margin-bottom: var(--wot-toast-loading-margin-bottom, 16px) !default; // loading动画的margin-bottom

src/uni_modules/wot-design-uni/components/wd-toast/index.scss

@@ -24,13 +24,11 @@
     text-align: left;
     font-family: "San Francisco", Rotobo, arial, "PingFang SC", "Noto SansCJK", "Microsoft Yahei", sans-serif;
   }
+  
   @include edeep(icon) {
     display: inline-block;
-    margin-right: $-toast-icon-margin-right;
     font-size: $-toast-icon-size;
-
     @include when(vertical) {
-      margin-right: 0;
       margin-bottom: $-toast-icon-margin-bottom;
     }
   }
@@ -67,6 +65,12 @@
     min-width: $-toast-with-icon-min-width;
     display: inline-flex;
     align-items: center;
+    @include me(msg) {
+      margin-left: $-toast-msg-margin-left;
+      @include when(vertical) {
+        margin-left: 0;
+      }
+    }
   }
   @include m(loading) {
     min-width: auto;

src/uni_modules/wot-design-uni/components/wd-toast/wd-toast.vue

@@ -26,7 +26,7 @@
         :name="iconClass"
       ></wd-icon>
       <!--文本-->
-      <view v-if="msg" class="wd-toast__msg">{{ msg }}</view>
+      <view v-if="msg" :class="`wd-toast__msg ${direction === 'vertical' ? 'is-vertical' : ''}`">{{ msg }}</view>
     </view>
   </wd-transition>
 </template>

src/uni_modules/wot-design-uni/components/wd-video-preview/wd-video-preview.vue

@@ -3,13 +3,13 @@
     <view class="wd-video-preview__video" @click.stop="">
       <video
         class="wd-video-preview__video"
-        v-if="previdewVideo.url"
+        v-if="previewVideo.url"
         :controls="true"
-        :poster="previdewVideo.poster"
-        :title="previdewVideo.title"
+        :poster="previewVideo.poster"
+        :title="previewVideo.title"
         play-btn-position="center"
         :enableNative="true"
-        :src="previdewVideo.url"
+        :src="previewVideo.url"
         :enable-progress-gesture="false"
       ></video>
     </view>
@@ -36,13 +36,13 @@ import { useLockScroll } from '../composables/useLockScroll'
 defineProps(videoPreviewProps)
 
 const showPopup = ref<boolean>(false)
-const previdewVideo = reactive<PreviewVideo>({ url: '', poster: '', title: '' })
+const previewVideo = reactive<PreviewVideo>({ url: '', poster: '', title: '' })
 
 function open(video: PreviewVideo) {
   showPopup.value = true
-  previdewVideo.url = video.url
-  previdewVideo.poster = video.poster
-  previdewVideo.title = video.title
+  previewVideo.url = video.url
+  previewVideo.poster = video.poster
+  previewVideo.title = video.title
 }
 
 function close() {
@@ -53,9 +53,9 @@ function close() {
 }
 
 function handleClosed() {
-  previdewVideo.url = ''
-  previdewVideo.poster = ''
-  previdewVideo.title = ''
+  previewVideo.url = ''
+  previewVideo.poster = ''
+  previewVideo.title = ''
 }
 
 // #ifdef H5