perf: update detail

src/components/Cards/DetailCard/index.vue

@@ -4,12 +4,14 @@
       <template v-for="item in items">
         <el-form-item v-if="item.has !== false" :key="item.key" :class="item.class" :label="item.key">
           <span slot="label"> {{ formateLabel(item.key) }}</span>
-          <span
+          <span class="item-value">
-            :is="item.component"
+            <template
-            v-if="item.component"
+              :is="item.component"
-            v-bind="{...item}"
+              v-if="item.component"
-          />
+              v-bind="{...item}"
-          <ItemValue v-else :value="item.value" class="item-value" v-bind="item" />
+            />
+            <ItemValue v-else :value="item.value" v-bind="item" />
+          </span>
         </el-form-item>
       </template>
     </el-form>
@@ -44,7 +46,7 @@ export default {
     },
     labelWidth: {
       type: String,
-      default: ''
+      default: '120px'
     }
   },
   data() {
@@ -78,7 +80,7 @@ export default {
     border-bottom: 1px dashed #F4F4F4;
     padding: 1px 0;
     margin-bottom: 0;
-    text-align: end;
+    //text-align: end;
     line-height: 1.2;
 
     &:last-child {
@@ -131,6 +133,7 @@ export default {
       word-break: break-word;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
+      vertical-align: middle;
     }
   }
 }

src/components/Table/TableFormatters/DetailFormatter.vue

@@ -16,7 +16,7 @@
       v-if="formatterArgs.drawer && drawerVisible"
       :component="drawerComponent"
       :has-footer="false"
-      :title="iTitle"
+      :title="drawerTitle"
       :visible.sync="drawerVisible"
       class="detail-drawer"
     />
@@ -49,9 +49,7 @@ export default {
           getTitle({ row, cellValue }) {
             return cellValue || row.name
           },
-          getDrawerTitle({ row, cellValue }) {
+          getDrawerTitle: null,
-            return cellValue || row.name
-          },
           getIcon({ col, row, cellValue }) {
             return null
           }
@@ -102,7 +100,30 @@ export default {
     }
   },
   methods: {
-    getRouteComponent() {
+    getResource() {
+      const route = this.resolveRoute()
+      if (!route) {
+        return
+      }
+      const resource = route.meta.title || route.name
+      return resource.replace('Detail', '').replace('详情', '')
+    },
+    getDrawerTitle() {
+      if (this.formatterArgs?.getDrawerTitle && typeof this.formatterArgs.getDrawerTitle === 'function') {
+        return this.formatterArgs.getDrawerTitle({
+          col: this.col,
+          row: this.row,
+          cellValue: this.cellValue
+        })
+      }
+      let title = this.cellValue || this.row.name
+      const resource = this.getResource()
+      if (resource) {
+        title = `${resource}: ${title}`
+      }
+      return title
+    },
+    resolveRoute() {
       const route = this.getDetailRoute()
       const routes = this.$router.resolve(route)
       if (!routes) {
@@ -113,7 +134,13 @@ export default {
         return
       }
       if (matched[0] && matched[0].components?.default) {
-        return matched[0].components.default
+        return matched[0]
+      }
+    },
+    getRouteComponent() {
+      const route = this.resolveRoute()
+      if (route) {
+        return route.components.default
       }
     },
     showDrawer() {
@@ -134,7 +161,7 @@ export default {
         id: route.params.id || this.row.id
       }
       this.$store.dispatch('common/setDrawerActionMeta', payload).then(() => {
-        this.drawerTitle = this.formatterArgs.getDrawerTitle(payload)
+        this.drawerTitle = this.getDrawerTitle(payload)
         this.drawerVisible = true
       })
     },

src/layout/components/GenericDetailPage/index.vue

@@ -298,8 +298,8 @@ export default {
 .generic-detail-page {
   ::v-deep {
     .tab-page-content {
-      padding-left: 15px;
+      padding-left: 20px;
-      padding-right: 10px;
+      padding-right: 15px;
     }
   }
 }

src/layout/components/Page/TwoColPage.vue

@@ -39,7 +39,7 @@ export default {
     },
     single: {
       type: Number,
-      default: 22
+      default: 24
     }
   }
 }

src/router/pam/index.js

@@ -36,7 +36,7 @@ export default {
       name: 'PamAccounts',
       component: () => import('@/views/pam/Account/index.vue'),
       meta: {
-        title: i18n.t('Accounts'),
+        title: i18n.t('AccountList'),
         icon: 'accounts',
         permissions: []
       }

src/views/assets/Asset/AssetList/components/PlatformDialog.vue

@@ -17,7 +17,7 @@
           type="text"
           @click="handleManagePlatform"
         >
-          <i class="fa fa-gear" />
+          <i class="fa fa-external-link" />
           {{ $tc('ManagePlatform') }}
         </el-link>
       </div>
@@ -241,6 +241,7 @@ export default {
     font-size: 14px;
     font-weight: 400;
     margin-left: 15px;
+    color: var(--color-link);
   }
 }
 </style>

src/views/users/User/UserDetail/UserAssetPermissionRules.vue

@@ -32,7 +32,7 @@ export default {
           min: ['name', 'actions'],
           default: [
             'name', 'users_amount', 'user_groups_amount', 'assets_amount',
-            'nodes_amount', 'accounts', 'is_valid', 'actions'
+            'nodes_amount', 'accounts', 'actions'
           ]
         },
         columnsMeta: AssetPermissionTableMeta

src/views/users/User/UserDetail/UserSession.vue

@@ -24,9 +24,9 @@ export default {
     return {
       url: `/api/v1/terminal/sessions/?user_id=${this.object.id}&order=is_finished,-date_end`,
       columnsShow: {
-        min: ['id', 'user', 'asset', 'account'],
+        min: ['id', 'asset', 'account'],
         default: [
-          'id', 'user', 'asset', 'account', 'protocol',
+          'id', 'asset', 'account', 'protocol',
           'date_start', 'duration'
         ]
       }