diff --git a/app/src/App.vue b/app/src/App.vue
index f23ba4d617cd8e39702f456fc226aeb77f27afbe..7d81af5167131dc54b48ff7ce483f52008338ff3 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -53,7 +53,13 @@ queryToken()
     margin: 0 auto;
   }
 }
+
 body {
+  position: relative;
+  min-height: 100vh;
   background: #f5f6f8;
+  padding-bottom: 50px; /* 底部导航的高度 */
 }
+
+
 </style>
diff --git a/app/src/main.ts b/app/src/main.ts
index d42b6421177148595d083253f1dbb50955380631..67a195962fd6c50d221098ff3d9ff7c4a8e4036d 100644
--- a/app/src/main.ts
+++ b/app/src/main.ts
@@ -5,7 +5,8 @@ import './shared/ele-reset.ts'
 import OpenDesign from 'opendesign';
 import { router } from './router';
 import ElementPlus from 'element-plus'
-import 'element-plus/theme-chalk/index.css'
+
+import "element-plus/dist/index.css";
 import { createPinia } from 'pinia';
 const app = createApp(App)
 app.use(router)
diff --git a/app/src/pages/apiTokens/ApiTokens.vue b/app/src/pages/apiTokens/ApiTokens.vue
index b336da556819d175826459cb2dc8954c8b2e957f..6dc333633209cf82566494a3a4baeaa2374d8768 100644
--- a/app/src/pages/apiTokens/ApiTokens.vue
+++ b/app/src/pages/apiTokens/ApiTokens.vue
@@ -44,6 +44,32 @@
   >
     <GreateTokens @parent="getApiKeys" />
   </el-dialog>
+  <el-dialog
+    v-model="useBase.dialogTwoVisible"
+    title="Token"
+    width="30%"
+    center
+    show-close
+  >
+    <el-input v-model="useBase.copyValue" type="textarea" :disabled="false" autosize />
+    <div
+      :data-clipboard-text="useBase.copyValue"
+      class="tag"
+      @click="copy()"
+      style="margin: 30px auto"
+    >
+      <button
+        style="
+          padding: 10px 25px;
+          background-color: #002fa7;
+          color: #fff;
+          cursor: pointer;
+        "
+      >
+        Copy
+      </button>
+    </div>
+  </el-dialog>
 </template>
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
@@ -51,6 +77,8 @@ import { ArrowRight } from "@element-plus/icons-vue";
 import AppFooter from "@/components/AppFooter.vue";
 import { useBaseStore } from "@/store/base";
 import GreateTokens from "./GreateTokens.vue";
+import { ElMessage } from 'element-plus';
+import Clipboard from 'clipboard';
 import { queryApiKeys, deleteApiKeys } from "@/api/show";
 const useBase = useBaseStore();
 const centerDialogVisible = ref(false);
@@ -81,6 +109,21 @@ const openDialog = (val: any) => {
   deletId.value = val;
 };
 onMounted(() => getApiKeys());
+
+const copy = () => {
+  let clipboard = new Clipboard('.tag');
+  clipboard.on('success', e => {
+    ElMessage({
+      message: 'Successfully copied',
+      type: 'success',
+    });
+    clipboard.destroy();
+  });
+  clipboard.on('error', e => {
+    ElMessage.error('Failed to copy');
+    clipboard.destroy();
+  });
+};
 </script>
 <style scoped lang="scss">
 .main {
@@ -154,11 +197,15 @@ onMounted(() => getApiKeys());
 }
 footer {
   position: absolute;
-  width: 100%;
   bottom: 0;
+  width: 100%;
+  height: 50px; /* 底部导航的高度 */
 }
 .textCenter {
   display: flex;
   justify-content: center;
 }
+.tag{
+  width: 1px;
+}
 </style>
diff --git a/app/src/pages/apiTokens/GreateTokens.vue b/app/src/pages/apiTokens/GreateTokens.vue
index 682157f721627283d664216722c1c7ed3814fd8d..bf8303fa294b74eb4b6fca5f5c789f355fd8fa02 100644
--- a/app/src/pages/apiTokens/GreateTokens.vue
+++ b/app/src/pages/apiTokens/GreateTokens.vue
@@ -22,34 +22,39 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, watch } from "vue";
-import { useBaseStore } from "@/store/base";
-import { getApiKeys } from "@/api/show";
+import { reactive, ref, watch } from 'vue';
+import { useBaseStore } from '@/store/base';
+import { getApiKeys } from '@/api/show';
 const useBase = useBaseStore();
 const formLabelAlign = reactive<any>({
-  description: "",
+  description: '',
 });
 const cleanForm = () => {
   const keys = Object.keys(formLabelAlign);
-  keys.forEach((key) => {
-    formLabelAlign[key] = "";
+  keys.forEach(key => {
+    formLabelAlign[key] = '';
   });
 };
 const cancle = () => {
   useBase.dialogVisible = false;
+  useBase.dialogTwoVisible = false
   cleanForm();
-  emit("parent");
+  emit('parent');
 };
 //接收父组件的parent方法
-const emit = defineEmits(["parent"]);
+const emit = defineEmits(['parent']);
 const getKeys = () => {
   const param = {
     description: formLabelAlign.description,
   };
-  getApiKeys(param).then(() => {
-    cancle();  
+  getApiKeys(param).then((res:any) => {
+    useBase.copyValue = res.token
+    cancle();
+    useBase.dialogTwoVisible = true
   });
 };
+
+
 </script>
 <style scoped lang="scss">
 .dialog-footer button:first-child {
diff --git a/app/src/pages/listShow/CreatePgp.vue b/app/src/pages/listShow/CreatePgp.vue
index 3ca73bc374a1f2d2370240d5ebd8af1902cf1834..35b089dcb8c8974a766eda2efc1ea1ab5ab01876 100644
--- a/app/src/pages/listShow/CreatePgp.vue
+++ b/app/src/pages/listShow/CreatePgp.vue
@@ -36,7 +36,7 @@
           class="ml-4"
           @change="getChange()"
         >
-          <!-- <el-radio label="private" title="The private key pairs are managed by yourself, no one else can seen/use your private key pairs.">Private</el-radio> -->
+          <el-radio label="private" title="The private key pairs are managed by yourself, no one else can seen/use your private key pairs.">Private</el-radio>
           <el-radio label="public" title="The public key pairs can be created/used by any administrator, but in order to delete it, it require triple confirms from different administrators.">Public</el-radio>
         </el-radio-group>
       </el-form-item>
diff --git a/app/src/pages/listShow/CreateX509.vue b/app/src/pages/listShow/CreateX509.vue
index 4f151cbd3ac790da97005d05a98606c54136b3b2..63e84cb976c9ca686e8523fc2c35f53d2e5647e6 100644
--- a/app/src/pages/listShow/CreateX509.vue
+++ b/app/src/pages/listShow/CreateX509.vue
@@ -58,7 +58,11 @@
           class="ml-4"
           @change="getChange()"
         >
-          <!-- <el-radio label="private" title="The private key pairs are managed by yourself, no one else can seen/use your private key pairs.">Private</el-radio> -->
+          <el-radio
+            label="private"
+            title="The private key pairs are managed by yourself, no one else can seen/use your private key pairs."
+            >Private</el-radio
+          >
           <el-radio
             label="public"
             title="The public key pairs can be created/used by any administrator, but in order to delete it, it require triple confirms from different administrators."
@@ -167,6 +171,7 @@ import { queryNewKey, headName, queryAllData } from '@/api/show';
 import type { FormInstance, FormRules } from 'element-plus';
 import { originalDate } from '@/shared/utils/helper';
 import { useDataStore } from '@/store/data';
+import { ElMessage } from 'element-plus';
 const useData = useDataStore();
 const ruleFormRef = ref<FormInstance>();
 const useBase = useBaseStore();
@@ -194,7 +199,7 @@ const param = ref({
   description: 'hello world',
   key_type: 'x509',
   visibility: 'public',
-  parent_id:'',
+  parent_id: Number,
   attributes: {
     digest_algorithm: 'sha2_256',
     key_type: 'rsa',
@@ -212,19 +217,20 @@ const param = ref({
 //获取parentKey
 const getParentKey = () => {
   const param = {
+    visibility: formLabelAlign.visibility,
     key_type: '',
   };
   if (formLabelAlign.type === 'x509ica') {
     param.key_type = 'x509ca';
-    queryAllData(param).then(res => {
+    queryAllData(param).then((res:any) => {
       parentKey.value = res;
-      formLabelAlign.parentKey = parentKey.value[0].id;
+      formLabelAlign.parentKey = res?.length?parentKey.value[0].id:''
     });
   } else if (formLabelAlign.type === 'x509ee') {
     param.key_type = 'x509ica';
-    queryAllData(param).then(res => {
+    queryAllData(param).then((res:any) => {
       parentKey.value = res;
-      formLabelAlign.parentKey = parentKey.value[0].id
+      formLabelAlign.parentKey = res?.length?parentKey.value[0].id:'';
     });
   }
 };
@@ -411,13 +417,16 @@ const rules = reactive<FormRules>({
 });
 //表单请求
 const newKey = () => {
-  queryNewKey(param.value).then(res => {
-    useBase.dialogVisible = false;
-    useData.getTableData();
-    useData.getPriTableData();
-    cleanForm();
-  });
+  queryNewKey(param.value)
+    .then(res => {
+      useBase.dialogVisible = false;
+      useData.getTableData();
+      useData.getPriTableData();
+      cleanForm();
+    })
+    .catch((res: any) => ElMessage.error(res.response.data.detail));
 };
+
 //获取表单值
 const getData = () => {
   param.value.name = formLabelAlign.name;
@@ -435,7 +444,8 @@ const getData = () => {
   param.value.attributes.locality = formLabelAlign.locality;
   param.value.attributes.province_name = formLabelAlign.province_name;
   param.value.attributes.country_name = formLabelAlign.country_name;
-  param.value.parent_id = formLabelAlign.parentKey;
+  param.value.parent_id =
+    formLabelAlign.type === 'x509ca' ? Number : formLabelAlign.parentKey;
 };
 //提交表单
 const submitForm = async (formEl: FormInstance | undefined) => {
@@ -463,6 +473,8 @@ const pickerOptions = (time: any) => {
 //改变radio
 const getChange = () => {
   formLabelAlign.name = '';
+  getParentKey();
+  formLabelAlign.parentKey = '';
 };
 </script>
 <style scoped lang="scss">
diff --git a/app/src/pages/listShow/ListShow.vue b/app/src/pages/listShow/ListShow.vue
index cdd1f1053ab05a8a84578f3b49e34a41bde58f92..6b79e7b35f8cfe59d4e9b2e7d969e6efb631f8eb 100644
--- a/app/src/pages/listShow/ListShow.vue
+++ b/app/src/pages/listShow/ListShow.vue
@@ -11,7 +11,9 @@ import PublicTable from "./PublicTable.vue";
   <div class="main">
     <ChangeCheck />
     <PublicTable/>
+    <PrivateTable/>
     <Permissions />
+
     
   </div>
   <footer>
diff --git a/app/src/pages/listShow/PrivateTable.vue b/app/src/pages/listShow/PrivateTable.vue
index b1989bcac478d34e1200cf156ba7e34eb1f4487f..29eeece26af18c0c41b29b05cd96cc950cf65cf1 100644
--- a/app/src/pages/listShow/PrivateTable.vue
+++ b/app/src/pages/listShow/PrivateTable.vue
@@ -16,27 +16,18 @@
   <el-table
     ref="multipleTableRef"
     :data="useData.tablePriData"
+    border
     style="width: 100%"
   >
-    <el-table-column
-      label="Name"
-      show-overflow-tooltip
-      prop="name"
-      width="250"
-    >
+    <el-table-column label="Name" show-overflow-tooltip prop="name">
     </el-table-column>
     <el-table-column
       prop="key_state"
       label="State"
       align="left"
       show-overflow-tooltip
-      width="80"
     />
-    <el-table-column
-      label="Fingerprint"
-      align="left"
-      show-overflow-tooltip
-    >
+    <el-table-column label="Fingerprint" align="left" show-overflow-tooltip>
       <template #default="scope">
         <img
           src="@/assets/copy.png"
@@ -53,7 +44,6 @@
       prop="description"
       label="Descirption"
       align="left"
-      width="200"
       show-overflow-tooltip
     />
     <el-table-column
@@ -61,10 +51,9 @@
       label="Key Type"
       align="left"
       show-overflow-tooltip
-      width="90"
     >
       <template #default="scope">
-        {{ scope.row.key_type.toUpperCase() }}
+        {{ getKeyType(scope.row.key_type) }}
       </template>
     </el-table-column>
     <el-table-column
@@ -72,21 +61,18 @@
       label="Create Time"
       align="left"
       show-overflow-tooltip
-      width="200"
     />
     <el-table-column
       prop="expire_at"
       label="Expire Time"
       align="left"
       show-overflow-tooltip
-      width="200"
     >
     </el-table-column>
     <el-table-column
       prop="attributes.key_type"
       label="Key Algorithm"
       align="left"
-      width="150"
       show-overflow-tooltip
     >
       <template #default="scope">
@@ -97,7 +83,6 @@
       prop="attributes.digest_algorithm"
       label="Digest Algorithm"
       align="left"
-      width="140"
       show-overflow-tooltip
     >
       <template #default="scope">
@@ -109,7 +94,6 @@
       label="Key Size"
       align="left"
       show-overflow-tooltip
-      width="90"
     />
     <!-- <el-table-column
       prop="user"
@@ -118,48 +102,97 @@
       show-overflow-tooltip
       width="80"
     /> -->
-    <el-table-column fixed="right" label="Operations" width="400">
+    <el-table-column fixed="right" label="Operations">
       <template #default="scope">
-        <el-button
-          link
-          type="primary"
-          size="small"
-          @click="exportData(scope.row.id,scope.row.name)"
-          >Export</el-button
-        ><span v-if="scope.row.key_state === 'disabled'">|
-        <el-button link type="primary" size="small" @click="enableData(scope.row.id, 'enable')"
-          >Enable</el-button
-        ></span> 
-        <span v-else
-          >|
-          <el-button link type="" size="small" disabled
-            >Enable</el-button
-          ></span
-        ><span v-if="scope.row.key_state === 'enabled'">|
-        <el-button link type="primary" size="small" @click="disableData(scope.row.id, 'disable')"
-          >Disable</el-button
-        ></span>
-        <span v-else
-          >|
-          <el-button link type="" size="small" disabled
-            >Disable</el-button
-          ></span
-        ><span v-if="scope.row.key_state === 'disabled'"
-          >|
-          <el-button
-            link
-            type="primary"
-            size="small"
-            @click="requestData(scope.row.id, 'request delete')"
-            >Request Delete</el-button
-          ></span
-        >
-        <span v-else
-          >|
-          <el-button link type="" size="small" disabled
-            >Request Delete</el-button
-          ></span
-        >
+        <el-dropdown trigger="click">
+          <span
+            class="el-dropdown-link"
+            style="margin-right: 30px; cursor: pointer; color: #002fa7"
+          >
+            View<el-icon class="el-icon--right"><arrow-down /></el-icon>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item
+                @click="exportData(scope.row.id, scope.row.name, 'certificate')"
+                :disabled="
+                  scope.row.key_type === 'x509ca' ||
+                  scope.row.key_type === 'x509ica' ||
+                  scope.row.key_type === 'x509ee'
+                    ? false
+                    : true
+                "
+                >Certificate</el-dropdown-item
+              >
+              <el-dropdown-item
+                @click="exportData(scope.row.id, scope.row.name, 'publicKey')"
+                :disabled="scope.row.key_type === 'pgp' ? false : true"
+                >Pubilc Key</el-dropdown-item
+              >
+              <el-dropdown-item
+                @click="exportData(scope.row.id, scope.row.name, 'crl')"
+                :disabled="
+                  scope.row.key_type === 'x509ca' ||
+                  scope.row.key_type === 'x509ica'
+                    ? false
+                    : true
+                "
+                >CRL</el-dropdown-item
+              >
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <el-dropdown trigger="click">
+          <span
+            class="el-dropdown-link"
+            style="cursor: pointer; color: #002fa7"
+          >
+            Actions<el-icon class="el-icon--right"><arrow-down /></el-icon>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item
+                :disabled="
+                  scope.row.key_state === 'pending_delete' ? false : true
+                "
+                @click="getData(scope.row.id, 'cancel delete')"
+                >Cancel Delete</el-dropdown-item
+              >
+              <el-dropdown-item
+                :disabled="scope.row.key_state === 'disabled' ? false : true"
+                @click="getData(scope.row.id, 'enable')"
+                >Enable</el-dropdown-item
+              >
+              <el-dropdown-item
+                :disabled="scope.row.key_state === 'enabled' ? false : true"
+                @click="getData(scope.row.id, 'disable')"
+                >Disable</el-dropdown-item
+              >
+              <el-dropdown-item
+                :disabled="scope.row.key_state !== 'enabled' ? false : true"
+                @click="getData(scope.row.id, 'delete')"
+                >Delete</el-dropdown-item
+              >
+              <el-dropdown-item
+                :disabled="
+                  scope.row.key_type === 'x509ica' ||
+                  scope.row.key_type === 'x509ee'
+                    ? false
+                    : true
+                "
+                @click="getData(scope.row.id, 'revoke')"
+                >Revoke</el-dropdown-item
+              >
+              <el-dropdown-item
+                :disabled="
+                  scope.row.key_state === 'pending_revoke' ? false : true
+                "
+                @click="getData(scope.row.id, 'pending_revoke')"
+                >Cancel Revoke</el-dropdown-item
+              >
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
       </template>
     </el-table-column>
   </el-table>
@@ -176,35 +209,164 @@
       @size-change="sizeChange"
       ><span
         >{{ useData.paginationPri.currentPage }}/{{
-          Math.ceil(useData.paginationPri.totalCount / useData.paginationPri.pageSize)
+          Math.ceil(
+            useData.paginationPri.totalCount / useData.paginationPri.pageSize
+          )
         }}</span
-      ></el-pagination>
+      ></el-pagination
+    >
   </div>
-  <el-dialog v-model="dialogVisible" title="Confirmation" width="30%" center>
-    <span class="textCenter"> Confirm to {{witchChange}} </span>
+  <el-dialog
+    v-model="dialogVisible"
+    title="Confirmation"
+    width="30%"
+    center
+    :show-close="false"
+    :before-close="close"
+  >
+    <span class="textCenter">
+      Enter
+      <span style="color: red">{{
+        witchChange !== 'pending_revoke'
+          ? witchChange.toUpperCase()
+          : 'Cancel Revoke'
+      }}</span>
+      in the text box below to confirm the revoction</span
+    >
+    <div style="margin-top: 20px">
+      <el-input
+        v-model="textValue"
+        :placeholder="`Enter ${
+          witchChange !== 'pending_revoke'
+            ? witchChange.toUpperCase()
+            : 'Cancel Revoke'
+        } to confirm the revocation`"
+        @input="getText()"
+        onpaste="return false;"
+      />
+    </div>
+    <div style="margin-top: 20px" v-if="witchChange === 'revoke'">
+      <span style="margin-right: 20px; color: red">Reason</span>
+      <el-select
+        v-model="selectValue"
+        class="m-2"
+        :placeholder="selectValue.toUpperCase()"
+      >
+        <el-option
+          v-for="item in selectOptions"
+          :key="item.value"
+          :label="item.value.toUpperCase()"
+          :value="item.value"
+        />
+      </el-select>
+    </div>
 
     <div class="dialog-footer">
-      <el-button @click="dialogVisible = false">Cancel</el-button>
-      <el-button type="primary" @click="confirm()"> Confirm </el-button>
+      <el-button @click="cleanText()">Cancel</el-button>
+      <el-button type="primary" @click="confirm()" :disabled="trueText">
+        Confirm
+      </el-button>
+    </div>
+  </el-dialog>
+  <el-dialog
+    v-model="dialogTwoVisible"
+    :title="exportName?.toUpperCase()"
+    width="30%"
+    center
+    show-close
+  >
+    <el-input v-model="copyValue" type="textarea" :disabled="false" autosize />
+    <div
+      :data-clipboard-text="copyValue"
+      class="tag"
+      @click="copy()"
+      style="margin: 30px auto"
+    >
+      <button
+        style="
+          padding: 10px 25px;
+          background-color: #002fa7;
+          color: #fff;
+          cursor: pointer;
+        "
+      >
+        Copy
+      </button>
     </div>
   </el-dialog>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { Search } from "@element-plus/icons-vue";
-import { ElMessage } from "element-plus";
-import Clipboard from "clipboard";
-import { useDataStore } from "@/store/data";
+import { ref, onMounted } from 'vue';
+import { Search, ArrowDown } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+import Clipboard from 'clipboard';
+import { useDataStore } from '@/store/data';
 import {
   queryDeleteKey,
   queryDisableKey,
   queryEnableKey,
-  queryExportKey,
+  queryRevokeKey,
   queryRequestKey,
-} from "@/api/show";
+  queryCertificate,
+  queryCancelRevoke,
+  queryCrl,
+  queryPublicKey,
+} from '@/api/show';
 const dialogVisible = ref(false);
 const useData = useDataStore();
 const searchInput = ref();
+const dialogTwoVisible = ref(false);
+const textValue = ref();
+const trueText = ref(true);
+const copyValue = ref();
+//验证输入
+const close = () => {};
+const getText = () => {
+  if (textValue.value === witchChange.value.toUpperCase()) {
+    trueText.value = false;
+  } else {
+    trueText.value = true;
+  }
+};
+const cleanText = () => {
+  dialogVisible.value = false;
+  dialogTwoVisible.value = false;
+  textValue.value = '';
+  trueText.value = true;
+  selectValue.value = 'unspecified';
+};
+//选择框
+const selectValue = ref('unspecified');
+
+const selectOptions = [
+  {
+    value: 'unspecified',
+  },
+  {
+    value: 'key_compromise',
+  },
+  {
+    value: 'ca_compromise',
+  },
+  {
+    value: 'affiliation_changed',
+  },
+  {
+    value: 'superseded',
+  },
+  {
+    value: 'cessation_of_operation',
+  },
+  {
+    value: 'certificate_hold',
+  },
+  {
+    value: 'privilege_withdrawn',
+  },
+  {
+    value: 'aa_compromise',
+  },
+];
 // 显示第几页
 const handleCurrentChange = (val: any) => {
   // 改变默认的页数
@@ -226,29 +388,29 @@ const getAllData = () => {
 };
 
 const copy = () => {
-  let clipboard = new Clipboard(".tag");
-  clipboard.on("success", (e) => {
+  let clipboard = new Clipboard('.tag');
+  clipboard.on('success', e => {
     ElMessage({
-      message: "复制成功",
-      type: "success",
+      message: '复制成功',
+      type: 'success',
     });
     clipboard.destroy();
   });
-  clipboard.on("error", (e) => {
-    ElMessage.error("复制失败");
+  clipboard.on('error', e => {
+    ElMessage.error('复制失败');
     clipboard.destroy();
   });
 };
 //导出txt
 const exportText = (dataStr: any) => {
   const name = exportName.value;
-  const element = document.createElement("a");
+  const element = document.createElement('a');
   element.setAttribute(
-    "href",
-    "data:pgp/plain;charset=utf-8," + encodeURIComponent(dataStr)
+    'href',
+    'data:pgp/plain;charset=utf-8,' + encodeURIComponent(dataStr)
   );
-  element.setAttribute("download", name);
-  element.style.display = "none";
+  element.setAttribute('download', name);
+  element.style.display = 'none';
   element.click();
 };
 const deleteData = (val: any, value: any) => {
@@ -267,11 +429,37 @@ const disableData = (val: any, value: any) => {
   witchOne.value = val;
 };
 const exportName = ref();
-const exportData = (val: any, value: any) => {
-  queryExportKey(val).then(
-    (res: any) => exportText(res.public_key),
-    (exportName.value = value)
-  );
+const exportData = (val: any, value: any, name: any) => {
+  if (name === 'certificate') {
+    queryCertificate(val)
+      .then(
+        (res: any) => {
+          (dialogTwoVisible.value = true), (copyValue.value = res);
+        }
+        // exportText(res.public_key),
+        //   (exportName.value = value),
+      )
+      .catch((res: any) => {
+        ElMessage.error(res.response.data.detail);
+      });
+  } else if (name === 'crl') {
+    queryCrl(val)
+      .then((res: any) => {
+        (dialogTwoVisible.value = true), (copyValue.value = res);
+      })
+      .catch((res: any) => {
+        ElMessage.error(res.response.data.detail);
+      });
+  } else if (name === 'publicKey') {
+    queryPublicKey(val)
+      .then((res: any) => {
+        (dialogTwoVisible.value = true), (copyValue.value = res);
+      })
+      .catch((res: any) => {
+        ElMessage.error(res.response.data.detail);
+      });
+  }
+  exportName.value = name;
 };
 const requestData = (val: any, value: any) => {
   dialogVisible.value = true;
@@ -281,7 +469,7 @@ const requestData = (val: any, value: any) => {
 onMounted(() => getAllData());
 //搜索
 const querySearch = () => {
-  useData.paginationPri.searchInput = searchInput.value
+  useData.paginationPri.searchInput = searchInput.value;
   getAllData();
 };
 //清空搜索
@@ -292,18 +480,66 @@ const clearSearchInput = () => {
 const witchChange = ref();
 const witchOne = ref();
 const confirm = () => {
-  if (witchChange.value === "delete") {
-    queryDeleteKey(witchOne.value).then((res) => getAllData());
-    dialogVisible.value = false;
-  } else if (witchChange.value === "enable") {
-    queryEnableKey(witchOne.value).then((res) => getAllData());
-    dialogVisible.value = false;
-  } else if (witchChange.value === "disable") {
-    queryDisableKey(witchOne.value).then((res) => getAllData());
-    dialogVisible.value = false;
-  } else if (witchChange.value === "request delete") {
-    queryRequestKey(witchOne.value).then((res) => getAllData());
-    dialogVisible.value = false;
+  if (witchChange.value === 'cancel delete') {
+    queryDeleteKey(witchOne.value)
+      .then(res => getAllData())
+      .catch((res: any) => {
+        ElMessage.error(res.response.data.detail);
+      });
+  } else if (witchChange.value === 'enable') {
+    queryEnableKey(witchOne.value)
+      .then(res => getAllData())
+      .catch((res: any) => {
+        ElMessage.error(res.response.data.detail);
+      });
+  } else if (witchChange.value === 'disable') {
+    queryDisableKey(witchOne.value)
+      .then(res => getAllData())
+      .catch((res: any) => {
+        ElMessage.error(res.response.data.detail);
+      });
+  } else if (witchChange.value === 'delete') {
+    queryRequestKey(witchOne.value)
+      .then(res => getAllData())
+      .catch((res: any) => {
+        ElMessage.error(res.response.data.detail);
+      });
+  } else if (witchChange.value === 'revoke') {
+    const val = {
+      reason: selectValue.value,
+    };
+    queryRevokeKey(witchOne.value, val)
+      .then(res => getAllData())
+      .catch((res: any) => {
+        ElMessage.error(res.response.data.detail);
+      });
+  } else if (witchChange.value === 'pending_revoke') {
+    queryCancelRevoke(witchOne.value)
+      .then((res: any) => getAllData())
+      .catch((res: any) => {
+        ElMessage.error(res.response.data.detail);
+      });
+  }
+  cleanText();
+};
+
+const getData = (val: any, value: any) => {
+  dialogVisible.value = true;
+  witchChange.value = value;
+  witchOne.value = val;
+};
+
+//key type映射
+const getKeyType = (val: any) => {
+  switch (val) {
+    case 'pgp':
+      return 'OpenPGP';
+    case 'x509ca':
+      return 'X509 CA';
+    case 'x509ica':
+      return 'X509 Intermediate CA';
+    case 'x509ee':
+      return 'X509 End Entity';
   }
 };
 </script>
diff --git a/app/src/pages/listShow/PublicTable.vue b/app/src/pages/listShow/PublicTable.vue
index dd366d7012a2239c81d358a2fe6b1ddd8013b4d5..41dd1406d85efc77baccb35f9b375bb12d3d28c7 100644
--- a/app/src/pages/listShow/PublicTable.vue
+++ b/app/src/pages/listShow/PublicTable.vue
@@ -13,10 +13,10 @@
       :clearable="true"
     />
   </div>
-  <el-table ref="multipleTableRef" :data="useData.tableData">
-    <el-table-column label="Name" show-overflow-tooltip prop="name" width="150">
+  <el-table ref="multipleTableRef" :data="useData.tableData" border style="width: 100%">
+    <el-table-column label="Name" show-overflow-tooltip prop="name">
     </el-table-column>
-    <el-table-column prop="key_state" label="State" align="left" width="150">
+    <el-table-column prop="key_state" label="State" align="left">
       <template #default="scope">
         <span
           :title="
@@ -69,21 +69,21 @@
       label="Create Time"
       align="left"
       show-overflow-tooltip
-      width="200"
+     
     />
     <el-table-column
       prop="expire_at"
       label="Expire Time"
       align="left"
       show-overflow-tooltip
-      width="200"
+     
     >
     </el-table-column>
     <el-table-column
       prop="attributes.key_type"
       label="Key Algorithm"
       align="left"
-      width="120"
+     
       show-overflow-tooltip
     >
       <template #default="scope">
@@ -94,7 +94,6 @@
       prop="attributes.digest_algorithm"
       label="Digest Algorithm"
       align="left"
-      width="150"
       show-overflow-tooltip
     >
       <template #default="scope">
@@ -106,9 +105,8 @@
       label="Key Size"
       align="left"
       show-overflow-tooltip
-      width="90"
     />
-    <el-table-column fixed="right" label="Operations" width="200">
+    <el-table-column fixed="right" label="Operations">
       <template #default="scope">
         <el-dropdown trigger="click">
           <span
@@ -301,7 +299,7 @@
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
-import { Search } from '@element-plus/icons-vue';
+import { Search,ArrowDown } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 import Clipboard from 'clipboard';
 import { useDataStore } from '@/store/data';
@@ -316,7 +314,6 @@ import {
   queryCrl,
   queryPublicKey,
 } from '@/api/show';
-import { ArrowDown } from '@element-plus/icons-vue';
 const dialogVisible = ref(false);
 const dialogTwoVisible = ref(false);
 const useData = useDataStore();
diff --git a/app/src/store/base.ts b/app/src/store/base.ts
index 4198caeda807a52920f6b0e8923789882089092d..690b19480bcc59fdfbb92d09b5401952f3e6b251 100644
--- a/app/src/store/base.ts
+++ b/app/src/store/base.ts
@@ -1,11 +1,10 @@
 import { defineStore } from 'pinia';
 export const useBaseStore = defineStore('base', {
   state: () => ({
-    dialogVisible:false
-
+    dialogVisible: false,
+    dialogTwoVisible: false,
+    copyValue: '',
   }),
-  actions: {
-  },
-  getters: {
-  },
+  actions: {},
+  getters: {},
 });
diff --git a/app/src/store/data.ts b/app/src/store/data.ts
index 3df190f9277692214a3539df6f3eea76637adb3b..d8b8e72ebc2f10badfb1da1f1bb19d32f3eaca12 100644
--- a/app/src/store/data.ts
+++ b/app/src/store/data.ts
@@ -32,8 +32,7 @@ export const useDataStore = defineStore('data', {
   actions: {
     async getTableData() {
       const param = {
-        // visibility: this.visibility,
-        // key_type:'x509ica'
+        visibility: this.visibility,
       };
       const res = await queryAllData(param);
       this.realData = res;
@@ -59,7 +58,7 @@ export const useDataStore = defineStore('data', {
     },
     async getPriTableData() {
       const param = {
-        // visibility: this.visib,
+        visibility: this.visib,
       };
       const res = await queryAllData(param);
       this.realPriData = res;
@@ -80,7 +79,7 @@ export const useDataStore = defineStore('data', {
         (item: any) => item.key_type === 'pgp'
       ).length;
       this.x509PriData = this.realPriData.filter(
-        (item: any) => item.key_type === 'x509'
+        (item: any) => item.key_type.includes('x509')
       ).length;
     },
   },