fix(F006-W18): 申请APIKey Step3表格格式错乱+复制失败修复
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 防撑宽
This commit is contained in:
parent
3efa5db533
commit
366056dcac
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user