From 1d67584c9ad15aa14bca64ba5af3e58bcab53931 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Fri, 15 Dec 2023 18:48:51 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6showHint=E6=A0=B7=E5=BC=8F=E5=92=8C=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA=E6=96=87=E6=9C=AC=EF=BC=8C=E9=9A=90=E8=97=8F/?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E7=9B=B8=E5=85=B3=E5=AE=9E=E4=BD=93=E6=97=B6?=
 =?UTF-8?q?=E8=81=94=E5=8A=A8=E5=B7=A6=E4=BE=A7filter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/advancedSearch/codemirror.scss | 11 ++--
 src/components/advancedSearch/TextMode.vue    |  5 +-
 .../advancedSearch/showhint/Hint/HintInfo.vue | 11 ++--
 .../showhint/const/defaultTips.js             | 54 ++++++++++++-------
 src/views/entityExplorer/EntityExplorer.vue   |  1 +
 5 files changed, 50 insertions(+), 32 deletions(-)

diff --git a/src/assets/css/components/components/advancedSearch/codemirror.scss b/src/assets/css/components/components/advancedSearch/codemirror.scss
index a09d3149..befb2e96 100644
--- a/src/assets/css/components/components/advancedSearch/codemirror.scss
+++ b/src/assets/css/components/components/advancedSearch/codemirror.scss
@@ -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 {
diff --git a/src/components/advancedSearch/TextMode.vue b/src/components/advancedSearch/TextMode.vue
index 9b92492d..68222532 100644
--- a/src/components/advancedSearch/TextMode.vue
+++ b/src/components/advancedSearch/TextMode.vue
@@ -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', // 自动换行
diff --git a/src/components/advancedSearch/showhint/Hint/HintInfo.vue b/src/components/advancedSearch/showhint/Hint/HintInfo.vue
index bcf196b9..cdda4e4f 100644
--- a/src/components/advancedSearch/showhint/Hint/HintInfo.vue
+++ b/src/components/advancedSearch/showhint/Hint/HintInfo.vue
@@ -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;
diff --git a/src/components/advancedSearch/showhint/const/defaultTips.js b/src/components/advancedSearch/showhint/const/defaultTips.js
index 0fb1aeb9..e1416e20 100644
--- a/src/components/advancedSearch/showhint/const/defaultTips.js
+++ b/src/components/advancedSearch/showhint/const/defaultTips.js
@@ -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>
-        <code>domain like '%google.com'</code>
-        <p class='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>
+        <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 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>
+          <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>
-        <code>domain like '%google.com'</code>
-        <p class='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>
+        <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 className='show-hint-tips__p'>包含空格的字符串必须用单引号(')括住。例如：</p>
+          <code>ip=192.168.10.53</code>
+          <code>ip.country='United States'</code>
+          <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>
diff --git a/src/views/entityExplorer/EntityExplorer.vue b/src/views/entityExplorer/EntityExplorer.vue
index 3b43ce2f..c49e15a4 100644
--- a/src/views/entityExplorer/EntityExplorer.vue
+++ b/src/views/entityExplorer/EntityExplorer.vue
@@ -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 })
     }