@tendaui/components 1.2.3 → 1.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tendaui/components",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "TendaUI React Components - Source code",
   "main": "index.ts",
   "module": "index.ts",
@@ -51,5 +51,5 @@
     "**/style/css.js",
     "**/style/all.js"
   ],
-  "gitHead": "338277cdfb9306a0bbee446d15d6c340c4f085d4"
+  "gitHead": "bdc34c68fc499513c8403e5645531f277d1c0dda"
 }

package/styles/_global.scss

@@ -1,8 +1,9 @@
-@import './_vars.scss';
+@use "./_vars.scss" as *;
+@use './_vars.scss' as *;
 
-@import './mixins/_scrollbar.scss';
+@use './mixins/_scrollbar.scss' as *;
 
-// 响应式断点 后面支持紧凑模式可以迁移过去
+// 响应式断�?后面支持紧凑模式可以迁移过去
 :root {
   --td-screen-xs: #{$screen-xs};
   --td-screen-sm: #{$screen-sm};

package/styles/_vars.scss

@@ -79,15 +79,15 @@ $warning-color: var(--td-warning-color); // 色彩-功能-警告
 $error-color: var(--td-error-color); // 色彩-功能-失败
 $success-color: var(--td-success-color); // 色彩-功能-成功
 
-// 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
-$brand-color-hover: var(--td-brand-color-hover); // hover态
+// 基础颜色的扩充用于 hover / 聚焦 / 禁用 / 点击 等状态
+$brand-color-hover: var(--td-brand-color-hover); // hover
 $brand-color-focus: var(--td-brand-color-focus); // focus态，包括鼠标和键盘
-$brand-color-active: var(--td-brand-color-active); // 点击态
-$brand-color-disabled: var(--td-brand-color-disabled); // 禁用态
-$brand-color-light: var(--td-brand-color-light); // 浅色的选中态
+$brand-color-active: var(--td-brand-color-active); // 点击
+$brand-color-disabled: var(--td-brand-color-disabled); // 禁用
+$brand-color-light: var(--td-brand-color-light); // 浅色的选中
 $brand-color-light-hover: var(--td-brand-color-light-hover);
 
-// 警告色扩展
+// 警告色扩充
 $warning-color-hover: var(--td-warning-color-hover);
 $warning-color-focus: var(--td-warning-color-focus);
 $warning-color-active: var(--td-warning-color-active);
@@ -95,7 +95,7 @@ $warning-color-disabled: var(--td-warning-color-disabled);
 $warning-color-light: var(--td-warning-color-light);
 $warning-color-light-hover: var(--td-warning-color-light-hover);
 
-// 失败/错误色扩展
+// 失败/错误色扩充
 $error-color-hover: var(--td-error-color-hover);
 $error-color-focus: var(--td-error-color-focus);
 $error-color-active: var(--td-error-color-active);
@@ -103,7 +103,7 @@ $error-color-disabled: var(--td-error-color-disabled);
 $error-color-light: var(--td-error-color-light);
 $error-color-light-hover: var(--td-error-color-light-hover);
 
-// 成功色扩展
+// 成功色扩充
 $success-color-hover: var(--td-success-color-hover);
 $success-color-focus: var(--td-success-color-focus);
 $success-color-active: var(--td-success-color-active);
@@ -116,7 +116,7 @@ $mask-active: var(--td-mask-active); // 遮罩-弹出
 $mask-disabled: var(--td-mask-disabled); // 遮罩-禁用
 $mask-bg: var(--td-mask-background); // 二维码遮罩
 
-// 背景色
+// 背景颜色
 $bg-color-page: var(--td-bg-color-page); // 色彩 - page
 $bg-color-container: var(--td-bg-color-container); // 色彩 - 容器
 $bg-color-container-hover: var(--td-bg-color-container-hover); // 色彩 - 容器 - hover
@@ -138,13 +138,13 @@ $bg-color-secondarycomponent-active: var(--td-bg-color-secondarycomponent-active
 $bg-color-component-disabled: var(--td-bg-color-component-disabled); // 色彩 - 组件 - disabled
 
 // TODO: 考虑是否在组件内部做判断，不增加额外变量
-// 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
+// 特殊组件背景色，目前只用button、input 组件多主题场景，浅色主题下固定为白色，深色主题下transparent 适配背景颜色
 $bg-color-specialcomponent: var(--td-bg-color-specialcomponent);
 
 // 文本颜色
 $text-color-primary: var(--td-text-color-primary); // 色彩-文字-主要
 $text-color-secondary: var(--td-text-color-secondary); // 色彩-文字-次要
-$text-color-placeholder: var(--td-text-color-placeholder); // 色彩-文字-占位符/说明
+$text-color-placeholder: var(--td-text-color-placeholder); // 色彩-文字-占位说明
 $text-color-disabled: var(--td-text-color-disabled); // 色彩-文字-禁用
 $text-color-anti: var(--td-text-color-anti); // 色彩-文字-反色
 $text-color-brand: var(--td-text-color-brand); // 色彩-文字-品牌
@@ -159,14 +159,14 @@ $component-border: var(--td-component-border);
 
 // shadow
 
-// 基础/下层 投影 hover 使用的组件包括：表格 /
+// 基础/下层 投影 hover 使用的组件包括：表格
 $shadow-1: var(--td-shadow-1);
-// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
+// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认 / 选择
 $shadow-2: var(--td-shadow-2);
-// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
+// 上层投影（警告/弹窗）使用的组件包括：全局提示 / 消息通知
 $shadow-3: var(--td-shadow-3);
 
-// 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
+// 内投影用于弹窗类组件（气泡确认 / 全局提示 / 消息通知）的内描影
 $shadow-inset-top: var(--td-shadow-inset-top);
 $shadow-inset-right: var(--td-shadow-inset-right);
 $shadow-inset-bottom: var(--td-shadow-inset-bottom);
@@ -207,7 +207,7 @@ $comp-size-xxxl: var(--td-comp-size-xxxl);
 $comp-size-xxxxl: var(--td-comp-size-xxxxl);
 $comp-size-xxxxxl: var(--td-comp-size-xxxxxl);
 
-// popup 弹出层整体边距 token
+// popup 弹出层整体边距token
 $pop-padding-s: var(--td-pop-padding-s);
 $pop-padding-m: var(--td-pop-padding-m);
 $pop-padding-l: var(--td-pop-padding-l);
@@ -252,12 +252,12 @@ $spacer-1: $spacer; // 间距-8
 $spacer-2: $spacer * 2; // 间距-16
 $spacer-3: $spacer * 3; // 间距-24
 $spacer-4: $spacer * 4; // 间距-32
-$spacer-5: $spacer * 5; // 间距-大-40
-$spacer-6: $spacer * 6; // 间距-大-48
-$spacer-7: $spacer * 7; // 间距-大-48
-$spacer-8: $spacer * 8; // 间距-大-48
-$spacer-9: $spacer * 9; // 间距-大-48
-$spacer-10: $spacer * 10; // 间距-大-80
+$spacer-5: $spacer * 5; // 间距-40
+$spacer-6: $spacer * 6; // 间距-48
+$spacer-7: $spacer * 7; // 间距-48
+$spacer-8: $spacer * 8; // 间距-48
+$spacer-9: $spacer * 9; // 间距-48
+$spacer-10: $spacer * 10; // 间距-80
 
 $text-line-height-s: var(--td-line-height-body-small);
 $text-line-height-base: var(--td-line-height-body-medium);
@@ -302,7 +302,7 @@ $border-radius-medium: var(--td-radius-medium); // 圆角-6
 $border-radius-large: var(--td-radius-large); // 圆角-9
 $border-radius-extraLarge: var(--td-radius-extraLarge); // 圆角-12
 $border-radius-round: var(--td-radius-round); // 圆角-999
-$border-radius-circle: var(--td-radius-circle); // 圆角-全圆角
+$border-radius-circle: var(--td-radius-circle); // 圆角-全圆
 
 // 表单相关
 $form-height: 30px;

package/styles/components/alert/_index.scss

@@ -1,14 +1,14 @@
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
-@import '../../_vars.scss';
+@use "../../_vars.scss" as *;
 
-@import './_vars.scss';
+@use "./_vars.scss" as *;
 
-@import '../../mixins/_reset.scss';
+@use "../../mixins/_reset.scss" as reset;
 
 /* Alert */
 .#{$prefix}-alert {
-  @include reset;
+  @include reset.reset;
 
   display: flex;
   align-items: flex-start;

package/styles/components/alert/_vars.scss

@@ -1,3 +1,5 @@
+@use "../../_vars.scss" as *;
+
 $alert-success-bg-color: $success-color-focus;
 $alert-info-bg-color: $brand-color-focus;
 $alert-warning-bg-color: $warning-color-focus;
@@ -34,6 +36,6 @@ $alert-padding: $comp-paddingTB-l $comp-paddingLR-xl;
 $alert-operation-padding: 0 $comp-paddingLR-s;
 $alert-margin-left: $comp-margin-s;
 $alert-close-margin-left: $comp-margin-l;
-$alert-close-padding: calc(($alert-line-height - $alert-close-size) / 2 ) 0;
+$alert-close-padding: calc(($alert-line-height - $alert-close-size) / 2) 0;
 $alert-description-margin-top: $comp-margin-s;
 $alert-collapse-margin-top: $comp-margin-s;

package/styles/components/badge/_index.scss

@@ -1,10 +1,11 @@
+@use "../../_vars.scss" as *;
 // 组件允许单个组件打包，因此默认引入公共基础样式.#{$prefix}
 
-@import '../../_vars.scss';
+@use '../../_vars.scss' as *;
 
-@import './_vars.scss';
+@use './_vars.scss' as *;
 
-@import '../../mixins/_reset.scss';
+@use '../../mixins/_reset.scss' as *;
 
 // Badge
 .#{$prefix}-badge {

package/styles/components/badge/_vars.scss

@@ -1,12 +1,13 @@
+@use "../../_vars.scss" as *;
 $badge-text-color: $text-color-anti;
 $badge-color: $error-color;
 
 // 尺寸
 // 默认尺寸 circle/round 高度
 $badge-height: $comp-size-xxs;
-// 小尺寸 circle/round 高度
+// 小尺寸circle/round 高度
 $badge-height-s: $comp-size-xxxs;
-// dot 宽/高
+// dot 大小
 $badge-dot-size: 6px;
 // $badge-status-size: 6px;
 $badge-min-width: 8px;

package/styles/components/button/_index.scss

@@ -1,11 +1,11 @@
 @use "sass:map";
-@import "../../_vars.scss";
+@use "../../_vars.scss" as *;
 
-@import "./_vars.scss";
+@use "./_vars.scss" as *;
 
-@import "./_mixins.scss";
+@use "./_mixins.scss" as *;
 
-@import "../../mixins/_reset.scss";
+@use "../../mixins/_reset.scss" as *;
 
 @function btn-color($theme, $state: default) {
   $theme-map: map.get($btn-colors, $theme);
@@ -463,7 +463,7 @@
 }
 
 .#{$prefix}-button--ghost {
-  --ripple-color: @gray-color-10; // 幽灵按钮相当于按钮深色模式，因此固定为深色模式 token
+  --ripple-color: @gray-color-10; // 幽灵按钮相当于按钮深色模式，因此固定为深色模�?token
 }
 
 .#{$prefix}-button:not(.#{$prefix}-is-disabled):not(.#{$prefix}-button--ghost) {

package/styles/components/button/_mixins.scss

@@ -1,4 +1,5 @@
-@import './_vars.scss';
+@use "../../_vars.scss" as *;
+@use './_vars.scss' as *;
 
 @mixin button() {
   position: relative;

package/styles/components/button/_vars.scss

@@ -1,3 +1,4 @@
+@use "../../_vars.scss" as *;
 // 尺寸
 $btn-height-s: $comp-size-xs;
 $btn-height-default: $comp-size-m;

package/styles/components/checkbox/_index.scss

@@ -1,16 +1,16 @@
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
-@import "../../_vars.scss";
+@use "../../_vars.scss" as *;
 
-@import "./_var.scss";
+@use "./_var.scss" as *;
 
-@import "./_mixin.scss";
+@use "./_mixin.scss" as *;
 
-@import "../../mixins/_layout.scss";
+@use "../../mixins/_layout.scss" as *;
 
-@import "../../mixins/_reset.scss";
+@use "../../mixins/_reset.scss" as *;
 
-@import "../../mixins/_focus.scss";
+@use "../../mixins/_focus.scss" as *;
 
 // <name> 替换为组件名
 .#{$checkbox-cls}-group {

package/styles/components/checkbox/_var.scss

@@ -1,17 +1,18 @@
+@use "../../_vars.scss" as *;
 // 组件变量
-// 名称可按如下规则定义：
+// 名称可按如下规则定义//
 // <component>-[type]-[attrtype]-<attr>-[status]
 
-// component:组件名，如button，
-// type: 组件类型，如 button 的次要按钮（line）
+// component:组件名，如button//
+// type: 组件类型，如 button 的次要按钮（line//
 // attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
-// attr: 属性名称，如color、height、radius等
-// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
+// attr: 属性名称，如color、height、radius//
+// status: 表示组件状态或尺寸，如 hover、disabled、s、l
 
 // 如：$button-line-bg-color-hover
 // 如：$button-line-height-s
 
-$checkbox-cls: '#{$prefix}-checkbox';
+$checkbox-cls: "#{$prefix}-checkbox";
 
 // 颜色
 $checkbox-border-color: $border-level-2-color;
@@ -39,9 +40,7 @@ $checkbox-margin-right: $comp-margin-s;
 
 $checkbox-check-width: 5px;
 $checkbox-check-height: 9px;
-$checkbox-check-size: (
-  ($checkbox-check-width + $checkbox-check-height) / sqrt(2)
-);
+$checkbox-check-size: (($checkbox-check-width + $checkbox-check-height) / sqrt(2));
 $checkbox-check-left: 3px;
 
 $checkbox-indeterminate-width: 16px;
@@ -54,7 +53,7 @@ $checkbox-font: $font-body-medium;
 // padding
 $checkbox-input-label-spacer: $spacer;
 
-// 组合复选框margin
+// 组合复选框间距
 $checkbox-group-gap: $spacer-2;
 // 单个复选框margin
 $checkbox-margin: inherit;

package/styles/components/color-picker/_index.scss

@@ -1,12 +1,12 @@
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
-@import "../../_vars.scss";
+@use "../../_vars.scss" as *;
 
-@import "./_vars.scss";
+@use "./_vars.scss" as *;
 
-@import "./_mixins.scss";
+@use "./_mixins.scss" as *;
 
-@import "../../mixins/_reset.scss";
+@use "../../mixins/_reset.scss" as *;
 
 .#{$prefix}-color-picker__panel {
   padding: 0;
@@ -578,7 +578,7 @@
   }
 }
 
-// 覆盖select-option 默认样式，使其更紧凑点
+// 覆盖select-option 默认样式，使其更紧凑
 .#{$prefix}-color-picker__select-options {
   > .#{$prefix}-popup__content {
     box-shadow: $shadow-1, $shadow-inset-top, $shadow-inset-right, $shadow-inset-bottom, $shadow-inset-left;

package/styles/components/color-picker/_vars.scss

@@ -1,13 +1,9 @@
+@use "../../_vars.scss" as *;
 // 组件变量
-// 名称可按如下规则定义：
-// <component>-[type]-[attrtype]-<attr>-[status]
-
-// component:组件名，如button，
-// type: 组件类型，如 button 的次要按钮（line）
-// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
-// attr: 属性名称，如color、height、radius等
-// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
+// 名称可按如下规则定义// <component>-[type]-[attrtype]-<attr>-[status]
 
+// component:组件名，如button// type: 组件类型，如 button 的次要按钮（line// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
+// attr: 属性名称，如color、height、radius// status: 表示组件状态或尺寸，如 hover、disabled、s、l
 // 如：$button-line-bg-color-hover
 // 如：$button-line-height-s
 
@@ -62,17 +58,16 @@ $color-picker-swatch-column-gap: calc(
     ) / 9
 );
 $color-picker-swatch-wrap-margin-left: ($color-picker-swatch-padding + $color-picker-swatch-border-size) * -1;
-// 右边往外伸出一点，让滚动条居外侧
+// 右边往外伸出一点，让滚动条居外
 $color-picker-swatch-wrap-margin-right: $color-picker-swatch-wrap-margin-left - 10px;
 $color-picker-swatch-wrap-margin: 0 $color-picker-swatch-wrap-margin-right 0 $color-picker-swatch-wrap-margin-left;
-$color-picker-swatch-max-rows: 4; // 最大显示行数
-
+$color-picker-swatch-max-rows: 4; // 最大显示行
 // shadow
 $color-picker-panel-shadow: $shadow-2-inset;
 $color-picker-thumbs-shadow: $shadow-1;
 $colot-picker-swatch-item-color-inset-shadow: $shadow-inset;
 
-// 最大高度 = 行数 * (itemHeight + itemMarginTop)m;
+// 最大高度= 行数 * (itemHeight + itemMarginTop)m;
 $color-picker-swatch-rows-max-height: calc(
   $color-picker-swatch-max-rows * calc($color-picker-swatch-height + $color-picker-swatch-row-gap)
 );

package/styles/components/dialog/_animate.scss

@@ -1,8 +1,8 @@
-@import '../../_vars.scss';
-
+@use "../../_vars.scss" as *;
+@use "./_vars.scss" as *;
 .#{$prefix}-dialog-zoom {
   @keyframes tDialogZoomIn {
-    // 解决弹窗中带有动效的Icon不展示（如loading），初始scale为1可以展示正常
+    // 解决弹窗中带有动效的Icon不展示（如loading），初始scale可以展示正常
     0% {
       opacity: 0;
       transform: scale(0.01);
@@ -83,8 +83,6 @@
     animation-name: tDialogZoomOut;
     @include animation-active;
   }
-
-
 }
 
 .#{$prefix}-dialog-fade-enter,

package/styles/components/dialog/_index.scss

@@ -1,16 +1,17 @@
+@use "../../_vars.scss" as *;
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
-@import '../../_vars.scss';
+@use '../../_vars.scss' as *;
 
-@import './_vars.scss';
+@use './_vars.scss' as *;
 
-@import './_animate.scss';
+@use './_animate.scss' as *;
 
-@import './_mixins.scss';
+@use './_mixins.scss' as *;
 
-@import '../../mixins/_reset.scss';
+@use '../../mixins/_reset.scss' as *;
 
-@import '../../mixins/_scrollbar.scss';
+@use '../../mixins/_scrollbar.scss' as *;
 
 // <name> 替换为组件名
 .#{$prefix}-dialog {
@@ -201,7 +202,7 @@
   width: 100%;
   height: 100%;
 
-  // modeless 点击穿透 即可以操作背景后的元素
+  // modeless 点击穿�?即可以操作背景后的元�?
   &.#{$prefix}-dialog__ctx--modeless {
     pointer-events: none;
   }
@@ -237,7 +238,7 @@
   &.#{$prefix}-not-display {
     display: none;
   }
-  // 遮罩层
+  // 遮罩�?
   .#{$prefix}-dialog__mask {
     position: fixed;
     top: 0;
@@ -248,7 +249,7 @@
     background: $dialog-mask-bg-color;
     pointer-events: auto;
   }
-  // wrap 滚动的显示层 固定为页面窗口大小
+  // wrap 滚动的显示层 固定为页面窗口大�?
   .#{$prefix}-dialog__wrap {
     position: fixed;
     top: 0;
@@ -259,22 +260,22 @@
     overflow: auto;
     @include scrollbar(8px, 2px);
   }
-  // 定位层 用于实现居中 或者距离顶部 定位
+  // 定位�?用于实现居中 或者距离顶�?定位
   .#{$prefix}-dialog__position {
-    // 因为内容会超出 使用flex布局
+    // 因为内容会超�?使用flex布局
     display: flex;
     justify-content: center;
     min-height: 100%;
     width: 100%;
     // 通过修改position为absolute进行拖拽定位
     position: relative;
-    // 设置最小距离顶部底部距离
+    // 设置最小距离顶部底部距�?
     padding: 48px 0;
     box-sizing: border-box;
     // 居中和距顶部布局
     &.#{$prefix}-dialog--top {
       align-items: flex-start;
-      // 这里top api实现 更改padding 因为子元素拖拽定位 如果使用子元素margin 拖拽时需要计算margin 比较麻烦
+      // 这里top api实现 更改padding 因为子元素拖拽定�?如果使用子元素margin 拖拽时需要计算margin 比较麻烦
       padding-top: $dialog-top-position-top;
     }
     // 垂直居中布局
@@ -284,7 +285,7 @@
   }
 
   .#{$prefix}-dialog__position_fullscreen {
-    // 因为内容会超出 使用flex布局
+    // 因为内容会超�?使用flex布局
     display: flex;
     justify-content: center;
     min-height: 100%;

package/styles/components/dialog/_vars.scss

@@ -1,3 +1,4 @@
+@use "../../_vars.scss" as *;
 $dialog-border-color: transparent;
 $dialog-bg-color: $bg-color-container;
 $dialog-header-text-color: $text-color-primary;
@@ -50,7 +51,7 @@ $dialog-close-border-radius: $border-radius-medium;
 // 位置
 $dialog-close-position-top: $spacer-3;
 $dialog-close-position-right: $spacer-3;
-// 此处不能使用20% 因为定位是paddingTop 所以20% 会根据屏幕宽度
+// 此处不能使用 20% 因为定位是 paddingTop，所以 20% 会根据屏幕宽度计算
 $dialog-top-position-top: 20vh;
 
 // 动画

package/styles/components/drawer/_index.scss

@@ -1,8 +1,8 @@
-@import "../../_vars.scss";
-@import "./_var.scss";
-@import "./_mixins.scss";
-@import "../../mixins/_reset.scss";
-@import "../../utilities/_tips.scss";
+@use "../../_vars.scss" as *;
+@use "./_var.scss" as *;
+@use "./_mixins.scss" as *;
+@use "../../mixins/_reset.scss" as *;
+@use "../../utilities/_tips.scss" as *;
 
 .#{$prefix}-drawer {
   $root: ".#{$prefix}-drawer";

package/styles/components/drawer/_var.scss

@@ -1,6 +1,8 @@
 /**
  * 颜色
  */
+@use "../../_vars.scss" as *;
+
 $dialog-box-shadow: $shadow-2;
 $drawer-bg-color: $bg-color-container;
 $drawer-border-color: $border-level-1-color;

package/styles/components/fireworks/_index.scss

@@ -1,5 +1,5 @@
-@import "../../_vars.scss";
-@import "./_vars.scss";
+@use "../../_vars.scss" as *;
+@use "./_vars.scss" as *;
 
 .#{$prefix}-fireworks {
   position: relative;

package/styles/components/fireworks/_vars.scss

@@ -1,3 +1,4 @@
+@use "../../_vars.scss" as *;
 $fireworks-min-height: 260px !default;
 $fireworks-spark-width: 2px !default;
 $fireworks-spark-blur: 6px !default;

package/styles/components/form/_index.scss

@@ -1,12 +1,13 @@
+@use "../../_vars.scss" as *;
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
-@import '../../_vars.scss';
+@use '../../_vars.scss' as *;
 
-@import './_vars.scss';
+@use './_vars.scss' as *;
 
-@import './_mixins.scss';
+@use './_mixins.scss' as *;
 
-@import '../../mixins/_reset.scss';
+@use '../../mixins/_reset.scss' as *;
 
 .#{$prefix}-form {
   @include reset;
@@ -24,12 +25,12 @@
   &__item {
     margin-bottom: $form-item-margin-bottom;
 
-    // 文档流撑开内容补足剩余的 4px
+    // 文档流撑开内容补足剩余�?4px
     &.#{$prefix}-form__item-with-help {
       margin-bottom: $form-item-with-help-margin-bottom;
     }
 
-    // 绝对定位布局需要重设底部间距
+    // 绝对定位布局需要重设底部间�?
     &.#{$prefix}-form__item-with-extra {
       margin-bottom: $form-item-margin-bottom;
     }
@@ -97,7 +98,7 @@
       min-height: $form-item-control-height;
     }
 
-    // formItem 嵌套情况无间距
+    // formItem 嵌套情况无间�?
     .#{$prefix}-form__item {
       margin-bottom: 0;
       margin-right: $form-item-margin-right-inline;
@@ -110,7 +111,7 @@
   }
 
   &__controls.#{$prefix}-form--success-border {
-    // 输入框状态
+    // 输入框状�?
     @include input-status(success);
   }
 
@@ -169,6 +170,6 @@
   white-space: nowrap;
 }
 
-// 输入框状态
+// 输入框状�?
 @include input-status(warning);
 @include input-status(error);