skycurtain/ndm-web-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(device-tree): UX of tree node

Browse Source
This commit is contained in:
yangsy
2025-11-12 14:22:13 +08:00
parent d2791ad093
commit be88c0b31a
1 changed files with 5 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/device-page/device-tree.vue
View File

@@ -58,22 +58,16 @@ watch(
); );
const selectedKeys = computed(() => (selectedDevice.value?.id ? [selectedDevice.value.id] : undefined)); const selectedKeys = computed(() => (selectedDevice.value?.id ? [selectedDevice.value.id] : undefined));
// 选择设备 // 树节点交互
const onSelectDevice = (device: NdmDeviceResultVO, stationCode: string) => { const onSelectDevice = (device: NdmDeviceResultVO, stationCode: string) => {
emit('select-device', device, stationCode); emit('select-device', device, stationCode);
}; };
const override: TreeOverrideNodeClickBehavior = ({ option }) => { const override: TreeOverrideNodeClickBehavior = ({ option }) => {
const hasChildren = (option.children?.length ?? 0) > 0;
const isDeviceNode = !!option['device']; const isDeviceNode = !!option['device'];
// 单击车站节点展开/收起设备 if (hasChildren || !isDeviceNode) {
if (!isDeviceNode) {
return 'toggleExpand'; return 'toggleExpand';
} else { } else {
// 录像机集群节点的`单击展开/收起`与`双击选择`交互存在冲突
// 暂不考虑支持
// const device = option['device'] as NdmDeviceResultVO;
// if (isNvrCluster(device)) {
// return 'toggleExpand';
// }
return 'none'; return 'none';
} }
}; };
@@ -208,7 +202,7 @@ const renderDeviceNodePrefix = (device: NdmDeviceResultVO, stationCode: string)
() => '查看', () => '查看',
); );
}; };
return h('div', [/* renderViewDeviceButton(device, stationCode), */ renderDeviceStatusTag(device)]); return h(NFlex, { size: 'small' }, { default: () => [renderViewDeviceButton(device, stationCode), renderDeviceStatusTag(device)] });
}; };
// ========== 设备树搜索 ========== // ========== 设备树搜索 ==========
@@ -271,7 +265,7 @@ const scrollDeviceTreeToSelectedDevice = () => {
<template> <template>
<div style="height: 100%; display: flex; flex-direction: column"> <div style="height: 100%; display: flex; flex-direction: column">
<div style="flex-shrink: 0; padding: 12px"> <div style="flex-shrink: 0; padding: 12px">
<NInput v-model:value="searchInput" placeholder="搜索设备、设备ID或IP地址" clearable /> <NInput v-model:value="searchInput" placeholder="搜索设备名称、设备ID或IP地址" clearable />
<NFlex justify="space-between" align="center"> <NFlex justify="space-between" align="center">
<NRadioGroup v-model:value="statusInput"> <NRadioGroup v-model:value="statusInput">
<NRadio value="">全部</NRadio> <NRadio value="">全部</NRadio>