节点列表去除横向滚动,公钥截断显示+复制按钮

This commit is contained in:
2026-08-07 18:09:28 +08:00
parent ea2d33d1bf
commit 362c8c7a57
3 changed files with 77 additions and 3 deletions
@@ -27,11 +27,33 @@ const canNext = computed(() => props.page < totalPages.value)
const menuNode = ref<NodeInfo | null>(null)
const menuX = ref(0)
const menuY = ref(0)
const copiedNodeId = ref<string | null>(null)
function formatTime(value: string): string {
return new Date(value).toLocaleString()
}
function truncateKey(key: string): string {
if (key.length <= 12) return key
return key.slice(0, 8) + '…' + key.slice(-4)
}
async function copyPublicKey(node: NodeInfo, event: MouseEvent) {
event.stopPropagation()
if (!node.public_key) return
try {
await navigator.clipboard.writeText(node.public_key)
copiedNodeId.value = node.node_id
setTimeout(() => {
if (copiedNodeId.value === node.node_id) {
copiedNodeId.value = null
}
}, 2000)
} catch {
/* clipboard not available */
}
}
function closeNodeMenu() {
menuNode.value = null
}
@@ -95,7 +117,7 @@ onBeforeUnmount(() => {
<span class="badge"> {{ total }} </span>
</div>
<div class="node-table-wrap" @scroll="closeNodeMenu">
<div class="node-table-wrap node-list-wrap" @scroll="closeNodeMenu">
<table class="node-table">
<thead>
<tr>
@@ -122,7 +144,18 @@ onBeforeUnmount(() => {
<td>{{ node.short_name || '-' }}</td>
<td>{{ node.hw_model || '-' }}</td>
<td>{{ node.role || '-' }}</td>
<td>{{ node.public_key || '-' }}</td>
<td>
<span v-if="node.public_key" class="pubkey-cell">
<code class="pubkey-text">{{ truncateKey(node.public_key) }}</code>
<button
class="copy-btn"
type="button"
:title="copiedNodeId === node.node_id ? '已复制' : '复制完整公钥'"
@click.stop="copyPublicKey(node, $event)"
>{{ copiedNodeId === node.node_id ? '已复制' : '复制' }}</button>
</span>
<span v-else>-</span>
</td>
<td>{{ formatTime(node.updated_at) }}</td>
</tr>
</tbody>