feat: 增加列表查看、复制组件

src/components/TableFormatters/ShowKeyCopyFormatter.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="content">
+    <span>{{ currentValue }}</span>
+    <span class="right">
+      <el-tooltip
+        effect="dark"
+        placement="top"
+        :content="this.$t('common.View')"
+      >
+        <i class="el-icon-view" @click="onShow()" />
+      </el-tooltip>
+      <el-tooltip
+        effect="dark"
+        placement="top"
+        :content="this.$t('common.Copy')"
+      >
+        <i class="el-icon-copy-document" @click="onCopy()" />
+      </el-tooltip>
+    </span>
+  </div>
+</template>
+
+<script>
+import BaseFormatter from './base'
+
+export default {
+  name: 'ShowKeyCopyFormatter',
+  extends: BaseFormatter,
+  proops: {
+    cellValue: {
+      type: String,
+      default: () => ''
+    }
+  },
+  data() {
+    return {
+      currentValue: this.switchShowValue()
+    }
+  },
+  methods: {
+    switchShowValue() {
+      return '******' + this.cellValue.replace(/[\w-]/g, '')
+    },
+    onShow() {
+      const { currentValue, cellValue, switchShowValue } = this
+      this.currentValue = currentValue === cellValue ? switchShowValue() : cellValue
+    },
+    onCopy: _.throttle(function() {
+      const inputDom = document.createElement('input')
+      inputDom.id = 'creatInputDom'
+      inputDom.value = this.cellValue
+      document.body.appendChild(inputDom)
+      inputDom.select()
+      document?.execCommand('copy')
+      this.$message({
+        message: this.$t('common.CopySuccess'),
+        type: 'success',
+        duration: 1400
+      })
+      document.body.removeChild(inputDom)
+    }, 1800)
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .content {
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    .right {
+      float: right;
+      font-size: 15px;
+      cursor: pointer;
+      .el-icon-view, .el-icon-copy-document {
+        &:hover {
+          color: #1c84c6;
+        }
+      }
+    }
+  }
+</style>

src/components/TableFormatters/index.js

@@ -7,6 +7,7 @@ import DeleteActionFormatter from './DeleteActionFormatter'
 import DateFormatter from './DateFormatter'
 import SystemUserFormatter from './GrantedSystemUsersShowFormatter'
 import ShowKeyFormatter from '@/components/TableFormatters/ShowKeyFormatter'
+import ShowKeyCopyFormatter from './ShowKeyCopyFormatter'
 import DialogDetailFormatter from './DialogDetailFormatter'
 import EditableInputFormatter from './EditableInputFormatter'
 import StatusFormatter from './StatusFormatter'
@@ -21,6 +22,7 @@ export default {
   DateFormatter,
   SystemUserFormatter,
   ShowKeyFormatter,
+  ShowKeyCopyFormatter,
   DialogDetailFormatter,
   ArrayFormatter,
   EditableInputFormatter,
@@ -37,6 +39,7 @@ export {
   DateFormatter,
   SystemUserFormatter,
   ShowKeyFormatter,
+  ShowKeyCopyFormatter,
   DialogDetailFormatter,
   ArrayFormatter,
   EditableInputFormatter,

src/i18n/langs/en.json

@@ -315,6 +315,7 @@
     "Disable": "Disable",
     "Download": "Download",
     "Copy": "Copy",
+    "CopySuccess": "Copy success",
     "Enable": "Enable",
     "On/Off": "On/Off",
     "EnterForSearch": "Press enter to search",

src/i18n/langs/ja.json

@@ -327,6 +327,7 @@
     "Disable": "無効",
     "Download": "ダウンロード",
     "Copy": "コピー",
+    "CopySuccess": "コピー成功",
     "Enable": "有効化",
     "On/Off": "起動/停止",
     "EnterForSearch": "Enterキーを押して検索します",

src/i18n/langs/zh.json

@@ -328,6 +328,7 @@
     "Disable": "禁用",
     "Download": "下载",
     "Copy": "复制",
+    "CopySuccess": "复制成功",
     "Enable": "启用",
     "On/Off": "启/停",
     "EnterForSearch": "按回车进行搜索",

src/views/profile/ApiKey.vue

@@ -9,7 +9,7 @@
 
 <script>
 import { GenericListPage } from '@/layout/components'
-import { DateFormatter, ShowKeyFormatter } from '@/components/TableFormatters'
+import { DateFormatter, ShowKeyCopyFormatter } from '@/components/TableFormatters'
 
 export default {
   components: {
@@ -31,7 +31,7 @@ export default {
           },
           secret: {
             label: 'AccessKeySecret',
-            formatter: ShowKeyFormatter
+            formatter: ShowKeyCopyFormatter
           },
           date_created: {
             label: this.$t('common.dateCreated'),