feat: 导航栏全局搜索输入框替换 --story=120798093

bkmonitor/webpack/src/monitor-pc/lang/new-home.ts

@@ -54,7 +54,7 @@ export default {
   删除该业务: 'Delete this space',
   添加业务: 'Add a service',
   '请输入 IP / Trace ID / 容器集群 / 告警ID / 策略名 进行搜索':
-    'Please enter IP / Trace ID / container cluster / alarm ID / policy name to search',
+    'Please enter IP / Trace ID / Container cluster / Alarm ID / Policy name to search',
   清空搜索: 'Clear search',
   '当前正在加载 采集任务': 'Currently loading the collection task',
   相关功能: 'Related functions',

bkmonitor/webpack/src/monitor-pc/pages/home/new-home/components/home-select.scss

@@ -1,8 +1,8 @@
 .new-home-select {
-  position: relative;
+  position: fixed;
   width: 100%;
   min-height: 52px;
-
+  z-index: 2000;
   .loading-view {
     width: 170px;
     height: 24px;
@@ -102,7 +102,7 @@
 
   .home-select-input {
     box-sizing: border-box;
-    width: 98%;
+    width: 97%;
     padding: 16px 0 12px;
     overflow: hidden;
     font-size: 16px;
@@ -163,7 +163,7 @@
   z-index: 500;
   width: 100%;
   max-height: 405px;
-  margin-top: 4px;
+  margin-top: 8px;
   background: #fff;
   border-radius: 8px;
 }
@@ -282,7 +282,7 @@
 
     .history-item-name {
       display: inline-block;
-      width: 97%;
+      width: 96%;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -341,3 +341,51 @@
     }
   }
 }
+/** 展示在顶部导航栏的时候的样式处理 */
+.home-select-bar-tool {
+  top: 10px;
+  right: 262px;
+  width: 720px !important;
+  min-height: 32px;
+  .icon-search {
+    font-size: 14px;
+    position: absolute;
+    right: 10px;
+    top: 9px;
+    color: #979ba5;
+  }
+  .new-home-select-input {
+    background: #252f43;
+    border: 1px solid #394561 !important;
+    min-height: 33px;
+    border-radius: 2px;
+    padding: 0;
+    .clear-btn {
+      top: 8px;
+      font-size: 14px;
+      right: 30px;
+    }
+  }
+  .home-select-input {
+    padding: 5px 10px 6px 16px;
+    font-size: 12px;
+    height: 28px;
+    width: 93%;
+    line-height: 22px;
+    &::placeholder {
+      font-size: 12px;
+      line-height: 22px;
+      color: #7a8199;
+    }
+  }
+  .new-home-select-popover {
+    margin-top: 2px;
+    border-radius: 2px;
+    .new-home-select-popover-content {
+      border-radius: 2px;
+    }
+  }
+  .select-empty {
+    border-radius: 2px;
+  }
+}

bkmonitor/webpack/src/monitor-pc/pages/home/new-home/components/home-select.tsx

@@ -23,28 +23,36 @@
  * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  * IN THE SOFTWARE.
  */
-import { Component, Ref } from 'vue-property-decorator';
+import { Component, Ref, Prop } from 'vue-property-decorator';
 import { Component as tsc } from 'vue-tsx-support';
 
 import debounceDecorator from 'monitor-common/utils/debounce-decorator';
 
 import { COMMON_ROUTE_LIST } from '../../../../router/router-config';
-import { highLightContent, ESearchType, ESearchPopoverType } from '../utils';
+import { highLightContent, ESearchType, ESearchPopoverType, flattenRoute } from '../utils';
 
 import type { ISearchListItem, ISearchItem, IRouteItem, IDataItem } from '../type';
 
 import './home-select.scss';
 
 interface IHomeSelectProps {
-  searchList?: ISearchListItem[];
-  historyList?: ISearchListItem[];
+  isBarToolShow?: boolean;
+  show?: boolean;
+}
+
+interface IHomeSelectEvent {
+  onChange: (v: boolean, searchKey: string) => void;
 }
 const storageKey = 'bk_monitor_new_home_history';
 
 @Component({
   name: 'HomeSelect',
 })
-export default class HomeSelect extends tsc<IHomeSelectProps> {
+export default class HomeSelect extends tsc<IHomeSelectProps, IHomeSelectEvent> {
+  /** 是否为展示在顶部导航栏的状态 */
+  @Prop({ default: false, type: Boolean }) isBarToolShow: boolean;
+  /** 是否需要展示，配合着外部组件的交互 */
+  @Prop({ default: false, type: Boolean }) show: boolean;
   @Ref('select') selectRef: HTMLDivElement;
   @Ref('textareaInput') textareaInputRef: HTMLDivElement;
   searchValue = '';
@@ -74,19 +82,6 @@ export default class HomeSelect extends tsc<IHomeSelectProps> {
   /** 窗口宽度 */
   windowWidth = 0;
 
-  /** 处理数据 */
-  flattenRoute(tree: IRouteItem[]) {
-    const result = [];
-    const traverse = node => {
-      if (!node) return;
-      result.push(node);
-      if (node.children && node.children.length > 0) {
-        node.children.map(child => traverse(child));
-      }
-    };
-    tree.map(rootNode => traverse(rootNode));
-    return result;
-  }
   /** 符合搜索内容的路由列表 */
   get searchRouteList() {
     return (this.routeList || []).filter(item => item.name.indexOf(this.searchValue) !== -1);
@@ -100,20 +95,24 @@ export default class HomeSelect extends tsc<IHomeSelectProps> {
     return this.isSearchResult ? ESearchPopoverType.searchList : ESearchPopoverType.localHistoryList;
   }
   get computedWidth() {
-    return this.windowWidth < 2560 ? 920 : 1080;
+    return this.isBarToolShow ? 720 : this.windowWidth < 2560 ? 920 : 1080;
   }
 
   mounted() {
     this.autoResize();
     this.updateWidth();
-    this.routeList = this.flattenRoute(COMMON_ROUTE_LIST).filter(item => item.icon);
+    this.routeList = flattenRoute(COMMON_ROUTE_LIST).filter(item => item.icon);
     document.addEventListener('click', this.handleClickOutside);
     window.addEventListener('resize', this.updateWidth);
   }
   beforeDestroy() {
     document.removeEventListener('click', this.handleClickOutside);
     window.removeEventListener('resize', this.updateWidth);
   }
+  /** 隐藏/展示发生变化的时候的changeHandle */
+  handleShowChange(v) {
+    this.$emit('change', v, this.searchValue);
+  }
   /** 窗口变化时更新宽度值 */
   updateWidth() {
     this.windowWidth = window.innerWidth;
@@ -122,8 +121,12 @@ export default class HomeSelect extends tsc<IHomeSelectProps> {
   handleClickOutside(event: Event) {
     if (this.showPopover && this.selectRef && !this.selectRef.contains(event.target)) {
       this.showPopover = false;
+      this.handleShowChange(false);
     }
   }
+  handleHiddenPopover() {
+    this.handleShowChange(false);
+  }
   /** 后台eventStream数据处理 Start */
   /** 解析后台返回的eventStream */
   @debounceDecorator(500)
@@ -303,6 +306,10 @@ export default class HomeSelect extends tsc<IHomeSelectProps> {
     this.isInput = true;
     this.searchValue = item.name;
     this.handleGetSearchData();
+    this.handleInputFocus();
+  }
+  /** 初始化输入框是否要自动聚焦 */
+  handleInputFocus() {
     this.textareaInputRef.focus();
   }
   /** 获取搜索结果 */
@@ -314,6 +321,7 @@ export default class HomeSelect extends tsc<IHomeSelectProps> {
     this.showPopover = false;
     this.searchValue && this.setLocalHistory(this.searchValue);
     window.open(location.href.replace(location.hash, item.href));
+    this.handleShowChange(false);
   }
   /** 相关功能Render */
   renderRouterList() {
@@ -401,7 +409,13 @@ export default class HomeSelect extends tsc<IHomeSelectProps> {
     e.stopPropagation();
     this.searchList = [];
     this.handleResetData();
-    this.textareaInputRef.style.height = '52px';
+    const height = this.isBarToolShow ? '32px' : '50px';
+    this.textareaInputRef.style.height = height;
+    /** 展示在顶部导航栏的时候的特殊处理 */
+    if (this.isBarToolShow) {
+      this.selectRef.style.height = height;
+    }
+    this.handleInputFocus();
   }
   /** 重置相关的数据 */
   handleResetData() {
@@ -415,7 +429,12 @@ export default class HomeSelect extends tsc<IHomeSelectProps> {
     !this.isComposing && this.handleGetSearchData();
     this.isInput = !!event?.target?.value;
     this.textareaInputRef.style.height = 'auto';
-    this.textareaInputRef.style.height = `${this.textareaInputRef.scrollHeight}px`;
+    const height = `${this.textareaInputRef.scrollHeight}px`;
+    this.textareaInputRef.style.height = height;
+    /** 展示在顶部导航栏的时候的特殊处理 */
+    if (this.isBarToolShow) {
+      this.selectRef.style.height = height;
+    }
   }
   /** 清空历史 */
   clearHistory() {
@@ -600,7 +619,7 @@ export default class HomeSelect extends tsc<IHomeSelectProps> {
 
     const option = routeOptions[type];
     if (!option) return;
-
+    this.handleShowChange(false);
     const routeData = this.$router.resolve(option);
     const extraParams = option.extraParams ? `&${new URLSearchParams(option.extraParams).toString()}` : '';
     const baseUrl = `${location.origin}/?${new URLSearchParams(baseParams).toString()}${extraParams}`;
@@ -655,12 +674,12 @@ export default class HomeSelect extends tsc<IHomeSelectProps> {
         >
           <span>
             {this.$t('当前输入条件无匹配结果，请清空后重新输入')}
-            <label
+            <span
               class='empty-clear-btn'
               onClick={this.clearInput}
             >
               {this.$t('清空搜索')}
-            </label>
+            </span>
           </span>
         </bk-exception>
       );
@@ -683,13 +702,13 @@ export default class HomeSelect extends tsc<IHomeSelectProps> {
 
   render() {
     return (
-      <div class='new-home-select'>
+      <div class={['new-home-select', { 'home-select-bar-tool': this.isBarToolShow }]}>
         <div
           ref='select'
           style={{ width: `${this.computedWidth}px` }}
           class='new-home-select-input'
         >
-          <span class='new-home-select-icon'></span>
+          {!this.isBarToolShow && <span class='new-home-select-icon'></span>}
           <textarea
             ref='textareaInput'
             class='home-select-input'
@@ -703,13 +722,14 @@ export default class HomeSelect extends tsc<IHomeSelectProps> {
             onInput={this.autoResize}
             onKeydown={this.handleKeydown}
           ></textarea>
+          {this.isBarToolShow && <span class='bk-icon icon-search'></span>}
           {this.searchValue && (
             <span
               class='icon-monitor clear-btn icon-mc-close-fill'
               onClick={this.clearInput}
             />
           )}
-          {this.showPopover && (
+          {(this.isBarToolShow || this.showPopover) && (
             <div class='new-home-select-popover'>
               {this.isSearchResult ? this.renderSearchView() : this.renderHistoryView()}
             </div>

bkmonitor/webpack/src/monitor-pc/pages/home/new-home/new-home.scss

@@ -24,7 +24,7 @@
     .new-home-tool {
       width: 100%;
       min-height: 300px;
-      margin-top: 50px;
+      margin-top: 110px;
     }
 
     .new-home-alarm-list {

bkmonitor/webpack/src/monitor-pc/pages/home/new-home/utils.ts

@@ -24,6 +24,8 @@
  * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  * IN THE SOFTWARE.
  */
+
+import type { IRouteItem } from './type';
 export interface IDataItem {
   [key: string]: any;
 }
@@ -116,3 +118,21 @@ export function handleYAxisLabelFormatter(num: number): string {
   }
   return (num / si[i].value).toFixed(3).replace(rx, '$1') + si[i].symbol;
 }
+
+/**
+ * @description: 处理树形结构的数据，将数据统一为平级的数据
+ * @param {IRouteItem[]} tree
+ * @return {*}
+ */
+export function flattenRoute(tree: IRouteItem[]) {
+  const result = [];
+  const traverse = node => {
+    if (!node) return;
+    result.push(node);
+    if (node.children && node.children.length > 0) {
+      node.children.map(child => traverse(child));
+    }
+  };
+  tree.map(rootNode => traverse(rootNode));
+  return result;
+}

bkmonitor/webpack/src/monitor-pc/pages/nav-tools.tsx

@@ -41,7 +41,8 @@ import zhIcon from '../static/images/svg/zh.svg';
 import type { IMenuItem } from '../types';
 
 // #if APP !== 'external'
-import GlobalSearchModal from './global-search-modal-new';
+// import GlobalSearchModal from './global-search-modal-new';
+import HomeSelect from 'monitor-pc/pages/home/new-home/components/home-select';
 import SettingModal from './setting-modal';
 // #endif
 
@@ -178,6 +179,8 @@ class NavTools extends DocumentLinkMixin {
    */
   handleGlobalSearch() {
     this.globalSearchShow = !this.globalSearchShow;
+    /** 展示在顶部导航栏的时候的自动聚焦 */
+    setTimeout(() => (this.$refs.homeSelectModal as any)?.handleInputFocus(), 10);
   }
   /**
    * @description: 帮助列表
@@ -508,11 +511,17 @@ class NavTools extends DocumentLinkMixin {
             </SettingModal>,
             <keep-alive key='keep-alive'>
               {this.globalSearchShow && (
-                <GlobalSearchModal
-                  ref='globalSearchModal'
+                <HomeSelect
+                  ref='homeSelectModal'
+                  isBarToolShow={true}
                   show={this.globalSearchShow}
                   onChange={this.handleGlobalSearchShowChange}
                 />
+                // <GlobalSearchModal
+                //   ref='globalSearchModal'
+                //   show={this.globalSearchShow}
+                //   onChange={this.handleGlobalSearchShowChange}
+                // />
               )}
             </keep-alive>,
           ]