updat key管理功能

src/api/cert/apiToken.js

@@ -50,3 +50,27 @@ export function flushApiToken(id) {
     method: 'get'
   })
 }
+
+//生成用户KEY
+export function generateKey(){
+  return request({
+    url: '/cert/apiToken/generateKey',
+    method: 'get'
+  })
+}
+
+//获取当前用户KEY列表
+export function getKeyList(){
+  return request({
+    url: '/cert/apiToken/getKeyList',
+    method: 'get'
+  })
+}
+
+//删除用户KEY
+export function delKey(key){
+  return request({
+    url: '/cert/apiToken/deleteKey/'+key,
+    method: 'delete'
+  })
+}

src/views/index.vue

@@ -38,6 +38,11 @@
       <template #header>
         <div class="card-header">
           <span>服务信息</span>
+          <div>
+            <router-link to="/key">
+            <el-button type="primary">KEY管理</el-button>
+            </router-link>
+          </div>
         </div>
       </template>
       <div style="margin-top: 10px; margin-bottom: 10px;">
@@ -49,7 +54,6 @@
         </el-input>
       </div>
       <div style="margin-top: 10px; margin-bottom: 10px;">
-        
         <el-input v-model="userKey"  size="large" readonly @click.stop="handleCopy(userKey)">
           <template #prepend>Api Key:</template>
           <template #append>

src/views/user/key/index.vue

@@ -0,0 +1,96 @@
+<template>
+    <div class="main">
+         <el-card class="box-card">
+             <template #header>
+                 <div class="card-header">
+                     <span>KEY 管理</span>
+                     <div><el-button type="success" style="margin-right: 10px;" @click="handleAdd()">添加一个</el-button></div>
+                 </div>
+             </template>
+             <div style="margin-top: 10px; margin-bottom: 10px;" v-for="(obj,index) in keyList" :obj="obj" :index="index" :key="obj.id">
+                <el-input :value="'AK-'+ obj.id"  size="large" readonly @click.stop="handleCopy('AK-'+obj.id)">
+                <template #prepend>Api Server{{ index + 1 }}:</template>
+                <template #append>
+                    <el-button @click="handleDel(obj.id)">删除</el-button>
+                </template>
+                </el-input>
+             </div>
+           </el-card>
+    </div>
+  </template>
+  
+  <script setup name="key">
+    import { ref } from 'vue';
+    import { delKey,getKeyList,generateKey } from "@/api/cert/apiToken";
+
+    const { proxy } = getCurrentInstance();
+    const keyList = ref([]);
+
+    function Init(){
+        getKeyList().then(response => {
+            keyList.value = response.data
+        })
+    }
+
+    function handleAdd(){
+        generateKey().then(response => {
+            proxy.$modal.msgSuccess("添加成功");
+            Init();
+        })
+    }
+
+    function handleDel(key){
+        proxy.$modal.confirm('是否确认删除KEY:AK-'+key+'？').then(function() {
+            return delKey(key);
+        }).then(() => {
+            Init();
+            proxy.$modal.msgSuccess("删除成功");
+        }).catch(() => {});
+    }
+
+    function handleCopy(id){
+        // 获取需要复制的元素以及元素内的文本内容
+        const text = id;
+        // 添加一个input元素放置需要的文本内容
+        const input = document.createElement("input");
+        input.value = text;
+        document.body.appendChild(input);
+        // 选中并复制文本到剪切板
+        input.select();
+        document.execCommand("copy");
+        // 移除input元素
+        document.body.removeChild(input);
+        proxy.$modal.msgSuccess("复制成功");
+    }
+
+
+    Init();
+  </script>
+  
+  <style scoped lang="scss">
+  .main {
+     padding: 20px;
+  }
+    .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    }
+
+    .text {
+    font-size: 14px;
+    }
+
+    .item {
+    margin-bottom: 18px;
+    }
+
+    .info {
+        font-size: 15px;
+        color: #606266;
+    }
+</style>
+
+
+  
+