From bee2f4a5fc1d2893619867fd61a560143a1d2fd3 Mon Sep 17 00:00:00 2001
From: opensnail <598092184@qq.com>
Date: Fri, 17 May 2024 09:26:51 +0800
Subject: [PATCH] =?UTF-8?q?feat(sj=5F1.0.0):=20=E8=B0=83=E6=95=B4=E9=87=8D?=
 =?UTF-8?q?=E8=AF=95=E5=9C=BA=E6=99=AF=E7=9A=84=E8=A1=A8=E5=8D=95=E7=9A=84?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scene/modules/scene-operate-drawer.vue    | 191 ++++++++++--------
 1 file changed, 108 insertions(+), 83 deletions(-)

diff --git a/src/views/retry/scene/modules/scene-operate-drawer.vue b/src/views/retry/scene/modules/scene-operate-drawer.vue
index 6b7fa6a..727b637 100644
--- a/src/views/retry/scene/modules/scene-operate-drawer.vue
+++ b/src/views/retry/scene/modules/scene-operate-drawer.vue
@@ -240,90 +240,115 @@ watch(
           :placeholder="$t('page.retryScene.form.sceneName')"
         />
       </NFormItem>
-      <NFormItem :label="$t('page.retryScene.groupName')" path="groupName">
-        <NSelect
-          v-model:value="model.groupName"
-          :disabled="props.operateType === 'edit'"
-          :placeholder="$t('page.retryScene.form.groupName')"
-          :options="translateOptions2(groupNameList)"
-          clearable
-        />
-      </NFormItem>
-      <NFormItem :label="$t('common.routeKey.routeLabel')" path="routeKey">
-        <RouteKey v-model:value="model.routeKey" />
-      </NFormItem>
-      <NFormItem :label="$t('page.retryScene.maxRetryCount')" path="maxRetryCount">
-        <NInputNumber
-          v-model:value="model.maxRetryCount"
-          :min="1"
-          :max="model.backOff === 1 ? 26 : 9999999"
-          :placeholder="$t('page.retryScene.form.maxRetryCount')"
-          clearable
-        />
-      </NFormItem>
-      <NFormItem :label="$t('page.retryScene.executorTimeout')" path="executorTimeout">
-        <NInputNumber
-          v-model:value="model.executorTimeout"
-          :min="1"
-          :max="60"
-          :placeholder="$t('page.retryScene.form.executorTimeout')"
-          clearable
-        />
-      </NFormItem>
-      <NFormItem :label="$t('page.retryScene.deadlineRequest')" path="deadlineRequest">
-        <NInputNumber
-          v-model:value="model.deadlineRequest"
-          :min="100"
-          :max="60000"
-          :placeholder="$t('page.retryScene.form.deadlineRequest')"
-          clearable
-        />
-      </NFormItem>
-      <NFormItem :label="$t('page.retryScene.backOff')" path="backOff">
-        <NSelect
-          v-model:value="model.backOff"
-          :placeholder="$t('page.retryScene.form.backOff')"
-          :options="translateOptions(backOffRecordOptions)"
-          clearable
-        />
-      </NFormItem>
-      <NFormItem path="triggerInterval">
-        <SceneTriggerInterval v-model="model.triggerInterval" :back-off="model.backOff" />
-        <template #label>
-          <div class="flex-center">
-            {{ $t('page.retryScene.triggerInterval') }}
-            <NTooltip v-if="model.backOff === 1" trigger="hover">
-              <template #trigger>
-                <NButton text class="ml-6px">
-                  <SvgIcon icon="ant-design:info-circle-outlined" class="mb-1px text-16px" />
-                </NButton>
-              </template>
-              延迟等级是参考RocketMQ的messageDelayLevel设计实现，具体延迟时间如下:
-              【10s,15s,30s,35s,40s,50s,1m,2m,4m,6m,8m,10m,20m,40m,1h,2h,3h,4h,5h,6h,7h,8h,9h,10h,11h,12h】
-              <br />
-              <NText strong>执行逻辑:</NText>
-              <NUl align-text>
-                <NLi>第一次执行间隔10s</NLi>
-                <NLi>第二次执行间隔15s</NLi>
-                <NLi>l第二次执行间隔30s</NLi>
-                <NLi>........... 依次类推</NLi>
-              </NUl>
-            </NTooltip>
-          </div>
-        </template>
-      </NFormItem>
-      <NFormItem :label="$t('page.retryScene.sceneStatus')" path="sceneStatus">
-        <NRadioGroup v-model:value="model.sceneStatus" name="sceneStatus">
-          <NSpace>
-            <NRadio
-              v-for="item in enableStatusNumberOptions"
-              :key="item.value"
-              :value="item.value"
-              :label="$t(item.label)"
+      <NGrid cols="24" item-responsive responsive="screen" x-gap="20">
+        <NGi span="0 m:1 l:17">
+          <NFormItem :label="$t('page.retryScene.groupName')" path="groupName">
+            <NSelect
+              v-model:value="model.groupName"
+              :disabled="props.operateType === 'edit'"
+              :placeholder="$t('page.retryScene.form.groupName')"
+              :options="translateOptions2(groupNameList)"
+              clearable
             />
-          </NSpace>
-        </NRadioGroup>
-      </NFormItem>
+          </NFormItem>
+        </NGi>
+        <NGi span="0 m:1 l:7">
+          <NFormItem :label="$t('page.retryScene.sceneStatus')" path="sceneStatus">
+            <NRadioGroup v-model:value="model.sceneStatus" name="sceneStatus">
+              <NSpace>
+                <NRadio
+                  v-for="item in enableStatusNumberOptions"
+                  :key="item.value"
+                  :value="item.value"
+                  :label="$t(item.label)"
+                />
+              </NSpace>
+            </NRadioGroup>
+          </NFormItem>
+        </NGi>
+      </NGrid>
+
+      <NGrid cols="24" item-responsive responsive="screen" x-gap="20">
+        <NGi span="0 m:1 l:12">
+          <NFormItem :label="$t('common.routeKey.routeLabel')" path="routeKey">
+            <RouteKey v-model:value="model.routeKey" />
+          </NFormItem>
+        </NGi>
+        <NGi span="0 m:1 l:12">
+          <NFormItem :label="$t('page.retryScene.maxRetryCount')" path="maxRetryCount">
+            <NInputNumber
+              v-model:value="model.maxRetryCount"
+              :min="1"
+              :max="model.backOff === 1 ? 26 : 9999999"
+              :placeholder="$t('page.retryScene.form.maxRetryCount')"
+              clearable
+            />
+          </NFormItem>
+        </NGi>
+      </NGrid>
+      <NGrid cols="24" item-responsive responsive="screen" x-gap="20">
+        <NGi span="0 m:1 l:12">
+          <NFormItem :label="$t('page.retryScene.backOff')" path="backOff">
+            <NSelect
+              v-model:value="model.backOff"
+              :placeholder="$t('page.retryScene.form.backOff')"
+              :options="translateOptions(backOffRecordOptions)"
+              clearable
+            />
+          </NFormItem>
+        </NGi>
+        <NGi span="0 m:1 l:12">
+          <NFormItem path="triggerInterval">
+            <SceneTriggerInterval v-model="model.triggerInterval" :back-off="model.backOff" />
+            <template #label>
+              <div class="flex-center">
+                {{ $t('page.retryScene.triggerInterval') }}
+                <NTooltip v-if="model.backOff === 1" trigger="hover">
+                  <template #trigger>
+                    <NButton text class="ml-6px">
+                      <SvgIcon icon="ant-design:info-circle-outlined" class="mb-1px text-16px" />
+                    </NButton>
+                  </template>
+                  延迟等级是参考RocketMQ的messageDelayLevel设计实现，具体延迟时间如下:
+                  【10s,15s,30s,35s,40s,50s,1m,2m,4m,6m,8m,10m,20m,40m,1h,2h,3h,4h,5h,6h,7h,8h,9h,10h,11h,12h】
+                  <br />
+                  <NText strong>执行逻辑:</NText>
+                  <NUl align-text>
+                    <NLi>第一次执行间隔10s</NLi>
+                    <NLi>第二次执行间隔15s</NLi>
+                    <NLi>l第二次执行间隔30s</NLi>
+                    <NLi>........... 依次类推</NLi>
+                  </NUl>
+                </NTooltip>
+              </div>
+            </template>
+          </NFormItem>
+        </NGi>
+      </NGrid>
+      <NGrid cols="24" item-responsive responsive="screen" x-gap="20">
+        <NGi span="0 m:1 l:12">
+          <NFormItem :label="$t('page.retryScene.executorTimeout')" path="executorTimeout">
+            <NInputNumber
+              v-model:value="model.executorTimeout"
+              :min="1"
+              :max="60"
+              :placeholder="$t('page.retryScene.form.executorTimeout')"
+              clearable
+            />
+          </NFormItem>
+        </NGi>
+        <NGi span="0 m:1 l:12">
+          <NFormItem :label="$t('page.retryScene.deadlineRequest')" path="deadlineRequest">
+            <NInputNumber
+              v-model:value="model.deadlineRequest"
+              :min="100"
+              :max="60000"
+              :placeholder="$t('page.retryScene.form.deadlineRequest')"
+              clearable
+            />
+          </NFormItem>
+        </NGi>
+      </NGrid>
       <NFormItem :label="$t('page.retryScene.description')" path="description">
         <NInput
           v-model:value="model.description"