首页优化

src/layout/Header.js

@@ -1,7 +1,7 @@
 import React, { useState, useMemo } from "react";
 import { connect } from "dva";
 import { withRouter } from "dva/router";
-import { Dropdown, Icon, Menu, message, Button, Modal } from "antd";
+import { Dropdown, Icon, Menu, message, Button, Modal, Input } from "antd";
 import { HeaderSearch as OPTSearch, PictureThumb } from "@woowalker/feui";
 import ModifyPassword from "../components/MainPage/ModifyPassword";
 import FoUserInfoShow from "../components/MainPage/FoUserInfoShow";
@@ -13,14 +13,14 @@ import config from "../config";
 import "./header.less";
 import Option from "./Option";
 
-
 // 投屏
 const DataV = (props) => {
   const navTo = () => {
     const { OrgId, Tenant, baseConfig } = props.login;
     const preUrl = baseConfig.SCREEN_URL || config.dataVUrl;
     const queryStr = `OrgId=${OrgId}&Tenant=${Tenant}`;
-    const url = `${preUrl.indexOf("?") !== -1 ? preUrl : preUrl + "?"
+    const url = `${
+      preUrl.indexOf("?") !== -1 ? preUrl : preUrl + "?"
     }${queryStr}`;
     window.open(url, "_blank");
   };
@@ -33,8 +33,9 @@ const DataV = (props) => {
 const HeaderDataV = connect(({ login }) => ({ login }))(DataV);
 
 // 搜索
-const Search = (props) => {
+const SearchBox = (props) => {
   const [autoCompleteData, setAutoCompleteData] = useState([]);
+  const [inputVal, setInputVal] = useState("");
 
   const leafMenus = useMemo(() => {
     const menuForms = [];
@@ -66,16 +67,17 @@ const Search = (props) => {
    * @param {*} e
    */
   const handleSearchMenu = (e) => {
-    if (!e || e === "") {
+    setInputVal(e.target.value);
+    if (!e.target.value || e.target.value === "") {
       setAutoCompleteData([]);
       return;
     }
     const validResult = [];
     leafMenus.menuForms.forEach((item) => {
       if (
-        item.CODE.toLowerCase().indexOf(e.toLowerCase()) >= 0 ||
+        item.CODE.toLowerCase().indexOf(e.target.value.toLowerCase()) >= 0 ||
-        item.NAME.toLowerCase().indexOf(e.toLowerCase()) >= 0 ||
+        item.NAME.toLowerCase().indexOf(e.target.value.toLowerCase()) >= 0 ||
-        item.MenuName.toLowerCase().indexOf(e.toLowerCase()) >= 0
+        item.MenuName.toLowerCase().indexOf(e.target.value.toLowerCase()) >= 0
       ) {
         validResult.push(item);
       }
@@ -87,6 +89,36 @@ const Search = (props) => {
    * 选中菜单
    * @param {*} e
    */
+
+  const overMenu = () => {
+    if (autoCompleteData.length == 0) {
+      return (
+        <Menu>
+          <Menu.Item key="0">暂无匹配项</Menu.Item>
+        </Menu>
+      );
+    } else {
+      return (
+        <Menu
+          // onClick={handleMenuClick}
+          style={{ height: "200px", overflow: "auto" }}
+        >
+          {autoCompleteData.map((item, index) => {
+            return (
+              <Menu.Item
+                key={index}
+                onClick={() => {
+                  handleSelectMenu(item.ID);
+                }}
+              >
+                {item.NAME}({item.CODE})
+              </Menu.Item>
+            );
+          })}
+        </Menu>
+      );
+    }
+  };
   const handleSelectMenu = (e) => {
     const menu = leafMenus.menuDatas.find(
       (item) => item.Menu.Nav_MenuForm.ID === e
@@ -99,17 +131,48 @@ const Search = (props) => {
       },
     });
     props.history.push({ pathname: `/main/${menu.Node.ID}` });
+    setInputVal("");
+    setAutoCompleteData([])
   };
-
   if (window.navigator.userAgent.indexOf("Windows") < 1) {
     return <span></span>;
   } else {
     return (
-      <OPTSearch
+      // <OPTSearch
-        dataSource={autoCompleteData}
+      //   dataSource={autoCompleteData}
-        onChange={handleSearchMenu}
+      //   onChange={handleSearchMenu}
-        onSelect={handleSelectMenu}
+      //   onSelect={handleSelectMenu}
+      // />
+      // <SearchBox
+      //   backgroundColor="#F7F7F7" // 自定义背景色
+      //   placeholder="请输入关键词" // 输入框提示
+      //   hasDropdown={true} // 是否显示下拉搜索类型
+      //   onClick={handleSelectMenu} // 点击菜单执行方法
+      //   onClickSearch={handleSearchMenu} // 点击搜索按钮执行
+      //   size="sm" // 大小 lg or sm
+      //   hasBorder={false}
+      //   lists={autoCompleteData}
+      // />
+      <Dropdown overlay={overMenu} placement="topLeft" trigger={['click']}>
+        <div className="headerInput">
+          {/* <Search
+            placeholder={"请输入搜索内容"}
+            onSearch={handleSearchMenu}
+            style={{ width: 200 }}
+          /> */}
+          <Input
+            placeholder="搜索菜单"
+            prefix={<Icon type="search" style={{ color: "#909399" ,fontSize:'18px'}} />}
+            onChange={(e) => {
+              handleSearchMenu(e);
+            }}
+            onPressEnter={(e) => {
+              handleSearchMenu(e);
+            }}
+            value={inputVal}
           />
+        </div>
+      </Dropdown>
     );
   }
   //return (
@@ -121,7 +184,7 @@ const Search = (props) => {
   // />
   //)
 };
-const HeaderSearch = withRouter(connect(({ login }) => ({ login }))(Search));
+const HeaderSearch = withRouter(connect(({ login }) => ({ login }))(SearchBox));
 
 // 个人中心
 const User = (props) => {
@@ -226,14 +289,11 @@ const GuideCodePage = (props) => {
       <div>
         <div
           onClick={() => {
-            currVans()
+            currVans();
           }}
           style={{ margin: "0px 36px", display: "flex", alignItems: "center" }}
         >
-          <Icon
+          <Icon type="qrcode" className="header__right-icon" />
-            type="qrcode"
-            className="header__right-icon"
-          />
         </div>
         <Modal
           title=""
@@ -251,7 +311,6 @@ const GuideCodePage = (props) => {
           <GuideCanvas />
         </Modal>
       </div>
-
     );
   }
 };
@@ -277,7 +336,7 @@ const NavOpton = (props) => {
           {/* <Icon type='bars' className='header__right-icon'></Icon> */}
           <IconFont
             type="icon-line-108"
-            style={{ fontSize: "22px", color: "#606266", cursor: "pointer" }}
+            style={{ fontSize: "22px", color: "#909399", cursor: "pointer" }}
           ></IconFont>
         </div>
         <Modal
@@ -325,7 +384,8 @@ function Header(props) {
           <span className="header__left-slogan-mobile"> </span>
         ) : (
           <span
-            className={`${props.matchLogin
+            className={`${
+              props.matchLogin
                 ? "header__left-sloganLogin"
                 : "header__left-slogan"
             }`}
@@ -338,15 +398,16 @@ function Header(props) {
       </div>
       {!props.matchLogin ? (
         <div className="header__right">
-          <GuideCode />
+         
-          <HeaderNav />
           <HeaderDataV />
           <HeaderSearch />
+          <GuideCode />
+          <HeaderNav />
           {/* style={{"color":"#f3eded"}} */}
-          <HeaderUser />
+          {/* <HeaderUser /> */}
-          <b>
+          {/* <b>
             {props.login.user.NAME}({props.login.user.CODE})
-          </b>
+          </b> */}
         </div>
       ) : null}
     </div>

src/layout/header.less

@@ -13,6 +13,18 @@
   .ant-modal {
     padding-bottom: 0;
   }
+  .headerInput {
+    .ant-input {
+      border: 1px solid #fff;
+      height: 38px;
+    }
+    .ant-input-affix-wrapper .ant-input:not(:first-child) {
+      padding-left: 40px;
+    } 
+    .ant-input::placeholder {
+      color: #909399;
+    }
+  }
 
   .@{header-prefix} {
     // width: 100%;
@@ -72,7 +84,7 @@
 
       &-icon {
         font-size: 22px !important;
-        color: #606266 !important; //f3eded
+        color: #909399 !important; //f3eded
         cursor: pointer;
       }
 

src/routes/dashboard.css

@@ -4,6 +4,7 @@
   height: 100%;
   display: flex;
   flex-direction: column;
+  min-Width: "320px",
 }
 :global(.home-userInfo-tabs) {
   background-color: #eefff8;
@@ -99,6 +100,7 @@
   background-color: #fafafa;
   padding: 8px;
   border-radius: 10px;
+  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.12) ;
 }
 :global(.home-tech-icon) {
   font-size: 30px;
@@ -267,6 +269,13 @@
   font-size: 13px;
 }
 :global(.home-work-type-black) {
+  background-color: #eef5ff;
+  color: #55a0f7;
+  padding: 3px 8px;
+  margin-right: 10px;
+  font-size: 13px;
+}
+:global(.home-work-type-green) {
   background-color: #eef6eb;
   color: #6dd230;
   padding: 3px 8px;
@@ -303,4 +312,21 @@
   flex-direction: column;
   background-color: #fff;
   border-radius: 5px;
+  min-width: 674px;
+}
+:global(.home-setting) {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+:global(.home-setting-icon) {
+  color: #909399;
+  padding: 4px;
+}
+:global(.home-setting-icon):hover {
+  color: #909399;
+  background-color: #f3f4f6;
+  padding: 4px;
+  border-radius: 5px;
+  box-shadow: 0 0px 3px 0 rgba(0, 0, 0, 0.1);
 }