@para-ui/core 3.0.86 → 4.0.0-beta

package/Styles/scrollbar.scss

@@ -2,7 +2,7 @@
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
-  background-color: $B8; // 背景色
+  background-color: $A2; // 背景色
 }
 
 // 滚动条滑槽样式
@@ -12,28 +12,28 @@
 
 // 滚动条样式
 ::-webkit-scrollbar-thumb {
-  background: $D3;
+  background: $T3;
   border-radius: 6px;
 }
 
 // 边角
 ::-webkit-scrollbar-corner {
-  background: $Z9;
+  background: $A2;
 }
 
 // 鼠标移入上去
 ::-webkit-scrollbar-thumb:hover {
-  background: $B6;
+  background: $A1;
 }
 
 // 鼠标点击
 ::-webkit-scrollbar-thumb:active {
-  background: $B6;
+  background: $A1;
 }
 
 // 浏览器失焦的样式
 ::-webkit-scrollbar-thumb:window-inactive {
-  background-color: $D3;
+  background-color: $T3;
 }
 
 .#{$prefixCls}-scrollbar-small {
@@ -62,7 +62,7 @@
     ::-webkit-scrollbar {
       width: 4px;
       height: 4px;
-      background-color: $B7; // 背景色
+      background-color: $T2; // 背景色
     }
 
     // 滚动条滑槽样式
@@ -73,27 +73,27 @@
     // 滚动条样式
     ::-webkit-scrollbar-thumb {
       border-radius: 4px;
-      background: $B9;
+      background: $A1;
     }
 
     // 边角
     ::-webkit-scrollbar-corner {
-      background: $Z10;
+      background: $T2;
     }
 
     // 鼠标移入上去
     ::-webkit-scrollbar-thumb:hover {
-      background: $B6;
+      background: $T3;
     }
 
     // 鼠标点击
     ::-webkit-scrollbar-thumb:active {
-      background: $B6;
+      background: $T3;
     }
 
     // 浏览器失焦的样式
     ::-webkit-scrollbar-thumb:window-inactive {
-      background-color: $B9;
+      background-color: $A1;
     }
   }
 }
@@ -124,7 +124,7 @@
     ::-webkit-scrollbar {
       width: 6px;
       height: 6px;
-      background-color: $B7; // 背景色
+      background-color: $T2; // 背景色
     }
 
     // 滚动条滑槽样式
@@ -135,27 +135,27 @@
     // 滚动条样式
     ::-webkit-scrollbar-thumb {
       border-radius: 6px;
-      background: $B9;
+      background: $A1;
     }
 
     // 边角
     ::-webkit-scrollbar-corner {
-      background: $Z10;
+      background: $T2;
     }
 
     // 鼠标移入上去
     ::-webkit-scrollbar-thumb:hover {
-      background: $B6;
+      background: $T3;
     }
 
     // 鼠标点击
     ::-webkit-scrollbar-thumb:active {
-      background: $B6;
+      background: $T3;
     }
 
     // 浏览器失焦的样式
     ::-webkit-scrollbar-thumb:window-inactive {
-      background-color: $B9;
+      background-color: $A1;
     }
   }
 }
@@ -186,7 +186,7 @@
     ::-webkit-scrollbar {
       width: 8px;
       height: 8px;
-      background-color: $B7; // 背景色
+      background-color: $T2; // 背景色
     }
 
     // 滚动条滑槽样式
@@ -197,27 +197,27 @@
     // 滚动条样式
     ::-webkit-scrollbar-thumb {
       border-radius: 8px;
-      background: $B9;
+      background: $A1;
     }
 
     // 边角
     ::-webkit-scrollbar-corner {
-      background: $Z10;
+      background: $T2;
     }
 
     // 鼠标移入上去
     ::-webkit-scrollbar-thumb:hover {
-      background: $B6;
+      background: $T3;
     }
 
     // 鼠标点击
     ::-webkit-scrollbar-thumb:active {
-      background: $B6;
+      background: $T3;
     }
 
     // 浏览器失焦的样式
     ::-webkit-scrollbar-thumb:window-inactive {
-      background-color: $B9;
+      background-color: $A1;
     }
   }
 }

package/Styles/theme.scss

@@ -1,74 +1,121 @@
 /**
-* @author Hanz
-* @date 2021/10/20 下午2:08
-* @description color
+* @author linhd
+* @date 2023/4/11 14:16
+* @description 最新色卡
 */
+
 // 组件库前缀
-$prefixCls: 'paraui-v3';
+$prefixCls: 'paraui-v4';
 // rc组件前缀
 $rcPrefixCls: 'component';
 
-//导航&主题色
-$A1: rgba(28, 41, 60, 1);
-$A2: rgba(34, 62, 103, 1);
-$A3: linear-gradient(180deg, rgba(241, 241, 244, 1), rgba(243, 243, 243, 1));
-$A4: rgba(255, 255, 255, 0.6);
-$A5: rgba(54, 102, 214, 1);
-//辅助色
-$B1: linear-gradient(90deg, rgba(61, 102, 248, 1), rgba(119, 147, 249, 1) 74%, rgba(216, 223, 250, 1));
-$B2: rgba(54, 102, 214, 0.8);
-$B3: rgba(54, 102, 214, 0.4);
-$B4: rgba(54, 102, 214, 0.2);
-$B5: rgba(54, 102, 214, 0.05);
-$B6: rgba(171, 176, 185, 0.4);
-$B7: rgba(171, 176, 185, 0.2);
-$B8: rgba(171, 176, 185, 0.12);
-$B9: rgba(248, 249, 251, 0.8);
-$B10: rgba(255, 255, 255, 1);
-$B11: rgba(243, 246, 252, 1);
-$B12: rgba(254, 249, 245, 1);
-$B13: rgba(253, 246, 245, 1);
-$B14: rgba(245, 251, 242, 1);
-//状态色
-$C1: rgba(235, 96, 84, 1);
-$C2: rgba(235, 96, 84, 0.05);
-$C3: rgba(83, 195, 27, 1);
-$C4: rgba(83, 195, 27, 0.05);
-$C5: rgba(255, 161, 80, 1);
-$C6: rgba(255, 161, 80, 0.05);
-$C7: rgba(235, 96, 84, 0.8);
-//文字色
-$D1: rgba(46, 55, 67, 1);
-$D2: rgba(46, 55, 67, 0.7);
-$D3: rgba(46, 55, 67, 0.4);
-//字体
+// 字体
 $font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;
 $large: 18px;
 $medium: 16px;
 $small: 14px;
 $smallest: 12px;
 $normal: 400;
+$medium: 500;
 $bold: 700;
-$light: 300;
-// 实色
-$Z1: rgba(248, 249, 251, 1);
-$Z2: rgba(237, 241, 249, 1);
-$Z3: rgba(227, 234, 247, 1);
-$Z4: rgba(245, 246, 247, 1);
-$Z5: rgba(243, 246, 252, 1);
-$Z6: rgba(253, 246, 245, 1);
-$Z7: rgba(245, 251, 242, 1);
-$Z8: rgba(254, 249, 245, 1);
-$Z9: rgba(236, 238, 240, 1);
-$Z10: rgba(79, 89, 105, 1);
-$Z11: rgba(249, 250, 251, 1);
-
-//阴影
-$boxShadow: 0px 2px 8px 0px rgba(171, 176, 185, 0.40);
-$boxShadowLeft: inset -10px 0 10px -8px rgba(0, 0, 0, 0.1); // 表格固定列
-$boxShadowRight: inset 10px 0 10px -8px rgba(0, 0, 0, 0.1); // 表格固定列
+
+// 阴影
+$boxShadow: 0px 2px 8px 0px rgba(234, 236, 241, 1);
+$boxShadowLeft: inset -10px 0 10px -8px rgba(234, 236, 241, 1); // 表格固定列
+$boxShadowRight: inset 10px 0 10px -8px rgba(234, 236, 241, 1); // 表格固定列
+$radius-sm: 2px;
 $radius: 4px;
+$radius-lg: 8px;
 
-//全局弹窗index,往body里面插入的,比如toolTip,popover这类
+// 全局弹窗index,往body里面插入的,比如toolTip,popover这类
 $ZIndexBody: 1500;
 
+// 下拉 浮层 最大高
+$dropdownMaxHeight: 320px;
+
+// 下拉浮层每项内容的高度
+$dropdownItemHeight: 30px;
+
+// -------- UI提供的色卡--------//
+// 主题色
+$P1: rgba(46, 101, 230, 1); // 主题蓝
+$PT8: rgba(87, 131, 235, 1); // (80%)Hover
+$PT2: rgba(213, 224, 250, 1); // (20%)黛色分割线
+$PT05: rgba(240, 245, 255, 1); // (5%)背景
+$P2: rgba(46, 101, 230, 0.1); // (15%)背景
+
+// 文字色
+$T1: rgba(29, 33, 38, 1); // 一级文案
+$T2: rgba(92, 101, 115, 1); // 二级文案
+$T3: rgba(161, 168, 179, 1); // 三级文案
+
+// 辅助色
+$A1: rgba(212, 218, 227, 1); // 描边、分割线
+$A2: rgba(234, 236, 241, 1); // 分割线
+$A3: rgba(247, 248, 250, 1); // 背景
+$A4: rgba(255, 255, 255, 1); // 万能色
+$A5: rgba(255, 255, 255, 0.5); // 万能色
+$A6: rgba(255, 255, 255, 0.3); // 万能色
+
+// 导航色
+$B1: rgba(28, 41, 60, 1); // 深色导航背景
+$B2: rgba(34, 54, 102, 1); // 深色导航背景 - 选中&Hover
+
+// 渐变色
+$C1: linear-gradient(90deg, rgba(46, 101, 230, 1) 50%, rgba(240, 245, 255, 1) 100%); // 渐变色
+
+// 透明色
+$D1: rgba(29, 33, 38, 0.9); // 背景、蒙层
+$D2: rgba(29, 33, 38, 0.4); // 背景
+$D3: rgba(212, 218, 227, 0.4); // 投影
+
+//////////// 状态色 //////////////
+// 基准色
+$E1: rgba(19, 191, 76, 1); // 辅助色（成功）
+$E2: rgba(19, 191, 76, 0.1); //辅助色（成功）
+$ET05: rgba(232, 252, 239, 1); // 辅助色（成功）
+
+$F1: rgba(255, 147, 38, 1); // 辅助色（警示）
+$F2: rgba(255, 147, 38, 0.1); // 辅助色（警示）
+$FT05: rgba(255, 246, 235, 1); // 辅助色（警示）
+
+$G1: rgba(244, 66, 66, 1); // 辅助色（失败、错误）
+$G2: rgba(244, 66, 66, 0.1); // 辅助色（失败、错误）
+$GT8: rgba(246, 103, 103, 1); // 辅助色（失败、错误）
+$GT05: rgba(255, 235, 235, 1); // 辅助色（失败、错误）
+
+// 常用
+$J1: rgba(38, 129, 255, 1);
+$K1: rgba(38, 129, 255, 0.1);
+$J2: rgba(19, 163, 191, 1);
+$K2: rgba(19, 163, 191, 0.1);
+$J3: rgba(70, 70, 230, 1);
+$K3: rgba(70, 70, 230, 0.1);
+$J4: rgba(11, 97, 217, 1);
+$K4: rgba(11, 97, 217, 0.1);
+$J5: rgba(255, 185, 0, 1);
+$K5: rgba(255, 185, 0, 0.1);
+$J6: rgba(204, 61, 204, 1);
+$K6: rgba(204, 61, 204, 0.1);
+$J7: rgba(134, 50, 245, 1);
+$K7: rgba(134, 50, 245, 0.1);
+$J8: rgba(200, 20, 15, 1);
+$K8: rgba(200, 20, 15, 0.1);
+
+// 其他
+$L1: rgba(20, 153, 255, 1);
+$M1: rgba(20, 153, 255, 0.1);
+$L2: rgba(0, 180, 170, 1);
+$M2: rgba(0, 180, 170, 0.1);
+$L3: rgba(9, 94, 179, 1);
+$M3: rgba(9, 94, 179, 0.1);
+$L4: rgba(182, 61, 242, 1);
+$M4: rgba(182, 61, 242, 0.1);
+$L5: rgba(242, 91, 61, 1);
+$M5: rgba(242, 91, 61, 0.1);
+$L6: rgba(90, 210, 0, 1);
+$M6: rgba(90, 210, 0, 0.1);
+$L7: rgba(255, 111, 38, 1);
+$M7: rgba(255, 111, 38, 0.1);
+
+

package/Switch/index.d.ts

@@ -1,10 +1,6 @@
-/**
- * @author Hanz
- * @date 2021/8/5
- * @description switch 开关
- */
-import React, { FunctionComponent, ReactNode } from 'react';
-import { LabelTooltipProps } from '../Label';
+import React, { FunctionComponent, ReactNode } from "react";
+import { LabelTooltipProps } from "../Label";
+import { TooltipProps } from "../Tooltip";
 import "./index.scss";
 type SwitchChangeEventHandler = (checked: boolean, event: React.MouseEvent | React.KeyboardEvent) => void;
 type SwitchClickEventHandler = SwitchChangeEventHandler;
@@ -12,7 +8,7 @@ export interface SwitchProps {
     /**
      * 开关大小
      */
-    size?: 'small' | 'default';
+    size?: "small" | "default";
     /**
      * 类名
      */
@@ -54,25 +50,49 @@ export interface SwitchProps {
      */
     loading?: boolean;
     /**
-     * 自动获得焦点
+     * loading帮助提示文案
      */
-    autoFocus?: boolean;
+    loadingTitle?: string;
     /**
-     * 紧凑型开关
+     * 自动获得焦点
      */
-    compact?: boolean;
+    autoFocus?: boolean;
     /**
      * 标题
      */
     label?: ReactNode;
     /**
-     * 帮助提示
+     * 描述
+     */
+    desc?: ReactNode;
+    /**
+     * 描述是否必填
+     */
+    required?: boolean;
+    /**
+     * 标题帮助提示
      */
     labelTooltip?: LabelTooltipProps;
+    /**
+     * 描述帮助提示
+     */
+    descTooltip?: LabelTooltipProps;
+    /**
+     * 禁用提示
+     */
+    disabledTooltip?: TooltipProps;
     /**
      * 标题位置
      */
-    labelPlacement?: 'top' | 'bottom' | 'start' | 'end';
+    labelPlacement?: "top" | "bottom" | "start" | "end";
+    /**
+     * 描述位置
+     */
+    descPlacement?: "start" | "end";
+    /**
+     * 辅助文本
+     */
+    supText?: ReactNode;
 }
 export declare const Switch: FunctionComponent<SwitchProps>;
 export default Switch;

package/Switch/index.js

@@ -1,41 +1,51 @@
-import { _ as _defineProperty } from '../_verture/defineProperty-62acccfc.js';
+import { _ as _defineProperty } from '../_verture/defineProperty-1d116156.js';
 import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import LoadingOutlined from '@para-ui/icons/LoadingF';
 import RcSwitch from 'rc-switch';
 import clsx from 'clsx';
-import LoadingOutlined from '@para-ui/icons/LoadingF';
+import { $ as $prefixCls, a as $rcPrefixCls } from '../_verture/constant-0d9802f7.js';
 import Label from '../Label/index.js';
-import { $ as $prefixCls, a as $rcPrefixCls } from '../_verture/constant-66aa48a1.js';
+import { Tooltip } from '../Tooltip/index.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
-import '../_verture/typeof-498dd2b1.js';
+import '../_verture/typeof-adeedc13.js';
 import '../Help/index.js';
-import '../Tooltip/index.js';
-import '../_verture/slicedToArray-76060636.js';
+import '@para-ui/icons/Help';
+import '../_verture/slicedToArray-a8206399.js';
 import '../_verture/unsupportedIterableToArray-cb478f24.js';
 import 'react';
 import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
-import '@para-ui/icons/Help';
+import '@para-ui/icons/Forbid';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/3 下午5:58\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-switch {\n  position: relative;\n  display: inline-block;\n  min-width: 32px;\n  height: 18px;\n  vertical-align: middle;\n  background-color: transparent;\n  border: 0;\n  border-radius: 100px;\n  cursor: pointer;\n  transition: all 0.2s;\n  user-select: none;\n}\n.paraui-v3-switch:before {\n  position: absolute;\n  top: 2px;\n  left: 0;\n  width: 100%;\n  height: 14px;\n  border-radius: 100px;\n  background-color: rgba(171, 176, 185, 0.4);\n  content: \"\";\n  transition: all 0.2s;\n}\n.paraui-v3-switch:focus {\n  outline: 0;\n  box-shadow: none;\n}\n.paraui-v3-switch.component-switch-checked:focus {\n  box-shadow: none;\n}\n.paraui-v3-switch:focus:hover {\n  box-shadow: none;\n}\n.paraui-v3-switch.component-switch-checked:before {\n  background-color: rgba(54, 102, 214, 0.2);\n}\n.paraui-v3-switch-loading, .paraui-v3-switch.component-switch-disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n.paraui-v3-switch-loading *, .paraui-v3-switch.component-switch-disabled * {\n  box-shadow: none;\n  cursor: not-allowed;\n}\n.paraui-v3-switch .component-switch-inner {\n  display: block;\n  margin: 0 7px 0 25px;\n  color: rgb(255, 255, 255);\n  font-size: 14px;\n  transition: margin 0.2s;\n}\n.paraui-v3-switch.component-switch-checked .component-switch-inner {\n  margin: 0 25px 0 7px;\n}\n.paraui-v3-switch .component-switch-handle {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 18px;\n  height: 18px;\n  transition: all 0.2s ease-in-out;\n}\n.paraui-v3-switch .component-switch-handle::before {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: #8996AA;\n  border-radius: 9px;\n  box-shadow: none;\n  transition: all 0.2s ease-in-out;\n  content: \"\";\n}\n.paraui-v3-switch.component-switch-checked .component-switch-handle {\n  left: calc(100% - 18px);\n}\n.paraui-v3-switch.component-switch-checked .component-switch-handle::before {\n  background-color: rgb(54, 102, 214);\n}\n.paraui-v3-switch:not(.paraui-v3-switch-disabled):active .component-switch-handle::before {\n  right: -30%;\n  left: 0;\n}\n.paraui-v3-switch:not(.paraui-v3-switch-disabled):active.component-switch-checked .component-switch-handle::before {\n  right: 0;\n  left: -30%;\n}\n.paraui-v3-switch .component-switch-loading-icon {\n  position: relative;\n  top: 1px;\n  color: rgb(54, 102, 214);\n  vertical-align: top;\n  animation: switchLoadingCircle 1s infinite linear;\n}\n.paraui-v3-switch.component-switch-checked .component-switch-loading-icon {\n  color: rgb(255, 255, 255);\n}\n.paraui-v3-switch-small {\n  min-width: 28px;\n  height: 14px;\n  line-height: 14px;\n}\n.paraui-v3-switch-small .component-switch-inner {\n  margin: 0 5px 0 18px;\n  font-size: 14px;\n}\n.paraui-v3-switch-small .component-switch-handle {\n  width: 12px;\n  height: 12px;\n  top: 3px;\n  left: 2px;\n}\n.paraui-v3-switch-small .component-switch-loading-icon {\n  top: 1.5px;\n  font-size: 9px;\n}\n.paraui-v3-switch-small.component-switch-checked .component-switch-inner {\n  margin: 0 18px 0 5px;\n}\n.paraui-v3-switch-small.component-switch-checked .component-switch-handle {\n  left: calc(100% - 12px - 2px);\n}\n@keyframes switchLoadingCircle {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.paraui-v3-switch-label {\n  display: inline-flex;\n}\n.paraui-v3-switch-label .component-switch-text {\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 14px;\n  font-weight: 400;\n}\n.paraui-v3-switch-label-top {\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n.paraui-v3-switch-label-top .component-switch-text {\n  margin-bottom: 8px;\n}\n.paraui-v3-switch-label-bottom {\n  flex-direction: column;\n  align-items: flex-start;\n}\n.paraui-v3-switch-label-bottom .component-switch-text {\n  margin-top: 8px;\n  margin-bottom: 0;\n}\n.paraui-v3-switch-label-start {\n  flex-direction: row-reverse;\n  align-items: center;\n}\n.paraui-v3-switch-label-start .component-switch-text {\n  margin-right: 8px;\n  margin-bottom: 0;\n}\n.paraui-v3-switch-label-end {\n  flex-direction: row;\n  align-items: center;\n}\n.paraui-v3-switch-label-end .component-switch-text {\n  margin-left: 8px;\n  margin-bottom: 0;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/3 下午5:58\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-switch {\n  position: relative;\n  display: inline-block;\n  width: 32px;\n  height: 16px;\n  vertical-align: middle;\n  background-color: transparent;\n  border: 0;\n  cursor: pointer;\n  transition: all 0.2s;\n  user-select: none;\n}\n.paraui-v4-switch .component-switch {\n  border: none;\n  cursor: pointer;\n}\n.paraui-v4-switch:before {\n  position: absolute;\n  top: 0px;\n  left: 0;\n  width: 100%;\n  height: 16px;\n  border-radius: 8px;\n  background-color: rgb(212, 218, 227);\n  content: \"\";\n  transition: all 0.2s;\n}\na .paraui-v4-switch:focus {\n  outline: 0;\n  box-shadow: none;\n}\n.paraui-v4-switch.component-switch-checked:focus {\n  box-shadow: none;\n}\n.paraui-v4-switch:focus:hover {\n  box-shadow: none;\n}\n.paraui-v4-switch.component-switch-checked:before {\n  background-color: rgb(46, 101, 230);\n}\n.paraui-v4-switch-loading *, .paraui-v4-switch.component-switch-disabled * {\n  box-shadow: none;\n}\n.paraui-v4-switch-loading .component-switch-inner::before, .paraui-v4-switch.component-switch-disabled .component-switch-inner::before {\n  position: absolute;\n  top: 0px;\n  left: 0;\n  width: 100%;\n  height: 16px;\n  background-color: rgba(255, 255, 255, 0.5);\n  content: \"\";\n  z-index: 100;\n}\n.paraui-v4-switch .component-switch-inner {\n  display: block;\n  margin: 0 7px 0 25px;\n  font-size: 14px;\n  transition: margin 0.2s;\n}\n.paraui-v4-switch.component-switch-checked .component-switch-inner {\n  margin: 0 25px 0 7px;\n}\n.paraui-v4-switch .component-switch-handle {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 12px;\n  height: 12px;\n  transition: all 0.2s ease-in-out;\n}\n.paraui-v4-switch .component-switch-handle::before {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgb(255, 255, 255);\n  border-radius: 9px;\n  box-shadow: none;\n  transition: all 0.2s ease-in-out;\n  content: \"\";\n}\n.paraui-v4-switch.component-switch-checked .component-switch-handle {\n  left: calc(100% - 14px);\n}\n.paraui-v4-switch.component-switch-checked .component-switch-handle::before {\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v4-switch:not(.paraui-v4-switch-disabled):active .component-switch-handle::before {\n  right: -30%;\n  left: 0;\n}\n.paraui-v4-switch:not(.paraui-v4-switch-disabled):active.component-switch-checked .component-switch-handle::before {\n  right: 0;\n  left: -30%;\n}\n.paraui-v4-switch .component-switch-loading-icon {\n  position: relative;\n  top: 1px;\n  color: rgb(46, 101, 230);\n  font-size: 10px;\n  vertical-align: top;\n  animation: switchLoadingCircle 1s infinite linear;\n}\n.paraui-v4-switch.component-switch-checked .component-switch-loading-icon {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-switch-small {\n  min-width: 28px;\n  height: 14px;\n  line-height: 14px;\n}\n.paraui-v4-switch-small .component-switch-inner {\n  margin: 0 5px 0 18px;\n  font-size: 14px;\n}\n.paraui-v4-switch-small .component-switch-handle {\n  width: 12px;\n  height: 12px;\n  top: 3px;\n  left: 2px;\n}\n.paraui-v4-switch-small .component-switch-loading-icon {\n  top: 1.5px;\n  font-size: 9px;\n}\n.paraui-v4-switch-small.component-switch-checked .component-switch-inner {\n  margin: 0 18px 0 5px;\n}\n.paraui-v4-switch-small.component-switch-checked .component-switch-handle {\n  left: calc(100% - 12px - 2px);\n}\n@keyframes switchLoadingCircle {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.component-label-box {\n  display: flex;\n  align-items: center;\n}\n.component-label-box .sup-text {\n  color: rgb(92, 101, 115);\n  font-size: 14px;\n  margin-left: 10px;\n  line-height: 16px;\n}\n.component-label-box .sup-text > a {\n  text-decoration: none;\n  cursor: pointer;\n  color: rgb(46, 101, 230);\n}\n\n.paraui-v4-switch-label {\n  display: inline-flex;\n  align-items: flex-end;\n}\n.paraui-v4-switch-label .component-disabled-text {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-switch-label .component-desc-text {\n  margin-bottom: 0;\n  margin-right: 10px;\n  line-height: 16px;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-switch-label .component-desc-text .paraui-v4-help {\n  line-height: 1;\n}\n.paraui-v4-switch-label .component-desc-text .paraui-v4-help svg {\n  top: 0;\n}\n.paraui-v4-switch-label .paraui-v4-label-text-container {\n  display: flex;\n  flex-direction: column;\n}\n\n.paraui-v4-switch-desc-end {\n  flex-direction: row-reverse;\n}\n.paraui-v4-switch-desc-end .component-desc-text {\n  margin-right: 0;\n}";
 styleInject(css_248z);
 
 //Switch 开关
 var Switch = function Switch(props) {
-  props.compact;
-    props.size;
+  props.size;
     var loading = props.loading,
     disabled = props.disabled,
     className = props.className,
     label = props.label,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    desc = props.desc,
     labelTooltip = props.labelTooltip,
+    descTooltip = props.descTooltip,
+    disabledTooltip = props.disabledTooltip,
+    _props$loadingTitle = props.loadingTitle,
+    loadingTitle = _props$loadingTitle === void 0 ? "正在执行中" : _props$loadingTitle,
     _props$labelPlacement = props.labelPlacement,
-    labelPlacement = _props$labelPlacement === void 0 ? 'top' : _props$labelPlacement,
-    restProps = __rest(props, ["compact", "size", "loading", "disabled", "className", "label", "labelTooltip", "labelPlacement"]);
+    labelPlacement = _props$labelPlacement === void 0 ? "top" : _props$labelPlacement,
+    _props$descPlacement = props.descPlacement,
+    descPlacement = _props$descPlacement === void 0 ? "start" : _props$descPlacement,
+    supText = props.supText,
+    restProps = __rest(props, ["size", "loading", "disabled", "className", "label", "required", "desc", "labelTooltip", "descTooltip", "disabledTooltip", "loadingTitle", "labelPlacement", "descPlacement", "supText"]);
   //cls
   var classes = clsx("".concat($prefixCls, "-switch"), _defineProperty({}, "".concat($prefixCls, "-switch-loading"), loading), className);
   //label cls
-  var labelClasses = clsx("".concat($prefixCls, "-switch-label"), "".concat($prefixCls, "-switch-label-").concat(labelPlacement));
+  var labelClasses = clsx("".concat($prefixCls, "-switch-label"), "".concat($prefixCls, "-switch-label-").concat(labelPlacement), "".concat($prefixCls, "-switch-desc-").concat(descPlacement));
   //loading circle
   var loadingIcon = jsx("div", Object.assign({
     className: "".concat($rcPrefixCls, "-switch-handle")
@@ -44,28 +54,85 @@ var Switch = function Switch(props) {
       className: "".concat($rcPrefixCls, "-switch-loading-icon")
     })
   }));
-  if (label) {
+  // 开关
+  var renderSwitch = function renderSwitch() {
+    return disabled && disabledTooltip ? jsx(Tooltip, Object.assign({
+      disabled: true
+    }, disabledTooltip, {
+      children: jsx("span", Object.assign({
+        className: classes
+      }, {
+        children: jsxs("div", Object.assign({
+          className: "".concat($rcPrefixCls, "-label-box")
+        }, {
+          children: [jsx(RcSwitch, Object.assign({}, restProps, {
+            prefixCls: "".concat($rcPrefixCls, "-switch"),
+            disabled: disabled || loading,
+            loadingIcon: loadingIcon
+          })), jsx("span", Object.assign({
+            className: "sup-text"
+          }, {
+            children: supText && supText
+          }))]
+        }))
+      }))
+    })) : jsx(Fragment, {
+      children: loadingTitle && loading ? jsx(Tooltip, Object.assign({
+        disabled: true,
+        title: loadingTitle
+      }, {
+        children: jsxs("div", Object.assign({
+          className: "".concat($rcPrefixCls, "-label-box")
+        }, {
+          children: [jsx(RcSwitch, Object.assign({}, restProps, {
+            prefixCls: "".concat($rcPrefixCls, "-switch"),
+            className: classes,
+            disabled: disabled || loading,
+            loadingIcon: loadingIcon
+          })), jsx("span", Object.assign({
+            className: "sup-text"
+          }, {
+            children: supText && supText
+          }))]
+        }))
+      })) : jsxs("div", Object.assign({
+        className: "".concat($rcPrefixCls, "-label-box")
+      }, {
+        children: [jsx(RcSwitch, Object.assign({}, restProps, {
+          prefixCls: "".concat($rcPrefixCls, "-switch"),
+          className: classes,
+          disabled: disabled || loading,
+          loadingIcon: loadingIcon
+        })), jsx("span", Object.assign({
+          className: "sup-text"
+        }, {
+          children: supText && supText
+        }))]
+      }))
+    });
+  };
+  if (label || desc) {
     return jsxs("span", Object.assign({
       className: labelClasses
     }, {
-      children: [jsx(RcSwitch, Object.assign({}, restProps, {
-        prefixCls: "".concat($rcPrefixCls, "-switch"),
-        className: classes,
-        disabled: disabled || loading,
-        loadingIcon: loadingIcon
-      })), jsx(Label, Object.assign({
-        label: label
-      }, labelTooltip, {
-        className: "".concat($rcPrefixCls, "-switch-text")
+      children: [desc && jsx(Label, Object.assign({
+        label: desc,
+        required: required
+      }, descTooltip, {
+        className: "".concat($rcPrefixCls, "-desc-text ").concat(disabled ? "".concat($rcPrefixCls, "-disabled-text") : "")
+      })), jsxs("span", Object.assign({
+        className: "".concat($prefixCls, "-label-text-container")
+      }, {
+        children: [label && jsx(Label, Object.assign({
+          label: label,
+          required: required
+        }, labelTooltip, {
+          className: "".concat($rcPrefixCls, "-switch-text ").concat(disabled ? "".concat($rcPrefixCls, "-disabled-text") : "")
+        })), renderSwitch()]
       }))]
     }));
   }
-  return jsx(RcSwitch, Object.assign({}, restProps, {
-    prefixCls: "".concat($rcPrefixCls, "-switch"),
-    className: classes,
-    disabled: disabled || loading,
-    loadingIcon: loadingIcon
-  }));
+  return renderSwitch();
 };
 
 export { Switch, Switch as default };