src/modules/openapi/ApplyApiKeyDialog.vue

@@ -139,11 +139,35 @@ async function submit() {
 function onClose() { updateVisible(false); if (result.value) emit("refresh") }
 
 async function copySecret(text: string) {
+  // 优先用现代 Clipboard API (HTTPS / localhost 才允许)
+  // frp 走 http://direv.cloud:8080 是非安全上下文, clipboard API 不可用, 需降级
   try {
-    await navigator.clipboard.writeText(text)
+    if (navigator.clipboard?.writeText) {
-    ElMessage.success('已复制')
+      await navigator.clipboard.writeText(text)
+      ElMessage.success('已复制')
+      return
+    }
+    throw new Error('no clipboard api')
   } catch {
-    ElMessage.error('复制失败,请手动选择文本')
+    // 降级方案: document.execCommand('copy') - HTTP 下也能用
+    try {
+      const ta = document.createElement('textarea')
+      ta.value = text
+      ta.style.position = 'fixed'
+      ta.style.opacity = '0'
+      ta.style.pointerEvents = 'none'
+      document.body.appendChild(ta)
+      ta.select()
+      const ok = document.execCommand('copy')
+      document.body.removeChild(ta)
+      if (ok) {
+        ElMessage.success('已复制')
+      } else {
+        ElMessage.warning('浏览器阻止自动复制,请手动双击输入框选中后 Cmd/Ctrl+C')
+      }
+    } catch {
+      ElMessage.warning('浏览器阻止自动复制,请手动双击输入框选中后 Cmd/Ctrl+C')
+    }
   }
 }
 
@@ -330,23 +354,25 @@ function notifyContact() {
         请立即复制 connectCode 和 appSecret!关弹窗后无法再次查看
       </el-alert>
       <p>已为 {{ result.length }} 个客户生成 APIKey:</p>
-      <el-table :data="result" border class="rr-apply-table">
+      <el-table :data="result" border class="rr-apply-table rr-result-table" size="small">
-        <el-table-column prop="customerName" label="公司名称" width="160" />
+        <el-table-column prop="customerName" label="公司名称" width="120" show-overflow-tooltip />
-        <el-table-column prop="appId" label="AppID" width="280">
+        <el-table-column prop="appId" label="AppID" min-width="180" show-overflow-tooltip>
           <template #default="{ row }">
-            <code>{{ row.appId }}</code>
+            <code class="rr-cell-code">{{ row.appId }}</code>
           </template>
         </el-table-column>
-        <el-table-column prop="connectCode" label="ConnectCode">
+        <el-table-column prop="connectCode" label="ConnectCode" min-width="160" show-overflow-tooltip>
           <template #default="{ row }">
-            <code class="rr-code-accent">{{ row.connectCode }}</code>
+            <code class="rr-cell-code rr-code-accent">{{ row.connectCode }}</code>
           </template>
         </el-table-column>
-        <el-table-column prop="expireAt" label="过期时间" width="180" />
+        <el-table-column prop="expireAt" label="过期时间" width="100" show-overflow-tooltip />
-        <el-table-column label="AppSecret" min-width="320">
+        <el-table-column label="AppSecret" min-width="200">
           <template #default="{ row }">
-            <el-input :model-value="row.appSecret" readonly type="password" size="small" show-password style="width: 220px; margin-right: 8px;" />
+            <div class="rr-secret-cell">
-            <el-button size="small" type="primary" @click="copySecret(row.appSecret)">复制</el-button>
+              <el-input :model-value="row.appSecret" readonly type="password" size="small" show-password />
+              <el-button size="small" type="primary" @click="copySecret(row.appSecret)">复制</el-button>
+            </div>
           </template>
         </el-table-column>
       </el-table>
@@ -496,4 +522,25 @@ function notifyContact() {
 :deep(.rr-apply-dialog .rr-apply-table th.el-table-column--selection .cell) {
   text-align: center;
 }
+
+/* Step3 结果表格: AppSecret 单元格紧凑布局 */
+.rr-secret-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 2px 0;
+}
+.rr-secret-cell .el-input {
+  width: 100%;
+}
+/* code 文本省略, 不撑列宽 */
+.rr-cell-code {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  vertical-align: middle;
+}
 </style>