[Bug] [UI Next][V1.0.0-Alpha] Fix crontab component styles (#8902)

dolphinscheduler-ui-next/src/components/crontab/index.module.scss

@@ -17,6 +17,8 @@
 
 .crontab-list {
   display: flex;
+  vertical-align: middle;
+  align-items: center;
   .crontab-list-item {
     display: flex;
     vertical-align: middle;
@@ -25,5 +27,11 @@
     > div {
       margin: 5px;
     }
+    .number-input {
+      width:100px;
+    }
+    .select-input {
+      width: 250px;
+    }
   }
 }

dolphinscheduler-ui-next/src/components/crontab/modules/day.tsx

@@ -477,8 +477,8 @@ export default defineComponent({
         </NRadio>
         <NRadio class={styles['crontab-list']} value={'WkintervalWeek'}>
           <div class={styles['crontab-list-item']}>
-            <div>{t('crontab.every')}</div>
-            <div>
+            <div class={styles['item-text']}>{t('crontab.every')}</div>
+            <div class={styles['number-input']}>
               <NInputNumber
                 defaultValue={0}
                 min={0}
@@ -487,10 +487,11 @@ export default defineComponent({
                 onUpdateValue={this.onWkintervalWeekPerform}
               />
             </div>
-            <div>{t('crontab.day_carried_out')}</div>
+            <div class={styles['item-text']}>
+              {t('crontab.day_carried_out')}
+            </div>
             <div>
               <NSelect
-                style={{ width: '150px' }}
                 options={this.weekOptions}
                 defaultValue={this.WkintervalWeekStartRef}
                 v-model:value={this.WkintervalWeekStartRef}
@@ -503,7 +504,7 @@ export default defineComponent({
         <NRadio class={styles['crontab-list']} value={'intervalDay'}>
           <div class={styles['crontab-list-item']}>
             <div>{t('crontab.every')}</div>
-            <div>
+            <div class={styles['number-input']}>
               <NInputNumber
                 defaultValue={0}
                 min={0}
@@ -513,7 +514,7 @@ export default defineComponent({
               />
             </div>
             <div>{t('crontab.day_carried_out')}</div>
-            <div>
+            <div class={styles['number-input']}>
               <NInputNumber
                 defaultValue={0}
                 min={1}
@@ -581,7 +582,7 @@ export default defineComponent({
         </NRadio>
         <NRadio class={styles['crontab-list']} value={'monthTailBefore'}>
           <div class={styles['crontab-list-item']}>
-            <div>
+            <div class={styles['number-input']}>
               <NInputNumber
                 defaultValue={0}
                 min={0}
@@ -599,8 +600,9 @@ export default defineComponent({
         >
           <div class={styles['crontab-list-item']}>
             <div>{t('crontab.recent_business_day_to_month')}</div>
-            <div>
+            <div class={styles['number-input']}>
               <NInputNumber
+                style={{ width: '100px' }}
                 defaultValue={0}
                 min={0}
                 max={31}
@@ -608,13 +610,13 @@ export default defineComponent({
                 onUpdateValue={this.onRecentlyWorkingDaysMonth}
               />
             </div>
-            <div>{t('crontab.one_day')}</div>
+            <div style={{ width: '50px' }}>{t('crontab.one_day')}</div>
           </div>
         </NRadio>
         <NRadio class={styles['crontab-list']} value={'WkmonthNumWeeks'}>
           <div class={styles['crontab-list-item']}>
             <div>{t('crontab.in_this_months')}</div>
-            <div>
+            <div class={styles['number-input']}>
               <NInputNumber
                 defaultValue={0}
                 min={0}

dolphinscheduler-ui-next/src/components/crontab/modules/time.tsx

@@ -227,8 +227,8 @@ export default defineComponent({
         </NRadio>
         <NRadio class={styles['crontab-list']} value={'intervalTime'}>
           <div class={styles['crontab-list-item']}>
-            <div>{t(this.timeI18n!.every)}</div>
-            <div>
+            <div class={styles['item-text']}>{t(this.timeI18n!.every)}</div>
+            <div class={styles['number-input']}>
               <NInputNumber
                 defaultValue={0}
                 min={0}
@@ -237,8 +237,10 @@ export default defineComponent({
                 onUpdateValue={this.onIntervalStart}
               />
             </div>
-            <div>{t(this.timeI18n!.timeCarriedOut)}</div>
-            <div>
+            <div class={styles['item-text']}>
+              {t(this.timeI18n!.timeCarriedOut)}
+            </div>
+            <div class={styles['number-input']}>
               <NInputNumber
                 defaultValue={0}
                 min={0}
@@ -247,15 +249,14 @@ export default defineComponent({
                 onUpdateValue={this.onIntervalPerform}
               />
             </div>
-            <div>{t(this.timeI18n!.timeStart)}</div>
+            <div class={styles['item-text']}>{t(this.timeI18n!.timeStart)}</div>
           </div>
         </NRadio>
         <NRadio class={styles['crontab-list']} value={'specificTime'}>
           <div class={styles['crontab-list-item']}>
             <div>{t(this.timeI18n!.specificTime)}</div>
-            <div>
+            <div class={styles['select-input']}>
               <NSelect
-                style={{ width: '300px' }}
                 multiple
                 options={this.options}
                 placeholder={t(this.timeI18n!.specificTimeTip)}
@@ -268,7 +269,7 @@ export default defineComponent({
         <NRadio class={styles['crontab-list']} value={'cycleTime'}>
           <div class={styles['crontab-list-item']}>
             <div>{t(this.timeI18n!.cycleFrom)}</div>
-            <div>
+            <div class={styles['number-input']}>
               <NInputNumber
                 defaultValue={0}
                 min={0}
@@ -278,7 +279,7 @@ export default defineComponent({
               />
             </div>
             <div>{t(this.timeI18n!.to)}</div>
-            <div>
+            <div class={styles['number-input']}>
               <NInputNumber
                 defaultValue={0}
                 min={0}