@wot-ui/ui 2.0.0-alpha.7 → 2.0.0-alpha.9

package/components/wd-icon/wd-icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <view @click="handleClick" :class="rootClass" :style="rootStyle">
+  <view :class="rootClass" :style="rootStyle" @click="handleClick">
     <image v-if="isImage" class="wd-icon__image" :src="name"></image>
   </view>
 </template>
@@ -19,7 +19,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, type CSSProperties } from 'vue'
+import { computed, normalizeClass, type CSSProperties } from 'vue'
 import { addUnit, isDef, objToStyle } from '../../common/util'
 import { iconProps } from './types'
 
@@ -31,12 +31,26 @@ const isImage = computed(() => {
 })
 
 const rootClass = computed(() => {
+  const clazz: Record<string, boolean> = {
+    'wd-icon': true
+  }
+
   if (props.cssIcon) {
-    // CSS 图标模式：name 直接作为 class，不使用 iconfont
-    return `wd-icon wd-icon--css ${props.name} ${props.customClass}`
+    clazz['wd-icon--css'] = true
+
+    if (typeof props.cssIcon === 'string') {
+      clazz[props.cssIcon] = true
+    } else {
+      clazz[props.name] = true
+    }
+  } else if (isImage.value) {
+    clazz['wd-icon--image'] = true
+  } else {
+    clazz[props.classPrefix] = true
+    clazz[`${props.classPrefix}-${props.name}`] = true
   }
-  const prefix = props.classPrefix
-  return `wd-icon ${prefix} ${props.customClass} ${isImage.value ? 'wd-icon--image' : prefix + '-' + props.name}`
+
+  return normalizeClass([clazz, props.customClass])
 })
 
 const rootStyle = computed(() => {

package/components/wd-image-preview/index.scss

@@ -12,7 +12,7 @@ $image-preview-index-font-size: var(--wot-image-preview-index-font-size, $typogr
 // 页码文字字重
 $image-preview-index-font-weight: var(--wot-image-preview-index-font-weight, $typography-title-font-weight-main) !default;
 // 页码文字行高
-$image-preview-index-line-height: var(--wot-image-preview-index-line-height, $typography-title-line--height-size-main) !default;
+$image-preview-index-line-height: var(--wot-image-preview-index-line-height, $typography-title-line-height-size-main) !default;
 // 关闭图标尺寸
 $image-preview-close-size: var(--wot-image-preview-close-size, $n-24) !default;
 // 关闭图标颜色

package/components/wd-img/index.scss

@@ -2,7 +2,7 @@
 @use '../../styles/variable.scss' as *;
 
 // 圆形模式圆角
-$img-border-radius: var(--wot-img-border-radius, $radius-radius-full) !default;
+$img-border-radius: var(--wot-img-border-radius, $radius-full) !default;
 // 加载态文字颜色
 $img-loading-color: var(--wot-img-loading-color, $text-placeholder) !default;
 // 加载态背景色

package/components/wd-index-bar/index.scss

@@ -3,11 +3,11 @@
 
 $index-bar-sidebar-right: var(--wot-index-bar-sidebar-right, $spacing-super-tight) !default;
 $index-bar-index-font-size: var(--wot-index-bar-index-font-size, $typography-label-size-main) !default;
-$index-bar-index-width: var(--wot-index-bar-index-width, $typography-label-line--height-size-main) !default;
-$index-bar-index-height: var(--wot-index-bar-index-height, $typography-label-line--height-size-main) !default;
+$index-bar-index-width: var(--wot-index-bar-index-width, $typography-label-line-height-size-main) !default;
+$index-bar-index-height: var(--wot-index-bar-index-height, $typography-label-line-height-size-main) !default;
 $index-bar-index-font-weight: var(--wot-index-bar-index-font-weight, $font-weight-medium) !default;
 $index-bar-index-color: var(--wot-index-bar-index-color, $text-auxiliary) !default;
-$index-bar-index-border-radius: var(--wot-index-bar-index-border-radius, $radius-radius-full) !default;
+$index-bar-index-border-radius: var(--wot-index-bar-index-border-radius, $radius-full) !default;
 $index-bar-index-color-active: var(--wot-index-bar-index-color-active, $text-white) !default;
 $index-bar-index-bg-active: var(--wot-index-bar-index-bg-active, $primary-6) !default;
 $index-bar-current-index-size: var(--wot-index-bar-current-index-size, $n-56) !default;

package/components/wd-input/index.scss

@@ -27,7 +27,7 @@ $input-count-color: var(--wot-input-count-color, $text-auxiliary);
 // 输入框字数统计字号
 $input-count-font-size: var(--wot-input-count-font-size, $typography-body-size-main);
 // 输入框字数统计行高
-$input-count-line-height: var(--wot-input-count-line-height, $typography-body-line--height-size-main);
+$input-count-line-height: var(--wot-input-count-line-height, $typography-body-line-height-size-main);
 // 输入框错误颜色
 $input-error-color: var(--wot-input-error-color, $danger-main);
 

package/components/wd-input-number/index.scss

@@ -10,7 +10,7 @@ $input-number-action-color: var(--wot-input-number-action-color, $icon-secondary
 // 操作按钮圆角
 $input-number-action-border-radius: var(--wot-input-number-action-border-radius, $radius-main) !default;
 // 圆角模式操作按钮圆角
-$input-number-action-border-radius-full: var(--wot-input-number-action-border-radius-full, $radius-radius-full) !default;
+$input-number-action-border-radius-full: var(--wot-input-number-action-border-radius-full, $radius-full) !default;
 // 操作按钮禁用颜色
 $input-number-action-disabled-color: var(--wot-input-number-action-disabled-color, $icon-disabled) !default;
 // 操作按钮分割线宽度

package/components/wd-keyboard/key/index.scss

@@ -8,11 +8,11 @@ $keyboard-key-padding: var(--wot-keyboard-key-padding, $padding-tight) !default;
 // 按键字号
 $keyboard-key-font-size: var(--wot-keyboard-key-font-size, $typography-title-size-extra-large) !default;
 // 按键行高
-$keyboard-key-line-height: var(--wot-keyboard-key-line-height, $typography-title-line--height-size-extra-large) !default;
+$keyboard-key-line-height: var(--wot-keyboard-key-line-height, $typography-title-line-height-size-extra-large) !default;
 // 车牌按键字号
 $keyboard-key-car-font-size: var(--wot-keyboard-key-car-font-size, $typography-title-size-main) !default;
 // 车牌按键行高
-$keyboard-key-car-line-height: var(--wot-keyboard-key-car-line-height, $typography-title-line--height-size-main) !default;
+$keyboard-key-car-line-height: var(--wot-keyboard-key-car-line-height, $typography-title-line-height-size-main) !default;
 // 按键字重
 $keyboard-key-font-weight: var(--wot-keyboard-key-font-weight, $font-weight-medium) !default;
 // 按键背景色
@@ -24,7 +24,7 @@ $keyboard-key-bg-active: var(--wot-keyboard-key-bg-active, $filled-strong) !defa
 // 删除键字号
 $keyboard-key-delete-font-size: var(--wot-keyboard-key-delete-font-size, $typography-title-size-main) !default;
 // 删除键行高
-$keyboard-key-delete-line-height: var(--wot-keyboard-key-delete-line-height, $typography-title-line--height-size-main) !default;
+$keyboard-key-delete-line-height: var(--wot-keyboard-key-delete-line-height, $typography-title-line-height-size-main) !default;
 // 删除键字重
 $keyboard-key-delete-font-weight: var(--wot-keyboard-key-delete-font-weight, $font-weight-medium) !default;
 // 主按钮文字颜色

package/components/wd-loading/index.scss

@@ -18,7 +18,7 @@ $loading-size-height: var(--wot-loading-size-height, 1em) !default;
 // 圆形加载器描边宽度
 $loading-spinner-circle-stroke-width: var(--wot-loading-spinner-circle-stroke-width, 15%) !default;
 // 圆形加载器圆角
-$loading-spinner-circle-radius: var(--wot-loading-spinner-circle-radius, $radius-radius-full) !default;
+$loading-spinner-circle-radius: var(--wot-loading-spinner-circle-radius, $radius-full) !default;
 // 旋转动画时长
 $loading-spinner-animation-duration: var(--wot-loading-spinner-animation-duration, 0.8s) !default;
 // 条状点宽度
@@ -26,11 +26,11 @@ $loading-spinner-dot-width: var(--wot-loading-spinner-dot-width, 10%) !default;
 // 条状点高度
 $loading-spinner-dot-height: var(--wot-loading-spinner-dot-height, 25%) !default;
 // 条状点圆角
-$loading-spinner-dot-radius: var(--wot-loading-spinner-dot-radius, $radius-radius-full) !default;
+$loading-spinner-dot-radius: var(--wot-loading-spinner-dot-radius, $radius-full) !default;
 // 点状加载器单点尺寸
 $loading-spinner-dots-dot-size: var(--wot-loading-spinner-dots-dot-size, 20%) !default;
 // 点状加载器单点圆角
-$loading-spinner-dots-dot-radius: var(--wot-loading-spinner-dots-dot-radius, $radius-radius-full) !default;
+$loading-spinner-dots-dot-radius: var(--wot-loading-spinner-dots-dot-radius, $radius-full) !default;
 // 波形加载器间距
 $loading-wave-gap: var(--wot-loading-wave-gap, 6.25%) !default;
 // 波形加载器单柱宽度
@@ -38,7 +38,7 @@ $loading-wave-bar-width: var(--wot-loading-wave-bar-width, 12.5%) !default;
 // 波形加载器单柱高度
 $loading-wave-bar-height: var(--wot-loading-wave-bar-height, 83.333333%) !default;
 // 波形加载器单柱圆角
-$loading-wave-bar-radius: var(--wot-loading-wave-bar-radius, $radius-radius-full) !default;
+$loading-wave-bar-radius: var(--wot-loading-wave-bar-radius, $radius-full) !default;
 // 波形加载器动画时长
 $loading-wave-animation-duration: var(--wot-loading-wave-animation-duration, 834ms) !default;
 // 加载器内边距
@@ -48,7 +48,7 @@ $loading-text-spacing: var(--wot-loading-text-spacing, $spacing-extra-tight) !de
 // 文本字号
 $loading-text-font-size: var(--wot-loading-text-font-size, $typography-body-size-main) !default;
 // 文本行高
-$loading-text-line-height: var(--wot-loading-text-line-height, $typography-body-line--height-size-main) !default;
+$loading-text-line-height: var(--wot-loading-text-line-height, $typography-body-line-height-size-main) !default;
 
 
 @mixin generate($n, $i: 1) {

package/components/wd-loadmore/index.scss

@@ -10,7 +10,7 @@ $loadmore-color: var(--wot-loadmore-color, $text-secondary) !default;
 // 默认文字字号
 $loadmore-font-size: var(--wot-loadmore-font-size, $typography-body-size-main) !default;
 // 默认文字行高
-$loadmore-line-height: var(--wot-loadmore-line-height, $typography-body-line--height-size-main) !default;
+$loadmore-line-height: var(--wot-loadmore-line-height, $typography-body-line-height-size-main) !default;
 // 加载图标尺寸
 $loadmore-loading-size: var(--wot-loadmore-loading-size, $n-28) !default;
 // 加载图标与文字间距
@@ -20,7 +20,7 @@ $loadmore-refresh-color: var(--wot-loadmore-refresh-color, $primary-6) !default;
 // 刷新图标字号
 $loadmore-refresh-font-size: var(--wot-loadmore-refresh-font-size, $typography-body-size-extra-large) !default;
 // 刷新图标行高
-$loadmore-refresh-line-height: var(--wot-loadmore-refresh-line-height, $typography-body-line--height-size-extra-large) !default;
+$loadmore-refresh-line-height: var(--wot-loadmore-refresh-line-height, $typography-body-line-height-size-extra-large) !default;
 // 重试文案与图标间距
 $loadmore-retry-spacing: var(--wot-loadmore-retry-spacing, 0 $spacing-extra-tight) !default;
 

package/components/wd-notice-bar/index.scss

@@ -8,7 +8,7 @@ $notice-bar-font-size: var(--wot-notice-bar-font-size, $typography-body-size-mai
 // 公告栏圆角
 $notice-bar-radius: var(--wot-notice-bar-radius, $radius-zero) !default;
 // 公告栏文字行高
-$notice-bar-line-height: var(--wot-notice-bar-line-height, $typography-body-line--height-size-main) !default;
+$notice-bar-line-height: var(--wot-notice-bar-line-height, $typography-body-line-height-size-main) !default;
 // 警告态背景色
 $notice-bar-warning-bg: var(--wot-notice-bar-warning-bg, $warning-surface) !default;
 // 警告态文字颜色

package/components/wd-notify/index.scss

@@ -9,7 +9,7 @@ $notify-padding: var(--wot-notify-padding, $padding-tight $padding-loose) !defau
 // 通知文字字号
 $notify-font-size: var(--wot-notify-font-size, $typography-body-size-large) !default;
 // 通知文字行高
-$notify-line-height: var(--wot-notify-line-height, $typography-body-line--height-size-large) !default;
+$notify-line-height: var(--wot-notify-line-height, $typography-body-line-height-size-large) !default;
 // 主色态背景色
 $notify-primary-bg: var(--wot-notify-primary-bg, $primary-1) !default;
 // 主色态文字颜色

package/components/wd-pagination/index.scss

@@ -12,7 +12,7 @@ $pagination-message-color: var(--wot-pagination-message-color, $text-secondary)
 // 辅助文案字号
 $pagination-message-font-size: var(--wot-pagination-message-font-size, $typography-body-size-main) !default;
 // 辅助文案行高
-$pagination-message-line-height: var(--wot-pagination-message-line-height, $typography-body-line--height-size-main) !default;
+$pagination-message-line-height: var(--wot-pagination-message-line-height, $typography-body-line-height-size-main) !default;
 // 辅助文案顶部间距
 $pagination-message-margin-top: var(--wot-pagination-message-margin-top, $spacing-super-tight) !default;
 // 翻页按钮最小宽度
@@ -20,7 +20,7 @@ $pagination-nav-width: var(--wot-pagination-nav-width, $n-64) !default;
 // 页码字号
 $pagination-size-font-size: var(--wot-pagination-size-font-size, $typography-title-size-main) !default;
 // 页码行高
-$pagination-size-line-height: var(--wot-pagination-size-line-height, $typography-title-line--height-size-main) !default;
+$pagination-size-line-height: var(--wot-pagination-size-line-height, $typography-title-line-height-size-main) !default;
 // 页码颜色
 $pagination-size-color: var(--wot-pagination-size-color, $text-main) !default;
 // 当前页码颜色

package/components/wd-password-input/index.scss

@@ -8,7 +8,7 @@ $password-input-margin: var(--wot-password-input-margin, $n-16) !default;
 // 输入字号
 $password-input-font-size: var(--wot-password-input-font-size, $typography-title-size-large) !default;
 // 输入行高
-$password-input-line-height: var(--wot-password-input-line-height, $typography-title-line--height-size-large) !default;
+$password-input-line-height: var(--wot-password-input-line-height, $typography-title-line-height-size-large) !default;
 // 输入格圆角
 $password-input-radius: var(--wot-password-input-radius, $n-6) !default;
 // 输入格背景色
@@ -28,7 +28,7 @@ $password-input-dot-size: var(--wot-password-input-dot-size, $n-10) !default;
 // 密码点颜色
 $password-input-dot-color: var(--wot-password-input-dot-color, $text-main) !default;
 // 密码点圆角
-$password-input-dot-radius: var(--wot-password-input-dot-radius, $radius-radius-full) !default;
+$password-input-dot-radius: var(--wot-password-input-dot-radius, $radius-full) !default;
 // 输入文本颜色
 $password-input-text-color: var(--wot-password-input-text-color, $text-main) !default;
 // 光标颜色

package/components/wd-picker/index.scss

@@ -20,7 +20,7 @@ $picker-title-font-size: var(--wot-picker-title-font-size, $typography-title-siz
 // 标题文字字重
 $picker-title-font-weight: var(--wot-picker-title-font-weight, $font-weight-medium) !default;
 // 标题文字行高
-$picker-title-line-height: var(--wot-picker-title-line-height, $typography-title-line--height-size-main) !default;
+$picker-title-line-height: var(--wot-picker-title-line-height, $typography-title-line-height-size-main) !default;
 // 弹窗圆角
 $picker-radius: var(--wot-picker-radius, $radius-large) !default;
 

package/components/wd-popover/index.scss

@@ -18,7 +18,7 @@ $popover-arrow-size: var(--wot-popover-arrow-size, $n-8) !default;
 // 浮层字号
 $popover-font-size: var(--wot-popover-font-size, $typography-body-size-main) !default;
 // 浮层行高
-$popover-line-height: var(--wot-popover-line-height, $typography-body-line--height-size-main) !default;
+$popover-line-height: var(--wot-popover-line-height, $typography-body-line-height-size-main) !default;
 // 浮层内边距
 $popover-padding: var(--wot-popover-padding, $padding-loose) !default;
 // 浮层层级

package/components/wd-progress/index.scss

@@ -32,11 +32,11 @@ $progress-inner-padding: var(--wot-progress-inner-padding, $padding-zero $paddin
 // 文案字号
 $progress-label-font-size: var(--wot-progress-label-font-size, $typography-label-size-large) !default;
 // 文案行高
-$progress-label-line-height: var(--wot-progress-label-line-height, $typography-label-line--height-size-large) !default;
+$progress-label-line-height: var(--wot-progress-label-line-height, $typography-label-line-height-size-large) !default;
 // 图标字号
 $progress-icon-size: var(--wot-progress-icon-size, $n-18) !default;
 // 进度条圆角
-$progress-radius: var(--wot-progress-radius, $radius-radius-full) !default;
+$progress-radius: var(--wot-progress-radius, $radius-full) !default;
 
 @include b(progress) {
   width: 100%;

package/components/wd-radio/index.scss

@@ -14,7 +14,7 @@ $radio-label-font-size: var(--wot-radio-label-font-size, $typography-body-size-m
 // 文案颜色
 $radio-label-color: var(--wot-radio-label-color, $text-main) !default;
 // 文案行高
-$radio-label-line-height: var(--wot-radio-label-line-height, $typography-body-line--height-size-main) !default;
+$radio-label-line-height: var(--wot-radio-label-line-height, $typography-body-line-height-size-main) !default;
 // 禁用态透明度
 $radio-disabled: var(--wot-radio-disabled, $opacity-disabled) !default;
 // 水平模式间距
@@ -24,13 +24,13 @@ $radio-button-margin: var(--wot-radio-button-margin, $spacing-zero $spacing-extr
 // 按钮模式边框宽度
 $radio-button-border-width: var(--wot-radio-button-border-width, $n-1) !default;
 // 按钮模式标记圆角
-$radio-button-shape-border-radius: var(--wot-radio-button-shape-border-radius, $radius-radius-full) !default;
+$radio-button-shape-border-radius: var(--wot-radio-button-shape-border-radius, $radius-full) !default;
 // 按钮模式标记尺寸
 $radio-button-shape-size: var(--wot-radio-button-shape-size, $n-26) !default;
 // 按钮模式字号
 $radio-button-font-size: var(--wot-radio-button-font-size, $typography-body-size-main) !default;
 // 按钮模式行高
-$radio-button-line-height: var(--wot-radio-button-line-height, $typography-body-line--height-size-main) !default;
+$radio-button-line-height: var(--wot-radio-button-line-height, $typography-body-line-height-size-main) !default;
 // 按钮模式背景色
 $radio-button-bg: var(--wot-radio-button-bg, $filled-bottom) !default;
 // 按钮模式选中背景色

package/components/wd-search/index.scss

@@ -4,7 +4,7 @@
 // 组件整体内边距
 $search-padding: var(--wot-search-padding, $padding-tight $padding-loose) !default;
 // 输入框圆角
-$search-input-radius: var(--wot-search-input-radius, $radius-radius-full) !default;
+$search-input-radius: var(--wot-search-input-radius, $radius-full) !default;
 // 输入框高度
 $search-input-height: var(--wot-search-input-height, $n-36) !default;
 // 输入框内边距
@@ -38,7 +38,7 @@ $search-input-font-size: var(--wot-search-input-font-size, $typography-body-size
 // 输入框文字颜色
 $search-input-color: var(--wot-search-input-color, $text-main) !default;
 // 输入框文字行高
-$search-input-line-height: var(--wot-search-input-line-height, $typography-body-line--height-size-main) !default;
+$search-input-line-height: var(--wot-search-input-line-height, $typography-body-line-height-size-main) !default;
 // 搜索图标颜色
 $search-icon-color: var(--wot-search-icon-color, $icon-secondary) !default;
 // 搜索图标大小
@@ -54,11 +54,11 @@ $search-placeholder-color: var(--wot-search-placeholder-color, $text-placeholder
 // 占位符字号
 $search-placeholder-font-size: var(--wot-search-placeholder-font-size, $typography-body-size-main) !default;
 // 占位符行高
-$search-placeholder-line-height: var(--wot-search-placeholder-line-height, $typography-body-line--height-size-main) !default;
+$search-placeholder-line-height: var(--wot-search-placeholder-line-height, $typography-body-line-height-size-main) !default;
 // 取消按钮字号
 $search-cancel-font-size: var(--wot-search-cancel-font-size, $typography-body-size-main) !default;
 // 取消按钮行高
-$search-cancel-line-height: var(--wot-search-cancel-line-height, $typography-body-line--height-size-main) !default;
+$search-cancel-line-height: var(--wot-search-cancel-line-height, $typography-body-line-height-size-main) !default;
 // 取消按钮颜色
 $search-cancel-color: var(--wot-search-cancel-color, $primary-6) !default;
 

package/components/wd-segmented/index.scss

@@ -14,7 +14,7 @@ $segmented-item-color: var(--wot-segmented-item-color, $text-secondary) !default
 // 选项文字字号
 $segmented-item-font-size: var(--wot-segmented-item-font-size, $typography-body-size-extra-large) !default;
 // 选项文字行高
-$segmented-item-line-height: var(--wot-segmented-item-line-height, $typography-body-line--height-size-extra-large) !default;
+$segmented-item-line-height: var(--wot-segmented-item-line-height, $typography-body-line-height-size-extra-large) !default;
 // 选项内边距
 $segmented-item-padding: var(--wot-segmented-item-padding, $padding-ultra-tight $padding-loose) !default;
 // 选项文字字重

package/components/wd-sidebar-item/index.scss

@@ -4,7 +4,7 @@
 // 选项字号
 $sidebar-item-font-size: var(--wot-sidebar-item-font-size, $typography-body-size-main) !default;
 // 选项行高
-$sidebar-item-line-height: var(--wot-sidebar-item-line-height, $typography-body-line--height-size-main) !default;
+$sidebar-item-line-height: var(--wot-sidebar-item-line-height, $typography-body-line-height-size-main) !default;
 // 选项文字颜色
 $sidebar-item-color: var(--wot-sidebar-item-color, $text-main) !default;
 // 选项内边距

package/components/wd-skeleton/index.scss

@@ -16,7 +16,7 @@ $skeleton-text-border-radius: var(--wot-skeleton-text-border-radius, $radius-sma
 // 矩形占位圆角
 $skeleton-rect-border-radius: var(--wot-skeleton-rect-border-radius, $radius-main) !default;
 // 圆形占位圆角
-$skeleton-circle-border-radius: var(--wot-skeleton-circle-border-radius, $radius-radius-full) !default;
+$skeleton-circle-border-radius: var(--wot-skeleton-circle-border-radius, $radius-full) !default;
 // 渐变动画高亮色
 $skeleton-animation-gradient: var(--wot-skeleton-animation-gradient, $filled-bottom) !default;
 // 闪烁动画高亮色

package/components/wd-slide-verify/index.scss

@@ -18,7 +18,7 @@ $slide-verify-text-color: var(--wot-slide-verify-text-color, $text-main) !defaul
 // 提示文字字号
 $slide-verify-text-font-size: var(--wot-slide-verify-text-font-size, $typography-label-size-main) !default;
 // 提示文字行高
-$slide-verify-text-line-height: var(--wot-slide-verify-text-line-height, $typography-label-line--height-size-main) !default;
+$slide-verify-text-line-height: var(--wot-slide-verify-text-line-height, $typography-label-line-height-size-main) !default;
 // 成功态文字颜色
 $slide-verify-success-text-color: var(--wot-slide-verify-success-text-color, $text-white) !default;
 // 滑块背景色

package/components/wd-slider/index.scss

@@ -7,7 +7,7 @@
 $slider-bar-height: var(--wot-slider-bar-height, $n-2) !default;
 $slider-bar-height-capsule: var(--wot-slider-bar-height-capsule, $n-24) !default;
 $slider-bar-bg: var(--wot-slider-bar-bg, $filled-strong) !default;
-$slider-bar-radius: var(--wot-slider-bar-radius, $radius-radius-full) !default;
+$slider-bar-radius: var(--wot-slider-bar-radius, $radius-full) !default;
 $slider-bar-height-vertical: var(--wot-slider-bar-height-vertical, $n-248) !default;
 
 /* 进度条 (Range) */
@@ -26,7 +26,7 @@ $slider-dot-popover-color: var(--wot-slider-dot-popover-color, $text-white) !def
 $slider-dot-popover-radius: var(--wot-slider-dot-popover-radius, $radius-main) !default;
 $slider-dot-popover-padding: var(--wot-slider-dot-popover-padding, $padding-extra-tight $padding-loose) !default;
 $slider-dot-popover-font-size: var(--wot-slider-dot-popover-font-size, $typography-body-size-main) !default;
-$slider-dot-popover-line-height: var(--wot-slider-dot-popover-line-height, $typography-body-line--height-size-main) !default;
+$slider-dot-popover-line-height: var(--wot-slider-dot-popover-line-height, $typography-body-line-height-size-main) !default;
 $slider-dot-popover-gap: var(--wot-slider-dot-popover-gap, $n-3) !default;
 $slider-dot-popover-arrow-width: var(--wot-slider-dot-popover-arrow-width, $n-12) !default;
 $slider-dot-popover-arrow-height: var(--wot-slider-dot-popover-arrow-height, $n-6) !default;
@@ -37,14 +37,14 @@ $slider-dot-popover-easing-enter: var(--wot-slider-dot-popover-easing-enter, cub
 
 /* 刻度 (Scale) */
 $slider-scale-size: var(--wot-slider-scale-size, $n-6) !default;
-$slider-scale-border-radius: var(--wot-slider-scale-border-radius, $radius-radius-full) !default;
+$slider-scale-border-radius: var(--wot-slider-scale-border-radius, $radius-full) !default;
 $slider-scale-bg: var(--wot-slider-scale-bg, $filled-strong) !default;
 $slider-scale-bg-active: var(--wot-slider-scale-bg-active, $primary-6) !default;
 $slider-scale-capsule-bg: var(--wot-slider-scale-capsule-bg, $filled-strong) !default;
 $slider-scale-capsule-width: var(--wot-slider-scale-capsule-width, $n-2) !default;
 $slider-scale-capsule-border-radius: var(--wot-slider-scale-capsule-border-radius, $radius-zero) !default;
 $slider-scale-desc-font-size: var(--wot-slider-scale-desc-font-size, $typography-body-size-main) !default;
-$slider-scale-desc-line-height: var(--wot-slider-scale-desc-line-height, $typography-body-line--height-size-main) !default;
+$slider-scale-desc-line-height: var(--wot-slider-scale-desc-line-height, $typography-body-line-height-size-main) !default;
 $slider-scale-desc-color: var(--wot-slider-scale-desc-color, $text-main) !default;
 $slider-scale-desc-spacing: var(--wot-slider-scale-desc-spacing, $spacing-tight) !default;
 $slider-marks-desc-spacing: var(--wot-slider-marks-desc-spacing, calc($slider-dot-size / 2 + $spacing-tight)) !default;

package/components/wd-sort-button/index.scss

@@ -6,7 +6,7 @@ $sort-button-height: var(--wot-sort-button-height, $n-48) !default;
 // 文字字号
 $sort-button-text-font-size: var(--wot-sort-button-text-font-size, $typography-body-size-main) !default;
 // 文字行高
-$sort-button-text-line-height: var(--wot-sort-button-text-line-height, $typography-body-line--height-size-main) !default;
+$sort-button-text-line-height: var(--wot-sort-button-text-line-height, $typography-body-line-height-size-main) !default;
 // 箭头图标尺寸
 $sort-button-arrow-icon-size: var(--wot-sort-button-arrow-icon-size, $n-24) !default;
 // 右侧区域尺寸

package/components/wd-step/index.scss

@@ -17,7 +17,7 @@ $step-vertical-header-dot-top: var(--wot-step-vertical-header-dot-top, $n-6) !de
 // 圆形指示器的宽高尺寸
 $step-indicator-size: var(--wot-step-indicator-size, $n-18) !default;
 // 圆形指示器的圆角大小
-$step-circle-border-radius: var(--wot-step-circle-border-radius, $radius-radius-full) !default;
+$step-circle-border-radius: var(--wot-step-circle-border-radius, $radius-full) !default;
 // 等待 (wait) 状态下圆形指示器的背景色
 $step-circle-bg: var(--wot-step-circle-bg, $filled-strong) !default;
 // 进行中 (process) 状态下圆形指示器的背景色
@@ -31,7 +31,7 @@ $step-error-bg: var(--wot-step-error-bg, $danger-main) !default;
 // 圆形指示器内部文本的字号
 $step-circle-text-font-size: var(--wot-step-circle-text-font-size, $typography-label-size-main) !default;
 // 圆形指示器内部文本的行高
-$step-circle-text-line-height: var(--wot-step-circle-text-line-height, $typography-label-line--height-size-main) !default;
+$step-circle-text-line-height: var(--wot-step-circle-text-line-height, $typography-label-line-height-size-main) !default;
 // 圆形指示器内部文本的字重
 $step-circle-text-font-weight: var(--wot-step-circle-text-font-weight, $font-weight-medium) !default;
 // 等待状态或默认状态下圆形指示器内文本颜色
@@ -85,7 +85,7 @@ $step-dot-error-bg: var(--wot-step-dot-error-bg, $danger-main) !default;
 // 标题文本字号大小
 $step-title-font-size: var(--wot-step-title-font-size, $typography-body-size-main) !default;
 // 标题文本行高
-$step-title-line-height: var(--wot-step-title-line-height, $typography-body-line--height-size-main) !default;
+$step-title-line-height: var(--wot-step-title-line-height, $typography-body-line-height-size-main) !default;
 // 标题文本字重
 $step-title-font-weight: var(--wot-step-title-font-weight, $font-weight-regular) !default;
 // 等待与完成状态下标题的颜色
@@ -99,7 +99,7 @@ $step-title-error-color: var(--wot-step-title-error-color, $danger-main) !defaul
 // 描述文本字号大小
 $step-description-font-size: var(--wot-step-description-font-size, $typography-label-size-main) !default;
 // 描述文本行高
-$step-description-line-height: var(--wot-step-description-line-height, $typography-label-line--height-size-main) !default;
+$step-description-line-height: var(--wot-step-description-line-height, $typography-label-line-height-size-main) !default;
 // 描述文本字重
 $step-description-font-weight: var(--wot-step-description-font-weight, $font-weight-regular) !default;
 // 描述文本颜色

package/components/wd-swiper-nav/index.scss

@@ -15,14 +15,14 @@ $swiper-nav-dot-margin: var(--wot-swiper-nav-dot-margin, $spacing-super-tight) !
 // dots-bar 激活宽度
 $swiper-nav-dots-bar-width-active: var(--wot-swiper-nav-dots-bar-width-active, $n-15) !default;
 // dot 圆角
-$swiper-nav-dot-border-radius: var(--wot-swiper-nav-dot-border-radius, $radius-radius-full) !default;
+$swiper-nav-dot-border-radius: var(--wot-swiper-nav-dot-border-radius, $radius-full) !default;
 // fraction
 // 分数模式文字颜色
 $swiper-nav-fraction-color: var(--wot-swiper-nav-fraction-color, $icon-white) !default;
 // 分数模式背景色
 $swiper-nav-fraction-bg: var(--wot-swiper-nav-fraction-bg, $opacfilled-main-cover) !default;
 // 分数模式行高
-$swiper-nav-fraction-line-height: var(--wot-swiper-nav-fraction-line-height, $typography-label-line--height-size-large) !default;
+$swiper-nav-fraction-line-height: var(--wot-swiper-nav-fraction-line-height, $typography-label-line-height-size-large) !default;
 // 分数模式字号
 $swiper-nav-fraction-font-size: var(--wot-swiper-nav-fraction-font-size, $typography-label-size-large) !default;
 // 分数模式内边距
@@ -41,7 +41,7 @@ $swiper-nav-btn-icon-size: var(--wot-swiper-nav-btn-icon-size, $n-16) !default;
 // 按钮水平间距
 $swiper-nav-btn-spacing: var(--wot-swiper-nav-btn-spacing, $spacing-loose) !default;
 // 按钮圆角
-$swiper-nav-btn-border-radius: var(--wot-swiper-nav-btn-border-radius, $radius-radius-full) !default;
+$swiper-nav-btn-border-radius: var(--wot-swiper-nav-btn-border-radius, $radius-full) !default;
 
 @include b(swiper-nav) {
 

package/components/wd-switch/index.scss

@@ -43,12 +43,12 @@ $switch-inner-font-size: var(--wot-switch-inner-font-size, $typography-body-size
 // 方角模式圆角
 $switch-radius: var(--wot-switch-radius, $radius-main) !default;
 // 圆角模式圆角
-$switch-radius-full: var(--wot-switch-radius-full, $radius-radius-full) !default;
+$switch-radius-full: var(--wot-switch-radius-full, $radius-full) !default;
 
 // 方角模式操作块圆角
 $switch-radius-action: var(--wot-switch-radius-action, $radius-small) !default;
 // 圆角模式操作块圆角
-$switch-radius-action-full: var(--wot-switch-radius-action-full, $radius-radius-full) !default;
+$switch-radius-action-full: var(--wot-switch-radius-action-full, $radius-full) !default;
 
 // 图标与文案间距
 $switch-spacing: var(--wot-switch-spacing, $spacing-super-tight) !default;

package/components/wd-switch/types.ts

@@ -35,6 +35,38 @@ export const switchProps = {
    * 非激活状态图标，设置后将忽略 `inactiveText`
    */
   inactiveIcon: String,
+  /**
+   * 类名前缀，用于使用自定义图标，用法参考 Icon 组件
+   */
+  classPrefix: makeStringProp('wd-icon'),
+  /**
+   * 非激活状态操作按钮 CSS 图标，用法参考 Icon 组件
+   */
+  inactiveActionCssIcon: {
+    type: [Boolean, String],
+    default: false
+  },
+  /**
+   * 激活状态操作按钮 CSS 图标，用法参考 Icon 组件
+   */
+  activeActionCssIcon: {
+    type: [Boolean, String],
+    default: false
+  },
+  /**
+   * 激活状态 CSS 图标，设置后将忽略 `activeText`，用法参考 Icon 组件
+   */
+  activeCssIcon: {
+    type: [Boolean, String],
+    default: false
+  },
+  /**
+   * 非激活状态 CSS 图标，设置后将忽略 `inactiveText`，用法参考 Icon 组件
+   */
+  inactiveCssIcon: {
+    type: [Boolean, String],
+    default: false
+  },
   /**
    * 激活状态文本
    */
@@ -84,10 +116,6 @@ export const switchProps = {
   /**
    * 在改变前执行的函数
    */
-  beforeChange: Function as PropType<SwitchBeforeChange>,
-  /**
-   * 自定义类名
-   */
-  classPrefix: makeStringProp('wd-icon')
+  beforeChange: Function as PropType<SwitchBeforeChange>
 }
 export type SwitchProps = ExtractPropTypes<typeof switchProps>

package/components/wd-switch/wd-switch.vue

@@ -1,12 +1,24 @@
 <template>
   <view :class="rootClass" :style="rootStyle" @click="switchValue">
     <view class="wd-switch__inner" :style="innerStyle">
-      <wd-icon custom-class="wd-switch__inner-icon" :name="innerIcon" v-if="innerIcon" :class-prefix="classPrefix"></wd-icon>
+      <wd-icon
+        v-if="innerIcon || innerCssIcon"
+        custom-class="wd-switch__inner-icon"
+        :name="innerIcon"
+        :class-prefix="classPrefix"
+        :css-icon="innerCssIcon"
+      ></wd-icon>
       <text v-else class="wd-switch__inner-text">{{ isActive ? activeText : inactiveText }}</text>
     </view>
     <view class="wd-switch__action">
-      <wd-loading v-bind="customLoadingProps" v-if="loading"></wd-loading>
-      <wd-icon custom-class="wd-switch__action-icon" :name="actionIcon" v-else-if="actionIcon" :class-prefix="classPrefix"></wd-icon>
+      <wd-loading v-if="loading" v-bind="customLoadingProps"></wd-loading>
+      <wd-icon
+        v-else-if="actionIcon || actionCssIcon"
+        custom-class="wd-switch__action-icon"
+        :name="actionIcon"
+        :class-prefix="classPrefix"
+        :css-icon="actionCssIcon"
+      ></wd-icon>
     </view>
   </view>
 </template>
@@ -62,10 +74,18 @@ const innerIcon = computed(() => {
   return isActive.value ? props.activeIcon : props.inactiveIcon
 })
 
+const innerCssIcon = computed(() => {
+  return isActive.value ? props.activeCssIcon : props.inactiveCssIcon
+})
+
 const actionIcon = computed(() => {
   return isActive.value ? props.activeActionIcon : props.inactiveActionIcon
 })
 
+const actionCssIcon = computed(() => {
+  return isActive.value ? props.activeActionCssIcon : props.inactiveActionCssIcon
+})
+
 const customLoadingProps = computed<Partial<LoadingProps>>(() => {
   const overrides: Partial<LoadingProps> = isDef(props.loadingProps) ? omitBy(props.loadingProps, isUndefined) : {}
   const customSpinnerClass = [isDef(overrides.customSpinnerClass) ? overrides.customSpinnerClass : '', 'wd-switch__action-loading']

package/components/wd-tabbar/index.scss

@@ -10,7 +10,7 @@ $tabbar-z-index: var(--wot-tabbar-z-index, 10) !default;
 // round 变体水平外边距
 $tabbar-round-margin-horizontal: var(--wot-tabbar-round-margin-horizontal, $spacing-extra-loose) !default;
 // round 变体圆角
-$tabbar-round-radius: var(--wot-tabbar-round-radius, $radius-radius-full) !default;
+$tabbar-round-radius: var(--wot-tabbar-round-radius, $radius-full) !default;
 // round 变体阴影
 $tabbar-round-shadow: var(
   --wot-tabbar-round-shadow,

package/components/wd-tabbar-item/index.scss

@@ -7,7 +7,7 @@ $tabbar-item-color-inactive: var(--wot-tabbar-item-color-inactive, $text-main) !
 // 标题文字大小
 $tabbar-item-title-font-size: var(--wot-tabbar-item-title-font-size, $typography-label-size-extra-small) !default;
 // 标题文字行高
-$tabbar-item-title-line-height: var(--wot-tabbar-item-title-line-height, $typography-label-line--height-size-extra-small) !default;
+$tabbar-item-title-line-height: var(--wot-tabbar-item-title-line-height, $typography-label-line-height-size-extra-small) !default;
 // 图标大小
 $tabbar-item-icon-size: var(--wot-tabbar-item-icon-size, $n-24) !default;