feat: simplify results visibility management in AutoProbeResultsContainer

This commit is contained in:
Marvin Zhang
2025-05-16 13:32:10 +08:00
parent 9144ab5fe0
commit 6705ce2ded

View File

@@ -20,8 +20,7 @@ const resultsContainerRef = ref<HTMLElement | null>(null);
// States // States
const activeTabName = ref<string | undefined>(TAB_NAME_RESULTS); const activeTabName = ref<string | undefined>(TAB_NAME_RESULTS);
// Computed const resultsVisible = ref(true);
const resultsVisible = computed(() => !!activeTabName.value);
const resultsTabItems = computed<NavItem[]>(() => [ const resultsTabItems = computed<NavItem[]>(() => [
{ {
@@ -80,15 +79,17 @@ const tableCellStyle: CellStyle<PageData> = ({ column }) => {
// Methods // Methods
const onTabSelect = (id: string) => { const onTabSelect = (id: string) => {
if (activeTabName.value === id) { activeTabName.value = id;
hideResults(); if (!resultsVisible.value) {
} else { resultsVisible.value = true;
activeTabName.value = id;
} }
}; };
const hideResults = () => { const toggleResults = () => {
activeTabName.value = undefined; resultsVisible.value = !resultsVisible.value;
if (!activeTabName.value && resultsVisible.value) {
activeTabName.value = TAB_NAME_RESULTS;
}
}; };
// Resize handler // Resize handler
@@ -128,10 +129,13 @@ defineOptions({ name: 'ClAutoProbeResultsContainer' });
<template #extra> <template #extra>
<div class="results-actions"> <div class="results-actions">
<cl-icon <cl-icon
v-if="resultsVisible"
color="var(--cl-info-color)" color="var(--cl-info-color)"
:icon="['fa', 'minus']" :icon="
@click="hideResults" resultsVisible
? ['fa', 'window-minimize']
: ['fa', 'window-maximize']
"
@click="toggleResults"
/> />
</div> </div>
</template> </template>