From 366056dcac42a3d2975f093069cbe6955f0edfd6 Mon Sep 17 00:00:00 2001
From: Sisyphus <sisyphus@direv.local>
Date: Fri, 10 Jul 2026 11:15:02 +0800
Subject: [PATCH] =?UTF-8?q?fix(F006-W18):=20=E7=94=B3=E8=AF=B7APIKey=20Ste?=
 =?UTF-8?q?p3=E8=A1=A8=E6=A0=BC=E6=A0=BC=E5=BC=8F=E9=94=99=E4=B9=B1+?=
 =?UTF-8?q?=E5=A4=8D=E5=88=B6=E5=A4=B1=E8=B4=A5=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 复制失败根因: navigator.clipboard API 要求 HTTPS/localhost,
   frp 走 http://direv.cloud:8080 是非安全上下文不可用。
   修法: 加 execCommand(copy) 降级方案 (复用 OpenAppListView copyText 逻辑)

2. 表格格式错乱根因: 5 列固定宽 (160+280+弹性+180+320) 超 640px 弹窗,
   AppSecret 列 input+button 横排挤不下。
   修法: 列宽重新分配 (公司120/AppID180/ConnectCode160/过期100/Secret200),
   AppSecret 单元格改 flex-column 竖排 (input 上 button 下),
   code 文本加 text-overflow ellipsis 防撑宽
---
 src/modules/openapi/ApplyApiKeyDialog.vue | 73 +++++++++++++++++++----
 1 file changed, 60 insertions(+), 13 deletions(-)

diff --git a/src/modules/openapi/ApplyApiKeyDialog.vue b/src/modules/openapi/ApplyApiKeyDialog.vue
index eef4fa1..657f86d 100644
--- a/src/modules/openapi/ApplyApiKeyDialog.vue
+++ b/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)
-    ElMessage.success('已复制')
+    if (navigator.clipboard?.writeText) {
+      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-column prop="customerName" label="公司名称" width="160" />
-        <el-table-column prop="appId" label="AppID" width="280">
+      <el-table :data="result" border class="rr-apply-table rr-result-table" size="small">
+        <el-table-column prop="customerName" label="公司名称" width="120" show-overflow-tooltip />
+        <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 label="AppSecret" min-width="320">
+        <el-table-column prop="expireAt" label="过期时间" width="100" show-overflow-tooltip />
+        <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;" />
-            <el-button size="small" type="primary" @click="copySecret(row.appSecret)">复制</el-button>
+            <div class="rr-secret-cell">
+              <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>