feat: enhance channel configuration UI and validation

- Updated ChannelInstructionsPanel to include a button for viewing documentation, improving user guidance.
- Enhanced ChannelTokenField to support showing/hiding secret values with appropriate labels and icons.
- Refined ChannelTypeSelector to display connection type icons and improved layout for better user experience.
- Added new messages for documentation links, validation feedback, and secret management in i18n.
- Extended ChannelMeta to include optional documentation URLs for better context on configuration fields.
- Implemented credential validation logic in ChannelsPage to ensure user inputs are validated before saving.
- Introduced ChannelLogo component to display channel icons in the UI.
- Added tests for channel credential validation to ensure proper error handling and feedback.
This commit is contained in:
duanshuwen
2026-04-19 16:43:07 +08:00
parent d2e48b21d8
commit 18f12d6ce3
22 changed files with 1131 additions and 301 deletions

View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1773137539538" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9954" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M511.68 0.64a511.552 511.552 0 1 0 0 1023.104 511.552 511.552 0 0 0 0-1023.104z m237.056 443.52a113.92 113.92 0 0 1-7.36 18.944h0.064l-0.384 0.704c-21.504 45.952-77.568 136.064-77.568 136.064s0-0.192-0.256-0.576l-16.384 28.544h78.912l-150.72 200.448 34.176-136.32h-62.08l21.568-90.24a880.64 880.64 0 0 0-62.528 17.856s-33.088 19.392-95.296-37.248c0 0-41.92-36.928-17.6-46.208 10.368-3.904 50.176-8.896 81.6-13.12 42.368-5.76 68.48-8.768 68.48-8.768s-130.752 1.92-161.728-2.944c-31.04-4.864-70.4-56.64-78.72-102.08 0 0-12.992-24.96 27.84-13.184 40.832 11.84 209.856 46.08 209.856 46.08s-219.776-67.392-234.432-83.84c-14.592-16.448-43.008-89.728-39.36-134.784 0 0 1.6-11.2 13.12-8.192 0 0 162.496 74.24 273.6 114.88 111.104 40.64 207.68 61.312 195.2 113.92z" fill="#2c2c2c" p-id="9955"></path></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -0,0 +1,3 @@
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1773137473652" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8906" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M48.761905 435.809524v9.508571l0.731428 248.198095-0.365714 49.371429 0.365714 21.162667 0.365715 7.411809 0.731428 4.924953v0.707047c0 0.341333 0 0.707048 0.341334 1.048381 1.462857 5.997714 5.095619 10.947048 10.532571 15.872 4.705524 4.242286 10.50819 7.753143 19.577905 12.678095 43.154286 22.918095 84.528762 39.862857 126.976 51.492572 43.544381 11.995429 88.892952 18.334476 137.508571 19.382857 50.41981 1.072762 97.206857-3.876571 142.921143-15.506286 43.885714-10.922667 87.430095-27.501714 133.485714-50.761143 34.133333-17.286095 71.484952-44.422095 105.569524-76.507428l11.971048-11.654095 11.629714-11.971048 4.705524-5.290667-2.535619 1.414096-9.801143 4.924952-3.632762 1.779809c-38.448762 17.261714-78.360381 22.186667-122.977524 16.920381l-13.409524-1.779809-13.409523-2.438095-3.291429-0.731429-3.267048-0.707048-14.140952-3.169523-3.632762-1.048381-3.974095-1.072762-16.335238-4.583619-2.925715-0.707048c-1.77981-0.682667-3.974095-1.048381-5.778285-1.755428l-29.744762-9.167239-14.506667-4.583619-42.447238-14.799238-21.040762-7.753143-19.236571-6.339047-9.435429-3.900953-10.142476-4.583619-1.097143-0.341333c-1.097143-0.365714-1.80419-1.072762-2.925714-1.755428l-13.775238-6.704762-35.913143-16.579048-22.479238-10.922667-7.972572-4.242285c-40.277333-20.431238-79.823238-45.104762-119.369142-72.972191a1362.651429 1362.651429 0 0 1-113.542096-90.940952l-18.870857-17.310476L48.761905 435.833905z" p-id="8907" fill="#2c2c2c"></path><path d="M851.456 390.095238l-14.750476 0.390095-5.680762 0.390096a320.853333 320.853333 0 0 0-66.243048 10.800761c-19.69981 5.412571-39.009524 12.726857-57.539047 22.381715-18.944 9.654857-36.717714 20.845714-53.394286 33.962666l-9.45981 7.338667-2.267428 1.950476-2.267429 1.901715-9.069714 8.118857-9.48419 8.874666-10.581334 10.044953-49.980952 49.395809-3.413334 3.096381c-24.210286 23.161905-42.008381 38.595048-62.829714 53.248l-8.313905 5.802667-21.577142 14.287238-3.023239 1.926095c-4.169143 2.681905-7.94819 5.022476-11.751619 7.314286l-10.971428 6.192762 15.896381 6.558476 46.567619 17.749333 28.769524 10.435048 32.548571 10.800762 18.529524 5.778286 16.286476 4.632381 3.803429 1.170285c3.779048 1.145905 7.558095 1.926095 10.971428 2.681905l13.994667 3.096381 3.413333 0.78019 3.413334 0.780191 13.238857 2.31619 3.413333 0.365715 3.413333 0.390095c43.885714 5.412571 82.895238 0 120.368762-18.529524 48.079238-23.527619 70.777905-47.85981 102.204953-106.910476l10.215619-19.675429 16.286476-32.426666 7.192381-13.897143 2.267428-4.242286c21.942857-42.471619 38.595048-68.315429 61.318096-92.257524l2.267428-2.31619-5.290666-1.926095-6.436572-2.316191-13.653333-4.632381-11.702857-3.462095-5.315048-1.560381a319.195429 319.195429 0 0 0-66.243048-9.654857l-15.11619-1.145905zM219.428571 170.666667l12.434286 9.947428 17.871238 14.360381 7.314286 5.973334a1493.162667 1493.162667 0 0 1 59.14819 51.785142 1033.581714 1033.581714 0 0 1 77.04381 81.261715 1258.032762 1258.032762 0 0 1 60.269714 75.312762 1085.68381 1085.68381 0 0 1 40.911238 58.953142l15.335619 24.697905L534.601143 536.380952l15.701333-15.945142 23.722667-24.697905 13.507047-13.945905 17.89562-17.92 4.022857-3.974095c11.312762-11.166476 23.381333-21.528381 35.425523-31.47581 9.849905-7.972571 21.552762-15.945143 34.694096-23.503238 9.142857-5.193143 18.261333-9.97181 27.745524-14.336l15.701333-6.777905 8.411428-3.169523-0.365714-1.219048-0.365714-1.999238a224.792381 224.792381 0 0 0-9.849905-31.451429l-6.217143-16.749714-1.462857-3.584c-9.849905-24.697905-21.552762-50.200381-30.305524-66.121143l-17.895619-29.891047-9.874285-15.530667-1.804191-2.389333c-13.165714-19.919238-23.747048-32.280381-32.52419-36.644572-5.851429-3.193905-11.312762-3.998476-20.431239-4.388571H219.428571z" p-id="8908" fill="#2c2c2c"></path></svg>

After

Width:  |  Height:  |  Size: 4.0 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.9 KiB

View File

@@ -0,0 +1,3 @@
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
</svg>

After

Width:  |  Height:  |  Size: 732 B

View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1774167686596" class="icon" viewBox="0 0 1309 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2533" xmlns:xlink="http://www.w3.org/1999/xlink" width="255.6640625" height="200"><path d="M1147.26896 912.681417l34.90165 111.318583-127.165111-66.823891a604.787313 604.787313 0 0 1-139.082747 22.263717c-220.607239 0-394.296969-144.615936-394.296969-322.758409s173.526026-322.889372 394.296969-322.889372C1124.219465 333.661082 1309.630388 478.669907 1309.630388 656.550454c0 100.284947-69.344929 189.143369-162.361428 256.130963zM788.070086 511.869037a49.11114 49.11114 0 0 0-46.360916 44.494692 48.783732 48.783732 0 0 0 46.360916 44.494693 52.090549 52.090549 0 0 0 57.983885-44.494693 52.385216 52.385216 0 0 0-57.983885-44.494692z m254.985036 0a48.881954 48.881954 0 0 0-46.09899 44.494692 48.620028 48.620028 0 0 0 46.09899 44.494693 52.385216 52.385216 0 0 0 57.983886-44.494693 52.58166 52.58166 0 0 0-57.951145-44.494692z m-550.568615 150.018161a318.567592 318.567592 0 0 0 14.307712 93.212943c-14.307712 1.080445-28.746387 1.768001-43.283284 1.768001a827.293516 827.293516 0 0 1-162.394168-22.296458l-162.001279 77.955749 46.328175-133.811485C69.410411 600.858422 0 500.507993 0 378.38496 0 166.683208 208.689602 0 463.510935 0c227.908428 0 427.594322 133.18941 467.701752 312.379588a427.463358 427.463358 0 0 0-44.625655-2.619261c-220.24709 0-394.100524 157.74498-394.100525 352.126871zM312.90344 189.143369a64.270111 64.270111 0 0 0-69.803299 55.659291 64.532037 64.532037 0 0 0 69.803299 55.659292 53.694846 53.694846 0 0 0 57.852923-55.659292 53.465661 53.465661 0 0 0-57.852923-55.659291z m324.428188 0a64.040926 64.040926 0 0 0-69.574114 55.659291 64.302852 64.302852 0 0 0 69.574114 55.659292 53.694846 53.694846 0 0 0 57.951145-55.659292 53.465661 53.465661 0 0 0-57.951145-55.659291z" p-id="2534" fill="#515151"></path></svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1773137309921" class="icon" viewBox="0 0 1254 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4960" xmlns:xlink="http://www.w3.org/1999/xlink" width="244.921875" height="200"><path d="M1035.517652 464.288862a83.284664 83.284664 0 0 0-84.836564-12.152221c-2.377848-21.728608-3.302788-42.534275-7.166541-62.74398a341.096145 341.096145 0 0 0-152.270244-222.047773 494.092342 494.092342 0 0 0-576.881038 25.791347 313.125937 313.125937 0 0 0 6.208602 501.720854 61.819039 61.819039 0 0 1 25.923339 80.113867 560.007119 560.007119 0 0 0-16.280956 61.65405q3.004807 2.212858 6.043612 4.35972a317.385664 317.385664 0 0 0 36.919635-20.870663 180.174456 180.174456 0 0 1 167.592262-30.943017 419.823101 419.823101 0 0 0 224.392623-12.879175 206.626761 206.626761 0 0 0 15.026037 40.453408 229.511295 229.511295 0 0 0 30.513045 32.494918 554.591466 554.591466 0 0 1-162.110613 30.645037 623.213069 623.213069 0 0 1-176.739676-17.038909 47.123981 47.123981 0 0 0-29.226128 3.532774c-44.779131 20.936659-89.162287 42.930249-133.181467 65.154826a39.627461 39.627461 0 0 1-60.928096-44.581144 1435.624016 1435.624016 0 0 0 14.332082-107.986081 34.541787 34.541787 0 0 0-11.162285-23.512494 468.53298 468.53298 0 0 1-133.28146-200.682142c-46.464023-157.684897-3.566771-293.906169 113.830706-406.513953 213.230338-204.743882 587.812338-195.827453 792.55622 16.840921a386.932208 386.932208 0 0 1 114.325674 280.268042c0 4.325723 0 8.717441-0.494968 13.209154a24.50343 24.50343 0 0 1-3.103801 5.712634z m-57.328327 19.384758a69.745531 69.745531 0 0 1 69.348557 53.794553 240.738575 240.738575 0 0 0 68.325622 129.38471 47.387964 47.387964 0 0 1 2.739825 24.305443 49.798809 49.798809 0 0 1-24.998399-2.146863 252.758805 252.758805 0 0 0-134.107407-67.73066 67.795656 67.795656 0 0 1-52.010668-74.070254 72.651345 72.651345 0 0 1 70.70247-63.536929z m275.974318 270.228686a67.433679 67.433679 0 0 1-56.536378 68.555607 233.705026 233.705026 0 0 0-128.095792 65.08883c-8.189475 8.057484-18.162836 14.134094-25.791348 2.609833a24.701417 24.701417 0 0 1 3.301789-23.744479 244.371343 244.371343 0 0 0 66.707726-125.48796 71.032449 71.032449 0 0 1 140.414003 12.978169z m-205.106858 200.120178a70.07551 70.07551 0 0 1-61.720046 69.183567 68.258627 68.258627 0 0 1-76.31711-49.831807A247.674131 247.674131 0 0 0 840.846125 839.795802a41.113366 41.113366 0 0 1-2.773822-21.002654 46.001053 46.001053 0 0 1 23.115519 0.362977 271.219622 271.219622 0 0 0 138.334136 69.942518 64.427872 64.427872 0 0 1 49.435833 64.923841z m-344.794909-201.837068a66.706726 66.706726 0 0 1 53.563568-64.230885 246.088233 246.088233 0 0 0 132.35652-66.507739 47.816936 47.816936 0 0 1 22.951529-3.302788 43.921186 43.921186 0 0 1-3.302788 22.356568 250.249966 250.249966 0 0 0-68.291624 129.648693 66.937711 66.937711 0 0 1-76.547096 51.714686 69.513546 69.513546 0 0 1-60.829102-69.678535z" p-id="4961" fill="#2c2c2c"></path></svg>

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1773137626598" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10958" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M872.992 148.8C777.184 52.8 649.792 0 513.984 0 234.368 0 6.784 227.584 6.784 507.392c0 89.408 23.392 176.8 67.808 253.6L2.592 1024l268.992-70.592a507.456 507.456 0 0 0 242.4 61.792h0.192c279.616 0 507.392-227.616 507.392-507.392 0-135.616-52.8-263.008-148.608-359.008z m-358.784 780.8a421.44 421.44 0 0 1-214.816-58.784l-15.392-9.216-159.584 41.792 42.592-155.616-10.016-16a418.752 418.752 0 0 1-64.608-224.384c0-232.608 189.184-421.792 422.016-421.792 112.608 0 218.592 44 298.208 123.584a419.456 419.456 0 0 1 123.392 298.4c-0.192 232.8-189.408 422.016-421.792 422.016z m231.2-316c-12.608-6.4-75.008-36.992-86.592-41.216s-20-6.4-28.608 6.4c-8.384 12.608-32.8 41.216-40.192 49.792-7.392 8.384-14.784 9.6-27.392 3.2s-53.6-19.808-102.016-63.008c-37.6-33.6-63.2-75.2-70.592-87.808s-0.8-19.616 5.6-25.792c5.792-5.6 12.608-14.816 19.008-22.208s8.384-12.608 12.608-21.184c4.192-8.384 2.208-15.808-0.992-22.208s-28.608-68.8-39.008-94.208c-10.208-24.8-20.8-21.408-28.608-21.792-7.392-0.384-15.808-0.384-24.192-0.384s-22.208 3.2-33.792 15.808c-11.616 12.608-44.384 43.392-44.384 105.792s45.408 122.592 51.808 131.2c6.4 8.384 89.408 136.608 216.608 191.392 30.208 12.992 53.792 20.8 72.192 26.784 30.4 9.6 58.016 8.192 79.808 4.992 24.384-3.616 75.008-30.592 85.6-60.192s10.592-55.008 7.392-60.192c-3.008-5.6-11.392-8.8-24.192-15.2z" p-id="10959" fill="#2c2c2c"></path></svg>

After

Width:  |  Height:  |  Size: 1.7 KiB