feat:优化三级菜单样式

src/components/GlobalHeader/ExtendRightContent.js

@@ -106,7 +106,7 @@ export const getConfig = (widgets, url, key) => {
   return widgetconfig;
 };
 const GlobalHeaderRight = props => {
-
+  const [options, setOptions] = useState([]);
   const homeRef = useRef(null);
   const favitorRef = useRef(null);
 
@@ -159,9 +159,55 @@ const GlobalHeaderRight = props => {
     window.share.event.emit('event:theme');
   }
 
+  const handleSelect = (value, data) => {
+    window.share.event.emit('addTips', options, data);
+  };
+
+  const handleSearch = value => {
+    // eslint-disable-next-line no-undef
+    const search = new AMap.Autocomplete();
+    const areaName =
+      // eslint-disable-next-line no-undef
+      createStoreage.get('globalConfig').mapsettings.areasettings &&
+      // eslint-disable-next-line no-undef
+      createStoreage.get('globalConfig').mapsettings.areasettings.areaName;
+    const area = (areaName || '') + value;
+    setOptions([]);
+    // eslint-disable-next-line no-unused-expressions
+    value
+      ? search.search(area, (status, res) => {
+        if (res && res.tips) {
+            const result = res.tips.map(item => {
+              item.value = item.name;
+              item.label = (
+                <>
+                  <span>{item.name}</span>
+                  <span style={{ color: '#c1c1c1' }}>
+                    {item.district + item.address}
+                  </span>
+                </>
+              );
+              return item;
+            });
+
+            setOptions(result);
+          }
+        })
+      : setOptions([]);
+  };
 
   return (
     <div className={className}>
+       <HeaderSearch
+          className={`${styles.action} ${styles.search} ${styles.extendsearch}`}
+          placeholder={intl.formatMessage({id:'component.search.menu.placeholder'})}
+          defaultValue=""
+          options={options}
+          {...props}
+          onSelect={handleSelect}
+          onChange={handleSearch}
+          onSearch={handleSearch}
+      />
       <div className={styles.nav}>
         <div className={classNames(styles.item)} onClick={goHome} ref={homeRef}>
             <HomeIcon  title={intl.formatMessage({id: 'component.header.icon.home'})} />

src/components/GlobalHeader/index.less

@@ -40,6 +40,12 @@
       background: transparent;
     }
   }
+  .extendsearch {
+    & :global(.ant-input-affix-wrapper) {
+      padding: 3px 11px!important;
+      background: #fff;
+    }
+  }
   .account {
     .avatar {
       margin: ~'calc((@{layout-header-height} - 24px) / 2)' 0;

src/components/HeaderSearch/index.js

@@ -44,7 +44,7 @@ const HeaderSearch = props => {
     onChange: onVisibleChange,
   });
 
-  const inputClass = classNames(styles.input, styles.search, {
+  const inputClass = classNames(styles.input, styles.search, props.className, {
     [styles.show]: searchMode,
   });
 

src/layouts/BasicLayout.less

@@ -276,7 +276,7 @@
         }
     }
     .menu-item-children {
-        height: 47px;
+        height: 36px;
         background: #fff;
         box-shadow: rgb(240 241 242) 0px 2px 8px;
         position: fixed;
@@ -297,6 +297,7 @@
 
         & :global {
             .ant-tabs-tab {
+                padding: 7px 0!important;
                 &:hover {
                     svg path, svg rect,  svg circle {
                         fill: @primary-color!important;
@@ -326,6 +327,7 @@
             position: relative;
             align-items: center;
             color: #737983;
+            transform: scale(0.92);
         }
         & :global(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
             color: @primary-color!important;
@@ -348,9 +350,14 @@
         }
         & :global {
             .ant-divider-vertical {
-                left: 15px;
+                left: 20px;
                 margin: 0 1px!important;
             }
+            .ant-tabs-nav-operations {
+                .ant-tabs-nav-more {
+                    margin-right: 0px!important;
+                }
+            }
         }
         & :global(.ant-tabs-ink-bar) {
             background: @primary-color!important;

src/layouts/BasicLayout1.js

@@ -182,7 +182,7 @@ const renderSite = ({data, config, loading, setLoading, action}) => {
   const [visible, setVisible] = useState(false);
   let loaded = !!((data && !data.stations) || (Array.isArray(data.weathers) && data.weathers.length === 0));
   if (config && config.userInfo && config.userInfo.site === '') {
-    loaded = true;
+    loaded = false;
   };
   return (
     <>
@@ -544,8 +544,8 @@ const BasicLayout = props => {
                        
                     </div>
                   </div>
-                  <div className={layoutStyles['menu-item-children']}>
-                     <Tabs accessKey={tabActiveKey} tabBarGutter={30} onTabClick={(event) => handleSelectMenuItem(event)}>
+                  <div className={layoutStyles['menu-item-children']} style={{width: collapse ? 'calc(100% - 46px)': 'calc(100% - 100px)'}}>
+                     <Tabs accessKey={tabActiveKey} tabBarGutter={30} tabPosition="top" onTabClick={(event) => handleSelectMenuItem(event)}>
                      {childrenRoutes.map((item, index) => (
                           <>
                             <TabPane 
@@ -559,14 +559,17 @@ const BasicLayout = props => {
                                           item.icon ? item.icon: item.extData && /.svg/.test(item.extData.icon) ? <ReactSVG src={item.extData.icon} style={{width: '18px', height: '18px'}}/>:item.extData && <img src={item.extData.icon} style={{width: '18px', height: '18px'}}/>
                                         }
                                         <span className={layoutStyles['menu-item-name']}>{item.name}</span>
-                                        <Divider type="vertical" />
+                                        {
+                                          childrenRoutes.length === 1 ? null: <Divider type="vertical" />
+                                        }
+                                        
                                       </>
                                     )
                                   }
                                 </>
                               }
                               key={item.path}
-                              disabled={index === 16}>
+                              >
                            </TabPane>
                           </>
                       ))}
@@ -576,7 +579,7 @@ const BasicLayout = props => {
                   <div className='ant-pro-grid-content'>
                         <div className="ant-pro-grid-content-children">
                               <div className={layoutStyles['ant-pro-page-container-children-content']}>
-                                  <div id="micro-container" className="subapp-container" style={{height: '89.8vh', position: 'relative', top: '64px'}}/>
+                                  <div id="micro-container" className="subapp-container" style={{height: '90.4vh', position: 'relative', top: '59px'}}/>
                               </div>
                         </div>
                     </div>