feat:优化APIHUB弹窗中显示效果

src/views/apihub/client.vue

@@ -155,7 +155,7 @@
     </el-dialog>
 
     <!-- 密钥重置结果弹窗 -->
-    <el-dialog v-model="secretVisible" title="客户端密钥" width="500px" destroy-on-close>
+    <el-dialog v-model="secretVisible" title="客户端密钥" width="600px" destroy-on-close>
       <div class="secret-result">
         <el-alert
           title="请妥善保管以下密钥信息，它仅会显示一次！"
@@ -493,6 +493,14 @@ const saveApiRelations = async () => {
   border-radius: 4px;
   padding: 15px;
 }
+/* 深色主题下的样式 */
+[data-theme='dark'] .secret-info {
+  margin-top: 20px;
+  background-color: #2f3030;
+  border-radius: 4px;
+  padding: 15px;
+  color: white;
+}
 
 .secret-item {
   display: flex;
@@ -514,6 +522,18 @@ const saveApiRelations = async () => {
   border-radius: 3px;
   margin-right: 10px;
 }
+/* 深色主题下的样式 */
+[data-theme='dark'] .secret-value {
+  flex: 1;
+  word-break: break-all;
+  font-family: monospace;
+  background-color: #575656;
+  padding: 10px;
+  border-radius: 3px;
+  margin-right: 10px;
+}
+
+
 
 .client-detail-tabs {
   margin-top: 20px;
@@ -552,17 +572,17 @@ const saveApiRelations = async () => {
     margin-right: 0;
     border-bottom: 1px solid var(--el-border-color-lighter);
   }
-  
+
   .el-dialog__title {
     font-weight: bold;
     color: var(--el-text-color-primary);
   }
-  
+
   .el-dialog__body {
     background-color: var(--el-bg-color-page);
     padding: 20px;
   }
-  
+
   .el-dialog__footer {
     background-color: var(--el-bg-color);
     border-top: 1px solid var(--el-border-color-lighter);