💄 修改表单宽度.

2024-03-08 13:42:54 +08:00
parent 4cef9b358e
commit b392ddf0e7
28 changed files with 80 additions and 87 deletions
--- a/orion-ops-framework/orion-ops-spring-boot-starter-mybatis/src/main/resources/templates/orion-vue-views-components-card-list.vue.vm
+++ b/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()">
--- a/orion-ops-framework/orion-ops-spring-boot-starter-mybatis/src/main/resources/templates/orion-vue-views-components-form-drawer.vue.vm
+++ b/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: 6 }"
+              :label-col-props="{ span: 5 }"
              :wrapper-col-props="{ span: 18 }"
              :rules="formRules">
        #foreach($field in ${table.fields})
--- a/orion-ops-framework/orion-ops-spring-boot-starter-mybatis/src/main/resources/templates/orion-vue-views-components-form-modal.vue.vm
+++ b/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: 6 }"
+              :label-col-props="{ span: 5 }"
              :wrapper-col-props="{ span: 18 }"
              :rules="formRules">
        #foreach($field in ${table.fields})
--- a/orion-ops-ui/src/assets/style/layout.less
+++ b/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 {
-  padding: 0 4px;
+  .card-filter-form {
+    width: 320px;
+  }
+
+  .card-filter-container {
+    display: flex;
+    flex-direction: column;
+
+    .card-filter-footer {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
 }

 .card-header-icon-wrapper {
--- a/orion-ops-ui/src/components/meta/history/modal/index.vue
+++ b/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"
--- a/orion-ops-ui/src/components/user/user/update-password-modal/index.vue
+++ b/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: 6 }"
+              :label-col-props="{ span: 5 }"
              :wrapper-col-props="{ span: 18 }">
        <!-- 密码 -->
        <a-form-item field="beforePassword" label="原始密码">
--- a/orion-ops-ui/src/components/view/card-list/components/card-header.vue
+++ b/orion-ops-ui/src/components/view/card-list/components/card-header.vue
@@ -63,14 +63,16 @@
                </a-badge>
              </div>
              <template #content>
-                <!-- 过滤表单 -->
-                <slot name="filterContent" />
-                <!-- 操作按钮 -->
-                <div class="filter-bottom-container">
-                  <a-space>
-                    <a-button size="mini" @click="filterReset">重置</a-button>
-                    <a-button size="mini" type="primary" @click="filterSearch">过滤</a-button>
-                  </a-space>
+                <div class="card-filter-container">
+                  <!-- 过滤表单 -->
+                  <slot name="filterContent" />
+                  <!-- 操作按钮 -->
+                  <div class="card-filter-footer">
+                    <a-space>
+                      <a-button size="mini" @click="filterReset">重置</a-button>
+                      <a-button size="mini" type="primary" @click="filterSearch">过滤</a-button>
+                    </a-space>
+                  </div>
                </div>
              </template>
            </a-popover>
--- a/orion-ops-ui/src/views/asset-audit/connect-log/components/connect-log-clear-modal.vue
+++ b/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"
--- a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue
+++ b/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()">
--- a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-form-modal.vue
+++ b/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: 6 }"
+              :label-col-props="{ span: 5 }"
              :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>
--- a/orion-ops-ui/src/views/asset/host-key/components/host-key-form-drawer.vue
+++ b/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>
--- a/orion-ops-ui/src/views/asset/host-list/components/config/ssh/ssh-config-form.vue
+++ b/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 type="primary" @click="saveConfig">保存</a-button>
+          <a-button size="small"
+                    @click="resetConfig">
+            重置
+          </a-button>
+          <a-button type="primary"
+                    size="small"
+                    @click="saveConfig">
+            保存
+          </a-button>
        </a-space>
      </div>
    </a-spin>
--- a/orion-ops-ui/src/views/asset/host-list/components/host-card-list.vue
+++ b/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()">
--- a/orion-ops-ui/src/views/asset/host-list/components/host-form-modal.vue
+++ b/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: 6 }"
+              :label-col-props="{ span: 5 }"
              :wrapper-col-props="{ span: 18 }"
              :rules="formRules">
        <!-- 主机名称 -->
--- 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,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: 6 }"
+              :label-col-props="{ span: 5 }"
              :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>
        <!-- 参数 -->
--- a/orion-ops-ui/src/views/exec/exec-template/types/form.rules.ts
+++ b/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 = [{
--- a/orion-ops-ui/src/views/exec/exec-template/types/table.columns.ts
+++ b/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',
  },
--- a/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-chmod-modal.vue
+++ b/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: 6 }"
+            :label-col-props="{ span: 5 }"
            :wrapper-col-props="{ span: 18 }">
      <!-- 文件路径 -->
      <a-form-item field="path"
--- a/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-create-modal.vue
+++ b/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: 6 }"
+            :label-col-props="{ span: 5 }"
            :wrapper-col-props="{ span: 18 }">
      <!-- 文件路径 -->
      <a-form-item field="path"
--- a/orion-ops-ui/src/views/host/terminal/components/sftp/sftp-move-modal.vue
+++ b/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: 6 }"
+            :label-col-props="{ span: 5 }"
            :wrapper-col-props="{ span: 18 }">
      <!-- 原始路径 -->
      <a-form-item field="path"
--- a/orion-ops-ui/src/views/system/dict-key/components/dict-key-form-modal.vue
+++ b/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: 6 }"
+              :label-col-props="{ span: 5 }"
              :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;
--- a/orion-ops-ui/src/views/system/dict-value/components/dict-value-form-modal.vue
+++ b/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: 6 }"
+              :label-col-props="{ span: 5 }"
              :wrapper-col-props="{ span: 18 }"
              :rules="formRules">
        <!-- 配置项 -->
--- a/orion-ops-ui/src/views/system/menu/components/menu-form-modal.vue
+++ b/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="上级菜单">
--- a/orion-ops-ui/src/views/user/operator-log/components/operator-log-clear-modal.vue
+++ b/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="操作用户"
--- a/orion-ops-ui/src/views/user/role/components/role-form-modal.vue
+++ b/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: 6 }"
+              :label-col-props="{ span: 5 }"
              :wrapper-col-props="{ span: 18 }"
              :rules="formRules">
        <!-- 角色名称 -->
--- a/orion-ops-ui/src/views/user/user/components/user-form-modal.vue
+++ b/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: 6 }"
+              :label-col-props="{ span: 5 }"
              :wrapper-col-props="{ span: 18 }"
              :rules="formRules">
        <!-- 用户名 -->
--- a/orion-ops-ui/src/views/user/user/components/user-grant-roles-form-modal.vue
+++ b/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: 6 }"
+              :label-col-props="{ span: 5 }"
              :wrapper-col-props="{ span: 18 }">
        <!-- 用户名 -->
        <a-form-item field="username" label="用户名">
--- a/orion-ops-ui/src/views/user/user/components/user-reset-password-form-modal.vue
+++ b/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: 6 }"
+              :label-col-props="{ span: 5 }"
              :wrapper-col-props="{ span: 18 }">
        <!-- 用户名 -->
        <a-form-item field="username" label="用户名">