mirror of
https://github.com/labring/sealos.git
synced 2026-09-24 15:46:19 +08:00
feat: implement desktop 5.0 UI design (#4783)
* feat: apps * feat: user menu * feat:account cost component * feat: support search app * add SearchBox * fix * fix account * feat app dock * feat:notification * listNotification * add react-contexify * add docs * fix cost * add workorder link * feat: account * modify animation * fix * fix firefox styles * add Assistant tip * add accountSettingEnabled * fix app name * fix text width * fix bug
This commit is contained in:
jingyang
@@ -37,6 +37,7 @@
|
||||
"clsx": "^1.2.1",
|
||||
"cors": "^2.8.5",
|
||||
"dayjs": "^1.11.10",
|
||||
"decimal.js": "^10.4.3",
|
||||
"eslint": "8.38.0",
|
||||
"eslint-config-next": "13.3.0",
|
||||
"framer-motion": "^10.16.4",
|
||||
@@ -58,6 +59,7 @@
|
||||
"qrcode.react": "^3.1.0",
|
||||
"randexp": "^0.5.3",
|
||||
"react": "18.2.0",
|
||||
"react-contexify": "^6.0.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-draggable": "^4.4.6",
|
||||
"react-hook-form": "^7.46.2",
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none">
|
||||
<path d="M3.90015 4.38881C3.90015 3.80584 4.37273 3.33325 4.9557 3.33325H9.51126C10.0942 3.33325 10.5668 3.80584 10.5668 4.38881V8.94436C10.5668 9.52733 10.0942 9.99992 9.51126 9.99992H4.9557C4.37273 9.99992 3.90015 9.52733 3.90015 8.94436V4.38881Z" fill="url(#paint0_linear_7031_15193)"/>
|
||||
<path d="M13.2334 4.38881C13.2334 3.80584 13.706 3.33325 14.289 3.33325H18.8445C19.4275 3.33325 19.9001 3.80584 19.9001 4.38881V8.94436C19.9001 9.52733 19.4275 9.99992 18.8445 9.99992H14.289C13.706 9.99992 13.2334 9.52733 13.2334 8.94436V4.38881Z" fill="url(#paint1_linear_7031_15193)"/>
|
||||
<path d="M22.5667 4.38881C22.5667 3.80584 23.0392 3.33325 23.6222 3.33325H28.1778C28.7607 3.33325 29.2333 3.80584 29.2333 4.38881V8.94436C29.2333 9.52733 28.7607 9.99992 28.1778 9.99992H23.6222C23.0392 9.99992 22.5667 9.52733 22.5667 8.94436V4.38881Z" fill="url(#paint2_linear_7031_15193)"/>
|
||||
<path d="M3.90015 13.7223C3.90015 13.1393 4.37273 12.6667 4.9557 12.6667H9.51126C10.0942 12.6667 10.5668 13.1393 10.5668 13.7223V18.2779C10.5668 18.8608 10.0942 19.3334 9.51126 19.3334H4.9557C4.37273 19.3334 3.90015 18.8608 3.90015 18.2779V13.7223Z" fill="url(#paint3_linear_7031_15193)"/>
|
||||
<path d="M22.5667 13.7223C22.5667 13.1393 23.0392 12.6667 23.6222 12.6667H28.1778C28.7607 12.6667 29.2333 13.1393 29.2333 13.7223V18.2779C29.2333 18.8608 28.7607 19.3334 28.1778 19.3334H23.6222C23.0392 19.3334 22.5667 18.8608 22.5667 18.2779V13.7223Z" fill="url(#paint4_linear_7031_15193)"/>
|
||||
<path d="M13.2334 13.7223C13.2334 13.1393 13.706 12.6667 14.289 12.6667H18.8445C19.4275 12.6667 19.9001 13.1393 19.9001 13.7223V18.2779C19.9001 18.8608 19.4275 19.3334 18.8445 19.3334H14.289C13.706 19.3334 13.2334 18.8608 13.2334 18.2779V13.7223Z" fill="url(#paint5_linear_7031_15193)"/>
|
||||
<path d="M13.2334 23.0556C13.2334 22.4726 13.706 22 14.289 22H18.8445C19.4275 22 19.9001 22.4726 19.9001 23.0556V27.6111C19.9001 28.1941 19.4275 28.6667 18.8445 28.6667H14.289C13.706 28.6667 13.2334 28.1941 13.2334 27.6111V23.0556Z" fill="url(#paint6_linear_7031_15193)"/>
|
||||
<path d="M3.90015 23.0556C3.90015 22.4726 4.37273 22 4.9557 22H9.51126C10.0942 22 10.5668 22.4726 10.5668 23.0556V27.6111C10.5668 28.1941 10.0942 28.6667 9.51126 28.6667H4.9557C4.37273 28.6667 3.90015 28.1941 3.90015 27.6111V23.0556Z" fill="url(#paint7_linear_7031_15193)"/>
|
||||
<path d="M22.5667 23.0556C22.5667 22.4726 23.0392 22 23.6222 22H28.1778C28.7607 22 29.2333 22.4726 29.2333 23.0556V27.6111C29.2333 28.1941 28.7607 28.6667 28.1778 28.6667H23.6222C23.0392 28.6667 22.5667 28.1941 22.5667 27.6111V23.0556Z" fill="url(#paint8_linear_7031_15193)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_7031_15193" x1="10.5668" y1="3.33325" x2="3.90015" y2="9.99992" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#4AC5FA"/>
|
||||
<stop offset="1" stop-color="#0082B9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_7031_15193" x1="19.9001" y1="3.33325" x2="13.2334" y2="9.99992" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#C8AFF2"/>
|
||||
<stop offset="1" stop-color="#6057C9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_7031_15193" x1="29.2333" y1="3.33325" x2="22.5666" y2="9.99992" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#8DDCBB"/>
|
||||
<stop offset="1" stop-color="#0CA050"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_7031_15193" x1="10.5668" y1="12.6667" x2="3.90015" y2="19.3334" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#E39989"/>
|
||||
<stop offset="1" stop-color="#CC472A"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_7031_15193" x1="29.2333" y1="12.6667" x2="22.5666" y2="19.3334" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#F6A9C0"/>
|
||||
<stop offset="1" stop-color="#CD5369"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear_7031_15193" x1="19.9001" y1="12.6667" x2="13.2334" y2="19.3334" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#AABEDE"/>
|
||||
<stop offset="1" stop-color="#2455A0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear_7031_15193" x1="19.9001" y1="22" x2="13.2334" y2="28.6667" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#D49EDD"/>
|
||||
<stop offset="1" stop-color="#974FC3"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint7_linear_7031_15193" x1="10.5668" y1="22" x2="3.90015" y2="28.6667" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#AEB0E8"/>
|
||||
<stop offset="1" stop-color="#1A5CBF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint8_linear_7031_15193" x1="29.2333" y1="22" x2="22.5667" y2="28.6667" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#86C2C2"/>
|
||||
<stop offset="1" stop-color="#00948B"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.7 KiB |
@@ -1,151 +1,151 @@
|
||||
<svg width="1440" height="792" viewBox="0 0 1440 792" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4590_18373)">
|
||||
<rect width="1440" height="792" fill="url(#paint0_linear_4590_18373)"/>
|
||||
<path d="M1079.62 51.1584C1061.72 42.4798 1063.35 50.0735 1025.92 59.8369V101.603H1511.38C1512.11 69.2388 1513.12 5.59577 1511.38 9.93517C1509.21 15.3594 1500.53 16.4441 1477.75 19.1562C1454.97 21.8682 1409.41 5.05333 1382.29 4.51092C1355.17 3.96851 1317.81 55.4799 1300.39 59.8369C1283.03 64.1761 1274.35 59.8369 1265.67 59.8369C1256.99 59.8369 1252.65 60.3795 1239.09 64.1763C1225.53 67.9732 1214.14 60.9218 1198.41 59.8369C1182.68 58.7521 1164.24 60.3794 1157.19 59.8369C1150.14 59.2945 1129.53 51.1584 1117.05 51.1584C1104.57 51.1584 1097.52 59.8369 1079.62 51.1584Z" fill="url(#paint1_linear_4590_18373)"/>
|
||||
<path d="M33.3119 40.3103C1.85199 37.5984 -58.3557 73.9398 -84.3915 75.567L-156.532 192.186L-48.5923 222.561L1009.11 161.268C1011.1 132.701 1006.72 75.567 973.311 75.567C931.546 75.567 886.525 40.3103 866.999 29.4619C847.472 18.6136 818.182 -36.7119 776.416 -33.4578C757.764 -32.0046 750.613 -27.1111 720.948 -6.81094L719.463 -5.7946C688.545 15.3597 633.762 27.8347 584.945 29.4619C536.128 31.0892 447.172 -2.54013 396.728 -5.7946C346.283 -9.04907 307.772 17.5291 243.225 49.5314C178.678 81.5337 189.526 60.3796 145.591 66.3462C101.656 72.3127 52.1875 41.9374 33.3119 40.3103Z" fill="url(#paint2_linear_4590_18373)"/>
|
||||
<path d="M555.655 49.5316C524.737 36.5137 490.565 56.0405 432.527 73.9401L418.967 124.384L877.847 137.945C899.724 114.078 936.319 62.7663 907.68 48.4466C871.881 30.547 853.981 23.4958 836.081 23.4958C791.604 23.4958 748.211 73.9401 673.9 73.9401C599.59 73.9401 586.572 62.5495 555.655 49.5316Z" fill="url(#paint3_linear_4590_18373)"/>
|
||||
<path d="M370.15 52.7861C294.754 58.2102 232.377 111.909 224.783 111.909V351.113L1220.11 293.617L1207.09 159.099C1208.72 140.114 1211 100.735 1207.09 95.0942C1202.21 88.0428 1168.58 77.1946 1141.46 70.1433C1114.34 63.0919 1074.2 60.9223 1047.62 58.7526C1021.04 56.583 967.893 27.3561 950.53 28.9202C890.322 34.344 882.186 111.909 779.128 111.909C676.07 111.909 637.558 74.4828 580.063 85.331C522.567 96.1792 482.971 92.9248 462.359 85.331C441.748 77.7372 392.36 51.1882 370.15 52.7861Z" fill="url(#paint4_linear_4590_18373)"/>
|
||||
<path d="M104.91 133.605C82.1292 149.878 30.0576 165.065 22.4639 169.404L80.5019 233.409L563.791 416.744L847.472 207.373C743.871 214.424 707.53 207.373 632.677 183.507C596.569 171.995 561.182 155.142 536.128 143.911C520.398 136.86 458.031 119.868 434.154 111.909C429.273 110.281 418.672 107.383 410.288 106.485C401.904 105.587 390.035 106.13 380.814 109.31C369.245 113.3 350.994 117.459 342.487 118.418C303.976 122.757 283.906 114.62 271.973 107.027C262.21 100.814 223.699 94.9617 207.969 97.2635C184.103 100.756 127.692 117.333 104.91 133.605Z" fill="url(#paint5_linear_4590_18373)"/>
|
||||
<path d="M747.477 251.851C693.769 273.548 589.369 368.97 573.443 383.115C557.517 397.259 549.688 420.541 549.688 420.541L747.477 576.213L1460.65 159.099C1461.86 131.074 1463.55 73.0721 1460.65 65.2614C1393 33.8015 1323.29 98.8909 1304.69 96.7213C1278.36 90.7547 1261.31 89.6699 1247.89 89.6699C1234.46 89.6699 1232.14 82.488 1199.34 75.0248C1179.47 70.5027 1160.61 90.7548 1142.54 89.6699C1124.46 88.5851 1085.22 47.3618 1055.26 47.3618C1032.54 47.3618 1005.17 64.719 977.8 89.6699C801.701 225.273 801.184 230.155 747.477 251.851Z" fill="url(#paint6_linear_4590_18373)"/>
|
||||
<path d="M894.815 357.164C857.421 382.221 843.549 397.501 800.908 425.338C845.996 415.192 973.028 381.108 989.557 378.081C1006.09 375.054 1134.14 318.302 1196.1 290.304C1229.49 272.903 1295.88 194.601 1288.71 188.755C1279.75 181.447 1257 188.755 1233.22 197.563C1202.91 208.788 1126.39 226.291 1091.68 238.049C1056.96 249.806 1037.96 279.749 999.006 294.974C960.05 310.2 932.209 332.107 894.815 357.164Z" fill="url(#paint7_linear_4590_18373)"/>
|
||||
<g filter="url(#filter0_f_4590_18373)">
|
||||
<path d="M1127.69 163.304C1124.98 186.311 1123.89 188.229 1117.38 199.732C1123.35 199.732 1137.45 188.228 1142.88 179.121C1148.3 170.014 1156.44 153.717 1171.62 144.61C1186.81 135.502 1213.93 111.057 1226.95 104.346C1239.97 97.6355 1235.2 90.2452 1226.95 88.5286C1217.66 86.594 1210.17 85.754 1202.57 90.6882C1192.68 97.108 1179.22 117.288 1160.23 131.189C1141.25 145.089 1160.23 119.685 1151.55 124.478C1142.88 129.271 1130.4 140.296 1127.69 163.304Z" fill="url(#paint8_linear_4590_18373)"/>
|
||||
<g clip-path="url(#clip0_7506_9781)">
|
||||
<rect width="1440" height="792" fill="url(#paint0_linear_7506_9781)"/>
|
||||
<path d="M1079.62 51.1586C1061.72 42.48 1063.35 50.0738 1025.92 59.8372V101.603H1511.38C1512.11 69.239 1513.12 5.59601 1511.38 9.93541C1509.21 15.3597 1500.53 16.4444 1477.75 19.1564C1454.97 21.8685 1409.41 5.05358 1382.29 4.51117C1355.17 3.96875 1317.81 55.4801 1300.39 59.8372C1283.03 64.1764 1274.35 59.8372 1265.67 59.8372C1256.99 59.8372 1252.65 60.3797 1239.09 64.1766C1225.53 67.9735 1214.14 60.922 1198.41 59.8372C1182.68 58.7524 1164.24 60.3796 1157.19 59.8372C1150.14 59.2948 1129.53 51.1586 1117.05 51.1586C1104.57 51.1586 1097.52 59.8372 1079.62 51.1586Z" fill="url(#paint1_linear_7506_9781)"/>
|
||||
<path d="M33.3119 40.3103C1.85199 37.5984 -58.3557 73.9398 -84.3915 75.567L-156.532 192.186L-48.5923 222.561L1009.11 161.268C1011.1 132.701 1006.72 75.567 973.311 75.567C931.546 75.567 886.525 40.3103 866.999 29.4619C847.472 18.6136 818.182 -36.7119 776.416 -33.4578C757.764 -32.0046 750.613 -27.1111 720.948 -6.81094L719.463 -5.7946C688.545 15.3597 633.762 27.8347 584.945 29.4619C536.128 31.0892 447.172 -2.54013 396.728 -5.7946C346.283 -9.04907 307.772 17.5291 243.225 49.5314C178.678 81.5337 189.526 60.3796 145.591 66.3462C101.656 72.3127 52.1875 41.9374 33.3119 40.3103Z" fill="url(#paint2_linear_7506_9781)"/>
|
||||
<path d="M555.655 49.5319C524.737 36.514 490.565 56.0408 432.527 73.9404L418.967 124.384L877.847 137.945C899.724 114.079 936.319 62.7665 907.68 48.4469C871.881 30.5473 853.981 23.4961 836.081 23.4961C791.604 23.4961 748.211 73.9404 673.9 73.9404C599.59 73.9404 586.572 62.5497 555.655 49.5319Z" fill="url(#paint3_linear_7506_9781)"/>
|
||||
<path d="M370.15 52.7859C294.754 58.21 232.377 111.909 224.783 111.909V351.112L1220.11 293.617L1207.09 159.099C1208.72 140.114 1211 100.735 1207.09 95.0939C1202.21 88.0426 1168.58 77.1944 1141.46 70.143C1114.34 63.0917 1074.2 60.922 1047.62 58.7524C1021.04 56.5827 967.893 27.3558 950.53 28.92C890.322 34.3438 882.186 111.909 779.128 111.909C676.07 111.909 637.558 74.4825 580.063 85.3308C522.567 96.179 482.971 92.9245 462.359 85.3308C441.748 77.737 392.36 51.188 370.15 52.7859Z" fill="url(#paint4_linear_7506_9781)"/>
|
||||
<path d="M104.91 133.605C82.1292 149.878 30.0576 165.065 22.4639 169.405L80.5019 233.409L563.791 416.744L847.472 207.373C743.871 214.425 707.53 207.373 632.677 183.507C596.569 171.995 561.182 155.142 536.128 143.911C520.398 136.86 458.031 119.868 434.154 111.909C429.273 110.282 418.672 107.383 410.288 106.485C401.904 105.587 390.035 106.13 380.814 109.31C369.245 113.3 350.994 117.459 342.487 118.418C303.976 122.757 283.906 114.621 271.973 107.027C262.21 100.814 223.699 94.962 207.969 97.2637C184.103 100.756 127.692 117.333 104.91 133.605Z" fill="url(#paint5_linear_7506_9781)"/>
|
||||
<path d="M747.477 251.851C693.769 273.548 589.369 368.97 573.443 383.115C557.517 397.259 549.688 420.541 549.688 420.541L747.477 576.213L1460.65 159.099C1461.86 131.074 1463.55 73.0721 1460.65 65.2614C1393 33.8015 1323.29 98.8909 1304.69 96.7213C1278.36 90.7547 1261.31 89.6699 1247.89 89.6699C1234.46 89.6699 1232.14 82.488 1199.34 75.0248C1179.47 70.5027 1160.61 90.7548 1142.54 89.6699C1124.46 88.5851 1085.22 47.3618 1055.26 47.3618C1032.54 47.3618 1005.17 64.719 977.8 89.6699C801.701 225.273 801.184 230.155 747.477 251.851Z" fill="url(#paint6_linear_7506_9781)"/>
|
||||
<path d="M894.815 357.164C857.421 382.221 843.549 397.501 800.908 425.338C845.996 415.192 973.028 381.108 989.557 378.081C1006.09 375.054 1134.14 318.302 1196.1 290.304C1229.49 272.903 1295.88 194.601 1288.71 188.755C1279.75 181.447 1257 188.755 1233.22 197.563C1202.91 208.788 1126.39 226.291 1091.68 238.049C1056.96 249.806 1037.96 279.749 999.006 294.974C960.05 310.2 932.209 332.107 894.815 357.164Z" fill="url(#paint7_linear_7506_9781)"/>
|
||||
<g filter="url(#filter0_f_7506_9781)">
|
||||
<path d="M1127.69 163.304C1124.98 186.311 1123.89 188.229 1117.38 199.732C1123.35 199.732 1137.45 188.228 1142.88 179.121C1148.3 170.014 1156.44 153.717 1171.62 144.61C1186.81 135.502 1213.93 111.057 1226.95 104.346C1239.97 97.6355 1235.2 90.2452 1226.95 88.5286C1217.66 86.594 1210.17 85.754 1202.57 90.6882C1192.68 97.108 1179.22 117.288 1160.23 131.189C1141.25 145.089 1160.23 119.685 1151.55 124.478C1142.88 129.271 1130.4 140.296 1127.69 163.304Z" fill="url(#paint8_linear_7506_9781)" fill-opacity="0.05"/>
|
||||
</g>
|
||||
<path d="M680.408 370.098C633.761 399.93 633.218 394.506 613.149 429.763L574.638 414.033C574.638 410.804 569.492 396.321 573.011 386.912C575.599 379.989 583.793 377.743 591.452 370.098C615.64 345.956 680.408 323.45 700.477 291.448C720.546 259.446 748.965 258.291 772.618 244.801C791.693 233.921 841.453 190.424 864.415 182.649C858.268 199.826 830.005 249.031 805.705 268.124C775.33 291.99 727.055 340.265 680.408 370.098Z" fill="url(#paint9_linear_4590_18373)"/>
|
||||
<path d="M-26.3537 128.594C-29.0658 129.074 -45.8806 135.103 -58.8984 145.408V431.259L684.206 610.798L797.57 537.572C786.36 524.373 720.284 487.651 578.823 398.695C401.996 287.501 366.662 258.969 335.866 257.041C293.558 254.392 298.792 264.994 248.89 250.828C210.379 239.896 180.383 233.57 164.268 225.282C148.152 216.995 136.798 214.019 125.522 204.594C16.4964 113.47 -23.6417 128.114 -26.3537 128.594Z" fill="url(#paint10_linear_4590_18373)"/>
|
||||
<path d="M30.0571 305.483C9.44549 285.414 -53.4743 267.514 -62.1529 266.429L-89.2734 390.099L-12.7934 384.133C8.36066 364.606 46.5464 321.538 30.0571 305.483Z" fill="url(#paint11_linear_4590_18373)"/>
|
||||
<path d="M250.276 274.565C227.712 283.678 155.173 293.008 143.421 305.483C158.428 321.936 245.828 381.421 260.582 403.117C279.024 430.238 471.038 522.448 516.058 533.296C552.074 541.974 670.283 557.524 724.886 564.213L805.326 460.661C734.777 437.145 628.074 386.418 546.102 335.478C492.384 302.096 419.087 264.35 387.084 254.044C361.482 245.8 334.564 252.794 329.094 254.044C317.61 256.67 272.84 265.453 250.276 274.565Z" fill="url(#paint12_linear_4590_18373)"/>
|
||||
<g filter="url(#filter1_f_4590_18373)">
|
||||
<path d="M767.737 391.251C746.228 402.939 686.507 447.594 669.561 464.476L739.532 538.787L862.659 472.07C878.736 438.954 1009.46 275.175 1004.77 275.175C998.905 275.175 915.186 300.264 899.543 312.601C883.9 324.938 789.246 379.563 767.737 391.251Z" fill="url(#paint13_linear_4590_18373)"/>
|
||||
<path d="M680.408 370.098C633.761 399.93 633.218 394.506 613.149 429.763L574.638 414.033C574.638 410.804 569.492 396.321 573.011 386.912C575.599 379.989 583.793 377.743 591.452 370.098C615.64 345.956 680.408 323.45 700.477 291.448C720.546 259.446 748.965 258.291 772.618 244.801C791.693 233.921 841.453 190.424 864.415 182.649C858.268 199.826 830.005 249.031 805.705 268.124C775.33 291.99 727.055 340.265 680.408 370.098Z" fill="url(#paint9_linear_7506_9781)" fill-opacity="0.05"/>
|
||||
<path d="M-26.3537 128.594C-29.0658 129.074 -45.8806 135.103 -58.8984 145.408V431.259L684.206 610.798L797.57 537.572C786.36 524.373 720.284 487.651 578.823 398.695C401.996 287.501 366.662 258.969 335.866 257.041C293.558 254.392 298.792 264.994 248.89 250.828C210.379 239.896 180.383 233.57 164.268 225.282C148.152 216.995 136.798 214.019 125.522 204.594C16.4964 113.47 -23.6417 128.114 -26.3537 128.594Z" fill="url(#paint10_linear_7506_9781)"/>
|
||||
<path d="M30.0571 305.483C9.44549 285.414 -53.4743 267.514 -62.1529 266.429L-89.2734 390.099L-12.7934 384.133C8.36066 364.606 46.5464 321.538 30.0571 305.483Z" fill="url(#paint11_linear_7506_9781)"/>
|
||||
<path d="M250.276 274.565C227.712 283.678 155.173 293.008 143.421 305.483C158.428 321.936 245.828 381.421 260.582 403.117C279.024 430.238 471.038 522.448 516.058 533.296C552.074 541.974 670.283 557.524 724.886 564.213L805.326 460.661C734.777 437.145 628.074 386.418 546.102 335.478C492.384 302.096 419.087 264.35 387.084 254.044C361.482 245.8 334.564 252.794 329.094 254.044C317.61 256.67 272.84 265.453 250.276 274.565Z" fill="url(#paint12_linear_7506_9781)"/>
|
||||
<g filter="url(#filter1_f_7506_9781)">
|
||||
<path d="M767.737 391.251C746.228 402.939 686.507 447.594 669.561 464.476L739.532 538.787L862.659 472.07C878.736 438.954 1009.46 275.175 1004.77 275.175C998.905 275.175 915.186 300.264 899.543 312.601C883.9 324.938 789.246 379.563 767.737 391.251Z" fill="url(#paint13_linear_7506_9781)" fill-opacity="0.4"/>
|
||||
</g>
|
||||
<path d="M847.891 373.477C808.837 394.064 692.019 550.919 640.49 574.584L721.632 815.468H1515.18C1515.72 578.636 1516.48 105.421 1515.18 107.224C1459.25 125.013 1439.79 130.325 1398.56 142.721C1357.34 155.116 1299.91 156.768 1242.38 174.755C1186.51 192.221 1124.94 245.933 1095.77 262.99C1013.81 310.921 983.494 301.996 847.891 373.477Z" fill="url(#paint14_linear_4590_18373)"/>
|
||||
<g filter="url(#filter2_f_4590_18373)">
|
||||
<path d="M1404.96 226.875C1442.48 183.937 1428.21 179.999 1455.26 151.077C1463.54 144.444 1483.32 129.931 1496.17 124.952C1509.02 119.972 1526.37 119.369 1533.43 119.69C1533.31 136.981 1532.53 173.353 1530.34 180.516C1527.6 189.47 1491.23 205.225 1474.71 219.591C1458.2 233.958 1425.6 250.175 1410.14 255.928C1394.68 261.68 1365.6 284.887 1364.38 281.459C1363.16 278.03 1367.45 269.813 1404.96 226.875Z" fill="url(#paint15_linear_4590_18373)"/>
|
||||
<path d="M847.891 373.477C808.837 394.064 692.019 550.919 640.49 574.584L721.632 815.468H1515.18C1515.72 578.636 1516.48 105.421 1515.18 107.224C1459.25 125.013 1439.79 130.325 1398.56 142.721C1357.34 155.116 1299.91 156.768 1242.38 174.755C1186.51 192.221 1124.94 245.933 1095.77 262.99C1013.81 310.921 983.494 301.996 847.891 373.477Z" fill="url(#paint14_linear_7506_9781)"/>
|
||||
<g filter="url(#filter2_f_7506_9781)">
|
||||
<path d="M1404.96 226.875C1442.48 183.937 1428.21 179.998 1455.26 151.077C1463.54 144.443 1483.32 129.931 1496.17 124.951C1509.02 119.972 1526.37 119.369 1533.43 119.69C1533.31 136.98 1532.53 173.353 1530.34 180.516C1527.6 189.47 1491.23 205.225 1474.71 219.591C1458.2 233.957 1425.6 250.175 1410.14 255.928C1394.68 261.68 1365.6 284.887 1364.38 281.458C1363.16 278.03 1367.45 269.813 1404.96 226.875Z" fill="url(#paint15_linear_7506_9781)"/>
|
||||
</g>
|
||||
<g filter="url(#filter3_f_4590_18373)">
|
||||
<g filter="url(#filter3_f_7506_9781)">
|
||||
<path d="M1238.9 440.903C1226.34 449.164 1214.23 473.03 1201.67 498.273L1222.3 511.124L1368.53 390.417C1379.6 367.009 1400.92 320.195 1397.69 320.195C1393.65 320.195 1367.64 329.374 1356.87 338.095C1346.1 346.815 1341.62 358.289 1326.82 366.55C1312.01 374.812 1284.65 393.17 1272.99 405.103C1261.33 417.036 1251.46 432.641 1238.9 440.903Z" fill="#234682"/>
|
||||
</g>
|
||||
<path d="M80.502 282.593C21.9216 288.017 -2.48692 331.952 -61.0674 365.039V795.714H769.365C771.173 729.178 836.817 572 832.478 567.661C799.391 564.948 755.477 539.357 707.745 521.891C666.915 506.95 455.833 491.276 335.418 392.488C223.681 300.821 139.083 277.169 80.502 282.593Z" fill="url(#paint16_linear_4590_18373)"/>
|
||||
<g filter="url(#filter4_f_4590_18373)">
|
||||
<path d="M80.502 282.593C21.9216 288.017 -2.48692 331.952 -61.0674 365.039V795.714H769.365C771.173 729.178 836.817 572 832.478 567.661C799.391 564.948 755.477 539.357 707.745 521.891C666.915 506.95 455.833 491.276 335.418 392.488C223.681 300.821 139.083 277.169 80.502 282.593Z" fill="url(#paint16_linear_7506_9781)"/>
|
||||
<g filter="url(#filter4_f_7506_9781)">
|
||||
<path d="M692.651 646.234C679.189 655.481 666.208 682.195 652.746 710.45L674.862 724.834L831.598 589.724C843.457 563.524 866.311 511.124 862.849 511.124C858.522 511.124 830.636 521.399 819.097 531.159C807.559 540.92 802.751 553.763 786.885 563.01C771.019 572.257 741.691 592.807 729.191 606.163C716.69 619.52 706.113 636.987 692.651 646.234Z" fill="#1E3776" fill-opacity="0.3"/>
|
||||
</g>
|
||||
<path d="M727.511 598.983C687.41 650.238 583.575 757.565 536.67 804.821L1141.2 800.05C1139.19 733.028 1328.1 428.784 1323.75 418.424C1318.31 405.474 1134.32 481.863 1122.31 511.457C1113.98 531.972 1058.51 484.335 1042.83 474.365C1029.86 466.12 1006.15 459.271 990.589 454.346C975.03 449.421 961.701 447.243 929.592 454.347C878.602 465.627 777.637 534.915 727.511 598.983Z" fill="url(#paint17_linear_4590_18373)"/>
|
||||
<path d="M1057.93 600.823C1030.16 647.682 908.945 751.989 851.811 798.285L846.93 801.908H851.811H1505.96V215.561C1483.18 239.715 1476.13 239.715 1440.87 255.415C1405.61 271.116 1381.75 255.415 1322.62 329.086C1263.5 402.757 1200.58 437.781 1155.02 472.805C1109.46 507.828 1092.64 542.248 1057.93 600.823Z" fill="url(#paint18_linear_4590_18373)"/>
|
||||
<path d="M-13.8783 601.64C-30.8015 586.452 -50.9431 581.932 -58.8984 581.571V794.738C149.207 795.281 565.417 796.04 565.417 794.738C558.366 789.857 556.196 784.433 527.449 779.551C498.701 774.669 436.323 742.667 405.406 722.598C374.488 702.528 365.267 701.444 329.468 690.595C293.669 679.747 251.361 637.439 197.12 637.439C142.879 637.439 143.964 644.49 115.216 637.439C86.4679 630.388 7.27578 620.624 -13.8783 601.64Z" fill="url(#paint19_linear_4590_18373)"/>
|
||||
<path d="M727.511 598.983C687.41 650.238 583.575 757.565 536.67 804.821L1141.2 800.05C1139.19 733.028 1328.1 428.784 1323.75 418.424C1318.31 405.474 1134.32 481.863 1122.31 511.457C1113.98 531.972 1058.51 484.335 1042.83 474.365C1029.86 466.12 1006.15 459.271 990.589 454.346C975.03 449.421 961.701 447.243 929.592 454.347C878.602 465.627 777.637 534.915 727.511 598.983Z" fill="url(#paint17_linear_7506_9781)"/>
|
||||
<path d="M1057.93 600.823C1030.16 647.682 908.945 751.989 851.811 798.285L846.93 801.908H851.811H1505.96V215.561C1483.18 239.715 1476.13 239.715 1440.87 255.415C1405.61 271.116 1381.75 255.415 1322.62 329.086C1263.5 402.757 1200.58 437.781 1155.02 472.805C1109.46 507.828 1092.64 542.248 1057.93 600.823Z" fill="url(#paint18_linear_7506_9781)"/>
|
||||
<path d="M-13.8783 601.64C-30.8015 586.452 -50.9431 581.932 -58.8984 581.571V794.738C149.207 795.281 565.417 796.04 565.417 794.738C558.366 789.857 556.196 784.433 527.449 779.551C498.701 774.669 436.323 742.667 405.406 722.598C374.488 702.528 365.267 701.444 329.468 690.595C293.669 679.747 251.361 637.439 197.12 637.439C142.879 637.439 143.964 644.49 115.216 637.439C86.4679 630.388 7.27578 620.624 -13.8783 601.64Z" fill="url(#paint19_linear_7506_9781)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_f_4590_18373" x="1113.38" y="83.0083" width="125.64" height="120.724" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<filter id="filter0_f_7506_9781" x="1113.38" y="83.0083" width="125.64" height="120.724" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_4590_18373"/>
|
||||
<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_7506_9781"/>
|
||||
</filter>
|
||||
<filter id="filter1_f_4590_18373" x="553.561" y="159.175" width="567.334" height="495.612" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<filter id="filter1_f_7506_9781" x="553.561" y="159.175" width="567.334" height="495.612" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="58" result="effect1_foregroundBlur_4590_18373"/>
|
||||
<feGaussianBlur stdDeviation="58" result="effect1_foregroundBlur_7506_9781"/>
|
||||
</filter>
|
||||
<filter id="filter2_f_4590_18373" x="1352.2" y="107.619" width="193.228" height="186.184" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<filter id="filter2_f_7506_9781" x="1352.2" y="107.619" width="193.228" height="186.184" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur_4590_18373"/>
|
||||
<feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur_7506_9781"/>
|
||||
</filter>
|
||||
<filter id="filter3_f_4590_18373" x="1161.67" y="280.195" width="276.353" height="270.929" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<filter id="filter3_f_7506_9781" x="1161.67" y="280.195" width="276.353" height="270.929" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_4590_18373"/>
|
||||
<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_7506_9781"/>
|
||||
</filter>
|
||||
<filter id="filter4_f_4590_18373" x="612.746" y="471.124" width="290.456" height="293.71" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<filter id="filter4_f_7506_9781" x="612.746" y="471.124" width="290.456" height="293.71" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_4590_18373"/>
|
||||
<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_7506_9781"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_4590_18373" x1="0" y1="0" x2="1471.5" y2="178.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A9CBE6"/>
|
||||
<stop offset="1" stop-color="#A6CBE5"/>
|
||||
<linearGradient id="paint0_linear_7506_9781" x1="0" y1="0" x2="1471.5" y2="178.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A0CCEE"/>
|
||||
<stop offset="1" stop-color="#9DCCEE"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_4590_18373" x1="1502.7" y1="25.1225" x2="1195.16" y2="101.06" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9CC5E3"/>
|
||||
<stop offset="1" stop-color="#9CC5E4"/>
|
||||
<linearGradient id="paint1_linear_7506_9781" x1="1502.7" y1="25.1228" x2="1195.16" y2="101.06" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#91C5EC"/>
|
||||
<stop offset="1" stop-color="#92C5EC"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_4590_18373" x1="790.519" y1="-6.87936" x2="-107.173" y2="153.132" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#A3C9E4"/>
|
||||
<stop offset="1" stop-color="#A1C7E3"/>
|
||||
<linearGradient id="paint2_linear_7506_9781" x1="790.519" y1="-6.87936" x2="-107.173" y2="153.132" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#97CAEC"/>
|
||||
<stop offset="1" stop-color="#95C9EC"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_4590_18373" x1="541.552" y1="137.945" x2="760.144" y2="20.7838" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#95BFD8"/>
|
||||
<stop offset="1" stop-color="#9AC5E2"/>
|
||||
<linearGradient id="paint3_linear_7506_9781" x1="541.552" y1="137.945" x2="760.144" y2="20.784" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#8CC6EB"/>
|
||||
<stop offset="1" stop-color="#8AC5EA"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_4590_18373" x1="605.065" y1="8.17084" x2="722.446" y2="351.113" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#8FBED6"/>
|
||||
<stop offset="0.657875" stop-color="#8FBBD4"/>
|
||||
<stop offset="1" stop-color="#8DBAD3"/>
|
||||
<linearGradient id="paint4_linear_7506_9781" x1="605.065" y1="8.17059" x2="722.446" y2="351.112" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#79C1E2"/>
|
||||
<stop offset="0.657875" stop-color="#7ABEE1"/>
|
||||
<stop offset="1" stop-color="#71B7DC"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear_4590_18373" x1="497.074" y1="-35.0845" x2="548.603" y2="416.744" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#669BBA"/>
|
||||
<stop offset="0.401042" stop-color="#629AB8"/>
|
||||
<stop offset="0.973958" stop-color="#5E93B6"/>
|
||||
<linearGradient id="paint5_linear_7506_9781" x1="497.074" y1="-35.0843" x2="548.603" y2="416.745" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#49A3D3"/>
|
||||
<stop offset="0.401042" stop-color="#4394BF"/>
|
||||
<stop offset="0.973958" stop-color="#4493C1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear_4590_18373" x1="1045.97" y1="-15.5579" x2="1180.5" y2="430.05" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#4F85AE"/>
|
||||
<stop offset="0.34375" stop-color="#4D84AC"/>
|
||||
<stop offset="0.619792" stop-color="#4679A6"/>
|
||||
<stop offset="1" stop-color="#356699"/>
|
||||
<linearGradient id="paint6_linear_7506_9781" x1="977.5" y1="46.9999" x2="1178.82" y2="428.307" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#327FB4"/>
|
||||
<stop offset="0.34375" stop-color="#3882B8"/>
|
||||
<stop offset="0.619792" stop-color="#3980B3"/>
|
||||
<stop offset="1" stop-color="#2A6AB5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint7_linear_4590_18373" x1="1075.1" y1="201.482" x2="1047" y2="437.684" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#3A6B9E"/>
|
||||
<stop offset="1" stop-color="#37689D"/>
|
||||
<linearGradient id="paint7_linear_7506_9781" x1="1075.1" y1="201.482" x2="1047" y2="437.684" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#296CAD"/>
|
||||
<stop offset="1" stop-color="#2269AD"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint8_linear_4590_18373" x1="1132.57" y1="199.732" x2="1191.34" y2="86.0137" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#5184AB"/>
|
||||
<stop offset="1" stop-color="#4E83A9"/>
|
||||
<linearGradient id="paint8_linear_7506_9781" x1="1132.57" y1="199.732" x2="1191.34" y2="86.0137" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.6"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint9_linear_4590_18373" x1="850.797" y1="193.486" x2="646.621" y2="378.154" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#4E85AD"/>
|
||||
<stop offset="1" stop-color="#4B80AA"/>
|
||||
<linearGradient id="paint9_linear_7506_9781" x1="689.5" y1="289" x2="689.5" y2="387.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.2"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0.7"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint10_linear_4590_18373" x1="8.90325" y1="128.114" x2="36.0238" y2="610.861" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#4678A6"/>
|
||||
<stop offset="0.505208" stop-color="#4376A4"/>
|
||||
<stop offset="1" stop-color="#4274A3"/>
|
||||
<linearGradient id="paint10_linear_7506_9781" x1="8.90325" y1="128.114" x2="36.0238" y2="610.861" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#3077B1"/>
|
||||
<stop offset="0.505208" stop-color="#2E75B1"/>
|
||||
<stop offset="1" stop-color="#2167A2"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint11_linear_4590_18373" x1="-27.5974" y1="266.429" x2="-27.5974" y2="390.099" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#37699E"/>
|
||||
<stop offset="1" stop-color="#35669A"/>
|
||||
<linearGradient id="paint11_linear_7506_9781" x1="-27.5974" y1="266.429" x2="-27.5974" y2="390.099" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#28619E"/>
|
||||
<stop offset="1" stop-color="#2662A0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint12_linear_4590_18373" x1="225.325" y1="264.802" x2="209.053" y2="493.157" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#386A9E"/>
|
||||
<stop offset="1" stop-color="#254D8B"/>
|
||||
<linearGradient id="paint12_linear_7506_9781" x1="225.325" y1="264.802" x2="209.053" y2="493.157" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#2269AD"/>
|
||||
<stop offset="1" stop-color="#1B529C"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint13_linear_4590_18373" x1="837.166" y1="511.666" x2="911.476" y2="266.496" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#3064A2"/>
|
||||
<stop offset="1" stop-color="#2E619C"/>
|
||||
<linearGradient id="paint13_linear_7506_9781" x1="837.166" y1="511.666" x2="911.476" y2="266.496" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#4173B0"/>
|
||||
<stop offset="1" stop-color="#3E78BB"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint14_linear_4590_18373" x1="1214.14" y1="106.66" x2="1070.49" y2="911.118" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#29528F"/>
|
||||
<stop offset="0.4375" stop-color="#224183"/>
|
||||
<stop offset="1" stop-color="#1F3A7E"/>
|
||||
<linearGradient id="paint14_linear_7506_9781" x1="1214.14" y1="106.66" x2="1070.49" y2="911.118" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#174D98"/>
|
||||
<stop offset="0.4375" stop-color="#103C89"/>
|
||||
<stop offset="1" stop-color="#143B84"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint15_linear_4590_18373" x1="1431.99" y1="259.414" x2="1493.29" y2="128.15" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#234E94"/>
|
||||
<stop offset="1" stop-color="#245196"/>
|
||||
<linearGradient id="paint15_linear_7506_9781" x1="1431.99" y1="259.414" x2="1493.29" y2="128.15" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#204E99"/>
|
||||
<stop offset="1" stop-color="#2C5AA1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint16_linear_4590_18373" x1="92.4351" y1="282.159" x2="234.547" y2="795.281" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#1F4384"/>
|
||||
<stop offset="1" stop-color="#1D2761"/>
|
||||
<linearGradient id="paint16_linear_7506_9781" x1="92.4351" y1="282.159" x2="234.547" y2="795.281" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#154089"/>
|
||||
<stop offset="1" stop-color="#112572"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint17_linear_4590_18373" x1="1014.98" y1="425.609" x2="542.202" y2="749.104" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#1D2F6E"/>
|
||||
<stop offset="1" stop-color="#162052"/>
|
||||
<linearGradient id="paint17_linear_7506_9781" x1="1014.98" y1="425.609" x2="542.202" y2="749.104" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#112979"/>
|
||||
<stop offset="1" stop-color="#0C1A60"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint18_linear_4590_18373" x1="1017.79" y1="885.24" x2="1403.34" y2="250.418" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#17245D"/>
|
||||
<stop offset="1" stop-color="#1E3678"/>
|
||||
<linearGradient id="paint18_linear_7506_9781" x1="1017.79" y1="885.24" x2="1403.34" y2="250.418" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#08195D"/>
|
||||
<stop offset="1" stop-color="#13347C"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint19_linear_4590_18373" x1="490.022" y1="795.281" x2="-24.1841" y2="581.571" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#1A255A"/>
|
||||
<stop offset="1" stop-color="#1A265A"/>
|
||||
<linearGradient id="paint19_linear_7506_9781" x1="490.022" y1="795.281" x2="-24.1841" y2="581.571" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0F236E"/>
|
||||
<stop offset="1" stop-color="#0A1763"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_4590_18373">
|
||||
<clipPath id="clip0_7506_9781">
|
||||
<rect width="1440" height="792" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
|
||||
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M10 12.5C7.35827 12.5 5.009 13.7755 3.51333 15.7549C3.19142 16.181 3.03047 16.394 3.03573 16.6819C3.0398 16.9043 3.17947 17.1849 3.35447 17.3222C3.58099 17.5 3.89489 17.5 4.52269 17.5H15.4773C16.1051 17.5 16.419 17.5 16.6455 17.3222C16.8205 17.1849 16.9602 16.9043 16.9643 16.6819C16.9695 16.394 16.8086 16.181 16.4867 15.7549C14.991 13.7755 12.6417 12.5 10 12.5Z" fill="#219BF4"/>
|
||||
<path d="M10 9.99996C12.0711 9.99996 13.75 8.32103 13.75 6.24996C13.75 4.17889 12.0711 2.49996 10 2.49996C7.92893 2.49996 6.25 4.17889 6.25 6.24996C6.25 8.32103 7.92893 9.99996 10 9.99996Z" fill="#219BF4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.33329C8.38917 3.33329 7.08333 4.63913 7.08333 6.24996C7.08333 7.86079 8.38917 9.16662 10 9.16662C11.6108 9.16662 12.9167 7.86079 12.9167 6.24996C12.9167 4.63913 11.6108 3.33329 10 3.33329ZM5.41667 6.24996C5.41667 3.71865 7.46869 1.66663 10 1.66663C12.5313 1.66663 14.5833 3.71865 14.5833 6.24996C14.5833 8.78126 12.5313 10.8333 10 10.8333C7.46869 10.8333 5.41667 8.78126 5.41667 6.24996ZM10 13.3333C7.63414 13.3333 5.5254 14.4744 4.1782 16.2573C4.09579 16.3664 4.03271 16.45 3.98025 16.5234C3.94042 16.5792 3.91323 16.6201 3.89431 16.6511C4.01816 16.6653 4.19464 16.6666 4.52269 16.6666H15.4773C15.8054 16.6666 15.9818 16.6653 16.1057 16.6511C16.0868 16.6201 16.0596 16.5792 16.0197 16.5234C15.9673 16.45 15.9042 16.3664 15.8218 16.2573C14.4746 14.4744 12.3659 13.3333 10 13.3333ZM2.84845 15.2526C4.49259 13.0766 7.0824 11.6666 10 11.6666C12.9176 11.6666 15.5074 13.0766 17.1515 15.2526C17.159 15.2624 17.1664 15.2723 17.1739 15.2822C17.3153 15.4691 17.4669 15.6696 17.5752 15.8629C17.7063 16.097 17.8035 16.3678 17.7975 16.6971C17.7926 16.9618 17.7124 17.2096 17.615 17.4053C17.5176 17.6009 17.3683 17.8143 17.16 17.9778C16.8822 18.1958 16.5798 18.2729 16.3111 18.3051C16.0754 18.3334 15.7961 18.3334 15.5153 18.3333C15.5026 18.3333 15.49 18.3333 15.4773 18.3333H4.52269C4.51003 18.3333 4.49737 18.3333 4.48472 18.3333C4.20389 18.3334 3.92457 18.3334 3.68887 18.3051C3.42021 18.2729 3.11779 18.1958 2.84002 17.9778C2.63173 17.8143 2.48237 17.6009 2.38498 17.4053C2.28758 17.2096 2.20738 16.9618 2.20254 16.6971C2.19651 16.3678 2.29369 16.097 2.4248 15.8629C2.53312 15.6696 2.68469 15.4691 2.82606 15.2822C2.83355 15.2723 2.84102 15.2624 2.84845 15.2526Z" fill="#219BF4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
@@ -84,7 +84,7 @@
|
||||
"Added": "Added",
|
||||
"Invaild Context": "You need switch to other workspace for handling",
|
||||
"Remove Member Tips": "Determine that you want to remove the member?",
|
||||
"Quit Workspace Tips":"Confirm leaving workspace?",
|
||||
"Quit Workspace Tips": "Confirm leaving workspace?",
|
||||
"Invalid User ID": "Invalid User ID",
|
||||
"The invited user must be others": "The invited user must be others",
|
||||
"Dissovle Tips": "Deleting the workspace will clear all resources. Are you sure you want to disband",
|
||||
@@ -131,5 +131,26 @@
|
||||
"Year": "Year",
|
||||
"Core": "Core",
|
||||
"Yuan": "Yuan",
|
||||
"Description": "Description"
|
||||
}
|
||||
"Description": "Description",
|
||||
"All Apps": "All Apps",
|
||||
"Account Settings": "Account Settings",
|
||||
"Alerts": "Alerts",
|
||||
"Monitor": "Monitor",
|
||||
"Used Resources": "Used Resources",
|
||||
"Memory": "Memory",
|
||||
"Storage": "Storage",
|
||||
"Flow": "Flow",
|
||||
"Healthy Pod": "Healthy Pod: {{count}}",
|
||||
"Alarm Pod": "Alarm Pod: {{count}}",
|
||||
"Expected used": "Expected used",
|
||||
"Used last month": "Used last month",
|
||||
"Expected to use next month": "Expected to use next month",
|
||||
"Day": "Day",
|
||||
"Search Apps": "Search Apps",
|
||||
"No Apps Found": "No Apps Found",
|
||||
"Switching Disc": "Switching Disc",
|
||||
"Toggle App Bar": "Toggle App Bar",
|
||||
"Work Order": "Work Order",
|
||||
"Under active development": "Under active development 🚧",
|
||||
"Sealos Copilot": "Sealos Copilot"
|
||||
}
|
||||
@@ -10,7 +10,7 @@
|
||||
"Password": "密码",
|
||||
"Log In": "登录",
|
||||
"Loading": "加载中",
|
||||
"Log Out": "退出账号",
|
||||
"Log Out": "登出",
|
||||
"From": "来自",
|
||||
"Balance": "余额",
|
||||
"verify code tips": "6位验证码",
|
||||
@@ -78,7 +78,7 @@
|
||||
"Added": "已加入",
|
||||
"Invaild Context": "你需要切换到其他工作空间操作",
|
||||
"Remove Member Tips": "确认要移除该成员?",
|
||||
"Quit Workspace Tips":"确认要退出工作空间吗?",
|
||||
"Quit Workspace Tips": "确认要退出工作空间吗?",
|
||||
"Invalid User ID": "用户的 ID 不合法",
|
||||
"The invited user must be others": "只能邀请其他人",
|
||||
"Dissovle Tips": "删除工作空间会清空所有资源，确定要删除吗？",
|
||||
@@ -124,5 +124,26 @@
|
||||
"Year": "年",
|
||||
"Core": "核",
|
||||
"Yuan": "元",
|
||||
"Description": "描述"
|
||||
}
|
||||
"Description": "描述",
|
||||
"All Apps": "所有应用",
|
||||
"Account Settings": "账户设置",
|
||||
"Alerts": "告警",
|
||||
"Monitor": "监控",
|
||||
"Used Resources": "已用资源",
|
||||
"Memory": "内存",
|
||||
"Storage": "存储",
|
||||
"Flow": "流量",
|
||||
"Healthy Pod": "健康 Pod: {{count}}",
|
||||
"Alarm Pod": "告警 Pod: {{count}}",
|
||||
"Expected used": "预计还能使用",
|
||||
"Used last month": "上月已使用",
|
||||
"Expected to use next month": "下月预计使用",
|
||||
"Day": "天",
|
||||
"Search Apps": "搜索应用",
|
||||
"No Apps Found": "未找到任何应用",
|
||||
"Switching Disc": "切换圆盘",
|
||||
"Toggle App Bar": "切换应用栏",
|
||||
"Work Order": "工单",
|
||||
"Under active development": "正在积极开发中 🚧",
|
||||
"Sealos Copilot": "Sealos 小助理"
|
||||
}
|
||||
@@ -78,3 +78,26 @@ export const getWechatResult = (payload: { code: string }) =>
|
||||
export const getGlobalNotification = () => {
|
||||
return request.get<any, ApiResp<NotificationItem>>('/api/notification/global');
|
||||
};
|
||||
|
||||
export const getResource = () => {
|
||||
return request.get<
|
||||
any,
|
||||
ApiResp<{
|
||||
totalCpu: string;
|
||||
totalMemory: string;
|
||||
totalStorage: string;
|
||||
runningPodCount: string;
|
||||
totalPodCount: string;
|
||||
}>
|
||||
>('/api/desktop/getResource');
|
||||
};
|
||||
|
||||
export const getUserBilling = () => {
|
||||
return request.post<
|
||||
any,
|
||||
ApiResp<{
|
||||
prevMonthTime: number;
|
||||
prevDayTime: number;
|
||||
}>
|
||||
>('/api/desktop/getBilling');
|
||||
};
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
.contexify {
|
||||
background: rgba(239, 239, 242, 0.7);
|
||||
backdrop-filter: blur(80px) saturate(150%);
|
||||
color: #111824;
|
||||
padding: 6px;
|
||||
font-size: 12px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 46%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
width: 16px;
|
||||
height: 9px;
|
||||
background: rgba(239, 239, 242, 0.7);
|
||||
backdrop-filter: blur(80px) saturate(150%);
|
||||
clip-path: polygon(50% 100%, 0 0, 100% 0);
|
||||
}
|
||||
@@ -0,0 +1,223 @@
|
||||
import { MoreAppsContext } from '@/pages/index';
|
||||
import useAppStore, { AppInfo } from '@/stores/app';
|
||||
import { useConfigStore } from '@/stores/config';
|
||||
import { useDesktopConfigStore } from '@/stores/desktopConfig';
|
||||
import { APPTYPE, TApp } from '@/types';
|
||||
import { Box, Center, Flex, Image } from '@chakra-ui/react';
|
||||
import { MouseEvent, useContext, useMemo, useState } from 'react';
|
||||
import { Menu, useContextMenu } from 'react-contexify';
|
||||
import { ChevronDownIcon } from '../icons';
|
||||
import styles from './index.module.css';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
|
||||
const APP_DOCK_MENU_ID = 'APP_DOCK_MENU_ID';
|
||||
|
||||
export default function AppDock() {
|
||||
const { t } = useTranslation();
|
||||
const {
|
||||
installedApps: apps,
|
||||
runningInfo,
|
||||
setToHighestLayerById,
|
||||
currentAppPid,
|
||||
openApp,
|
||||
switchAppById,
|
||||
findAppInfoById,
|
||||
updateOpenedAppInfo
|
||||
} = useAppStore();
|
||||
const logo = useConfigStore().layoutConfig?.logo;
|
||||
const moreAppsContent = useContext(MoreAppsContext);
|
||||
const [isNavbarVisible, setNavbarVisible] = useState(true);
|
||||
const { show } = useContextMenu({
|
||||
id: APP_DOCK_MENU_ID
|
||||
});
|
||||
const { toggleShape } = useDesktopConfigStore();
|
||||
const normalApps = apps.filter((item: TApp) => item?.displayType === 'normal');
|
||||
|
||||
const AppMenuLists = useMemo(() => {
|
||||
const initialApps: TApp[] = [
|
||||
{
|
||||
name: 'home',
|
||||
icon: '/icons/home.svg',
|
||||
zIndex: 99999,
|
||||
isShow: true,
|
||||
pid: -9,
|
||||
size: 'maxmin',
|
||||
cacheSize: 'maxmin',
|
||||
style: {},
|
||||
mouseDowning: false,
|
||||
key: `system-sealos-home`,
|
||||
type: APPTYPE.IFRAME,
|
||||
data: {
|
||||
url: '',
|
||||
desc: ''
|
||||
},
|
||||
displayType: 'hidden'
|
||||
},
|
||||
...normalApps.slice(0, 5).map((app, index) => ({ ...app, pid: -2 }))
|
||||
];
|
||||
|
||||
const mergedApps = initialApps.map((app) => {
|
||||
const runningApp = runningInfo.find((running) => running.key === app.key);
|
||||
return runningApp ? { ...app, ...runningApp } : app;
|
||||
});
|
||||
|
||||
return [
|
||||
...mergedApps,
|
||||
...runningInfo.filter((running) => !initialApps.some((app) => app.key === running.key))
|
||||
];
|
||||
}, [normalApps, runningInfo]);
|
||||
|
||||
// Handle icon click event
|
||||
const handleNavItem = (e: MouseEvent<HTMLDivElement>, item: AppInfo) => {
|
||||
if (item.key === 'system-sealos-home') {
|
||||
const isNotMinimized = runningInfo.some((item) => item.size !== 'minimize');
|
||||
runningInfo.forEach((item) => {
|
||||
updateOpenedAppInfo({
|
||||
...item,
|
||||
size: isNotMinimized ? 'minimize' : item.cacheSize
|
||||
});
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (item.key === 'system-sealos-apps') {
|
||||
moreAppsContent?.setShowMoreApps(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (item.pid === currentAppPid && item.size !== 'minimize') {
|
||||
updateOpenedAppInfo({
|
||||
...item,
|
||||
size: 'minimize',
|
||||
cacheSize: item.size
|
||||
});
|
||||
} else {
|
||||
const app = findAppInfoById(item.pid);
|
||||
if (!app) {
|
||||
openApp(item);
|
||||
} else {
|
||||
switchAppById(item.pid);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const displayMenu = (e: MouseEvent<HTMLDivElement>) => {
|
||||
show({
|
||||
event: e,
|
||||
position: {
|
||||
// @ts-ignore
|
||||
x: '60px',
|
||||
// @ts-ignore
|
||||
y: '-114px'
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const transitionValue = 'transform 200ms ease-in-out, opacity 200ms ease-in-out';
|
||||
|
||||
return (
|
||||
<Box position="absolute" left="50%" bottom={'4px'} transform="translateX(-50%)" zIndex={'9999'}>
|
||||
<Center
|
||||
width={'48px'}
|
||||
height={'16px'}
|
||||
position={'absolute'}
|
||||
color={'white'}
|
||||
transition={transitionValue}
|
||||
cursor={'pointer'}
|
||||
bg="rgba(220, 220, 224, 0.3)"
|
||||
backdropFilter="blur(80px) saturate(150%)"
|
||||
boxShadow={
|
||||
'0px 0px 20px -4px rgba(12, 26, 67, 0.25), 0px 0px 1px 0px rgba(24, 43, 100, 0.25)'
|
||||
}
|
||||
borderTopRadius={'4px'}
|
||||
top={'-80px'}
|
||||
transform={isNavbarVisible ? 'translate(-50%, 0)' : 'translate(-50%, 64px)'}
|
||||
will-change="transform, opacity"
|
||||
onClick={() => setNavbarVisible((prev) => !prev)}
|
||||
>
|
||||
<ChevronDownIcon
|
||||
transform={isNavbarVisible ? 'rotate(0deg)' : 'rotate(180deg)'}
|
||||
transition="transform 0.3s ease-in-out"
|
||||
/>
|
||||
</Center>
|
||||
<Flex
|
||||
onContextMenu={(e) => displayMenu(e)}
|
||||
borderRadius="12px"
|
||||
border={'1px solid rgba(255, 255, 255, 0.07)'}
|
||||
bg="rgba(220, 220, 224, 0.3)"
|
||||
backdropFilter="blur(80px) saturate(150%)"
|
||||
boxShadow={
|
||||
'0px 0px 20px -4px rgba(12, 26, 67, 0.25), 0px 0px 1px 0px rgba(24, 43, 100, 0.25)'
|
||||
}
|
||||
minW={'326px'}
|
||||
w={'auto'}
|
||||
gap={'12px'}
|
||||
userSelect={'none'}
|
||||
px={'12px'}
|
||||
transition={transitionValue}
|
||||
opacity={isNavbarVisible ? 1 : 0}
|
||||
position="absolute"
|
||||
top={'-64px'}
|
||||
transform={isNavbarVisible ? 'translate(-50%, 0)' : 'translate(-50%, 68px)'}
|
||||
will-change="transform, opacity"
|
||||
overflow="hidden"
|
||||
>
|
||||
{AppMenuLists.map((item: AppInfo, index: number) => {
|
||||
return (
|
||||
<Flex
|
||||
flexDirection={'column'}
|
||||
alignItems={'center'}
|
||||
cursor={'pointer'}
|
||||
key={item?.name}
|
||||
pt={'6px'}
|
||||
pb={'2px'}
|
||||
onClick={(e) => handleNavItem(e, item)}
|
||||
>
|
||||
<Center
|
||||
w="40px"
|
||||
h="40px"
|
||||
borderRadius={'8px'}
|
||||
bg={'rgba(255, 255, 255, 0.85)'}
|
||||
backdropFilter={'blur(25px)'}
|
||||
boxShadow={'0px 1.167px 2.333px 0px rgba(0, 0, 0, 0.20)'}
|
||||
>
|
||||
<Image
|
||||
src={item?.icon}
|
||||
fallbackSrc={logo || '/logo.svg'}
|
||||
alt={item?.name}
|
||||
w="32px"
|
||||
h="32px"
|
||||
/>
|
||||
</Center>
|
||||
<Box
|
||||
opacity={currentAppPid === item.pid ? 1 : 0}
|
||||
mt={'6px'}
|
||||
width={'4px'}
|
||||
height={'4px'}
|
||||
borderRadius={'full'}
|
||||
bg={'rgba(7, 27, 65, 0.50)'}
|
||||
></Box>
|
||||
</Flex>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
|
||||
<Menu className={styles.contexify} id={APP_DOCK_MENU_ID}>
|
||||
<>
|
||||
<Box
|
||||
cursor={'pointer'}
|
||||
p={'4px'}
|
||||
_hover={{
|
||||
bg: 'rgba(17, 24, 36, 0.10)'
|
||||
}}
|
||||
onClick={toggleShape}
|
||||
borderRadius={'4px'}
|
||||
>
|
||||
{t('Switching Disc')}
|
||||
</Box>
|
||||
<div className={styles.arrow}></div>
|
||||
</>
|
||||
</Menu>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -10,7 +10,6 @@ export default function LangSelectSimple(props: FlexProps) {
|
||||
return (
|
||||
<Flex
|
||||
userSelect={'none'}
|
||||
ml="auto"
|
||||
w="32px"
|
||||
h="32px"
|
||||
borderRadius={'50%'}
|
||||
|
||||
@@ -48,15 +48,16 @@ export default function PasswordModify(props: FlexProps) {
|
||||
return (
|
||||
<>
|
||||
<Flex
|
||||
borderRadius={'4px'}
|
||||
_hover={{
|
||||
bgColor: 'rgba(0, 0, 0, 0.03)'
|
||||
background: 'rgba(255, 255, 255, 0.15)'
|
||||
}}
|
||||
h="28px"
|
||||
p="4px"
|
||||
transition={'all 0.3s'}
|
||||
justify={'center'}
|
||||
fontSize={'12px'}
|
||||
color="#219BF4"
|
||||
color="rgba(255, 255, 255, 0.7)"
|
||||
align={'center'}
|
||||
cursor={'pointer'}
|
||||
{...props}
|
||||
|
||||
@@ -0,0 +1,234 @@
|
||||
import { getUserBilling } from '@/api/platform';
|
||||
import request from '@/services/request';
|
||||
import useAppStore from '@/stores/app';
|
||||
import { useConfigStore } from '@/stores/config';
|
||||
import useSessionStore from '@/stores/session';
|
||||
import { ApiResp } from '@/types';
|
||||
import { formatMoney } from '@/utils/format';
|
||||
import {
|
||||
Accordion,
|
||||
AccordionButton,
|
||||
AccordionIcon,
|
||||
AccordionItem,
|
||||
AccordionPanel,
|
||||
Box,
|
||||
Center,
|
||||
Flex,
|
||||
Text,
|
||||
useBreakpointValue
|
||||
} from '@chakra-ui/react';
|
||||
import { MonitorIcon } from '@sealos/ui';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Decimal } from 'decimal.js';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { useMemo } from 'react';
|
||||
import { blurBackgroundStyles } from '../desktop_content';
|
||||
import Monitor from '../desktop_content/monitor';
|
||||
import { ClockIcon, DesktopSealosCoinIcon, InfiniteIcon } from '../icons';
|
||||
|
||||
export default function Cost() {
|
||||
const { t } = useTranslation();
|
||||
const rechargeEnabled = useConfigStore().commonConfig?.rechargeEnabled;
|
||||
const openApp = useAppStore((s) => s.openApp);
|
||||
const installApp = useAppStore((s) => s.installedApps);
|
||||
const { session } = useSessionStore();
|
||||
const user = session?.user;
|
||||
const isLargerThanXl = useBreakpointValue({ base: true, xl: false });
|
||||
|
||||
const { data } = useQuery({
|
||||
queryKey: ['getAmount', { userId: user?.userCrUid }],
|
||||
queryFn: () =>
|
||||
request<any, ApiResp<{ balance: number; deductionBalance: number }>>(
|
||||
'/api/account/getAmount'
|
||||
),
|
||||
enabled: !!user
|
||||
});
|
||||
|
||||
const { data: billing, isSuccess } = useQuery(['getUserBilling'], () => getUserBilling(), {
|
||||
cacheTime: 5 * 60 * 1000
|
||||
});
|
||||
|
||||
const balance = useMemo(() => {
|
||||
let realBalance = new Decimal(data?.data?.balance || 0);
|
||||
if (data?.data?.deductionBalance) {
|
||||
realBalance = realBalance.minus(new Decimal(data.data.deductionBalance));
|
||||
}
|
||||
return realBalance.toNumber();
|
||||
}, [data]);
|
||||
|
||||
const calculations = useMemo(() => {
|
||||
const prevDayAmount = new Decimal(billing?.data?.prevDayTime || 0);
|
||||
const estimatedNextMonthAmount = prevDayAmount.times(30).toNumber();
|
||||
const _balance = new Decimal(balance || 0);
|
||||
|
||||
const estimatedDaysUsable = prevDayAmount.greaterThan(0)
|
||||
? _balance.div(prevDayAmount).ceil().toNumber()
|
||||
: Number.POSITIVE_INFINITY;
|
||||
|
||||
return {
|
||||
prevMonthAmount: new Decimal(billing?.data?.prevMonthTime || 0).toNumber(),
|
||||
estimatedNextMonthAmount,
|
||||
estimatedDaysUsable
|
||||
};
|
||||
}, [billing?.data?.prevDayTime, billing?.data?.prevMonthTime, , balance]);
|
||||
|
||||
return (
|
||||
<Box
|
||||
position={'relative'}
|
||||
flex={'0 1 400px'}
|
||||
overflowY={'auto'}
|
||||
style={{
|
||||
scrollbarWidth: 'none'
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
{...blurBackgroundStyles}
|
||||
position={'relative'}
|
||||
zIndex={2}
|
||||
fontSize={'base'}
|
||||
fontWeight={'bold'}
|
||||
px={'16px'}
|
||||
pt={'20px'}
|
||||
flexDirection={'column'}
|
||||
>
|
||||
<Flex
|
||||
borderRadius={'6px'}
|
||||
p="16px"
|
||||
bg={'rgba(255, 255, 255, 0.05)'}
|
||||
justifyContent={'space-between'}
|
||||
_hover={{
|
||||
background: 'rgba(255, 255, 255, 0.10)'
|
||||
}}
|
||||
>
|
||||
<Box flex={1}>
|
||||
<Text color={'rgba(255, 255, 255, 0.90)'} fontSize={'11px'}>
|
||||
{t('Balance')}
|
||||
</Text>
|
||||
<Flex alignItems={'center'} gap={'8px'}>
|
||||
<Text fontSize={'20px'} color={'#7CE7FF'}>
|
||||
{formatMoney(balance).toFixed(2)}
|
||||
</Text>
|
||||
<DesktopSealosCoinIcon />
|
||||
</Flex>
|
||||
</Box>
|
||||
{rechargeEnabled && (
|
||||
<Center
|
||||
ml="auto"
|
||||
onClick={() => {
|
||||
const costcenter = installApp.find((t) => t.key === 'system-costcenter');
|
||||
if (!costcenter) return;
|
||||
openApp(costcenter, {
|
||||
query: {
|
||||
openRecharge: 'true'
|
||||
}
|
||||
});
|
||||
}}
|
||||
color={'rgba(255, 255, 255, 0.90)'}
|
||||
cursor={'pointer'}
|
||||
>
|
||||
{t('Charge')}
|
||||
</Center>
|
||||
)}
|
||||
</Flex>
|
||||
{calculations && (
|
||||
<Flex flexDirection={'column'}>
|
||||
<Flex
|
||||
alignItems={'center'}
|
||||
px={'16px'}
|
||||
py={'18px'}
|
||||
borderBottom={'1px solid rgba(255, 255, 255, 0.05)'}
|
||||
>
|
||||
<ClockIcon mr={'4px'} />
|
||||
<Text fontSize={'12px'} fontWeight={'bold'} color={'rgba(255, 255, 255, 0.90)'}>
|
||||
{t('Expected used')}
|
||||
</Text>
|
||||
<Text mr={'4px'} ml={'auto'} color={'white'} fontSize={'14px'} fontWeight={700}>
|
||||
{calculations.estimatedDaysUsable === Number.POSITIVE_INFINITY ? (
|
||||
<>
|
||||
<InfiniteIcon /> {t('Day')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{calculations.estimatedDaysUsable} {t('Day')}
|
||||
</>
|
||||
)}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex
|
||||
alignItems={'center'}
|
||||
px={'16px'}
|
||||
py={'18px'}
|
||||
borderBottom={'1px solid rgba(255, 255, 255, 0.05)'}
|
||||
>
|
||||
<Center
|
||||
mr={'4px'}
|
||||
w={'7px'}
|
||||
height={'7px'}
|
||||
bg={'#4DB4FF'}
|
||||
borderRadius={'2px'}
|
||||
></Center>
|
||||
<Text fontSize={'12px'} fontWeight={'bold'} color={'rgba(255, 255, 255, 0.90)'}>
|
||||
{t('Used last month')}
|
||||
</Text>
|
||||
<Text mr={'4px'} ml={'auto'} color={'white'} fontSize={'14px'} fontWeight={700}>
|
||||
{formatMoney(calculations.prevMonthAmount).toFixed(2)}
|
||||
</Text>
|
||||
<DesktopSealosCoinIcon />
|
||||
</Flex>
|
||||
<Flex alignItems={'center'} px={'16px'} py={'18px'}>
|
||||
<Center
|
||||
mr={'4px'}
|
||||
w={'7px'}
|
||||
height={'7px'}
|
||||
bg={'#C74FFF'}
|
||||
borderRadius={'2px'}
|
||||
></Center>
|
||||
<Text fontSize={'12px'} fontWeight={'bold'} color={'rgba(255, 255, 255, 0.90)'}>
|
||||
{t('Expected to use next month')}
|
||||
</Text>
|
||||
<Text mr={'4px'} ml={'auto'} color={'white'} fontSize={'14px'} fontWeight={700}>
|
||||
{formatMoney(calculations.estimatedNextMonthAmount).toFixed(2)}
|
||||
</Text>
|
||||
<DesktopSealosCoinIcon />
|
||||
</Flex>
|
||||
</Flex>
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
{isLargerThanXl && (
|
||||
<Accordion allowMultiple mt={'8px'}>
|
||||
<AccordionItem py={'19px'} {...blurBackgroundStyles}>
|
||||
<AccordionButton
|
||||
gap={'6px'}
|
||||
_hover={{
|
||||
bg: ''
|
||||
}}
|
||||
>
|
||||
<MonitorIcon />
|
||||
<Text color={'rgba(255, 255, 255, 0.90)'} fontWeight={'bold'} fontSize={'14px'}>
|
||||
{t('Monitor')}
|
||||
</Text>
|
||||
<AccordionIcon ml={'auto'} color={'white'} />
|
||||
</AccordionButton>
|
||||
|
||||
<AccordionPanel p={0}>
|
||||
<Monitor needStyles={false} />
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
)}
|
||||
|
||||
{/* <Box
|
||||
id="blur-background"
|
||||
zIndex={0}
|
||||
position={'absolute'}
|
||||
top={0}
|
||||
left={0}
|
||||
w={'full'}
|
||||
h={'full'}
|
||||
overflowY={'scroll'}
|
||||
{...blurBackgroundStyles}
|
||||
></Box> */}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import { useConfigStore } from '@/stores/config';
|
||||
import { Flex, FlexProps, Icon, Tooltip } from '@chakra-ui/react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
|
||||
export default function GithubComponent(props: FlexProps) {
|
||||
// const { data } = useQuery(
|
||||
// ['getGithubStar'],
|
||||
// () => fetch('https://api.github.com/repos/labring/sealos').then((res) => res.json()),
|
||||
// {
|
||||
// staleTime: 24 * 60 * 60 * 1000
|
||||
// }
|
||||
// );
|
||||
|
||||
return (
|
||||
<Flex
|
||||
userSelect={'none'}
|
||||
w="32px"
|
||||
h="32px"
|
||||
borderRadius={'50%'}
|
||||
justifyContent={'center'}
|
||||
alignItems={'center'}
|
||||
backgroundColor={'#FFF'}
|
||||
cursor={'pointer'}
|
||||
fontWeight={500}
|
||||
{...props}
|
||||
onClick={() => window.open('https://github.com/labring/sealos')}
|
||||
>
|
||||
<Icon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20px"
|
||||
height="20px"
|
||||
viewBox="0 0 20 20"
|
||||
fill="white"
|
||||
>
|
||||
<path d="M10.5149 2.46429C9.50066 2.46429 8.94582 2.57085 8.11017 2.75393C7.6713 2.47429 7.1805 2.2266 6.71141 2.04216C6.16273 1.82643 5.50582 1.64137 4.96522 1.69937C4.73761 1.72379 4.54128 1.83769 4.40747 2.00232C4.34607 2.06873 4.29451 2.14634 4.25617 2.23385C3.78624 3.30652 3.8237 4.37524 4.02876 5.17706C3.70273 5.62136 3.45054 6.03802 3.2796 6.49567C3.06127 7.08016 2.99839 7.66872 2.99839 8.37421C2.99839 10.2018 3.55784 11.6251 4.60368 12.6213C5.34248 13.325 6.27275 13.7665 7.29637 14.0126C7.19262 14.3116 7.14454 14.6131 7.12749 14.9237C7.12244 14.9608 7.11984 14.9987 7.11984 15.0371L7.11984 15.2993C7.08437 15.3069 7.04899 15.3168 7.01389 15.3292C6.29686 15.5828 4.42832 15.4917 3.48217 13.4202C3.29096 13.0015 2.79658 12.8172 2.37795 13.0084C1.95931 13.1996 1.77494 13.6939 1.96615 14.1126C3.19725 16.808 5.63646 17.3073 7.11984 17.0209L7.11984 17.4781C7.11984 17.9383 7.49294 18.3114 7.95318 18.3114C8.41341 18.3114 8.78651 17.9383 8.78651 17.4781L8.7865 15.2177C8.78661 14.8916 8.82066 14.6928 8.87987 14.5341C8.93817 14.3779 9.04207 14.2042 9.26358 13.9629C9.57478 13.6238 9.5522 13.0967 9.21313 12.7854C9.12786 12.7072 9.03069 12.65 8.92805 12.6137C8.85498 12.5841 8.77645 12.5645 8.69396 12.5566C7.41295 12.4343 6.42015 12.0497 5.75319 11.4145C5.10404 10.7961 4.66505 9.84643 4.66505 8.37421C4.66505 7.76687 4.72051 7.40117 4.8409 7.07886C4.96477 6.74723 5.18069 6.39831 5.6054 5.85725C5.68261 5.75888 5.73419 5.64856 5.76109 5.53435C5.79993 5.37587 5.79274 5.20438 5.73033 5.04034C5.57774 4.63929 5.48097 4.05052 5.61339 3.42948C5.75142 3.46674 5.91501 3.5199 6.10155 3.59324C6.57035 3.77757 7.06537 4.04219 7.45271 4.32035C7.58549 4.4157 7.7368 4.46641 7.88875 4.47541C7.9655 4.4805 8.04425 4.47496 8.12315 4.45762L8.25749 4.42806C9.19661 4.22125 9.60665 4.13096 10.5149 4.13096C11.472 4.13096 11.9343 4.22367 12.9808 4.45706C13.0503 4.47256 13.1197 4.47889 13.1878 4.47685C13.3544 4.47581 13.5223 4.42493 13.668 4.32035C14.0553 4.04219 14.5503 3.77757 15.0191 3.59324C15.2035 3.52076 15.3654 3.46799 15.5024 3.4308C15.6309 4.03267 15.5421 4.58336 15.3904 4.98448C15.3739 5.02807 15.3613 5.07218 15.3525 5.11643C15.2813 5.36893 15.3302 5.65098 15.5085 5.86975C15.8603 6.30132 16.0766 6.61787 16.2175 6.96875C16.3557 7.31312 16.4425 7.74564 16.4425 8.42196C16.4425 9.79112 16.0558 10.7082 15.4422 11.328C14.8146 11.962 13.85 12.3861 12.5089 12.5597C12.4949 12.5615 12.4811 12.5637 12.4673 12.5661C12.2703 12.5692 12.0736 12.6417 11.9171 12.7854C11.578 13.0967 11.5554 13.6238 11.8666 13.9629C12.0881 14.2042 12.192 14.3779 12.2503 14.5341C12.3095 14.6928 12.3436 14.8916 12.3437 15.2177L12.3437 17.4781C12.3437 17.9383 12.7168 18.3114 13.177 18.3114C13.6373 18.3114 14.0104 17.9383 14.0104 17.4781L14.0104 15.0371C14.0104 14.9987 14.0078 14.9608 14.0027 14.9237C13.9855 14.6103 13.9367 14.3061 13.831 14.0045C14.9295 13.7266 15.889 13.2458 16.6267 12.5005C17.6174 11.4997 18.1092 10.1226 18.1092 8.42196C18.1092 7.59831 18.0029 6.94238 17.7642 6.34782C17.587 5.90648 17.3488 5.53004 17.0789 5.17087C17.2969 4.35681 17.3282 3.29947 16.8497 2.20714C16.7832 2.05551 16.6771 1.93357 16.5488 1.84818C16.4364 1.76822 16.3024 1.71514 16.1554 1.69937C15.6148 1.64137 14.9579 1.82643 14.4093 2.04216C13.939 2.22706 13.4469 2.47552 13.0072 2.75601C12.1219 2.56301 11.5322 2.46429 10.5149 2.46429Z" />
|
||||
</Icon>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
@@ -1,58 +1,59 @@
|
||||
import Notification from '@/components/notification';
|
||||
import { useCopyData } from '@/hooks/useCopyData';
|
||||
import request from '@/services/request';
|
||||
import { useConfigStore } from '@/stores/config';
|
||||
import useSessionStore from '@/stores/session';
|
||||
import download from '@/utils/downloadFIle';
|
||||
import { Box, Center, Flex, IconButton, Image, Text, useDisclosure } from '@chakra-ui/react';
|
||||
import {
|
||||
Box,
|
||||
Flex,
|
||||
Image,
|
||||
Stack,
|
||||
Text,
|
||||
type UseDisclosureReturn,
|
||||
IconButton,
|
||||
HStack,
|
||||
VStack
|
||||
} from '@chakra-ui/react';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
CopyIcon,
|
||||
DocsIcon,
|
||||
DownloadIcon,
|
||||
LogoutIcon,
|
||||
NotificationIcon,
|
||||
SettingIcon
|
||||
} from '@sealos/ui';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { useRouter } from 'next/router';
|
||||
import { useMemo, useState } from 'react';
|
||||
import useAppStore from '@/stores/app';
|
||||
import { ApiResp } from '@/types';
|
||||
import { formatMoney } from '@/utils/format';
|
||||
import { useCallback, useState } from 'react';
|
||||
import LangSelectSimple from '../LangSelect/simple';
|
||||
import { blurBackgroundStyles } from '../desktop_content';
|
||||
import RegionToggle from '../region/RegionToggle';
|
||||
import WorkspaceToggle from '../team/WorkspaceToggle';
|
||||
import PasswordModify from './PasswordModify';
|
||||
import { CopyIcon, DownloadIcon, LogoutIcon } from '@sealos/ui';
|
||||
import { useConfigStore } from '@/stores/config';
|
||||
import GithubComponent from './github';
|
||||
import { ArrowIcon } from '../icons';
|
||||
import useAppStore from '@/stores/app';
|
||||
|
||||
export default function Account({ disclosure }: { disclosure: UseDisclosureReturn }) {
|
||||
const baseItemStyle = {
|
||||
w: '52px',
|
||||
h: '40px',
|
||||
background: 'rgba(255, 255, 255, 0.07)',
|
||||
color: 'white',
|
||||
borderRadius: '100px',
|
||||
_hover: {
|
||||
background: 'rgba(255, 255, 255, 0.15)'
|
||||
}
|
||||
};
|
||||
|
||||
export default function Account() {
|
||||
const { layoutConfig } = useConfigStore();
|
||||
const [showId, setShowId] = useState(true);
|
||||
const passwordEnabled = useConfigStore().authConfig?.idp?.password?.enabled;
|
||||
const rechargeEnabled = useConfigStore().commonConfig?.rechargeEnabled;
|
||||
const logo = useConfigStore().layoutConfig?.logo;
|
||||
|
||||
const router = useRouter();
|
||||
const { copyData } = useCopyData();
|
||||
const openApp = useAppStore((s) => s.openApp);
|
||||
const installApp = useAppStore((s) => s.installedApps);
|
||||
const { t } = useTranslation();
|
||||
const { delSession, session, setToken } = useSessionStore();
|
||||
const user = session?.user;
|
||||
const { data } = useQuery({
|
||||
queryKey: ['getAmount', { userId: user?.userCrUid }],
|
||||
queryFn: () =>
|
||||
request<any, ApiResp<{ balance: number; deductionBalance: number }>>(
|
||||
'/api/account/getAmount'
|
||||
),
|
||||
enabled: !!user
|
||||
});
|
||||
const balance = useMemo(() => {
|
||||
let real_balance = data?.data?.balance || 0;
|
||||
if (data?.data?.deductionBalance) {
|
||||
real_balance -= data?.data.deductionBalance;
|
||||
}
|
||||
return real_balance;
|
||||
}, [data]);
|
||||
const queryclient = useQueryClient();
|
||||
const kubeconfig = session?.kubeconfig || '';
|
||||
const showDisclosure = useDisclosure();
|
||||
const [notificationAmount, setNotificationAmount] = useState(0);
|
||||
const { installedApps, openApp } = useAppStore();
|
||||
|
||||
const onAmount = useCallback((amount: number) => setNotificationAmount(amount), []);
|
||||
|
||||
const logout = (e: React.MouseEvent<HTMLElement>) => {
|
||||
e.preventDefault();
|
||||
delSession();
|
||||
@@ -61,145 +62,193 @@ export default function Account({ disclosure }: { disclosure: UseDisclosureRetur
|
||||
setToken('');
|
||||
};
|
||||
|
||||
return disclosure.isOpen ? (
|
||||
<>
|
||||
<Box
|
||||
position={'fixed'}
|
||||
inset={0}
|
||||
zIndex={'998'}
|
||||
cursor={'initial'}
|
||||
onClick={disclosure.onClose}
|
||||
></Box>
|
||||
<Box
|
||||
w="297px"
|
||||
bg="rgba(255, 255, 255, 0.6)"
|
||||
boxShadow={'0px 1px 2px rgba(0, 0, 0, 0.2)'}
|
||||
position={'absolute'}
|
||||
top="48px"
|
||||
right={0}
|
||||
cursor={'initial'}
|
||||
zIndex={'999'}
|
||||
borderRadius={'8px'}
|
||||
p="20px"
|
||||
backdropFilter={'blur(150px)'}
|
||||
>
|
||||
<Flex justifyContent={'end'} alignItems={'center'} overflow={'hidden'} cursor={'pointer'}>
|
||||
<LogoutIcon boxSize={'14px'} color={'#24282C'} />
|
||||
<Text ml="6px" color={'#24282C'} fontSize={'12px'} fontWeight={500} onClick={logout}>
|
||||
{t('Log Out')}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex mt="8px" justifyContent={'center'} alignItems={'center'} flexDirection={'column'}>
|
||||
<Image
|
||||
width={'80px'}
|
||||
height={'80px'}
|
||||
borderRadius="full"
|
||||
src={user?.avatar}
|
||||
fallbackSrc={logo}
|
||||
alt="user avator"
|
||||
/>
|
||||
<Text color={'#24282C'} fontSize={'20px'} fontWeight={600}>
|
||||
{user?.name}
|
||||
</Text>
|
||||
<HStack mb="10px" gap="2px">
|
||||
<Text
|
||||
color={'grayModern.500'}
|
||||
fontSize={'12px'}
|
||||
cursor={'pointer'}
|
||||
onClick={() => setShowId((s) => !s)}
|
||||
>
|
||||
{showId ? `ID: ${user?.userId}` : `NS: ${user?.nsid}`}
|
||||
const openWorkOrderApp = () => {
|
||||
const workorder = installedApps.find((t) => t.key === 'system-workorder');
|
||||
if (!workorder) return;
|
||||
openApp(workorder);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box position={'relative'} flex={1}>
|
||||
<Flex position={'relative'} zIndex={3} px={'16px'} pt={'20px'} flexDirection={'column'}>
|
||||
<Flex alignItems={'center'}>
|
||||
<Center width={'36px'} height={'36px'} bg={'white'} borderRadius="full" mr={'8px'}>
|
||||
<Image
|
||||
width={user?.avatar && 'full'}
|
||||
height={user?.avatar && 'full'}
|
||||
objectFit={'cover'}
|
||||
borderRadius="full"
|
||||
src={user?.avatar || ''}
|
||||
fallbackSrc={'/images/default-user.svg'}
|
||||
alt="user avator"
|
||||
draggable={'false'}
|
||||
/>
|
||||
</Center>
|
||||
<Box>
|
||||
<Text lineHeight={'20px'} color={'white'} fontSize={'14px'} fontWeight={500}>
|
||||
{user?.name}
|
||||
</Text>
|
||||
<Flex
|
||||
cursor={'pointer'}
|
||||
gap="2px"
|
||||
fontSize={'11px'}
|
||||
lineHeight={'16px'}
|
||||
fontWeight={'500'}
|
||||
color={'rgba(255, 255, 255, 0.70)'}
|
||||
alignItems={'center'}
|
||||
>
|
||||
<Text onClick={() => setShowId((s) => !s)}>
|
||||
{showId ? `ID:${user?.userId}` : `NS:${user?.nsid}`}
|
||||
</Text>
|
||||
<CopyIcon
|
||||
onClick={() => {
|
||||
if (user?.userId && user.nsid) copyData(showId ? user?.userId : user?.nsid);
|
||||
}}
|
||||
boxSize={'12px'}
|
||||
fill={'rgba(255, 255, 255, 0.70)'}
|
||||
/>
|
||||
</Flex>
|
||||
</Box>
|
||||
<Center
|
||||
p={'4px'}
|
||||
h={'fit-content'}
|
||||
borderRadius={'4px'}
|
||||
ml={'auto'}
|
||||
cursor={'pointer'}
|
||||
_hover={{
|
||||
background: 'rgba(255, 255, 255, 0.15)'
|
||||
}}
|
||||
>
|
||||
<LogoutIcon boxSize={'14px'} fill={'white'} />
|
||||
<Text ml="4px" color={'white'} fontSize={'12px'} fontWeight={500} onClick={logout}>
|
||||
{t('Log Out')}
|
||||
</Text>
|
||||
</Center>
|
||||
</Flex>
|
||||
<Flex mt={'16px'} justifyContent={'space-between'} position={'relative'}>
|
||||
<Center
|
||||
cursor={'pointer'}
|
||||
{...baseItemStyle}
|
||||
onClick={() => window.open(layoutConfig?.common?.docsUrl)}
|
||||
>
|
||||
<DocsIcon />
|
||||
</Center>
|
||||
<LangSelectSimple {...baseItemStyle} />
|
||||
{layoutConfig?.common.githubStarEnabled && <GithubComponent {...baseItemStyle} />}
|
||||
<Center cursor={'pointer'} {...baseItemStyle} onClick={() => showDisclosure.onOpen()}>
|
||||
<NotificationIcon />
|
||||
</Center>
|
||||
<Notification key={'notification'} disclosure={showDisclosure} onAmount={onAmount} />
|
||||
</Flex>
|
||||
|
||||
<RegionToggle />
|
||||
|
||||
<WorkspaceToggle />
|
||||
|
||||
{layoutConfig?.common.accountSettingEnabled && (
|
||||
<Flex
|
||||
borderBottom={'1px solid rgba(255, 255, 255, 0.05)'}
|
||||
color={'white'}
|
||||
fontSize={'base'}
|
||||
fontWeight={'bold'}
|
||||
justifyContent={'space-between'}
|
||||
alignItems={'center'}
|
||||
py={'12px'}
|
||||
px={'16px'}
|
||||
>
|
||||
<Text>{t('Account Settings')}</Text>
|
||||
<IconButton
|
||||
variant={'white-bg-icon'}
|
||||
p="4px"
|
||||
onClick={() => {
|
||||
if (user?.userId && user.nsid) copyData(showId ? user?.userId : user?.nsid);
|
||||
}}
|
||||
icon={<CopyIcon boxSize={'12px'} color={'grayModern.500'} fill={'grayModern.500'} />}
|
||||
aria-label={'copy nsid'}
|
||||
// onClick={() => kubeconfig && copyData(kubeconfig)}
|
||||
icon={<SettingIcon boxSize={'16px'} fill={'rgba(255, 255, 255, 0.7)'} />}
|
||||
aria-label={'setting'}
|
||||
/>
|
||||
</HStack>
|
||||
<VStack w={'full'} gap={'12px'}>
|
||||
<Stack
|
||||
direction={'column'}
|
||||
width={'100%'}
|
||||
bg="rgba(255, 255, 255, 0.6)"
|
||||
borderRadius={'8px'}
|
||||
fontSize={'13px'}
|
||||
gap={'0px'}
|
||||
>
|
||||
{passwordEnabled && (
|
||||
<Flex
|
||||
justify={'space-between'}
|
||||
alignItems={'center'}
|
||||
borderBottom={'1px solid #0000001A'}
|
||||
px="16px"
|
||||
py="11px"
|
||||
>
|
||||
<Text>{t('changePassword')}</Text>
|
||||
<PasswordModify mr="0" />
|
||||
</Flex>
|
||||
)}
|
||||
<Flex px="16px" py="11px" alignItems={'center'} borderBottom={'1px solid #0000001A'}>
|
||||
<Text>
|
||||
{t('Balance')}: {formatMoney(balance).toFixed(2)}
|
||||
</Text>
|
||||
{rechargeEnabled && (
|
||||
<Box
|
||||
ml="auto"
|
||||
onClick={() => {
|
||||
const costcenter = installApp.find((t) => t.key === 'system-costcenter');
|
||||
if (!costcenter) return;
|
||||
openApp(costcenter, {
|
||||
query: {
|
||||
openRecharge: 'true'
|
||||
}
|
||||
});
|
||||
disclosure.onClose();
|
||||
}}
|
||||
_hover={{
|
||||
bgColor: 'rgba(0, 0, 0, 0.03)'
|
||||
}}
|
||||
transition={'0.3s'}
|
||||
p="4px"
|
||||
color={'#219BF4'}
|
||||
fontWeight="500"
|
||||
fontSize="12px"
|
||||
cursor={'pointer'}
|
||||
>
|
||||
{t('Charge')}
|
||||
</Box>
|
||||
)}
|
||||
</Flex>
|
||||
{
|
||||
<Flex alignItems={'center'} px="16px" py="11px">
|
||||
<Text>kubeconfig</Text>
|
||||
</Flex>
|
||||
)}
|
||||
{layoutConfig?.common.workorderEnabled && (
|
||||
<Flex
|
||||
borderBottom={'1px solid rgba(255, 255, 255, 0.05)'}
|
||||
color={'white'}
|
||||
fontSize={'base'}
|
||||
fontWeight={'bold'}
|
||||
justifyContent={'space-between'}
|
||||
alignItems={'center'}
|
||||
py={'12px'}
|
||||
px={'16px'}
|
||||
>
|
||||
<Text>{t('Work Order')}</Text>
|
||||
<IconButton
|
||||
variant={'white-bg-icon'}
|
||||
p="4px"
|
||||
onClick={openWorkOrderApp}
|
||||
icon={<ArrowIcon fill={'rgba(255, 255, 255, 0.7)'} />}
|
||||
aria-label={'setting'}
|
||||
/>
|
||||
</Flex>
|
||||
)}
|
||||
|
||||
<IconButton
|
||||
variant={'white-bg-icon'}
|
||||
p="4px"
|
||||
ml="auto"
|
||||
mr="4px"
|
||||
onClick={() => kubeconfig && download('kubeconfig.yaml', kubeconfig)}
|
||||
icon={<DownloadIcon boxSize={'16px'} color={'#219BF4'} fill={'#219BF4'} />}
|
||||
aria-label={'Download kc'}
|
||||
/>
|
||||
<IconButton
|
||||
variant={'white-bg-icon'}
|
||||
p="4px"
|
||||
onClick={() => kubeconfig && copyData(kubeconfig)}
|
||||
icon={<CopyIcon boxSize={'16px'} color={'#219BF4'} fill={'#219BF4'} />}
|
||||
aria-label={'copy kc'}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex
|
||||
color={'white'}
|
||||
fontSize={'base'}
|
||||
fontWeight={'bold'}
|
||||
justifyContent={'space-between'}
|
||||
alignItems={'center'}
|
||||
py={'12px'}
|
||||
px={'16px'}
|
||||
>
|
||||
<Text>kubeconfig</Text>
|
||||
<Flex alignItems={'center'}>
|
||||
<IconButton
|
||||
variant={'white-bg-icon'}
|
||||
p="4px"
|
||||
ml="auto"
|
||||
mr="4px"
|
||||
onClick={() => kubeconfig && download('kubeconfig.yaml', kubeconfig)}
|
||||
icon={
|
||||
<DownloadIcon
|
||||
boxSize={'16px'}
|
||||
color={'rgba(255, 255, 255, 0.7)'}
|
||||
fill={'rgba(255, 255, 255, 0.7)'}
|
||||
/>
|
||||
}
|
||||
</Stack>
|
||||
</VStack>
|
||||
aria-label={'Download kc'}
|
||||
/>
|
||||
<IconButton
|
||||
variant={'white-bg-icon'}
|
||||
p="4px"
|
||||
onClick={() => kubeconfig && copyData(kubeconfig)}
|
||||
icon={<CopyIcon boxSize={'16px'} fill={'rgba(255, 255, 255, 0.7)'} />}
|
||||
aria-label={'copy kc'}
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Box>
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
{/* {passwordEnabled && (
|
||||
<Flex
|
||||
color={'white'}
|
||||
fontSize={'base'}
|
||||
fontWeight={'bold'}
|
||||
justifyContent={'space-between'}
|
||||
alignItems={'center'}
|
||||
py={'12px'}
|
||||
px={'16px'}
|
||||
>
|
||||
<Text>{t('changePassword')}</Text>
|
||||
<PasswordModify mr="0" />
|
||||
</Flex>
|
||||
)} */}
|
||||
</Flex>
|
||||
<Box
|
||||
id="blur-background"
|
||||
zIndex={0}
|
||||
position={'absolute'}
|
||||
top={0}
|
||||
left={0}
|
||||
w={'full'}
|
||||
h={'full'}
|
||||
overflow={'hidden'}
|
||||
{...blurBackgroundStyles}
|
||||
></Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
import { useConfigStore } from '@/stores/config';
|
||||
import useSessionStore from '@/stores/session';
|
||||
import { Center, Flex, Image } from '@chakra-ui/react';
|
||||
import { Dispatch, SetStateAction } from 'react';
|
||||
|
||||
export default function Trigger({
|
||||
setShowAccount,
|
||||
showAccount
|
||||
}: {
|
||||
showAccount: boolean;
|
||||
setShowAccount: Dispatch<SetStateAction<boolean>>;
|
||||
}) {
|
||||
const user = useSessionStore((state) => state.session)?.user;
|
||||
const logo = useConfigStore().layoutConfig?.logo;
|
||||
|
||||
return (
|
||||
<Flex
|
||||
flexShrink={0}
|
||||
alignItems={'center'}
|
||||
justifyContent={'center'}
|
||||
display={{ base: 'flex', lg: 'none' }}
|
||||
onClick={() => {
|
||||
setShowAccount(true);
|
||||
}}
|
||||
cursor={'pointer'}
|
||||
>
|
||||
<Center
|
||||
width={{ base: '32px', sm: '36px' }}
|
||||
height={{ base: '32px', sm: '36px' }}
|
||||
bg={'white'}
|
||||
borderRadius="full"
|
||||
>
|
||||
<Image
|
||||
width={user?.avatar ? 'full' : ''}
|
||||
height={user?.avatar ? 'full' : ''}
|
||||
objectFit={'cover'}
|
||||
borderRadius="full"
|
||||
src={user?.avatar || ''}
|
||||
fallbackSrc={'/images/default-user.svg'}
|
||||
alt="user avator"
|
||||
draggable={'false'}
|
||||
/>
|
||||
</Center>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import { useBreakpointValue, Center } from '@chakra-ui/react';
|
||||
|
||||
export function ChakraIndicator() {
|
||||
const breakpoint = useBreakpointValue({
|
||||
base: 'base 0',
|
||||
xs: 'xs 375',
|
||||
sm: 'sm 640',
|
||||
md: 'md 768',
|
||||
lg: 'lg 1024',
|
||||
xl: 'xl 1280',
|
||||
'2xl': '2xl 1440'
|
||||
});
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Center
|
||||
height={'24px'}
|
||||
position="fixed"
|
||||
bottom="1"
|
||||
left="1"
|
||||
zIndex={50}
|
||||
borderRadius="full"
|
||||
bg="white"
|
||||
fontSize="md"
|
||||
fontWeight={'bold'}
|
||||
color="grayModern.900"
|
||||
>
|
||||
{breakpoint}
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,187 @@
|
||||
import useAppStore from '@/stores/app';
|
||||
import { useConfigStore } from '@/stores/config';
|
||||
import { TApp } from '@/types';
|
||||
import { Box, Button, Flex, Grid, HStack, Image, Text, useBreakpointValue } from '@chakra-ui/react';
|
||||
import { throttle } from 'lodash';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { MouseEvent, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { ArrowLeftIcon, ArrowRightIcon, DesktopSealosCoinIcon } from '../icons';
|
||||
import { blurBackgroundStyles } from './index';
|
||||
import { validateNumber } from '@/utils/tools';
|
||||
|
||||
export default function Apps() {
|
||||
const { t, i18n } = useTranslation();
|
||||
const { installedApps: renderApps, openApp } = useAppStore();
|
||||
const logo = useConfigStore().layoutConfig?.logo || '/logo.svg';
|
||||
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [page, setPage] = useState(1);
|
||||
|
||||
// grid value
|
||||
const gridMX = useBreakpointValue({ base: 32, lg: 48 }) || 32;
|
||||
const gridMT = 32;
|
||||
const gridSpacing = 36;
|
||||
const appWidth = 80;
|
||||
const appHeight = 86;
|
||||
const pageButton = 12;
|
||||
|
||||
const handleDoubleClick = (e: MouseEvent<HTMLDivElement>, item: TApp) => {
|
||||
e.preventDefault();
|
||||
if (item?.name) {
|
||||
openApp(item);
|
||||
}
|
||||
};
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
const calculateMaxAppsPerPage = useCallback(
|
||||
throttle(() => {
|
||||
const appsContainer = document.getElementById('apps-container');
|
||||
if (appsContainer) {
|
||||
const gridWidth = appsContainer.offsetWidth - gridMX * 2 - pageButton * 2;
|
||||
const gridHeight = appsContainer.offsetHeight - gridMT + gridSpacing;
|
||||
|
||||
const maxAppsInRow = Math.floor((gridWidth + gridSpacing) / (appWidth + gridSpacing));
|
||||
const maxAppsInColumn = Math.floor(gridHeight / (appHeight + gridSpacing));
|
||||
|
||||
const maxApps = maxAppsInRow * maxAppsInColumn;
|
||||
|
||||
setPage(1);
|
||||
setPageSize(maxApps);
|
||||
}
|
||||
}, 100),
|
||||
[gridMX]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
calculateMaxAppsPerPage();
|
||||
window.addEventListener('resize', calculateMaxAppsPerPage);
|
||||
return () => {
|
||||
window.removeEventListener('resize', calculateMaxAppsPerPage);
|
||||
};
|
||||
}, [calculateMaxAppsPerPage, gridMX]);
|
||||
|
||||
const paginatedApps = useMemo(
|
||||
() => renderApps.slice((page - 1) * pageSize, page * pageSize),
|
||||
[renderApps, page, pageSize]
|
||||
);
|
||||
|
||||
const totalPages = useMemo(() => {
|
||||
const renderAppsLength = renderApps.length;
|
||||
const validRenderAppsLength = validateNumber(renderAppsLength) ? renderAppsLength : 1;
|
||||
const validPageSize = validateNumber(pageSize) ? pageSize : 1;
|
||||
|
||||
return Math.ceil(validRenderAppsLength / validPageSize) || 1;
|
||||
}, [renderApps.length, pageSize]);
|
||||
|
||||
return (
|
||||
<Flex
|
||||
flexDirection={'column'}
|
||||
flex={1}
|
||||
height={'0'}
|
||||
{...blurBackgroundStyles}
|
||||
py={'32px'}
|
||||
px={{ base: '24px', xl: '36px' }}
|
||||
position={'relative'}
|
||||
zIndex={1}
|
||||
>
|
||||
<Box height={'20px'} color={'rgba(255, 255, 255, 0.90)'} fontSize={'md'} fontWeight={'bold'}>
|
||||
{t('All Apps')}
|
||||
</Box>
|
||||
<Flex width={'full'} height={'full'} id="apps-container" overflow={'auto'}>
|
||||
{totalPages !== 1 && (
|
||||
<Button
|
||||
minW={'12px'}
|
||||
flexGrow={0}
|
||||
alignSelf={'center'}
|
||||
variant={'unstyled'}
|
||||
onClick={() => setPage((prev) => Math.max(prev - 1, 1))}
|
||||
disabled={page === 1}
|
||||
opacity={page === 1 ? '0.3' : '0.7'}
|
||||
>
|
||||
<ArrowLeftIcon />
|
||||
</Button>
|
||||
)}
|
||||
<Grid
|
||||
overflow={'hidden'}
|
||||
flex={1}
|
||||
mt={`${gridMT}px`}
|
||||
mx={`${gridMX}px`}
|
||||
gap={`${gridSpacing}px`}
|
||||
templateColumns={`repeat(auto-fill, minmax(${appWidth}px, 1fr))`}
|
||||
templateRows={`repeat(auto-fit, ${appHeight}px)`}
|
||||
>
|
||||
{paginatedApps &&
|
||||
paginatedApps.map((item: TApp, index) => (
|
||||
<Flex
|
||||
flexDirection={'column'}
|
||||
alignItems={'center'}
|
||||
w="100%"
|
||||
h="86px"
|
||||
key={index}
|
||||
userSelect="none"
|
||||
cursor={'pointer'}
|
||||
onClick={(e) => handleDoubleClick(e, item)}
|
||||
>
|
||||
<Box
|
||||
className={item.key}
|
||||
w="60px"
|
||||
h="60px"
|
||||
p={'8px'}
|
||||
borderRadius={'8px'}
|
||||
boxShadow={'0px 2px 6px 0px rgba(17, 24, 36, 0.15)'}
|
||||
backgroundColor={'rgba(255, 255, 255, 0.90)'}
|
||||
backdropFilter={'blur(50px)'}
|
||||
>
|
||||
<Image
|
||||
width="100%"
|
||||
height="100%"
|
||||
src={item?.icon}
|
||||
fallbackSrc={logo}
|
||||
draggable={false}
|
||||
alt="app logo"
|
||||
/>
|
||||
</Box>
|
||||
<Text
|
||||
mt="10px"
|
||||
color={'rgba(255, 255, 255, 0.90)'}
|
||||
fontSize={'12px'}
|
||||
fontWeight={'bold'}
|
||||
textAlign={'center'}
|
||||
textShadow={'0px 1px 2px rgba(17, 24, 36, 0.40)'}
|
||||
lineHeight={'16px'}
|
||||
>
|
||||
{item?.i18n?.[i18n?.language]?.name
|
||||
? item?.i18n?.[i18n?.language]?.name
|
||||
: t(item?.name)}
|
||||
</Text>
|
||||
</Flex>
|
||||
))}
|
||||
</Grid>
|
||||
{totalPages !== 1 && (
|
||||
<Button
|
||||
minW={'12px'}
|
||||
flexGrow={0}
|
||||
alignSelf={'center'}
|
||||
variant={'unstyled'}
|
||||
onClick={() => setPage((prev) => Math.min(prev + 1, totalPages))}
|
||||
disabled={page === totalPages}
|
||||
opacity={page === totalPages ? '0.3' : '0.7'}
|
||||
>
|
||||
<ArrowRightIcon />
|
||||
</Button>
|
||||
)}
|
||||
</Flex>
|
||||
<HStack justifyContent="center">
|
||||
{Array.from({ length: totalPages }, (_, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
w="6px"
|
||||
h="6px"
|
||||
borderRadius="50%"
|
||||
bg={index + 1 === page ? 'rgba(255, 255, 255, 0.80)' : 'rgba(255, 255, 255, 0.30)'}
|
||||
/>
|
||||
))}
|
||||
</HStack>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import { Flex, Icon, Text } from '@chakra-ui/react';
|
||||
import { useMessage } from '@sealos/ui';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
|
||||
export default function Assistant() {
|
||||
const { t } = useTranslation();
|
||||
const { message } = useMessage();
|
||||
|
||||
return (
|
||||
<Flex
|
||||
flexShrink={0}
|
||||
bg={'rgba(22, 30, 40, 0.35)'}
|
||||
backdropFilter={'blur(80px) saturate(180%)'}
|
||||
border={'none'}
|
||||
borderRadius={'12px'}
|
||||
height={{ base: '32px', sm: '48px' }}
|
||||
px={{ base: '8px', sm: '14px' }}
|
||||
alignItems={'center'}
|
||||
color={'white'}
|
||||
fontSize={'base'}
|
||||
fontWeight={'bold'}
|
||||
gap={'8px'}
|
||||
onClick={() => {
|
||||
message({
|
||||
title: t('Under active development')
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
width="29px"
|
||||
height="28px"
|
||||
viewBox="0 0 29 28"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="14.5985" cy="14" r="14" fill="white" fillOpacity="0.2" />
|
||||
<circle cx="14.5985" cy="14" r="12" fill="white" fillOpacity="0.9" />
|
||||
<text
|
||||
x="14.5985"
|
||||
y="16"
|
||||
textAnchor="middle"
|
||||
alignmentBaseline="middle"
|
||||
fontSize="12"
|
||||
fontFamily="Arial, sans-serif"
|
||||
fill="black"
|
||||
>
|
||||
🤖
|
||||
</text>
|
||||
</Icon>
|
||||
<Text display={{ base: 'none', md: 'block' }}>{t('Sealos Copilot')}</Text>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
@@ -1,32 +1,47 @@
|
||||
import { getGlobalNotification } from '@/api/platform';
|
||||
import AppWindow from '@/components/app_window';
|
||||
import MoreButton from '@/components/more_button';
|
||||
import UserMenu from '@/components/user_menu';
|
||||
import useDriver from '@/hooks/useDriver';
|
||||
// import useDriver from '@/hooks/useDriver';
|
||||
import useAppStore from '@/stores/app';
|
||||
import { useConfigStore } from '@/stores/config';
|
||||
import { TApp, WindowSize } from '@/types';
|
||||
import { Box, Flex, Grid, GridItem, Image, Text } from '@chakra-ui/react';
|
||||
import { Box, Center, Flex, Text } from '@chakra-ui/react';
|
||||
import { WarnTriangleIcon, useMessage } from '@sealos/ui';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { MouseEvent, useCallback, useEffect, useState } from 'react';
|
||||
import { createMasterAPP, masterApp } from 'sealos-desktop-sdk/master';
|
||||
import Cost from '../account/cost';
|
||||
import TriggerAccountModule from '../account/trigger';
|
||||
import { ChakraIndicator } from './ChakraIndicator';
|
||||
import Apps from './apps';
|
||||
import Assistant from './assistant';
|
||||
import IframeWindow from './iframe_window';
|
||||
import styles from './index.module.scss';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { getGlobalNotification } from '@/api/platform';
|
||||
import { useMessage } from '@sealos/ui';
|
||||
import { useConfigStore } from '@/stores/config';
|
||||
const TimeComponent = dynamic(() => import('./time'), {
|
||||
ssr: false
|
||||
});
|
||||
import Monitor from './monitor';
|
||||
import SearchBox from './searchBox';
|
||||
import { EmptyIcon } from '../icons';
|
||||
import { useDesktopConfigStore } from '@/stores/desktopConfig';
|
||||
import Warn from './warn';
|
||||
|
||||
export default function DesktopContent(props: any) {
|
||||
const AppDock = dynamic(() => import('../AppDock'), { ssr: false });
|
||||
const FloatButton = dynamic(() => import('@/components/floating_button'), { ssr: false });
|
||||
const Account = dynamic(() => import('../account'), { ssr: false });
|
||||
|
||||
export const blurBackgroundStyles = {
|
||||
bg: 'rgba(22, 30, 40, 0.35)',
|
||||
backdropFilter: 'blur(80px) saturate(150%)',
|
||||
border: 'none',
|
||||
borderRadius: '12px'
|
||||
};
|
||||
|
||||
export default function Desktop(props: any) {
|
||||
const { t, i18n } = useTranslation();
|
||||
const { isAppBar, toggleShape } = useDesktopConfigStore();
|
||||
const { installedApps: apps, runningInfo, openApp, setToHighestLayerById } = useAppStore();
|
||||
const backgroundImage = useConfigStore().layoutConfig?.backgroundImage;
|
||||
const logo = useConfigStore().layoutConfig?.logo;
|
||||
const renderApps = apps.filter((item: TApp) => item?.displayType === 'normal');
|
||||
const [maxItems, setMaxItems] = useState(10);
|
||||
const { message } = useMessage();
|
||||
const [showAccount, setShowAccount] = useState(false);
|
||||
|
||||
const handleDoubleClick = (e: MouseEvent<HTMLDivElement>, item: TApp) => {
|
||||
e.preventDefault();
|
||||
@@ -88,7 +103,7 @@ export default function DesktopContent(props: any) {
|
||||
return masterApp?.addEventListen('openDesktopApp', openDesktopApp);
|
||||
}, [openDesktopApp]);
|
||||
|
||||
const { UserGuide, showGuide } = useDriver({ openDesktopApp });
|
||||
// const { UserGuide, showGuide } = useDriver({ openDesktopApp });
|
||||
|
||||
useQuery(['getGlobalNotification'], getGlobalNotification, {
|
||||
onSuccess(data) {
|
||||
@@ -114,12 +129,78 @@ export default function DesktopContent(props: any) {
|
||||
backgroundImage={`url(${backgroundImage || '/images/bg-blue.jpg'})`}
|
||||
backgroundRepeat={'no-repeat'}
|
||||
backgroundSize={'cover'}
|
||||
position={'relative'}
|
||||
>
|
||||
<Flex w="100%" h="100%" alignItems={'center'} flexDirection={'column'}>
|
||||
<Box mt="12vh" minW={'508px'}>
|
||||
<TimeComponent />
|
||||
<ChakraIndicator />
|
||||
<Flex
|
||||
gap={'8px'}
|
||||
width={'100%'}
|
||||
height={'calc(100% - 87px)'}
|
||||
pt={'24px'}
|
||||
px={'24px'}
|
||||
mx={'auto'}
|
||||
maxW={'1300px'}
|
||||
maxH={'1000px'}
|
||||
position={'relative'}
|
||||
>
|
||||
{/* monitor */}
|
||||
<Flex
|
||||
flex={'0 0 250px'}
|
||||
flexDirection={'column'}
|
||||
display={{
|
||||
base: 'none',
|
||||
xl: 'flex'
|
||||
}}
|
||||
gap={'8px'}
|
||||
>
|
||||
<Assistant />
|
||||
<Monitor />
|
||||
<Warn />
|
||||
</Flex>
|
||||
|
||||
{/* apps */}
|
||||
<Flex flexDirection={'column'} gap={'8px'} flex={1} position={'relative'}>
|
||||
<Flex zIndex={2} flexShrink={0} height={{ base: '32px', sm: '48px' }} gap={'8px'}>
|
||||
<Box display={{ base: 'block', xl: 'none' }}>
|
||||
<Assistant />
|
||||
</Box>
|
||||
<SearchBox />
|
||||
<TriggerAccountModule showAccount={showAccount} setShowAccount={setShowAccount} />
|
||||
</Flex>
|
||||
<Apps />
|
||||
</Flex>
|
||||
|
||||
{/* user account */}
|
||||
<Box position={'relative'}>
|
||||
{showAccount && (
|
||||
<Box
|
||||
position={'fixed'}
|
||||
inset={0}
|
||||
zIndex={2}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setShowAccount(false);
|
||||
}}
|
||||
></Box>
|
||||
)}
|
||||
<Box
|
||||
display={{ base: showAccount ? 'flex' : 'none', lg: 'flex' }}
|
||||
position={{ base: 'absolute', lg: 'relative' }}
|
||||
right={{ base: '0px', lg: 'auto' }}
|
||||
top={{ base: '0px', lg: 'auto' }}
|
||||
flexDirection={'column'}
|
||||
gap={'8px'}
|
||||
flex={'0 0 266px'}
|
||||
width={'266px'}
|
||||
h={'full'}
|
||||
zIndex={3}
|
||||
>
|
||||
<Account />
|
||||
<Cost />
|
||||
</Box>
|
||||
</Box>
|
||||
{showGuide ? (
|
||||
|
||||
{/* {showGuide ? (
|
||||
<>
|
||||
<UserGuide />
|
||||
<Box
|
||||
@@ -134,63 +215,11 @@ export default function DesktopContent(props: any) {
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{/* desktop apps */}
|
||||
<Grid
|
||||
mt="50px"
|
||||
minW={'508px'}
|
||||
maxH={'300px'}
|
||||
templateRows={'repeat(2, 100px)'}
|
||||
templateColumns={'repeat(5, 72px)'}
|
||||
gap={'36px'}
|
||||
>
|
||||
{renderApps &&
|
||||
renderApps.slice(0, maxItems).map((item: TApp, index) => (
|
||||
<GridItem
|
||||
w="72px"
|
||||
h="100px"
|
||||
key={index}
|
||||
userSelect="none"
|
||||
cursor={'pointer'}
|
||||
onClick={(e) => handleDoubleClick(e, item)}
|
||||
>
|
||||
<Box
|
||||
className={item.key}
|
||||
w="72px"
|
||||
h="72px"
|
||||
p={'12px'}
|
||||
border={'1px solid #FFFFFF'}
|
||||
borderRadius={8}
|
||||
boxShadow={'0px 1.16667px 2.33333px rgba(0, 0, 0, 0.2)'}
|
||||
backgroundColor={'rgba(244, 246, 248, 0.9)'}
|
||||
>
|
||||
<Image
|
||||
width="100%"
|
||||
height="100%"
|
||||
src={item?.icon}
|
||||
fallbackSrc={logo || '/logo.svg'}
|
||||
draggable={false}
|
||||
alt="user avator"
|
||||
/>
|
||||
</Box>
|
||||
<Text
|
||||
textShadow={'0px 1px 2px rgba(0, 0, 0, 0.4)'}
|
||||
textAlign={'center'}
|
||||
mt="8px"
|
||||
color={'#FFFFFF'}
|
||||
fontSize={'13px'}
|
||||
lineHeight={'16px'}
|
||||
>
|
||||
{item?.i18n?.[i18n?.language]?.name
|
||||
? item?.i18n?.[i18n?.language]?.name
|
||||
: t(item?.name)}
|
||||
</Text>
|
||||
</GridItem>
|
||||
))}
|
||||
</Grid>
|
||||
<MoreButton />
|
||||
<UserMenu />
|
||||
)} */}
|
||||
</Flex>
|
||||
|
||||
{isAppBar ? <AppDock /> : <FloatButton />}
|
||||
|
||||
{/* opened apps */}
|
||||
{runningInfo.map((process) => {
|
||||
return (
|
||||
|
||||
@@ -0,0 +1,122 @@
|
||||
import { getResource } from '@/api/platform';
|
||||
import { Box, CircularProgress, CircularProgressLabel, Flex, Text } from '@chakra-ui/react';
|
||||
import { MonitorIcon } from '@sealos/ui';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { CpuIcon, FlowIcon, MemoryIcon, StorageIcon } from '../icons';
|
||||
import { blurBackgroundStyles } from './index';
|
||||
|
||||
export default function Monitor({ needStyles = true }: { needStyles?: boolean }) {
|
||||
const { t } = useTranslation();
|
||||
const { data } = useQuery(['appListQuery'], getResource, {
|
||||
cacheTime: 5 * 60 * 1000
|
||||
});
|
||||
|
||||
const info = [
|
||||
{
|
||||
label: 'CPU',
|
||||
value: data?.data?.totalCpu,
|
||||
icon: <CpuIcon />,
|
||||
unit: 'C'
|
||||
},
|
||||
{
|
||||
label: t('Memory'),
|
||||
value: data?.data?.totalMemory,
|
||||
icon: <MemoryIcon />,
|
||||
unit: 'GB'
|
||||
},
|
||||
{
|
||||
label: t('Storage'),
|
||||
value: data?.data?.totalStorage,
|
||||
icon: <StorageIcon />,
|
||||
unit: 'GB'
|
||||
},
|
||||
{
|
||||
label: t('Flow'),
|
||||
value: `~`,
|
||||
icon: <FlowIcon />,
|
||||
unit: 'GB'
|
||||
}
|
||||
];
|
||||
|
||||
const totalPodCount = Number(data?.data?.totalPodCount) || 0;
|
||||
const runningPodCount = Number(data?.data?.runningPodCount) || 0;
|
||||
const runningPodPercentage =
|
||||
totalPodCount > 0 ? Math.round((runningPodCount / totalPodCount) * 100) : 0;
|
||||
|
||||
return (
|
||||
<Flex
|
||||
flex={1}
|
||||
flexDirection={'column'}
|
||||
zIndex={2}
|
||||
py={'20px'}
|
||||
px={'16px'}
|
||||
{...(needStyles ? blurBackgroundStyles : {})}
|
||||
>
|
||||
{needStyles && (
|
||||
<Flex alignItems={'center'} gap={'6px'}>
|
||||
<MonitorIcon />
|
||||
<Text color={'rgba(255, 255, 255, 0.90)'} fontWeight={'bold'} fontSize={'14px'}>
|
||||
{t('Monitor')}
|
||||
</Text>
|
||||
</Flex>
|
||||
)}
|
||||
|
||||
<Flex alignItems={'center'} mt={'12px'} gap={'20px'}>
|
||||
<CircularProgress
|
||||
size={'90px'}
|
||||
trackColor={'#FF8398'}
|
||||
value={runningPodPercentage}
|
||||
color="#2BE0B3"
|
||||
>
|
||||
<CircularProgressLabel color={'white'} fontSize={'14px'} fontWeight={700}>
|
||||
{runningPodPercentage}%
|
||||
</CircularProgressLabel>
|
||||
</CircularProgress>
|
||||
<Flex
|
||||
flexDirection={'column'}
|
||||
color={'rgba(255, 255, 255, 0.90)'}
|
||||
fontSize={'12px'}
|
||||
fontWeight={500}
|
||||
>
|
||||
<Flex alignItems={'center'} gap={'8px'}>
|
||||
<Box bg={'#2BE0B3'} w={'7px'} h={'7px'} borderRadius={'2px'}></Box>
|
||||
<Text>{t('Healthy Pod', { count: runningPodCount })}</Text>
|
||||
</Flex>
|
||||
<Flex alignItems={'center'} gap={'8px'}>
|
||||
<Box bg={'#FF8398'} w={'7px'} h={'7px'} borderRadius={'2px'}></Box>
|
||||
<Text>{t('Alarm Pod', { count: totalPodCount - runningPodCount })}</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Text mt={'16px'} color={'rgba(255, 255, 255, 0.80)'} fontSize={'10px'} fontWeight={'bold'}>
|
||||
{t('Used Resources')}
|
||||
</Text>
|
||||
<Flex mt={'8px'} flexWrap={'wrap'} gap={'8px'}>
|
||||
{info.map((item) => (
|
||||
<Box
|
||||
key={item.label}
|
||||
p={'12px'}
|
||||
width={'105px'}
|
||||
height={'72px'}
|
||||
bg={'rgba(255, 255, 255, 0.07)'}
|
||||
borderRadius={'6px'}
|
||||
>
|
||||
<Flex gap={'4px'}>
|
||||
{item.icon}
|
||||
<Text fontSize={'10px'} color={'rgba(255, 255, 255, 0.90)'} fontWeight={'bold'}>
|
||||
{item.label}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex gap={'4px'} mt={'4px'} color={'white'} fontWeight={700} alignItems={'end'}>
|
||||
<Text fontSize={'18px'}>{item.value}</Text>
|
||||
<Text lineHeight={'20px'} fontSize={'10px'}>
|
||||
{item.unit}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Box>
|
||||
))}
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
import useAppStore from '@/stores/app';
|
||||
import { useConfigStore } from '@/stores/config';
|
||||
import { TApp } from '@/types';
|
||||
import { Box, Center, Flex, Image, Input } from '@chakra-ui/react';
|
||||
import { SearchIcon } from '@sealos/ui';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { useRef, useState } from 'react';
|
||||
import { blurBackgroundStyles } from './index';
|
||||
|
||||
export default function SearchBox() {
|
||||
const { t, i18n } = useTranslation();
|
||||
const logo = useConfigStore().layoutConfig?.logo;
|
||||
const { installedApps: apps, runningInfo, openApp, setToHighestLayerById } = useAppStore();
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
|
||||
const getAppNames = (app: TApp) => {
|
||||
const names = [app.name];
|
||||
if (app.i18n) {
|
||||
Object.values(app.i18n).forEach((i18nData) => {
|
||||
if (i18nData.name) {
|
||||
names.push(i18nData.name);
|
||||
}
|
||||
});
|
||||
}
|
||||
return names;
|
||||
};
|
||||
|
||||
// Filter apps based on search term
|
||||
const filteredApps = apps.filter((app) => {
|
||||
const appNames = getAppNames(app);
|
||||
return appNames.some((name) => name.toLowerCase().includes(searchTerm.toLowerCase()));
|
||||
});
|
||||
|
||||
return (
|
||||
<Box
|
||||
flex={1}
|
||||
onClick={() => {
|
||||
inputRef.current?.focus();
|
||||
}}
|
||||
cursor={'pointer'}
|
||||
position={'relative'}
|
||||
>
|
||||
<Flex
|
||||
height={'full'}
|
||||
alignItems={'center'}
|
||||
color={'white'}
|
||||
bg={'rgba(22, 30, 40, 0.35)'}
|
||||
backdropFilter={'blur(80px) saturate(180%)'}
|
||||
border={'none'}
|
||||
borderRadius={'12px'}
|
||||
>
|
||||
<SearchIcon ml={'16px'} width={'16px'} height={'16px'} />
|
||||
<Input
|
||||
pl={'6px'}
|
||||
mr={'16px'}
|
||||
ref={inputRef}
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
w={'full'}
|
||||
outline={'none'}
|
||||
type="text"
|
||||
placeholder={t('Search Apps') || 'Search Apps'}
|
||||
bg={'transparent'}
|
||||
outlineOffset={''}
|
||||
border={'none'}
|
||||
_placeholder={{ color: 'white' }}
|
||||
boxShadow={'none'}
|
||||
_hover={{
|
||||
bg: 'transparent'
|
||||
}}
|
||||
_focus={{
|
||||
bg: 'transparent',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
boxShadow: 'none'
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
{searchTerm !== '' && (
|
||||
<Flex
|
||||
flexDirection={'column'}
|
||||
position={'absolute'}
|
||||
top={'100%'}
|
||||
width={'100%'}
|
||||
mt={2}
|
||||
p={'16px'}
|
||||
color={'rgba(255, 255, 255, 0.90)'}
|
||||
{...blurBackgroundStyles}
|
||||
>
|
||||
{filteredApps.length > 0 ? (
|
||||
filteredApps.map((app) => (
|
||||
<Flex
|
||||
key={app.key}
|
||||
p={'7px 13px'}
|
||||
cursor="pointer"
|
||||
_hover={{ bg: 'rgba(255, 255, 255, 0.07)' }}
|
||||
alignItems={'center'}
|
||||
borderRadius={'md'}
|
||||
onClick={() => {
|
||||
openApp(app);
|
||||
setSearchTerm('');
|
||||
}}
|
||||
display={'flex'}
|
||||
gap={'10px'}
|
||||
fontSize={'12px'}
|
||||
fontWeight={500}
|
||||
color={'rgba(255, 255, 255, 0.90)'}
|
||||
>
|
||||
<Center
|
||||
w="28px"
|
||||
h="28px"
|
||||
borderRadius={'md'}
|
||||
boxShadow={'0px 2px 6px 0px rgba(17, 24, 36, 0.15)'}
|
||||
backgroundColor={'rgba(255, 255, 255, 0.90)'}
|
||||
backdropFilter={'blur(50px)'}
|
||||
>
|
||||
<Image
|
||||
width="20px"
|
||||
height="20px"
|
||||
src={app?.icon}
|
||||
fallbackSrc={logo || '/logo.svg'}
|
||||
draggable={false}
|
||||
alt="app logo"
|
||||
/>
|
||||
</Center>
|
||||
|
||||
{app?.i18n?.[i18n?.language]?.name
|
||||
? app?.i18n?.[i18n?.language]?.name
|
||||
: t(app?.name)}
|
||||
</Flex>
|
||||
))
|
||||
) : (
|
||||
<Flex
|
||||
p={'7px 13px'}
|
||||
fontSize={'12px'}
|
||||
fontWeight={500}
|
||||
color={'rgba(255, 255, 255, 0.90)'}
|
||||
>
|
||||
{t('No Apps Found') || 'No Apps Found'}
|
||||
</Flex>
|
||||
)}
|
||||
</Flex>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { formatTime } from '@/utils/tools';
|
||||
import { Flex, Text } from '@chakra-ui/react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { useEffect, useLayoutEffect, useMemo, useState } from 'react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
|
||||
const WeekDay = {
|
||||
Sunday: '周日',
|
||||
@@ -25,9 +25,7 @@ export default function TimeComponent(props: any) {
|
||||
clearInterval(timer);
|
||||
};
|
||||
}, []);
|
||||
// useLayoutEffect(()=>{
|
||||
// setTime(new Date())
|
||||
// },[])
|
||||
|
||||
const day = useMemo(() => {
|
||||
try {
|
||||
const temp = formatTime(time, 'dddd') as keyof typeof WeekDay;
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
import { Flex, Center, Text } from '@chakra-ui/react';
|
||||
import { WarnTriangleIcon } from '@sealos/ui';
|
||||
import { EmptyIcon } from '../icons';
|
||||
import { blurBackgroundStyles } from './index';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
|
||||
export default function Warn() {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Flex
|
||||
flexDirection={'column'}
|
||||
flex={'0 1 400px'}
|
||||
pt={'20px '}
|
||||
px={'16px'}
|
||||
position={'relative'}
|
||||
{...blurBackgroundStyles}
|
||||
>
|
||||
<Flex flex={1} flexDirection={'column'} gap={'6px'}>
|
||||
<Flex alignItems={'center'} gap={'6px'}>
|
||||
<WarnTriangleIcon />
|
||||
<Text color={'rgba(255, 255, 255, 0.90)'} fontWeight={'bold'} fontSize={'14px'}>
|
||||
{t('Alerts')}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Center flex={1}>
|
||||
<Center
|
||||
w={'32px'}
|
||||
h={'32px'}
|
||||
borderRadius={'full'}
|
||||
border={'1px dashed rgba(255, 255, 255, 0.70)'}
|
||||
>
|
||||
<EmptyIcon width={'16px'} height={'16px'} />
|
||||
</Center>
|
||||
</Center>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
@@ -156,3 +156,28 @@
|
||||
left: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
// .contexify {
|
||||
// background: rgba(239, 239, 242, 0.7);
|
||||
// backdrop-filter: blur(80px) saturate(150%);
|
||||
// color: #111824;
|
||||
// padding: 6px;
|
||||
// font-size: 12px;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// min-width: 140px;
|
||||
// }
|
||||
|
||||
// .arrow {
|
||||
// position: absolute;
|
||||
// top: 100%;
|
||||
// left: 46%;
|
||||
// width: 0;
|
||||
// height: 0;
|
||||
// width: 16px;
|
||||
// height: 9px;
|
||||
// background: rgba(239, 239, 242, 0.7);
|
||||
// backdrop-filter: blur(80px) saturate(150%);
|
||||
// clip-path: polygon(50% 100%, 0 0, 100% 0);
|
||||
// border-radius: 4px;
|
||||
// }
|
||||
|
||||
@@ -1,13 +1,16 @@
|
||||
import useAppStore, { AppInfo } from '@/stores/app';
|
||||
import { Box, Flex, useDisclosure, Image, Img } from '@chakra-ui/react';
|
||||
import { useConfigStore } from '@/stores/config';
|
||||
import { useDesktopConfigStore } from '@/stores/desktopConfig';
|
||||
import { APPTYPE } from '@/types';
|
||||
import { Box, Flex, Image, useDisclosure } from '@chakra-ui/react';
|
||||
import clsx from 'clsx';
|
||||
import { MouseEvent, useMemo, useState } from 'react';
|
||||
import { Menu, useContextMenu } from 'react-contexify';
|
||||
import Draggable, { DraggableEventHandler } from 'react-draggable';
|
||||
import Iconfont from '../iconfont';
|
||||
import styles from './index.module.scss';
|
||||
import homeIcon from 'public/icons/home.svg';
|
||||
import { APPTYPE } from '@/types';
|
||||
import { useConfigStore } from '@/stores/config';
|
||||
import dockStyles from '@/components/AppDock/index.module.css';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
|
||||
enum Suction {
|
||||
None,
|
||||
@@ -15,7 +18,10 @@ enum Suction {
|
||||
Right = 'right'
|
||||
}
|
||||
|
||||
export default function Index(props: any) {
|
||||
const Floating_Button_Menu_Id = 'Floating_Button_Menu_Id';
|
||||
|
||||
export default function FloatingButton() {
|
||||
const { t } = useTranslation();
|
||||
const {
|
||||
installedApps: apps,
|
||||
runningInfo,
|
||||
@@ -31,6 +37,12 @@ export default function Index(props: any) {
|
||||
const [endPosition, setEndPosition] = useState({ x: 0, y: 0 });
|
||||
const [suction, setSuction] = useState(Suction.None);
|
||||
const [lockSuction, setLockSuction] = useState(true);
|
||||
const { isAppBar, toggleShape } = useDesktopConfigStore();
|
||||
const { show } = useContextMenu({
|
||||
id: Floating_Button_Menu_Id
|
||||
});
|
||||
const [isRightClick, setIsRightClick] = useState(false);
|
||||
|
||||
// Hover Ball Menu
|
||||
const AppMenuLists: AppInfo[] = [
|
||||
{
|
||||
@@ -152,6 +164,21 @@ export default function Index(props: any) {
|
||||
}
|
||||
};
|
||||
|
||||
const displayMenu = (e: MouseEvent<HTMLDivElement>) => {
|
||||
e.stopPropagation();
|
||||
setIsRightClick(true);
|
||||
onClose();
|
||||
show({
|
||||
event: e,
|
||||
position: {
|
||||
// @ts-ignore
|
||||
x: '-65%',
|
||||
// @ts-ignore
|
||||
y: '-80%'
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Draggable
|
||||
@@ -171,11 +198,13 @@ export default function Index(props: any) {
|
||||
position={position}
|
||||
>
|
||||
<div
|
||||
onContextMenu={(e) => displayMenu(e)}
|
||||
id="floatButtonNav"
|
||||
className={clsx(styles.container, 'floatButtonNav', dragging ? styles.notrans : '')}
|
||||
data-open={isOpen}
|
||||
onMouseEnter={(e) => {
|
||||
if (suction !== Suction.None) return;
|
||||
if (isRightClick) return;
|
||||
onOpen();
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
@@ -283,6 +312,22 @@ export default function Index(props: any) {
|
||||
height={24}
|
||||
/>
|
||||
</Flex>
|
||||
<Menu className={dockStyles.contexify} id={Floating_Button_Menu_Id}>
|
||||
<>
|
||||
<Box
|
||||
cursor={'pointer'}
|
||||
p={'4px'}
|
||||
_hover={{
|
||||
bg: 'rgba(17, 24, 36, 0.10)'
|
||||
}}
|
||||
onClick={toggleShape}
|
||||
borderRadius={'4px'}
|
||||
>
|
||||
{t('Toggle App Bar')}
|
||||
<div className={dockStyles.arrow}></div>
|
||||
</Box>
|
||||
</>
|
||||
</Menu>
|
||||
</div>
|
||||
</Draggable>
|
||||
{dragging && (
|
||||
|
||||
@@ -0,0 +1,357 @@
|
||||
import { Icon, IconProps } from '@chakra-ui/react';
|
||||
|
||||
export function ArrowLeftIcon(props: IconProps) {
|
||||
return (
|
||||
<Icon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="12px"
|
||||
height="40px"
|
||||
viewBox="0 0 12 40"
|
||||
fill="none"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M4.04614 19.6923L9.10972 5.06414C9.22077 4.74332 9.05072 4.39321 8.7299 4.28216C8.40908 4.17111 8.05897 4.34116 7.94792 4.66198L2.81768 19.4828C2.78016 19.5912 2.77472 19.7029 2.79635 19.8076C2.80159 19.8386 2.80927 19.8695 2.8195 19.9002L7.96317 35.3312C8.07053 35.6533 8.41865 35.8274 8.74073 35.72C9.06281 35.6126 9.23687 35.2645 9.12951 34.9424L4.04614 19.6923Z"
|
||||
fill="white"
|
||||
/>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
export function ArrowRightIcon(props: IconProps) {
|
||||
return (
|
||||
<Icon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="12px"
|
||||
height="40px"
|
||||
viewBox="0 0 12 40"
|
||||
fill="none"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M7.92652 19.6923L2.86294 5.06414C2.75189 4.74332 2.92194 4.39322 3.24276 4.28216C3.56358 4.17111 3.91368 4.34116 4.02474 4.66198L9.15498 19.4828C9.1925 19.5912 9.19793 19.7029 9.1763 19.8076C9.17107 19.8386 9.16339 19.8695 9.15316 19.9002L4.00949 35.3312C3.90213 35.6533 3.554 35.8274 3.23193 35.72C2.90985 35.6126 2.73579 35.2645 2.84315 34.9424L7.92652 19.6923Z"
|
||||
fill="white"
|
||||
/>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
export function CpuIcon(props: IconProps) {
|
||||
return (
|
||||
<Icon
|
||||
{...props}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="13px"
|
||||
height="13px"
|
||||
viewBox="0 0 13 13"
|
||||
fill="none"
|
||||
>
|
||||
<g clipPath="url(#clip0_6558_19095)">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M4.53587 1.74976C4.53587 1.47361 4.75972 1.24976 5.03587 1.24976C5.31201 1.24976 5.53587 1.47361 5.53587 1.74976V2.53473H6.83587V1.74976C6.83587 1.47361 7.05973 1.24976 7.33587 1.24976C7.61201 1.24976 7.83587 1.47361 7.83587 1.74976V2.53473H8.25111C9.30045 2.53473 10.1511 3.38539 10.1511 4.43473V4.85001H10.9361C11.2123 4.85001 11.4361 5.07387 11.4361 5.35001C11.4361 5.62616 11.2123 5.85001 10.9361 5.85001H10.1511V7.15H10.9361C11.2123 7.15 11.4361 7.37386 11.4361 7.65C11.4361 7.92614 11.2123 8.15 10.9361 8.15H10.1511V8.56527C10.1511 9.61461 9.30045 10.4653 8.25111 10.4653H7.83587V11.2503C7.83587 11.5264 7.61201 11.7503 7.33587 11.7503C7.05973 11.7503 6.83587 11.5264 6.83587 11.2503V10.4653H5.53587V11.2503C5.53587 11.5264 5.31201 11.7503 5.03587 11.7503C4.75972 11.7503 4.53587 11.5264 4.53587 11.2503V10.4653H4.12057C3.07123 10.4653 2.22057 9.61461 2.22057 8.56527V8.15H1.43561C1.15947 8.15 0.935608 7.92614 0.935608 7.65C0.935608 7.37386 1.15947 7.15 1.43561 7.15H2.22057V5.85001H1.43561C1.15947 5.85001 0.935608 5.62616 0.935608 5.35001C0.935608 5.07387 1.15947 4.85001 1.43561 4.85001H2.22057V4.43473C2.22057 3.38539 3.07122 2.53473 4.12057 2.53473H4.53587V1.74976ZM4.12057 3.53473C3.62351 3.53473 3.22057 3.93767 3.22057 4.43473V8.56527C3.22057 9.06233 3.62351 9.46527 4.12057 9.46527H8.25111C8.74816 9.46527 9.15111 9.06233 9.15111 8.56527V4.43473C9.15111 3.93767 8.74816 3.53473 8.25111 3.53473H4.12057Z"
|
||||
fill="white"
|
||||
fillOpacity="0.9"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_6558_19095">
|
||||
<rect width="12" height="12" fill="white" transform="translate(0.185852 0.5)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
export function MemoryIcon(props: IconProps) {
|
||||
return (
|
||||
<Icon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="13px"
|
||||
height="13px"
|
||||
viewBox="0 0 13 13"
|
||||
fill="none"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M4.04445 4.39832C4.04445 4.12217 4.26831 3.89832 4.54445 3.89832C4.82059 3.89832 5.04445 4.12217 5.04445 4.39832V5.39832C5.04445 5.67446 4.82059 5.89832 4.54445 5.89832C4.26831 5.89832 4.04445 5.67446 4.04445 5.39832V4.39832Z"
|
||||
fill="white"
|
||||
fillOpacity="0.9"
|
||||
/>
|
||||
<path
|
||||
d="M6.66492 3.89832C6.38877 3.89832 6.16492 4.12217 6.16492 4.39832V5.39832C6.16492 5.67446 6.38877 5.89832 6.66492 5.89832C6.94106 5.89832 7.16492 5.67446 7.16492 5.39832V4.39832C7.16492 4.12217 6.94106 3.89832 6.66492 3.89832Z"
|
||||
fill="white"
|
||||
fillOpacity="0.9"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M1.90759 3.25861C1.90759 2.28628 2.69582 1.49805 3.66816 1.49805H6.70586C7.1728 1.49805 7.6206 1.68353 7.95077 2.0137L9.94832 4.01125C10.2785 4.34142 10.464 4.78923 10.464 5.25616V9.74152C10.464 10.7139 9.67574 11.5021 8.70341 11.5021H3.66816C2.69583 11.5021 1.90759 10.7139 1.90759 9.74152V3.25861ZM3.66816 2.49805C3.24811 2.49805 2.90759 2.83856 2.90759 3.25861V9.74152C2.90759 10.1616 3.24811 10.5021 3.66816 10.5021H8.70341C9.12346 10.5021 9.46397 10.1616 9.46397 9.74152V5.25616C9.46397 5.05444 9.38384 4.86099 9.24121 4.71836L7.24367 2.72081C7.10103 2.57818 6.90758 2.49805 6.70586 2.49805H3.66816Z"
|
||||
fill="white"
|
||||
fillOpacity="0.9"
|
||||
/>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
export function FlowIcon(props: IconProps) {
|
||||
return (
|
||||
<Icon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="13px"
|
||||
height="13px"
|
||||
viewBox="0 0 13 13"
|
||||
fill="none"
|
||||
{...props}
|
||||
>
|
||||
<g clipPath="url(#clip0_6558_19114)">
|
||||
<path
|
||||
d="M4.15896 2.01045C4.26944 1.56395 4.85598 1.55058 5.00015 1.96184L6.5594 8.68413L7.53927 5.21395C7.64706 4.83087 8.1285 4.76754 8.32999 5.08657L9.33598 7.14726H11.0399C11.2884 7.14726 11.4897 7.34896 11.4897 7.59771C11.4897 7.86055 11.277 8.07365 11.0144 8.07365H9.06557C8.91891 8.07375 8.78189 7.99757 8.69959 7.8703L8.07243 6.59006L6.94092 10.5985C6.818 11.0334 6.24473 11.0366 6.10377 10.6309L4.57178 4.02813L3.6542 7.72716C3.60818 7.91258 3.458 8.04919 3.27631 8.07085L1.32631 8.07303C1.08108 8.07334 0.88208 7.87434 0.88208 7.6287V7.58019C0.88208 7.34108 1.07569 7.14716 1.31449 7.14716H2.88432L4.15896 2.01045Z"
|
||||
fill="white"
|
||||
fillOpacity="0.9"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_6558_19114">
|
||||
<rect width="12" height="12" fill="white" transform="translate(0.185791 0.5)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
export function StorageIcon(props: IconProps) {
|
||||
return (
|
||||
<Icon
|
||||
{...props}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="13px"
|
||||
height="13px"
|
||||
viewBox="0 0 13 13"
|
||||
fill="none"
|
||||
>
|
||||
<g clipPath="url(#clip0_6558_19108)">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M4.59285 2.00003C4.61792 2.00005 4.64333 2.00007 4.66908 2.00007H7.70252C7.72827 2.00007 7.75368 2.00005 7.77875 2.00003C8.2426 1.99972 8.59229 1.99948 8.91089 2.10938C9.19114 2.20604 9.4464 2.3638 9.65819 2.57123C9.89896 2.80705 10.0551 3.11993 10.2623 3.53494C10.2735 3.55737 10.2848 3.58011 10.2964 3.60315L11.3796 5.76971C11.384 5.77845 11.3883 5.78708 11.3926 5.7956C11.4747 5.95963 11.5367 6.0837 11.5814 6.2164C11.6208 6.33367 11.6493 6.45435 11.6665 6.57687C11.6859 6.71553 11.6859 6.85425 11.6858 7.03766C11.6858 7.04719 11.6858 7.05685 11.6858 7.06663V8.12073C11.6858 8.52321 11.6858 8.85538 11.6637 9.12598C11.6407 9.40703 11.5915 9.66538 11.4678 9.90805C11.2761 10.2844 10.9701 10.5903 10.5938 10.7821C10.3511 10.9057 10.0928 10.955 9.81171 10.978C9.54112 11.0001 9.20894 11.0001 8.80646 11.0001H3.56514C3.16266 11.0001 2.83048 11.0001 2.55989 10.978C2.27884 10.955 2.02049 10.9057 1.77782 10.7821C1.4015 10.5903 1.09554 10.2844 0.903789 9.90805C0.780143 9.66538 0.730861 9.40703 0.707898 9.12598C0.68579 8.85538 0.685795 8.5232 0.685801 8.12072L0.685802 7.06663C0.685802 7.05685 0.685799 7.04719 0.685796 7.03766C0.685745 6.85425 0.685706 6.71553 0.705118 6.57688C0.722272 6.45434 0.75076 6.33367 0.790215 6.2164C0.83486 6.0837 0.896933 5.95964 0.978998 5.79563C0.983265 5.7871 0.987587 5.77846 0.991962 5.76971L1.43918 5.99332L1.4421 5.99478M1.43918 5.99332L0.991962 5.76971L2.07524 3.60315C2.08676 3.58011 2.09811 3.55738 2.10931 3.53495C2.31647 3.11993 2.47264 2.80705 2.71341 2.57123C2.9252 2.3638 3.18046 2.20604 3.46071 2.10938C3.77931 1.99948 4.129 1.99972 4.59285 2.00003M1.99482 6.00007L2.96967 4.05036C3.22668 3.53635 3.30768 3.38893 3.41313 3.28565C3.51903 3.18193 3.64666 3.10305 3.78678 3.05472C3.92632 3.00659 4.0944 3.00007 4.66908 3.00007H7.70252C8.2772 3.00007 8.44528 3.00659 8.58482 3.05472C8.72495 3.10305 8.85257 3.18193 8.95847 3.28565C9.06392 3.38893 9.14492 3.53635 9.40193 4.05036L10.3768 6.00007H1.99482ZM1.68585 7.00007C1.68581 7.02057 1.6858 7.0427 1.6858 7.06663V8.10007C1.6858 8.52836 1.68619 8.8195 1.70458 9.04455C1.72249 9.26376 1.75495 9.37586 1.79479 9.45406C1.89067 9.64222 2.04365 9.7952 2.23181 9.89107C2.31001 9.93092 2.42211 9.96338 2.64132 9.98129C2.86636 9.99968 3.15751 10.0001 3.5858 10.0001H8.7858C9.21409 10.0001 9.50524 9.99968 9.73028 9.98129C9.94949 9.96338 10.0616 9.93092 10.1398 9.89107C10.328 9.7952 10.4809 9.64222 10.5768 9.45406C10.6167 9.37586 10.6491 9.26376 10.667 9.04455C10.6854 8.8195 10.6858 8.52836 10.6858 8.10007V7.06663C10.6858 7.0427 10.6858 7.02057 10.6858 7.00007H1.68585ZM5.1858 9.00007H3.1858C2.90966 9.00007 2.6858 8.77621 2.6858 8.50007C2.6858 8.22392 2.90966 8.00007 3.1858 8.00007H5.1858C5.46194 8.00007 5.6858 8.22392 5.6858 8.50007C5.6858 8.77621 5.46194 9.00007 5.1858 9.00007Z"
|
||||
fill="white"
|
||||
fillOpacity="0.9"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_6558_19108">
|
||||
<rect width="12" height="12" fill="white" transform="translate(0.185852 0.5)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
export function ClockIcon(props: IconProps) {
|
||||
return (
|
||||
<Icon
|
||||
{...props}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14px"
|
||||
height="15px"
|
||||
viewBox="0 0 14 15"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M6.99982 2.66081C4.32704 2.66081 2.16032 4.82753 2.16032 7.50031C2.16032 10.1731 4.32704 12.3398 6.99982 12.3398C9.67261 12.3398 11.8393 10.1731 11.8393 7.50031C11.8393 4.82753 9.67261 2.66081 6.99982 2.66081ZM0.993652 7.50031C0.993652 4.1832 3.68271 1.49414 6.99982 1.49414C10.3169 1.49414 13.006 4.1832 13.006 7.50031C13.006 10.8174 10.3169 13.5065 6.99982 13.5065C3.68271 13.5065 0.993652 10.8174 0.993652 7.50031ZM6.99982 3.66328C7.32199 3.66328 7.58316 3.92444 7.58316 4.24661V7.13979L9.42983 8.06313C9.71799 8.20721 9.83479 8.5576 9.69071 8.84575C9.54663 9.13391 9.19624 9.25071 8.90809 9.10663L6.73895 8.02206C6.54133 7.92325 6.41649 7.72126 6.41649 7.50031V4.24661C6.41649 3.92444 6.67766 3.66328 6.99982 3.66328Z"
|
||||
fill="white"
|
||||
fillOpacity="0.9"
|
||||
/>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
export function DesktopSealosCoinIcon(props: IconProps) {
|
||||
return (
|
||||
<Icon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14px"
|
||||
height="14px"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
{...props}
|
||||
>
|
||||
<g style={{ mixBlendMode: 'hard-light' }}>
|
||||
<circle cx="7" cy="7" r="6.762" fill="#E8E8E8" stroke="#37383A" strokeWidth="0.476" />
|
||||
<circle cx="6.9999" cy="7.00002" r="6.11562" fill="#CFCFCF" />
|
||||
<path
|
||||
d="M6.99978 13.1156C10.3773 13.1156 13.1154 10.3776 13.1154 7.00002C13.1154 5.61364 12.6541 4.335 11.8766 3.30923C11.4852 3.25402 11.0853 3.22546 10.6787 3.22546C6.2888 3.22546 2.6764 6.55431 2.22803 10.8254C3.34887 12.2218 5.06993 13.1156 6.99978 13.1156Z"
|
||||
fill="#BEBEBE"
|
||||
/>
|
||||
<circle cx="7.00017" cy="6.99992" r="4.74284" fill="#828386" />
|
||||
<path
|
||||
d="M5.04555 6.78559C5.439 7.36085 6.25304 7.3098 6.25304 7.3098C6.04953 7.11237 5.91725 6.93196 5.90368 6.41797C5.89011 5.90398 5.59842 5.76783 5.59842 5.76783C6.12076 5.43765 5.93421 5.08024 5.91725 4.68198C5.90707 4.4335 6.05292 4.24969 6.16824 4.14417C5.50449 4.24395 4.90473 4.59698 4.49399 5.12967C4.08325 5.66237 3.89324 6.3336 3.96357 7.00344C4.01105 6.87069 4.68263 6.25459 5.04555 6.78559Z"
|
||||
fill="#E8E8E8"
|
||||
/>
|
||||
<path
|
||||
d="M9.86536 5.76104C9.84782 5.7051 9.82628 5.6505 9.80092 5.59766V5.59425C9.68254 5.35256 9.48628 5.1581 9.24395 5.0424C9.00163 4.9267 8.72746 4.89655 8.46592 4.95685C8.20439 5.01715 7.97082 5.16435 7.8031 5.37458C7.63539 5.58482 7.54337 5.84575 7.54197 6.11505C7.54199 6.19975 7.55109 6.2842 7.56911 6.36694C7.56919 6.36807 7.56919 6.36921 7.56911 6.37034C7.57589 6.40438 7.58606 6.43842 7.59624 6.47246C7.65678 6.71225 7.66856 6.96181 7.63088 7.20627C7.59319 7.45073 7.50682 7.68506 7.37692 7.89528C7.24701 8.1055 7.07624 8.2873 6.87479 8.42983C6.67333 8.57236 6.44533 8.6727 6.20439 8.72486C5.96345 8.77701 5.7145 8.77992 5.47241 8.73341C5.23033 8.68689 5.00006 8.5919 4.79536 8.45412C4.59065 8.31633 4.41571 8.13857 4.28096 7.93144C4.14622 7.72431 4.05443 7.49206 4.01109 7.24855C4.07238 7.67066 4.22132 8.07514 4.44825 8.43582C4.67519 8.79649 4.97507 9.10532 5.32848 9.34231C5.68189 9.5793 6.08095 9.73917 6.49984 9.81157C6.91872 9.88396 7.34808 9.86727 7.76012 9.76257C8.17217 9.65788 8.55771 9.46751 8.8918 9.20379C9.22588 8.94008 9.50106 8.60889 9.69952 8.23168C9.89797 7.85447 10.0153 7.43963 10.0438 7.01404C10.0724 6.58844 10.0116 6.16156 9.86536 5.76104Z"
|
||||
fill="#E8E8E8"
|
||||
/>
|
||||
<path
|
||||
d="M9.35991 6.58134C9.35991 8.0646 8.16176 9.26702 6.68377 9.26702C5.89932 9.26702 5.19371 8.9283 4.70422 8.38865C4.73387 8.41135 4.7643 8.43322 4.79536 8.45412C5.00006 8.5919 5.23033 8.68689 5.47241 8.73341C5.7145 8.77992 5.96345 8.77701 6.20439 8.72486C6.44533 8.6727 6.67333 8.57236 6.87479 8.42983C7.07624 8.2873 7.24701 8.1055 7.37692 7.89528C7.50682 7.68506 7.59319 7.45073 7.63088 7.20627C7.66856 6.96181 7.65678 6.71225 7.59624 6.47246C7.58606 6.43842 7.57589 6.40438 7.56911 6.37034C7.56919 6.36921 7.56919 6.36807 7.56911 6.36694C7.55109 6.2842 7.54199 6.19975 7.54197 6.11505C7.54337 5.84575 7.63539 5.58482 7.8031 5.37458C7.97082 5.16435 8.20439 5.01715 8.46592 4.95685C8.57382 4.93197 8.6838 4.92245 8.79286 4.92802C9.14815 5.38384 9.35991 5.95777 9.35991 6.58134Z"
|
||||
fill="#E8E8E8"
|
||||
/>
|
||||
<path
|
||||
d="M9.47934 2.44482L9.75865 2.94614L10.26 3.22544L9.75865 3.50474L9.47934 4.00605L9.20004 3.50474L8.69873 3.22544L9.20004 2.94614L9.47934 2.44482Z"
|
||||
fill="#F0F0F0"
|
||||
/>
|
||||
</g>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
export function DesktopExchangeIcon(props: IconProps) {
|
||||
return (
|
||||
<Icon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16px"
|
||||
height="17px"
|
||||
viewBox="0 0 16 17"
|
||||
fill="none"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M10.935 3.68196C11.1954 3.42161 11.6175 3.42161 11.8778 3.68196L14.5157 6.31981C14.5224 6.32649 14.529 6.3333 14.5355 6.34026C14.5882 6.39714 14.6292 6.46098 14.6584 6.52868C14.6935 6.60978 14.713 6.69923 14.713 6.79323C14.713 6.8865 14.6938 6.97529 14.6592 7.0559C14.6294 7.12556 14.5872 7.19117 14.5325 7.24936C14.5229 7.25957 14.513 7.26948 14.5028 7.27907C14.443 7.3353 14.3754 7.37842 14.3036 7.40842C14.2274 7.44032 14.1441 7.45849 14.0566 7.45981L14.0452 7.45989L4.31297 7.45989C3.94478 7.45989 3.6463 7.16142 3.6463 6.79323C3.6463 6.42504 3.94478 6.12656 4.31297 6.12656L12.4368 6.12656L10.935 4.62477C10.6747 4.36442 10.6747 3.94231 10.935 3.68196Z"
|
||||
fill="white"
|
||||
fillOpacity="0.8"
|
||||
/>
|
||||
<path
|
||||
d="M1.5749 9.73548C1.63889 9.67148 1.71266 9.62322 1.7914 9.59068C1.86814 9.5589 1.95211 9.54104 2.04015 9.54024L2.04631 9.54021H11.7796C12.1478 9.54021 12.4463 9.83869 12.4463 10.2069C12.4463 10.5751 12.1478 10.8735 11.7796 10.8735L3.65578 10.8735L5.15757 12.3753C5.41792 12.6357 5.41792 13.0578 5.15757 13.3182C4.89723 13.5785 4.47512 13.5785 4.21477 13.3182L1.5756 10.679L1.56914 10.6725C1.50808 10.6099 1.46177 10.5383 1.43022 10.4621C1.39763 10.3835 1.37964 10.2973 1.37964 10.2069C1.37964 10.1166 1.39759 10.0305 1.43011 9.95197C1.46264 9.87324 1.51091 9.79947 1.5749 9.73548Z"
|
||||
fill="white"
|
||||
fillOpacity="0.8"
|
||||
/>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
export function InfiniteIcon(props: IconProps) {
|
||||
return (
|
||||
<Icon
|
||||
{...props}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16px"
|
||||
height="16px"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M7.35359 8C7.35359 9.50399 6.13436 10.7232 4.63037 10.7232C3.12638 10.7232 1.90715 9.50399 1.90715 8C1.90715 6.49601 3.12638 5.27678 4.63037 5.27678C5.31048 5.27678 5.93235 5.52609 6.40959 5.93831C6.71592 6.20291 7.37703 6.14424 7.59858 5.80547C7.70848 5.63741 7.71078 5.41712 7.5742 5.26992C6.84097 4.47965 5.79342 3.98511 4.63037 3.98511C2.41301 3.98511 0.615479 5.78264 0.615479 8C0.615479 10.2174 2.41301 12.0149 4.63037 12.0149C6.29504 12.0149 7.72308 11.0018 8.33156 9.55851C8.5329 9.08094 8.64451 8.55627 8.64526 8.00562H8.64605L8.64604 8C8.64604 6.49601 9.86527 5.27678 11.3693 5.27678C12.8733 5.27678 14.0925 6.49601 14.0925 8C14.0925 9.50399 12.8733 10.7232 11.3693 10.7232C10.6892 10.7232 10.0673 10.4739 9.59004 10.0617C9.28371 9.79709 8.6226 9.85576 8.40106 10.1945C8.29115 10.3626 8.28885 10.5829 8.42543 10.7301C9.15866 11.5204 10.2062 12.0149 11.3693 12.0149C13.5866 12.0149 15.3842 10.2174 15.3842 8C15.3842 5.78264 13.5866 3.98511 11.3693 3.98511C9.70568 3.98511 8.27841 4.9969 7.66926 6.43868C7.46717 6.917 7.35513 7.44265 7.35437 7.99439H7.35359L7.35359 8Z"
|
||||
fill="white"
|
||||
/>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
export function CubeIcon(props: IconProps) {
|
||||
return (
|
||||
<Icon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14px"
|
||||
height="14px"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M6.46671 0.889977C6.74571 0.728894 7.19807 0.728894 7.47707 0.889977L11.7404 3.35142C12.2984 3.67358 12.2984 4.19592 11.7404 4.51808L7.53318 6.94713C7.25417 7.10821 6.80182 7.10821 6.52281 6.94713L2.25948 4.48569C1.70147 4.16353 1.70147 3.64119 2.25948 3.31902L6.46671 0.889977Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M1.49072 5.96173C1.49072 5.5107 1.80737 5.32788 2.19798 5.55339L6.13892 7.8287C6.36212 7.95757 6.54307 8.27097 6.54307 8.5287V12.695C6.54307 13.146 6.22642 13.3289 5.83581 13.1033L1.89487 10.828C1.67167 10.6992 1.49072 10.3858 1.49072 10.128V5.96173Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M7.4564 8.56015C7.4564 8.30242 7.63735 7.98901 7.86055 7.86015L11.8021 5.58447C12.1927 5.35896 12.5094 5.54177 12.5094 5.99281V10.1586C12.5094 10.4163 12.3284 10.7297 12.1052 10.8586L8.16366 13.1343C7.77305 13.3598 7.4564 13.177 7.4564 12.726V8.56015Z"
|
||||
fill="white"
|
||||
/>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
export function ZoneIcon(props: IconProps) {
|
||||
return (
|
||||
<Icon
|
||||
{...props}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14px"
|
||||
height="14px"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M13.0799 7.58332C13.2883 7.22236 13.2883 6.77763 13.0799 6.41666L10.5451 2.02633C10.3367 1.66536 9.95155 1.44299 9.53474 1.44299H4.46522C4.04841 1.44299 3.66326 1.66536 3.45486 2.02633L0.920098 6.41666C0.711693 6.77763 0.711693 7.22236 0.920098 7.58332L3.45486 11.9737C3.66326 12.3346 4.04841 12.557 4.46522 12.557H9.53474C9.95155 12.557 10.3367 12.3346 10.5451 11.9737L13.0799 7.58332ZM9.08787 7.29166C9.19207 7.11117 9.19207 6.88881 9.08787 6.70832L8.29651 5.33765C8.19231 5.15717 7.99974 5.04599 7.79133 5.04599H6.20862C6.00021 5.04599 5.80764 5.15717 5.70344 5.33765L4.91208 6.70832C4.80788 6.88881 4.80788 7.11117 4.91208 7.29166L5.70344 8.66232C5.80764 8.84281 6.00021 8.95399 6.20862 8.95399H7.79133C7.99974 8.95399 8.19231 8.84281 8.29651 8.66232L9.08787 7.29166Z"
|
||||
fill="white"
|
||||
/>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
export function ChevronDownIcon(props: IconProps) {
|
||||
return (
|
||||
<Icon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="12px"
|
||||
height="12px"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M8.60214 4C9.49304 4 9.93921 5.07714 9.30925 5.70711L6.75918 8.25717C6.36866 8.6477 5.73549 8.6477 5.34497 8.25717L2.7949 5.70711C2.16493 5.07714 2.6111 4 3.502 4H8.60214Z"
|
||||
fill="#071B41"
|
||||
fillOpacity="0.5"
|
||||
/>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
export function EmptyIcon(props: IconProps) {
|
||||
return (
|
||||
<Icon {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" fill="none">
|
||||
<path
|
||||
d="M5.21273 25.5033L5.18464 25.5026C5.02228 25.4974 4.17832 25.4432 3.61607 24.9161C3.03957 24.3754 2.97076 23.5981 2.96283 23.4476C2.96207 23.4334 2.96169 23.4193 2.96172 23.4051V19.1712C2.95333 18.9968 2.94205 18.4076 3.13947 17.7532C3.32862 17.1258 3.56231 16.7139 3.62923 16.6028L5.75482 12.8423C5.76544 12.8234 5.77669 12.8052 5.78873 12.7875C5.855 12.6891 6.21129 12.183 6.6998 11.8791C7.21384 11.559 7.83601 11.5342 8.01454 11.5342H21.4413C21.4586 11.5342 21.4757 11.5347 21.4933 11.5358C21.6268 11.5444 22.3198 11.6029 22.8562 11.9097C23.3683 12.203 23.7806 12.7156 23.858 12.8152C23.8737 12.8356 23.8884 12.8567 23.9022 12.8785L26.4267 16.8788C26.4375 16.8964 26.4484 16.9148 26.4583 16.9337C26.5066 17.0266 26.7562 17.5175 26.8826 17.9949C27.0074 18.4672 27.0375 18.9892 27.0421 19.0889L27.0427 19.123V23.3575C27.0455 23.5814 27.0043 24.3498 26.367 24.9207C25.7633 25.4611 24.9507 25.5029 24.7161 25.5029H5.21273V25.5033ZM4.99645 17.4609C4.95 17.5435 4.80554 17.8167 4.68408 18.2192C4.55581 18.6448 4.57105 19.0426 4.57309 19.0867C4.57423 19.1057 4.57492 19.1248 4.57517 19.1439V23.3772L4.57675 23.3889C4.58675 23.465 4.6332 23.6494 4.71328 23.7326L4.72406 23.7441L4.73676 23.7534C4.84886 23.836 5.12664 23.8835 5.22366 23.8893L24.7173 23.8896C24.8791 23.8877 25.1618 23.8338 25.2899 23.719C25.4045 23.6163 25.4302 23.44 25.4302 23.4118L25.4286 23.3628V19.1477C25.4199 18.9833 25.388 18.6556 25.3221 18.4073C25.2474 18.1236 25.0803 17.7838 25.0474 17.7188L25.0384 17.703L22.561 13.7769L22.5532 13.7675C22.4593 13.6544 22.2342 13.4128 22.0544 13.3097C21.8987 13.2206 21.5816 13.1636 21.4183 13.1483L21.4013 13.1475H8.01739C7.89212 13.1486 7.6594 13.1818 7.55188 13.249C7.40045 13.3434 7.22115 13.559 7.14741 13.6597L7.14106 13.6684L5.02878 17.4052L5.00596 17.4436L5.00627 17.4426C5.00565 17.4445 4.99645 17.4609 4.99645 17.4609ZM14.9251 10.3511C14.7112 10.3509 14.5062 10.2658 14.3549 10.1146C14.2036 9.96337 14.1185 9.7583 14.1183 9.5444V4.90345C14.1185 4.6896 14.2036 4.48458 14.3548 4.33336C14.506 4.18213 14.711 4.09704 14.9248 4.09674C15.1388 4.09695 15.3438 4.182 15.4951 4.33324C15.6464 4.48447 15.7316 4.68953 15.7319 4.90345V9.54434C15.7316 9.75823 15.6466 9.96329 15.4953 10.1145C15.3441 10.2658 15.139 10.3508 14.9251 10.351V10.3511ZM20.3341 10.3205C20.1202 10.3202 19.9152 10.2351 19.7639 10.0838C19.6127 9.93258 19.5276 9.72751 19.5274 9.51362C19.5276 9.32859 19.5912 9.14922 19.7076 9.00544L21.5518 6.73098C21.6274 6.63745 21.723 6.56206 21.8316 6.51036C21.9402 6.45866 22.059 6.43198 22.1792 6.43227C22.3656 6.43227 22.5412 6.49457 22.6864 6.61237C22.769 6.67884 22.8376 6.76107 22.8881 6.85427C22.9387 6.94747 22.9702 7.04978 22.9808 7.15527C22.9922 7.26063 22.9826 7.36721 22.9524 7.46881C22.9223 7.57042 22.8723 7.66503 22.8053 7.74716L20.9612 10.0216C20.8859 10.1151 20.7906 10.1905 20.6823 10.2422C20.5739 10.2939 20.4554 10.3206 20.3353 10.3204H20.3341V10.3205ZM9.6069 10.2588C9.48571 10.2592 9.36603 10.232 9.25686 10.1794C9.14769 10.1267 9.05188 10.05 8.97665 9.95503L7.16373 7.68073C7.03056 7.51332 6.96925 7.29992 6.99324 7.08736C7.01723 6.87479 7.12456 6.68043 7.29169 6.54691C7.43406 6.4325 7.61135 6.37039 7.79399 6.37092C8.04133 6.37092 8.27139 6.48172 8.42536 6.67487L10.2384 8.94914C10.3716 9.11648 10.433 9.32984 10.4091 9.54238C10.3852 9.75492 10.2779 9.9493 10.1108 10.0828C9.96791 10.1965 9.79079 10.2585 9.6082 10.2588H9.6069Z"
|
||||
fill="white"
|
||||
fillOpacity="0.7"
|
||||
/>
|
||||
<path
|
||||
d="M14.9563 22.1841C13.1589 22.1841 11.5973 20.9791 11.159 19.2541L11.1237 19.1151L3.95905 19.1108C3.74513 19.1104 3.54011 19.0251 3.38891 18.8738C3.2377 18.7225 3.15264 18.5174 3.15234 18.3035C3.15268 18.0896 3.23779 17.8847 3.38901 17.7335C3.54024 17.5824 3.74523 17.4973 3.95905 17.4971L11.8484 17.5021C12.0622 17.5027 12.2671 17.5879 12.4182 17.7391C12.5693 17.8904 12.6544 18.0953 12.6547 18.3091C12.6547 19.5773 13.6656 20.5705 14.9563 20.5705C16.2423 20.5705 17.2498 19.5773 17.2498 18.3092C17.2502 18.0953 17.3353 17.8904 17.4865 17.7391C17.6377 17.5879 17.8426 17.5027 18.0565 17.5021L25.8728 17.4972C26.3178 17.4972 26.6795 17.8586 26.6798 18.3033C26.6801 18.748 26.3185 19.1103 25.8737 19.111L18.7816 19.1153L18.7462 19.2543C18.3085 20.9792 16.7502 22.1841 14.9563 22.1841Z"
|
||||
fill="white"
|
||||
fillOpacity="0.7"
|
||||
/>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
export function ArrowIcon(props: IconProps) {
|
||||
return (
|
||||
<Icon
|
||||
{...props}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16px"
|
||||
height="16px"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M8.86193 3.52864C8.60158 3.78899 8.60158 4.2111 8.86193 4.47145L11.7239 7.33337H2.66667C2.29848 7.33337 2 7.63185 2 8.00004C2 8.36823 2.29848 8.66671 2.66667 8.66671H11.7239L8.86193 11.5286C8.60158 11.789 8.60158 12.2111 8.86193 12.4714C9.12228 12.7318 9.54439 12.7318 9.80474 12.4714L13.8047 8.47144C14.0651 8.2111 14.0651 7.78899 13.8047 7.52864L9.80474 3.52864C9.54439 3.26829 9.12228 3.26829 8.86193 3.52864Z"
|
||||
fill="white"
|
||||
fillOpacity="0.8"
|
||||
/>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
@@ -10,8 +10,9 @@
|
||||
.container {
|
||||
width: 360px;
|
||||
height: 524px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(150px);
|
||||
background: rgba(220, 220, 224, 0.05);
|
||||
box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(50px);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
z-index: 999;
|
||||
@@ -24,7 +25,7 @@
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: #0d1a2d;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -56,7 +57,7 @@
|
||||
.tab {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #717d8a;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
border-bottom: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -64,7 +65,7 @@
|
||||
.active {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #0d1a2d;
|
||||
color: white;
|
||||
border-bottom: 2px solid #1599e9;
|
||||
}
|
||||
|
||||
|
||||
@@ -36,15 +36,19 @@ export default function Notification(props: TNotification) {
|
||||
popupMessage: undefined
|
||||
});
|
||||
|
||||
const { refetch } = useQuery(['getNotifications'], () => request('/api/notification/list'), {
|
||||
onSuccess: (data) => {
|
||||
const messages = data?.data?.items as NotificationItem[];
|
||||
if (messages) {
|
||||
handleNotificationData(messages);
|
||||
}
|
||||
},
|
||||
refetchInterval: 5 * 60 * 1000
|
||||
});
|
||||
const { refetch } = useQuery(
|
||||
['getNotifications'],
|
||||
() => request('/api/notification/listNotification'),
|
||||
{
|
||||
onSuccess: (data) => {
|
||||
const messages = data?.data?.items as NotificationItem[];
|
||||
if (messages) {
|
||||
handleNotificationData(messages);
|
||||
}
|
||||
},
|
||||
refetchInterval: 5 * 60 * 1000
|
||||
}
|
||||
);
|
||||
|
||||
const handleNotificationData = (data: NotificationItem[]) => {
|
||||
const parseIsRead = (item: NotificationItem) =>
|
||||
@@ -193,12 +197,11 @@ export default function Notification(props: TNotification) {
|
||||
ml={'auto'}
|
||||
onClick={() => markAllAsRead()}
|
||||
variant={'white-bg-icon'}
|
||||
leftIcon={<ClearOutlineIcon color={'grayModern.600'} />}
|
||||
leftIcon={<ClearOutlineIcon color={'rgba(255, 255, 255, 0.60)'} />}
|
||||
iconSpacing="4px"
|
||||
borderRadius={'4px'}
|
||||
>
|
||||
<Text color={'#434F61'} className={styles.tab}>
|
||||
{t('Read All')}
|
||||
</Text>
|
||||
<Text className={styles.tab}>{t('Read All')}</Text>
|
||||
</Button>
|
||||
</Flex>
|
||||
<Flex pt={'9px'} pb="12px" direction={'column'} h="430px" className={styles.scrollWrap}>
|
||||
@@ -317,28 +320,33 @@ export default function Notification(props: TNotification) {
|
||||
h={'170px'}
|
||||
top={'48px'}
|
||||
right={'0px'}
|
||||
bg="rgba(255, 255, 255, 0.80)"
|
||||
bg="rgba(220, 220, 224, 0.05)"
|
||||
backdropFilter={'blur(50px)'}
|
||||
boxShadow={'0px 15px 20px 0px rgba(0, 0, 0, 0.10)'}
|
||||
borderRadius={'12px 0px 12px 12px'}
|
||||
p="20px"
|
||||
zIndex={9}
|
||||
color={'white'}
|
||||
>
|
||||
<Flex alignItems={'center'}>
|
||||
<WarnIcon />
|
||||
<Text fontSize={'16px'} fontWeight={600} color={'#24282C'} ml="10px">
|
||||
<Text fontSize={'16px'} fontWeight={600} ml="10px">
|
||||
{i18n.language === 'zh' && MessageConfig.popupMessage?.spec?.i18ns?.zh?.title
|
||||
? MessageConfig.popupMessage?.spec?.i18ns?.zh?.title
|
||||
: MessageConfig.popupMessage?.spec?.title}
|
||||
</Text>
|
||||
<CloseIcon
|
||||
ml="auto"
|
||||
fill={'white'}
|
||||
cursor={'pointer'}
|
||||
onClick={() => {
|
||||
const temp = MessageConfig.popupMessage;
|
||||
setMessageConfig(
|
||||
produce((draft) => {
|
||||
draft.popupMessage = undefined;
|
||||
})
|
||||
);
|
||||
readMsgMutation.mutate([temp?.metadata?.name || '']);
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
@@ -347,7 +355,6 @@ export default function Notification(props: TNotification) {
|
||||
mt="14px"
|
||||
fontSize="12px"
|
||||
fontWeight={400}
|
||||
color="#000000"
|
||||
className="overflow-auto"
|
||||
noOfLines={2}
|
||||
height={'36px'}
|
||||
@@ -361,13 +368,12 @@ export default function Notification(props: TNotification) {
|
||||
<Button
|
||||
w="78px"
|
||||
h="32px"
|
||||
bg="#F8FAFB"
|
||||
bg="rgba(255, 255, 255, 0.20)"
|
||||
borderRadius={'4px'}
|
||||
_hover={{ bg: '#F8FAFB' }}
|
||||
variant={'unstyled'}
|
||||
color={'white'}
|
||||
onClick={() => {
|
||||
const temp = MessageConfig.popupMessage;
|
||||
readMsgMutation.mutate([temp?.metadata?.name || '']);
|
||||
disclosure.onOpen();
|
||||
setMessageConfig(
|
||||
produce((draft) => {
|
||||
draft.activePage = 'detail';
|
||||
@@ -375,6 +381,8 @@ export default function Notification(props: TNotification) {
|
||||
draft.popupMessage = undefined;
|
||||
})
|
||||
);
|
||||
readMsgMutation.mutate([temp?.metadata?.name || '']);
|
||||
disclosure.onOpen();
|
||||
}}
|
||||
>
|
||||
{t('Detail')}
|
||||
@@ -382,16 +390,18 @@ export default function Notification(props: TNotification) {
|
||||
<Button
|
||||
w="78px"
|
||||
h="32px"
|
||||
variant={'primary'}
|
||||
variant={'unstyled'}
|
||||
bg={'white'}
|
||||
color={'grayModern.900'}
|
||||
borderRadius={'4px'}
|
||||
onClick={() => {
|
||||
const temp = MessageConfig.popupMessage;
|
||||
readMsgMutation.mutate([temp?.metadata?.name || '']);
|
||||
setMessageConfig(
|
||||
produce((draft) => {
|
||||
draft.popupMessage = undefined;
|
||||
})
|
||||
);
|
||||
readMsgMutation.mutate([temp?.metadata?.name || '']);
|
||||
handleCharge();
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
import request from '@/services/request';
|
||||
import { Box, Divider, HStack, Text, useDisclosure } from '@chakra-ui/react';
|
||||
import { ExchangeIcon, InfoIcon, ProviderIcon } from '@sealos/ui';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { useMemo } from 'react';
|
||||
import useSessionStore from '@/stores/session';
|
||||
import { useRouter } from 'next/router';
|
||||
import { regionList as getRegionList } from '@/api/auth';
|
||||
import request from '@/services/request';
|
||||
import useSessionStore from '@/stores/session';
|
||||
import { ApiResp, Region } from '@/types';
|
||||
import { jwtDecode } from 'jwt-decode';
|
||||
import { AccessTokenPayload } from '@/types/token';
|
||||
import { Box, Divider, HStack, Text, useDisclosure } from '@chakra-ui/react';
|
||||
import { InfoIcon, ProviderIcon } from '@sealos/ui';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { jwtDecode } from 'jwt-decode';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { useRouter } from 'next/router';
|
||||
import { useMemo } from 'react';
|
||||
import { DesktopExchangeIcon, ZoneIcon } from '../icons';
|
||||
|
||||
export default function RegionToggle() {
|
||||
const disclosure = useDisclosure();
|
||||
@@ -45,27 +46,35 @@ export default function RegionToggle() {
|
||||
<HStack
|
||||
// fix for blur
|
||||
position={'relative'}
|
||||
mt={'8px'}
|
||||
>
|
||||
<HStack
|
||||
borderRadius={'10px'}
|
||||
w={'full'}
|
||||
borderRadius={'100px'}
|
||||
p={'8px 12px'}
|
||||
gap={'20px'}
|
||||
background={'rgba(244, 246, 248, 0.6)'}
|
||||
boxShadow={'0px 1px 2px rgba(0, 0, 0, 0.2)'}
|
||||
fontSize={'14px'}
|
||||
color={'#152539'}
|
||||
background={'rgba(255, 255, 255, 0.07)'}
|
||||
_hover={{
|
||||
background: 'rgba(255, 255, 255, 0.15)'
|
||||
}}
|
||||
fontSize={'12px'}
|
||||
color={'white'}
|
||||
fontWeight={'500'}
|
||||
backdropFilter={'blur(8px)'}
|
||||
onClick={() => disclosure.onOpen()}
|
||||
minH={'40px'}
|
||||
onClick={() => {
|
||||
disclosure.onOpen();
|
||||
}}
|
||||
cursor={'pointer'}
|
||||
userSelect={'none'}
|
||||
>
|
||||
<ZoneIcon />
|
||||
<Text>
|
||||
{providerT(curRegion?.location || '')} {curRegion?.description?.serial}
|
||||
</Text>
|
||||
<ExchangeIcon />
|
||||
<DesktopExchangeIcon ml={'auto'} />
|
||||
</HStack>
|
||||
|
||||
{disclosure.isOpen ? (
|
||||
<>
|
||||
<Box position={'absolute'} right={0}>
|
||||
<Box
|
||||
position={'fixed'}
|
||||
inset={0}
|
||||
@@ -75,80 +84,83 @@ export default function RegionToggle() {
|
||||
disclosure.onClose();
|
||||
}}
|
||||
></Box>
|
||||
<Box position={'absolute'} inset={0} zIndex={'999'}>
|
||||
<Box
|
||||
bgColor={'red'}
|
||||
bg="rgba(255, 255, 255, 0.8)"
|
||||
boxShadow={'0px 1px 2px rgba(0, 0, 0, 0.2)'}
|
||||
position={'absolute'}
|
||||
top="43px"
|
||||
right={0}
|
||||
cursor={'initial'}
|
||||
borderRadius={'8px'}
|
||||
p="20px"
|
||||
backdropFilter={'blur(150px)'}
|
||||
>
|
||||
<HStack gap={'12px'} alignItems={'stretch'}>
|
||||
{regionList.map((region) => {
|
||||
const cpuPrice = region?.description?.prices?.find((p) => p.name === 'CPU');
|
||||
return (
|
||||
<Box
|
||||
bgColor={'rgba(255, 255, 255, 0.75)'}
|
||||
borderRadius={'8px'}
|
||||
// minW={'165px'}
|
||||
// minH={'200px'}
|
||||
py={'12px'}
|
||||
key={region.uid}
|
||||
{...(region.uid === curRegionUid
|
||||
? {
|
||||
border: '1.5px solid #219BF4'
|
||||
<Box
|
||||
bg="rgba(22, 30, 40, 0.35)"
|
||||
boxShadow={'0px 15px 20px 0px rgba(0, 0, 0, 0.10)'}
|
||||
position={'absolute'}
|
||||
zIndex={999}
|
||||
top="43px"
|
||||
right={0}
|
||||
cursor={'initial'}
|
||||
borderRadius={'8px'}
|
||||
p="20px"
|
||||
backdropFilter={'blur(80px) saturate(150%)'}
|
||||
>
|
||||
<HStack gap={'12px'} alignItems={'stretch'}>
|
||||
{regionList.map((region) => {
|
||||
const cpuPrice = region?.description?.prices?.find((p) => p.name === 'CPU');
|
||||
return (
|
||||
<Box
|
||||
whiteSpace={'nowrap'}
|
||||
bg={'rgba(255, 255, 255, 0.10)'}
|
||||
borderRadius={'8px'}
|
||||
py={'12px'}
|
||||
key={region.uid}
|
||||
{...(region.uid === curRegionUid
|
||||
? {
|
||||
border: '1.5px solid #219BF4'
|
||||
}
|
||||
: {
|
||||
async onClick() {
|
||||
await handleCick(region);
|
||||
},
|
||||
cursor: 'pointer',
|
||||
_hover: {
|
||||
bgColor: 'rgba(255, 255, 255, 0.10)'
|
||||
}
|
||||
: {
|
||||
async onClick() {
|
||||
await handleCick(region);
|
||||
},
|
||||
cursor: 'pointer',
|
||||
_hover: {
|
||||
bgColor: 'rgba(255, 255, 255, 0.5)'
|
||||
}
|
||||
})}
|
||||
// aspectRatio={'16/20'}
|
||||
})}
|
||||
>
|
||||
<Box
|
||||
px={'16px'}
|
||||
fontSize={'14px'}
|
||||
fontWeight={'500'}
|
||||
pb={'10px'}
|
||||
borderBottom={'1px solid rgba(0, 0, 0, 0.05)'}
|
||||
mb={'12px'}
|
||||
>
|
||||
<Box px={'16px'} fontSize={'14px'} fontWeight={'500'}>
|
||||
<Text color={'#152539'}>
|
||||
{providerT(region?.location)} {region?.description?.serial}
|
||||
<Text color={'rgba(255, 255, 255, 0.80)'}>
|
||||
{providerT(region?.location)} {region?.description?.serial}
|
||||
</Text>
|
||||
{cpuPrice && (
|
||||
<Text color={'#47B2FF'} whiteSpace={'nowrap'}>
|
||||
{cpuPrice?.name} {cpuPrice?.unit_price || 0} {t('Yuan')}/{t('Core')}/
|
||||
{t('Year')}
|
||||
</Text>
|
||||
{cpuPrice && (
|
||||
<Text color={'#0884DD'} whiteSpace={'nowrap'}>
|
||||
{cpuPrice?.name} {cpuPrice?.unit_price || 0} {t('Yuan')}/{t('Core')}
|
||||
/{t('Year')}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
<Divider color={'#0000000D'} my={'12px'} />
|
||||
<Box px={'16px'} fontSize={'11px'} fontWeight={'500'}>
|
||||
<HStack color={'#485264'} gap={'4px'} mb={'2px'}>
|
||||
<ProviderIcon boxSize={'12px'} />
|
||||
<Text>{providerT('Provider')}</Text>
|
||||
</HStack>
|
||||
<Text color={'#111824'} mb={'8px'}>
|
||||
{providerT(region?.description?.provider)}
|
||||
</Text>
|
||||
<HStack color={'#485264'} gap={'4px'} mb={'2px'}>
|
||||
<InfoIcon boxSize={'12px'} />
|
||||
<Text>{t('Description')}</Text>
|
||||
</HStack>
|
||||
<Text color={'#111824'} lineHeight={'20px'}>
|
||||
{region?.description?.description?.[i18n.language as 'zh' | 'en']}
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</HStack>
|
||||
</Box>
|
||||
{/* <Divider bg={'rgba(255, 255, 255, 0.10)'} my={'12px'} /> */}
|
||||
<Box px={'16px'} fontSize={'11px'} fontWeight={'500'}>
|
||||
<HStack color={'rgba(255, 255, 255, 0.80)'} gap={'4px'} mb={'2px'}>
|
||||
<ProviderIcon boxSize={'12px'} />
|
||||
<Text>{providerT('Provider')}</Text>
|
||||
</HStack>
|
||||
<Text color={'white'} mb={'8px'}>
|
||||
{providerT(region?.description?.provider)}
|
||||
</Text>
|
||||
<HStack color={'rgba(255, 255, 255, 0.80)'} gap={'4px'} mb={'2px'}>
|
||||
<InfoIcon boxSize={'12px'} />
|
||||
<Text>{t('Description')}</Text>
|
||||
</HStack>
|
||||
<Text whiteSpace={'pre-wrap'} color={'white'} lineHeight={'20px'}>
|
||||
{region?.description?.description?.[i18n.language as 'zh' | 'en']}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</HStack>
|
||||
</Box>
|
||||
</>
|
||||
</Box>
|
||||
) : null}
|
||||
</HStack>
|
||||
)}
|
||||
|
||||
@@ -7,12 +7,14 @@ const NsListItem = ({
|
||||
isPrivate,
|
||||
displayPoint = false,
|
||||
teamName,
|
||||
selectedColor = 'white',
|
||||
...flexprop
|
||||
}: {
|
||||
displayPoint: boolean;
|
||||
teamName: string;
|
||||
isPrivate: boolean;
|
||||
isSelected: boolean;
|
||||
selectedColor?: string;
|
||||
} & FlexProps) => {
|
||||
const queryClient = useQueryClient();
|
||||
const { t } = useTranslation();
|
||||
@@ -31,7 +33,7 @@ const NsListItem = ({
|
||||
{...flexprop}
|
||||
{...(isSelected
|
||||
? {
|
||||
background: 'rgba(0, 0, 0, 0.05)'
|
||||
background: 'rgba(255, 244, 244, 0.10)'
|
||||
}
|
||||
: {
|
||||
bgColor: 'unset'
|
||||
@@ -40,7 +42,7 @@ const NsListItem = ({
|
||||
'> .namespace-option': {
|
||||
display: 'flex'
|
||||
},
|
||||
bgColor: 'rgba(0, 0, 0, 0.03)'
|
||||
bgColor: 'rgba(255, 244, 244, 0.10)'
|
||||
}}
|
||||
>
|
||||
<HStack gap={'8px'} align={'center'} width={'full'}>
|
||||
@@ -54,7 +56,7 @@ const NsListItem = ({
|
||||
<Text
|
||||
{...(isSelected
|
||||
? {
|
||||
color: '#0884DD'
|
||||
color: selectedColor
|
||||
}
|
||||
: {})}
|
||||
textTransform={'capitalize'}
|
||||
|
||||
@@ -101,12 +101,12 @@ export default function TeamCenter(props: StackProps) {
|
||||
setNsid(defaultNamespace.id);
|
||||
}
|
||||
}, [_namespaces, ns_uid]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<HStack
|
||||
gap={'8px'}
|
||||
alignItems={'center'}
|
||||
// borderBottom={'1px solid #0000001A'}
|
||||
p={'6px 4px'}
|
||||
cursor={'pointer'}
|
||||
borderRadius={'4px'}
|
||||
@@ -118,8 +118,11 @@ export default function TeamCenter(props: StackProps) {
|
||||
_hover={{
|
||||
bgColor: 'rgba(0, 0, 0, 0.03)'
|
||||
}}
|
||||
pb={'10px'}
|
||||
borderBottom={'1px solid rgba(0, 0, 0, 0.05)'}
|
||||
mb={'4px'}
|
||||
>
|
||||
<SettingIcon boxSize={'16px'} color={'grayModern.600'} />
|
||||
<SettingIcon boxSize={'16px'} color={'white'} />
|
||||
<Text>{t('Manage Team')}</Text>
|
||||
</HStack>
|
||||
|
||||
@@ -180,6 +183,7 @@ export default function TeamCenter(props: StackProps) {
|
||||
isPrivate={ns.nstype === NSType.Private}
|
||||
isSelected={ns.uid === ns_uid}
|
||||
teamName={ns.teamName}
|
||||
selectedColor="#0884DD"
|
||||
/>
|
||||
);
|
||||
})
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
import { Box, Divider, HStack, Text, useDisclosure, VStack } from '@chakra-ui/react';
|
||||
import { ExchangeIcon } from '@sealos/ui';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import useSessionStore from '@/stores/session';
|
||||
import { useRouter } from 'next/router';
|
||||
import { nsListRequest, switchRequest } from '@/api/namespace';
|
||||
import { sessionConfig } from '@/utils/sessionConfig';
|
||||
import { NSType } from '@/types/team';
|
||||
import TeamCenter from '@/components/team/TeamCenter';
|
||||
import NsListItem from '@/components/team/NsListItem';
|
||||
import TeamCenter from '@/components/team/TeamCenter';
|
||||
import useAppStore from '@/stores/app';
|
||||
import { jwtDecode } from 'jwt-decode';
|
||||
import useSessionStore from '@/stores/session';
|
||||
import { NSType } from '@/types/team';
|
||||
import { AccessTokenPayload } from '@/types/token';
|
||||
import { sessionConfig } from '@/utils/sessionConfig';
|
||||
import { switchKubeconfigNamespace } from '@/utils/switchKubeconfigNamespace';
|
||||
import { Box, Divider, HStack, Text, VStack, useDisclosure } from '@chakra-ui/react';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { jwtDecode } from 'jwt-decode';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { useRouter } from 'next/router';
|
||||
import { CubeIcon, DesktopExchangeIcon } from '../icons';
|
||||
|
||||
export default function WorkspaceToggle() {
|
||||
const disclosure = useDisclosure();
|
||||
@@ -56,27 +56,33 @@ export default function WorkspaceToggle() {
|
||||
switchTeam({ uid: defaultNamespace.uid });
|
||||
}
|
||||
return (
|
||||
<HStack position={'relative'}>
|
||||
<HStack position={'relative'} mt={'8px'}>
|
||||
<HStack
|
||||
borderRadius={'10px'}
|
||||
w={'234px'}
|
||||
height={'40px'}
|
||||
borderRadius={'100px'}
|
||||
p={'8px 12px'}
|
||||
justifyContent={'space-between'}
|
||||
background={'rgba(244, 246, 248, 0.6)'}
|
||||
boxShadow={'0px 1px 2px rgba(0, 0, 0, 0.2)'}
|
||||
fontSize={'13px'}
|
||||
color={'#152539'}
|
||||
background={'rgba(255, 255, 255, 0.07)'}
|
||||
_hover={{
|
||||
background: 'rgba(255, 255, 255, 0.15)'
|
||||
}}
|
||||
fontSize={'12px'}
|
||||
color={'white'}
|
||||
fontWeight={'500'}
|
||||
minW={'166px'}
|
||||
backdropFilter={'blur(8px)'}
|
||||
onClick={() => disclosure.onOpen()}
|
||||
onClick={() => {
|
||||
disclosure.onOpen();
|
||||
}}
|
||||
cursor={'pointer'}
|
||||
userSelect={'none'}
|
||||
>
|
||||
<CubeIcon />
|
||||
<Text>
|
||||
{namespace?.nstype === NSType.Private ? t('Default Team') : namespace?.teamName}
|
||||
</Text>
|
||||
<ExchangeIcon />
|
||||
<DesktopExchangeIcon ml={'auto'} />
|
||||
</HStack>
|
||||
{disclosure.isOpen ? (
|
||||
<>
|
||||
<Box position={'absolute'} w={'full'}>
|
||||
<Box
|
||||
position={'fixed'}
|
||||
inset={0}
|
||||
@@ -85,24 +91,29 @@ export default function WorkspaceToggle() {
|
||||
e.stopPropagation();
|
||||
disclosure.onClose();
|
||||
}}
|
||||
/>
|
||||
<Box position={'absolute'} inset={0} zIndex={'999'} fontSize={'13px'}>
|
||||
></Box>
|
||||
<Box position={'absolute'} inset={0} zIndex={999} fontSize={'13px'}>
|
||||
<Box
|
||||
bgColor={'red'}
|
||||
bg="rgba(255, 255, 255, 0.8)"
|
||||
boxShadow={'0px 1px 2px rgba(0, 0, 0, 0.2)'}
|
||||
color={'white'}
|
||||
bg="rgba(220, 220, 224, 0.10)"
|
||||
boxShadow={'0px 1.167px 2.333px 0px rgba(0, 0, 0, 0.20)'}
|
||||
position={'absolute'}
|
||||
top="43px"
|
||||
top="24px"
|
||||
right={0}
|
||||
left={0}
|
||||
cursor={'initial'}
|
||||
borderRadius={'8px'}
|
||||
p="6px"
|
||||
backdropFilter={'blur(150px)'}
|
||||
backdropFilter={'blur(50px)'}
|
||||
maxH={'300px'}
|
||||
overflow={'auto'}
|
||||
style={{
|
||||
scrollbarWidth: 'none'
|
||||
}}
|
||||
>
|
||||
<VStack gap={0} alignItems={'stretch'}>
|
||||
<TeamCenter />
|
||||
<Divider bgColor={'rgba(0, 0, 0, 0.1)'} my={'4px'} h={'1px'} />
|
||||
{/* <Divider bgColor={'rgba(0, 0, 0, 0.05)'} my={'4px'} h={'0px'} /> */}
|
||||
{namespaces.map((ns) => {
|
||||
return (
|
||||
<NsListItem
|
||||
@@ -122,7 +133,7 @@ export default function WorkspaceToggle() {
|
||||
</VStack>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
</Box>
|
||||
) : null}
|
||||
</HStack>
|
||||
);
|
||||
|
||||
@@ -1,55 +0,0 @@
|
||||
import { Flex, FlexProps, Icon, Tooltip } from '@chakra-ui/react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
|
||||
export default function GithubComponent(props: FlexProps) {
|
||||
const { data } = useQuery(
|
||||
['getGithubStar'],
|
||||
() => fetch('https://api.github.com/repos/labring/sealos').then((res) => res.json()),
|
||||
{
|
||||
staleTime: 24 * 60 * 60 * 1000
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
hasArrow
|
||||
px={4}
|
||||
py={2}
|
||||
borderRadius={'8px'}
|
||||
fontSize={'12px'}
|
||||
fontWeight={400}
|
||||
color={'#24282C'}
|
||||
label={`GitHub Star: ${Math.floor(
|
||||
(data?.stargazers_count ? data.stargazers_count : 12500) / 1000
|
||||
)}k`}
|
||||
bg={'rgba(255, 255, 255)'}
|
||||
placement="bottom-end"
|
||||
>
|
||||
<Flex
|
||||
userSelect={'none'}
|
||||
ml="auto"
|
||||
w="32px"
|
||||
h="32px"
|
||||
borderRadius={'50%'}
|
||||
justifyContent={'center'}
|
||||
alignItems={'center'}
|
||||
backgroundColor={'#FFF'}
|
||||
color={'#152539'}
|
||||
cursor={'pointer'}
|
||||
fontWeight={500}
|
||||
{...props}
|
||||
onClick={() => window.open('https://github.com/labring/sealos')}
|
||||
>
|
||||
<Icon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20px"
|
||||
height="20px"
|
||||
viewBox="0 0 20 20"
|
||||
fill="#111824"
|
||||
>
|
||||
<path d="M10.5149 2.46429C9.50066 2.46429 8.94582 2.57085 8.11017 2.75393C7.6713 2.47429 7.1805 2.2266 6.71141 2.04216C6.16273 1.82643 5.50582 1.64137 4.96522 1.69937C4.73761 1.72379 4.54128 1.83769 4.40747 2.00232C4.34607 2.06873 4.29451 2.14634 4.25617 2.23385C3.78624 3.30652 3.8237 4.37524 4.02876 5.17706C3.70273 5.62136 3.45054 6.03802 3.2796 6.49567C3.06127 7.08016 2.99839 7.66872 2.99839 8.37421C2.99839 10.2018 3.55784 11.6251 4.60368 12.6213C5.34248 13.325 6.27275 13.7665 7.29637 14.0126C7.19262 14.3116 7.14454 14.6131 7.12749 14.9237C7.12244 14.9608 7.11984 14.9987 7.11984 15.0371L7.11984 15.2993C7.08437 15.3069 7.04899 15.3168 7.01389 15.3292C6.29686 15.5828 4.42832 15.4917 3.48217 13.4202C3.29096 13.0015 2.79658 12.8172 2.37795 13.0084C1.95931 13.1996 1.77494 13.6939 1.96615 14.1126C3.19725 16.808 5.63646 17.3073 7.11984 17.0209L7.11984 17.4781C7.11984 17.9383 7.49294 18.3114 7.95318 18.3114C8.41341 18.3114 8.78651 17.9383 8.78651 17.4781L8.7865 15.2177C8.78661 14.8916 8.82066 14.6928 8.87987 14.5341C8.93817 14.3779 9.04207 14.2042 9.26358 13.9629C9.57478 13.6238 9.5522 13.0967 9.21313 12.7854C9.12786 12.7072 9.03069 12.65 8.92805 12.6137C8.85498 12.5841 8.77645 12.5645 8.69396 12.5566C7.41295 12.4343 6.42015 12.0497 5.75319 11.4145C5.10404 10.7961 4.66505 9.84643 4.66505 8.37421C4.66505 7.76687 4.72051 7.40117 4.8409 7.07886C4.96477 6.74723 5.18069 6.39831 5.6054 5.85725C5.68261 5.75888 5.73419 5.64856 5.76109 5.53435C5.79993 5.37587 5.79274 5.20438 5.73033 5.04034C5.57774 4.63929 5.48097 4.05052 5.61339 3.42948C5.75142 3.46674 5.91501 3.5199 6.10155 3.59324C6.57035 3.77757 7.06537 4.04219 7.45271 4.32035C7.58549 4.4157 7.7368 4.46641 7.88875 4.47541C7.9655 4.4805 8.04425 4.47496 8.12315 4.45762L8.25749 4.42806C9.19661 4.22125 9.60665 4.13096 10.5149 4.13096C11.472 4.13096 11.9343 4.22367 12.9808 4.45706C13.0503 4.47256 13.1197 4.47889 13.1878 4.47685C13.3544 4.47581 13.5223 4.42493 13.668 4.32035C14.0553 4.04219 14.5503 3.77757 15.0191 3.59324C15.2035 3.52076 15.3654 3.46799 15.5024 3.4308C15.6309 4.03267 15.5421 4.58336 15.3904 4.98448C15.3739 5.02807 15.3613 5.07218 15.3525 5.11643C15.2813 5.36893 15.3302 5.65098 15.5085 5.86975C15.8603 6.30132 16.0766 6.61787 16.2175 6.96875C16.3557 7.31312 16.4425 7.74564 16.4425 8.42196C16.4425 9.79112 16.0558 10.7082 15.4422 11.328C14.8146 11.962 13.85 12.3861 12.5089 12.5597C12.4949 12.5615 12.4811 12.5637 12.4673 12.5661C12.2703 12.5692 12.0736 12.6417 11.9171 12.7854C11.578 13.0967 11.5554 13.6238 11.8666 13.9629C12.0881 14.2042 12.192 14.3779 12.2503 14.5341C12.3095 14.6928 12.3436 14.8916 12.3437 15.2177L12.3437 17.4781C12.3437 17.9383 12.7168 18.3114 13.177 18.3114C13.6373 18.3114 14.0104 17.9383 14.0104 17.4781L14.0104 15.0371C14.0104 14.9987 14.0078 14.9608 14.0027 14.9237C13.9855 14.6103 13.9367 14.3061 13.831 14.0045C14.9295 13.7266 15.889 13.2458 16.6267 12.5005C17.6174 11.4997 18.1092 10.1226 18.1092 8.42196C18.1092 7.59831 18.0029 6.94238 17.7642 6.34782C17.587 5.90648 17.3488 5.53004 17.0789 5.17087C17.2969 4.35681 17.3282 3.29947 16.8497 2.20714C16.7832 2.05551 16.6771 1.93357 16.5488 1.84818C16.4364 1.76822 16.3024 1.71514 16.1554 1.69937C15.6148 1.64137 14.9579 1.82643 14.4093 2.04216C13.939 2.22706 13.4469 2.47552 13.0072 2.75601C12.1219 2.56301 11.5322 2.46429 10.5149 2.46429Z" />
|
||||
</Icon>
|
||||
</Flex>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
@@ -4,7 +4,7 @@ import useSessionStore from '@/stores/session';
|
||||
import { Box, Center, Flex, FlexProps, Image, useDisclosure } from '@chakra-ui/react';
|
||||
import LangSelectSimple from '../LangSelect/simple';
|
||||
import Iconfont from '../iconfont';
|
||||
import GithubComponent from './github';
|
||||
import GithubComponent from '../account/github';
|
||||
import { ReactElement, useCallback, useState } from 'react';
|
||||
import { useConfigStore } from '@/stores/config';
|
||||
import RegionToggle from '@/components/region/RegionToggle';
|
||||
@@ -21,14 +21,13 @@ export default function Index(props: { userMenuStyleProps?: FlexProps }) {
|
||||
const [notificationAmount, setNotificationAmount] = useState(0);
|
||||
const accountDisclosure = useDisclosure();
|
||||
const showDisclosure = useDisclosure();
|
||||
|
||||
const { layoutConfig } = useConfigStore();
|
||||
const userInfo = useSessionStore((state) => state.session);
|
||||
const onAmount = useCallback((amount: number) => setNotificationAmount(amount), []);
|
||||
const {
|
||||
userMenuStyleProps = {
|
||||
alignItems: 'center',
|
||||
position: 'absolute',
|
||||
// position: 'absolute',
|
||||
top: '42px',
|
||||
right: '42px',
|
||||
cursor: 'pointer',
|
||||
@@ -40,7 +39,6 @@ export default function Index(props: { userMenuStyleProps?: FlexProps }) {
|
||||
w: '36px',
|
||||
h: '36px',
|
||||
background: 'rgba(244, 246, 248, 0.6)',
|
||||
|
||||
boxShadow: '0px 1.2px 2.3px rgba(0, 0, 0, 0.2)'
|
||||
};
|
||||
|
||||
@@ -55,27 +53,25 @@ export default function Index(props: { userMenuStyleProps?: FlexProps }) {
|
||||
button: <Iconfont iconName="icon-notifications" width={20} height={20}></Iconfont>,
|
||||
click: () => showDisclosure.onOpen(),
|
||||
content: <Notification key={'notification'} disclosure={showDisclosure} onAmount={onAmount} />
|
||||
},
|
||||
{
|
||||
key: UserMenuKeys.Account,
|
||||
button: (
|
||||
<Image
|
||||
width={'36px'}
|
||||
height={'36px'}
|
||||
borderRadius="full"
|
||||
src={userInfo?.user?.avatar || ''}
|
||||
fallbackSrc={layoutConfig?.logo}
|
||||
alt="user avator"
|
||||
/>
|
||||
),
|
||||
click: () => accountDisclosure.onOpen(),
|
||||
content: <Account disclosure={accountDisclosure} key={'avatar'} />
|
||||
}
|
||||
// {
|
||||
// key: UserMenuKeys.Account,
|
||||
// button: (
|
||||
// <Image
|
||||
// width={'36px'}
|
||||
// height={'36px'}
|
||||
// borderRadius="full"
|
||||
// src={userInfo?.user?.avatar || ''}
|
||||
// fallbackSrc={layoutConfig?.logo}
|
||||
// alt="user avator"
|
||||
// />
|
||||
// ),
|
||||
// click: () => accountDisclosure.onOpen(),
|
||||
// content: <Account disclosure={accountDisclosure} key={'avatar'} />
|
||||
// }
|
||||
];
|
||||
return (
|
||||
<Flex {...userMenuStyleProps}>
|
||||
<RegionToggle />
|
||||
<WorkspaceToggle />
|
||||
<LangSelectSimple {...baseItemStyle} />
|
||||
{layoutConfig?.common.githubStarEnabled && <GithubComponent {...baseItemStyle} />}
|
||||
{buttonList.map((item) => (
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
import { verifyAccessToken } from '@/services/backend/auth';
|
||||
import { getUserKubeconfigNotPatch } from '@/services/backend/kubernetes/admin';
|
||||
import { K8sApi } from '@/services/backend/kubernetes/user';
|
||||
import { jsonRes } from '@/services/backend/response';
|
||||
import { switchKubeconfigNamespace } from '@/utils/switchKubeconfigNamespace';
|
||||
import type { NextApiRequest, NextApiResponse } from 'next';
|
||||
|
||||
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
|
||||
try {
|
||||
const payload = await verifyAccessToken(req.headers);
|
||||
if (!payload) return jsonRes(res, { code: 401, message: 'failed to get info' });
|
||||
const namespace = payload.workspaceId;
|
||||
const _kc = await getUserKubeconfigNotPatch(payload.userCrName);
|
||||
if (!_kc) return jsonRes(res, { code: 404, message: 'user is not found' });
|
||||
const realKc = switchKubeconfigNamespace(_kc, namespace);
|
||||
const kc = K8sApi(realKc);
|
||||
if (!kc) return jsonRes(res, { code: 404, message: 'The kubeconfig is not found' });
|
||||
|
||||
const currentTime = new Date();
|
||||
|
||||
const time24HoursAgo = new Date();
|
||||
time24HoursAgo.setHours(currentTime.getHours() - 24);
|
||||
|
||||
const timeOneMonthAgo = new Date();
|
||||
timeOneMonthAgo.setMonth(currentTime.getMonth() - 1);
|
||||
|
||||
const base = global.AppConfig.desktop.auth.billingUrl as string;
|
||||
const consumptionUrl = base + '/account/v1alpha1/costs/consumption';
|
||||
|
||||
const results = await Promise.all([
|
||||
(
|
||||
await fetch(consumptionUrl, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
endTime: currentTime,
|
||||
kubeConfig: kc.exportConfig(),
|
||||
owner: payload.userCrName,
|
||||
appType: '',
|
||||
namespace,
|
||||
startTime: timeOneMonthAgo
|
||||
})
|
||||
})
|
||||
).json(),
|
||||
(
|
||||
await fetch(consumptionUrl, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
endTime: currentTime,
|
||||
kubeConfig: kc.exportConfig(),
|
||||
owner: payload.userCrName,
|
||||
appType: '',
|
||||
namespace,
|
||||
startTime: time24HoursAgo
|
||||
})
|
||||
})
|
||||
).json()
|
||||
]);
|
||||
|
||||
jsonRes(res, {
|
||||
data: {
|
||||
prevMonthTime: results[0].amount || 0,
|
||||
prevDayTime: results[1].amount || 0
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
jsonRes(res, { code: 500, data: err });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
import { verifyAccessToken } from '@/services/backend/auth';
|
||||
import { K8sApiDefault, getUserKubeconfigNotPatch } from '@/services/backend/kubernetes/admin';
|
||||
import { CRDMeta, K8sApi, ListCRD } from '@/services/backend/kubernetes/user';
|
||||
import { jsonRes } from '@/services/backend/response';
|
||||
import { NotificationItem } from '@/types';
|
||||
import { switchKubeconfigNamespace } from '@/utils/switchKubeconfigNamespace';
|
||||
import type { NextApiRequest, NextApiResponse } from 'next';
|
||||
import { initK8s } from 'sealos-desktop-sdk/service';
|
||||
import * as k8s from '@kubernetes/client-node';
|
||||
|
||||
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
|
||||
try {
|
||||
const payload = await verifyAccessToken(req.headers);
|
||||
if (!payload) return jsonRes(res, { code: 401, message: 'failed to get info' });
|
||||
const namespace = payload.workspaceId;
|
||||
const _kc = await getUserKubeconfigNotPatch(payload.userCrName);
|
||||
if (!_kc) return jsonRes(res, { code: 404, message: 'user is not found' });
|
||||
const realKc = switchKubeconfigNamespace(_kc, namespace);
|
||||
const kc = K8sApi(realKc);
|
||||
if (!kc) return jsonRes(res, { code: 404, message: 'The kubeconfig is not found' });
|
||||
|
||||
const result = await kc.makeApiClient(k8s.CoreV1Api).listNamespacedPod(namespace);
|
||||
|
||||
let totalCpuLimits = 0;
|
||||
let totalMemoryLimits = 0;
|
||||
let totalStorageRequests = 0;
|
||||
let runningPodCount = 0;
|
||||
let totalPodCount = result.body.items.length;
|
||||
|
||||
for (const pod of result.body.items) {
|
||||
if (pod.status?.phase === 'Running') {
|
||||
runningPodCount++;
|
||||
}
|
||||
if (!pod?.spec) continue;
|
||||
|
||||
for (const container of pod.spec.containers) {
|
||||
if (!container?.resources) continue;
|
||||
const limits = container?.resources.limits as {
|
||||
cpu: string;
|
||||
memory: string;
|
||||
};
|
||||
totalCpuLimits += parseResourceValue(limits.cpu);
|
||||
totalMemoryLimits += parseResourceValue(limits.memory);
|
||||
}
|
||||
|
||||
if (!pod?.spec?.volumes) continue;
|
||||
for (const volume of pod.spec.volumes) {
|
||||
if (!volume.persistentVolumeClaim?.claimName) continue;
|
||||
const pvcName = volume.persistentVolumeClaim.claimName;
|
||||
const pvc = await kc
|
||||
.makeApiClient(k8s.CoreV1Api)
|
||||
.readNamespacedPersistentVolumeClaim(pvcName, namespace);
|
||||
const storage = pvc?.body?.spec?.resources?.requests?.storage || '0';
|
||||
totalStorageRequests += parseResourceValue(storage);
|
||||
}
|
||||
}
|
||||
|
||||
jsonRes(res, {
|
||||
data: {
|
||||
totalCpu: totalCpuLimits.toFixed(2),
|
||||
totalMemory: totalMemoryLimits.toFixed(2),
|
||||
totalStorage: totalStorageRequests.toFixed(2),
|
||||
runningPodCount,
|
||||
totalPodCount
|
||||
// result: result.body.items
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
jsonRes(res, { code: 500, data: err });
|
||||
}
|
||||
}
|
||||
|
||||
function parseResourceValue(value: string) {
|
||||
const unit = value.match(/[a-zA-Z]+$/);
|
||||
const number = parseFloat(value);
|
||||
if (!unit) return number;
|
||||
|
||||
switch (unit[0]) {
|
||||
case 'm':
|
||||
return number / 1000; // For CPU millicores to cores
|
||||
case 'Ki':
|
||||
return number / (1024 * 1024); // For Ki to Gi
|
||||
case 'Mi':
|
||||
return number / 1024; // For Mi to Gi
|
||||
case 'Gi':
|
||||
return number; // Already in Gi
|
||||
default:
|
||||
return number; // Assume raw number if no unit
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,4 @@
|
||||
import DesktopContent from '@/components/desktop_content';
|
||||
import FloatButton from '@/components/floating_button';
|
||||
import MoreApps from '@/components/more_apps';
|
||||
import useAppStore from '@/stores/app';
|
||||
import { useConfigStore } from '@/stores/config';
|
||||
import useSessionStore from '@/stores/session';
|
||||
@@ -14,6 +12,8 @@ import { useRouter } from 'next/router';
|
||||
import Script from 'next/script';
|
||||
import { createContext, useEffect, useState } from 'react';
|
||||
import useCallbackStore from '@/stores/callback';
|
||||
import FloatButton from '@/components/floating_button';
|
||||
import 'react-contexify/dist/ReactContexify.css';
|
||||
|
||||
const destination = '/signin';
|
||||
interface IMoreAppsContext {
|
||||
@@ -21,6 +21,7 @@ interface IMoreAppsContext {
|
||||
setShowMoreApps: (value: boolean) => void;
|
||||
}
|
||||
export const MoreAppsContext = createContext<IMoreAppsContext | null>(null);
|
||||
|
||||
export default function Home({ sealos_cloud_domain }: { sealos_cloud_domain: string }) {
|
||||
const router = useRouter();
|
||||
const { isUserLogin } = useSessionStore();
|
||||
@@ -109,8 +110,6 @@ export default function Home({ sealos_cloud_domain }: { sealos_cloud_domain: str
|
||||
})}
|
||||
<MoreAppsContext.Provider value={{ showMoreApps, setShowMoreApps }}>
|
||||
<DesktopContent />
|
||||
<FloatButton />
|
||||
<MoreApps />
|
||||
</MoreAppsContext.Provider>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import request from '@/services/request';
|
||||
import { APPTYPE, TApp, TOSState, WindowSize, displayType } from '@/types';
|
||||
import { formatUrl } from '@/utils/format';
|
||||
import { cloneDeep, minBy } from 'lodash';
|
||||
import { create } from 'zustand';
|
||||
import { devtools, persist } from 'zustand/middleware';
|
||||
import { immer } from 'zustand/middleware/immer';
|
||||
import AppStateManager from '../utils/ProcessManager';
|
||||
import { formatUrl } from '@/utils/format';
|
||||
import { minBy, cloneDeep } from 'lodash';
|
||||
|
||||
export class AppInfo {
|
||||
pid: number;
|
||||
@@ -37,7 +37,7 @@ export class AppInfo {
|
||||
|
||||
constructor(app: TApp, pid: number) {
|
||||
this.isShow = false;
|
||||
this.zIndex = 1;
|
||||
this.zIndex = 10; // It cannot be 1 anymore, leaving space for other components
|
||||
this.size = 'maximize';
|
||||
this.cacheSize = 'maximize';
|
||||
this.style = cloneDeep(app.style);
|
||||
@@ -64,7 +64,7 @@ const useAppStore = create<TOSState>()(
|
||||
runningInfo: [],
|
||||
// present of highest layer
|
||||
currentAppPid: -1,
|
||||
maxZIndex: 0,
|
||||
maxZIndex: 10,
|
||||
launchQuery: {},
|
||||
autolaunch: '',
|
||||
runner: new AppStateManager([]),
|
||||
@@ -73,7 +73,7 @@ const useAppStore = create<TOSState>()(
|
||||
set((state) => {
|
||||
state.installedApps = res?.data?.map((app: TApp) => new AppInfo(app, -1));
|
||||
state.runner.loadApps(state.installedApps.map((app) => app.key));
|
||||
state.maxZIndex = 0;
|
||||
state.maxZIndex = 10;
|
||||
});
|
||||
return get();
|
||||
},
|
||||
@@ -137,7 +137,7 @@ const useAppStore = create<TOSState>()(
|
||||
return;
|
||||
}
|
||||
// Up to 7 apps && one home app
|
||||
if (get().runningInfo.length >= 7) {
|
||||
if (get().runningInfo.length >= 8) {
|
||||
get().deleteLeastUsedAppByIndex();
|
||||
}
|
||||
if (app.type === APPTYPE.LINK) {
|
||||
@@ -145,6 +145,7 @@ const useAppStore = create<TOSState>()(
|
||||
return;
|
||||
}
|
||||
let run_app = get().runner.openApp(app.key);
|
||||
|
||||
const _app = new AppInfo(app, run_app.pid);
|
||||
_app.zIndex = zIndex;
|
||||
_app.size = appSize;
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
import { create } from 'zustand';
|
||||
import { persist } from 'zustand/middleware';
|
||||
import { immer } from 'zustand/middleware/immer';
|
||||
|
||||
type State = {
|
||||
isAppBar: boolean;
|
||||
toggleShape: () => void;
|
||||
};
|
||||
|
||||
export const useDesktopConfigStore = create<State>()(
|
||||
persist(
|
||||
immer((set) => ({
|
||||
isAppBar: true,
|
||||
toggleShape() {
|
||||
set((state) => {
|
||||
state.isAppBar = !state.isAppBar;
|
||||
});
|
||||
}
|
||||
})),
|
||||
{
|
||||
name: 'desktop-config'
|
||||
}
|
||||
)
|
||||
);
|
||||
@@ -57,5 +57,14 @@ export const theme = extendTheme(originTheme, {
|
||||
Input,
|
||||
Select,
|
||||
Modal
|
||||
},
|
||||
breakpoints: {
|
||||
base: '0px',
|
||||
xs: '375px',
|
||||
sm: '640px',
|
||||
md: '768px',
|
||||
lg: '1024px',
|
||||
xl: '1280px',
|
||||
'2xl': '1440px'
|
||||
}
|
||||
});
|
||||
|
||||
@@ -46,7 +46,11 @@ export type TAppConfig = {
|
||||
helpDropDown: boolean;
|
||||
helpDocs: boolean | string;
|
||||
};
|
||||
i18n?: any;
|
||||
i18n?: {
|
||||
[key: string]: {
|
||||
name: string;
|
||||
};
|
||||
};
|
||||
displayType: displayType;
|
||||
};
|
||||
|
||||
|
||||
@@ -52,6 +52,9 @@ export type LayoutConfigType = {
|
||||
protocol?: ProtocolConfigType;
|
||||
common: {
|
||||
githubStarEnabled: boolean;
|
||||
workorderEnabled: boolean;
|
||||
accountSettingEnabled: boolean;
|
||||
docsUrl?: string;
|
||||
};
|
||||
};
|
||||
|
||||
@@ -61,6 +64,7 @@ export type AuthConfigType = {
|
||||
signUpEnabled?: boolean;
|
||||
baiduToken?: string;
|
||||
jwt: JwtConfigType;
|
||||
billingUrl?: string;
|
||||
invite?: {
|
||||
enabled: boolean;
|
||||
lafSecretKey: string;
|
||||
@@ -122,7 +126,8 @@ export type AuthClientConfigType = DeepRequired<
|
||||
'idp.google.clientSecret',
|
||||
'idp.sms.ali',
|
||||
'idp.oauth2.clientSecret',
|
||||
'jwt'
|
||||
'jwt',
|
||||
'billingUrl'
|
||||
]
|
||||
>
|
||||
>;
|
||||
@@ -188,7 +193,9 @@ export const DefaultLayoutConfig: LayoutConfigType = {
|
||||
scripts: []
|
||||
},
|
||||
common: {
|
||||
githubStarEnabled: false
|
||||
githubStarEnabled: false,
|
||||
workorderEnabled: false,
|
||||
accountSettingEnabled: false
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -2,15 +2,12 @@ import { InvitedStatus, UserNsStatus, UserRole } from '@/types/team';
|
||||
import dayjs from 'dayjs';
|
||||
import { JoinStatus, Role } from 'prisma/region/generated/client';
|
||||
|
||||
export const validateNumber = (num: number) => typeof num === 'number' && isFinite(num) && num > 0;
|
||||
|
||||
export const formatTime = (time: string | number | Date, format = 'YYYY-MM-DD HH:mm:ss') => {
|
||||
return dayjs(time).format(format);
|
||||
};
|
||||
|
||||
// 1¥=10000
|
||||
export const formatMoney = (money: number) => {
|
||||
return (money / 10000).toFixed(2);
|
||||
};
|
||||
|
||||
export function appWaitSeconds(ms: number) {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
import { Icon, IconProps } from '@chakra-ui/react';
|
||||
|
||||
export default function DocsIcon(props: IconProps) {
|
||||
return (
|
||||
<Icon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="21px"
|
||||
height="20px"
|
||||
viewBox="0 0 21 20"
|
||||
fill="none"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M4.7261 2.80542L5.11222 2.80542C5.96437 2.80541 6.65736 2.8054 7.21974 2.85135C7.8006 2.89881 8.31938 2.99965 8.80206 3.24559C9.31758 3.50826 9.7677 3.87706 10.1248 4.32437C10.4819 3.87706 10.932 3.50826 11.4475 3.24559C11.9302 2.99965 12.449 2.89881 13.0298 2.85135C13.5922 2.8054 14.2852 2.80541 15.1373 2.80542L15.5235 2.80542C15.937 2.8054 16.2992 2.80539 16.5986 2.82985C16.9163 2.85581 17.2402 2.91365 17.5541 3.07359C18.0171 3.30948 18.3935 3.68588 18.6293 4.14883C18.7893 4.46273 18.8471 4.78664 18.8731 5.10436C18.8975 5.40377 18.8975 5.76596 18.8975 6.17945V13.8207C18.8975 14.2342 18.8975 14.5964 18.8731 14.8958C18.8471 15.2135 18.7893 15.5374 18.6293 15.8513C18.3935 16.3143 18.0171 16.6907 17.5541 16.9266C17.2402 17.0865 16.9163 17.1443 16.5986 17.1703C16.2991 17.1948 15.937 17.1947 15.5234 17.1947H4.72612C4.31261 17.1947 3.95041 17.1948 3.65099 17.1703C3.33327 17.1443 3.00936 17.0865 2.69546 16.9266C2.23251 16.6907 1.85611 16.3143 1.62022 15.8513C1.46028 15.5374 1.40244 15.2135 1.37648 14.8958C1.35202 14.5964 1.35203 14.2342 1.35205 13.8207V6.17947C1.35203 5.76597 1.35202 5.40378 1.37648 5.10436C1.40244 4.78664 1.46028 4.46273 1.62022 4.14883C1.85611 3.68588 2.23251 3.30948 2.69546 3.07359C3.00936 2.91365 3.33327 2.85581 3.65099 2.82985C3.95041 2.80539 4.3126 2.8054 4.7261 2.80542ZM9.24244 8.73761C9.24244 7.83924 9.24176 7.21853 9.20237 6.7365C9.16383 6.26477 9.09267 6.00408 8.99461 5.81163C8.77661 5.38378 8.42876 5.03593 8.00092 4.81793C7.80846 4.71987 7.54777 4.64871 7.07604 4.61017C6.59401 4.57079 5.9733 4.5701 5.07493 4.5701H4.75932C4.30285 4.5701 4.01357 4.57079 3.79469 4.58867C3.58611 4.60571 3.52028 4.63387 3.49661 4.64593C3.3657 4.71263 3.25926 4.81907 3.19256 4.94998C3.1805 4.97365 3.15234 5.03947 3.1353 5.24806C3.11742 5.46694 3.11673 5.75622 3.11673 6.21269V13.7875C3.11673 14.2439 3.11742 14.5332 3.1353 14.7521C3.15234 14.9607 3.1805 15.0265 3.19256 15.0502C3.25926 15.1811 3.3657 15.2875 3.49661 15.3542C3.52028 15.3663 3.58611 15.3944 3.79469 15.4115C4.01357 15.4294 4.30285 15.43 4.75932 15.43H9.24244V8.73761ZM11.0071 15.43V8.73761C11.0071 7.83924 11.0078 7.21853 11.0472 6.7365C11.0857 6.26477 11.1569 6.00408 11.255 5.81163C11.473 5.38378 11.8208 5.03593 12.2486 4.81793C12.4411 4.71987 12.7018 4.64871 13.1735 4.61017C13.6556 4.57079 14.2763 4.5701 15.1746 4.5701H15.4902C15.9467 4.5701 16.236 4.57079 16.4549 4.58867C16.6635 4.60571 16.7293 4.63387 16.753 4.64593C16.8839 4.71263 16.9903 4.81907 17.057 4.94998C17.0691 4.97365 17.0972 5.03947 17.1143 5.24806C17.1321 5.46694 17.1328 5.75622 17.1328 6.21269V13.7875C17.1328 14.2439 17.1321 14.5332 17.1143 14.7521C17.0972 14.9607 17.0691 15.0265 17.057 15.0502C16.9903 15.1811 16.8839 15.2875 16.753 15.3542C16.7293 15.3663 16.6635 15.3944 16.4549 15.4115C16.236 15.4294 15.9467 15.43 15.4902 15.43H11.0071Z"
|
||||
fill="white"
|
||||
/>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
@@ -1,19 +1,22 @@
|
||||
import { createIcon } from '@chakra-ui/react';
|
||||
|
||||
const LogoutIcon = createIcon({
|
||||
displayName: 'LogoutIcon',
|
||||
viewBox: '0 0 15 15',
|
||||
path: (
|
||||
<g fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
import { Icon } from '@chakra-ui/react';
|
||||
export default function LogoutIcon(props: Parameters<typeof Icon>[0]) {
|
||||
return (
|
||||
<Icon
|
||||
{...props}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15px"
|
||||
height="14px"
|
||||
viewBox="0 0 15 14"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M12.387 4.0556C12.3852 4.05317 12.3833 4.05076 12.3815 4.04834C12.3733 4.03751 12.3652 4.02655 12.3569 4.01577L12.3562 4.01642C12.1957 3.82372 11.954 3.70102 11.6836 3.70102C11.2003 3.70102 10.8086 4.09277 10.8086 4.57602C10.8086 4.78404 10.8813 4.97498 11.0025 5.12514L11.0021 5.12545C11.5502 5.85623 11.875 6.76412 11.875 7.74789C11.875 10.1641 9.91624 12.1229 7.5 12.1229C5.08376 12.1229 3.125 10.1641 3.125 7.74789C3.125 6.76412 3.44976 5.85623 3.99785 5.12545L3.99747 5.12514C4.11869 4.97498 4.19141 4.78402 4.19141 4.57602C4.19141 4.09277 3.79965 3.70102 3.31641 3.70102C3.04602 3.70102 2.80434 3.82372 2.64383 4.01642L2.64305 4.01577C2.63477 4.02653 2.62673 4.0375 2.61851 4.04833C2.61667 4.05076 2.61482 4.05318 2.61302 4.05563C1.83611 5.08229 1.375 6.36116 1.375 7.74789C1.375 11.1306 4.11725 13.8729 7.5 13.8729C10.8827 13.8729 13.625 11.1306 13.625 7.74789C13.625 6.36116 13.1639 5.08228 12.387 4.0556Z"
|
||||
fill="#24282C"
|
||||
d="M12.302 3.30771C12.3002 3.30527 12.2984 3.30287 12.2965 3.30045C12.2883 3.28962 12.2803 3.27865 12.272 3.26788L12.2712 3.26852C12.1107 3.07583 11.869 2.95312 11.5986 2.95312C11.1154 2.95312 10.7236 3.34488 10.7236 3.82813C10.7236 4.03614 10.7964 4.22708 10.9176 4.37724L10.9172 4.37756C11.4653 5.10833 11.79 6.01623 11.79 7C11.79 9.41624 9.83128 11.375 7.41504 11.375C4.99879 11.375 3.04004 9.41624 3.04004 7C3.04004 6.01623 3.3648 5.10833 3.91289 4.37756L3.91251 4.37724C4.03372 4.22708 4.10645 4.03613 4.10645 3.82813C4.10645 3.34488 3.71469 2.95312 3.23145 2.95312C2.96106 2.95312 2.71938 3.07583 2.55887 3.26852L2.55809 3.26788C2.54981 3.27864 2.54177 3.2896 2.53355 3.30043C2.53171 3.30287 2.52986 3.30529 2.52805 3.30773C1.75115 4.33439 1.29004 5.61326 1.29004 7C1.29004 10.3828 4.03229 13.125 7.41504 13.125C10.7978 13.125 13.54 10.3828 13.54 7C13.54 5.61326 13.0789 4.33438 12.302 3.30771Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M7.5 7.74789C7.98125 7.74789 8.375 7.35414 8.375 6.87289V2.49789C8.375 2.01664 7.98125 1.62289 7.5 1.62289C7.01875 1.62289 6.625 2.01664 6.625 2.49789V6.87289C6.625 7.35414 7.01875 7.74789 7.5 7.74789Z"
|
||||
fill="#24282C"
|
||||
d="M7.41504 7C7.89629 7 8.29004 6.60625 8.29004 6.125V1.75C8.29004 1.26875 7.89629 0.875 7.41504 0.875C6.93379 0.875 6.54004 1.26875 6.54004 1.75V6.125C6.54004 6.60625 6.93379 7 7.41504 7Z"
|
||||
fill="white"
|
||||
/>
|
||||
</g>
|
||||
)
|
||||
});
|
||||
export default LogoutIcon;
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,19 @@
|
||||
import { createIcon } from '@chakra-ui/react';
|
||||
import { Icon, IconProps } from '@chakra-ui/react';
|
||||
|
||||
const MonitorIcon = createIcon({
|
||||
displayName: 'MonitorIcon',
|
||||
viewBox: '0 0 16 17',
|
||||
d: 'M2.00004 6.33846C1.81115 6.33846 1.65271 6.27446 1.52471 6.14646C1.39671 6.01846 1.33293 5.86024 1.33338 5.67179V4.33846C1.33338 3.97179 1.46404 3.65779 1.72538 3.39646C1.98671 3.13513 2.30049 3.00468 2.66671 3.00513H13.3334C13.7 3.00513 14.014 3.13579 14.2754 3.39713C14.5367 3.65846 14.6672 3.97224 14.6667 4.33846V5.67179C14.6667 5.86068 14.6027 6.01913 14.4747 6.14713C14.3467 6.27513 14.1885 6.33891 14 6.33846C13.8112 6.33846 13.6527 6.27446 13.5247 6.14646C13.3967 6.01846 13.3329 5.86024 13.3334 5.67179V4.33846H2.66671V5.67179C2.66671 5.86068 2.60271 6.01913 2.47471 6.14713C2.34671 6.27513 2.18849 6.33891 2.00004 6.33846ZM2.66671 13.6718C2.30004 13.6718 1.98604 13.5411 1.72471 13.2798C1.46338 13.0185 1.33293 12.7047 1.33338 12.3385V11.0051C1.33338 10.8162 1.39738 10.6578 1.52538 10.5298C1.65338 10.4018 1.8116 10.338 2.00004 10.3385C2.18893 10.3385 2.34738 10.4025 2.47538 10.5305C2.60338 10.6585 2.66715 10.8167 2.66671 11.0051V12.3385H13.3334V11.0051C13.3334 10.8162 13.3974 10.6578 13.5254 10.5298C13.6534 10.4018 13.8116 10.338 14 10.3385C14.1889 10.3385 14.3474 10.4025 14.4754 10.5305C14.6034 10.6585 14.6672 10.8167 14.6667 11.0051V12.3385C14.6667 12.7051 14.536 13.0191 14.2747 13.2805C14.0134 13.5418 13.6996 13.6722 13.3334 13.6718H2.66671ZM6.66671 11.6718C6.78893 11.6718 6.9056 11.6411 7.01671 11.5798C7.12782 11.5185 7.21115 11.4269 7.26671 11.3051L9.33338 7.17179L10.0667 8.63846C10.1223 8.76068 10.2056 8.85246 10.3167 8.91379C10.4278 8.97513 10.5445 9.00557 10.6667 9.00513H14C14.1889 9.00513 14.3474 8.94113 14.4754 8.81313C14.6034 8.68513 14.6672 8.52691 14.6667 8.33846C14.6667 8.14957 14.6027 7.99113 14.4747 7.86313C14.3467 7.73513 14.1885 7.67135 14 7.67179H11.0834L9.93338 5.37179C9.81115 5.14957 9.61115 5.03846 9.33338 5.03846C9.0556 5.03846 8.8556 5.14957 8.73338 5.37179L6.66671 9.50513L5.93338 8.03846C5.87782 7.91624 5.79449 7.82446 5.68338 7.76313C5.57227 7.70179 5.4556 7.67135 5.33338 7.67179H2.00004C1.81115 7.67179 1.65271 7.73579 1.52471 7.86379C1.39671 7.99179 1.33293 8.15002 1.33338 8.33846C1.33338 8.52735 1.39738 8.68579 1.52538 8.81379C1.65338 8.94179 1.8116 9.00557 2.00004 9.00513H4.91671L6.06671 11.3051C6.12227 11.4274 6.2056 11.5191 6.31671 11.5805C6.42782 11.6418 6.54449 11.6722 6.66671 11.6718Z'
|
||||
});
|
||||
export default MonitorIcon;
|
||||
export default function MonitorIcon(props: IconProps) {
|
||||
return (
|
||||
<Icon
|
||||
{...props}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16px"
|
||||
height="16px"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M2.06675 6.00008C1.87787 6.00008 1.71942 5.93608 1.59142 5.80808C1.46342 5.68008 1.39964 5.52186 1.40009 5.33342V4.00008C1.40009 3.63342 1.53075 3.31942 1.79209 3.05808C2.05342 2.79675 2.3672 2.6663 2.73342 2.66675H13.4001C13.7668 2.66675 14.0808 2.79742 14.3421 3.05875C14.6034 3.32008 14.7339 3.63386 14.7334 4.00008V5.33342C14.7334 5.5223 14.6694 5.68075 14.5414 5.80875C14.4134 5.93675 14.2552 6.00053 14.0668 6.00008C13.8779 6.00008 13.7194 5.93608 13.5914 5.80808C13.4634 5.68008 13.3996 5.52186 13.4001 5.33342V4.00008H2.73342V5.33342C2.73342 5.5223 2.66942 5.68075 2.54142 5.80875C2.41342 5.93675 2.2552 6.00053 2.06675 6.00008ZM2.73342 13.3334C2.36675 13.3334 2.05275 13.2027 1.79142 12.9414C1.53009 12.6801 1.39964 12.3663 1.40009 12.0001V10.6667C1.40009 10.4779 1.46409 10.3194 1.59209 10.1914C1.72009 10.0634 1.87831 9.99964 2.06675 10.0001C2.25564 10.0001 2.41409 10.0641 2.54209 10.1921C2.67009 10.3201 2.73387 10.4783 2.73342 10.6667V12.0001H13.4001V10.6667C13.4001 10.4779 13.4641 10.3194 13.5921 10.1914C13.7201 10.0634 13.8783 9.99964 14.0668 10.0001C14.2556 10.0001 14.4141 10.0641 14.5421 10.1921C14.6701 10.3201 14.7339 10.4783 14.7334 10.6667V12.0001C14.7334 12.3667 14.6028 12.6807 14.3414 12.9421C14.0801 13.2034 13.7663 13.3339 13.4001 13.3334H2.73342ZM6.73342 11.3334C6.85564 11.3334 6.97231 11.3027 7.08342 11.2414C7.19453 11.1801 7.27786 11.0885 7.33342 10.9667L9.40009 6.83342L10.1334 8.30008C10.189 8.4223 10.2723 8.51408 10.3834 8.57542C10.4945 8.63675 10.6112 8.66719 10.7334 8.66675H14.0668C14.2556 8.66675 14.4141 8.60275 14.5421 8.47475C14.6701 8.34675 14.7339 8.18853 14.7334 8.00008C14.7334 7.81119 14.6694 7.65275 14.5414 7.52475C14.4134 7.39675 14.2552 7.33297 14.0668 7.33342H11.1501L10.0001 5.03342C9.87786 4.81119 9.67787 4.70008 9.40009 4.70008C9.12231 4.70008 8.92231 4.81119 8.80009 5.03342L6.73342 9.16675L6.00009 7.70008C5.94453 7.57786 5.8612 7.48608 5.75009 7.42475C5.63898 7.36342 5.52231 7.33297 5.40009 7.33342H2.06675C1.87787 7.33342 1.71942 7.39742 1.59142 7.52542C1.46342 7.65342 1.39964 7.81164 1.40009 8.00008C1.40009 8.18897 1.46409 8.34742 1.59209 8.47542C1.72009 8.60342 1.87831 8.66719 2.06675 8.66675H4.98342L6.13342 10.9667C6.18898 11.089 6.27231 11.1807 6.38342 11.2421C6.49453 11.3034 6.6112 11.3339 6.73342 11.3334Z"
|
||||
fill="#93DDCB"
|
||||
/>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
import { Icon, IconProps } from '@chakra-ui/react';
|
||||
|
||||
export default function NotificationIcon(props: IconProps) {
|
||||
return (
|
||||
<Icon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="21px"
|
||||
height="20px"
|
||||
viewBox="0 0 21 20"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10.6247 2.81193C9.96309 2.81193 9.42672 3.3483 9.42672 4.00993C9.42672 4.18651 9.46461 4.35374 9.53298 4.5044C9.89085 4.44143 10.2565 4.40927 10.6247 4.40927C10.993 4.40927 11.3586 4.44143 11.7165 4.5044C11.7848 4.35374 11.8227 4.18651 11.8227 4.00993C11.8227 3.3483 11.2864 2.81193 10.6247 2.81193ZM13.2449 4.98549C13.3581 4.68167 13.4201 4.35287 13.4201 4.00993C13.4201 2.46611 12.1685 1.2146 10.6247 1.2146C9.0809 1.2146 7.82939 2.46611 7.82939 4.00993C7.82939 4.35287 7.89136 4.68167 8.00455 4.98549C7.53661 5.20494 7.10096 5.48473 6.71319 5.8208C5.65525 6.73768 5.03405 8.00783 5.03405 9.361C5.03405 11.0443 4.61854 12.2361 4.12939 13.0634L4.12128 13.0771C3.80675 13.609 3.5611 14.0245 3.39633 14.3227C3.31398 14.4718 3.24151 14.6099 3.18883 14.7282C3.1627 14.7869 3.13388 14.8574 3.11143 14.9322C3.09468 14.9879 3.05348 15.1325 3.07062 15.3078C3.08002 15.4041 3.10161 15.5952 3.21289 15.7903C3.32417 15.9853 3.4777 16.1012 3.55575 16.1583C3.68293 16.2513 3.8102 16.2912 3.87358 16.3087C3.94839 16.3294 4.02108 16.3417 4.08135 16.3497C4.20185 16.3659 4.34216 16.3741 4.48841 16.3792C4.77993 16.3893 5.18754 16.3893 5.70115 16.3893H7.5307C7.88534 17.7672 9.13614 18.7853 10.6247 18.7853C12.1133 18.7853 13.3641 17.7672 13.7187 16.3893H15.5483C16.0619 16.3893 16.4695 16.3893 16.761 16.3792C16.9073 16.3741 17.0476 16.3659 17.1681 16.3497C17.2284 16.3417 17.3011 16.3294 17.3759 16.3087C17.4392 16.2912 17.5665 16.2513 17.6937 16.1583C17.7717 16.1012 17.9253 15.9853 18.0366 15.7903C18.1478 15.5952 18.1694 15.4041 18.1788 15.3078C18.196 15.1325 18.1548 14.9879 18.138 14.9322C18.1156 14.8574 18.0867 14.7869 18.0606 14.7282C18.0079 14.6099 17.9355 14.4718 17.8531 14.3227C17.6883 14.0245 17.4427 13.609 17.1281 13.077L17.1201 13.0634C16.6309 12.2361 16.2154 11.0443 16.2154 9.361C16.2154 8.00783 15.5942 6.73768 14.5363 5.8208C14.1485 5.48473 13.7128 5.20494 13.2449 4.98549ZM11.834 6.16481C11.8442 6.16777 11.8543 6.17053 11.8645 6.17309C12.479 6.34249 13.0377 6.63576 13.4901 7.02788C14.2295 7.6687 14.6181 8.51125 14.6181 9.361C14.6181 11.3225 15.1064 12.7963 15.7451 13.8764C15.9648 14.2479 16.1429 14.5491 16.2821 14.7903C16.075 14.7919 15.8264 14.7919 15.53 14.7919H5.71946C5.42304 14.7919 5.1744 14.7919 4.96732 14.7903C5.10659 14.5491 5.28465 14.2479 5.50434 13.8764C6.14302 12.7963 6.63139 11.3225 6.63139 9.361C6.63139 8.51125 7.01993 7.6687 7.75934 7.02788C8.21179 6.63576 8.7704 6.34249 9.38493 6.17309C9.39513 6.17054 9.40529 6.16777 9.41541 6.16481C9.80105 6.06138 10.2083 6.0066 10.6247 6.0066C11.0412 6.0066 11.4484 6.06138 11.834 6.16481ZM9.24108 16.3893C9.51727 16.8667 10.0335 17.1879 10.6247 17.1879C11.216 17.1879 11.7322 16.8667 12.0084 16.3893H9.24108Z"
|
||||
fill="white"
|
||||
/>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,28 @@
|
||||
import { Icon, IconProps } from '@chakra-ui/react';
|
||||
|
||||
export default function WarnTriangleIcon(props: IconProps) {
|
||||
return (
|
||||
<Icon
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16px"
|
||||
height="16px"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
{...props}
|
||||
>
|
||||
<g clipPath="url(#clip0_6558_19122)">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M7.01874 1.5563C7.31826 1.38766 7.6562 1.29907 7.99993 1.29907C8.34367 1.29907 8.6816 1.38766 8.98113 1.5563C9.28065 1.72494 9.53166 1.96792 9.70993 2.26182L9.71185 2.26498L15.3585 11.6917L15.3639 11.7009C15.5386 12.0033 15.631 12.3462 15.6319 12.6954C15.6329 13.0446 15.5424 13.388 15.3695 13.6914C15.1966 13.9948 14.9472 14.2476 14.6462 14.4247C14.3452 14.6018 14.0031 14.697 13.6539 14.7009L13.6466 14.7009L2.34594 14.7009C1.99674 14.6971 1.65463 14.6018 1.35365 14.4247C1.05266 14.2476 0.803301 13.9948 0.630365 13.6914C0.45743 13.388 0.36695 13.0446 0.367928 12.6954C0.368906 12.3462 0.461307 12.0033 0.635939 11.7009L0.641354 11.6917L6.28992 2.26181C6.46819 1.96792 6.71921 1.72494 7.01874 1.5563ZM7.99993 2.63241C7.88535 2.63241 7.77271 2.66194 7.67287 2.71815C7.57348 2.77411 7.49011 2.85462 7.43074 2.95199L1.78839 12.3715C1.73161 12.4713 1.70158 12.5842 1.70126 12.6991C1.70093 12.8155 1.73109 12.93 1.78874 13.0311C1.84638 13.1322 1.9295 13.2165 2.02983 13.2756C2.12928 13.3341 2.2422 13.3658 2.35753 13.3676H13.6423C13.7577 13.3658 13.8706 13.3341 13.97 13.2756C14.0704 13.2165 14.1535 13.1322 14.2111 13.0311C14.2688 12.93 14.2989 12.8155 14.2986 12.6991C14.2983 12.5842 14.2683 12.4713 14.2115 12.3715L8.56993 2.95332C8.56966 2.95288 8.5694 2.95244 8.56913 2.95199C8.50975 2.85462 8.42639 2.77411 8.327 2.71815C8.22716 2.66194 8.11451 2.63241 7.99993 2.63241ZM7.99993 5.36757C8.36812 5.36757 8.6666 5.66604 8.6666 6.03423V8.7009C8.6666 9.06909 8.36812 9.36757 7.99993 9.36757C7.63174 9.36757 7.33327 9.06909 7.33327 8.7009V6.03423C7.33327 5.66604 7.63174 5.36757 7.99993 5.36757ZM7.33327 11.3676C7.33327 10.9994 7.63174 10.7009 7.99993 10.7009H8.0066C8.37479 10.7009 8.67327 10.9994 8.67327 11.3676C8.67327 11.7358 8.37479 12.0342 8.0066 12.0342H7.99993C7.63174 12.0342 7.33327 11.7358 7.33327 11.3676Z"
|
||||
fill="#FFA32A"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_6558_19122">
|
||||
<rect width="16" height="16" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</Icon>
|
||||
);
|
||||
}
|
||||
@@ -34,7 +34,10 @@ import SettingIcon from './icons/SettingIcon';
|
||||
import LogoutIcon from './icons/LogoutIcon';
|
||||
import GithubIcon from './icons/GithubIcon';
|
||||
import GoogleIcon from './icons/GoogleIcon';
|
||||
import DocsIcon from './icons/DocsIcon';
|
||||
import NotificationIcon from './icons/NotificationIcon';
|
||||
import WechatIcon from './icons/WechatIcon';
|
||||
import WarnTriangleIcon from './icons/WarnTriangleIcon';
|
||||
import ListIcon from './icons/ListIcon';
|
||||
import PortIcon from './icons/PortIcon';
|
||||
import WarnIcon from './icons/WarnIcon';
|
||||
@@ -84,6 +87,7 @@ export {
|
||||
FileIcon,
|
||||
FolderIcon,
|
||||
GroupAddIcon,
|
||||
WarnTriangleIcon,
|
||||
GithubIcon,
|
||||
GoogleIcon,
|
||||
InfoCircleIcon,
|
||||
@@ -104,6 +108,8 @@ export {
|
||||
VisibityIcon,
|
||||
WechatIcon,
|
||||
PortIcon,
|
||||
NotificationIcon,
|
||||
DocsIcon,
|
||||
WarnIcon,
|
||||
CloseIcon,
|
||||
SortPolygonUpIcon,
|
||||
|
||||
Generated
+17
@@ -105,6 +105,9 @@ importers:
|
||||
dayjs:
|
||||
specifier: ^1.11.10
|
||||
version: 1.11.10
|
||||
decimal.js:
|
||||
specifier: ^10.4.3
|
||||
version: 10.4.3
|
||||
eslint:
|
||||
specifier: 8.38.0
|
||||
version: 8.38.0
|
||||
@@ -168,6 +171,9 @@ importers:
|
||||
react:
|
||||
specifier: 18.2.0
|
||||
version: 18.2.0
|
||||
react-contexify:
|
||||
specifier: ^6.0.0
|
||||
version: 6.0.0(react-dom@18.2.0)(react@18.2.0)
|
||||
react-dom:
|
||||
specifier: 18.2.0
|
||||
version: 18.2.0(react@18.2.0)
|
||||
@@ -19218,6 +19224,17 @@ packages:
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/react-contexify@6.0.0(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-jMhz6yZI81Jv3UDj7TXqCkhdkCFEEmvwGCPXsQuA2ZUC8EbCuVQ6Cy8FzKMXa0y454XTDClBN2YFvvmoFlrFkg==}
|
||||
peerDependencies:
|
||||
react: '>=16'
|
||||
react-dom: '>=16'
|
||||
dependencies:
|
||||
clsx: 1.2.1
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/react-day-picker@8.9.1(date-fns@2.30.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-W0SPApKIsYq+XCtfGeMYDoU0KbsG3wfkYtlw8l+vZp6KoBXGOlhzBUp4tNx1XiwiOZwhfdGOlj7NGSCKGSlg5Q==}
|
||||
peerDependencies:
|
||||
|
||||
Reference in New Issue
Block a user