Skip to content

Commit

Permalink
feat: 【产品功能】搜索/全局搜索优化
Browse files Browse the repository at this point in the history
  • Loading branch information
@yzygyin
yzygyin committed Jan 21, 2025
1 parent 7d1ab21 commit f245242
Show file tree
Hide file tree
Showing 3 changed files with 179 additions and 2 deletions.
75 changes: 75 additions & 0 deletions bkmonitor/webpack/src/fta-solutions/pages/event/filter-input.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
}
104 changes: 102 additions & 2 deletions bkmonitor/webpack/src/fta-solutions/pages/event/filter-input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,13 @@ interface IFilterInputEvent {
onFavorite: string;
onChange: string;
}

interface SuggestionType {
type: string;
label: string;
prefix: string;
}

const textTypeList = ['field', 'method', 'value', 'condition'];

/* 处理字符串数组不能连续两个冒号 */
Expand Down Expand Up @@ -161,10 +168,19 @@ export default class FilerInput extends tsc<IFilterInputProps, IFilterInputEvent
];
focusData: IFocusData = {};
isManualInput = false; // 是否手动输入
isShowDropdown = false; // 是否展示仅直接输入文本弹窗
isOnlyInput = false; // 是否仅直接输入
previousValue = '';
textList: FilterText[] = [];
isEn = docCookies.getItem(LANGUAGE_COOKIE_KEY) === 'en';
/* 添加可被移除的事件监听器 */
mouseDowncontroller: AbortController = null;

suggestionTypes: SuggestionType[] = [
{ type: 'exact', label: this.$t('精确搜索') as string, prefix: '"' },
{ type: 'fuzzy', label: this.$t('模糊匹配') as string, prefix: '' },
];

get menuList() {
if (this.focusData.show === 'condition') return this.conditionList;
if (this.focusData.show === 'method') return this.methodList;
Expand Down Expand Up @@ -206,6 +222,14 @@ export default class FilerInput extends tsc<IFilterInputProps, IFilterInputEvent
this.handleGetSearchHistory();
this.handleGetSearchFavorite();
}

@Watch('inputValue', { immediate: true })
handleInputValueChange(newValue: string) {
this.previousValue = newValue;
if (!newValue) {
this.isOnlyInput = this.isShowDropdown = false;
}
}
created() {
// 告警建议字段列表
this.alertFieldList = [
Expand Down Expand Up @@ -565,6 +589,7 @@ export default class FilerInput extends tsc<IFilterInputProps, IFilterInputEvent
handleSelectPanelItem(e: MouseEvent, id: PanelType, item: IListItem) {
e.preventDefault();
e.stopPropagation();
this.isOnlyInput = false;
if (id === 'field') {
if (!this.inputValue?.length) {
this.inputValue = item.special ? `${item.id}.` : `${item.name} : `;
Expand Down Expand Up @@ -776,14 +801,18 @@ export default class FilerInput extends tsc<IFilterInputProps, IFilterInputEvent
this.handleMainPopoverShow();
return;
}
if (this.isOnlyInput) {
this.isShowDropdown = true;
return;
}
const ret = await this.handleSetInputValue();
if (ret.show === 'field') {
this.focusData = ret;
this.handleMainPopoverShow();
} else if (['method', 'condition', 'value'].includes(ret.show.toString())) {
this.focusData = ret;
if (ret.show.toString() === 'value' && !this.menuList.length) {
this.setPlaceholderBasedOnKeyValue();
ret.filedId && this.setPlaceholderBasedOnKeyValue();
this.destroyMenuPopoverInstance();
this.destroyPopoverInstance();
return;
Expand Down Expand Up @@ -914,6 +943,13 @@ export default class FilerInput extends tsc<IFilterInputProps, IFilterInputEvent
handleInput(e: any) {
this.placeholderText = '';
this.inputValue = e.target.value;

// 检查是否需要显示搜索的下拉框
if (!this.previousValue) {
this.isOnlyInput = this.isShowDropdown = true;
this.destroyMenuPopoverInstance();
this.destroyPopoverInstance();
}
}
/**
* @description: 失焦时触发
Expand All @@ -922,8 +958,10 @@ export default class FilerInput extends tsc<IFilterInputProps, IFilterInputEvent
*/
handleBlur() {
if (!this.blurInPanel) {
this.isShowDropdown && this.selectSuggestion('exact');
this.$emit('blur', this.inputValue);
this.handleChange();
this.isShowDropdown = false;
}
}
/**
Expand All @@ -946,10 +984,13 @@ export default class FilerInput extends tsc<IFilterInputProps, IFilterInputEvent
*/
handleKeydown(e: KeyboardEvent) {
if (e.code === 'Enter') {
if (this.isOnlyInput && this.inputValue.trim()) {
this.selectSuggestion('exact');
}
e.preventDefault();
e.stopPropagation();
this.handleChange();
} else if (e.code === 'Space' || e.code === 'Backspace') {
} else if ((e.code === 'Space' || e.code === 'Backspace') && !this.isOnlyInput) {
setTimeout(() => {
this.handleInputFocus();
}, 16);
Expand All @@ -967,6 +1008,7 @@ export default class FilerInput extends tsc<IFilterInputProps, IFilterInputEvent
handleSelectMenuItem(e: MouseEvent, item: IListItem) {
e.preventDefault();
e.stopPropagation();
this.isOnlyInput = false;
this.handleReplaceInputValue(this.isFillId ? item.id.toString() : item.name.toString());
}
/**
Expand Down Expand Up @@ -1133,6 +1175,38 @@ export default class FilerInput extends tsc<IFilterInputProps, IFilterInputEvent
this.handleRemoveNewFavorite();
item.edit = false;
}

/**
* @description: 根据类型选择，并更新输入值
* @param {string} type - 指定的类型，用于确定如何处理输入值
* @return {void}
*/
selectSuggestion(type: string) {
const newValue = this.inputValue;
if (type === 'exact') {
this.inputValue = this.wrapWithPrefixIfNeeded(newValue, '"');
} else {
this.inputValue = newValue;
}
this.isShowDropdown = false;
}

/**
* @description: 根据条件判断是否为输入值添加前缀和后缀
* @param {string} inputValue - 当前的输入值
* @param {string} prefix - 需要添加的前缀和后缀
* @return {string} - 处理后的字符串
*/
wrapWithPrefixIfNeeded(inputValue: string, prefix: string) {
const isQuoted = inputValue.startsWith('"') && inputValue.endsWith('"');

if (prefix === '"') {
return isQuoted ? inputValue : `"${inputValue}"`;
}

return isQuoted && prefix === '' ? inputValue.slice(1, -1) : inputValue;
}

commonPanelComponent(id: PanelType, list: IListItem[]) {
return (
<ul class='panel-list'>
Expand Down Expand Up @@ -1234,6 +1308,32 @@ export default class FilerInput extends tsc<IFilterInputProps, IFilterInputEvent
v-bk-tooltips={this.$t('清空搜索条件')}
onMousedown={this.handleClear}
/>
<div
style={{ display: this.isShowDropdown ? 'block' : 'none' }}
class='search-type-dropdown'
>
{this.suggestionTypes.map((item, index) => (
<div
key={item.type}
class={['suggestion-container', { active: index === 0 }]}
onMousedown={() => this.selectSuggestion(item.type)}
>
<div
class='left-item'
v-bk-overflow-tips
>
{this.wrapWithPrefixIfNeeded(this.inputValue, item.prefix)}
</div>
<div
class='center-item'
v-bk-overflow-tips
>
<span>{item.label}</span>
<bk-tag>{this.wrapWithPrefixIfNeeded(this.inputValue, '')}</bk-tag>
</div>
</div>
))}
</div>
</div>
<span
class={['filter-favorites', { 'is-disable': this.favoriteDisable }]}
Expand Down
2 changes: 2 additions & 0 deletions bkmonitor/webpack/src/monitor-pc/lang/table-column.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,8 @@ export default {
对比项: 'Comparative Item',
告警: 'Alarm',
关注人: 'Follower',
精确搜索: 'Advanced Search',
模糊匹配: 'Fuzzy Matching',

单号: 'Order Number',
当前步骤: 'Current Step',
Expand Down

0 comments on commit f245242

Please sign in to comment.