Merge branch 'main' of http://39.174.50.29:15300/jiangxucong/dq-sms into HEAD

src/assets/img/下拉箭头.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.95512 11.5156L13.7801 5.58875C13.9159 5.42196 13.9992 5.2229 14.0206 5.01406C14.0421 4.80522 14.0008 4.59491 13.9015 4.4069C13.8021 4.21889 13.6487 4.06067 13.4585 3.95012C13.2683 3.83956 13.0489 3.78107 12.8251 3.78125H3.17662C2.9529 3.78124 2.73364 3.83986 2.54359 3.95049C2.35353 4.06111 2.20024 4.21935 2.10103 4.40732C2.00181 4.5953 1.96063 4.80553 1.98211 5.01429C2.00359 5.22305 2.0869 5.42202 2.22262 5.58875L7.04762 11.5156C7.15961 11.6531 7.30393 11.7646 7.46935 11.8413C7.63476 11.918 7.81682 11.9579 8.00137 11.9579C8.18591 11.9579 8.36797 11.918 8.53338 11.8413C8.6988 11.7646 8.84312 11.6531 8.95512 11.5156Z" fill="white" fill-opacity="0.66"/>
+</svg>

src/components/GlobalComponent/breadcrumb.less

@@ -115,6 +115,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   width: 100%;
+  gap: 20px;
 }
 
 // 面包屑项文本样式
@@ -135,7 +136,7 @@
 .breadcrumb-close-icon {
   font-size: 14px;
   // color: #7D9CD8;
-  margin-left: 8px;
+  // margin-left: 8px;
   display: flex;
   align-items: center;
   justify-content: center;

src/pages/nav_system_content/SystemContentList.js

@@ -6,7 +6,7 @@ import { formatRoute, getDefaultRoute } from '@/utils/routeUtils'
 import styles from './TopNavBar.less'
 import { Row, Col, Avatar, Dropdown, Button } from 'antd'
 import { userInfo } from '@/utils/globalCommon'
-import { HomeOutlined, LogoutOutlined, AppstoreOutlined, UserOutlined, SettingOutlined, DatabaseOutlined, FileTextOutlined, LockOutlined, AreaChartOutlined } from '@ant-design/icons'
+import { HomeOutlined, LogoutOutlined, AppstoreOutlined, UserOutlined, SettingOutlined, DatabaseOutlined, FileTextOutlined, LockOutlined, AreaChartOutlined, CaretDownOutlined, BellOutlined, SearchOutlined, QuestionCircleOutlined } from '@ant-design/icons'
 import { getPageQuery } from '@/utils/utils'
 import menuTitle from '@/assets/img/智能管控平台.svg'
 import menuTitle1 from '@/assets/img/智能管控平台-1.svg'
@@ -21,6 +21,7 @@ import people from '@/assets/img/people.svg'
 import risk from '@/assets/img/risk.svg'
 import { CustomBreadcrumb } from '@/components/GlobalComponent'
 
+
 // 自定义菜单项渲染组件，支持根据激活状态显示不同图片
 const CustomMenuItem = ({ item, selectedKeys }) => {
     const isActive = selectedKeys.includes(item.key);
@@ -63,6 +64,7 @@ const SystemContentList = (props) => {
     const [selectedKey, setSelectedKey] = useState([])
     const [menuItems, setMenuItems] = useState([])
     const [systemType, setSystemType] = useState('安全管理系统')
+    const [isMenuCollapsed, setIsMenuCollapsed] = useState(false); // 添加菜单收缩状态
     let defaultKey = ''
 
     useEffect(() => {
@@ -86,10 +88,10 @@ const SystemContentList = (props) => {
 
         const fixedMenuItems = [
             {
-                "path": "/topnavbar00/hrefficiency/timesheet",
+                "path": "/topnavbar00/hrefficiency/basicinformation",
-                icon: <img src={fireHydrant1} alt="工时仪表盘" style={{ width: '16px', height: '16px' }} />,
+                icon: <img src={fireHydrant1} alt="安全管理基础信息" style={{ width: '16px', height: '16px' }} />,
-                "key": "/topnavbar00/hrefficiency/timesheet",
+                "key": "/topnavbar00/hrefficiency/basicinformation",
-                "label": "    工时仪表盘"
+                "label": "安全管理基础信息"
             },
             {
                 "path": "/topnavbar00/hrefficiency/staffsheet",
@@ -169,6 +171,11 @@ const SystemContentList = (props) => {
         history.replace(curKey)
     }
 
+    // 切换菜单收缩状态
+    const toggleMenu = () => {
+        setIsMenuCollapsed(!isMenuCollapsed);
+    };
+
     const { initialState: { menu }, setInitialState } = useModel('@@initialState')
 
     const loginOut = async () => {
@@ -212,12 +219,27 @@ const SystemContentList = (props) => {
 
     return (
         <div className='pageContainer systemContent'>
-            <div className='leftMenu'>
+            <div
-                <div className='menuTitle' style={{ marginBottom: '10px' }}>
+                className='leftMenu'
+                style={{
+                    width: isMenuCollapsed ? '80px' : '230px',
+                    transition: 'width 0.3s ease',
+                    position: 'relative', // 添加相对定位，使按钮可以相对于菜单定位
+                    overflow: 'unset'
+                }}
+            >
+                <div className='menuTitle' style={{
+                    marginBottom: '10px',
+                    display: isMenuCollapsed ? 'none' : 'flex'
+                }}>
                     <img src={menuTitle} alt='menuTitle' style={{ marginTop: '20px', marginBottom: '2px', width: '172.44px', height: '51.28px' }} />
                     <img src={menuTitle1} alt='menuTitle1' style={{ width: '172.44px', height: '51.28px' }} />
                 </div>
-                <div style={{ textAlign: 'center', marginBottom: 16 }}>
+                <div style={{
+                    textAlign: 'center',
+                    marginBottom: 16,
+                    display: isMenuCollapsed ? 'none' : 'block'
+                }}>
                     <Select
                         value={systemType}
                         onChange={setSystemType}
@@ -241,6 +263,7 @@ const SystemContentList = (props) => {
                         }}
                         popupClassName="custom-select-dropdown"
                         className="custom-select"
+                        suffixIcon={<CaretDownOutlined style={{ color: '#fff', fontSize: '16px' }} />}
                     />
                 </div>
                 <style jsx>{`
@@ -262,6 +285,8 @@ const SystemContentList = (props) => {
                         justify-content: center !important;
                         padding: 0 !important;
                         padding-right: 50px !important;
+                        font-size: 16px !important;
+                        font-weight: 500 !important;
                     }
                     .custom-select .ant-select-arrow {
                         opacity: 0.66 !important;
@@ -280,7 +305,43 @@ const SystemContentList = (props) => {
                         font-size: 16px !important;
                         font-weight: 600 !important;
                     }
+                    .menuToggleBtn {
+                        position: absolute;
+                        right: -15px;
+                        top: 50%;
+                        width: 30px;
+                        height: 30px;
+                        background: #FDFDFF;
+                        color: #5C5C5C;
+                        border: 1px solid #FFFFFF;
+                        border-radius: 50%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        cursor: pointer;
+                        z-index: 9999; /* 增加z-index确保按钮在最上层 */
+                        font-size: 16px;
+                        font-weight: bold;
+                        outline: none;
+                        transition: all 0.3s ease;
+                        box-shadow: 0 0 5px 3px rgba(169, 185, 255, 0.33);
+                    }
+                    .menuToggleBtn:hover {
+                        border: 1px solid #3D81FF;
+                        background: #3D81FF;
+                        color: white;
+                        transform: scale(1.1);
+                    }
                 `}</style>
+                {/* 菜单收缩按钮 */}
+                <button
+                    className="menuToggleBtn"
+                    onClick={toggleMenu}
+                    aria-label={isMenuCollapsed ? "展开菜单" : "收缩菜单"}
+                >
+                    {isMenuCollapsed ? ">" : "<"}
+                </button>
+
                 <Menu
                     openKeys={openKey}
                     selectedKeys={selectedKey}
@@ -322,15 +383,27 @@ const SystemContentList = (props) => {
                             return { ...child };
                         });
 
-                        return { ...item, icon, children };
+                        return {
+                            ...item,
+                            icon,
+                            children,
+                            // 根据菜单收缩状态决定是否显示标签文本
+                            label: isMenuCollapsed ? null : item.label
+                        };
                     })}
                     onClick={value => setRouteActive(value)}
                     onOpenChange={value => setOpenKey(value)}
-                    mode='inline'
+                    mode={isMenuCollapsed ? 'vertical' : 'inline'}
                 />
             </div>
 
-            <div className='rightContent'>
+            <div
+                className='rightContent'
+                style={{
+                    width: isMenuCollapsed ? 'calc(100% - 80px)' : 'calc(100% - 230px)',
+                    transition: 'width 0.3s ease'
+                }}
+            >
                 {/* <div style={{ width: '100%', backgroundColor: '#fff', marginBottom: '10px' }}> */}
                 <div className='tabBarHeader'>
                     <Row className='tabBarRow'>
@@ -344,6 +417,9 @@ const SystemContentList = (props) => {
                             <CustomBreadcrumb />
                         </Col>
                         <Col xs={4} sm={4} md={4} lg={4} xl={4} className='tabBarRight'>
+                            <Button type='text' className='tabBarRightBtn'><BellOutlined /></Button>
+                            <Button type='text' className='tabBarRightBtn'><SearchOutlined /></Button>
+                            <Button type='text' className='tabBarRightBtn'><QuestionCircleOutlined /></Button>
                             <Avatar className='tabBarRightAvaTor' src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201707%2F31%2F20170731021444_2YUfe.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669779871&t=ec025ed48a1668dee9cfa0e803b6f787' />
 
                             <span className='tabBarRightName'>{userInfo?.user_name_cn ? userInfo.user_name_cn : (userInfo?.user_name || '')}</span>

src/pages/nav_system_content/SystemContentList.less

@@ -79,7 +79,8 @@
 		overflow-x: hidden;
 		background-color: #2E4CD4;
 
-		.ant-menu-inline {
+		.ant-menu-inline,
+		.ant-menu-vertical {
 			background: #2E4CD4 !important;
 		}