perf: 优化布局

src/components/Form/DataForm/components/el-form-renderer/components/render-form-item.vue

@@ -1,6 +1,7 @@
 <template>
   <el-form-item
     v-show="_show"
+    :class="'el-form-item-' + data.prop"
     :label="data.label"
     :prop="prop"
     :rules="_show && Array.isArray(data.rules) ? data.rules : []"

src/components/Table/ListTable/TableAction/LeftSide.vue

@@ -126,6 +126,7 @@ export default {
           type: 'primary',
           has: this.hasCreate && !this.moreCreates,
           can: this.canCreate,
+          icon: 'plus',
           callback: this.onCreate || this.handleCreate
         }
       ]

src/components/Table/TableFormatters/DeleteActionFormatter.vue

@@ -2,6 +2,7 @@
   <el-button
     ref="deleteButton"
     :disabled="iDisabled"
+    :title="$t('Remove')"
     size="mini"
     type="danger"
     @click="onDelete(col, row, cellValue, reload)"

src/icons/svg/plus.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.0605 10L24.0239 38" stroke="#ffffff" stroke-width="4" stroke-linecap="square" stroke-linejoin="bevel"/><path d="M10 24L38 24" stroke="#ffffff" stroke-width="4" stroke-linecap="square" stroke-linejoin="bevel"/></svg>

src/layout/components/GenericDetailPage/index.vue

@@ -8,7 +8,7 @@
   >
     <template #headingRightSide>
       <span v-if="hasRightSide">
-        <ActionsGroup slot="headingRightSide" :actions="pageActions" />
+        <ActionsGroup slot="headingRightSide" :actions="pageActions" class="header-buttons" />
       </span>
     </template>
     <slot />
@@ -137,6 +137,7 @@ export default {
           name: 'update',
           title: this.$t('Update'),
           icon: 'el-icon-edit-outline',
+          size: 'small',
           can: this.validActions.canUpdate,
           has: this.validActions.hasUpdate,
           callback: this.validActions.updateCallback.bind(this)
@@ -147,6 +148,7 @@ export default {
           type: 'danger',
           plain: true,
           icon: 'el-icon-delete',
+          size: 'small',
           can: this.validActions.canDelete,
           has: this.validActions.hasDelete,
           callback: this.validActions.deleteCallback.bind(this)
@@ -258,18 +260,7 @@ export default {
 </script>
 
 <style scoped>
-  .page-submenu >>> .el-tabs__header {
-    background-color: white;
-    margin-left: -25px;
-    padding-left: 25px;
-    margin-right: -25px;
-    padding-right: 25px;
-    margin-top: -30px;
-    /*margin: 0;*/
-    /*background-color: #f3f3f4;*/
-  }
-
-  .page-submenu >>> .el-tabs__nav-wrap {
-    position: static;
+  .header-buttons {
+    z-index: 999;
   }
 </style>

src/layout/components/NavHeader/Organization.vue

@@ -10,7 +10,6 @@
   >
     <template slot="prefix">
       <svg-icon icon-class="organization" />
-      <span class="line" />
     </template>
 
     <el-option-group
@@ -78,7 +77,7 @@ export default {
             id: 'list',
             icon: 'list',
             disabled: !this.$hasPerm('orgs.view_organization'),
-            name: this.$t('OrganizationLists')
+            name: this.$t('OrganizationManage')
           }
         ]
       }
@@ -88,7 +87,7 @@ export default {
     },
     orgChoicesGroup() {
       return {
-        label: this.$t('AllOrganization'),
+        label: this.$t('ChangeOrganization'),
         options: this.usingOrgs
       }
     },
@@ -154,7 +153,7 @@ $height: 28px;
 
 .line {
   width: 1px;
-  margin-left: 8px;
+  margin-left: 5px;
   border: .5px solid #FFF;
   opacity: 0.4;
 }

src/layout/components/Page/PageContent.vue

@@ -12,8 +12,7 @@ export default {
 
 <style scoped>
   .wrapper-content {
-    padding: 12px 24px 22px;
-    max-width: 1200px;
+    padding: 12px 30px 22px;
   }
 
   .wrapper-content >>> .el-alert {

src/layout/components/TabPage/index.vue

@@ -157,7 +157,7 @@ export default {
   padding-left: 25px;
   margin-right: -25px;
   padding-right: 25px;
-  margin-top: -30px;
+  margin-top: -23px;
   width: 100vw;
 
   .el-tabs__item {

src/styles/index.scss

@@ -383,3 +383,6 @@ button, input, optgroup, select, textarea {
     line-height: 1.5;
   }
 }
+.form-group-header {
+  text-align: left;
+}

src/views/users/Group/UserGroupDetail/GroupUser.vue

@@ -68,7 +68,7 @@ export default {
       tableConfig: {
         url: `/api/v1/users/users/?group_id=${this.object.id}`,
         columns: [
-          'name', 'username', 'email', 'is_valid', 'delete_action'
+          'name', 'username', 'is_valid', 'delete_action'
         ],
         columnsMeta: {
           name: {

src/views/users/User/UserCreateUpdate.vue

@@ -1,5 +1,5 @@
 <template>
-  <GenericCreateUpdatePage v-if="!loading" v-bind="$data" @getObjectDone="afterGetUser" />
+  <GenericCreateUpdatePage v-if="!loading" class="user-create-update" v-bind="$data" @getObjectDone="afterGetUser" />
 </template>
 
 <script>
@@ -25,7 +25,7 @@ export default {
         'can_public_key_auth': false
       },
       fields: [
-        [this.$t('Account'), ['name', 'username', 'email', 'groups']],
+        [this.$t('Basic'), ['name', 'username', 'email', 'groups']],
         [this.$t('Authentication'), [
           'password_strategy', 'update_password', 'password',
           'need_update_password', 'mfa_level', 'source'
@@ -219,5 +219,13 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
+.user-create-update >>> .el-form-item-need_update_password {
+  margin-top: -10px;
+
+  .el-form-item__content label {
+    line-height: 30px;
+  }
+}
+
 </style>