feat: add connection mark color

This commit is contained in:
tiny-craft 2023-07-18 15:27:15 +08:00
parent c4f1a2e178
commit 61e702e5d5
4 changed files with 70 additions and 42 deletions

View File

@ -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)

View File

@ -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>

View File

@ -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>

View File

@ -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
} }