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
|
||||
})
|
||||
const formLabelWidth = computed(() => {
|
||||
// Compatible with long english word
|
||||
// compatible with long english word
|
||||
if (tab.value === 'advanced' && i18n.locale.value === 'en') {
|
||||
return '140px'
|
||||
}
|
||||
|
@ -70,21 +70,21 @@ const generalFormRef = ref(null)
|
|||
const advanceFormRef = ref(null)
|
||||
|
||||
const onSaveConnection = async () => {
|
||||
// Validate general form
|
||||
// validate general form
|
||||
await generalFormRef.value?.validate((err) => {
|
||||
if (err) {
|
||||
nextTick(() => (tab.value = 'general'))
|
||||
}
|
||||
})
|
||||
|
||||
// Validate advance form
|
||||
// validate advance form
|
||||
await advanceFormRef.value?.validate((err) => {
|
||||
if (err) {
|
||||
nextTick(() => (tab.value = 'advanced'))
|
||||
}
|
||||
})
|
||||
|
||||
// Store new connection
|
||||
// store new connection
|
||||
const { success, msg } = await connectionStore.saveConnection(editName.value, generalForm.value)
|
||||
if (!success) {
|
||||
message.error(msg)
|
||||
|
|
|
@ -90,7 +90,7 @@ const onClose = () => {
|
|||
</n-form-item>
|
||||
<n-form-item :label="$t('filter_pattern')" required>
|
||||
<n-input-group>
|
||||
<n-tooltip>
|
||||
<n-tooltip trigger="focus">
|
||||
<template #trigger>
|
||||
<n-input v-model:value="filterForm.pattern" placeholder="Filter Pattern" clearable />
|
||||
</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({
|
||||
show: false,
|
||||
x: 0,
|
||||
|
@ -171,7 +183,6 @@ onMounted(async () => {
|
|||
try {
|
||||
// TODO: Show loading list status
|
||||
loadingConnections.value = true
|
||||
// nextTick(connectionStore.initConnection)
|
||||
} finally {
|
||||
loadingConnections.value = false
|
||||
}
|
||||
|
@ -449,37 +460,44 @@ const handleOutsideContextMenu = () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<n-tree
|
||||
:block-line="true"
|
||||
:block-node="true"
|
||||
:animated="false"
|
||||
:cancelable="false"
|
||||
:data="data"
|
||||
:expand-on-click="false"
|
||||
:expanded-keys="expandedKeys"
|
||||
:selected-keys="selectedKeys"
|
||||
@update:selected-keys="onUpdateSelectedKeys"
|
||||
:node-props="nodeProps"
|
||||
@load="onLoadTree"
|
||||
@update:expanded-keys="onUpdateExpanded"
|
||||
:render-label="renderLabel"
|
||||
:render-prefix="renderPrefix"
|
||||
:render-suffix="renderSuffix"
|
||||
class="fill-height"
|
||||
virtual-scroll
|
||||
/>
|
||||
<n-dropdown
|
||||
:animated="false"
|
||||
:options="contextMenuParam.options"
|
||||
:render-label="renderContextLabel"
|
||||
:show="contextMenuParam.show"
|
||||
:x="contextMenuParam.x"
|
||||
:y="contextMenuParam.y"
|
||||
placement="bottom-start"
|
||||
trigger="manual"
|
||||
@clickoutside="handleOutsideContextMenu"
|
||||
@select="handleSelectContextMenu"
|
||||
/>
|
||||
<div class="browser-tree-wrapper" :style="{ backgroundColor }">
|
||||
<n-tree
|
||||
:block-line="true"
|
||||
:block-node="true"
|
||||
:animated="false"
|
||||
:cancelable="false"
|
||||
:data="data"
|
||||
:expand-on-click="false"
|
||||
:expanded-keys="expandedKeys"
|
||||
:selected-keys="selectedKeys"
|
||||
@update:selected-keys="onUpdateSelectedKeys"
|
||||
:node-props="nodeProps"
|
||||
@load="onLoadTree"
|
||||
@update:expanded-keys="onUpdateExpanded"
|
||||
:render-label="renderLabel"
|
||||
:render-prefix="renderPrefix"
|
||||
:render-suffix="renderSuffix"
|
||||
class="fill-height"
|
||||
virtual-scroll
|
||||
/>
|
||||
<n-dropdown
|
||||
:animated="false"
|
||||
:options="contextMenuParam.options"
|
||||
:render-label="renderContextLabel"
|
||||
:show="contextMenuParam.show"
|
||||
:x="contextMenuParam.x"
|
||||
:y="contextMenuParam.y"
|
||||
placement="bottom-start"
|
||||
trigger="manual"
|
||||
@clickoutside="handleOutsideContextMenu"
|
||||
@select="handleSelectContextMenu"
|
||||
/>
|
||||
</div>
|
||||
</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 }) => {
|
||||
// switch (option.type) {
|
||||
// case ConnectionType.Server:
|
||||
// return h(ConnectionTreeItem, { title: option.label })
|
||||
// }
|
||||
if (option.type === ConnectionType.Server) {
|
||||
const { markColor = '' } = connectionStore.serverProfile[option.name] || {}
|
||||
return h(
|
||||
'div',
|
||||
{
|
||||
style: {
|
||||
// color: markColor,
|
||||
borderRadius: '3px',
|
||||
backgroundColor: markColor,
|
||||
},
|
||||
},
|
||||
{ default: () => option.label }
|
||||
)
|
||||
}
|
||||
return option.label
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue