feat: sider调整
This commit is contained in:
rd
BIN
src/assets/img/agent/icon1.png
Normal file
BIN
src/assets/img/agent/icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
4
src/assets/svg/svg-accountManage.svg
Normal file
4
src/assets/svg/svg-accountManage.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.125 4.59375C11.7301 4.59375 13.0312 5.89492 13.0312 7.5C13.0312 8.30533 12.7035 9.03395 12.1743 9.5603C13.4266 10.175 14.3631 11.3343 14.6726 12.7302C14.752 13.0888 14.525 13.4438 14.1665 13.5234C13.8078 13.6028 13.4528 13.3767 13.3733 13.0181C13.0431 11.5288 11.7129 10.4152 10.125 10.415C8.53709 10.4152 7.2077 11.5289 6.87744 13.0181C6.79792 13.3767 6.44216 13.6028 6.0835 13.5234C5.72497 13.4438 5.4987 13.0888 5.57812 12.7302C5.88761 11.3345 6.82306 10.1751 8.07495 9.5603C7.54601 9.03398 7.21875 8.30515 7.21875 7.5C7.21875 5.89492 8.51992 4.59375 10.125 4.59375ZM10.125 5.90625C9.2448 5.90625 8.53125 6.6198 8.53125 7.5C8.53125 8.33825 9.17854 9.02357 10.0005 9.08716C10.0418 9.08608 10.0835 9.08496 10.125 9.08496C10.1664 9.08496 10.2076 9.08608 10.2488 9.08716C11.0711 9.02392 11.7188 8.3385 11.7188 7.5C11.7188 6.6198 11.0052 5.90625 10.125 5.90625Z" fill="currentColor"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.75 1.5C16.5784 1.5 17.25 2.17157 17.25 3V15C17.25 15.8284 16.5784 16.5 15.75 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V12H1.5C1.08579 12 0.75 11.6642 0.75 11.25C0.75 10.8358 1.08579 10.5 1.5 10.5H2.25V7.5H1.5C1.08579 7.5 0.75 7.16421 0.75 6.75C0.75 6.33579 1.08579 6 1.5 6H2.25V3C2.25 2.17157 2.92157 1.5 3.75 1.5H15.75ZM3.75 6H4.5C4.91421 6 5.25 6.33579 5.25 6.75C5.25 7.16421 4.91421 7.5 4.5 7.5H3.75V10.5H4.5C4.91421 10.5 5.25 10.8358 5.25 11.25C5.25 11.6642 4.91421 12 4.5 12H3.75V15H15.75V3H3.75V6Z" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
3
src/assets/svg/svg-materialCenter.svg
Normal file
3
src/assets/svg/svg-materialCenter.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.20776 1.50439C7.39923 1.52564 7.57672 1.61993 7.70142 1.76953L9.35156 3.75H15.375C16.2034 3.75 16.875 4.42156 16.875 5.25V15C16.875 15.8284 16.2034 16.5 15.375 16.5H2.625C1.79658 16.5 1.125 15.8284 1.125 15V3C1.125 2.17157 1.79657 1.5 2.625 1.5H7.125L7.20776 1.50439ZM2.625 8.25V15H15.375V8.25H2.625ZM2.625 6.75H15.375V5.25H9C8.77745 5.25 8.56608 5.15142 8.42358 4.98047L6.77344 3H2.625V6.75Z" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 572 B |
6
src/assets/svg/svg-mediaAccountData.svg
Normal file
6
src/assets/svg/svg-mediaAccountData.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||||
|
<path d="M10.2279 4.16463C10.505 3.92241 10.9263 3.95078 11.1687 4.22778C11.4109 4.50487 11.3826 4.92615 11.1055 5.16854L5.77222 9.83521C5.49512 10.0774 5.07385 10.0491 4.83146 9.77205C4.58924 9.49496 4.6176 9.07368 4.89461 8.8313L10.2279 4.16463Z" fill="currentColor"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0001 6.66659C11.9206 6.66659 12.6667 7.41278 12.6667 8.33325C12.6667 9.25373 11.9206 9.99992 11.0001 9.99992C10.0796 9.99992 9.33341 9.25373 9.33341 8.33325C9.33341 7.41278 10.0796 6.66659 11.0001 6.66659ZM11.0001 7.99992C10.816 7.99992 10.6667 8.14916 10.6667 8.33325C10.6667 8.51735 10.816 8.66659 11.0001 8.66659C11.1842 8.66659 11.3334 8.51735 11.3334 8.33325C11.3334 8.14916 11.1842 7.99992 11.0001 7.99992Z" fill="currentColor"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.00008 3.99992C5.92056 3.99992 6.66675 4.74611 6.66675 5.66659C6.66675 6.58706 5.92056 7.33325 5.00008 7.33325C4.07961 7.33325 3.33341 6.58706 3.33341 5.66659C3.33341 4.74611 4.07961 3.99992 5.00008 3.99992ZM5.00008 5.33325C4.81599 5.33325 4.66675 5.48249 4.66675 5.66659C4.66675 5.85068 4.81599 5.99992 5.00008 5.99992C5.18418 5.99992 5.33341 5.85068 5.33341 5.66659C5.33341 5.48249 5.18418 5.33325 5.00008 5.33325Z" fill="currentColor"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6667 1.33325C14.5872 1.33325 15.3334 2.07944 15.3334 2.99992V10.9999C15.3334 11.9204 14.5872 12.6666 13.6667 12.6666H8.66675V13.6666H12.6667C13.0349 13.6666 13.3334 13.9651 13.3334 14.3333C13.3334 14.7014 13.0349 14.9999 12.6667 14.9999H3.33341C2.96522 14.9999 2.66675 14.7014 2.66675 14.3333C2.66675 13.9651 2.96522 13.6666 3.33341 13.6666H7.33341V12.6666H2.33341C1.41294 12.6666 0.666748 11.9204 0.666748 10.9999V2.99992C0.666748 2.07944 1.41294 1.33325 2.33341 1.33325H13.6667ZM2.33341 2.66659C2.14932 2.66659 2.00008 2.81582 2.00008 2.99992V10.9999C2.00008 11.184 2.14932 11.3333 2.33341 11.3333H13.6667C13.8508 11.3333 14.0001 11.184 14.0001 10.9999V2.99992C14.0001 2.81582 13.8508 2.66659 13.6667 2.66659H2.33341Z" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.1 KiB |
4
src/assets/svg/svg-mediaAccountManage.svg
Normal file
4
src/assets/svg/svg-mediaAccountManage.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||||
|
<path d="M7.99992 1.33325C8.36811 1.33325 8.66659 1.63173 8.66659 1.99992C8.66659 2.36811 8.36811 2.66659 7.99992 2.66659H2.99992C2.81583 2.66659 2.66659 2.81583 2.66659 2.99992V10.3333C2.66659 10.5174 2.81582 10.6666 2.99992 10.6666H12.9999C13.184 10.6666 13.3333 10.5174 13.3333 10.3333V8.66659C13.3333 8.2984 13.6317 7.99992 13.9999 7.99992C14.3681 7.99992 14.6666 8.2984 14.6666 8.66659V10.3333C14.6666 11.2537 13.9204 11.9999 12.9999 11.9999H8.66659V13.3333H11.3333C11.7014 13.3333 11.9999 13.6317 11.9999 13.9999C11.9999 14.3681 11.7014 14.6666 11.3333 14.6666H4.66659C4.2984 14.6666 3.99992 14.3681 3.99992 13.9999C3.99992 13.6317 4.2984 13.3333 4.66659 13.3333H7.33325V11.9999H2.99992C2.07945 11.9999 1.33325 11.2537 1.33325 10.3333V2.99992C1.33325 2.07945 2.07945 1.33325 2.99992 1.33325H7.99992Z" fill="currentColor"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3333 1.33325C12.7014 1.33325 12.9999 1.63173 12.9999 1.99992V2.80591C13.1143 2.8559 13.221 2.91954 13.3202 2.99276L14.0208 2.58911C14.3395 2.40525 14.7468 2.51462 14.9309 2.83325C15.115 3.15207 15.0062 3.55993 14.6874 3.74406L13.9889 4.14705C13.9957 4.20821 13.9999 4.27028 13.9999 4.33325C13.9999 4.396 13.9956 4.45785 13.9889 4.5188L14.6874 4.92244C15.0062 5.10658 15.115 5.51443 14.9309 5.83325C14.7468 6.15192 14.3395 6.26127 14.0208 6.07739L13.3202 5.6731C13.2209 5.74636 13.1143 5.80991 12.9999 5.85994V6.66659C12.9999 7.03478 12.7014 7.33325 12.3333 7.33325C11.9651 7.33325 11.6666 7.03478 11.6666 6.66659V5.85994C11.552 5.80984 11.445 5.74649 11.3456 5.6731L10.6458 6.07739C10.3269 6.26138 9.91901 6.15207 9.73495 5.83325C9.55094 5.51443 9.66031 5.10654 9.97909 4.92244L10.677 4.5188C10.6703 4.45787 10.6666 4.39598 10.6666 4.33325C10.6666 4.27031 10.6702 4.20819 10.677 4.14705L9.97909 3.74406C9.66025 3.55997 9.55089 3.1521 9.73495 2.83325C9.91903 2.51442 10.3269 2.40507 10.6458 2.58911L11.3456 2.99276C11.445 2.91941 11.552 2.85598 11.6666 2.80591V1.99992C11.6666 1.63173 11.9651 1.33325 12.3333 1.33325ZM12.3333 3.99992C12.1492 3.99992 11.9999 4.14916 11.9999 4.33325C11.9999 4.51735 12.1492 4.66659 12.3333 4.66659C12.5173 4.66659 12.6666 4.51735 12.6666 4.33325C12.6666 4.14916 12.5173 3.99992 12.3333 3.99992Z" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
6
src/assets/svg/svg-putAccountAccountDashboard.svg
Normal file
6
src/assets/svg/svg-putAccountAccountDashboard.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||||
|
<path d="M4.37052 4C4.73864 4.00009 5.03719 4.29853 5.03719 4.66667C5.03719 5.0348 4.73864 5.33325 4.37052 5.33333H3.70386C3.33567 5.33333 3.03719 5.03486 3.03719 4.66667C3.03719 4.29848 3.33567 4 3.70386 4H4.37052Z" fill="currentColor"/>
|
||||||
|
<path d="M12.3705 4C12.7387 4 13.0372 4.29848 13.0372 4.66667C13.0372 5.03486 12.7387 5.33333 12.3705 5.33333H6.37052C6.00241 5.33325 5.70386 5.0348 5.70386 4.66667C5.70386 4.29853 6.00241 4.00009 6.37052 4H12.3705Z" fill="currentColor"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6667 2C14.5872 2 15.3334 2.7462 15.3334 3.66667V12.3333C15.3334 13.2538 14.5872 14 13.6667 14H4.00008C3.63189 14 3.33341 13.7015 3.33341 13.3333C3.33341 12.9651 3.63189 12.6667 4.00008 12.6667H13.6667C13.8509 12.6667 14.0001 12.5174 14.0001 12.3333V7.33333H2.00008V9C2.00008 9.36819 1.7016 9.66667 1.33341 9.66667C0.965225 9.66667 0.666748 9.36819 0.666748 9V3.66667C0.666748 2.74619 1.41294 2 2.33341 2H13.6667ZM2.33341 3.33333C2.14932 3.33333 2.00008 3.48257 2.00008 3.66667V6H14.0001V3.66667C14.0001 3.48257 13.8509 3.33333 13.6667 3.33333H2.33341Z" fill="currentColor"/>
|
||||||
|
<path d="M9.91545 8.12435C10.1752 7.93809 10.5357 7.96212 10.769 8.18945L12.2631 9.64518C12.5264 9.90214 12.5315 10.3243 12.2748 10.5879C12.0179 10.8514 11.5958 10.857 11.3321 10.6003L10.2787 9.57357L8.06128 11.5117C7.80135 11.7389 7.41092 11.7302 7.16154 11.4915L5.44214 9.8444L1.84513 13.4792C1.58619 13.7408 1.16412 13.7425 0.902425 13.4837C0.640767 13.2247 0.638261 12.8027 0.897217 12.541L4.95581 8.44076L5.00594 8.39518C5.26355 8.1827 5.64443 8.19254 5.89071 8.42839L7.64331 10.1061L9.86532 8.16471L9.91545 8.12435Z" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
4
src/assets/svg/svg-putAccountData.svg
Normal file
4
src/assets/svg/svg-putAccountData.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||||
|
<path d="M11.3333 5.33325C11.3749 5.33325 11.4155 5.33767 11.455 5.34497C11.4567 5.34529 11.4585 5.34529 11.4602 5.34562C11.4774 5.34894 11.4943 5.35337 11.511 5.35799C11.515 5.35911 11.5193 5.3594 11.5234 5.3606C11.5607 5.37169 11.5965 5.38642 11.6308 5.40356C11.636 5.40616 11.6413 5.40864 11.6464 5.41138C11.658 5.41757 11.6691 5.42471 11.6803 5.43156C11.687 5.43567 11.6938 5.43956 11.7004 5.44393C11.7137 5.45269 11.7263 5.46226 11.7389 5.47192C11.7613 5.48918 11.7834 5.50741 11.804 5.52791C11.8564 5.58023 11.8976 5.63957 11.929 5.70239C11.9449 5.73417 11.9592 5.76693 11.97 5.80135L11.9875 5.87166C11.9892 5.88025 11.9895 5.88907 11.9908 5.89771C11.996 5.93109 11.9999 5.96509 11.9999 5.99992V8.66659C11.9999 9.03478 11.7014 9.33325 11.3333 9.33325C10.9651 9.33325 10.6666 9.03478 10.6666 8.66659V7.6132L8.30005 9.98885C8.17529 10.114 8.00606 10.1845 7.82935 10.1848C7.65249 10.1851 7.48255 10.1151 7.35734 9.99015L6.36515 9.00122L4.95109 10.4159C4.69074 10.6762 4.26872 10.6763 4.00838 10.4159C3.74821 10.1556 3.74812 9.73352 4.00838 9.47323L5.8938 7.58781L5.94458 7.54224C6.20618 7.32876 6.59231 7.34361 6.83651 7.58716L7.82674 8.57479L9.72778 6.66659H8.66659C8.2984 6.66659 7.99992 6.36811 7.99992 5.99992C7.99992 5.63173 8.2984 5.33325 8.66659 5.33325H11.3333Z" fill="currentColor"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9999 1.33325C13.9204 1.33325 14.6666 2.07945 14.6666 2.99992V12.9999C14.6666 13.9204 13.9204 14.6666 12.9999 14.6666H2.99992C2.07945 14.6666 1.33325 13.9204 1.33325 12.9999V2.99992C1.33325 2.07945 2.07945 1.33325 2.99992 1.33325H12.9999ZM2.99992 2.66659C2.81583 2.66659 2.66659 2.81583 2.66659 2.99992V12.9999C2.66659 13.184 2.81582 13.3333 2.99992 13.3333H12.9999C13.184 13.3333 13.3333 13.184 13.3333 12.9999V2.99992C13.3333 2.81582 13.184 2.66659 12.9999 2.66659H2.99992Z" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
3
src/assets/svg/svg-putAccountInvestmentGuidelines.svg
Normal file
3
src/assets/svg/svg-putAccountInvestmentGuidelines.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.00011 0.666748C8.36828 0.666775 8.66678 0.965242 8.66678 1.33341V2.00008H12.6668L12.7325 2.00334C12.8852 2.01847 13.0287 2.08598 13.1381 2.19539L14.4715 3.52873C14.7318 3.78907 14.7318 4.21109 14.4715 4.47144L13.1381 5.80477C13.0131 5.92978 12.8436 6.00007 12.6668 6.00008H8.66678V7.00008H12.6668C13.0349 7.00011 13.3334 7.29858 13.3334 7.66675V10.3334C13.3334 10.7016 13.0349 11 12.6668 11.0001H8.66678V14.0001H9.66678C10.0349 14.0001 10.3334 14.2986 10.3334 14.6667C10.3334 15.0349 10.0349 15.3334 9.66678 15.3334H6.33345C5.96526 15.3334 5.66678 15.0349 5.66678 14.6667C5.66678 14.2986 5.96526 14.0001 6.33345 14.0001H7.33345V11.0001H3.33345C3.15665 11.0001 2.98711 10.9298 2.86209 10.8048L1.52876 9.47143C1.26841 9.21109 1.26841 8.78908 1.52876 8.52873L2.86209 7.19539L2.91092 7.15112C3.02955 7.05392 3.17873 7.00008 3.33345 7.00008H7.33345V6.00008H3.33345C2.96526 6.00008 2.66678 5.7016 2.66678 5.33341V2.66675C2.66678 2.29856 2.96526 2.00008 3.33345 2.00008H7.33345V1.33341C7.33345 0.965225 7.63192 0.666748 8.00011 0.666748ZM2.94282 9.00008L3.60949 9.66675H12.0001V8.33341H3.60949L2.94282 9.00008ZM4.00011 4.66675H12.3907L13.0574 4.00008L12.3907 3.33341H4.00011V4.66675Z" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
4
src/assets/svg/svg-putAccountManage.svg
Normal file
4
src/assets/svg/svg-putAccountManage.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||||
|
<path d="M11.1667 8.00008C11.4428 8.00008 11.6667 8.22394 11.6667 8.50008C11.6667 8.77622 11.4428 9.00008 11.1667 9.00008C10.8905 9.00008 10.6667 8.77622 10.6667 8.50008C10.6667 8.22394 10.8905 8.00008 11.1667 8.00008Z" fill="currentColor"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1.66675C9.36913 1.66675 9.94634 1.78371 10.4447 2.19409C10.846 2.52467 11.1507 3.00935 11.2734 3.66675H13.6667C14.403 3.66675 15 4.2637 15 5.00008V12.3334C15 13.0698 14.403 13.6667 13.6667 13.6667H2.33333C1.59695 13.6667 1 13.0698 1 12.3334V5.00008C1 4.37823 1.42607 3.85717 2.00195 3.70972C2.01269 3.36141 2.12207 2.88367 2.43424 2.46948C2.78795 2.00022 3.36198 1.66675 4.16667 1.66675H9ZM2.33333 12.3334H13.6667V11.0001H8.33333C7.96514 11.0001 7.66667 10.7016 7.66667 10.3334V6.66675C7.66667 6.29856 7.96514 6.00008 8.33333 6.00008H13.6667V5.00008H2.33333V12.3334ZM9 9.66675H13.6667V7.33342H9V9.66675ZM4.16667 3.00008C3.77137 3.00008 3.59565 3.14446 3.49935 3.27222C3.40692 3.39484 3.35929 3.54618 3.3418 3.66675H9.89648C9.81547 3.4438 9.70073 3.30816 9.59701 3.22274C9.38703 3.0499 9.13084 3.00008 9 3.00008H4.16667Z" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
4
src/assets/svg/svg-taskManage.svg
Normal file
4
src/assets/svg/svg-taskManage.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
||||||
|
<path d="M12.2197 8.84473C12.5126 8.55186 12.9874 8.55185 13.2803 8.84473C13.5732 9.13761 13.5731 9.61238 13.2803 9.90527L8.78027 14.4053C8.48738 14.6982 8.01262 14.6982 7.71973 14.4053L5.46973 12.1553C5.17685 11.8624 5.17684 11.3876 5.46973 11.0947C5.76262 10.8019 6.23739 10.8019 6.53027 11.0947L8.25 12.8145L12.2197 8.84473Z" fill="currentColor"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.125C12.4142 1.125 12.75 1.46079 12.75 1.875V2.25H15.375C16.2034 2.25 16.875 2.92158 16.875 3.75V15.375C16.875 16.2034 16.2034 16.875 15.375 16.875H2.625C1.79658 16.875 1.125 16.2034 1.125 15.375V3.75C1.125 2.92157 1.79657 2.25 2.625 2.25H5.25V1.875C5.25 1.46079 5.58579 1.125 6 1.125C6.41421 1.125 6.75 1.46079 6.75 1.875V2.25H11.25V1.875C11.25 1.46079 11.5858 1.125 12 1.125ZM2.625 15.375H15.375V7.875H2.625V15.375ZM2.625 6.375H15.375V3.75H12.75V4.875C12.75 5.28921 12.4142 5.625 12 5.625C11.5858 5.625 11.25 5.28921 11.25 4.875V3.75H6.75V4.875C6.75 5.28921 6.41421 5.625 6 5.625C5.58579 5.625 5.25 5.28921 5.25 4.875V3.75H2.625V6.375Z" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -9,6 +9,7 @@
|
|||||||
"footer": true,
|
"footer": true,
|
||||||
"themeColor": "#165DFF",
|
"themeColor": "#165DFF",
|
||||||
"menuWidth": 138,
|
"menuWidth": 138,
|
||||||
|
"menuWidthFold": 74,
|
||||||
"globalSettings": false,
|
"globalSettings": false,
|
||||||
"device": "desktop",
|
"device": "desktop",
|
||||||
"tabBar": false,
|
"tabBar": false,
|
||||||
|
|||||||
@ -1,9 +1,10 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { Layout } from 'ant-design-vue';
|
import { Layout } from 'ant-design-vue';
|
||||||
import Navbar from "./components/navbar"
|
import Navbar from './components/navbar';
|
||||||
import SiderBar from "./components/siderBar"
|
import SiderBar from './components/siderBar';
|
||||||
|
|
||||||
import { useAppStore } from '@/stores';
|
import { useAppStore } from '@/stores';
|
||||||
|
import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||||
import { useResponsive } from '@/hooks';
|
import { useResponsive } from '@/hooks';
|
||||||
import JoinModal from '@/components/join-modal.vue';
|
import JoinModal from '@/components/join-modal.vue';
|
||||||
import { getQueryParam } from '@/utils/helper';
|
import { getQueryParam } from '@/utils/helper';
|
||||||
@ -15,6 +16,7 @@ import { useRoute } from 'vue-router';
|
|||||||
const joinEnterpriseVisible = ref(false);
|
const joinEnterpriseVisible = ref(false);
|
||||||
const joinModalRef = ref(null);
|
const joinModalRef = ref(null);
|
||||||
const appStore = useAppStore();
|
const appStore = useAppStore();
|
||||||
|
const sidebarStore = useSidebarStore();
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
@ -29,14 +31,11 @@ const showSider = computed(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const menuWidth = computed(() => {
|
const menuWidth = computed(() => {
|
||||||
return appStore.menuCollapse ? 48 : appStore.menuWidth;
|
return sidebarStore.menuCollapse ? appStore.menuWidthFold : appStore.menuWidth;
|
||||||
});
|
});
|
||||||
const collapsed = computed(() => {
|
const collapsed = computed(() => {
|
||||||
return appStore.menuCollapse;
|
return sidebarStore.menuCollapse;
|
||||||
});
|
});
|
||||||
// const showSidebar = computed(() => {
|
|
||||||
// return !(route.meta && route.meta.hideSidebar);
|
|
||||||
// });
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
checkHasInviteCode();
|
checkHasInviteCode();
|
||||||
@ -63,7 +62,6 @@ const checkHasInviteCode = () => {
|
|||||||
<Layout class="flex layout-content-wrap">
|
<Layout class="flex layout-content-wrap">
|
||||||
<Layout.Sider
|
<Layout.Sider
|
||||||
v-if="showSider"
|
v-if="showSider"
|
||||||
class="layout-sider"
|
|
||||||
v-model="collapsed"
|
v-model="collapsed"
|
||||||
:width="menuWidth"
|
:width="menuWidth"
|
||||||
collapsible
|
collapsible
|
||||||
|
|||||||
@ -1,203 +1,184 @@
|
|||||||
<script lang="tsx">
|
<script lang="tsx">
|
||||||
import { Menu } from 'ant-design-vue';
|
import { Dropdown, Menu } from 'ant-design-vue';
|
||||||
import type { RouteMeta, RouteRecordRaw } from 'vue-router';
|
import type { RouteMeta, RouteRecordRaw } from 'vue-router';
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
import SvgIcon from '@/components/svg-icon/index.vue';
|
||||||
|
|
||||||
import { useAppStore } from '@/stores';
|
import { useAppStore } from '@/stores';
|
||||||
import { useSidebarStore } from '@/stores/modules/side-bar';
|
import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||||
import { listenerRouteChange } from '@/utils/route-listener';
|
import { MENU_LIST } from './menu-list';
|
||||||
import { openWindow, regexUrl } from '@/utils';
|
import type { typeMenuItem } from './menu-list';
|
||||||
import useMenuTree from './use-menu-tree';
|
|
||||||
|
import icon1 from '@/assets/img/agent/icon1.png';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
emit: ['collapse'],
|
emit: ['collapse'],
|
||||||
setup() {
|
setup() {
|
||||||
const appStore = useAppStore();
|
// const appStore = useAppStore();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const { menuTree } = useMenuTree();
|
|
||||||
const collapsed = computed({
|
|
||||||
get() {
|
|
||||||
if (appStore.device === 'desktop') return appStore.menuCollapse;
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
set(value: boolean) {
|
|
||||||
appStore.updateSettings({ menuCollapse: value });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const topMenu = computed(() => appStore.topMenu);
|
|
||||||
const openKeys = ref<string[]>([]);
|
|
||||||
const selectedKey = ref<string[]>([]);
|
|
||||||
const sidebarStore = useSidebarStore();
|
const sidebarStore = useSidebarStore();
|
||||||
const onMenuItemClick = (item: RouteRecordRaw) => {
|
|
||||||
if (regexUrl.test(item.path)) {
|
|
||||||
openWindow(item.path);
|
|
||||||
selectedKey.value = [item.name as string];
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// Eliminate external link side effects
|
|
||||||
const { hideInMenu, activeMenu } = item.meta as RouteMeta;
|
|
||||||
if (route.name === item.name && !hideInMenu && !activeMenu) {
|
|
||||||
selectedKey.value = [item.name as string];
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// Trigger router change
|
|
||||||
router.push({
|
|
||||||
name: item.name,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const findMenuOpenKeys = (target: string) => {
|
|
||||||
const result: string[] = [];
|
|
||||||
let isFind = false;
|
|
||||||
const backtrack = (item: RouteRecordRaw, keys: string[]) => {
|
|
||||||
if (item.name === target) {
|
|
||||||
isFind = true;
|
|
||||||
result.push(...keys);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (item.children?.length) {
|
|
||||||
item.children.forEach((el) => {
|
|
||||||
backtrack(el, [...keys, el.name as string]);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
menuTree.value.forEach((el: RouteRecordRaw) => {
|
|
||||||
if (isFind) return; // Performance optimization
|
|
||||||
backtrack(el, [el.name as string]);
|
|
||||||
});
|
|
||||||
return result;
|
|
||||||
};
|
|
||||||
listenerRouteChange((newRoute) => {
|
|
||||||
const { requiresAuth, activeMenu, hideInMenu } = newRoute.meta;
|
|
||||||
// if (requiresAuth && (!hideInMenu || activeMenu)) {
|
|
||||||
if (!hideInMenu || activeMenu) {
|
|
||||||
const menuOpenKeys = findMenuOpenKeys((activeMenu || newRoute.name) as string);
|
|
||||||
const keySet = new Set([...menuOpenKeys, ...openKeys.value]);
|
|
||||||
openKeys.value = [...keySet];
|
|
||||||
selectedKey.value = [activeMenu || menuOpenKeys[menuOpenKeys.length - 1]];
|
|
||||||
|
|
||||||
// 自动设置 activeMenuId
|
const currentMenuList = ref<typeMenuItem[]>([]);
|
||||||
sidebarStore.setActiveMenuIdByRoute(newRoute);
|
const currentMenuModInfo = ref<typeMenuItem>({});
|
||||||
}
|
|
||||||
}, true);
|
|
||||||
const setCollapse = (val: boolean) => {
|
|
||||||
if (appStore.device === 'desktop') appStore.updateSettings({ menuCollapse: val });
|
|
||||||
};
|
|
||||||
const renderSubMenu = () => {
|
|
||||||
function travel(_route: RouteRecordRaw[] = [], nodes: any[] = []) {
|
|
||||||
if (!Array.isArray(_route)) return nodes;
|
|
||||||
_route.forEach((element) => {
|
|
||||||
// 跳过没有 name 的菜单项，防止 key 报错
|
|
||||||
if (!element?.name) return;
|
|
||||||
|
|
||||||
const icon = element?.meta?.icon
|
const currentRouteName = computed(() => route.name as string);
|
||||||
? (() => {
|
const currentRouteGroup = computed(() => route.meta?.group ?? 'GroupMain');
|
||||||
if (typeof element.meta.icon === 'string') {
|
|
||||||
return (
|
const getCollapseMenuKey = (routeName: string): string => {
|
||||||
<svg class="w-16px h-16px">
|
let _key: string;
|
||||||
<use xlinkHref={element.meta.icon} />
|
for (let i = 0; i < currentMenuList.value.length; i++) {
|
||||||
</svg>
|
const menuItem = currentMenuList.value[i];
|
||||||
);
|
|
||||||
|
// 检查是否有list子级
|
||||||
|
if (menuItem.children?.length > 0) {
|
||||||
|
for (let j = 0; j < menuItem.children.length; j++) {
|
||||||
|
const subMenuItem = menuItem.children[j];
|
||||||
|
if (subMenuItem.activeMatch?.includes(routeName)) {
|
||||||
|
currentMenuModInfo.value = menuItem;
|
||||||
|
_key = menuItem.key;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
return h(element.meta.icon as object);
|
// 没有list子级，直接检查当前项
|
||||||
|
if (menuItem.routeName === routeName) {
|
||||||
|
currentMenuModInfo.value = menuItem;
|
||||||
|
_key = menuItem.key;
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
})()
|
}
|
||||||
: null;
|
}
|
||||||
|
return _key;
|
||||||
|
};
|
||||||
|
const onClickItem = (name: string) => {
|
||||||
|
router.push({ name });
|
||||||
|
};
|
||||||
|
const renderMenuItem = (item: typeMenuItem, hideLabel = false) => {
|
||||||
|
const getMenuItemClass = () => {
|
||||||
|
if (item.children?.length) {
|
||||||
|
return getCollapseMenuKey(currentRouteName.value) === item.key ? 'active' : '';
|
||||||
|
}
|
||||||
|
return item.activeMatch?.includes(currentRouteName.value) ? 'active' : '';
|
||||||
|
};
|
||||||
|
|
||||||
if (element.children && element.children.length > 0) {
|
return (
|
||||||
nodes.push(
|
<Menu.Item class={`menu-item ${getMenuItemClass()}`} onClick={() => onClickItem(item.routeName)}>
|
||||||
<a-sub-menu
|
<SvgIcon size="18" name={item.icon} alt="状态图标" class="color-#55585F flex-shrink-0" />
|
||||||
key={String(element.name)}
|
{!hideLabel && <span class="cts label">{item.label}</span>}
|
||||||
|
</Menu.Item>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
const renderMenuList = () => {
|
||||||
|
return currentMenuList.value.map((item) => {
|
||||||
|
if (!item.children) {
|
||||||
|
return renderMenuItem(item, sidebarStore.menuCollapse);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<Dropdown
|
||||||
|
overlayClassName="layout-sider-dropdown-xt"
|
||||||
|
placement="rightTop"
|
||||||
v-slots={{
|
v-slots={{
|
||||||
icon,
|
overlay: () => {
|
||||||
title: () => element?.meta?.locale || '',
|
return (
|
||||||
|
<div class="p-8px bg-#fff container">
|
||||||
|
{item.children.map((child) => {
|
||||||
|
return renderMenuItem(child);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{travel(element.children)}
|
{renderMenuItem(item, sidebarStore.menuCollapse)}
|
||||||
</a-sub-menu>,
|
</Dropdown>
|
||||||
);
|
);
|
||||||
} else {
|
|
||||||
nodes.push(
|
|
||||||
<a-menu-item key={String(element.name)} v-slots={{ icon }} onClick={() => onMenuItemClick(element)}>
|
|
||||||
{element?.meta?.locale || ''}
|
|
||||||
</a-menu-item>,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
return nodes;
|
|
||||||
}
|
|
||||||
return travel(menuTree.value ?? []);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const initMenuList = () => {
|
||||||
|
const groupMenuList = MENU_LIST?.[currentRouteGroup.value as string];
|
||||||
|
currentMenuList.value = cloneDeep(groupMenuList);
|
||||||
|
};
|
||||||
|
const initCollapse = () => {
|
||||||
|
getCollapseMenuKey(currentRouteName.value);
|
||||||
|
|
||||||
|
if (currentMenuModInfo.value) {
|
||||||
|
sidebarStore.setActiveMenuKey(currentMenuModInfo.value?.key);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const init = () => {
|
||||||
|
// 初始化菜单数据
|
||||||
|
initMenuList();
|
||||||
|
|
||||||
|
// 初始化菜单展开项
|
||||||
|
initCollapse();
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
init();
|
||||||
|
});
|
||||||
|
|
||||||
return () => (
|
return () => (
|
||||||
<a-menu
|
<Menu class={`siderBar-wrap p-16px w-full h-full flex flex-col ${sidebarStore.menuCollapse ? 'menu-fold' : ''}`}>
|
||||||
mode={topMenu.value ? 'horizontal' : 'vertical'}
|
<Menu.Item
|
||||||
v-model:collapsed={collapsed.value}
|
class={`menu-item !mb-0 ${currentRouteName.value === 'Home' ? 'active' : ''}`}
|
||||||
v-model:open-keys={openKeys.value}
|
onClick={() => onClickItem('Home')}
|
||||||
show-collapse-button={appStore.device !== 'mobile'}
|
|
||||||
auto-open={false}
|
|
||||||
selected-keys={selectedKey.value}
|
|
||||||
auto-open-selected={true}
|
|
||||||
level-indent={24}
|
|
||||||
style="height: 100%;width:100%;"
|
|
||||||
onCollapse={setCollapse}
|
|
||||||
>
|
>
|
||||||
{renderSubMenu()}
|
<img src={icon1} width={18} height={18} />
|
||||||
</a-menu>
|
{!sidebarStore.menuCollapse && <span class="cts label">智能搜索</span>}
|
||||||
|
</Menu.Item>
|
||||||
|
<div class="line w-full h-1px bg-#211F24 my-12px"></div>
|
||||||
|
<div class="flex flex-col flex-1">
|
||||||
|
<div class="menu-list flex-1">{renderMenuList()}</div>
|
||||||
|
<div class="flex justify-end items-center">
|
||||||
|
<div
|
||||||
|
class="flex fold-btn items-center cursor-pointer"
|
||||||
|
onClick={() => {
|
||||||
|
sidebarStore.setMenuCollapse();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{sidebarStore.menuCollapse ? (
|
||||||
|
<icon-menu-unfold size={16} class="color-#55585F icon mr-4px" />
|
||||||
|
) : (
|
||||||
|
<icon-menu-fold size={16} class="color-#55585F icon mr-4px" />
|
||||||
|
)}
|
||||||
|
{!sidebarStore.menuCollapse && <span class="cts !color-#55585F flex-shrink-0">展开</span>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Menu>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
:deep(.arco-menu-inner) {
|
@import './style.scss';
|
||||||
padding: 20px 24px 0 12px !important;
|
</style>
|
||||||
.arco-menu-inline-header {
|
<style lang="scss">
|
||||||
display: flex;
|
@import './style.scss';
|
||||||
align-items: center;
|
.layout-sider-dropdown-xt {
|
||||||
height: 40px;
|
.container {
|
||||||
margin-bottom: 12px;
|
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
.arco-menu-icon {
|
background: var(--BG-White, #fff);
|
||||||
margin-right: 8px;
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
|
||||||
}
|
.menu-item {
|
||||||
.arco-menu-title {
|
@include menu-item;
|
||||||
color: var(--Text-2, #3c4043);
|
padding: 8px;
|
||||||
font-family: $font-family-medium;
|
|
||||||
font-size: 16px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 22px; /* 137.5% */
|
|
||||||
}
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--BG-200, #f2f3f5) !important;
|
background: rgba(109, 76, 254, 0.08);
|
||||||
}
|
color: #6d4cfe;
|
||||||
&.arco-menu-selected {
|
.svg-icon {
|
||||||
.arco-menu-title {
|
color: #6d4cfe;
|
||||||
color: var(--Brand-Brand-6, #6d4cfe) !important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&.active {
|
||||||
|
.label,
|
||||||
|
.svg-icon {
|
||||||
|
color: #6d4cfe;
|
||||||
}
|
}
|
||||||
.arco-icon {
|
|
||||||
&:not(.arco-icon-down) {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.arco-menu-item {
|
|
||||||
border-radius: 8px;
|
|
||||||
.arco-menu-item-inner {
|
|
||||||
color: var(--Text-3, #737478);
|
|
||||||
font-family: $font-family-regular;
|
|
||||||
font-size: 16px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 22px; /* 137.5% */
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background: var(--BG-200, #f2f3f5) !important;
|
|
||||||
}
|
|
||||||
&.arco-menu-selected {
|
|
||||||
background: var(--Brand-Brand-1, #f0edff) !important;
|
|
||||||
.arco-menu-item-inner {
|
|
||||||
color: var(--Brand-Brand-6, #6d4cfe) !important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
125
src/layouts/components/siderBar/menu-list.ts
Normal file
125
src/layouts/components/siderBar/menu-list.ts
Normal file
@ -0,0 +1,125 @@
|
|||||||
|
export interface typeMenuItem {
|
||||||
|
key?: string | number; // 菜单组key
|
||||||
|
label?: string; // 菜单组标题
|
||||||
|
icon?: string; // 菜单组图标
|
||||||
|
routeName?: string; // 路由名称
|
||||||
|
requireLogin?: boolean; // 是否需要登录
|
||||||
|
requireAuth?: boolean; // 是否需要权限验证
|
||||||
|
activeMatch?: string[]; // 菜单高亮路由组匹配
|
||||||
|
children?: typeMenuItem[]; // 子菜单列表
|
||||||
|
}
|
||||||
|
|
||||||
|
export const MENU_LIST = <Record<string, typeMenuItem[]>>{
|
||||||
|
GroupMain: [
|
||||||
|
{
|
||||||
|
key: 'ModAccountManage',
|
||||||
|
label: '账号管理',
|
||||||
|
icon: 'svg-accountManage',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: 'ModMediaAccountManage',
|
||||||
|
icon: 'svg-mediaAccountManage',
|
||||||
|
label: '账号管理',
|
||||||
|
routeName: 'MediaAccountAccountManagement',
|
||||||
|
requireLogin: true,
|
||||||
|
activeMatch: ['MediaAccountAccountManagement'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'ModMediaAccountData',
|
||||||
|
icon: 'svg-mediaAccountData',
|
||||||
|
label: '账号数据',
|
||||||
|
routeName: 'MediaAccountAccountDashboard',
|
||||||
|
requireLogin: true,
|
||||||
|
activeMatch: ['MediaAccountAccountDashboard', 'MediaAccountAccountDetails'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'ModPutAccountManage',
|
||||||
|
icon: 'svg-putAccountManage',
|
||||||
|
label: '账户管理',
|
||||||
|
routeName: 'PutAccountAccountManagement',
|
||||||
|
requireLogin: true,
|
||||||
|
activeMatch: ['PutAccountAccountManagement'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'ModPutAccountData',
|
||||||
|
icon: 'svg-putAccountData',
|
||||||
|
label: '账户数据',
|
||||||
|
routeName: 'PutAccountAccountData',
|
||||||
|
requireLogin: true,
|
||||||
|
activeMatch: ['PutAccountAccountData'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'ModPutAccountAccountDashboard',
|
||||||
|
icon: 'svg-putAccountAccountDashboard',
|
||||||
|
label: '投放表现分析',
|
||||||
|
routeName: 'PutAccountAccountDashboard',
|
||||||
|
requireLogin: true,
|
||||||
|
activeMatch: ['PutAccountAccountDashboard'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'ModInvestmentGuidelines',
|
||||||
|
icon: 'svg-putAccountInvestmentGuidelines',
|
||||||
|
label: '投放指南',
|
||||||
|
routeName: 'PutAccountInvestmentGuidelines',
|
||||||
|
requireLogin: true,
|
||||||
|
activeMatch: ['PutAccountInvestmentGuidelines', 'PutAccountInvestmentGuidelinesDetail'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'ModMaterialCenter',
|
||||||
|
label: '素材中心',
|
||||||
|
icon: 'svg-materialCenter',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: 'ModMediaFinishProductsWareHouse',
|
||||||
|
icon: 'svg-finishProductsWareHouse',
|
||||||
|
label: '成品库',
|
||||||
|
routeName: 'FinishProductsWareHouse',
|
||||||
|
requireLogin: true,
|
||||||
|
activeMatch: ['FinishProductsWareHouse', 'FinishProductsWareHouseWriter'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'ModMediaRawMaterialStorage',
|
||||||
|
icon: 'svg-rawMaterialStorage',
|
||||||
|
label: '原料库',
|
||||||
|
routeName: 'RawMaterialStorage',
|
||||||
|
requireLogin: true,
|
||||||
|
activeMatch: ['RawMaterialStorage', 'RawMaterialStorageWriter'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'ModTaskManage',
|
||||||
|
label: '任务管理',
|
||||||
|
icon: 'svg-taskManage',
|
||||||
|
routeName: 'TaskManagement',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
GroupMainWriter: [
|
||||||
|
{
|
||||||
|
key: 'ModMaterialCenter',
|
||||||
|
label: '素材中心',
|
||||||
|
icon: 'svg-materialCenter',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: 'ModMediaFinishProductsWareHouseWriter',
|
||||||
|
icon: 'svg-finishProductsWareHouseWriter',
|
||||||
|
label: '成品库',
|
||||||
|
routeName: 'FinishProductsWareHouseWriter',
|
||||||
|
requireLogin: true,
|
||||||
|
activeMatch: ['FinishProductsWareHouseWriter', 'FinishProductsWareHouseWriter'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'ModMediaRawMaterialStorageWriter',
|
||||||
|
icon: 'svg-rawMaterialStorageWriter',
|
||||||
|
label: '原料库',
|
||||||
|
routeName: 'RawMaterialStorageWriter',
|
||||||
|
requireLogin: true,
|
||||||
|
activeMatch: ['RawMaterialStorageWriter', 'RawMaterialStorageWriter'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
71
src/layouts/components/siderBar/style.scss
Normal file
71
src/layouts/components/siderBar/style.scss
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
@mixin menu-item {
|
||||||
|
border-radius: 8px;
|
||||||
|
backdrop-filter: blur(100px);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
// justify-content: center;
|
||||||
|
padding: 8px 12px;
|
||||||
|
margin: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100%;
|
||||||
|
.label {
|
||||||
|
transition: all 0.3s;
|
||||||
|
margin-left: 8px;
|
||||||
|
flex: auto;
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.ant-menu-title-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background: rgba(109, 76, 254, 0.08);
|
||||||
|
color: #6d4cfe;
|
||||||
|
.label,
|
||||||
|
.svg-icon {
|
||||||
|
color: #6d4cfe;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
background: #fff !important;
|
||||||
|
.label,
|
||||||
|
.svg-icon {
|
||||||
|
color: #6d4cfe !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
&.ant-menu-item-selected {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.siderBar-wrap {
|
||||||
|
background: transparent !important;
|
||||||
|
border: none !important;
|
||||||
|
color: inherit;
|
||||||
|
.cts {
|
||||||
|
color: #211f24;
|
||||||
|
font-family: $font-family-regular;
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
.menu-item {
|
||||||
|
@include menu-item;
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
opacity: 0.06;
|
||||||
|
}
|
||||||
|
.fold-btn {
|
||||||
|
&:hover {
|
||||||
|
.cts,
|
||||||
|
.icon {
|
||||||
|
color: #6d4cfe !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -9,11 +9,9 @@ import { useSidebarStore } from '@/stores/modules/side-bar';
|
|||||||
export default function useMenuTree() {
|
export default function useMenuTree() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const appRoutes = router.options?.routes ?? [];
|
const appRoutes = router.options?.routes ?? [];
|
||||||
console.log({appRoutes})
|
|
||||||
|
|
||||||
const sidebarStore = useSidebarStore();
|
const sidebarStore = useSidebarStore();
|
||||||
const appRoute = computed(() => {
|
const appRoute = computed(() => {
|
||||||
const _filterRoutes = appRoutes.filter((v) => v.meta?.id === sidebarStore.activeMenuId);
|
const _filterRoutes = appRoutes.filter((v) => v.meta?.id === sidebarStore.activeMenuKey);
|
||||||
return _filterRoutes;
|
return _filterRoutes;
|
||||||
});
|
});
|
||||||
const menuTree = computed(() => {
|
const menuTree = computed(() => {
|
||||||
|
|||||||
@ -32,4 +32,7 @@ Object.values(directives).forEach((directive) => {
|
|||||||
app.use(directive);
|
app.use(directive);
|
||||||
}); // 注册指令
|
}); // 注册指令
|
||||||
|
|
||||||
app.mount('#app');
|
// 解决mounted中获取不到route信息
|
||||||
|
router.isReady().then(() => {
|
||||||
|
app.mount('#app');
|
||||||
|
});
|
||||||
|
|||||||
@ -147,7 +147,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'detail/:id',
|
path: 'detail/:id',
|
||||||
name: 'guideDetail',
|
name: 'PutAccountInvestmentGuidelinesDetail',
|
||||||
meta: {
|
meta: {
|
||||||
locale: '投放指南详情',
|
locale: '投放指南详情',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
|
|||||||
@ -6,7 +6,7 @@ import type { Router } from 'vue-router';
|
|||||||
import NProgress from 'nprogress';
|
import NProgress from 'nprogress';
|
||||||
import { goUserLogin } from '@/utils/user';
|
import { goUserLogin } from '@/utils/user';
|
||||||
// import router from '@/router';
|
// import router from '@/router';
|
||||||
import { checkRoutePermission } from '@/permission/permission';
|
// import { checkRoutePermission } from '@/permission/permission';
|
||||||
|
|
||||||
import { useUserStore } from '@/stores/modules/user';
|
import { useUserStore } from '@/stores/modules/user';
|
||||||
|
|
||||||
|
|||||||
@ -28,7 +28,6 @@ export const router = createRouter({
|
|||||||
name: 'Home',
|
name: 'Home',
|
||||||
component: () => import('@/views/home/index.vue'),
|
component: () => import('@/views/home/index.vue'),
|
||||||
meta: {
|
meta: {
|
||||||
hideSidebar: true,
|
|
||||||
requiresAuth: false,
|
requiresAuth: false,
|
||||||
requireLogin: true,
|
requireLogin: true,
|
||||||
id: MENU_GROUP_IDS.WORK_BENCH_ID,
|
id: MENU_GROUP_IDS.WORK_BENCH_ID,
|
||||||
|
|||||||
@ -1,89 +1,89 @@
|
|||||||
import { IconBookmark } from '@arco-design/web-vue/es/icon';
|
// import { IconBookmark } from '@arco-design/web-vue/es/icon';
|
||||||
import type { AppRouteRecordRaw } from '../types';
|
// import type { AppRouteRecordRaw } from '../types';
|
||||||
import { MENU_GROUP_IDS } from '@/router/constants';
|
// import { MENU_GROUP_IDS } from '@/router/constants';
|
||||||
|
|
||||||
const COMPONENTS: AppRouteRecordRaw[] = [
|
// const COMPONENTS: AppRouteRecordRaw[] = [
|
||||||
{
|
// {
|
||||||
path: '/dataEngine',
|
// path: '/dataEngine',
|
||||||
name: 'DataEngine',
|
// name: 'DataEngine',
|
||||||
redirect: 'dataEngine/hotTranslation',
|
// redirect: 'dataEngine/hotTranslation',
|
||||||
meta: {
|
// meta: {
|
||||||
locale: '全域数据引擎',
|
// locale: '全域数据引擎',
|
||||||
icon: IconBookmark,
|
// icon: IconBookmark,
|
||||||
requiresAuth: true,
|
// requiresAuth: true,
|
||||||
requireLogin: true,
|
// requireLogin: true,
|
||||||
roles: ['*'],
|
// roles: ['*'],
|
||||||
id: MENU_GROUP_IDS.DATA_ENGINE_ID,
|
// id: MENU_GROUP_IDS.DATA_ENGINE_ID,
|
||||||
},
|
// },
|
||||||
children: [
|
// children: [
|
||||||
{
|
// {
|
||||||
path: 'hotTranslation',
|
// path: 'hotTranslation',
|
||||||
name: 'DataEngineHotTranslation',
|
// name: 'DataEngineHotTranslation',
|
||||||
meta: {
|
// meta: {
|
||||||
locale: '行业热门话题洞察',
|
// locale: '行业热门话题洞察',
|
||||||
requiresAuth: true,
|
// requiresAuth: true,
|
||||||
requireLogin: true,
|
// requireLogin: true,
|
||||||
roles: ['*'],
|
// roles: ['*'],
|
||||||
},
|
// },
|
||||||
component: () => import('@/views/components/dataEngine/hotTranslation.vue'),
|
// component: () => import('@/views/components/dataEngine/hotTranslation.vue'),
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
path: 'hotCloud',
|
// path: 'hotCloud',
|
||||||
name: 'DataEngineHotCloud',
|
// name: 'DataEngineHotCloud',
|
||||||
meta: {
|
// meta: {
|
||||||
locale: '行业词云',
|
// locale: '行业词云',
|
||||||
requiresAuth: true,
|
// requiresAuth: true,
|
||||||
requireLogin: true,
|
// requireLogin: true,
|
||||||
roles: ['*'],
|
// roles: ['*'],
|
||||||
},
|
// },
|
||||||
component: () => import('@/views/components/dataEngine/hotCloud.vue'),
|
// component: () => import('@/views/components/dataEngine/hotCloud.vue'),
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
path: 'keyWord',
|
// path: 'keyWord',
|
||||||
name: 'DataEngineKeyWord',
|
// name: 'DataEngineKeyWord',
|
||||||
meta: {
|
// meta: {
|
||||||
locale: '行业关键词动向',
|
// locale: '行业关键词动向',
|
||||||
requiresAuth: true,
|
// requiresAuth: true,
|
||||||
requireLogin: true,
|
// requireLogin: true,
|
||||||
roles: ['*'],
|
// roles: ['*'],
|
||||||
},
|
// },
|
||||||
component: () => import('@/views/components/dataEngine/keyWord.vue'),
|
// component: () => import('@/views/components/dataEngine/keyWord.vue'),
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
path: 'userPainPoints',
|
// path: 'userPainPoints',
|
||||||
name: 'DataEngineUserPainPoints',
|
// name: 'DataEngineUserPainPoints',
|
||||||
meta: {
|
// meta: {
|
||||||
locale: '用户痛点观察',
|
// locale: '用户痛点观察',
|
||||||
requiresAuth: true,
|
// requiresAuth: true,
|
||||||
requireLogin: true,
|
// requireLogin: true,
|
||||||
roles: ['*'],
|
// roles: ['*'],
|
||||||
},
|
// },
|
||||||
component: () => import('@/views/components/dataEngine/userPainPoints.vue'),
|
// component: () => import('@/views/components/dataEngine/userPainPoints.vue'),
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
path: 'keyBrandMovement',
|
// path: 'keyBrandMovement',
|
||||||
name: 'DataEngineKeyBrandMovement',
|
// name: 'DataEngineKeyBrandMovement',
|
||||||
meta: {
|
// meta: {
|
||||||
locale: '重点品牌动向',
|
// locale: '重点品牌动向',
|
||||||
requiresAuth: true,
|
// requiresAuth: true,
|
||||||
requireLogin: true,
|
// requireLogin: true,
|
||||||
roles: ['*'],
|
// roles: ['*'],
|
||||||
},
|
// },
|
||||||
component: () => import('@/views/components/dataEngine/keyBrandMovement.vue'),
|
// component: () => import('@/views/components/dataEngine/keyBrandMovement.vue'),
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
path: 'userPersona',
|
// path: 'userPersona',
|
||||||
name: 'DataEngineUserPersona',
|
// name: 'DataEngineUserPersona',
|
||||||
meta: {
|
// meta: {
|
||||||
locale: '用户画像',
|
// locale: '用户画像',
|
||||||
requiresAuth: true,
|
// requiresAuth: true,
|
||||||
requireLogin: true,
|
// requireLogin: true,
|
||||||
roles: ['*'],
|
// roles: ['*'],
|
||||||
},
|
// },
|
||||||
component: () => import('@/views/components/dataEngine/userPersona.vue'),
|
// component: () => import('@/views/components/dataEngine/userPersona.vue'),
|
||||||
},
|
// },
|
||||||
],
|
// ],
|
||||||
},
|
// },
|
||||||
];
|
// ];
|
||||||
|
|
||||||
export default COMPONENTS;
|
// export default COMPONENTS;
|
||||||
|
|||||||
@ -147,7 +147,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'detail/:id',
|
path: 'detail/:id',
|
||||||
name: 'guideDetail',
|
name: 'PutAccountInvestmentGuidelinesDetail',
|
||||||
meta: {
|
meta: {
|
||||||
locale: '投放指南详情',
|
locale: '投放指南详情',
|
||||||
requiresAuth: true,
|
requiresAuth: true,
|
||||||
|
|||||||
@ -95,7 +95,7 @@ export const MENU_LIST = [
|
|||||||
'PutAccountAccountData',
|
'PutAccountAccountData',
|
||||||
'PutAccountAccountDashboard',
|
'PutAccountAccountDashboard',
|
||||||
'PutAccountInvestmentGuidelines',
|
'PutAccountInvestmentGuidelines',
|
||||||
'guideDetail',
|
'PutAccountInvestmentGuidelinesDetail',
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
|
|||||||
@ -10,27 +10,35 @@ import { useEnterpriseStore } from '@/stores/modules/enterprise';
|
|||||||
import { getTaskUnread, patchTaskRead } from '@/api/all/common';
|
import { getTaskUnread, patchTaskRead } from '@/api/all/common';
|
||||||
|
|
||||||
interface sidebarState {
|
interface sidebarState {
|
||||||
activeMenuId: number | null;
|
activeMenuKey: string | number | null;
|
||||||
menuList: any[];
|
menuList: any[];
|
||||||
allowAccessRoutes: any[];
|
allowAccessRoutes: any[];
|
||||||
unreadInfo: number[];
|
unreadInfo: number[];
|
||||||
|
menuCollapse: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
let unreadInfoTimer: number | null = null;
|
let unreadInfoTimer: number | null = null;
|
||||||
|
|
||||||
export const useSidebarStore = defineStore('sidebar', {
|
export const useSidebarStore = defineStore('sidebar', {
|
||||||
state: (): sidebarState => ({
|
state: (): sidebarState => ({
|
||||||
activeMenuId: null, //
|
activeMenuKey: null, // 激活的菜单id
|
||||||
menuList: [], // 菜单信息
|
menuList: [], // 菜单信息
|
||||||
unreadInfo: [], // 未读消息
|
unreadInfo: [], // 未读消息
|
||||||
allowAccessRoutes: [], // 允许访问的路由列表
|
allowAccessRoutes: [], // 允许访问的路由列表
|
||||||
|
menuCollapse: false, // 菜单是否折叠
|
||||||
}),
|
}),
|
||||||
actions: {
|
actions: {
|
||||||
clearActiveMenuId() {
|
clearActiveMenuKey() {
|
||||||
this.activeMenuId = null;
|
this.activeMenuKey = null;
|
||||||
},
|
},
|
||||||
setActiveMenuId(id: number) {
|
setActiveMenuKey(key: string | number) {
|
||||||
this.activeMenuId = id;
|
this.activeMenuKey = key;
|
||||||
|
},
|
||||||
|
setMenuCollapse() {
|
||||||
|
this.menuCollapse = !this.menuCollapse;
|
||||||
|
},
|
||||||
|
clearMenuCollapse() {
|
||||||
|
this.menuCollapse = false;
|
||||||
},
|
},
|
||||||
clearUserNavbarMenuList() {
|
clearUserNavbarMenuList() {
|
||||||
this.menuList = [];
|
this.menuList = [];
|
||||||
@ -42,8 +50,8 @@ export const useSidebarStore = defineStore('sidebar', {
|
|||||||
(item) => !item.permissionKey || enterpriseStore.enterpriseInfo?.permissions?.includes(item.permissionKey),
|
(item) => !item.permissionKey || enterpriseStore.enterpriseInfo?.permissions?.includes(item.permissionKey),
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
// 根据当前路由自动设置 activeMenuId
|
// 根据当前路由自动设置 activeMenuKey
|
||||||
setActiveMenuIdByRoute(route: RouteLocationNormalized) {
|
setActiveMenuKeyByRoute(route: RouteLocationNormalized) {
|
||||||
const appRoutes = router.options?.routes ?? [];
|
const appRoutes = router.options?.routes ?? [];
|
||||||
|
|
||||||
const findMenuGroup = (routes: any[]): number | null => {
|
const findMenuGroup = (routes: any[]): number | null => {
|
||||||
@ -68,7 +76,7 @@ export const useSidebarStore = defineStore('sidebar', {
|
|||||||
|
|
||||||
const menuId = findMenuGroup(appRoutes as any);
|
const menuId = findMenuGroup(appRoutes as any);
|
||||||
if (menuId !== null) {
|
if (menuId !== null) {
|
||||||
this.activeMenuId = menuId;
|
this.activeMenuKey = menuId;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async getTaskUnreadInfo() {
|
async getTaskUnreadInfo() {
|
||||||
|
|||||||
@ -52,7 +52,8 @@ export function handleUserLogout() {
|
|||||||
sidebarStore.clearUserNavbarMenuList(); // 清除navbar菜单信息
|
sidebarStore.clearUserNavbarMenuList(); // 清除navbar菜单信息
|
||||||
userStore.clearUserAllowAccessRoutes(); // 清除权限路由列表
|
userStore.clearUserAllowAccessRoutes(); // 清除权限路由列表
|
||||||
sidebarStore.stopUnreadInfoPolling(); // 清除未读消息
|
sidebarStore.stopUnreadInfoPolling(); // 清除未读消息
|
||||||
sidebarStore.clearActiveMenuId(); // 清除active菜单id
|
sidebarStore.clearActiveMenuKey(); // 清除active菜单id
|
||||||
|
sidebarStore.clearMenuCollapse(); // 清除active菜单id
|
||||||
|
|
||||||
goUserLogin();
|
goUserLogin();
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user