diff --git a/bklog/web/src/views/retrieve-v2/monitor/monitor.scss b/bklog/web/src/views/retrieve-v2/monitor/monitor.scss index a6b61f2fa9..92c11c9a73 100644 --- a/bklog/web/src/views/retrieve-v2/monitor/monitor.scss +++ b/bklog/web/src/views/retrieve-v2/monitor/monitor.scss @@ -5,11 +5,36 @@ background: #f5f7fa; &.scroll-y { - height: calc(100vh - 52px); + height: 100%; overflow-x: hidden; overflow-y: auto; } + &.is-sticky-top { + .search-bar-wrapper { + margin-left: 0; + } + + .search-result-panel { + &.flex { + .field-list-sticky { + &.is-show { + height: calc(100% - var(--offset-search-bar) - 0); + + .search-field-filter-new { + .field-filter-box { + .field-filter-container-new { + height: calc(100% - var(--offset-search-bar) - 128px); + } + } + } + } + } + } + } + } + + .sub-head { position: relative; z-index: 5; @@ -108,6 +133,11 @@ align-self: start; overflow: visible; } + + + .search-result-panel.flex .field-list-sticky.is-show { + height: calc(100% - var(--offset-search-bar) - 48px); + } } .retrieve-v2-content { diff --git a/bklog/web/src/views/retrieve-v2/monitor/monitor.vue b/bklog/web/src/views/retrieve-v2/monitor/monitor.vue index d71a5dd0ea..e23a9e435f 100644 --- a/bklog/web/src/views/retrieve-v2/monitor/monitor.vue +++ b/bklog/web/src/views/retrieve-v2/monitor/monitor.vue @@ -36,14 +36,14 @@ import RouteUrlResolver, { RetrieveUrlResolver } from '@/store/url-resolver'; import { isEqual } from 'lodash'; import { useRoute, useRouter } from 'vue-router/composables'; +import useResizeObserve from '../../../hooks/use-resize-observe'; +import useScroll from '../../../hooks/use-scroll'; import SelectIndexSet from '../condition-comp/select-index-set.tsx'; import { getInputQueryIpSelectItem } from '../search-bar/const.common'; import SearchBar from '../search-bar/index.vue'; import QueryHistory from '../search-bar/query-history.vue'; import SearchResultPanel from '../search-result-panel/index.vue'; -import useScroll from '../../../hooks/use-scroll'; import { GLOBAL_SCROLL_SELECTOR } from '../search-result-panel/log-result/log-row-attributes'; -import useResizeObserve from '../../../hooks/use-resize-observe'; const props = defineProps({ indexSetApi: { type: Function, @@ -295,6 +295,12 @@ watch( }, ); +const stickyStyle = computed(() => { + return { + '--offset-search-bar': `${searchBarHeight.value + 8}px`, + }; + }); + const contentStyle = computed(() => { return { '--left-width': `0px`, @@ -337,11 +343,11 @@ const isScrollY = computed(() => { return !window.__IS_MONITOR_TRACE__ }) -/*** 结束计算 ***/ +/** * 结束计算 ***/