51 lines
1.7 KiB
Vue
51 lines
1.7 KiB
Vue
<script setup>
|
|
import useDialogStore from 'stores/dialog.js'
|
|
import { NIcon, useThemeVars } from 'naive-ui'
|
|
import AddGroup from '@/components/icons/AddGroup.vue'
|
|
import AddLink from '@/components/icons/AddLink.vue'
|
|
import IconButton from '@/components/common/IconButton.vue'
|
|
import Filter from '@/components/icons/Filter.vue'
|
|
import ConnectionTree from './ConnectionTree.vue'
|
|
import { ref } from 'vue'
|
|
|
|
const themeVars = useThemeVars()
|
|
const dialogStore = useDialogStore()
|
|
const filterPattern = ref('')
|
|
</script>
|
|
|
|
<template>
|
|
<div class="nav-pane-container flex-box-v">
|
|
<connection-tree :filter-pattern="filterPattern" />
|
|
|
|
<!-- bottom function bar -->
|
|
<div class="nav-pane-bottom nav-pane-func flex-box-h">
|
|
<icon-button
|
|
:button-class="['nav-pane-func-btn']"
|
|
:icon="AddLink"
|
|
size="20"
|
|
stroke-width="4"
|
|
t-tooltip="interface.new_conn"
|
|
@click="dialogStore.openNewDialog()" />
|
|
<icon-button
|
|
:button-class="['nav-pane-func-btn']"
|
|
:icon="AddGroup"
|
|
size="20"
|
|
stroke-width="4"
|
|
t-tooltip="interface.new_group"
|
|
@click="dialogStore.openNewGroupDialog()" />
|
|
<n-input v-model:value="filterPattern" :placeholder="$t('interface.filter')" clearable>
|
|
<template #prefix>
|
|
<n-icon :component="Filter" size="20" />
|
|
</template>
|
|
</n-input>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.nav-pane-bottom {
|
|
color: v-bind('themeVars.iconColor');
|
|
border-top: v-bind('themeVars.borderColor') 1px solid;
|
|
}
|
|
</style>
|