From c26e749b0c4e749328ee45936cad77a2445f1919 Mon Sep 17 00:00:00 2001
From: lijiahangmax <ljh1553488six@139.com>
Date: Fri, 12 Apr 2024 00:09:18 +0800
Subject: [PATCH] =?UTF-8?q?:art:=20=E6=89=A7=E8=A1=8C=E6=A8=A1=E6=9D=BF?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E4=BC=98=E5=8C=96.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/exec-command-panel.vue         |  11 +-
 .../components/exec-job-detail-drawer.vue     |   6 +-
 .../components/exec-job-form-drawer.vue       |  14 +-
 .../components/exec-template-exec-drawer.vue  | 136 ++++++++------
 .../components/exec-template-form-drawer.vue  | 172 +++++++++---------
 .../command-snippet-form-drawer.vue           |  16 +-
 .../dict-key/components/dict-key-table.vue    |   2 +
 .../system/menu/components/menu-table.vue     |   2 +
 8 files changed, 198 insertions(+), 161 deletions(-)

diff --git a/orion-ops-ui/src/views/exec/exec-command/components/exec-command-panel.vue b/orion-ops-ui/src/views/exec/exec-command/components/exec-command-panel.vue
index 5483790d..7c881a85 100644
--- a/orion-ops-ui/src/views/exec/exec-command/components/exec-command-panel.vue
+++ b/orion-ops-ui/src/views/exec/exec-command/components/exec-command-panel.vue
@@ -259,10 +259,15 @@
   .exec-form-container {
     .selected-host {
       width: 100%;
+      height: 32px;
+      padding: 0 8px;
+      border-radius: 2px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       color: var(--color-text-2);
+      background: var(--color-fill-2);
+      transition: all 0.3s;
 
       &-count {
         font-size: 16px;
@@ -270,13 +275,17 @@
         display: inline-block;
         margin: 0 6px;
       }
+
+      &:hover {
+        background: var(--color-fill-3);
+      }
     }
   }
 
   :deep(.panel-header) {
     width: 100%;
     height: 28px;
-    margin-bottom: 4px;
+    margin-bottom: 12px;
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
diff --git a/orion-ops-ui/src/views/exec/exec-job/components/exec-job-detail-drawer.vue b/orion-ops-ui/src/views/exec/exec-job/components/exec-job-detail-drawer.vue
index 38fee99a..fcf06bb9 100644
--- a/orion-ops-ui/src/views/exec/exec-job/components/exec-job-detail-drawer.vue
+++ b/orion-ops-ui/src/views/exec/exec-job/components/exec-job-detail-drawer.vue
@@ -1,7 +1,7 @@
 <template>
   <a-drawer v-model:visible="visible"
-            title="计划执行任务详情"
-            width="50%"
+            title="计划任务详情"
+            width="60%"
             :mask-closable="false"
             :unmount-on-close="true"
             ok-text="关闭"
@@ -124,7 +124,7 @@
 
 <style lang="less" scoped>
   .detail-container {
-    padding: 24px;
+    padding: 24px 8px 24px 24px;
   }
 
   :deep(.arco-descriptions-item-value) {
diff --git a/orion-ops-ui/src/views/exec/exec-job/components/exec-job-form-drawer.vue b/orion-ops-ui/src/views/exec/exec-job/components/exec-job-form-drawer.vue
index 6b6d4c56..4cb921ea 100644
--- a/orion-ops-ui/src/views/exec/exec-job/components/exec-job-form-drawer.vue
+++ b/orion-ops-ui/src/views/exec/exec-job/components/exec-job-form-drawer.vue
@@ -1,7 +1,7 @@
 <template>
   <a-drawer v-model:visible="visible"
             :title="title"
-            width="70%"
+            width="60%"
             :mask-closable="false"
             :unmount-on-close="true"
             :ok-button-props="{ disabled: loading }"
@@ -11,7 +11,8 @@
     <a-spin class="full spin-wrapper" :loading="loading">
       <a-form :model="formModel"
               ref="formRef"
-              layout="vertical"
+              label-align="left"
+              :auto-label-width="true"
               :rules="formRules">
         <a-row :gutter="16">
           <!-- 任务名称 -->
@@ -74,7 +75,7 @@
                          :wrapper-col-props="{ span: 24 }"
                          :help="'使用 @{{ xxx }} 来替换参数, 输入_可以获取全部变量'">
               <exec-editor v-model="formModel.command"
-                           containerClass="command-editor"
+                           container-class="command-editor"
                            theme="vs-dark"
                            :parameter="jobBuiltinsParams" />
             </a-form-item>
@@ -128,7 +129,7 @@
 
   // 打开新增
   const openAdd = () => {
-    title.value = '添加计划执行';
+    title.value = '添加计划任务';
     isAddHandle.value = true;
     renderForm({ ...defaultForm() });
     setVisible(true);
@@ -136,7 +137,7 @@
 
   // 打开修改
   const openUpdate = async (id: any) => {
-    title.value = '修改计划执行';
+    title.value = '修改计划任务';
     isAddHandle.value = false;
     renderForm({});
     setVisible(true);
@@ -229,6 +230,7 @@
     width: 100%;
     height: 32px;
     padding: 0 8px;
+    border-radius: 2px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -249,7 +251,7 @@
 
   .command-editor {
     width: 100%;
-    height: calc(100vh - 318px);
+    height: calc(100vh - 264px);
   }
 
 </style>
diff --git a/orion-ops-ui/src/views/exec/exec-template/components/exec-template-exec-drawer.vue b/orion-ops-ui/src/views/exec/exec-template/components/exec-template-exec-drawer.vue
index d5760859..af20d6f0 100644
--- a/orion-ops-ui/src/views/exec/exec-template/components/exec-template-exec-drawer.vue
+++ b/orion-ops-ui/src/views/exec/exec-template/components/exec-template-exec-drawer.vue
@@ -1,7 +1,7 @@
 <template>
   <a-drawer v-model:visible="visible"
             title="执行命令"
-            :width="470"
+            width="60%"
             :mask-closable="false"
             :unmount-on-close="true"
             :ok-button-props="{ disabled: loading }"
@@ -12,49 +12,61 @@
       <!-- 命令表单 -->
       <a-form :model="formModel"
               ref="formRef"
+              label-align="left"
+              :auto-label-width="true"
               :rules="formRules">
-        <!-- 执行主机 -->
-        <a-form-item field="hostIdList" label="执行主机">
-          <div class="selected-host">
-            <!-- 已选择数量 -->
-            <span class="usn" v-if="formModel.hostIdList?.length">
-              已选择<span class="selected-host-count span-blue">{{ formModel.hostIdList?.length }}</span>台主机
-            </span>
-            <span class="usn pointer span-blue" @click="openSelectHost">
-              {{ formModel.hostIdList?.length ? '重新选择' : '选择主机' }}
-            </span>
-          </div>
-        </a-form-item>
-        <!-- 执行描述 -->
-        <a-form-item field="description" label="执行描述">
-          <a-input v-model="formModel.description"
-                   placeholder="请输入执行描述"
-                   allow-clear />
-        </a-form-item>
-        <!-- 超时时间 -->
-        <a-form-item field="timeout"
-                     label="超时时间">
-          <a-input-number v-model="formModel.timeout"
-                          placeholder="为0则不超时"
-                          :min="0"
-                          :max="100000"
-                          hide-button>
-            <template #suffix>
-              秒
-            </template>
-          </a-input-number>
-        </a-form-item>
-        <!-- 执行命令 -->
-        <a-form-item field="command"
-                     label="执行命令"
-                     :hide-label="true"
-                     :wrapper-col-props="{ span: 24 }"
-                     :help="'使用 @{{ xxx }} 来替换参数, 输入_可以获取全部变量'">
-          <exec-editor v-model="formModel.command"
-                       containerClass="command-editor"
-                       theme="vs-dark"
-                       :parameter="parameterSchema" />
-        </a-form-item>
+        <a-row :gutter="16">
+          <!-- 执行描述 -->
+          <a-col :span="10">
+            <a-form-item field="description" label="执行描述">
+              <a-input v-model="formModel.description"
+                       placeholder="请输入执行描述"
+                       allow-clear />
+            </a-form-item>
+          </a-col>
+          <!-- 执行主机 -->
+          <a-col :span="7">
+            <a-form-item field="hostIdList" label="执行主机">
+              <div class="selected-host">
+                <!-- 已选择数量 -->
+                <span class="usn" v-if="formModel.hostIdList?.length">
+                  已选择<span class="selected-host-count span-blue">{{ formModel.hostIdList?.length }}</span>台主机
+                </span>
+                <span class="usn pointer span-blue" @click="openSelectHost">
+                  {{ formModel.hostIdList?.length ? '重新选择' : '选择主机' }}
+                </span>
+              </div>
+            </a-form-item>
+          </a-col>
+          <!-- 超时时间 -->
+          <a-col :span="7">
+            <a-form-item field="timeout"
+                         label="超时时间">
+              <a-input-number v-model="formModel.timeout"
+                              placeholder="为0则不超时"
+                              :min="0"
+                              :max="100000"
+                              hide-button>
+                <template #suffix>
+                  秒
+                </template>
+              </a-input-number>
+            </a-form-item>
+          </a-col>
+          <!-- 执行命令 -->
+          <a-col :span="24">
+            <a-form-item field="command"
+                         label="执行命令"
+                         :hide-label="true"
+                         :wrapper-col-props="{ span: 24 }"
+                         :help="'使用 @{{ xxx }} 来替换参数, 输入_可以获取全部变量'">
+              <exec-editor v-model="formModel.command"
+                           container-class="command-editor"
+                           theme="vs-dark"
+                           :parameter="parameterSchema" />
+            </a-form-item>
+          </a-col>
+        </a-row>
       </a-form>
       <!-- 命令参数 -->
       <a-divider v-if="parameterSchema.length"
@@ -66,18 +78,21 @@
       <a-form v-if="parameterSchema.length"
               :model="parameterFormModel"
               ref="parameterFormRef"
-              label-align="right"
-              :label-col-props="{ span: 5 }"
-              :wrapper-col-props="{ span: 18 }">
-        <a-form-item v-for="item in parameterSchema"
-                     :key="item.name"
-                     :field="item.name as string"
-                     :label="item.name"
-                     required>
-          <a-input v-model="parameterFormModel[item.name as string]"
-                   :placeholder="item.desc"
-                   allow-clear />
-        </a-form-item>
+              label-align="left"
+              :auto-label-width="true">
+        <a-row :gutter="16">
+          <a-col v-for="item in parameterSchema"
+                 :key="item.name"
+                 :span="12">
+            <a-form-item :field="item.name as string"
+                         :label="item.name"
+                         required>
+              <a-input v-model="parameterFormModel[item.name as string]"
+                       :placeholder="item.desc"
+                       allow-clear />
+            </a-form-item>
+          </a-col>
+        </a-row>
       </a-form>
     </a-spin>
   </a-drawer>
@@ -206,9 +221,14 @@
 
   .selected-host {
     width: 100%;
+    height: 32px;
+    padding: 0 8px;
+    border-radius: 2px;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    background: var(--color-fill-2);
+    transition: all 0.3s;
 
     &-count {
       font-size: 16px;
@@ -216,11 +236,15 @@
       display: inline-block;
       margin: 0 6px;
     }
+
+    &:hover {
+      background: var(--color-fill-3);
+    }
   }
 
   .command-editor {
     width: 100%;
-    height: 44vh;
+    height: 65vh;
   }
 
 </style>
diff --git a/orion-ops-ui/src/views/exec/exec-template/components/exec-template-form-drawer.vue b/orion-ops-ui/src/views/exec/exec-template/components/exec-template-form-drawer.vue
index a21109d6..472e213d 100644
--- a/orion-ops-ui/src/views/exec/exec-template/components/exec-template-form-drawer.vue
+++ b/orion-ops-ui/src/views/exec/exec-template/components/exec-template-form-drawer.vue
@@ -1,7 +1,7 @@
 <template>
   <a-drawer v-model:visible="visible"
+            width="60%"
             :title="title"
-            :width="470"
             :mask-closable="false"
             :unmount-on-close="true"
             :ok-button-props="{ disabled: loading }"
@@ -11,82 +11,90 @@
     <a-spin class="full modal-form" :loading="loading">
       <a-form :model="formModel"
               ref="formRef"
+              label-align="left"
+              :auto-label-width="true"
               :rules="formRules">
-        <!-- 模板名称 -->
-        <a-form-item field="name" label="模板名称">
-          <a-input v-model="formModel.name"
-                   placeholder="请输入模板名称"
-                   allow-clear />
-        </a-form-item>
-        <!-- 超时时间 -->
-        <a-form-item field="timeout"
-                     label="超时时间">
-          <a-input-number v-model="formModel.timeout"
-                          placeholder="为0则不超时"
-                          :min="0"
-                          :max="100000"
-                          hide-button>
-            <template #suffix>
-              秒
-            </template>
-          </a-input-number>
-        </a-form-item>
-        <!-- 模板命令 -->
-        <a-form-item field="command"
-                     label="模板命令"
-                     :hide-label="true"
-                     :wrapper-col-props="{ span: 24 }"
-                     :help="'使用 @{{ xxx }} 来替换参数, 输入_可以获取全部变量'">
-          <exec-editor v-model="formModel.command"
-                       containerClass="command-editor"
-                       theme="vs-dark"
-                       :parameter="parameter" />
-        </a-form-item>
-        <!-- 命令参数 -->
-        <a-form-item field="parameter"
-                     class="parameter-form-item"
-                     label="命令参数"
-                     :label-col-props="{ span: 24 }"
-                     :wrapper-col-props="{ span: 24 }">
-          <!-- label -->
-          <template #label>
-            <div class="parameter-label-wrapper">
-              <span>命令参数</span>
-              <span class="span-blue pointer" @click="addParameter">添加参数</span>
-            </div>
-          </template>
-          <!-- 参数 -->
-          <template v-if="parameter.length">
-            <a-input-group v-for="(item, i) in parameter"
-                           :key="i"
-                           class="parameter-item"
-                           :class="[ i === parameter.length - 1 ? 'parameter-item-last' : '' ]">
-              <a-input class="parameter-item-name"
-                       v-model="item.name"
-                       placeholder="参数名称 (必填)"
+        <a-row :gutter="16">
+          <!-- 模板名称 -->
+          <a-col :span="14">
+            <a-form-item field="name" label="模板名称">
+              <a-input v-model="formModel.name"
+                       placeholder="请输入模板名称"
                        allow-clear />
-              <a-input class="parameter-item-default"
-                       v-model="item.defaultValue"
-                       placeholder="默认值 (非必填)"
-                       allow-clear />
-              <a-input class="parameter-item-description"
-                       v-model="item.desc"
-                       placeholder="描述 (非必填)"
-                       allow-clear />
-              <span class="parameter-item-close click-icon-wrapper"
-                    title="移除"
-                    @click="removeParameter(i)">
-               <icon-close />
-              </span>
-            </a-input-group>
-          </template>
-          <!-- 无参数 -->
-          <template v-else>
-            <span class="no-parameter">
-              <icon-empty class="mr4" />无参数
-            </span>
-          </template>
-        </a-form-item>
+            </a-form-item>
+          </a-col>
+          <!-- 超时时间 -->
+          <a-col :span="10">
+            <a-form-item field="timeout" label="超时时间">
+              <a-input-number v-model="formModel.timeout"
+                              placeholder="为0则不超时"
+                              :min="0"
+                              :max="100000"
+                              hide-button>
+                <template #suffix>
+                  秒
+                </template>
+              </a-input-number>
+            </a-form-item>
+          </a-col>
+          <!-- 模板命令 -->
+          <a-col :span="24">
+            <a-form-item field="command"
+                         label="模板命令"
+                         :hide-label="true"
+                         :wrapper-col-props="{ span: 24 }"
+                         :help="'使用 @{{ xxx }} 来替换参数, 输入_可以获取全部变量'">
+              <exec-editor v-model="formModel.command"
+                           container-class="command-editor"
+                           theme="vs-dark"
+                           :parameter="parameter" />
+            </a-form-item>
+          </a-col>
+          <!-- 命令参数 -->
+          <a-col :span="24">
+            <a-form-item field="parameter"
+                         class="parameter-form-item"
+                         label="命令参数"
+                         :label-col-props="{ span: 24 }"
+                         :wrapper-col-props="{ span: 24 }">
+              <!-- label -->
+              <template #label>
+                <span class="span-blue pointer" @click="addParameter">添加参数</span>
+              </template>
+              <!-- 参数 -->
+              <template v-if="parameter.length">
+                <a-input-group v-for="(item, i) in parameter"
+                               :key="i"
+                               class="parameter-item"
+                               :class="[ i === parameter.length - 1 ? 'parameter-item-last' : '' ]">
+                  <a-input class="parameter-item-name"
+                           v-model="item.name"
+                           placeholder="参数名称 (必填)"
+                           allow-clear />
+                  <a-input class="parameter-item-default"
+                           v-model="item.defaultValue"
+                           placeholder="默认值 (非必填)"
+                           allow-clear />
+                  <a-input class="parameter-item-description"
+                           v-model="item.desc"
+                           placeholder="描述 (非必填)"
+                           allow-clear />
+                  <span class="parameter-item-close click-icon-wrapper"
+                        title="移除"
+                        @click="removeParameter(i)">
+                   <icon-close />
+                  </span>
+                </a-input-group>
+              </template>
+              <!-- 无参数 -->
+              <template v-else>
+                <span class="no-parameter">
+                  <icon-empty class="mr4" />无参数
+                </span>
+              </template>
+            </a-form-item>
+          </a-col>
+        </a-row>
       </a-form>
     </a-spin>
   </a-drawer>
@@ -224,16 +232,7 @@
 <style lang="less" scoped>
   .parameter-form-item {
     user-select: none;
-
-    :deep(.arco-form-item-label) {
-      width: 100%;
-    }
-
-    .parameter-label-wrapper {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
+    margin-top: 4px;
 
     :deep(.arco-form-item-content) {
       flex-direction: column;
@@ -244,6 +243,7 @@
     }
 
     .parameter-item {
+      width: 100%;
       margin-bottom: 12px;
       display: flex;
       justify-content: space-between;
@@ -295,7 +295,7 @@
 
   .command-editor {
     width: 100%;
-    height: 50vh;
+    height: 65vh;
   }
 
 </style>
diff --git a/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-form-drawer.vue b/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-form-drawer.vue
index 467f5f6d..9ae8b610 100644
--- a/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-form-drawer.vue
+++ b/orion-ops-ui/src/views/host/command-snippet/components/command-snippet-form-drawer.vue
@@ -1,7 +1,7 @@
 <template>
   <a-drawer v-model:visible="visible"
+            width="40%"
             :title="title"
-            :width="388"
             :mask-closable="false"
             :unmount-on-close="true"
             :ok-button-props="{ disabled: loading }"
@@ -11,10 +11,8 @@
     <a-spin class="full form-container" :loading="loading">
       <a-form :model="formModel"
               ref="formRef"
-              label-align="right"
-              layout="vertical"
-              :label-col-props="{ span: 6 }"
-              :wrapper-col-props="{ span: 18 }"
+              label-align="left"
+              :auto-label-width="true"
               :rules="formRules">
         <!-- 名称 -->
         <a-form-item field="name" label="名称">
@@ -29,9 +27,9 @@
         <!-- 代码片段 -->
         <a-form-item field="command"
                      label="代码片段"
-                     style="margin: 0;">
+                     :hide-label="true">
           <editor v-model="formModel.command"
-                  containerClass="command-editor"
+                  container-class="command-editor"
                   language="shell"
                   theme="vs-dark"
                   :suggestions="true"
@@ -145,11 +143,11 @@
 
 <style lang="less" scoped>
   .form-container {
-    padding: 12px;
+    padding: 16px;
   }
 
   .command-editor {
-    height: calc(100vh - 330px);
+    height: calc(100vh - 262px);
   }
 
 </style>
diff --git a/orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue b/orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue
index ec74522b..428fdc65 100644
--- a/orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue
+++ b/orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue
@@ -221,6 +221,8 @@
       setLoading(true);
       await refreshCache();
       Message.success('刷新成功 页面缓存刷新后生效');
+      // 加载字典数据
+      fetchTableData();
     } catch (e) {
     } finally {
       setLoading(false);
diff --git a/orion-ops-ui/src/views/system/menu/components/menu-table.vue b/orion-ops-ui/src/views/system/menu/components/menu-table.vue
index 2a59c86f..41894352 100644
--- a/orion-ops-ui/src/views/system/menu/components/menu-table.vue
+++ b/orion-ops-ui/src/views/system/menu/components/menu-table.vue
@@ -296,6 +296,8 @@
       setFetchLoading(true);
       await refreshCache();
       Message.success('刷新成功 页面缓存刷新后生效');
+      // 加载菜单数据
+      await loadMenuData(true);
     } catch (e) {
     } finally {
       setFetchLoading(false);