Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 【产品功能】搜索/全局搜索优化 --story=121568468 #4849

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: 【产品功能】搜索/全局搜索优化 --story=121568468 #4849

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 75 additions & 0 deletions bkmonitor/webpack/src/fta-solutions/pages/event/filter-input.scss
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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