fix: 调整搜索组件showHint样式和提示文本,隐藏/显示相关实体时联动左侧filter
This commit is contained in:
@@ -375,16 +375,15 @@ span.CodeMirror-selectedtext { background: none; }
|
||||
}
|
||||
|
||||
.hint-title {
|
||||
margin: 10px 10px 10px 0;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
margin: 7px 0 3px 0 !important;
|
||||
/* 禁止选中 样式 */
|
||||
background: #fff !important;
|
||||
font-family: NotoSansHans-Medium;
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
color: #333333 !important;
|
||||
letter-spacing: 0;
|
||||
font-weight: 500;
|
||||
font-weight: 600 !important;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.cm-s-eclipse span.cm-string-2 {
|
||||
@@ -435,7 +434,7 @@ span.CodeMirror-selectedtext { background: none; }
|
||||
}
|
||||
|
||||
.cm-variable-2{
|
||||
font-weight: bold;
|
||||
color: #164 !important;
|
||||
}
|
||||
|
||||
.default-tips-header,.default-tips-title {
|
||||
|
||||
@@ -134,12 +134,13 @@ export default {
|
||||
option = {
|
||||
keyMap: 'sublime',
|
||||
tabSize: 2, // 缩进格式
|
||||
theme: 'eclipse', // 主题,对应主题库 JS 需要提前引入
|
||||
// theme: 'eclipse', // 主题,对应主题库 JS 需要提前引入
|
||||
line: true,
|
||||
lineNumbers: false, // 显示行数
|
||||
indentUnit: 4, // 缩进单位为4
|
||||
styleActiveLine: true, // 当前行背景高亮
|
||||
mode: 'text/x-filter', // HMTL混合模式
|
||||
// mode: 'text/x-filter', // HMTL混合模式
|
||||
mode: 'sql', // HMTL混合模式
|
||||
foldGutter: true,
|
||||
lint: true,
|
||||
auto: 'auto', // 自动换行
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
<ul style="padding-left: 0;margin: -10px 0 0 0;min-width: calc(100% - 12px)">
|
||||
<template v-for="(item,index) in hintList" :key="index">
|
||||
<li :ref="'hint_'+index" class="relative-item CodeMirror-hint"
|
||||
style="margin-bottom: 2px"
|
||||
@click="handleSelect(item,index,hintList)"
|
||||
:class="{'CodeMirror-hint-active':index === activeIndex,[item.className]:true}"
|
||||
>{{ item.displayText }}</li>
|
||||
@@ -113,14 +114,12 @@ export default {
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.hint-title{
|
||||
margin: 10px !important;
|
||||
margin-left: 0 !important;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.el-dropdown-menu__item{
|
||||
text-indent: 1em;
|
||||
font-size: 12px !important;
|
||||
font-family: NotoSansSChineseRegular;
|
||||
color: #575757;
|
||||
font-weight: 400;
|
||||
}
|
||||
.hint-clear{
|
||||
text-indent: 1em;
|
||||
|
||||
@@ -5,15 +5,25 @@ export default {
|
||||
<div class='default-tips-header'>How To Search</div>
|
||||
<p class='show-hint-tips__p'> You can write queries to retrieve entities, including their basic information, activity levels, network performance, threat events, relationships with other entities, and so on. A query has three basic parts: fields, operators, and values.</p>
|
||||
<code>[Field + operator + value] keyword [operator(Field)]</code>
|
||||
<p class='show-hint-tips__p'>Field - Fields are different types of traffic attributes in the system. Fields include ip, domain, app, and so on.</p>
|
||||
<p class='show-hint-tips__p'>Operator - Operators are the foundation of the query. They relate the field to the value and build a query condition. Common operators include =, IN, Like, and so on.</p>
|
||||
<p class='show-hint-tips__p'>Value - Values are the actual data in the query.</p>
|
||||
<p class='show-hint-tips__p'>Use the percent(%) wildcard substitutes for one or more characters in a string. Such as: </p>
|
||||
<ul style="padding: 0">
|
||||
<li className='show-hint-tips__p'>Field - Fields are different types of traffic attributes in the system.
|
||||
Fields include ip, domain, app, and so on.
|
||||
</li>
|
||||
<li className='show-hint-tips__p'>Operator - Operators are the foundation of the query. They relate the field
|
||||
to the value and build a query condition. Common operators include =, IN, Like, and so on.
|
||||
</li>
|
||||
<li className='show-hint-tips__p'>Value - Values are the actual data in the query.</li>
|
||||
<p className='show-hint-tips__p'>Use the percent(%) wildcard substitutes for one or more characters in a
|
||||
string. Such as: </p>
|
||||
<code>domain like '%google.com'</code>
|
||||
<p class='show-hint-tips__p'>Strings containing spaces must be enclosed in single quotes ('). Such as:</p>
|
||||
<p className='show-hint-tips__p'>Strings containing spaces must be enclosed in single quotes ('). Such as:</p>
|
||||
<code>ip=192.168.10.53</code>
|
||||
<code>ip.country='United States'</code>
|
||||
<p class='show-hint-tips__p'>Keyword - Keywords are specific words in the query. You can specify the AND and OR to create more complex query conditions. Currently only support AND.</p>
|
||||
<li className='show-hint-tips__p'>Keyword - Keywords are specific words in the query. You can specify the AND
|
||||
and OR to create more complex query conditions.
|
||||
</li>
|
||||
<p className='show-hint-tips__p'>Currently only support AND.</p>
|
||||
</ul>
|
||||
<p class='show-hint-tips__p'>There are two input modes, which can be switched by clicking the button on the right side of the input box.</p>
|
||||
|
||||
<div class='default-tips-title'> 1. Text Mode</div>
|
||||
@@ -30,15 +40,23 @@ export default {
|
||||
<div class='default-tips-header'>如何搜索</div>
|
||||
<p class='show-hint-tips__p'>您可以编写查询来检索实体。查询具有三个基本部分:字段、运算符和值。</p>
|
||||
<code>[字段 + 运算符 + 值] 关键字 [运算符(字段)]</code>
|
||||
<p class='show-hint-tips__p'>字段 - 字段是系统中不同类型的属性。字段包括 ip、domain、app 等。</p>
|
||||
<p class='show-hint-tips__p'>运算符 - 运算符是查询的基础。他们将字段与值相关联并构建查询条件。常见的运算符包括 =、IN、Like 等。</p>
|
||||
<p class='show-hint-tips__p'>值 - 值是查询中的实际数据。</p>
|
||||
<p class='show-hint-tips__p'>使用百分号(%)通配符替换字符串中的一个或多个字符。例如:</p>
|
||||
<ul style="padding: 0">
|
||||
<li className='show-hint-tips__p'>字段 - 字段是系统中不同类型的属性。字段包括 ip、domain、app 等。</li>
|
||||
<li className='show-hint-tips__p'>运算符 - 运算符是查询的基础。他们将字段与值相关联并构建查询条件。常见的运算符包括
|
||||
=、IN、Like 等。
|
||||
</li>
|
||||
<li className='show-hint-tips__p'>值 - 值是查询中的实际数据。</li>
|
||||
<p className='show-hint-tips__p'>使用百分号(%)通配符替换字符串中的一个或多个字符。例如:</p>
|
||||
<code>domain like '%google.com'</code>
|
||||
<p class='show-hint-tips__p'>包含空格的字符串必须用单引号(')括住。例如:</p>
|
||||
<p className='show-hint-tips__p'>包含空格的字符串必须用单引号(')括住。例如:</p>
|
||||
<code>ip=192.168.10.53</code>
|
||||
<code>ip.country='United States'</code>
|
||||
<p class='show-hint-tips__p'>关键字 - 关键字是查询中的特定单词。您可以指定 AND 和 OR 来创建更复杂的查询条件。暂时只支持AND。</p>
|
||||
<li className='show-hint-tips__p'>关键字 - 关键字是查询中的特定单词。您可以指定 AND 和 OR
|
||||
来创建更复杂的查询条件。
|
||||
</li>
|
||||
<p className='show-hint-tips__p'>暂时只支持AND。</p>
|
||||
</ul>
|
||||
|
||||
<p class='show-hint-tips__p'>有两种输入模式,通过点击输入框右侧的按钮进行切换。</p>
|
||||
|
||||
<div class='default-tips-title'> 1. 文本模式</div>
|
||||
|
||||
@@ -806,6 +806,7 @@ export default {
|
||||
hideRelatedEntities (e) {
|
||||
this.isHideRelatedEntities = e
|
||||
this.reloadUrl({ hideRelated: e })
|
||||
this.queryFilterNew({ q: this.q, ...this.pageObj, ...this.timeFilter })
|
||||
this.queryList({ q: this.q, ...this.pageObj, ...this.timeFilter })
|
||||
this.queryCount({ q: this.q, ...this.pageObj, ...this.timeFilter })
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user