feat: add connection mark color
This commit is contained in:
parent
c4f1a2e178
commit
61e702e5d5
|
@ -59,7 +59,7 @@ const showTestConnFailResult = computed(() => {
|
||||||
return !isEmpty(testResult.value) && showTestResult.value === true
|
return !isEmpty(testResult.value) && showTestResult.value === true
|
||||||
})
|
})
|
||||||
const formLabelWidth = computed(() => {
|
const formLabelWidth = computed(() => {
|
||||||
// Compatible with long english word
|
// compatible with long english word
|
||||||
if (tab.value === 'advanced' && i18n.locale.value === 'en') {
|
if (tab.value === 'advanced' && i18n.locale.value === 'en') {
|
||||||
return '140px'
|
return '140px'
|
||||||
}
|
}
|
||||||
|
@ -70,21 +70,21 @@ const generalFormRef = ref(null)
|
||||||
const advanceFormRef = ref(null)
|
const advanceFormRef = ref(null)
|
||||||
|
|
||||||
const onSaveConnection = async () => {
|
const onSaveConnection = async () => {
|
||||||
// Validate general form
|
// validate general form
|
||||||
await generalFormRef.value?.validate((err) => {
|
await generalFormRef.value?.validate((err) => {
|
||||||
if (err) {
|
if (err) {
|
||||||
nextTick(() => (tab.value = 'general'))
|
nextTick(() => (tab.value = 'general'))
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// Validate advance form
|
// validate advance form
|
||||||
await advanceFormRef.value?.validate((err) => {
|
await advanceFormRef.value?.validate((err) => {
|
||||||
if (err) {
|
if (err) {
|
||||||
nextTick(() => (tab.value = 'advanced'))
|
nextTick(() => (tab.value = 'advanced'))
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// Store new connection
|
// store new connection
|
||||||
const { success, msg } = await connectionStore.saveConnection(editName.value, generalForm.value)
|
const { success, msg } = await connectionStore.saveConnection(editName.value, generalForm.value)
|
||||||
if (!success) {
|
if (!success) {
|
||||||
message.error(msg)
|
message.error(msg)
|
||||||
|
|
|
@ -90,7 +90,7 @@ const onClose = () => {
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
<n-form-item :label="$t('filter_pattern')" required>
|
<n-form-item :label="$t('filter_pattern')" required>
|
||||||
<n-input-group>
|
<n-input-group>
|
||||||
<n-tooltip>
|
<n-tooltip trigger="focus">
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<n-input v-model:value="filterForm.pattern" placeholder="Filter Pattern" clearable />
|
<n-input v-model:value="filterForm.pattern" placeholder="Filter Pattern" clearable />
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -46,6 +46,18 @@ const data = computed(() => {
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const backgroundColor = computed(() => {
|
||||||
|
const { markColor: hex = '' } = connectionStore.serverProfile[props.server] || {}
|
||||||
|
if (isEmpty(hex)) {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
const bigint = parseInt(hex.slice(1), 16)
|
||||||
|
const r = (bigint >> 16) & 255
|
||||||
|
const g = (bigint >> 8) & 255
|
||||||
|
const b = bigint & 255
|
||||||
|
return `rgba(${r}, ${g}, ${b}, 0.2)`
|
||||||
|
})
|
||||||
|
|
||||||
const contextMenuParam = reactive({
|
const contextMenuParam = reactive({
|
||||||
show: false,
|
show: false,
|
||||||
x: 0,
|
x: 0,
|
||||||
|
@ -171,7 +183,6 @@ onMounted(async () => {
|
||||||
try {
|
try {
|
||||||
// TODO: Show loading list status
|
// TODO: Show loading list status
|
||||||
loadingConnections.value = true
|
loadingConnections.value = true
|
||||||
// nextTick(connectionStore.initConnection)
|
|
||||||
} finally {
|
} finally {
|
||||||
loadingConnections.value = false
|
loadingConnections.value = false
|
||||||
}
|
}
|
||||||
|
@ -449,37 +460,44 @@ const handleOutsideContextMenu = () => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<n-tree
|
<div class="browser-tree-wrapper" :style="{ backgroundColor }">
|
||||||
:block-line="true"
|
<n-tree
|
||||||
:block-node="true"
|
:block-line="true"
|
||||||
:animated="false"
|
:block-node="true"
|
||||||
:cancelable="false"
|
:animated="false"
|
||||||
:data="data"
|
:cancelable="false"
|
||||||
:expand-on-click="false"
|
:data="data"
|
||||||
:expanded-keys="expandedKeys"
|
:expand-on-click="false"
|
||||||
:selected-keys="selectedKeys"
|
:expanded-keys="expandedKeys"
|
||||||
@update:selected-keys="onUpdateSelectedKeys"
|
:selected-keys="selectedKeys"
|
||||||
:node-props="nodeProps"
|
@update:selected-keys="onUpdateSelectedKeys"
|
||||||
@load="onLoadTree"
|
:node-props="nodeProps"
|
||||||
@update:expanded-keys="onUpdateExpanded"
|
@load="onLoadTree"
|
||||||
:render-label="renderLabel"
|
@update:expanded-keys="onUpdateExpanded"
|
||||||
:render-prefix="renderPrefix"
|
:render-label="renderLabel"
|
||||||
:render-suffix="renderSuffix"
|
:render-prefix="renderPrefix"
|
||||||
class="fill-height"
|
:render-suffix="renderSuffix"
|
||||||
virtual-scroll
|
class="fill-height"
|
||||||
/>
|
virtual-scroll
|
||||||
<n-dropdown
|
/>
|
||||||
:animated="false"
|
<n-dropdown
|
||||||
:options="contextMenuParam.options"
|
:animated="false"
|
||||||
:render-label="renderContextLabel"
|
:options="contextMenuParam.options"
|
||||||
:show="contextMenuParam.show"
|
:render-label="renderContextLabel"
|
||||||
:x="contextMenuParam.x"
|
:show="contextMenuParam.show"
|
||||||
:y="contextMenuParam.y"
|
:x="contextMenuParam.x"
|
||||||
placement="bottom-start"
|
:y="contextMenuParam.y"
|
||||||
trigger="manual"
|
placement="bottom-start"
|
||||||
@clickoutside="handleOutsideContextMenu"
|
trigger="manual"
|
||||||
@select="handleSelectContextMenu"
|
@clickoutside="handleOutsideContextMenu"
|
||||||
/>
|
@select="handleSelectContextMenu"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped>
|
||||||
|
.browser-tree-wrapper {
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -118,10 +118,20 @@ const menuOptions = {
|
||||||
}
|
}
|
||||||
|
|
||||||
const renderLabel = ({ option }) => {
|
const renderLabel = ({ option }) => {
|
||||||
// switch (option.type) {
|
if (option.type === ConnectionType.Server) {
|
||||||
// case ConnectionType.Server:
|
const { markColor = '' } = connectionStore.serverProfile[option.name] || {}
|
||||||
// return h(ConnectionTreeItem, { title: option.label })
|
return h(
|
||||||
// }
|
'div',
|
||||||
|
{
|
||||||
|
style: {
|
||||||
|
// color: markColor,
|
||||||
|
borderRadius: '3px',
|
||||||
|
backgroundColor: markColor,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{ default: () => option.label }
|
||||||
|
)
|
||||||
|
}
|
||||||
return option.label
|
return option.label
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue