feat: add schedule type ux

src/components/label-selector/inner.tsx

@@ -97,7 +97,7 @@ const Inner: React.FC<LabelSelectorProps> = ({
           >
             <PlusOutlined className="font-size-14" />{' '}
             {intl.formatMessage({
-              id: 'common.button.addLabel'
+              id: 'common.button.addSelector'
             })}
           </Button>
         </div>

src/components/label-selector/styles/wrapper.less

@@ -1,6 +1,6 @@
 .wrapper {
   position: relative;
-  padding: 16px;
+  padding: 14px;
   padding-top: 34px;
   border: 1px solid var(--ant-color-border);
   border-radius: var(--border-radius-base);
@@ -10,7 +10,7 @@
   :global {
     .label {
       position: absolute;
-      left: 24px;
+      left: 16px;
       line-height: 1;
       top: 12px;
       color: var(--ant-color-text-tertiary);

src/components/seal-form/components/label-info.tsx

@@ -10,6 +10,7 @@ interface NoteInfoProps {
 }
 const NoteInfo: React.FC<NoteInfoProps> = (props) => {
   const { required, description, label } = props || {};
+  if (!label) return null;
 
   return (
     <span className="label-text">

src/components/seal-form/components/wrapper.less

@@ -5,7 +5,7 @@
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  padding-inline: 12px;
+  padding-inline: 8px 12px;
   height: 54px;
   border-width: var(--ant-line-width);
   border-style: var(--ant-line-type);
@@ -13,12 +13,12 @@
   border-radius: @borderRadius;
   background-color: var(--color-white-1);
 
-  &.filled {
+  &.borderless {
     border: none;
     box-shadow: none;
   }
 
-  &.borderless {
+  &.filled {
     border: none;
     box-shadow: none;
   }
@@ -86,7 +86,7 @@
   @wrapheight: 54px;
   @inputheight: 32px;
   @borderRadius: 8px;
-  @input-inner-padding: 12px;
+  @input-inner-padding: 6px;
   @bgColor: transparent;
 
   position: relative;
@@ -113,7 +113,7 @@
 
   .label {
     position: absolute;
-    left: 12px;
+    left: 6px;
     color: rgba(0, 0, 0, 45%);
     font-size: var(--font-size-base);
     line-height: 1;
@@ -131,6 +131,10 @@
       top: 21px;
       transition: all 0.2s var(--seal-transition-func);
     }
+
+    &.has-prefix {
+      top: 10px !important;
+    }
   }
 
   // ==================== select ==================
@@ -171,6 +175,16 @@
     top: 10px;
   }
 
+  &.no-label {
+    padding-block: 0;
+
+    :global {
+      .ant-select-arrow {
+        top: 50%;
+      }
+    }
+  }
+
   :global(
       .ant-select-outlined.ant-select-disabled:not(.ant-select-customize-input)
         .ant-select-selector
@@ -191,7 +205,7 @@
     border: none;
     box-shadow: none;
     padding-block: 5px;
-    padding-inline: 12px;
+    padding-inline: @input-inner-padding;
     height: @inputheight !important;
     background-color: @bgColor;
   }
@@ -278,9 +292,9 @@
     height: @wrapheight - 2px;
   }
 
-  :global(.ant-input-prefix) {
-    position: absolute;
-    top: 1px;
-    left: -4px;
-  }
+  // :global(.ant-input-prefix) {
+  //   position: absolute;
+  //   top: 1px;
+  //   left: -4px;
+  // }
 }

src/components/seal-form/components/wrapper.tsx

@@ -15,6 +15,7 @@ interface WrapperProps {
   extra?: React.ReactNode;
   addAfter?: React.ReactNode;
   variant?: string;
+  hasPrefix?: boolean;
   onClick?: () => void;
 }
 
@@ -30,6 +31,7 @@ const Wrapper: React.FC<WrapperProps> = ({
   extra,
   variant,
   addAfter,
+  hasPrefix,
   noWrapperStyle,
   onClick
 }) => {
@@ -41,12 +43,14 @@ const Wrapper: React.FC<WrapperProps> = ({
         wrapperStyle[`validate-status-${status}`],
         addAfter ? wrapperStyle['seal-input-wrapper-addafter'] : '',
         disabled ? wrapperStyle['seal-input-wrapper-disabled'] : '',
-        className ? wrapperStyle[className] : ''
+        className ? wrapperStyle[className] : '',
+        variant ? wrapperStyle[variant] : ''
       )}
     >
       <div
         className={classNames(wrapperStyle.wrapper, {
-          [wrapperStyle['no-wrapper-style']]: noWrapperStyle
+          [wrapperStyle['no-wrapper-style']]: noWrapperStyle,
+          [wrapperStyle['no-label']]: !label
         })}
         onClick={onClick}
       >
@@ -56,7 +60,10 @@ const Wrapper: React.FC<WrapperProps> = ({
             wrapperStyle['label'],
             isFocus
               ? wrapperStyle['isfoucs-has-value']
-              : wrapperStyle['blur-no-value']
+              : wrapperStyle['blur-no-value'],
+            {
+              [wrapperStyle['has-prefix']]: hasPrefix
+            }
           )}
         >
           <LabelInfo

src/components/seal-form/password.tsx

@@ -62,6 +62,7 @@ const SealPassword: React.FC<InputProps & SealFormItemProps> = (props) => {
       required={required}
       description={description}
       disabled={props.disabled}
+      hasPrefix={!!props.prefix}
       onClick={handleClickWrapper}
     >
       <Input.Password

src/components/seal-form/seal-input.tsx

@@ -77,6 +77,7 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
       description={description}
       disabled={props.disabled}
       addAfter={addAfter}
+      hasPrefix={!!props.prefix}
       onClick={handleClickWrapper}
     >
       <Input