oxy-uni-ui 2.1.0 → 2.1.2

package/components/common/abstracts/variable.scss

@@ -81,6 +81,7 @@ $-fs-aid: var(--oxy-fs-aid, 24rpx) !default; // 辅助文字字号，弱化信
 /* 文字字重 */
 $-fw-medium: var(--oxy-fw-medium, 500) !default; // PingFangSC-Medium
 $-fw-semibold: var(--oxy-fw-semibold, 600) !default; // PingFangSC-Semibold
+$-fw-bold: var(--oxy-fw-bold, 700) !default; // 粗体
 
 /* 尺寸 */
 $-size-side-padding: var(--oxy-size-side-padding, 32rpx) !default; // 屏幕两边留白
@@ -109,12 +110,56 @@ $-opacity-disabled: var(--oxy-opacity-disabled, 0.6) !default; // 禁用态透
 /* 基础描边 */
 $-border-width-base: var(--oxy-border-width-base, 1px) !default; // 基础描边宽度
 
+/* 基础间距 */
+$-spacing-4: var(--oxy-spacing-4, 4rpx) !default; // 超小间距
+$-spacing-8: var(--oxy-spacing-8, 8rpx) !default; // 小间距
+$-spacing-12: var(--oxy-spacing-12, 12rpx) !default; // 中小间距
+$-spacing-16: var(--oxy-spacing-16, 16rpx) !default; // 中间距
+$-spacing-20: var(--oxy-spacing-20, 20rpx) !default; // 中上间距
+$-spacing-24: var(--oxy-spacing-24, 24rpx) !default; // 大间距
+$-spacing-32: var(--oxy-spacing-32, 32rpx) !default; // 超大间距
+$-spacing-40: var(--oxy-spacing-40, 40rpx) !default; // 特大间距
+$-spacing-48: var(--oxy-spacing-48, 48rpx) !default; // 极大间距
+
+/* 基础尺寸 */
+$-size-32: var(--oxy-size-32, 32rpx) !default; // 小尺寸
+$-size-48: var(--oxy-size-48, 48rpx) !default; // 中尺寸
+$-size-64: var(--oxy-size-64, 64rpx) !default; // 大尺寸
+$-size-80: var(--oxy-size-80, 80rpx) !default; // 特大尺寸
+
+/* 基础行高 */
+$-lh-base: var(--oxy-lh-base, 48rpx) !default; // 基础行高
+$-lh-sm: var(--oxy-lh-sm, 44rpx) !default; // 小行高
+$-lh-xs: var(--oxy-lh-xs, 40rpx) !default; // 超小行高
+
+/* 额外透明度 */
+$-opacity-muted: var(--oxy-opacity-muted, 0.5) !default; // 弱化透明度
+
+/* 基础行高比（无单位） */
+$-line-height-tight: var(--oxy-line-height-tight, 1.1) !default; // 紧凑行高
+$-line-height-base: var(--oxy-line-height-base, 1.2) !default; // 基础行高
+$-line-height-loose: var(--oxy-line-height-loose, 1.43) !default; // 宽松行高
+
+/* 基础过渡时长 */
+$-transition-duration-fast: var(--oxy-transition-duration-fast, 0.16s) !default; // 快速过渡
+$-transition-duration-base: var(--oxy-transition-duration-base, 0.2s) !default; // 基础过渡
+$-transition-duration-slow: var(--oxy-transition-duration-slow, 0.3s) !default; // 慢速过渡
+
+/* 基础过渡动效曲线 */
+$-transition-timing-function-base: var(--oxy-transition-timing-function-base, cubic-bezier(0.4, 0, 0.2, 1)) !default; // 标准缓出曲线
+
+/* 基础层级 */
+$-z-index-sticky: var(--oxy-z-index-sticky, 1) !default; // 粘性定位层级
+$-z-index-fixed: var(--oxy-z-index-fixed, 500) !default; // 固定定位层级
+$-z-index-overlay: var(--oxy-z-index-overlay, 999) !default; // 遮罩层级
+$-z-index-top: var(--oxy-z-index-top, 9999) !default; // 最高层级
+
 /*-------------------------------- Theme color application size.  end --------------------------------*/
 
 /* component var */
 
 /* action-sheet */
-$-action-sheet-weight: var(--oxy-action-sheet-weight, 500) !default; // 面板字重
+$-action-sheet-weight: var(--oxy-action-sheet-weight, $-fw-medium) !default; // 面板字重
 $-action-sheet-radius: var(--oxy-action-sheet-radius, $-radius-2xl) !default; // 面板圆角大小
 $-action-sheet-loading-size: var(--oxy-action-sheet-loading-size, 40rpx) !default; // loading动画尺寸
 $-action-sheet-action-height: var(--oxy-action-sheet-action-height, 96rpx) !default; // 单条菜单高度
@@ -143,7 +188,7 @@ $-action-sheet-panel-img-radius: var(--oxy-action-sheet-panel-img-radius, $-radi
 $-badge-bg: var(--oxy-badge-bg, $-color-danger) !default; // 背景填充颜色
 $-badge-color: var(--oxy-badge-color, #fff) !default; // 文字颜色
 $-badge-fs: var(--oxy-badge-fs, $-fs-secondary) !default; // 文字字号
-$-badge-padding: var(--oxy-badge-padding, 0 12rpx) !default; // padding
+$-badge-padding: var(--oxy-badge-padding, 0 $-spacing-12) !default; // padding
 $-badge-height: var(--oxy-badge-height, 32rpx) !default; // 高度
 $-badge-primary: var(--oxy-badge-primary, $-color-theme) !default;
 $-badge-success: var(--oxy-badge-success, $-color-success) !default;
@@ -204,10 +249,10 @@ $-cell-group-title-color: var(--oxy-cell-group-title-color, rgba(0, 0, 0, 0.85))
 $-cell-group-value-fs: var(--oxy-cell-group-value-fs, $-fs-content) !default; // 组值字号
 $-cell-group-value-color: var(--oxy-cell-group-value-color, $-color-content) !default; // 组值文字颜色
 
-$-cell-wrapper-padding: var(--oxy-cell-wrapper-padding, 28rpx) !default; // cell 容器padding
-$-cell-wrapper-padding-large: var(--oxy-cell-wrapper-padding-large, 32rpx) !default; // large类型cell容器padding
+$-cell-wrapper-padding: var(--oxy-cell-wrapper-padding, 24rpx) !default; // cell 容器padding
+$-cell-wrapper-padding-large: var(--oxy-cell-wrapper-padding-large, 28rpx) !default; // large类型cell容器padding
 
-$-cell-wrapper-padding-with-label: var(--oxy-cell-wrapper-padding-with-label, 40rpx) !default; // cell 容器上下padding（有label情况下）
+$-cell-wrapper-padding-with-label: var(--oxy-cell-wrapper-padding-with-label, 36rpx) !default; // cell 容器上下padding（有label情况下）
 $-cell-icon-right: var(--oxy-cell-icon-right, 8rpx) !default; // 图标距离右边缘
 $-cell-icon-size: var(--oxy-cell-icon-size, $-fs-title) !default; // 图标大小
 $-cell-title-fs: var(--oxy-cell-title-fs, $-fs-content) !default; // 标题字号
@@ -233,7 +278,7 @@ $-cell-vertical-top: var(--oxy-cell-vertical-top, 40rpx) !default; // 表单类
 
 /* calendar */
 $-calendar-fs: var(--oxy-calendar-fs, $-fs-title) !default;
-$-calendar-panel-padding: var(--oxy-calendar-panel-padding, 0 24rpx) !default;
+$-calendar-panel-padding: var(--oxy-calendar-panel-padding, 0 $-spacing-24) !default;
 $-calendar-panel-title-fs: var(--oxy-calendar-panel-title-fs, $-fs-content) !default;
 $-calendar-panel-title-color: var(--oxy-calendar-panel-title-color, rgba(0, 0, 0, 0.85)) !default;
 $-calendar-week-color: var(--oxy-calendar-week-color, rgba(0, 0, 0, 0.85)) !default;
@@ -241,7 +286,7 @@ $-calendar-week-height: var(--oxy-calendar-week-height, 72rpx) !default;
 $-calendar-week-fs: var(--oxy-calendar-week-fs, $-fs-secondary) !default;
 $-calendar-day-fs: var(--oxy-calendar-day-fs, $-fs-title) !default;
 $-calendar-day-color: var(--oxy-calendar-day-color, rgba(0, 0, 0, 0.85)) !default;
-$-calendar-day-fw: var(--oxy-calendar-day-fw, 500) !default;
+$-calendar-day-fw: var(--oxy-calendar-day-fw, $-fw-medium) !default;
 $-calendar-day-height: var(--oxy-calendar-day-height, 128rpx) !default;
 $-calendar-month-width: var(--oxy-calendar-month-width, 100rpx) !default;
 $-calendar-active-color: var(--oxy-calendar-active-color, $-color-theme) !default;
@@ -261,7 +306,7 @@ $-checkbox-margin: var(--oxy-checkbox-margin, 24rpx) !default; // 多个复选
 $-checkbox-bg: var(--oxy-checkbox-bg, $-color-white) !default; // 多个复选框距离
 $-checkbox-label-margin: var(--oxy-checkbox-label-margin, 24rpx) !default; // 右侧文字与左侧图标距离
 $-checkbox-size: var(--oxy-checkbox-size, 32rpx) !default; // 左侧图标尺寸
-$-checkbox-icon-size: var(--oxy-checkbox-icon-size, 28rpx) !default; // 左侧图标尺寸
+$-checkbox-icon-size: var(--oxy-checkbox-icon-size, 32rpx) !default; // 左侧图标尺寸
 $-checkbox-border-color: var(--oxy-checkbox-border-color, #dcdcdc) !default; // 左侧图标边框颜色
 $-checkbox-check-color: var(--oxy-checkbox-check-color, $-color-white) !default; // 左侧图标边框颜色
 $-checkbox-label-fs: var(--oxy-checkbox-label-fs, $-fs-content) !default; // 右侧文字字号
@@ -275,6 +320,7 @@ $-checkbox-disabled-check-bg: var(--oxy-checkbox-disabled-check-bg, rgba(0, 0, 0
 $-checkbox-square-radius: var(--oxy-checkbox-square-radius, $-radius-sm) !default; // 方型圆角大小
 
 $-checkbox-large-size: var(--oxy-checkbox-large-size, 36rpx) !default; // 左侧图标尺寸
+$-checkbox-large-icon-size: var(--oxy-checkbox-large-icon-size, 36rpx) !default; // large 左侧图标尺寸
 $-checkbox-large-label-fs: var(--oxy-checkbox-large-label-fs, $-fs-title) !default; // 右侧文字字号
 
 $-checkbox-button-height: var(--oxy-checkbox-button-height, 72rpx) !default; // 按钮模式复选框高
@@ -301,17 +347,17 @@ $-collapse-more-color: var(--oxy-collapse-more-color, $-color-theme) !default; /
 
 /* divider */
 $-divider-padding: var(--oxy-divider-padding, 0 $-size-side-padding) !default; // 两边间距
-$-divider-margin: var(--oxy-divider-margin, 32rpx 0) !default; // 上下间距
+$-divider-margin: var(--oxy-divider-margin, $-spacing-32 0) !default; // 上下间距
 $-divider-color: var(--oxy-divider-color, rgba(0, 0, 0, 0.45)) !default; // 字体颜色
 $-divider-line-color: var(--oxy-divider-line-color, currentColor) !default; // 线条颜色
 $-divider-line-height: var(--oxy-divider-line-height, 1px) !default; // 线条高度
 $-divider-fs: var(--oxy-divider-fs, $-fs-content) !default; // 字体大小
 $-divider-content-left-width: var(--oxy-divider-content-left-width, 10%) !default; // 左侧内容宽度
-$-divider-content-left-margin: var(--oxy-divider-content-left-margin, 24rpx) !default; // 左侧内容距离线距离
-$-divider-content-right-margin: var(--oxy-divider-content-right-margin, 24rpx) !default; // 右侧内容距离线距离
+$-divider-content-left-margin: var(--oxy-divider-content-left-margin, $-spacing-24) !default; // 左侧内容距离线距离
+$-divider-content-right-margin: var(--oxy-divider-content-right-margin, $-spacing-24) !default; // 右侧内容距离线距离
 $-divider-content-right-width: var(--oxy-divider-content-right-width, 10%) !default; // 右侧内容宽度
 $-divider-vertical-height: var(--oxy-divider-vertical-height, 32rpx) !default; // 垂直分割线高度
-$-divider-vertical-content-margin: var(--oxy-divider-vertical-content-margin, 0 16rpx) !default; // 垂直分割线内容间距
+$-divider-vertical-content-margin: var(--oxy-divider-vertical-content-margin, 0 $-spacing-16) !default; // 垂直分割线内容间距
 $-divider-vertical-line-width: var(--oxy-divider-vertical-line-width, 1px) !default; // 线条高度
 
 
@@ -338,32 +384,32 @@ $-drop-menu-bg: var(--oxy-drop-menu-bg, $-color-white) !default; // 顶部菜单
 $-drop-menu-modal-bg: var(--oxy-drop-menu-modal-bg, rgba(0, 0, 0, 0.7)) !default; // 菜单蒙层背景色
 
 /* input-number */
-$-input-number-color: var(--oxy-input-number-color, #262626) !default; // 文字颜色
-$-input-number-border-color: var(--oxy-input-number-border-color, #e8e8e8) !default; // 边框颜色
+$-input-number-color: var(--oxy-input-number-color, $-color-content) !default; // 文字颜色
+$-input-number-border-color: var(--oxy-input-number-border-color, $-color-border) !default; // 边框颜色
 $-input-number-disabled-color: var(--oxy-input-number-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 禁用颜色
 $-input-number-height: var(--oxy-input-number-height, 64rpx) !default; // 加减号按钮高度
 $-input-number-btn-width: var(--oxy-input-number-btn-width, 56rpx) !default; // 加减号按钮宽度
 $-input-number-input-width: var(--oxy-input-number-input-width, 80rpx) !default; // 输入框宽度
 $-input-number-radius: var(--oxy-input-number-radius, $-radius-sm) !default; // 加减号按钮圆角大小
 $-input-number-fs: var(--oxy-input-number-fs, $-fs-content) !default; // 输入框字号
-$-input-number-icon-size: var(--oxy-input-number-icon-size, 28rpx) !default; // 加减号图标大小
-$-input-number-icon-color: var(--oxy-input-number-icon-color, rgba(0, 0, 0, 0.65)) !default; // icon颜色
+$-input-number-icon-size: var(--oxy-input-number-icon-size, 24rpx) !default; // 加减号图标大小
+$-input-number-icon-color: var(--oxy-input-number-icon-color, $-color-secondary) !default; // icon颜色
 
 /* input */
 $-input-padding: var(--oxy-input-padding, $-size-side-padding) !default; // input 左右padding距离
-$-input-border-color: var(--oxy-input-border-color, #dadada) !default; // 无label边框颜色
-$-input-not-empty-border-color: var(--oxy-input-not-empty-border-color, #262626) !default; // 输入框有值时 无label边框颜色
+$-input-border-color: var(--oxy-input-border-color, $-color-border-light) !default; // 无label边框颜色
+$-input-not-empty-border-color: var(--oxy-input-not-empty-border-color, $-color-border) !default; // 输入框有值时 无label边框颜色
 $-input-fs: var(--oxy-input-fs, $-cell-title-fs) !default; // 字号
 $-input-fs-large: var(--oxy-input-fs-large, $-cell-title-fs-large) !default; // 大尺寸字号
 $-input-icon-margin: var(--oxy-input-icon-margin, 20rpx) !default; // 图标距离
-$-input-color: var(--oxy-input-color, #262626) !default; // 文字颜色
-$-input-placeholder-color: var(--oxy-input-placeholder-color, #bfbfbf) !default; // 占位符颜色
-$-input-disabled-color: var(--oxy-input-disabled-color, #d9d9d9) !default; // 输入框禁用颜色
+$-input-color: var(--oxy-input-color, $-color-content) !default; // 文字颜色
+$-input-placeholder-color: var(--oxy-input-placeholder-color, $-color-tip) !default; // 占位符颜色
+$-input-disabled-color: var(--oxy-input-disabled-color, $-color-border) !default; // 输入框禁用颜色
 $-input-error-color: var(--oxy-input-error-color, $-color-danger) !default; // 输入框错误颜色
-$-input-icon-color: var(--oxy-input-icon-color, #bfbfbf) !default; // 图标颜色
-$-input-clear-color: var(--oxy-input-clear-color, #585858) !default; // 关闭按钮颜色
-$-input-count-color: var(--oxy-input-count-color, #bfbfbf) !default; // 计数文字颜色
-$-input-count-current-color: var(--oxy-input-count-current-color, #262626) !default; // 当前长度颜色
+$-input-icon-color: var(--oxy-input-icon-color, $-color-tip) !default; // 图标颜色
+$-input-clear-color: var(--oxy-input-clear-color, $-color-secondary) !default; // 关闭按钮颜色
+$-input-count-color: var(--oxy-input-count-color, $-color-tip) !default; // 计数文字颜色
+$-input-count-current-color: var(--oxy-input-count-current-color, $-color-content) !default; // 当前长度颜色
 $-input-bg: var(--oxy-input-bg, $-color-white) !default; // 默认背景颜色
 
 $-input-cell-bg: var(--oxy-input-cell-bg, $-color-white) !default; // cell 类型背景色
@@ -380,21 +426,21 @@ $-input-icon-size: var(--oxy-input-icon-size, 32rpx) !default; // 图标大小
 $-input-icon-size-large: var(--oxy-input-icon-size-large, 36rpx) !default; // 大尺寸图标大小
 
 /* textarea */
-$-textarea-padding: var(--oxy-textarea-padding, $-size-side-padding) !default; // textarea 左右padding距离
-$-textarea-border-color: var(--oxy-textarea-border-color, #dadada) !default; // 无label边框颜色
-$-textarea-not-empty-border-color: var(--oxy-textarea-not-empty-border-color, #262626) !default; // 输入框有值时 无label边框颜色
+$-textarea-padding: var(--oxy-textarea-padding, 24rpx) !default; // textarea 左右padding距离
+$-textarea-border-color: var(--oxy-textarea-border-color, $-color-border-light) !default; // 无label边框颜色
+$-textarea-not-empty-border-color: var(--oxy-textarea-not-empty-border-color, $-color-border) !default; // 输入框有值时 无label边框颜色
 $-textarea-fs: var(--oxy-textarea-fs, $-cell-title-fs) !default; // 字号
 $-textarea-fs-large: var(--oxy-textarea-fs-large, $-cell-title-fs-large) !default; // 大尺寸字号
 $-textarea-icon-margin: var(--oxy-textarea-icon-margin, 20rpx) !default; // 图标距离
-$-textarea-color: var(--oxy-textarea-color, #262626) !default; // 文字颜色
-$-textarea-icon-color: var(--oxy-textarea-icon-color, #bfbfbf) !default; // 图标颜色
-$-textarea-clear-color: var(--oxy-textarea-clear-color, #585858) !default; // 关闭按钮颜色
-$-textarea-count-color: var(--oxy-textarea-count-color, #bfbfbf) !default; // 计数文字颜色
-$-textarea-count-current-color: var(--oxy-textarea-count-current-color, $default-theme) !default; // 当前长度颜色
+$-textarea-color: var(--oxy-textarea-color, $-color-content) !default; // 文字颜色
+$-textarea-icon-color: var(--oxy-textarea-icon-color, $-color-tip) !default; // 图标颜色
+$-textarea-clear-color: var(--oxy-textarea-clear-color, $-color-secondary) !default; // 关闭按钮颜色
+$-textarea-count-color: var(--oxy-textarea-count-color, $-color-tip) !default; // 计数文字颜色
+$-textarea-count-current-color: var(--oxy-textarea-count-current-color, $-color-theme) !default; // 当前长度颜色
 $-textarea-bg: var(--oxy-textarea-bg, $-color-white) !default; // 默认背景颜色
 $-textarea-cell-border-color: var(--oxy-textarea-cell-border-color, $-color-border-light) !default; // cell 类型边框颜色
-$-textarea-cell-padding: var(--oxy-textarea-cell-padding, 28rpx) !default; // cell 容器padding
-$-textarea-cell-padding-large: var(--oxy-textarea-cell-padding-large, 32rpx) !default; // large类型cell容器padding
+$-textarea-cell-padding: var(--oxy-textarea-cell-padding, 24rpx) !default; // cell 容器padding
+$-textarea-cell-padding-large: var(--oxy-textarea-cell-padding-large, 28rpx) !default; // large类型cell容器padding
 $-textarea-cell-height: var(--oxy-textarea-cell-height, 64rpx) !default; // cell 高度
 $-textarea-count-fs: var(--oxy-textarea-count-fs, $-fs-content) !default; // 计数字号
 $-textarea-count-fs-large: var(--oxy-textarea-count-fs-large, $-fs-content) !default; // 大尺寸计数字号
@@ -440,7 +486,7 @@ $-notice-bar-close-color: var(--oxy-notice-bar-close-color, $-color-white) !defa
 $-notice-bar-wrap-padding: var(--oxy-notice-bar-wrap-padding, 32rpx $-size-side-padding) !default; // 换行下的padding
 
 /* pagination */
-$-pagination-content-padding: var(--oxy-pagination-content-padding, 24rpx 32rpx) !default;
+$-pagination-content-padding: var(--oxy-pagination-content-padding, $-spacing-24 $-spacing-32) !default;
 $-pagination-message-padding: var(--oxy-pagination-message-padding, 4rpx 0 36rpx 0) !default;
 $-pagination-message-fs: var(--oxy-pagination-message-fs, $-fs-content) !default;
 $-pagination-message-color: var(--oxy-pagination-message-color, rgba(0, 0, 0, 0.69)) !default;
@@ -450,7 +496,7 @@ $-pagination-nav-fs: var(--oxy-pagination-nav-fs, $-fs-content) !default;
 $-pagination-nav-width: var(--oxy-pagination-nav-width, 120rpx) !default;
 $-pagination-nav-color: var(--oxy-pagination-nav-color, rgba(0, 0, 0, 0.85)) !default;
 $-pagination-nav-content-fs: var(--oxy-pagination-nav-content-fs, $-fs-content) !default;
-$-pagination-nav-sepatator-padding: var(--oxy-pagination-nav-sepatator-padding, 0 8rpx) !default;
+$-pagination-nav-sepatator-padding: var(--oxy-pagination-nav-sepatator-padding, 0 $-spacing-8) !default;
 $-pagination-nav-current-color: var(--oxy-pagination-nav-current-color, $-color-theme) !default;
 $-pagination-icon-size: var(--oxy-pagination-icon-size, $-fs-content) !default;
 $-pagination-bg: var(--oxy-pagination-bg, $-color-white) !default;
@@ -496,7 +542,7 @@ $-col-picker-selected-height: var(--oxy-col-picker-selected-height, 88rpx) !defa
 $-col-picker-selected-padding: var(--oxy-col-picker-selected-padding, 0 32rpx) !default; // 弹框顶部值左右间距
 $-col-picker-selected-fs: var(--oxy-col-picker-selected-fs, $-fs-content) !default; // 弹框顶部值字号
 $-col-picker-selected-color: var(--oxy-col-picker-selected-color, rgba(0, 0, 0, 0.85)) !default; // 弹框顶部值文字颜色
-$-col-picker-selected-fw: var(--oxy-col-picker-selected-fw, 700) !default; // 弹框顶部值高亮字重
+$-col-picker-selected-fw: var(--oxy-col-picker-selected-fw, $-fw-bold) !default; // 弹框顶部值高亮字重
 $-col-picker-line-width: var(--oxy-col-picker-line-width, 32rpx) !default; // 弹框顶部值高亮线条宽度
 $-col-picker-line-height: var(--oxy-col-picker-line-height, 6rpx) !default; // 弹框顶部值高亮线条高度
 $-col-picker-line-color: var(
@@ -532,7 +578,8 @@ $-progress-success-color: var(--oxy-progress-success-color, $-color-success) !de
 $-progress-warning-color: var(--oxy-progress-warning-color, $-color-warning) !default; // 进度条warning进度条颜色
 
 $-progress-color: var(--oxy-progress-color, $-color-theme) !default; // 进度条颜色
-$-progress-height: var(--oxy-progress-height, 6rpx) !default; // 进度条高度
+$-progress-height: var(--oxy-progress-height, 12rpx) !default; // 进度条高度
+$-progress-radius: var(--oxy-progress-radius, 6rpx) !default; // 进度条圆角
 $-progress-label-color: var(--oxy-progress-label-color, #333) !default; // 文字颜色
 $-progress-label-fs: var(--oxy-progress-label-fs, $-fs-content) !default; // 文字字号
 $-progress-icon-fs: var(--oxy-progress-icon-fs, 36rpx) !default; // 图标字号
@@ -540,7 +587,7 @@ $-progress-icon-fs: var(--oxy-progress-icon-fs, 36rpx) !default; // 图标字号
 /* radio */
 $-radio-margin: var(--oxy-radio-margin, $-checkbox-margin) !default; // 多个单选框距离
 $-radio-label-margin: var(--oxy-radio-label-margin, $-checkbox-label-margin) !default; // 右侧文字与左侧图标距离
-$-radio-size: var(--oxy-radio-size, 32rpx) !default; // 左侧图标尺寸
+$-radio-size: var(--oxy-radio-size, $-checkbox-size) !default; // 左侧图标尺寸
 $-radio-bg: var(--oxy-radio-bg, $-color-white) !default; // 左侧图标尺寸
 $-radio-label-fs: var(--oxy-radio-label-fs, $-checkbox-label-fs) !default; // 右侧文字字号
 $-radio-label-color: var(--oxy-radio-label-color, $-checkbox-label-color) !default; // 右侧文字颜色
@@ -560,8 +607,10 @@ $-radio-button-fs: var(--oxy-radio-button-fs, $-checkbox-button-font-size) !defa
 $-radio-button-border: var(--oxy-radio-button-border, $-checkbox-button-border) !default; // 按钮边框颜色
 $-radio-button-disabled-border: var(--oxy-radio-button-disabled-border, $-checkbox-button-disabled-border) !default; // 按钮禁用边框颜色
 
+$-radio-dot-shape-size: var(--oxy-radio-dot-shape-size, $-checkbox-size) !default; // 单选dot模式外圈尺寸
 $-radio-dot-size: var(--oxy-radio-dot-size, 16rpx) !default; // 单选dot模式圆点尺寸
-$-radio-dot-large-size: var(--oxy-radio-dot-large-size, 20rpx) !default; // 单选dot模式大尺寸圆点尺寸
+$-radio-dot-shape-large-size: var(--oxy-radio-dot-shape-large-size, $-checkbox-large-size) !default; // 单选dot模式大尺寸外圈尺寸
+$-radio-dot-large-size: var(--oxy-radio-dot-large-size, 18rpx) !default; // 单选dot模式大尺寸圆点尺寸
 $-radio-dot-checked-bg: var(--oxy-radio-dot-checked-bg, $-color-theme) !default; // 单选dot模式选中背景色
 $-radio-dot-checked-border-color: var(--oxy-radio-dot-checked-border-color, $-color-theme) !default; // 单选dot模式选中边框色
 $-radio-dot-border-color: var(--oxy-radio-dot-border-color, #dcdcdc) !default; // 单选dot模式边框色
@@ -611,7 +660,7 @@ $-select-icon-color: var(--oxy-select-icon-color, $-color-tip) !default; // 图
 $-select-clear-icon-color: var(--oxy-select-clear-icon-color, $-color-secondary) !default; // 清除图标颜色
 $-select-text-color: var(--oxy-select-text-color, $-color-content) !default; // 文本颜色
 $-select-wrapper-padding-x: var(--oxy-select-wrapper-padding-x, 28rpx) !default; // 输入区域左右内边距
-$-select-wrapper-min-height: var(--oxy-select-wrapper-min-height, 84rpx) !default; // 输入区域最小高度
+$-select-wrapper-min-height: var(--oxy-select-wrapper-min-height, 72rpx) !default; // 输入区域最小高度
 $-select-no-border-min-height: var(--oxy-select-no-border-min-height, 64rpx) !default; // 无边框模式最小高度
 $-select-wrapper-radius: var(--oxy-select-wrapper-radius, $-radius-sm) !default; // 选择器输入区域圆角
 $-select-tag-radius: var(--oxy-select-tag-radius, $-radius-sm) !default; // 选择器标签圆角
@@ -688,9 +737,11 @@ $-tabs-nav-pills-border-radius: var(--oxy-tabs-nav-pills-border-radius, $-radius
 $-tabs-nav-pills-color: var(--oxy-tabs-nav-pills-color, $-color-white) !default; // pills文字颜色
 
 /* tag */
-$-tag-fs: var(--oxy-tag-fs, $-fs-content) !default; // 字号
+$-tag-mini-fs: var(--oxy-tag-mini-fs, 20rpx) !default; // 迷你尺寸字号
+$-tag-small-fs: var(--oxy-tag-small-fs, 24rpx) !default; // 小尺寸字号
+$-tag-fs: var(--oxy-tag-fs, 28rpx) !default; // 默认字号
+$-tag-large-fs: var(--oxy-tag-large-fs, 32rpx) !default; // 大尺寸字号
 $-tag-color: var(--oxy-tag-color, $-color-white) !default; // 字体颜色
-$-tag-small-fs: var(--oxy-tag-small-fs, $-fs-secondary) !default; // 小尺寸字号
 $-tag-info-color: var(--oxy-tag-info-color, #585858) !default; // info 颜色
 $-tag-primary-color: var(--oxy-tag-primary-color, $-color-theme) !default; // 主颜色
 $-tag-danger-color: var(--oxy-tag-danger-color, $-color-danger) !default; // danger 颜色
@@ -702,10 +753,19 @@ $-tag-danger-bg: var(--oxy-tag-danger-bg, $-color-danger) !default; // danger
 $-tag-warning-bg: var(--oxy-tag-warning-bg, $-color-warning) !default; // warning 背景颜色
 $-tag-success-bg: var(--oxy-tag-success-bg, $-color-success) !default; // success 背景颜色
 $-tag-radius: var(--oxy-tag-radius, $-radius-sm) !default; // 默认圆角大小
+$-tag-mini-radius: var(--oxy-tag-mini-radius, $-radius-sm) !default; // mini 默认圆角
+$-tag-small-radius: var(--oxy-tag-small-radius, $-radius-md) !default; // small 默认圆角
+$-tag-large-radius: var(--oxy-tag-large-radius, $-radius-lg) !default; // large 默认圆角
 $-tag-round-color: var(--oxy-tag-round-color, rgba(102, 102, 102, 1)) !default; // round 字体颜色
 $-tag-round-border-color: var(--oxy-tag-round-border-color, rgba(225, 225, 225, 1)) !default; // round 边框颜色
 $-tag-round-radius: var(--oxy-tag-round-radius, $-radius-2xl) !default; // round 圆角大小
-$-tag-mark-radius: var(--oxy-tag-mark-radius, 12rpx 4rpx 12rpx 4rpx) !default; // mark 圆角大小
+$-tag-round-mini-radius: var(--oxy-tag-round-mini-radius, $-radius-pill) !default; // mini round 圆角
+$-tag-round-small-radius: var(--oxy-tag-round-small-radius, $-radius-pill) !default; // small round 圆角
+$-tag-round-large-radius: var(--oxy-tag-round-large-radius, $-radius-pill) !default; // large round 圆角
+$-tag-mark-radius: var(--oxy-tag-mark-radius, $-radius-md $-radius-xs) !default; // mark 圆角大小
+$-tag-mark-mini-radius: var(--oxy-tag-mark-mini-radius, $-radius-md $-radius-xs) !default; // mini mark 圆角
+$-tag-mark-small-radius: var(--oxy-tag-mark-small-radius, $-radius-lg $-radius-sm) !default; // small mark 圆角
+$-tag-mark-large-radius: var(--oxy-tag-mark-large-radius, $-radius-xl $-radius-md) !default; // large mark 圆角
 $-tag-close-size: var(--oxy-tag-close-size, $-tag-small-fs) !default; // 关闭按钮字号
 $-tag-close-color: var(--oxy-tag-close-color, currentColor) !default; // 关闭按钮颜色
 $-tag-close-active-color: var(--oxy-tag-close-active-color, rgba(0, 0, 0, 0.45)) !default; // 关闭按钮 active 颜色
@@ -713,7 +773,7 @@ $-tag-close-active-color: var(--oxy-tag-close-active-color, rgba(0, 0, 0, 0.45))
 /* corner */
 $-corner-radius: var(--oxy-corner-radius, $-radius-xl) !default; // 圆角大小
 $-corner-font-size: var(--oxy-corner-fs, $-fs-content) !default; // 字号
-$-corner-font-weight: var(--oxy-corner-fs, 400) !default; // 字号
+$-corner-font-weight: var(--oxy-corner-font-weight, 400) !default; // 字重
 $-corner-color: var(--oxy-corner-color, $-color-white) !default; // 字体颜色
 $-corner-primary-color: var(--oxy-corner-primary-color, $-color-theme) !default; // 主颜色
 $-corner-info-color: var(--oxy-corner-info-color, #7e8fae) !default; // info 颜色
@@ -725,20 +785,20 @@ $-corner-info-bg: var(--oxy-corner-info-bg, resultColor(90deg, $-color-info, 'da
 $-corner-success-bg: var(--oxy-corner-success-bg, resultColor(90deg, $-color-success, 'dark' 'light', #19be6b #84e3ab, 0% 100%)) !default; // success 背景颜色
 $-corner-warning-bg: var(--oxy-corner-warning-bg, resultColor(90deg, $-color-warning, 'dark' 'light', #ff8124 #ffb48f, 0% 100%)) !default; // warning 背景颜色
 $-corner-danger-bg: var(--oxy-corner-danger-bg, resultColor(90deg, $-color-danger, 'dark' 'light', #fa4350 #fea1a8, 0% 100%)) !default; // danger 背景颜色
-$-corner-horizontal-font-size: var(--oxy-corner-fs, $-fs-content) !default; // 字号
-$-corner-horizontal-font-weight: var(--oxy-corner-fs, $-fw-semibold) !default; // 字号
-$-corner-horizontal-primary-bg: var(--oxy-corner-primary-bg, resultColor(90deg, $-color-theme, 'light' 'dark', #ffffff #cceaff, 0% 100%)) !default; // 主背景颜色
-$-corner-horizontal-info-bg: var(--oxy-corner-info-bg, resultColor(90deg, $-color-info, 'light' 'dark', #ffffff #adb6c6, 0% 100%)) !default; // info 背景颜色
-$-corner-horizontal-success-bg: var(--oxy-corner-success-bg, resultColor(90deg, $-color-success, 'light' 'dark', #ffffff #b2ebcf, 0% 100%)) !default; // success 背景颜色
-$-corner-horizontal-warning-bg: var(--oxy-corner-warning-bg, resultColor(90deg, $-color-warning, 'light' 'dark', #ffffff #fcedd6, 0% 100%)) !default; // warning 背景颜色
-$-corner-horizontal-danger-bg: var(--oxy-corner-danger-bg, resultColor(90deg, $-color-danger, 'light' 'dark', #ffffff #ffd5d8, 0% 100%)) !default; // danger 背景颜色
-$-corner-embedded-font-size: var(--oxy-corner-fs, $-fs-content) !default; // 字号
-$-corner-embedded-font-weight: var(--oxy-corner-fs, 400) !default; // 字号
-$-corner-embedded-primary-bg: var(--oxy-corner-primary-bg, #cceaff) !default; // 主背景颜色
-$-corner-embedded-info-bg: var(--oxy-corner-info-bg, #eef4fc) !default; // info 背景颜色
-$-corner-embedded-success-bg: var(--oxy-corner-success-bg, #b2ebcf) !default; // success 背景颜色
-$-corner-embedded-warning-bg: var(--oxy-corner-warning-bg, #fcedd6) !default; // warning 背景颜色
-$-corner-embedded-danger-bg: var(--oxy-corner-danger-bg, #ffd5d8) !default; // danger 背景颜色
+$-corner-horizontal-font-size: var(--oxy-corner-horizontal-font-size, $-fs-content) !default; // 水平标签字号
+$-corner-horizontal-font-weight: var(--oxy-corner-horizontal-font-weight, $-fw-semibold) !default; // 水平标签字重
+$-corner-horizontal-primary-bg: var(--oxy-corner-horizontal-primary-bg, resultColor(90deg, $-color-theme, 'light' 'dark', #ffffff #cceaff, 0% 100%)) !default; // 水平标签主背景颜色
+$-corner-horizontal-info-bg: var(--oxy-corner-horizontal-info-bg, resultColor(90deg, $-color-info, 'light' 'dark', #ffffff #adb6c6, 0% 100%)) !default; // 水平标签info背景颜色
+$-corner-horizontal-success-bg: var(--oxy-corner-horizontal-success-bg, resultColor(90deg, $-color-success, 'light' 'dark', #ffffff #b2ebcf, 0% 100%)) !default; // 水平标签success背景颜色
+$-corner-horizontal-warning-bg: var(--oxy-corner-horizontal-warning-bg, resultColor(90deg, $-color-warning, 'light' 'dark', #ffffff #fcedd6, 0% 100%)) !default; // 水平标签warning背景颜色
+$-corner-horizontal-danger-bg: var(--oxy-corner-horizontal-danger-bg, resultColor(90deg, $-color-danger, 'light' 'dark', #ffffff #ffd5d8, 0% 100%)) !default; // 水平标签danger背景颜色
+$-corner-embedded-font-size: var(--oxy-corner-embedded-font-size, $-fs-content) !default; // 内嵌标签字号
+$-corner-embedded-font-weight: var(--oxy-corner-embedded-font-weight, 400) !default; // 内嵌标签字重
+$-corner-embedded-primary-bg: var(--oxy-corner-embedded-primary-bg, #cceaff) !default; // 内嵌标签主背景颜色
+$-corner-embedded-info-bg: var(--oxy-corner-embedded-info-bg, #eef4fc) !default; // 内嵌标签info背景颜色
+$-corner-embedded-success-bg: var(--oxy-corner-embedded-success-bg, #b2ebcf) !default; // 内嵌标签success背景颜色
+$-corner-embedded-warning-bg: var(--oxy-corner-embedded-warning-bg, #fcedd6) !default; // 内嵌标签warning背景颜色
+$-corner-embedded-danger-bg: var(--oxy-corner-embedded-danger-bg, #ffd5d8) !default; // 内嵌标签danger背景颜色
 
 /* toast */
 $-toast-color: var(--oxy-toast-color, $-color-white) !default; // 文字颜色
@@ -766,7 +826,7 @@ $-tooltip-radius: var(--oxy-tooltip-radius, $-radius-lg) !default; // 圆角大
 $-tooltip-arrow-size: var(--oxy-tooltip-arrow-size, 10rpx) !default; // 箭头大小
 $-tooltip-fs: var(--oxy-tooltip-fs, $-fs-content) !default; // 字号
 $-tooltip-blur: var(--oxy-tooltip-blur, 20rpx) !default; // 背景高斯模糊效果
-$-tooltip-padding: var(--oxy-tooltip-padding, 20rpx 40rpx) !default; // 间距
+$-tooltip-padding: var(--oxy-tooltip-padding, $-spacing-20 $-spacing-40) !default; // 间距
 $-tooltip-close-size: var(--oxy-tooltip-close-size, 12rpx) !default; // 背景高斯模糊效果
 $-tooltip-z-index: var(--oxy-tooltip-z-index, 500) !default;
 $-tooltip-line-height: var(--oxy-tooltip-line-height, 44rpx) !default; // 行高
@@ -780,7 +840,7 @@ $-popover-border-color: var(--oxy-popover-border-color, rgba(0, 0, 0, 0.09)) !de
 $-popover-radius: var(--oxy-popover-radius, $-radius-sm) !default; // 圆角大小
 $-popover-arrow-size: var(--oxy-popover-arrow-size, 12rpx) !default; // 箭头大小
 $-popover-fs: var(--oxy-popover-fs, $-fs-content) !default; // 字号
-$-popover-padding: var(--oxy-popover-padding, 32rpx) !default; // 间距
+$-popover-padding: var(--oxy-popover-padding, $-spacing-32) !default; // 间距
 $-popover-line-height: var(--oxy-popover-line-height, 44rpx) !default; // 行高
 $-popover-z-index: var(--oxy-popover-z-index, $-tooltip-z-index) !default;
 $-popover-dark-bg: var(--oxy-popover-dark-bg, rgb(75, 76, 77)) !default; // 暗色背景色
@@ -790,7 +850,7 @@ $-popover-trigger-icon-size: var(--oxy-popover-trigger-icon-size, 36rpx) !defaul
 /* grid-item */
 $-grid-item-fs: var(--oxy-grid-item-fs, $-fs-content) !default; // 字号
 $-grid-item-bg: var(--oxy-grid-item-bg, $-color-white) !default; // 字号
-$-grid-item-padding: var(--oxy-grid-item-padding, 32rpx 0) !default; // 内容的 padding
+$-grid-item-padding: var(--oxy-grid-item-padding, $-spacing-32 0) !default; // 内容的 padding
 $-grid-item-border-color: var(--oxy-grid-item-border-color, $-color-border-light) !default; // 边框颜色
 $-grid-item-hover-bg: var(--oxy-grid-item-hover-bg, $-color-gray-3) !default; // hover背景色
 $-grid-item-hover-bg-dark: var(--oxy-grid-item-hover-bg-dark, $-color-gray-7) !default; // 暗黑模式hover背景色
@@ -799,7 +859,7 @@ $-grid-item-hover-bg-dark: var(--oxy-grid-item-hover-bg-dark, $-color-gray-7) !d
 $-statustip-fs: var(--oxy-statustip-fs, $-fs-content) !default; // 字号
 $-statustip-color: var(--oxy-statustip-color, rgba(0, 0, 0, 0.45)) !default; // 文字颜色
 $-statustip-line-height: var(--oxy-statustip-line-height, 36rpx) !default; // 文字行高
-$-statustip-padding: var(--oxy-statustip-padding, 12rpx 20rpx) !default; // 间距
+$-statustip-padding: var(--oxy-statustip-padding, $-spacing-12 $-spacing-20) !default; // 间距
 
 /* card */
 $-card-bg: var(--oxy-card-bg, $-color-white) !default; // 背景色
@@ -858,7 +918,7 @@ $-curtain-content-close-fs: var(--oxy-curtain-content-close-fs, $-fs-big) !defau
 
 /* notify */
 $-notify-text-color: var(--oxy-notify-text-color, $-color-white) !default;
-$-notify-padding: var(--oxy-notify-padding, 20rpx 32rpx) !default;
+$-notify-padding: var(--oxy-notify-padding, $-spacing-20 $-spacing-32) !default;
 $-notify-font-size: var(--oxy-notify-font-size, $-fs-content) !default;
 $-notify-line-height: var(--oxy-notify-line-height, 44rpx) !default;
 $-notify-primary-background: var(--oxy-notify-primary-background, $-color-theme) !default;
@@ -905,7 +965,7 @@ $-swiper-nav-btn-bg-color: var(--oxy-swiper-nav-btn-bg-color, $-font-gray-3) !de
 $-swiper-nav-btn-size: var(--oxy-swiper-nav-btn-size, 48rpx) !default;
 
 /* segmented */
-$-segmented-padding: var(--oxy-segmented-padding, 8rpx) !default; // 分段器padding
+$-segmented-padding: var(--oxy-segmented-padding, $-spacing-8) !default; // 分段器padding
 $-segmented-radius: var(--oxy-segmented-radius, $-radius-sm) !default; // 分段器圆角
 $-segmented-item-bg-color: var(--oxy-segmented-item-bg-color, #eeeeee) !default;
 $-segmented-item-color: var(--oxy-segmented-item-color, rgba(0, 0, 0, 0.85)) !default; // 标题文字颜色
@@ -966,7 +1026,7 @@ $-navbar-arrow-size: var(--oxy-navbar-arrow-size, 48rpx) !default; // navbar左
 $-navbar-desc-font-size: var(--oxy-navbar-desc-font-size, $-fs-content); // navbar 左箭头字体大小
 $-navbar-desc-font-color: var(--oxy-navbar-desc-font-color, $-font-gray-1) !default; // navbar左右两侧字体颜色
 $-navbar-title-font-size: var(--oxy-navbar-title-font-size, 36rpx); // navbar title字体大小
-$-navbar-title-font-weight: var(--oxy-navbar-title-font-weight, 600); // navbar title字重
+$-navbar-title-font-weight: var(--oxy-navbar-title-font-weight, $-fw-semibold); // navbar title字重
 $-navbar-disabled-opacity: var(--oxy-navbar-disabled-opacity, $-opacity-disabled) !default; // navbar左右两侧字体禁用
 $-navbar-hover-color: var(--oxy-navbar-hover-color, #eee) !default; // navbar hover样式
 
@@ -988,27 +1048,31 @@ $-table-fixed-shadow-light: var(--oxy-table-fixed-shadow-light, linear-gradient(
 
 /* sidebar */
 $-sidebar-bg: var(--oxy-sidebar-bg, $-color-gray-1) !default; // 侧边栏背景色
-$-sidebar-width: var(--oxy-sidebar-width, 208rpx) !default; // 侧边栏宽度
+$-sidebar-width: var(--oxy-sidebar-width, 192rpx) !default; // 侧边栏宽度
 $-sidebar-height: var(--oxy-sidebar-height, 100%) !default; // 侧边栏高度
 
 /* sidebar-item */
 $-sidebar-color: var(--oxy-sidebar-color, $-font-gray-1) !default;
-$-sidebar-item-height: var(--oxy-sidebar-item-height, 112rpx) !default;
-$-sidebar-item-line-height: var(--oxy-sidebar-item-line-height, 48rpx) !default;
+$-sidebar-item-height: var(--oxy-sidebar-item-height, 104rpx) !default;
+$-sidebar-item-padding: var(--oxy-sidebar-item-padding, 28rpx) !default;
+$-sidebar-item-line-height: var(--oxy-sidebar-item-line-height, 44rpx) !default;
 $-sidebar-disabled-color: var(--oxy-side-bar-disabled-color, $-font-gray-4) !default;
 $-sidebar-active-color: var(--oxy-sidebar-active-color, $-color-theme) !default; // 激活项字体颜色
 $-sidebar-active-bg: var(--oxy-sidebar-active-bg, $-color-white) !default; // 激活项背景颜色
 $-sidebar-hover-bg: var(--oxy-sidebar-hover-bg, $-color-gray-2) !default; // 激活项点击背景颜色
 $-sidebar-border-radius: var(--oxy-sidebar-border-radius, $-radius-lg) !default;
-$-sidebar-font-size: var(--oxy-sidebar-font-size, $-fs-title) !default;
-$-sidebar-icon-size: var(--oxy-sidebar-icon-size, 40rpx) !default;
+$-sidebar-font-size: var(--oxy-sidebar-font-size, $-fs-content) !default;
+$-sidebar-icon-size: var(--oxy-sidebar-icon-size, 36rpx) !default;
 $-sidebar-active-border-width: var(--oxy-sidebar-active-border-width, 8rpx) !default;
-$-sidebar-active-border-height: var(--oxy-sidebar-active-border-height, 32rpx) !default;
+$-sidebar-active-border-height: var(--oxy-sidebar-active-border-height, 28rpx) !default;
+$-sidebar-transition-duration: var(--oxy-sidebar-transition-duration, $-transition-duration-base) !default;
+$-sidebar-transition-timing-function: var(--oxy-sidebar-transition-timing-function, cubic-bezier(0.645, 0.045, 0.355, 1))
+  !default;
 
 /* fab */
 $-fab-trigger-height: var(--oxy-fab-trigger-height, 112rpx) !default;
 $-fab-trigger-width: var(--oxy-fab-trigger-width, 112rpx) !default;
-$-fab-actions-padding: var(--oxy-actions-padding, 24rpx) !default;
+$-fab-actions-padding: var(--oxy-fab-actions-padding, $-spacing-24) !default;
 $-fab-icon-fs: var(--oxy-fab-icon-fs, 40rpx) !default;
 
 /* count-down */
@@ -1024,42 +1088,23 @@ $-keyboard-key-border-radius: var(--oxy-keyboard-key-border-radius, $-radius-lg)
 $-keyboard-delete-font-size: var(--oxy-keyboard-delete-font-size, 36rpx) !default;
 $-keyboard-key-active-color: var(--oxy-keyboard-key-active-color, $-color-gray-3) !default;
 $-keyboard-button-text-color: var(--oxy-keyboard-button-text-color, $-color-white) !default;
-$-keyboard-button-background: var(--oxy-keyboard--button-background, $-color-theme) !default;
+$-keyboard-button-background: var(--oxy-keyboard-button-background, $-color-theme) !default;
 $-keyboard-button-active-opacity: var(--oxy-keyboard-button-active-opacity, $-opacity-disabled) !default;
 $-keyboard-background: var(--oxy-keyboard-background, $-color-gray-2) !default;
 $-keyboard-title-height: var(--oxy-keyboard-title-height, 68rpx) !default;
 $-keyboard-title-color: var(--oxy-keyboard-title-color, $-color-gray-7) !default;
 $-keyboard-title-font-size: var(--oxy-keyboard-title-font-size, $-fs-title) !default;
-$-keyboard-close-padding: var(--oxy-keyboard-title-font-size, 0 36rpx) !default;
+$-keyboard-close-padding: var(--oxy-keyboard-close-padding, 0 36rpx) !default;
 $-keyboard-close-color: var(--oxy-keyboard-close-color, $-color-theme) !default;
 $-keyboard-close-font-size: var(--oxy-keyboard-close-font-size, $-fs-content) !default;
 $-keyboard-icon-size: var(--oxy-keyboard-icon-size, 44rpx) !default;
 $-keyboard-panel-radius: var(--oxy-keyboard-panel-radius, $-radius-3xl) !default; // 键盘面板圆角
 $-keyboard-car-key-font-size: var(--oxy-keyboard-car-key-font-size, 36rpx) !default; // 车牌键盘字号
 
-/* number-keyboard */
-$-number-keyboard-key-height: var(--oxy-number-keyboard-key-height, 96rpx) !default;
-$-number-keyboard-key-font-size: var(--oxy-number-keyboard-key-font-size, 56rpx) !default;
-$-number-keyboard-key-background: var(--oxy-number-keyboard-key-background, $-color-white) !default;
-$-number-keyboard-key-border-radius: var(--oxy-number-keyboard-key-border-radius, $-radius-lg) !default;
-$-number-keyboard-delete-font-size: var(--oxy-number-keyboard-delete-font-size, 36rpx) !default;
-$-number-keyboard-key-active-color: var(--oxy-number-keyboard-key-active-color, $-color-gray-3) !default;
-$-number-keyboard-button-text-color: var(--oxy-number-keyboard-button-text-color, $-color-white) !default;
-$-number-keyboard-button-background: var(--oxy-number-keyboard--button-background, $-color-theme) !default;
-$-number-keyboard-button-active-opacity: var(--oxy-number-keyboard-button-active-opacity, $-opacity-disabled) !default;
-$-number-keyboard-background: var(--oxy-number-keyboard-background, $-color-gray-2) !default;
-$-number-keyboard-title-height: var(--oxy-number-keyboard-title-height, 68rpx) !default;
-$-number-keyboard-title-color: var(--oxy-number-keyboard-title-color, $-color-gray-7) !default;
-$-number-keyboard-title-font-size: var(--oxy-number-keyboard-title-font-size, $-fs-title) !default;
-$-number-keyboard-close-padding: var(--oxy-number-keyboard-title-font-size, 0 36rpx) !default;
-$-number-keyboard-close-color: var(--oxy-number-keyboard-close-color, $-color-theme) !default;
-$-number-keyboard-close-font-size: var(--oxy-number-keyboard-close-font-size, $-fs-content) !default;
-$-number-keyboard-icon-size: var(--oxy-number-keyboard-icon-size, 44rpx) !default;
-
 /* passwod-input */
 $-password-input-height: var(--oxy-password-input-height, 100rpx);
 $-password-input-margin: var(--oxy-password-input-margin, 32rpx);
-$-password-input-font-size: var(--oxy-password-input-margin, 40rpx);
+$-password-input-font-size: var(--oxy-password-input-font-size, 40rpx) !default;
 $-password-input-radius: var(--oxy-password-input-radius, $-radius-md);
 $-password-input-background: var(--oxy-password-input-background, #fff);
 $-password-input-info-color: var(--oxy-password-input-info-color, $-color-info);
@@ -1085,7 +1130,7 @@ $-backtop-icon-size: var(--oxy-backtop-icon-size, 40rpx) !default;
 $-backtop-square-radius: var(--oxy-backtop-square-radius, $-radius-sm) !default;
 
 /* index-bar */
-$-index-bar-index-font-size: var(--oxy-index-bar-index-font-size, $-fs-aid) !default;
+$-index-bar-index-font-size: var(--oxy-index-bar-index-font-size, $-fs-secondary) !default;
 
 /* text */
 $-text-info-color: var(--oxy-text-info-color, $-color-info) !default;
@@ -1201,8 +1246,8 @@ $-date-strip-grid-square-padding-x: var(--oxy-date-strip-grid-square-padding-x,
 $-date-strip-grid-square-padding-y: var(--oxy-date-strip-grid-square-padding-y, 12rpx);
 $-date-strip-grid-circle-radius: var(--oxy-date-strip-grid-circle-radius, $-radius-circle);
 /* footer*/
-$--footer-padding: var(--oxy-footer-padding, 24rpx); // footer 内边距
-$--footer-bg: var(--oxy-footer-bg, $-color-white); // footer 背景色
+$-footer-padding: var(--oxy-footer-padding, $-spacing-24) !default; // footer 内边距
+$-footer-bg: var(--oxy-footer-bg, $-color-white) !default; // footer 背景色
 
 /* long-press-menu */
 $-long-press-menu-bg: var(--oxy-long-press-menu-bg, rgba(0, 0, 0, 0.8)) !default; // 背景色
@@ -1211,7 +1256,7 @@ $-long-press-menu-radius: var(--oxy-long-press-menu-radius, $-radius-lg) !defaul
 $-long-press-menu-color: var(--oxy-long-press-menu-color, $-color-white) !default; // 文字颜色
 $-long-press-menu-fs: var(--oxy-long-press-menu-fs, $-fs-content) !default; // 字号
 $-long-press-menu-arrow-size: var(--oxy-long-press-menu-arrow-size, 10rpx) !default; // 箭头大小
-$-long-press-menu-item-padding: var(--oxy-long-press-menu-padding, 24rpx 32rpx) !default; // 间距
+$-long-press-menu-item-padding: var(--oxy-long-press-menu-padding, $-spacing-24 $-spacing-32) !default; // 间距
 $-long-press-menu-z-index: var(--oxy-long-press-menu-z-index, 999) !default;
 $-long-press-menu-active-bg: var(--oxy-long-press-menu-active-bg, rgba(0, 0, 0, 0.05)) !default; // 触发态背景色
 $-long-press-menu-divider-color: var(--oxy-long-press-menu-divider-color, rgba(255, 255, 255, 0.2)) !default; // 分割线颜色

package/components/common/util.ts

@@ -180,6 +180,31 @@ export function unitConvertWithDefault(value: number | string | null | undefined
   return unitConvert(withDefaultUnit(value, defaultUnit), base)
 }
 
+/**
+ * 将 px 数值转换为 rpx 数值。
+ *
+ * 优先级：
+ * - 1) 优先使用 `uni.upx2px(100)` 反推，确保与平台运行时换算一致
+ * - 2) 回退到 `windowWidth` 按 `750` 基准换算
+ * - 3) 仍不可用时返回原值，避免使用固定倍数造成系统性偏差
+ *
+ * @param pxValue px 语义数值。
+ * @returns rpx 语义数值。
+ */
+export function convertPxToRpx(pxValue: number) {
+  const pxPer100Rpx = uni.upx2px(100)
+  if (pxPer100Rpx > 0) {
+    return (pxValue / pxPer100Rpx) * 100
+  }
+
+  const { windowWidth = 0 } = uni.getSystemInfoSync()
+  if (windowWidth > 0) {
+    return (pxValue * 750) / windowWidth
+  }
+
+  return pxValue
+}
+
 /**
  * 将长度值解析为样式字符串，仅对 `%` 做屏宽换算。
  *