From bd84b44175826672d72e58431a25ecaf074eb3e4 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Wed, 9 Nov 2022 17:00:29 +0800
Subject: [PATCH] =?UTF-8?q?pref:=20=E4=BF=AE=E6=94=B9=E6=88=91=E7=9A=84?=
 =?UTF-8?q?=E8=B5=84=E4=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DetailCard/index.vue           | 49 ++++++++++++-------
 src/components/Dialog/index.vue               | 21 +++++---
 src/components/IBox/index.vue                 |  4 +-
 .../TableFormatters/AmountFormatter.vue       | 16 ++++--
 .../TableFormatters/DetailFormatter.vue       | 13 +++--
 .../TableFormatters/DialogDetailFormatter.vue | 19 +++++--
 src/i18n/langs/zh.json                        |  6 +--
 src/styles/element-variables.scss             |  2 +-
 src/views/myassets/index.vue                  | 32 +++++++-----
 .../AssetPermission/AssetPermissionList.vue   | 21 ++++++--
 10 files changed, 120 insertions(+), 63 deletions(-)

diff --git a/src/components/DetailCard/index.vue b/src/components/DetailCard/index.vue
index ed58b7050..26b60441d 100644
--- a/src/components/DetailCard/index.vue
+++ b/src/components/DetailCard/index.vue
@@ -1,22 +1,11 @@
 <template>
   <IBox :title="title" fa="fa-info-circle">
-    <div class="content">
-      <el-row v-if="this.$route.params.id" :gutter="10" class="item">
-        <el-col :span="6"><div :style="{ 'text-align': align }" class="item-label"><label>ID: </label></div></el-col>
-        <el-col :span="18"><div class="item-text">{{ this.$route.params.id }}</div></el-col>
-      </el-row>
-      <el-row v-for="item in items" :key="'card-' + item.key" :gutter="10" class="item">
-        <el-col :span="6">
-          <div :style="{ 'text-align': align }" class="item-label"><label>{{ item.key }}: </label></div>
-        </el-col>
-        <el-col :span="18">
-          <div class="item-text">
-            <ItemValue :value="item.value" v-bind="item" />
-          </div>
-        </el-col>
-      </el-row>
-      <slot />
-    </div>
+    <el-form class="content" label-position="left" label-width="25%">
+      <el-form-item v-for="item in items" :key="item.key" :label="item.key">
+        <ItemValue :value="item.value" v-bind="item" />
+      </el-form-item>
+    </el-form>
+    <slot />
   </IBox>
 </template>
 
@@ -46,7 +35,31 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+  .el-card__body {
+    padding: 20px 40px;
+  }
+
+  .el-form-item {
+    border-bottom: 1px dashed #EBEEF5;
+    padding: 1px 0;
+    margin-bottom: 0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+    }
+
+    >>> .el-form-item__label {
+      padding-right: 8%;
+    }
+
+    >>> .el-form-item__content {
+      font-size: 13px;
+    }
+  }
   .content {
     font-size: 13px;
     line-height: 2.5;
diff --git a/src/components/Dialog/index.vue b/src/components/Dialog/index.vue
index 796fab487..127820e12 100644
--- a/src/components/Dialog/index.vue
+++ b/src/components/Dialog/index.vue
@@ -12,8 +12,8 @@
     <slot />
     <div slot="footer" class="dialog-footer">
       <slot name="footer">
-        <el-button v-if="showCancel" size="small" @click="onCancel">{{ cancelTitle }}</el-button>
-        <el-button v-if="showConfirm" type="primary" size="small" :loading="loadingStatus" @click="onConfirm">
+        <el-button v-if="showCancel" @click="onCancel">{{ cancelTitle }}</el-button>
+        <el-button v-if="showConfirm" type="primary" :loading="loadingStatus" @click="onConfirm">
           {{ confirmTitle }}
         </el-button>
       </slot>
@@ -84,23 +84,28 @@ export default {
 
 <style lang="scss" scoped>
   .dialog >>> .el-dialog {
-    padding: 30px 40px 35px;
+    border-radius: 0.3em;
 
     &__header {
-      padding: 0 10px 0 0;
+      box-sizing: border-box;
+      padding: 15px 22px;
+      border-bottom: 1px solid #dee2e6;
+      font-weight: 400;
     }
 
     &__body {
-      padding: 15px 0 0;
+      padding: 30px 40px;
     }
 
     &__footer {
-      padding: 0 0 10px 0;
+      border-top: 1px solid #dee2e6;
+      padding: 16px;
+      justify-content: flex-end;
     }
   }
 
-  .dialog-footer >>> button.el-button--small {
-    padding: 10px 21px;
+  .dialog-footer >>> button.el-button {
     font-size: 13px;
+    padding: 10px 20px;
   }
 </style>
diff --git a/src/components/IBox/index.vue b/src/components/IBox/index.vue
index f1960a17f..ce3f20ea0 100644
--- a/src/components/IBox/index.vue
+++ b/src/components/IBox/index.vue
@@ -41,7 +41,6 @@ export default {
     /*height: 100%;*/
     clear: both;
     padding: 0;
-    background-color: #ffffff;
   }
 
   .ibox >>> .el-card__header {
@@ -83,8 +82,7 @@ export default {
   }
 
   .ibox >>> .el-card__body {
-    background-color: #ffffff;
-    padding: 15px 20px 20px 20px;
+    padding: 15px 30px 20px 30px;
     color: inherit;
   }
 </style>
diff --git a/src/components/TableFormatters/AmountFormatter.vue b/src/components/TableFormatters/AmountFormatter.vue
index 31f0cd0d8..5a04bb4ef 100644
--- a/src/components/TableFormatters/AmountFormatter.vue
+++ b/src/components/TableFormatters/AmountFormatter.vue
@@ -1,12 +1,12 @@
 <template>
-  <DetailFormatter>
+  <DetailFormatter :row="row" :col="col">
     <template>
       <el-popover
         placement="top-start"
         :title="title"
         width="400"
         trigger="hover"
-        :disabled="cellValue.length === 0"
+        :disabled="!showItems"
       >
         <div class="detail-content">
           <div v-for="item of items" :key="item" class="detail-item">
@@ -21,14 +21,21 @@
 
 <script>
 import DetailFormatter from './DetailFormatter'
+import BaseFormatter from './base'
 export default {
   name: 'AmountFormatter',
   components: {
     DetailFormatter
   },
-  extends: DetailFormatter,
+  extends: BaseFormatter,
   data() {
     return {
+      formatterArgsNew: {
+        showItems: true,
+        getItem(item) {
+          return item.name
+        }
+      }
     }
   },
   computed: {
@@ -38,6 +45,9 @@ export default {
     items() {
       const getItem = this.formatterArgs.getItem || function(item) { return item.name }
       return this.cellValue.map(item => getItem(item))
+    },
+    showItems() {
+      return this.formatterArgs.showItems !== false && this.cellValue.length > 0
     }
   },
   mounted() {
diff --git a/src/components/TableFormatters/DetailFormatter.vue b/src/components/TableFormatters/DetailFormatter.vue
index 11d04f35c..2e596bd18 100644
--- a/src/components/TableFormatters/DetailFormatter.vue
+++ b/src/components/TableFormatters/DetailFormatter.vue
@@ -66,10 +66,8 @@ export default {
         row: this.row,
         cellValue: this.cellValue
       })
-    }
-  },
-  methods: {
-    goDetail() {
+    },
+    detailRoute() {
       // const defaultRoute = this.$route.name.replace('List', 'Detail')
       let route = this.formatterArgs.route
       if (this.formatterArgs.getRoute && typeof this.formatterArgs.getRoute === 'function') {
@@ -95,7 +93,12 @@ export default {
       if (routeQuery && typeof routeQuery === 'object') {
         detailRoute.query = this.formatterArgs.routeQuery
       }
-      this.$router.push(detailRoute)
+      return detailRoute
+    }
+  },
+  methods: {
+    goDetail() {
+      this.$router.push(this.detailRoute)
       // const routeName = this.formatterArgs.route
       // this.$log.debug('Will go to detail route: ', routeName)
       // this.$router.push({ name: routeName, params: { id: this.row.id }, query: routeQuery })
diff --git a/src/components/TableFormatters/DialogDetailFormatter.vue b/src/components/TableFormatters/DialogDetailFormatter.vue
index 3a8ab0600..099fb2428 100644
--- a/src/components/TableFormatters/DialogDetailFormatter.vue
+++ b/src/components/TableFormatters/DialogDetailFormatter.vue
@@ -1,8 +1,16 @@
 <template>
   <div>
-    <el-link class="detail" :type="col.type || 'success'" @click="dialogVisible=true">{{ iTitle }}</el-link>
-    <Dialog width="60%" :visible.sync="dialogVisible" :title="dialogTitle" :show-cancel="true" :show-confirm="false" @cancel="onCancel">
-      <DetailCard :items="detailCardItems" :title="detailTitle" />
+    <el-link class="detail" :type="col.type || 'success'" @click="dialogVisible=true">
+      {{ iTitle }}
+    </el-link>
+    <Dialog
+      width="60%"
+      :visible.sync="dialogVisible"
+      :title="dialogTitle"
+      :show-cancel="false"
+      @confirm="onCancel"
+    >
+      <DetailCard class="card" :items="detailCardItems" :title="detailTitle" />
     </Dialog>
   </div>
 </template>
@@ -58,6 +66,9 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.card >>> .el-card__body {
+  padding: 0
+}
 
 </style>
diff --git a/src/i18n/langs/zh.json b/src/i18n/langs/zh.json
index e09a586a0..8696108c8 100644
--- a/src/i18n/langs/zh.json
+++ b/src/i18n/langs/zh.json
@@ -97,6 +97,7 @@
     "NoSQLProtocol": "非关系数据库"
   },
   "assets": {
+    "Category": "类别",
     "AccountDetail": "账号详情",
     "Accounts": "账号列表",
     "SelectTemplate": "选择模版",
@@ -700,10 +701,6 @@
     "UserGroups": "用户组",
     "PermName": "授权名称",
     "Permissions": "授权列表",
-    "DatabaseAppPermission": "数据库授权",
-    "RemoteAppPermission": "远程应用授权",
-    "addApplicationToThisPermission": "添加应用",
-    "KubernetesAppPermission": "Kubernetes授权",
     "addAssetToThisPermission": "添加资产",
     "addDatabaseAppToThisPermission": "添加数据库应用",
     "addNodeToThisPermission": "添加节点",
@@ -793,6 +790,7 @@
     "Database": "数据库",
     "Session": "会话",
     "AssetPermission": "资产授权",
+    "AssetPermissionList": "资产授权列表",
     "AssetPermissionCreate": "创建资产授权规则",
     "AssetPermissionDetail": "资产授权详情",
     "AssetPermissionUpdate": "更新资产授权规则",
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
index d2b9e0857..4e3ccfe57 100644
--- a/src/styles/element-variables.scss
+++ b/src/styles/element-variables.scss
@@ -118,7 +118,7 @@ $--font-size-small: 12px !default;
 /// fontSize|1|Font Size|0
 $--font-size-extra-small: 11px !default;
 /// fontWeight|1|Font Weight|1
-$--font-weight-primary: 500 !default;
+$--font-weight-primary: 400 !default;
 /// fontWeight|1|Font Weight|1
 $--font-weight-secondary: 100 !default;
 /// fontLineHeight|1|Line Height|2
diff --git a/src/views/myassets/index.vue b/src/views/myassets/index.vue
index 5e522bb97..9bc7c67db 100644
--- a/src/views/myassets/index.vue
+++ b/src/views/myassets/index.vue
@@ -39,15 +39,15 @@ export default {
       tableConfig: {
         url: '/api/v1/perms/users/assets/',
         hasTree: true,
-        columns: ['hostname', 'ip', 'system_users', 'platform', 'comment', 'actions'],
+        columns: ['name', 'address', 'platform', 'category', 'type', 'comment', 'actions'],
         columnsShow: {
-          default: ['hostname', 'ip', 'system_users', 'platform', 'actions'],
-          min: ['hostname', 'actions']
+          default: ['name', 'address', 'platform', 'actions'],
+          min: ['name', 'address', 'actions']
         },
         columnsMeta: {
-          hostname: {
-            prop: 'hostname',
-            label: this.$t('assets.Hostname'),
+          name: {
+            prop: 'name',
+            label: this.$t('assets.Name'),
             formatter: DialogDetailFormatter,
             showOverflowTooltip: true,
             formatterArgs: {
@@ -55,23 +55,31 @@ export default {
               getDetailItems: function({ col, row, cellValue }) {
                 return [
                   {
-                    key: this.$t('assets.Hostname'),
-                    value: row.hostname
+                    key: this.$t('assets.Name'),
+                    value: row.name
                   },
                   {
-                    key: this.$t('assets.ip'),
-                    value: row.ip
+                    key: this.$t('assets.Address'),
+                    value: row.address
                   },
                   {
                     key: this.$t('assets.Protocols'),
-                    value: row.protocols.join(', ')
+                    value: row.protocols.map(item => item.name).join(', ')
+                  },
+                  {
+                    key: this.$t('assets.Category'),
+                    value: row.category.label
+                  },
+                  {
+                    key: this.$t('assets.Type'),
+                    value: row.type.label
                   },
                   {
                     key: this.$t('assets.Platform'),
                     value: row.platform
                   },
                   {
-                    key: this.$t('common.Activate'),
+                    key: this.$t('common.Active'),
                     value: row.is_active
                   },
                   {
diff --git a/src/views/perms/AssetPermission/AssetPermissionList.vue b/src/views/perms/AssetPermission/AssetPermissionList.vue
index f4e21a6ad..cd5d5541b 100644
--- a/src/views/perms/AssetPermission/AssetPermissionList.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionList.vue
@@ -37,7 +37,7 @@ export default {
         url: '/api/v1/perms/asset-permissions/',
         hasTree: true,
         columns: [
-          'name', 'users', 'user_groups', 'assets', 'nodes',
+          'name', 'users', 'user_groups', 'assets', 'nodes', 'accounts',
           'date_expired', 'is_valid', 'is_expired', 'is_active',
           'from_ticket', 'created_by', 'date_created', 'comment',
           'org_name', 'actions'
@@ -46,13 +46,14 @@ export default {
           min: ['name', 'actions'],
           default: [
             'name', 'users', 'user_groups', 'assets',
-            'nodes', 'system_users', 'is_valid', 'actions'
+            'nodes', 'accounts', 'is_valid', 'actions'
           ]
         },
         columnsMeta: {
           name: {
             formatterArgs: {
               routeQuery: {
+                name: 'AssetPermissionDetail',
                 activeTab: 'AssetPermissionDetail'
               }
             },
@@ -70,7 +71,6 @@ export default {
             width: '60px',
             formatter: AmountFormatter,
             formatterArgs: {
-              counting: true,
               routeQuery: {
                 activeTab: 'AssetPermissionUser'
               }
@@ -81,7 +81,6 @@ export default {
             width: '100px',
             formatter: AmountFormatter,
             formatterArgs: {
-              counting: true,
               routeQuery: {
                 activeTab: 'AssetPermissionUser'
               }
@@ -102,7 +101,19 @@ export default {
             width: '60px',
             formatter: AmountFormatter,
             formatterArgs: {
-              counting: true,
+              routeQuery: {
+                activeTab: 'AssetPermissionAsset'
+              }
+            }
+          },
+          accounts: {
+            label: this.$t('perms.Account'),
+            width: '60px',
+            formatter: AmountFormatter,
+            formatterArgs: {
+              getItem(item) {
+                return item
+              },
               routeQuery: {
                 activeTab: 'AssetPermissionAsset'
               }