新增: 服务器列表右键菜单
- 右键弹出连接编辑删除,复用既有操作链路 - 本地项仅连接,远程项含编辑删除 - 与三点菜单和设置面板互斥展开
This commit is contained in:
@@ -19,26 +19,49 @@
|
||||
<span class="col-metric">内存</span>
|
||||
<span class="col-action settings-btn" @click="toggleSettings($event)" title="管理">···</span>
|
||||
</div>
|
||||
<!-- 表格行 -->
|
||||
<div
|
||||
v-for="p in visibleProfiles"
|
||||
<!-- 表格行(右键菜单与行内「...」菜单共用同一组操作,互斥展开) -->
|
||||
<a-dropdown
|
||||
v-for="(p, idx) in visibleProfiles"
|
||||
:key="p.id"
|
||||
class="server-table-row"
|
||||
:class="{ active: p.id === activeId }"
|
||||
@click="handleSelect(p)"
|
||||
trigger="contextMenu"
|
||||
align-point
|
||||
:popup-visible="srvCtxMenuIndex === idx"
|
||||
@popup-visible-change="(v: boolean) => onSrvCtxVisible(idx, v)"
|
||||
>
|
||||
<span class="col-name" :title="stateText(p.id)"><span :class="['dot', stateDotClass(p.id)]" />{{ p.name }}</span>
|
||||
<span class="col-metric" :class="metricWarnClass(p.id, 'disk')" :title="metricTooltip(p.id, 'disk')">{{ sysInfo(p.id)?.diskUsage || '-' }}</span>
|
||||
<span class="col-metric" :class="metricWarnClass(p.id, 'cpu')" :title="metricTooltip(p.id, 'cpu')">{{ sysInfo(p.id)?.cpuUsage || '-' }}</span>
|
||||
<span class="col-metric" :class="metricWarnClass(p.id, 'mem')" :title="metricTooltip(p.id, 'mem')">{{ sysInfo(p.id)?.memUsage || '-' }}</span>
|
||||
<span
|
||||
v-if="p.type !== 'local'"
|
||||
class="col-action more-btn"
|
||||
title="更多操作"
|
||||
@click.stop="toggleMore(p, $event)"
|
||||
>···</span>
|
||||
<span v-else class="col-action"></span>
|
||||
</div>
|
||||
<div
|
||||
class="server-table-row"
|
||||
:class="{ active: p.id === activeId }"
|
||||
@click="handleSelect(p)"
|
||||
>
|
||||
<span class="col-name" :title="stateText(p.id)"><span :class="['dot', stateDotClass(p.id)]" />{{ p.name }}</span>
|
||||
<span class="col-metric" :class="metricWarnClass(p.id, 'disk')" :title="metricTooltip(p.id, 'disk')">{{ sysInfo(p.id)?.diskUsage || '-' }}</span>
|
||||
<span class="col-metric" :class="metricWarnClass(p.id, 'cpu')" :title="metricTooltip(p.id, 'cpu')">{{ sysInfo(p.id)?.cpuUsage || '-' }}</span>
|
||||
<span class="col-metric" :class="metricWarnClass(p.id, 'mem')" :title="metricTooltip(p.id, 'mem')">{{ sysInfo(p.id)?.memUsage || '-' }}</span>
|
||||
<span
|
||||
v-if="p.type !== 'local'"
|
||||
class="col-action more-btn"
|
||||
title="更多操作"
|
||||
@click.stop="toggleMore(p, $event)"
|
||||
>···</span>
|
||||
<span v-else class="col-action"></span>
|
||||
</div>
|
||||
<template #content>
|
||||
<a-doption @click="handleSelect(p)">
|
||||
<template #icon><icon-computer /></template>
|
||||
连接
|
||||
</a-doption>
|
||||
<template v-if="p.type !== 'local'">
|
||||
<a-doption @click="handleEdit(p)">
|
||||
<template #icon><icon-edit /></template>
|
||||
编辑
|
||||
</a-doption>
|
||||
<a-doption class="danger" @click="handleDelete(p)">
|
||||
<template #icon><icon-close /></template>
|
||||
删除
|
||||
</a-doption>
|
||||
</template>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -268,6 +291,7 @@ function toggleSettings(e: MouseEvent) {
|
||||
return
|
||||
}
|
||||
moreOpenId.value = null
|
||||
srvCtxMenuIndex.value = -1
|
||||
const btn = (e.target as HTMLElement).closest<HTMLElement>('.settings-btn')
|
||||
if (!btn) return
|
||||
settingsPanelStyle.value = calcPopupStyle(btn)
|
||||
@@ -281,6 +305,7 @@ function toggleMore(p: { id: string; name: string }, e: MouseEvent) {
|
||||
return
|
||||
}
|
||||
settingsOpen.value = false
|
||||
srvCtxMenuIndex.value = -1
|
||||
moreOpenId.value = p.id
|
||||
moreProfile.value = p
|
||||
const target = (e.target as HTMLElement).closest('.more-btn') as HTMLElement
|
||||
@@ -611,6 +636,18 @@ function handleDelete(p: { id: string; name: string }) {
|
||||
// 删除的是活跃服务器时连接已回落本地,补发切换让视图加载本地根目录
|
||||
if (wasActive) emit('serverSelect', 'local-default')
|
||||
}
|
||||
|
||||
// 服务器项右键菜单(与行内「...」菜单互斥:一方展开强制收起另一方)
|
||||
const srvCtxMenuIndex = ref(-1)
|
||||
|
||||
function onSrvCtxVisible(index: number, visible: boolean) {
|
||||
srvCtxMenuIndex.value = visible ? index : -1
|
||||
if (visible) {
|
||||
moreOpenId.value = null
|
||||
moreProfile.value = null
|
||||
settingsOpen.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user