refactor: Api Keys 前端页面修改

frontend/src/business/components/settings/personal/ApiKeys.vue

@@ -16,10 +16,22 @@
       </template>
 
       <el-table border class="adjust-table" :data="tableData" style="width: 100%">
-        <el-table-column prop="accessKey" label="Access Key"/>
+        <el-table-column prop="accessKey" label="Access Key">
+          <template v-slot:default="scope">
+            <div class="variable-combine">
+              <div class="variable">{{ scope.row.accessKey }}</div>
+              <div>
+                <el-tooltip :content="$t('api_test.copied')" manual v-model="scope.row.visible" placement="top"
+                            :visible-arrow="false">
+                  <i class="el-icon-copy-document copy" @click="copy(scope.row, 'accessKey')"/>
+                </el-tooltip>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
         <el-table-column prop="secretKey" label="Secret Key">
           <template v-slot:default="scope">
-            <el-link type="info" @click="showSecretKey(scope.row)">{{$t('commons.show')}}</el-link>
+            <el-link type="primary" @click="showSecretKey(scope.row)">{{ $t('commons.show') }}</el-link>
           </template>
         </el-table-column>
         <el-table-column prop="status" :label="$t('commons.status')">
@@ -46,7 +58,15 @@
         </el-table-column>
       </el-table>
     </el-card>
-
+    <el-dialog title="Secret Key" :visible.sync="apiKeysVisible">
+      <div class="variable">
+        {{ currentRow.secretKey }}
+        <el-tooltip :content="$t('api_test.copied')" manual v-model="currentRow.visible2" placement="top"
+                    :visible-arrow="false">
+          <i class="el-icon-copy-document copy" @click="copy(currentRow, 'secretKey')"/>
+        </el-tooltip>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -67,6 +87,7 @@
       apiKeysVisible: false,
       condition: {},
       tableData: [],
+      currentRow: {},
     }
   },
 
@@ -121,12 +142,50 @@
       }
     },
     showSecretKey(row) {
-        this.$alert(row.secretKey, 'Secret Key');
+      this.apiKeysVisible = true;
+      this.currentRow = row;
+    },
+    copy(row, key) {
+      let input = document.createElement("input");
+      document.body.appendChild(input);
+      input.value = row[key];
+      input.select();
+      if (input.setSelectionRange) {
+        input.setSelectionRange(0, input.value.length);
       }
+      document.execCommand("copy");
+      document.body.removeChild(input);
+      row.visible = true;
+      setTimeout(() => {
+        row.visible = false;
+      }, 1000);
+    },
   }
 }
 </script>
 
 <style scoped>
+.variable-combine {
+  color: #7F7F7F;
+  line-height: 32px;
+  position: absolute;
+  top: 10px;
+  margin-right: -20px;
+  display: flex;
+  align-items: center;
+}
 
+.variable {
+  display: inline-block;
+  margin-right: 10px;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.copy {
+  font-size: 14px;
+  cursor: pointer;
+  color: #1E90FF;
+}
 </style>