jiangxucong
/
dq-sms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

menu样式完善，添加menu图标激活态和非激活态设置

Browse Source
main
yupeng 1 month ago
parent 7bbfd82146
commit c38fa31c9b
11 changed files with 225 additions and 4 deletions
Show Stats Download Patch File Download Diff File

3
src/assets/img/book.svg
Unescape Escape View File

@ -0,0 +1,3 @@
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3685 0.194824C14.8309 0.194824 15.2066 0.562877 15.2066 1.01668V13.1826H3.05233V13.5729C3.05233 14.0993 3.46457 14.5295 3.99225 14.5832L4.09954 14.5876H14.9965V15.8052H4.09954C2.87336 15.8052 1.87187 14.8787 1.79932 13.709L1.79492 13.5729V1.01646C1.79492 0.563097 2.17045 0.194824 2.63326 0.194824H14.3683H14.3685ZM4.89281 7.48377C4.89281 9.44628 6.48771 11.0506 8.4357 11.0506C10.3837 11.0506 11.9786 9.44518 11.9786 7.48267H4.89303V7.48377H4.89281ZM8.43592 2.13161C8.08062 2.13161 7.7273 2.16723 7.3731 2.27452V4.62817H6.66448V2.55859C6.02006 2.88612 5.47975 3.38688 5.10425 4.00458C4.72875 4.62228 4.53294 5.33245 4.53883 6.05531H3.82911V6.76899H13.0394V6.05531H12.3321C12.3321 4.52109 11.4815 3.20103 10.2052 2.55859V4.62817H9.49765V2.27562C9.15251 2.17492 8.79433 2.12601 8.43482 2.13051L8.43592 2.13161Z" fill="white" fill-opacity="0.45"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 962 B

10
src/assets/img/danger.svg
Unescape Escape View File

@ -0,0 +1,10 @@
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1027_11080)">
<path d="M16.3578 13.5109L12.8609 7.45469L9.36407 1.39844C9.17189 1.06563 8.83438 0.898438 8.49845 0.898438C8.16095 0.898438 7.82501 1.06563 7.63282 1.39844L4.13595 7.45469L0.639073 13.5109C0.254698 14.1781 0.735948 15.0109 1.5047 15.0109H15.4922C16.2625 15.0109 16.7422 14.1781 16.3578 13.5109ZM7.63282 12.3016V11.4344C7.63282 11.1953 7.82657 11.0016 8.06564 11.0016H8.93282C9.17189 11.0016 9.36564 11.1953 9.36564 11.4344V12.3016C9.36564 12.5406 9.17189 12.7344 8.93282 12.7344H8.06564C7.82814 12.7344 7.63282 12.5406 7.63282 12.3016ZM9.35626 6.22656L9.1547 10.4469C9.15157 10.5047 9.1047 10.55 9.04689 10.55H7.95314C7.89532 10.55 7.84689 10.5047 7.84532 10.4469L7.64376 6.22656C7.63751 6.10313 7.73595 6 7.86095 6H9.13907C9.26251 6 9.36251 6.10313 9.35626 6.22656Z" fill="white" fill-opacity="0.45"/>
</g>
<defs>
<clipPath id="clip0_1027_11080">
<rect width="16" height="16" fill="white" transform="translate(0.5)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

10
src/assets/img/danger1.svg
Unescape Escape View File

@ -0,0 +1,10 @@
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1050_3700)">
<path d="M16.3578 13.5109L12.8609 7.45469L9.36407 1.39844C9.17189 1.06563 8.83438 0.898438 8.49845 0.898438C8.16095 0.898438 7.82501 1.06563 7.63282 1.39844L4.13595 7.45469L0.639073 13.5109C0.254698 14.1781 0.735948 15.0109 1.5047 15.0109H15.4922C16.2625 15.0109 16.7422 14.1781 16.3578 13.5109ZM7.63282 12.3016V11.4344C7.63282 11.1953 7.82657 11.0016 8.06564 11.0016H8.93282C9.17189 11.0016 9.36564 11.1953 9.36564 11.4344V12.3016C9.36564 12.5406 9.17189 12.7344 8.93282 12.7344H8.06564C7.82814 12.7344 7.63282 12.5406 7.63282 12.3016ZM9.35626 6.22656L9.1547 10.4469C9.15157 10.5047 9.1047 10.55 9.04689 10.55H7.95314C7.89532 10.55 7.84689 10.5047 7.84532 10.4469L7.64376 6.22656C7.63751 6.10313 7.73595 6 7.86095 6H9.13907C9.26251 6 9.36251 6.10313 9.35626 6.22656Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1050_3700">
<rect width="16" height="16" fill="white" transform="translate(0.5)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

7
src/assets/img/fireHydrant.svg
Unescape Escape View File

@ -0,0 +1,7 @@
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.5 3.5H12.5V15H4.5V3.5ZM8.5 11.5C9.16304 11.5 9.79893 11.2366 10.2678 10.7678C10.7366 10.2989 11 9.66304 11 9C11 8.33696 10.7366 7.70107 10.2678 7.23223C9.79893 6.76339 9.16304 6.5 8.5 6.5C7.83696 6.5 7.20107 6.76339 6.73223 7.23223C6.26339 7.70107 6 8.33696 6 9C6 9.66304 6.26339 10.2989 6.73223 10.7678C7.20107 11.2366 7.83696 11.5 8.5 11.5ZM8.5 10.5C8.10218 10.5 7.72064 10.342 7.43934 10.0607C7.15804 9.77936 7 9.39782 7 9C7 8.60218 7.15804 8.22064 7.43934 7.93934C7.72064 7.65804 8.10218 7.5 8.5 7.5C8.89782 7.5 9.27936 7.65804 9.56066 7.93934C9.84196 8.22064 10 8.60218 10 9C10 9.39782 9.84196 9.77936 9.56066 10.0607C9.27936 10.342 8.89782 10.5 8.5 10.5Z" fill="white"/>
<path d="M3.5 15.5V14H13.5V15.5H3.5Z" fill="white"/>
<path d="M8 0.5H9C9.13261 0.5 9.25979 0.552678 9.35355 0.646447C9.44732 0.740215 9.5 0.867392 9.5 1V2H7.5V1C7.5 0.867392 7.55268 0.740215 7.64645 0.646447C7.74021 0.552678 7.86739 0.5 8 0.5Z" fill="white"/>
<path d="M4.51172 4C4.66922 2.322 6.39522 1 8.50022 1C10.6052 1 12.3312 2.322 12.4887 4H4.51172Z" fill="white"/>
<path d="M4 4.25C3.86739 4.25 3.74021 4.19732 3.64645 4.10355C3.55268 4.00979 3.5 3.88261 3.5 3.75C3.5 3.61739 3.55268 3.49021 3.64645 3.39645C3.74021 3.30268 3.86739 3.25 4 3.25H12.9565C13.0891 3.25 13.2163 3.30268 13.3101 3.39645C13.4038 3.49021 13.4565 3.61739 13.4565 3.75C13.4565 3.88261 13.4038 4.00979 13.3101 4.10355C13.2163 4.19732 13.0891 4.25 12.9565 4.25H4ZM4.5 10.449H4C3.86739 10.449 3.74021 10.3963 3.64645 10.3026C3.55268 10.2088 3.5 10.0816 3.5 9.949V7.5C3.5 7.36739 3.55268 7.24021 3.64645 7.14645C3.74021 7.05268 3.86739 7 4 7H4.5C4.63261 7 4.75979 7.05268 4.85355 7.14645C4.94732 7.24021 5 7.36739 5 7.5V9.949C5 10.0816 4.94732 10.2088 4.85355 10.3026C4.75979 10.3963 4.63261 10.449 4.5 10.449ZM13 10.449H12.5C12.3674 10.449 12.2402 10.3963 12.1464 10.3026C12.0527 10.2088 12 10.0816 12 9.949V7.5C12 7.36739 12.0527 7.24021 12.1464 7.14645C12.2402 7.05268 12.3674 7 12.5 7H13C13.1326 7 13.2598 7.05268 13.3536 7.14645C13.4473 7.24021 13.5 7.36739 13.5 7.5V9.949C13.5 10.0816 13.4473 10.2088 13.3536 10.3026C13.2598 10.3963 13.1326 10.449 13 10.449Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

7
src/assets/img/fireHydrant1.svg
Unescape Escape View File

@ -0,0 +1,7 @@
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.5 3.5H12.5V15H4.5V3.5ZM8.5 11.5C9.16304 11.5 9.79893 11.2366 10.2678 10.7678C10.7366 10.2989 11 9.66304 11 9C11 8.33696 10.7366 7.70107 10.2678 7.23223C9.79893 6.76339 9.16304 6.5 8.5 6.5C7.83696 6.5 7.20107 6.76339 6.73223 7.23223C6.26339 7.70107 6 8.33696 6 9C6 9.66304 6.26339 10.2989 6.73223 10.7678C7.20107 11.2366 7.83696 11.5 8.5 11.5ZM8.5 10.5C8.10218 10.5 7.72064 10.342 7.43934 10.0607C7.15804 9.77936 7 9.39782 7 9C7 8.60218 7.15804 8.22064 7.43934 7.93934C7.72064 7.65804 8.10218 7.5 8.5 7.5C8.89782 7.5 9.27936 7.65804 9.56066 7.93934C9.84196 8.22064 10 8.60218 10 9C10 9.39782 9.84196 9.77936 9.56066 10.0607C9.27936 10.342 8.89782 10.5 8.5 10.5Z" fill="#8C9DE7"/>
<path d="M3.5 15.5V14H13.5V15.5H3.5Z" fill="#8C9DE7"/>
<path d="M8 0.5H9C9.13261 0.5 9.25979 0.552678 9.35355 0.646447C9.44732 0.740215 9.5 0.867392 9.5 1V2H7.5V1C7.5 0.867392 7.55268 0.740215 7.64645 0.646447C7.74021 0.552678 7.86739 0.5 8 0.5Z" fill="#8C9DE7"/>
<path d="M4.51172 4C4.66922 2.322 6.39522 1 8.50022 1C10.6052 1 12.3312 2.322 12.4887 4H4.51172Z" fill="#8C9DE7"/>
<path d="M4 4.25C3.86739 4.25 3.74021 4.19732 3.64645 4.10355C3.55268 4.00979 3.5 3.88261 3.5 3.75C3.5 3.61739 3.55268 3.49021 3.64645 3.39645C3.74021 3.30268 3.86739 3.25 4 3.25H12.9565C13.0891 3.25 13.2163 3.30268 13.3101 3.39645C13.4038 3.49021 13.4565 3.61739 13.4565 3.75C13.4565 3.88261 13.4038 4.00979 13.3101 4.10355C13.2163 4.19732 13.0891 4.25 12.9565 4.25H4ZM4.5 10.449H4C3.86739 10.449 3.74021 10.3963 3.64645 10.3026C3.55268 10.2088 3.5 10.0816 3.5 9.949V7.5C3.5 7.36739 3.55268 7.24021 3.64645 7.14645C3.74021 7.05268 3.86739 7 4 7H4.5C4.63261 7 4.75979 7.05268 4.85355 7.14645C4.94732 7.24021 5 7.36739 5 7.5V9.949C5 10.0816 4.94732 10.2088 4.85355 10.3026C4.75979 10.3963 4.63261 10.449 4.5 10.449ZM13 10.449H12.5C12.3674 10.449 12.2402 10.3963 12.1464 10.3026C12.0527 10.2088 12 10.0816 12 9.949V7.5C12 7.36739 12.0527 7.24021 12.1464 7.14645C12.2402 7.05268 12.3674 7 12.5 7H13C13.1326 7 13.2598 7.05268 13.3536 7.14645C13.4473 7.24021 13.5 7.36739 13.5 7.5V9.949C13.5 10.0816 13.4473 10.2088 13.3536 10.3026C13.2598 10.3963 13.1326 10.449 13 10.449Z" fill="#8C9DE7"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

4
src/assets/img/license.svg
Unescape Escape View File

@ -0,0 +1,4 @@
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.097 8.03631C9.28795 8.84538 9.41235 10.1834 10.128 11.0856C10.2836 11.3036 10.2214 11.428 10.128 11.5525C10.097 11.5836 9.97246 11.7391 9.94127 11.7703C9.81688 11.9571 9.78586 12.237 9.81688 12.3926C9.87908 12.6414 10.128 12.6728 10.3148 12.6728C10.7193 12.7038 11.1549 12.6728 11.5594 12.6728H12.7728C13.0218 12.6728 13.2086 12.6104 13.3019 12.3926C13.3953 12.1437 13.3641 11.9257 13.1774 11.7391L12.9906 11.5524C12.8352 11.3968 12.8352 11.2412 12.9906 11.0856L13.3641 10.6189C13.9242 9.71664 13.7376 8.5654 12.8972 7.8809C12.0573 7.22724 10.8437 7.28961 10.097 8.03631ZM14.9821 13.7308C14.9821 13.2951 14.7953 13.0771 14.3598 13.0771H8.75903C8.32331 13.0771 8.13672 13.2639 8.13672 13.6996V14.3219H14.9821V13.7308Z" fill="white" fill-opacity="0.45"/>
<path d="M9.10177 12.3926C9.07076 12.0503 9.16414 11.677 9.38191 11.3968C9.38191 11.3658 9.41293 11.3658 9.44411 11.3346C9.07059 10.8057 8.85298 10.1834 8.85298 9.56108C8.8218 8.7832 9.10177 8.06752 9.59968 7.53842C10.1286 7.00949 10.8131 6.72952 11.56 6.72952C11.9023 6.72952 12.2445 6.79172 12.5868 6.91628V1.65936C12.5868 1.28584 12.2757 0.974854 11.9023 0.974854H2.56755C2.22522 1.00587 1.91406 1.31702 1.91406 1.65936V13.6995C1.91406 14.073 2.22522 14.384 2.59857 14.384H7.48381V13.7308C7.48381 13.3263 7.6082 13.0151 7.82614 12.7972C8.04392 12.5484 8.38609 12.455 8.79062 12.455C8.884 12.3928 9.00856 12.3928 9.10177 12.3928V12.3926ZM3.87453 4.17977C3.87453 3.96183 4.06129 3.77523 4.27906 3.77523H9.41326C9.63103 3.77523 9.81763 3.96199 9.81763 4.17977C9.81763 4.39754 9.63087 4.58413 9.41309 4.58413H4.27889C4.06112 4.55312 3.87436 4.39737 3.87436 4.17977H3.87453ZM7.82631 7.32232C7.82631 7.54026 7.63955 7.72685 7.42178 7.72685H4.27889C4.06112 7.72685 3.87436 7.54009 3.87436 7.32232C3.87436 7.10454 4.06112 6.91795 4.27889 6.91795H7.42161C7.67057 6.94896 7.82614 7.10471 7.82614 7.32232H7.82631ZM7.82631 5.73553C7.82631 5.95331 7.63955 6.14007 7.42178 6.14007H4.27889C4.06112 6.14007 3.87436 5.95331 3.87436 5.73553C3.87436 5.51776 4.06112 5.331 4.27889 5.331H7.42161C7.67057 5.36218 7.82614 5.51776 7.82614 5.73553H7.82631ZM14.3295 15.224H9.03958C8.884 15.224 8.72842 15.0996 8.72842 14.9129C8.72842 14.7573 8.85298 14.6017 9.03958 14.6017H14.3293C14.4849 14.6017 14.6405 14.7573 14.6405 14.9129C14.6405 15.0996 14.5159 15.224 14.3293 15.224H14.3295Z" fill="white" fill-opacity="0.45"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

4
src/assets/img/people.svg
Unescape Escape View File

@ -0,0 +1,4 @@
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.5613 10.5654C10.8491 10.2501 9.77747 9.43494 8.21177 9.15469C8.61221 8.72587 8.90796 8.05633 9.21875 7.2628C9.39944 6.80308 9.36335 6.41118 9.36335 5.85227C9.36335 5.44032 9.4407 4.7791 9.33757 4.41556C8.99306 3.18709 8.11897 2.84875 7.09769 2.84875C6.07507 2.84875 5.20165 3.18906 4.85695 4.41834C4.75658 4.78288 4.83369 5.44171 4.83369 5.85227C4.83369 6.41217 4.80342 6.80584 4.9845 7.26579C5.29767 8.06347 5.59693 8.73226 5.9948 9.15967C4.44279 9.44328 3.43876 10.2535 2.7311 10.5678C1.26675 11.2219 1.30281 11.9379 1.30281 11.9379V13.1513L13.0705 13.1491V11.9379C13.0705 11.9379 13.0317 11.2191 11.5613 10.5654ZM11.0331 3.1224H15.6875V4.14106H11.0331V3.1224ZM11.0331 5.3529H13.8784V6.38911H11.0331V5.3529Z" fill="white" fill-opacity="0.45"/>
<path d="M11.0332 7.58337H15.108V8.61959H11.0332V7.58337Z" fill="white" fill-opacity="0.45"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 956 B

3
src/assets/img/risk.svg
Unescape Escape View File

@ -0,0 +1,3 @@
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.96875 5.70811C1.96875 4.70643 1.98094 3.70382 1.96312 2.70214C1.95562 2.26508 2.13194 2.03529 2.554 1.93119C4.45231 1.46411 6.34686 0.979219 8.24517 0.51402C8.41775 0.471815 8.62127 0.494325 8.79853 0.537468C10.6274 0.983908 12.4545 1.43879 14.2815 1.89367C14.9193 2.05311 15.0009 2.16097 15.0009 2.82313C15.0018 4.6239 15.0046 6.42373 14.9999 8.22449C14.9943 10.2382 14.1943 11.8617 12.6383 13.1438C11.479 14.0995 10.2879 14.9933 8.85668 15.4979C8.63534 15.5758 8.33615 15.5842 8.12137 15.5007C6.1893 14.7551 4.55641 13.5677 3.22084 11.9967C2.40675 11.0391 2.03252 9.87426 1.98282 8.62591C1.94436 7.65425 1.97531 6.68071 1.97531 5.70811H1.96875ZM8.49747 2.73215C8.46183 2.72559 8.42712 2.71808 8.39148 2.71152C7.48266 4.37817 6.56446 6.04013 5.67064 7.71428C5.40615 8.21043 5.67158 8.60153 6.24557 8.61466C6.70983 8.62498 7.17409 8.61747 7.63835 8.61747H8.49747V12.3025C9.45412 10.6949 10.3367 9.07986 11.2155 7.46386C11.5907 6.77262 11.3562 6.38621 10.5646 6.38433C9.88837 6.38246 9.21215 6.38433 8.49747 6.38433V2.73215Z" fill="white" fill-opacity="0.45"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
src/assets/img/trouble.svg
Unescape Escape View File

@ -0,0 +1,3 @@
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.7134 0.750488C14.988 0.750488 15.2515 0.859601 15.4457 1.05382C15.6399 1.24804 15.749 1.51146 15.749 1.78613V14.2139C15.749 14.4885 15.6399 14.752 15.4457 14.9462C15.2515 15.1404 14.988 15.2495 14.7134 15.2495H2.28564C2.01097 15.2495 1.74755 15.1404 1.55333 14.9462C1.35911 14.752 1.25 14.4885 1.25 14.2139V1.78613C1.25 1.51146 1.35911 1.24804 1.55333 1.05382C1.74755 0.859601 2.01097 0.750488 2.28564 0.750488L14.7134 0.750488ZM8.49951 11.1069C8.22484 11.1069 7.96142 11.216 7.7672 11.4103C7.57298 11.6045 7.46387 11.8679 7.46387 12.1426C7.46387 12.4172 7.57298 12.6807 7.7672 12.8749C7.96142 13.0691 8.22484 13.1782 8.49951 13.1782C8.77418 13.1782 9.0376 13.0691 9.23182 12.8749C9.42604 12.6807 9.53516 12.4172 9.53516 12.1426C9.53516 11.8679 9.42604 11.6045 9.23182 11.4103C9.0376 11.216 8.77418 11.1069 8.49951 11.1069ZM8.49951 2.82178C8.24475 2.82191 7.99307 2.87752 7.76198 2.98475C7.53088 3.09198 7.32591 3.24826 7.16132 3.44272C6.99673 3.63717 6.87646 3.86514 6.80888 4.11078C6.7413 4.35641 6.72803 4.61382 6.76999 4.8651L7.29506 8.01553C7.34316 8.30004 7.49047 8.55832 7.71085 8.74456C7.93123 8.93081 8.21045 9.033 8.49899 9.033C8.78754 9.033 9.06676 8.93081 9.28714 8.74456C9.50752 8.55832 9.65483 8.30004 9.70293 8.01553L10.2301 4.8651C10.272 4.61373 10.2588 4.35624 10.1911 4.11053C10.1235 3.86482 10.0031 3.6368 9.83841 3.44232C9.6737 3.24785 9.4686 3.09159 9.23738 2.98443C9.00616 2.87726 8.75436 2.82176 8.49951 2.82178Z" fill="white" fill-opacity="0.45"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

161
src/pages/nav_system_content/SystemContentList.js
Unescape Escape View File

@ -10,8 +10,50 @@ import { HomeOutlined, LogoutOutlined, AppstoreOutlined, UserOutlined, SettingOu
import { getPageQuery } from '@/utils/utils'
import menuTitle from '@/assets/img/智能管控平台.svg'
import menuTitle1 from '@/assets/img/智能管控平台-1.svg'
import fireHydrant from '@/assets/img/fireHydrant.svg'
import fireHydrant1 from '@/assets/img/fireHydrant1.svg'
import trouble from '@/assets/img/trouble.svg'
import book from '@/assets/img/book.svg'
import danger from '@/assets/img/danger.svg'
import danger1 from '@/assets/img/danger1.svg'
import license from '@/assets/img/license.svg'
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);
// 为每个菜单项定义激活状态的图片
// 如果没有专门的激活状态图片，则使用默认图片
const getActiveIcon = (baseIcon) => {
// 这里可以根据需要为每个图标定义对应的激活状态图片
// 目前暂时使用相同的图片，用户可以根据实际情况替换
return baseIcon;
};
const renderIcon = () => {
if (item.icon && typeof item.icon === 'object' && item.icon.props && item.icon.props.src) {
const iconSrc = isActive ? getActiveIcon(item.icon.props.src) : item.icon.props.src;
return <img
src={iconSrc}
alt={item.icon.props.alt || 'menu icon'}
style={item.icon.props.style || { width: '16px', height: '16px' }}
/>
}
return item.icon;
};
const renderMenuItem = (menuItem) => ({
...menuItem,
icon: renderIcon(),
children: menuItem.children?.map(child => renderMenuItem(child))
});
return renderMenuItem(item);
};
const SystemContentList = (props) => {
const dynamicRoute = window.dynamicRoute
console.log(dynamicRoute)
@ -41,6 +83,73 @@ const SystemContentList = (props) => {
}
setMenuItems(newList)
const fixedMenuItems = [
{
"path": "/topnavbar00/hrefficiency/timesheet",
icon: <img src={fireHydrant1} alt="工时仪表盘" style={{ width: '16px', height: '16px' }} />,
"key": "/topnavbar00/hrefficiency/timesheet",
"label": " 工时仪表盘"
},
{
"path": "/topnavbar00/hrefficiency/staffsheet",
icon: <img src={danger} alt="工时仪表盘" style={{ width: '16px', height: '16px' }} />,
"key": "/topnavbar00/hrefficiency/staffsheet",
"label": "员工仪表盘"
},
{
"path": "/topnavbar00/hrefficiency/staffuph",
icon: <img src={book} alt="工时仪表盘" style={{ width: '16px', height: '16px' }} />,
"key": "/topnavbar00/hrefficiency/staffuph",
"label": "员工效率监控"
},
{
"path": "/topnavbar00/hrefficiency/deptuph",
icon: <img src={license} alt="工时仪表盘" style={{ width: '16px', height: '16px' }} />,
"key": "/topnavbar00/hrefficiency/deptuph",
"label": "部门效率监控"
},
{
"path": "/topnavbar00/hrefficiency/allstaffuph",
icon: <img src={people} alt="工时仪表盘" style={{ width: '16px', height: '16px' }} />,
"key": "/topnavbar00/hrefficiency/allstaffuph",
"label": "全员效率监控"
},
{
"path": "/topnavbar00/hrefficiency/hiddentrouble",
icon: <img src={risk} alt="工时仪表盘" style={{ width: '16px', height: '16px' }} />,
"key": "/topnavbar00/hrefficiency/hiddentrouble",
"label": "隐患排查"
},
{
"path": "/topnavbar00/hrefficiency/system",
icon: <img src={people} alt="工时仪表盘" style={{ width: '16px', height: '16px' }} />,
"key": "/topnavbar00/hrefficiency/system",
"label": "系统管理",
"children": [
{
"path": "/topnavbar00/hrefficiency/system/systemOrganization",
"key": "/topnavbar00/hrefficiency/system/systemOrganization",
"label": "组织管理"
},
{
"path": "/topnavbar00/hrefficiency/system/systemRole",
"key": "/topnavbar00/hrefficiency/system/systemRole",
"label": "角色配置"
},
{
"path": "/topnavbar00/hrefficiency/system/systemMenu",
"key": "/topnavbar00/hrefficiency/system/systemMenu",
"label": "菜单配置"
}
]
}
]
setMenuItems(fixedMenuItems)
// 初始化默认路由
const defaultRoute = fixedMenuItems[0]?.key || ''
const mathRoute = matchRoutes(fixedMenuItems, pathName)
setRouteActive({ key: mathRoute?.length ? pathName : defaultRoute }, fixedMenuItems)
}, [pathName])
const setRouteActive = (value, menu) => {
@ -113,9 +222,11 @@ const SystemContentList = (props) => {
value={systemType}
onChange={setSystemType}
style={{
width: 200,
width: 192,
height: 42,
borderColor: '#3D81FF',
backgroundColor: '#003AA7',
borderRadius: 0,
color: '#fff',
fontSize: 22,
fontWeight: 600
@ -134,6 +245,8 @@ const SystemContentList = (props) => {
</div>
<style jsx>{`
.custom-select .ant-select-selector {
height: 42px !important;
border-radius: 0 !important;
border-color: #3D81FF !important;
background-color: #003AA7 !important;
color: #fff !important;
@ -144,6 +257,11 @@ const SystemContentList = (props) => {
color: #fff !important;
fontSize: 22px !important;
fontWeight: 600 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
padding-right: 50px !important;
}
.custom-select .ant-select-arrow {
opacity: 0.66 !important;
@ -166,7 +284,46 @@ const SystemContentList = (props) => {
<Menu
openKeys={openKey}
selectedKeys={selectedKey}
items={menuItems}
// 使用自定义的itemRender方法处理激活状态的图标切换
items={menuItems.map(item => {
const isActive = selectedKey.includes(item.key);
// 处理当前项的图标
let icon = item.icon;
if (icon && typeof icon === 'object' && icon.props && icon.props.src) {
let iconSrc = icon.props.src;
// 根据激活状态切换不同的图片
if (isActive) {
// 工时仪表盘：激活态使用fireHydrant1
if (item.key === '/topnavbar00/hrefficiency/timesheet' && typeof fireHydrant !== 'undefined') {
iconSrc = fireHydrant;
}
// 隐患排查：激活态使用danger1
else if (item.key === '/topnavbar00/hrefficiency/hiddentrouble' && typeof danger1 !== 'undefined') {
iconSrc = danger1;
}
// 激活态使用danger1
else if (item.key === '/topnavbar00/hrefficiency/staffsheet' && typeof danger1 !== 'undefined') {
iconSrc = danger1;
}
}
icon = <img
src={iconSrc}
alt={icon.props.alt}
style={icon.props.style}
/>;
}
// 递归处理子项
const children = item.children?.map(child => {
const childIsActive = selectedKey.includes(child.key);
return { ...child };
});
return { ...item, icon, children };
})}
onClick={value => setRouteActive(value)}
onOpenChange={value => setOpenKey(value)}
mode='inline'

17
src/pages/nav_system_content/SystemContentList.less
Unescape Escape View File

@ -83,10 +83,22 @@
background: #2E4CD4 !important;
}
// 默认情况字体样式
// 默认情况字体样式和右边距
.ant-menu-title-content {
margin-left: 28px !important;
}
.ant-menu-item {
width: 100%;
// margin: 0px;
margin-left: 0px;
border-radius: 0px;
}
.ant-menu-item,
.ant-menu-submenu-title {
color: rgba(255, 255, 255, 0.6) !important;
margin-right: 15px !important;
}
// 选中状态样式
@ -95,10 +107,11 @@
background-color: rgba(255, 255, 255, 0.22) !important;
}
// 选中状态下的文本颜色
// 选中状态下的文本颜色和右边距
.ant-menu-item-selected .ant-menu-item-icon,
.ant-menu-item-selected a {
color: rgba(255, 255, 255, 1) !important;
// margin-right: 15px !important;
}
.menuTitle {

Write Preview
Loading…
Cancel
Save