mirror of
https://github.com/snowykami/server-status-web.git
synced 2025-06-02 21:25:21 +00:00
✨ 新配色
This commit is contained in:
parent
d3ceff0fee
commit
657a4361ee
2
.env.dev
2
.env.dev
@ -1 +1 @@
|
||||
VITE_API_ROOT=http://127.0.0.1:8088
|
||||
VITE_API_ROOT=https://status.liteyuki.icu
|
||||
@ -4,8 +4,8 @@
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"dev": "vite --mode dev",
|
||||
"build": "vue-tsc -b && vite build --mode prod",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
|
||||
@ -1 +1 @@
|
||||
<svg t="1727834531300" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2344" width="500" height="500"><path d="M512 64C306.4 64 140 230.4 140 436c0 101.6 40.8 194.4 107.2 261.6L512 960l264-263.2c66.4-67.2 107.2-159.2 107.2-261.6C884 230.4 717.6 64 512 64z m128 331.2c-4.8 62.4-54.4 112-116.8 116.8-75.2 6.4-138.4-53.6-138.4-127.2 0-70.4 57.6-128 128-128 73.6 0 133.6 63.2 127.2 138.4z" p-id="2345" fill="#a2d8f4"></path></svg>
|
||||
<svg t="1727943332955" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4336" width="500" height="500"><path d="M731.546 588.952C782.032 501.857 806 432.632 806 384c0-162.372-131.628-294-294-294S218 221.628 218 384c0 48.633 23.968 117.857 74.454 204.952C341.914 674.28 415.131 773.963 512 887.432c96.869-113.469 170.085-213.153 219.546-298.48zM549.64 981.52a50 50 0 0 1-4.727 4.727c-20.788 18.177-52.375 16.06-70.553-4.727C243.453 717.45 128 518.277 128 384 128 171.923 299.923 0 512 0s384 171.923 384 384c0 134.277-115.453 333.45-346.36 597.519zM512 544c88.366 0 160-71.634 160-160s-71.634-160-160-160-160 71.634-160 160 71.634 160 160 160z m0-90c-38.66 0-70-31.34-70-70s31.34-70 70-70 70 31.34 70 70-31.34 70-70 70z" p-id="4337"></path></svg>
|
||||
|
Before Width: | Height: | Size: 470 B After Width: | Height: | Size: 787 B |
1
public/svg/system-arch.svg
Normal file
1
public/svg/system-arch.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1727945382740" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9321" width="500" height="500"><path d="M373.279603 324.241914c36.285052 30.618137 94.83984 62.536026 145.66011 82.450213-43.715629-31.725925-87.219299-67.485078-130.642985-114.288116 36.145079-77.077241 79.304815-183.536856 123.800295-292.208049 72.546109 185.360507 207.760218 464.315093 388.897534 795.28372-49.210577-27.020826-93.79804-42.40588-139.833225-54.293604 15.257079 8.708333 51.320173 28.388564 74.459743 44.207535 36.553001 24.989215 70.382523 52.315983 102.194431 78.482972 28.394563 52.210003 57.137059 105.499799 86.189497 159.729415-144.484334-83.657981-284.891449-151.425005-399.923423-172.356997 37.658789-208.902-109.738987-332.1504-193.482952-199.181861-32.245826 51.196197-40.966156 135.548045-25.675084 198.228044C259.485393 878.301823 117.18464 956.696812 0.20104 1023.608c136.259909-246.906722 274.02353-497.202796 373.078563-699.366086z" p-id="9322"></path></svg>
|
||||
|
After Width: | Height: | Size: 1006 B |
1
public/svg/system-debian.svg
Normal file
1
public/svg/system-debian.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.6 KiB |
1
public/svg/system-linux.svg
Normal file
1
public/svg/system-linux.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1727944988493" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4321" width="500" height="500"><path d="M567.612524 736.945941c-81.946878 38.109618-158.134117 37.725642-209.330917 34.013874-61.052184-4.415724-110.137116-21.11868-131.735766-35.741766a29.086182 29.086182 0 1 0-32.605962 48.15699c34.685832 23.486532 96.057996 40.95744 160.14999 45.565152 10.87932 0.767952 22.782576 1.27992 35.645773 1.27992 55.772514 0 126.616086-5.311668 202.419348-40.573464a29.11818 29.11818 0 0 0-24.542466-52.732704z m323.275795-43.101306c2.783826-252.656209 28.766202-730.162365-454.947565-691.572777C-41.629398 40.701456 84.986688 545.213924 77.883132 714.163365 71.579526 803.533779 41.91738 912.80695 0 1024h129.079933c13.27917-47.133054 23.03856-93.722142 27.230298-138.135367 7.775514 5.43966 16.094994 10.687332 24.990438 15.711019 14.463096 8.511468 26.87832 19.83876 40.029498 31.83801 30.750078 28.030248 65.5959 59.772264 133.719642 63.740016 4.575714 0.255984 9.183426 0.383976 13.663146 0.383976 68.891694 0 115.99275-30.142116 153.878383-54.364602 18.142866-11.615274 33.821886-21.630648 48.572964-26.462346 41.91738-13.11918 78.523092-34.301856 105.881383-61.244173a180.468721 180.468721 0 0 0 11.967252-12.95919c15.231048 55.868508 36.125742 118.744578 59.292294 181.492657H1023.936004c-66.171864-102.23361-134.423599-202.355353-133.047685-330.155365zM124.088244 556.381226v-0.031998c-4.735704-82.458846 34.71783-151.830511 88.122493-154.934316s100.537716 61.212174 105.305418 143.67102v0.031998c0.255984 4.447722 0.351978 8.831448 0.383976 13.215174a206.707081 206.707081 0 0 0-45.885132 17.630898l-0.15999-1.823886v-0.031998c-4.575714-46.813074-29.566152-82.138866-55.83651-78.939066s-43.869258 43.741266-39.293544 90.55434v0.031998c1.983876 20.414724 7.871508 38.621586 16.030998 52.444722-2.047872 1.5999-7.775514 5.823636-14.3991 10.655335l-18.302856 13.43916c-19.870758-26.07837-33.501906-63.580026-35.933755-105.881383z m541.118181 203.827261c-1.887882 43.581276-58.908318 84.570714-111.577027 101.049684l-0.287982 0.095994c-21.886632 7.103556-41.43741 19.614774-62.108118 32.829948-34.71783 22.23861-70.651584 45.213174-122.520343 45.213175-3.391788 0-6.87957-0.095994-10.335354-0.287982-47.51703-2.783826-69.723642-23.03856-97.881882-48.668959-14.847072-13.535154-30.174114-27.51828-49.980876-39.133554l-0.415974-0.255984c-42.71733-24.094494-69.211674-54.07662-70.907568-80.186988-0.831948-12.991188 4.927692-24.222486 17.182926-33.405912 26.622336-19.966752 44.47722-33.021936 56.284482-41.661396 13.11918-9.5994 17.054934-12.47922 19.99875-15.263046 2.111868-1.983876 4.351728-4.191738 6.815574-6.55959 24.446472-23.774514 65.371914-63.548028 128.15199-63.548029 38.3976 0 80.890944 14.783076 126.168115 43.901257 21.310668 13.887132 39.869508 20.286732 63.388038 28.382226 16.15899 5.567652 34.461846 11.903256 58.972314 22.3986l0.383976 0.15999c22.87857 9.407412 49.884882 26.55834 48.668959 54.940566z m-12.607212-102.3936a188.020249 188.020249 0 0 0-13.759141-6.271608 806.765577 806.765577 0 0 0-54.524592-20.990689 133.367665 133.367665 0 0 0 13.631148-57.244422v-0.031998c1.11993-52.380726-25.27842-94.906068-59.004312-94.970064s-61.948128 42.301356-63.068058 94.682082v0.031998l-0.031998 5.11968a293.805637 293.805637 0 0 0-61.148178-20.766702 350.890069 350.890069 0 0 1-0.255984-5.91963v-0.063996c-1.951878-95.418036 56.604462-174.389101 130.743828-176.404975s135.831511 73.691394 137.751391 169.109431v0.063996c0.863946 43.133304-10.655334 82.87482-30.366102 113.656897z" fill="#5D5D5D" p-id="4322"></path></svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
1
public/svg/system-opensuse.svg
Normal file
1
public/svg/system-opensuse.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1727945411894" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10356" width="500" height="500"><path d="M510.72 1.792C229.156571 1.792 0.841143 230.070857 0.841143 511.634286s228.278857 509.878857 509.878857 509.878857c281.563429 0 509.842286-228.278857 509.842286-509.878857S792.283429 1.792 510.72 1.792z m2.450286 70.619429c242.614857 0 439.442286 196.681143 439.442285 439.259428 0 242.614857-196.864 439.259429-439.442285 439.259429-130.998857 0-248.539429-57.417143-329.033143-148.370286 33.097143-25.673143 88.429714-19.419429 156.598857-11.666286 32.658286 3.730286 69.924571 7.972571 108.361143 8.813715 107.410286 0.621714 222.976-18.980571 294.290286-50.139429 46.116571-20.224 75.629714-33.536 94.098285-50.322286 6.656-5.449143 10.130286-14.592 13.714286-24.027428l2.450286-6.4c2.998857-7.643429 7.277714-24.064 9.216-33.060572 0.841143-3.913143 1.28-8.155429-1.499429-10.313143l-9.947428 1.865143c-31.305143 18.761143-109.494857 54.491429-182.710858 55.954286-90.770286 1.901714-273.700571-91.392-292.754285-101.229714l-1.865143-2.267429-37.741714-89.563428c131.657143 86.710857 240.822857 134.692571 324.498285 142.153142 93.037714 8.265143 165.595429-42.532571 196.608-64.219428 6.070857-4.132571 10.678857-7.387429 12.580572-8.082286l2.048-3.401143c-5.156571-32.694857-53.942857-190.902857-90.697143-228.937143-10.203429-10.422857-18.285714-20.553143-34.742857-30.244571-133.010286-77.531429-448.877714-124.233143-463.652572-126.390857l-2.450285 0.768-0.950858 2.048-1.316571 72.850286a1864.155429 1864.155429 0 0 0-92.598857-27.794286c62.829714-77.714286 159.085714-146.688 327.533714-146.688z m116.077714 232.484571a135.643429 135.643429 0 0 1 137.289143 139.885714 134.326857 134.326857 0 0 1-42.825143 93.878857 134.107429 134.107429 0 0 1-96.877714 36.425143 135.899429 135.899429 0 0 1-130.523429-139.885714 133.924571 133.924571 0 0 1 43.008-94.098286 133.376 133.376 0 0 1 89.965714-36.242285z m-3.584 39.789714a93.257143 93.257143 0 0 0-58.221714 25.161143 93.366857 93.366857 0 0 0-29.842286 65.536 94.573714 94.573714 0 0 0 90.88 97.645714c25.234286 0.768 49.152-8.045714 67.584-25.161142a93.842286 93.842286 0 0 0 29.878857-65.718858 94.464 94.464 0 0 0-91.062857-97.462857 96.804571 96.804571 0 0 0-9.216 0z m24.795429 47.140572c23.076571 0 41.691429 12.544 41.691428 27.977143 0 15.36-18.614857 27.977143-41.691428 27.977142-23.149714 0-41.874286-12.653714-41.874286-27.977142 0-15.433143 18.724571-27.977143 41.874286-27.977143z" p-id="10357"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
1
public/svg/system-ubuntu.svg
Normal file
1
public/svg/system-ubuntu.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1727945603402" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11437" width="500" height="500"><path d="M512 0c282.581333 0 512 229.418667 512 512s-229.418667 512-512 512S0 794.581333 0 512 229.418667 0 512 0z m139.904 754.346667a68.352 68.352 0 1 0 68.309333 118.4 68.352 68.352 0 0 0-68.309333-118.4z m-139.904-42.666667a199.04 199.04 0 0 1-84.096-18.56L380.416 778.24c39.68 19.584 84.394667 30.762667 131.584 30.762667a294.826667 294.826667 0 0 0 79.36-10.922667 95.573333 95.573333 0 0 1 46.72-67.712 95.744 95.744 0 0 1 81.92-6.656 295.765333 295.765333 0 0 0 88.32-192.64l-97.493333-1.408A199.637333 199.637333 0 0 1 512 711.68zM312.32 512a199.68 199.68 0 0 1 84.906667-163.413333L347.306667 264.917333a297.344 297.344 0 0 0-122.922667 172.16 94.72 94.72 0 0 1 35.413333 74.24c0 30.037333-13.824 56.277333-35.413333 74.197334a297.386667 297.386667 0 0 0 122.922667 172.117333l49.92-83.84A195.626667 195.626667 0 0 1 312.32 512z m-148.48-68.352a68.352 68.352 0 1 0 0 136.661333 68.352 68.352 0 0 0 0-136.661333zM512 312.32a199.637333 199.637333 0 0 1 198.826667 181.973333l97.493333-1.450666a296.490667 296.490667 0 0 0-88.32-192.682667A95.829333 95.829333 0 0 1 591.36 225.706667 303.957333 303.957333 0 0 0 512 215.04c-47.36 0-91.946667 11.093333-131.584 30.72l47.488 85.12A198.954667 198.954667 0 0 1 512 312.32z m139.904-42.709333a68.394667 68.394667 0 0 0 93.397333-24.96 68.437333 68.437333 0 0 0-118.485333-68.309334 68.266667 68.266667 0 0 0 25.088 93.269334z" fill="" p-id="11438"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
1
public/svg/system-windows.svg
Normal file
1
public/svg/system-windows.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1727945032638" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5297" width="500" height="500"><path d="M426.285714 574.857143v372L36.571429 893.142857v-318.285714h389.714285z m0-424.571429v376.571429H36.571429V204z m561.142857 424.571429v449.142857l-518.285714-71.428571v-377.714286h518.285714z m0-501.714286v453.714286H469.142857V144.571429z" p-id="5298"></path></svg>
|
||||
|
After Width: | Height: | Size: 421 B |
@ -1 +1 @@
|
||||
<svg t="1727839277203" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3434" width="500" height="500"><path d="M91.83 661.86c1.87 34.09 30.28 60.65 64.43 60.22h331.23v91.74H360.74c-13.34 0-24.16 10.82-24.16 24.16s10.82 24.16 24.16 24.16h302.53c13.34 0 24.16-10.82 24.16-24.16s-10.82-24.16-24.16-24.16H536.51v-91.74h331.24c34.14 0.43 62.55-26.13 64.43-60.22v-55.32H91.83v55.32zM867.74 161.86H156.26c-34.93-0.39-63.66 27.41-64.43 62.33v328.43h840.34V224.19c-0.77-34.93-29.5-62.72-64.43-62.33z" fill="#a2d8f4" p-id="3435"></path></svg>
|
||||
<svg t="1727943359403" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6236" width="500" height="500"><path d="M423.844408 284.113794c-39.870006 0-72.156392 31.870406-72.156392 71.05778 0 39.25137 32.275719 71.05778 72.156392 71.05778 39.838008 0 72.124394-31.80641 72.124394-71.05778C495.968802 315.984201 463.693082 284.113794 423.844408 284.113794zM676.237121 624.651434l20.372314-20.062997c22.558872-22.185558 22.558872-58.183758 0-80.369315l-35.25157-34.686266c11.370098-19.433695 20.244321-40.307318 26.494675-62.439545l38.056764 0c31.870406 0 57.746446-25.438728 57.746446-56.807827l0-28.435911c0-31.369099-25.876039-56.871823-57.746446-56.871823l-37.619452 0c-5.941036-21.812242-14.495275-42.621869-25.556055-61.938236l33.875639-33.310334c22.558872-22.249555 22.558872-58.247755 0-80.369315l-20.372314-20.126994c-22.558872-22.185558-59.122377-22.185558-81.617252 0l-33.246338 32.681033c-20.276319-11.626086-42.216556-20.681633-65.40473-26.931986l0-38.184758C495.968802 25.438728 470.124761 0 438.254354 0l-28.841225 0c-31.870406 0-57.714447 25.438728-57.714447 56.807827l0 38.184758c-23.188174 6.250354-45.117744 15.316567-65.436728 26.931986l-33.182341-32.681033c-22.526874-22.185558-59.090378-22.185558-81.617252 0l-20.404313 20.126994c-22.526874 22.121561-22.526874 58.119761 0 80.369315l33.875639 33.310334c-11.028782 19.316367-19.593687 40.125994-25.534723 61.938236l-37.65145 0C89.834441 284.988418 64.022399 310.480476 64.022399 341.86024l0 28.435911c0 31.369099 25.812042 56.807827 57.714447 56.807827l38.088763 0c6.186358 22.121561 15.092578 42.995183 26.441345 62.439545l-35.219572 34.686266c-22.526874 22.185558-22.526874 58.183758 0 80.369315l20.404313 20.062997c22.526874 22.185558 59.090378 22.185558 81.617252 0l35.432895-34.878256c19.689683 10.996783 40.872623 19.625686 63.186174 25.556055l0 36.435511c0 31.369099 25.844041 56.807827 57.714447 56.807827l28.841225 0c31.870406 0 57.714447-25.438728 57.714447-56.807827l0-36.435511c22.34555-5.941036 43.496492-14.559272 63.154175-25.556055l35.496892 34.878256C617.114744 646.847658 653.678249 646.847658 676.237121 624.651434zM423.844408 513.222339c-87.654284 0-158.744063-70.001833-158.744063-156.237521 0-86.374348 71.089779-156.301518 158.744063-156.301518s158.712064 69.937836 158.712064 156.301518C582.556472 443.231171 511.498692 513.222339 423.844408 513.222339zM931.979001 818.519074l-18.249755 0c-2.879856-10.623469-6.996983-20.681633-12.372714-30.057164l16.372514-16.19119c10.996783-10.751462 10.996783-28.19059 0-38.995383l-9.876839-9.748846c-10.932786-10.751462-28.627902-10.751462-39.624686 0l-16.063197 15.871206c-9.812842-5.621052-20.500308-10.058164-31.689083-13.066014l0-18.495075c0-15.25257-12.564705-27.561289-27.9986-27.561289l-14.004633 0c-15.497892 0-27.9986 12.308718-27.9986 27.561289l0 18.495075c-11.25277 2.997183-21.876239 7.434295-31.753079 13.066014l-16.127194-15.871206c-10.879456-10.751462-28.627902-10.751462-39.560689 0l-9.940836 9.748846c-10.879456 10.815459-10.879456 28.243921 0 38.995383l16.436511 16.19119c-5.311734 9.375531-9.439528 19.433695-12.372714 30.057164L638.926987 818.519074c-15.433895 0-27.9986 12.308718-27.9986 27.561289l0 13.748646c0 15.25257 12.564705 27.561289 27.9986 27.561289l18.495075 0c2.997183 10.751462 7.316967 20.873623 12.810026 30.313151l-17.119144 16.809827c-10.879456 10.751462-10.879456 28.19059 0 38.995383l9.940836 9.684849c10.932786 10.815459 28.681233 10.815459 39.560689 0l17.247138-16.873823c9.503525 5.311734 19.753679 9.503525 30.622469 12.372714l0 17.684449c0 15.188574 12.500708 27.561289 27.9986 27.561289l14.004633 0c15.433895 0 27.9986-12.372714 27.9986-27.561289l0-17.684449c10.751462-2.879856 21.065614-7.06098 30.622469-12.372714l17.119144 16.873823c10.996783 10.815459 28.681233 10.815459 39.624686 0l9.876839-9.684849c10.996783-10.815459 10.996783-28.243921 0-38.995383l-17.065814-16.809827c5.503725-9.439528 9.812842-19.561689 12.810026-30.313151l18.495075 0c15.497892 0 27.9986-12.308718 27.9986-27.561289l0-13.748646C959.977601 830.838458 947.476893 818.519074 931.979001 818.519074zM785.490325 929.20154c-42.557872 0-76.998817-33.939636-76.998817-75.80421s34.440945-75.80421 76.998817-75.80421c42.493875 0 76.998817 33.939636 76.998817 75.80421S827.984201 929.20154 785.490325 929.20154zM785.490325 818.081763c-19.369699 0-34.995583 15.433895-34.995583 34.440945 0 19.06038 15.625886 34.440945 34.995583 34.440945 19.316367 0 34.995583-15.369899 34.995583-34.440945C820.485909 833.515657 804.796027 818.081763 785.490325 818.081763z" fill="#272636" p-id="6237"></path></svg>
|
||||
|
Before Width: | Height: | Size: 576 B After Width: | Height: | Size: 4.5 KiB |
@ -1,10 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import Nav from './components/Nav.vue'
|
||||
// import Nav from './components/Nav.vue'
|
||||
console.log('App.vue')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Nav/>
|
||||
<router-view/>
|
||||
</template>
|
||||
|
||||
|
||||
@ -29,7 +29,8 @@ export interface Status {
|
||||
};
|
||||
disks: {
|
||||
[key: string]: {
|
||||
[key: string]: number;
|
||||
used: number;
|
||||
total: number;
|
||||
};
|
||||
};
|
||||
net: {
|
||||
|
||||
52
src/api/utils.ts
Normal file
52
src/api/utils.ts
Normal file
@ -0,0 +1,52 @@
|
||||
export function getLinuxReleaseIcon(name: string, release: string): { name: string, icon: string } {
|
||||
if (name.toLowerCase() == 'windows') {
|
||||
return {name: 'Windows', icon: '/svg/system-windows.svg'}
|
||||
} else {
|
||||
const map: Record<string, { name: string, icon: string }> = {
|
||||
'arch': {name: 'Arch Linux', icon: '/svg/system-archlinux.svg'},
|
||||
'opensuse': {name: 'openSUSE', icon: '/svg/system-opensuse.svg'},
|
||||
'ubuntu': {name: 'Ubuntu', icon: '/svg/system-ubuntu.svg'},
|
||||
'centos': {name: 'CentOS', icon: '/svg/system-centos.svg'},
|
||||
'debian': {name: 'Debian', icon: '/svg/system-debian.svg'},
|
||||
}
|
||||
release = release.toLowerCase()
|
||||
for (const key in map) {
|
||||
if (release.includes(key)) {
|
||||
return map[key]
|
||||
}
|
||||
}
|
||||
return {name: name, icon: '/svg/system-linux.svg'}
|
||||
}
|
||||
}
|
||||
|
||||
export function formatSizeByUnit(bytes: number, unit: string | null = null, suffix: string|null = null): string {
|
||||
// 若指定单位，则格式化为指定单位对应的大小字符串加上单位
|
||||
// 若未指定单位，则选择1-1024之间的最大单位，格式化为该单位对应的大小字符串加上单位
|
||||
if( bytes == 0 ){
|
||||
return '0'
|
||||
}
|
||||
if (unit && bytes < 1024) {
|
||||
return bytes.toFixed(0) + unit
|
||||
}
|
||||
const units = ['', 'K', 'M', 'G', 'T', 'P', 'E']
|
||||
let i = unit ? units.indexOf(unit) : Math.floor(Math.log2(bytes) / 10)
|
||||
return (bytes / Math.pow(1024, i)).toFixed(1) + (suffix ? (units[i] + suffix) : '')
|
||||
}
|
||||
|
||||
export function formatSizeToNumAndUnit(bytes: number): { num: number, unit: string } {
|
||||
const units = ['', 'K', 'M', 'G', 'T', 'P', 'E']
|
||||
let i = Math.floor(Math.log2(bytes) / 10)
|
||||
return {num: (bytes / Math.pow(1024, i)), unit: units[i]}
|
||||
}
|
||||
|
||||
export function format2Size(num1: number, num2: number, suffix: string | null = 'iB'): string {
|
||||
// const n1, unit = formatSizeToNumAndUnit(num1)
|
||||
// const n2 = formatSizeWithUnit(num2, unit)
|
||||
// return `${n1}/${n2}`
|
||||
// const r1 = formatSizeToNumAndUnit(num1)
|
||||
// let n2 = formatSizeWithUnit(num2, r1.unit)
|
||||
// return `${r1.num.toFixed(2)}/${n2}`
|
||||
const r2 = formatSizeToNumAndUnit(num2)
|
||||
const n1 = formatSizeByUnit(num1, r2.unit)
|
||||
return `${n1}/${r2.num.toFixed(1)}${r2.unit}${suffix}`
|
||||
}
|
||||
@ -2,6 +2,7 @@
|
||||
import {Status} from "../api";
|
||||
import {computed, onMounted, ref, watch} from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import {format2Size, formatSizeByUnit, getLinuxReleaseIcon} from "../api/utils.ts";
|
||||
|
||||
const props = defineProps<{
|
||||
status: Status
|
||||
@ -14,36 +15,66 @@ const status = computed(
|
||||
const cpuChartRef = ref(null);
|
||||
const memoryChartRef = ref(null);
|
||||
const swapChartRef = ref(null);
|
||||
const diskChartRef = ref(null);
|
||||
|
||||
onMounted(
|
||||
() => {
|
||||
setOptions()
|
||||
}
|
||||
)
|
||||
// 网络
|
||||
const netChartRef = ref(null);
|
||||
let netStats: [number, number, number][] = []
|
||||
|
||||
function setOptions() {
|
||||
const dotColor = ref('#22c55e')
|
||||
const deltaTime = ref('0')
|
||||
// const isDiskCollapsed = ref(status.value.hardware.disks)
|
||||
// const isDiskOpen = ref(false)
|
||||
const os = computed(() => {
|
||||
return getLinuxReleaseIcon(status.value.meta.os.name, status.value.meta.os.version)
|
||||
})
|
||||
|
||||
const memDetail = computed(() => {
|
||||
return format2Size(status.value.hardware.mem.used, status.value.hardware.mem.total)
|
||||
})
|
||||
|
||||
const swapDetail = computed(() => {
|
||||
return status.value.hardware.swap.total > 0 ? format2Size(status.value.hardware.swap.used, status.value.hardware.swap.total) : 'N/A'
|
||||
})
|
||||
|
||||
|
||||
function onMountedFunc() {
|
||||
const cpuChart = echarts.init(cpuChartRef.value);
|
||||
const memoryChart = echarts.init(memoryChartRef.value);
|
||||
const swapChart = echarts.init(swapChartRef.value);
|
||||
const diskChart = echarts.init(diskChartRef.value);
|
||||
const netChart = echarts.init(netChartRef.value);
|
||||
const titleStyle = {
|
||||
color: 'rgba(0, 0, 0, 0.8)',
|
||||
fontSize: 13,
|
||||
}
|
||||
const radius = ['65%', '90%']
|
||||
|
||||
function setOption() {
|
||||
const hwColor = ['#4c4c4c', '#e3e3e3']
|
||||
const netColor = ['#4c4c4c', '#bababa']
|
||||
|
||||
function update() {
|
||||
const timeDiff = (Date.now()) / 1000 - status.value.meta.observed_at
|
||||
deltaTime.value = timeDiff.toFixed(1)
|
||||
netStats.push([status.value.meta.observed_at, status.value.hardware.net.up, status.value.hardware.net.down])
|
||||
if (netStats.length > 20) {
|
||||
netStats.shift()
|
||||
}
|
||||
|
||||
if (timeDiff > 30) {
|
||||
dotColor.value = '#ff4d4f'
|
||||
}
|
||||
cpuChart.setOption(
|
||||
{
|
||||
color: hwColor,
|
||||
title: {
|
||||
text: 'CPU',
|
||||
text: status.value.hardware.cpu.percent + '%',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.8)',
|
||||
fontSize: 14,
|
||||
}
|
||||
textStyle: titleStyle
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'],
|
||||
radius: radius,
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
@ -59,14 +90,10 @@ function setOptions() {
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
// data: [
|
||||
// {value: status.value.hardware.cpu.percent, name: 'CPU'},
|
||||
// {value: 100 - status.value.hardware.cpu.percent, name: '空闲'}
|
||||
// ]
|
||||
data: computed(
|
||||
() => [
|
||||
{value: status.value.hardware.cpu.percent, name: 'CPU'},
|
||||
{value: 100 - status.value.hardware.cpu.percent, name: '空闲'}
|
||||
{value: status.value.hardware.cpu.percent},
|
||||
{value: 100 - status.value.hardware.cpu.percent}
|
||||
]
|
||||
).value
|
||||
}
|
||||
@ -75,19 +102,17 @@ function setOptions() {
|
||||
)
|
||||
memoryChart.setOption(
|
||||
{
|
||||
color: hwColor,
|
||||
title: {
|
||||
text: 'Memory',
|
||||
text: `${(status.value.hardware.mem.used / status.value.hardware.mem.total * 100).toFixed(1)}%`,
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.8)',
|
||||
fontSize: 14,
|
||||
}
|
||||
textStyle: titleStyle
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'],
|
||||
radius: radius,
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
@ -104,8 +129,8 @@ function setOptions() {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{value: props.status.hardware.mem.used, name: 'Memory'},
|
||||
{value: props.status.hardware.mem.total - props.status.hardware.mem.used, name: '空闲'}
|
||||
{value: status.value.hardware.mem.used},
|
||||
{value: status.value.hardware.mem.total - status.value.hardware.mem.used}
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -113,19 +138,17 @@ function setOptions() {
|
||||
)
|
||||
swapChart.setOption(
|
||||
{
|
||||
color: hwColor,
|
||||
title: {
|
||||
text: 'Swap',
|
||||
text: status.value.hardware.swap.total > 0 ? `${(status.value.hardware.swap.used / status.value.hardware.swap.total * 100).toFixed(1)}%` : 'N/A',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.8)',
|
||||
fontSize: 14,
|
||||
}
|
||||
textStyle: titleStyle,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'],
|
||||
radius: radius,
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
@ -142,69 +165,173 @@ function setOptions() {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{value: props.status.hardware.swap.used, name: 'Swap'},
|
||||
{value: props.status.hardware.swap.total - props.status.hardware.swap.used, name: '空闲'}
|
||||
{value: status.value.hardware.swap.total > 0 ? status.value.hardware.swap.used : 0},
|
||||
{
|
||||
value: status.value.hardware.swap.total > 0 ? status.value.hardware.swap.total - status.value.hardware.swap.used : 100
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
)
|
||||
diskChart.setOption(
|
||||
|
||||
netChart.setOption(
|
||||
{
|
||||
color: netColor,
|
||||
title: {
|
||||
text: 'Disk',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.8)',
|
||||
fontSize: 14,
|
||||
text: 'Network',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '25%',
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: netStats.map(item => item[0])
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: function (value: number) {
|
||||
console.log(value)
|
||||
return formatSizeByUnit(value, null, 'b')
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Up',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: netStats.map(item => item[1])
|
||||
},
|
||||
{
|
||||
name: 'Down',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: netStats.map(item => item[2])
|
||||
}
|
||||
]
|
||||
}
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
setOption()
|
||||
update()
|
||||
watch(
|
||||
() => status.value,
|
||||
() => {
|
||||
setOption()
|
||||
update()
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
onMounted(
|
||||
() => {
|
||||
onMountedFunc()
|
||||
}
|
||||
)
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="host">
|
||||
<div class="meta-1" style="display: flex; justify-content: flex-start">
|
||||
<span>{{ props.status.meta.name }}</span><span>{{ props.status.meta.id }}</span>
|
||||
<div class="meta-1" style="display: flex; justify-content: space-between">
|
||||
<div class="meta1-left" style="display: flex; justify-content: flex-start">
|
||||
<span>{{ props.status.meta.name }}</span>
|
||||
</div>
|
||||
<div class="meta1-right" style="display: flex; justify-content: flex-end; align-items: center">
|
||||
<div style="margin-right: 5px">{{ deltaTime }}s ago</div>
|
||||
<div class="dot" :style="{backgroundColor: dotColor}"
|
||||
style="height: 15px; width: 15px; border-radius: 50%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meta-2" style="display: flex">
|
||||
<div class="section">
|
||||
<img class="icon" :src="os.icon" alt="system">
|
||||
<span>{{ os.name }}</span>
|
||||
</div>
|
||||
<div class="section">
|
||||
<img class="icon" src="/svg/location.svg" alt="system">
|
||||
<span>{{ props.status.meta.location }}</span>
|
||||
</div>
|
||||
<div class="section">
|
||||
<img class="icon" src="/svg/system.svg" alt="system">
|
||||
<span>{{ props.status.meta.os.name }}</span>
|
||||
|
||||
</div>
|
||||
<!-- <div class="labels" style="display: flex; justify-content: flex-start">-->
|
||||
<!-- <span class="label" v-for="label in props.status.meta.labels" :key="label">{{ label }}</span>-->
|
||||
<!-- </div>-->
|
||||
<div class="charts-container" style="display: flex; justify-content: space-between">
|
||||
<div class="cpu-info hw-info">
|
||||
<div class="chart" ref="cpuChartRef"></div>
|
||||
<div class="hw-title">CPU</div>
|
||||
<div class="hw-detail">{{ status.hardware.cpu.cores }}c{{ status.hardware.cpu.logics }}t</div>
|
||||
</div>
|
||||
<div class="memory-info hw-info">
|
||||
<div class="chart" ref="memoryChartRef"></div>
|
||||
<div class="hw-title">Mem</div>
|
||||
<div class="hw-detail">{{ memDetail }}</div>
|
||||
</div>
|
||||
<div class="swap-info hw-info">
|
||||
<div class="chart" ref="swapChartRef"></div>
|
||||
<div class="hw-title">Swap</div>
|
||||
<div class="hw-detail">{{ swapDetail }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="labels" style="display: flex; justify-content: flex-start">
|
||||
<span class="label" v-for="label in props.status.meta.labels" :key="label">{{ label }}</span>
|
||||
</div>
|
||||
<div class="charts-container" style="display: flex">
|
||||
<div class="chart" ref="cpuChartRef"></div>
|
||||
<div class="chart" ref="memoryChartRef"></div>
|
||||
<div class="chart" ref="swapChartRef"></div>
|
||||
<div class="chart" ref="diskChartRef"></div>
|
||||
<div class="net">
|
||||
<div class="net-chart" ref="netChartRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.meta-2 {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.labels {
|
||||
margin-top: 0.5em;
|
||||
|
||||
.label {
|
||||
padding: 2px 5px;
|
||||
border-radius: 5px;
|
||||
margin-right: 10px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.host {
|
||||
padding: 1em;
|
||||
border: 1px solid #ccc;
|
||||
@ -215,24 +342,53 @@ function setOptions() {
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 0.5em;
|
||||
height: 20px;
|
||||
margin-right: 0.3em;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
margin-right: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.label {
|
||||
background-color: #535bf2;
|
||||
padding: 2px 5px;
|
||||
border-radius: 5px;
|
||||
margin-right: 10px;
|
||||
|
||||
.charts-container {
|
||||
margin-top: 0.5rem;
|
||||
|
||||
.hw-info {
|
||||
width: 30%;
|
||||
align-items: center;
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.hw-title {
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.hw-detail {
|
||||
text-align: center;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
.net{
|
||||
margin-top: 0.5rem;
|
||||
.net-title {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.net-detail {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.net-chart{
|
||||
width: 100%;
|
||||
aspect-ratio: 2;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
11
src/components/HostDisks.vue
Normal file
11
src/components/HostDisks.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -30,16 +30,8 @@ onMounted(async () => {
|
||||
<style scoped>
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background-color: #3bb7c3;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
border: 1px solid #3bb7c3;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
@ -1 +1 @@
|
||||
{"root":["./src/main.ts","./src/vite-env.d.ts","./src/api/index.ts","./src/api/node.ts","./src/router/index.ts","./src/app.vue","./src/components/helloworld.vue","./src/components/host.vue","./src/components/nav.vue","./src/views/home.vue","./src/views/test.vue"],"version":"5.6.2"}
|
||||
{"root":["./src/main.ts","./src/vite-env.d.ts","./src/api/index.ts","./src/api/node.ts","./src/api/utils.ts","./src/router/index.ts","./src/app.vue","./src/components/helloworld.vue","./src/components/host.vue","./src/components/hostdisks.vue","./src/components/nav.vue","./src/views/home.vue","./src/views/test.vue"],"version":"5.6.2"}
|
||||
Loading…
x
Reference in New Issue
Block a user