diff --git a/bkmonitor/webpack/src/fta-solutions/pages/event/filter-input.scss b/bkmonitor/webpack/src/fta-solutions/pages/event/filter-input.scss index 83e1733eab..4559250e65 100644 --- a/bkmonitor/webpack/src/fta-solutions/pages/event/filter-input.scss +++ b/bkmonitor/webpack/src/fta-solutions/pages/event/filter-input.scss @@ -207,3 +207,78 @@ .condition-list { @include common-list(240px) } + +.search-type-dropdown { + position: absolute; + top: 100%; + left: 0; + z-index: 10; + width: 100%; + padding: 4px 0; + background-color: white; + border: 1px solid #c4c6cc; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + transform: translateY(3px); + + .suggestion-container { + position: relative; + display: flex; + align-items: center; + justify-content: flex-start; + width: 100%; + height: 32px; + cursor: pointer; + + &.active { + background-color: #F5F7FA; + + .bk-tag { + background-color: #FFFFFF; + } + } + + &:hover { + color: #3a84ff; + cursor: pointer; + background-color: #eaF3FF; + + .center-item > span{ + color: #3a84ff; + } + + .bk-tag { + cursor: pointer; + } + } + + .left-item, .center-item { + min-width: 34.3%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + .bk-tag { + max-width: calc(100% - 48px); + margin-left: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + .left-item { + padding-right: 16px; + margin-left: 12px; + + } + + .center-item { + display: flex; + align-items: center; + + & > span { + color: #979BA5; + } + } + } +} diff --git a/bkmonitor/webpack/src/fta-solutions/pages/event/filter-input.tsx b/bkmonitor/webpack/src/fta-solutions/pages/event/filter-input.tsx index 120d7c992b..9b1691cb95 100644 --- a/bkmonitor/webpack/src/fta-solutions/pages/event/filter-input.tsx +++ b/bkmonitor/webpack/src/fta-solutions/pages/event/filter-input.tsx @@ -66,6 +66,13 @@ interface IFilterInputEvent { onFavorite: string; onChange: string; } + +interface SuggestionType { + type: string; + label: string; + prefix: string; +} + const textTypeList = ['field', 'method', 'value', 'condition']; /* 处理字符串数组不能连续两个冒号 */ @@ -161,10 +168,19 @@ export default class FilerInput extends tsc { this.handleInputFocus(); }, 16); @@ -967,6 +1008,7 @@ export default class FilerInput extends tsc @@ -1234,6 +1308,32 @@ export default class FilerInput extends tsc +
+ {this.suggestionTypes.map((item, index) => ( +
this.selectSuggestion(item.type)} + > +
+ {this.wrapWithPrefixIfNeeded(this.inputValue, item.prefix)} +
+
+ {item.label} + {this.wrapWithPrefixIfNeeded(this.inputValue, '')} +
+
+ ))} +