💄 修改表单宽度.

orion-ops-framework/orion-ops-spring-boot-starter-mybatis/src/main/resources/templates/orion-vue-views-components-card-list.vue.vm

@@ -20,7 +20,6 @@
               size="small"
               ref="formRef"
               label-align="right"
-              :style="{ width: '320px' }"
               :label-col-props="{ span: 6 }"
               :wrapper-col-props="{ span: 18 }"
               @keyup.enter="() => fetchCardData()">

orion-ops-framework/orion-ops-spring-boot-starter-mybatis/src/main/resources/templates/orion-vue-views-components-form-drawer.vue.vm

@@ -1,19 +1,18 @@
 <template>
   <a-drawer v-model:visible="visible"
             :title="title"
-            :width="430"
+            :width="470"
             :mask-closable="false"
             :unmount-on-close="true"
             :ok-button-props="{ disabled: loading }"
             :cancel-button-props="{ disabled: loading }"
             :on-before-ok="handlerOk"
             @cancel="handleClose">
-    <a-spin class="full" :loading="loading">
+    <a-spin class="full modal-form" :loading="loading">
       <a-form :model="formModel"
               ref="formRef"
               label-align="right"
-              :style="{ width: '380px' }"
+              :label-col-props="{ span: 5 }"
-              :label-col-props="{ span: 6 }"
               :wrapper-col-props="{ span: 18 }"
               :rules="formRules">
         #foreach($field in ${table.fields})

orion-ops-framework/orion-ops-spring-boot-starter-mybatis/src/main/resources/templates/orion-vue-views-components-form-modal.vue.vm

@@ -16,8 +16,7 @@
       <a-form :model="formModel"
               ref="formRef"
               label-align="right"
-              :style="{ width: '460px' }"
+              :label-col-props="{ span: 5 }"
-              :label-col-props="{ span: 6 }"
               :wrapper-col-props="{ span: 18 }"
               :rules="formRules">
         #foreach($field in ${table.fields})

orion-ops-ui/src/assets/style/layout.less

@@ -112,11 +112,21 @@
 }
 
 .card-filter-wrapper {
-  padding: 18px 24px 14px 24px;
+  padding: 18px 24px;
-}
 
-.card-filter-form {
+  .card-filter-form {
-  padding: 0 4px;
+    width: 320px;
+  }
+
+  .card-filter-container {
+    display: flex;
+    flex-direction: column;
+
+    .card-filter-footer {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
 }
 
 .card-header-icon-wrapper {

orion-ops-ui/src/components/meta/history/modal/index.vue

@@ -1,6 +1,5 @@
 <template>
   <a-modal v-model:visible="visible"
-           body-class="modal-form"
            title-align="start"
            :title="title"
            :width="960"

orion-ops-ui/src/components/user/user/update-password-modal/index.vue

@@ -17,8 +17,7 @@
               ref="formRef"
               label-align="right"
               :rules="rules"
-              :style="{ width: '460px' }"
+              :label-col-props="{ span: 5 }"
-              :label-col-props="{ span: 6 }"
               :wrapper-col-props="{ span: 18 }">
         <!-- 密码 -->
         <a-form-item field="beforePassword" label="原始密码">

orion-ops-ui/src/components/view/card-list/components/card-header.vue

@@ -63,14 +63,16 @@
                 </a-badge>
               </div>
               <template #content>
-                <!-- 过滤表单 -->
+                <div class="card-filter-container">
-                <slot name="filterContent" />
+                  <!-- 过滤表单 -->
-                <!-- 操作按钮 -->
+                  <slot name="filterContent" />
-                <div class="filter-bottom-container">
+                  <!-- 操作按钮 -->
-                  <a-space>
+                  <div class="card-filter-footer">
-                    <a-button size="mini" @click="filterReset">重置</a-button>
+                    <a-space>
-                    <a-button size="mini" type="primary" @click="filterSearch">过滤</a-button>
+                      <a-button size="mini" @click="filterReset">重置</a-button>
-                  </a-space>
+                      <a-button size="mini" type="primary" @click="filterSearch">过滤</a-button>
+                    </a-space>
+                  </div>
                 </div>
               </template>
             </a-popover>

orion-ops-ui/src/views/asset-audit/connect-log/components/connect-log-clear-modal.vue

@@ -15,9 +15,8 @@
     <a-spin class="full" :loading="loading">
       <a-form :model="formModel"
               label-align="right"
-              :style="{ width: '460px' }"
               :label-col-props="{ span: 5 }"
-              :wrapper-col-props="{ span: 19 }">
+              :wrapper-col-props="{ span: 18 }">
         <!-- 连接用户 -->
         <a-form-item field="userId" label="连接用户">
           <user-selector v-model="formModel.userId"

orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue

@@ -40,7 +40,6 @@
               size="small"
               ref="formRef"
               label-align="right"
-              :style="{ width: '320px' }"
               :label-col-props="{ span: 6 }"
               :wrapper-col-props="{ span: 18 }"
               @keyup.enter="() => fetchCardData()">

orion-ops-ui/src/views/asset/host-identity/components/host-identity-form-modal.vue

@@ -16,8 +16,7 @@
       <a-form :model="formModel"
               ref="formRef"
               label-align="right"
-              :style="{ width: '460px' }"
+              :label-col-props="{ span: 5 }"
-              :label-col-props="{ span: 6 }"
               :wrapper-col-props="{ span: 18 }"
               :rules="formRules">
         <!-- 名称 -->
@@ -31,7 +30,6 @@
         <!-- 用户密码 -->
         <a-form-item field="password"
                      label="用户密码"
-                     style="justify-content: space-between;"
                      :rules="passwordRules">
           <a-input-password v-model="formModel.password"
                             :disabled="!isAddHandle && !formModel.useNewPassword"
@@ -182,8 +180,10 @@
 </script>
 
 <style lang="less" scoped>
+  @switch-width: 94px;
+
   .password-input {
-    width: 240px;
+    width: calc(100% - @switch-width);
   }
 
   .password-input-full {
@@ -191,6 +191,7 @@
   }
 
   .password-switch {
+    width: @switch-width;
     margin-left: 16px;
   }
 </style>

orion-ops-ui/src/views/asset/host-key/components/host-key-form-drawer.vue

@@ -8,14 +8,13 @@
             :cancel-button-props="{ disabled: loading }"
             :on-before-ok="handlerOk"
             @cancel="handleClose">
-    <a-spin class="form-wrapper" :loading="loading">
+    <a-spin class="full modal-form" :loading="loading">
       <a-alert class="keygen-alert">
         请使用 ssh-keygen -m PEM -t rsa 生成秘钥
       </a-alert>
       <a-form :model="formModel"
               ref="formRef"
               label-align="right"
-              :style="{ width: '420px' }"
               :label-col-props="{ span: 4 }"
               :wrapper-col-props="{ span: 20 }"
               :rules="formRules">
@@ -61,7 +60,6 @@
         <a-form-item v-if="!isViewHandler"
                      field="password"
                      label="密码"
-                     style="justify-content: space-between;"
                      :rules="passwordRules">
           <a-input-password v-model="formModel.password"
                             :disabled="!isAddHandle && !formModel.useNewPassword"
@@ -234,6 +232,8 @@
 </script>
 
 <style lang="less" scoped>
+  @switch-width: 94px;
+
   .form-wrapper {
     width: 100%;
     padding: 12px 12px 0 12px;
@@ -241,11 +241,11 @@
 
   .keygen-alert {
     margin: 0 0 12px 16px;
-    width: calc(100% - 42px);
+    width: 408px;
   }
 
   .password-input {
-    width: 240px;
+    width: calc(100% - @switch-width);
   }
 
   .password-input-full {
@@ -253,6 +253,7 @@
   }
 
   .password-switch {
+    width: @switch-width;
     margin-left: 16px;
   }
 </style>

orion-ops-ui/src/views/asset/host-list/components/config/ssh/ssh-config-form.vue

@@ -120,8 +120,15 @@
       <!-- 操作按钮 -->
       <div class="config-button-group">
         <a-space>
-          <a-button @click="resetConfig">重置</a-button>
+          <a-button size="small"
-          <a-button type="primary" @click="saveConfig">保存</a-button>
+                    @click="resetConfig">
+            重置
+          </a-button>
+          <a-button type="primary"
+                    size="small"
+                    @click="saveConfig">
+            保存
+          </a-button>
         </a-space>
       </div>
     </a-spin>

orion-ops-ui/src/views/asset/host-list/components/host-card-list.vue

@@ -49,7 +49,6 @@
               size="small"
               ref="formRef"
               label-align="right"
-              :style="{ width: '320px' }"
               :label-col-props="{ span: 6 }"
               :wrapper-col-props="{ span: 18 }"
               @keyup.enter="() => fetchCardData()">

orion-ops-ui/src/views/asset/host-list/components/host-form-modal.vue

@@ -16,8 +16,7 @@
       <a-form :model="formModel"
               ref="formRef"
               label-align="right"
-              :style="{ width: '460px' }"
+              :label-col-props="{ span: 5 }"
-              :label-col-props="{ span: 6 }"
               :wrapper-col-props="{ span: 18 }"
               :rules="formRules">
         <!-- 主机名称 -->

orion-ops-ui/src/views/exec/exec-template/components/exec-template-form-drawer.vue

@@ -1,19 +1,18 @@
 <template>
   <a-drawer v-model:visible="visible"
             :title="title"
-            :width="430"
+            :width="470"
             :mask-closable="false"
             :unmount-on-close="true"
             :ok-button-props="{ disabled: loading }"
             :cancel-button-props="{ disabled: loading }"
             :on-before-ok="handlerOk"
             @cancel="handleClose">
-    <a-spin class="full" :loading="loading">
+    <a-spin class="full modal-form" :loading="loading">
       <a-form :model="formModel"
               ref="formRef"
               label-align="right"
-              :style="{ width: '380px' }"
+              :label-col-props="{ span: 5 }"
-              :label-col-props="{ span: 6 }"
               :wrapper-col-props="{ span: 18 }"
               :rules="formRules">
         <!-- 名称 -->
@@ -28,10 +27,10 @@
                    placeholder="请输入命令"
                    allow-clear/>
         </a-form-item>
-        <!-- 超时时间秒 0不超时 -->
+        <!-- 超时时间 -->
-        <a-form-item field="timeout" label="超时时间秒 0不超时">
+        <a-form-item field="timeout" label="超时时间">
           <a-input-number v-model="formModel.timeout"
-                          placeholder="请输入超时时间秒 0不超时"
+                          placeholder="请输入超时时间 秒 0不超时"
                           hide-button />
         </a-form-item>
         <!-- 参数 -->

orion-ops-ui/src/views/exec/exec-template/types/form.rules.ts

@@ -15,7 +15,7 @@ export const command = [{
 
 export const timeout = [{
   required: true,
-  message: '请输入超时时间秒 0不超时'
+  message: '请输入超时时间 秒 0不超时'
 }] as FieldRule[];
 
 export const parameter = [{

orion-ops-ui/src/views/exec/exec-template/types/table.columns.ts

@@ -14,6 +14,7 @@ const columns = [
     dataIndex: 'name',
     slotName: 'name',
     align: 'left',
+    width: 200,
     ellipsis: true,
     tooltip: true,
   }, {
@@ -23,18 +24,6 @@ const columns = [
     align: 'left',
     ellipsis: true,
     tooltip: true,
-  }, {
-    title: '超时时间',
-    dataIndex: 'timeout',
-    slotName: 'timeout',
-    align: 'left',
-  }, {
-    title: '参数',
-    dataIndex: 'parameter',
-    slotName: 'parameter',
-    align: 'left',
-    ellipsis: true,
-    tooltip: true,
   }, {
     title: '修改时间',
     dataIndex: 'updateTime',
@@ -48,10 +37,12 @@ const columns = [
     title: '修改人',
     dataIndex: 'updater',
     slotName: 'updater',
+    width: 90,
+    ellipsis: true,
   }, {
     title: '操作',
     slotName: 'handle',
-    width: 130,
+    width: 180,
     align: 'center',
     fixed: 'right',
   },

orion-ops-ui/src/views/host/terminal/components/sftp/sftp-chmod-modal.vue

@@ -10,8 +10,7 @@
     <a-form :model="formModel"
             ref="formRef"
             label-align="right"
-            :style="{ width: '460px' }"
+            :label-col-props="{ span: 5 }"
-            :label-col-props="{ span: 6 }"
             :wrapper-col-props="{ span: 18 }">
       <!-- 文件路径 -->
       <a-form-item field="path"

orion-ops-ui/src/views/host/terminal/components/sftp/sftp-create-modal.vue

@@ -10,8 +10,7 @@
     <a-form :model="formModel"
             ref="formRef"
             label-align="right"
-            :style="{ width: '460px' }"
+            :label-col-props="{ span: 5 }"
-            :label-col-props="{ span: 6 }"
             :wrapper-col-props="{ span: 18 }">
       <!-- 文件路径 -->
       <a-form-item field="path"

orion-ops-ui/src/views/host/terminal/components/sftp/sftp-move-modal.vue

@@ -10,8 +10,7 @@
     <a-form :model="formModel"
             ref="formRef"
             label-align="right"
-            :style="{ width: '460px' }"
+            :label-col-props="{ span: 5 }"
-            :label-col-props="{ span: 6 }"
             :wrapper-col-props="{ span: 18 }">
       <!-- 原始路径 -->
       <a-form-item field="path"

orion-ops-ui/src/views/system/dict-key/components/dict-key-form-modal.vue

@@ -1,7 +1,5 @@
 <template>
   <a-modal v-model:visible="visible"
-           body-class="modal-form"
-           :body-style="{'padding-bottom': '24px'}"
            title-align="start"
            :title="title"
            :top="80"
@@ -17,8 +15,7 @@
       <a-form :model="formModel"
               ref="formRef"
               label-align="right"
-              :style="{ width: '460px' }"
+              :label-col-props="{ span: 5 }"
-              :label-col-props="{ span: 6 }"
               :wrapper-col-props="{ span: 18 }"
               :rules="formRules">
         <!-- 配置项 -->
@@ -41,16 +38,16 @@
                      :key="index"
                      :field="`extra${index + 1}`"
                      :label="`额外参数 ${index + 1}`">
-          <a-input-group>
+          <a-input-group style="width: 100%;">
             <!-- 参数类型 -->
             <a-select v-model="schema.type"
                       :options="toOptions(dictValueTypeKey)"
                       placeholder="类型"
-                      :style="{ width: '110px' }" />
+                      :style="{ width: '35%' }" />
             <!-- 参数值 -->
             <a-input v-model="schema.name"
                      placeholder="参数名称"
-                     :style="{ width: '196px' }" />
+                     :style="{ width: '65%' }" />
           </a-input-group>
           <!-- 操作按钮 -->
           <div class="extra-action">
@@ -250,13 +247,17 @@
 </script>
 
 <style lang="less" scoped>
+
   .minus-icon-wrapper {
+    width: 32px;
+    height: 32px;
     margin-left: 8px;
     font-size: 18px;
     padding: 6px;
   }
 
   .param-addition {
+    margin-right: 20px;
     justify-content: flex-end;
     cursor: pointer;
     user-select: none;

orion-ops-ui/src/views/system/dict-value/components/dict-value-form-modal.vue

@@ -16,8 +16,7 @@
       <a-form :model="formModel"
               ref="formRef"
               label-align="right"
-              :style="{ width: '460px' }"
+              :label-col-props="{ span: 5 }"
-              :label-col-props="{ span: 6 }"
               :wrapper-col-props="{ span: 18 }"
               :rules="formRules">
         <!-- 配置项 -->

orion-ops-ui/src/views/system/menu/components/menu-form-modal.vue

@@ -16,9 +16,8 @@
       <a-form :model="formModel"
               ref="formRef"
               label-align="right"
-              :style="{ width: '460px' }"
               :label-col-props="{ span: 7 }"
-              :wrapper-col-props="{ span: 17 }"
+              :wrapper-col-props="{ span: 16 }"
               :rules="formRules">
         <!-- 上级菜单 -->
         <a-form-item field="parentId" label="上级菜单">

orion-ops-ui/src/views/user/operator-log/components/operator-log-clear-modal.vue

@@ -15,9 +15,8 @@
     <a-spin class="full" :loading="loading">
       <a-form :model="formModel"
               label-align="right"
-              :style="{ width: '460px' }"
               :label-col-props="{ span: 5 }"
-              :wrapper-col-props="{ span: 19 }">
+              :wrapper-col-props="{ span: 18 }">
         <!-- 操作用户 -->
         <a-form-item field="userId"
                      label="操作用户"

orion-ops-ui/src/views/user/role/components/role-form-modal.vue

@@ -16,8 +16,7 @@
       <a-form :model="formModel"
               ref="formRef"
               label-align="right"
-              :style="{ width: '460px' }"
+              :label-col-props="{ span: 5 }"
-              :label-col-props="{ span: 6 }"
               :wrapper-col-props="{ span: 18 }"
               :rules="formRules">
         <!-- 角色名称 -->

orion-ops-ui/src/views/user/user/components/user-form-modal.vue

@@ -16,8 +16,7 @@
       <a-form :model="formModel"
               ref="formRef"
               label-align="right"
-              :style="{ width: '460px' }"
+              :label-col-props="{ span: 5 }"
-              :label-col-props="{ span: 6 }"
               :wrapper-col-props="{ span: 18 }"
               :rules="formRules">
         <!-- 用户名 -->

orion-ops-ui/src/views/user/user/components/user-grant-roles-form-modal.vue

@@ -16,8 +16,7 @@
       <a-form :model="formModel"
               ref="formRef"
               label-align="right"
-              :style="{ width: '460px' }"
+              :label-col-props="{ span: 5 }"
-              :label-col-props="{ span: 6 }"
               :wrapper-col-props="{ span: 18 }">
         <!-- 用户名 -->
         <a-form-item field="username" label="用户名">

orion-ops-ui/src/views/user/user/components/user-reset-password-form-modal.vue

@@ -16,8 +16,7 @@
       <a-form :model="formModel"
               ref="formRef"
               label-align="right"
-              :style="{ width: '460px' }"
+              :label-col-props="{ span: 5 }"
-              :label-col-props="{ span: 6 }"
               :wrapper-col-props="{ span: 18 }">
         <!-- 用户名 -->
         <a-form-item field="username" label="用户名">