refactor(mqtt): use Select for protocol version and refine mqtt icon

This commit is contained in:
如梦技术 2026-08-07 00:13:34 +08:00 committed by GitHub
parent 1648c0b602
commit cda6fd2600
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 13 additions and 9 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 11 KiB

View File

@ -1,5 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128">
<path d="M7.67 0.06C45.49 0.06 83.31 0.06 121.13 0.06C121.21 0.65 121.28 1.24 121.36 1.83C123.56 2.62 125.38 4.57 126.5 6.59C126.98 6.61 127.46 6.63 127.94 6.64C127.94 45.1 127.94 83.55 127.94 122C127.57 122 127.2 122 126.83 122C125.22 123.61 123.61 125.22 122 126.83C122 127.2 122 127.57 122 127.94C83.55 127.94 45.1 127.94 6.64 127.94C6.63 127.46 6.61 126.98 6.59 126.5C4.57 125.38 2.62 123.56 1.83 121.36C1.24 121.28 0.65 121.21 0.06 121.13C0.06 83.31 0.06 45.49 0.06 7.67C1.16 7.37 7.37 1.16 7.67 0.06ZM118.5 38.86C119.69 37.17 119.01 34.16 119.01 32.17C119.03 27.6 120.61 12.95 116.73 10.44C113.28 8.21 106.45 9.56 102.5 9.56C99.97 9.56 90.27 8.72 89 10.5C89.59 13.46 93.44 14.75 95.58 16.6C101.24 21.51 106.68 26.56 111.61 32.23C113.5 34.42 115.3 38.62 118.5 38.86ZM12.88 9.77C9.16 10.61 6.76 17.86 10.52 20C12.98 21.4 17.36 20.79 20.17 21.06C25.86 21.6 31.3 22.93 36.83 24.33C52.33 28.24 67.23 37.86 78.64 48.86C91.78 61.53 100.31 77.22 105.68 94.5C107.2 99.41 108.08 105.06 108.64 110.17C108.91 112.61 108.38 115.84 109.42 118.09C110.53 120.49 115.28 119.91 116.92 118.42C120.43 115.22 119.03 108.8 119.03 104.5C119.03 97.35 120.23 82.19 118.84 75.98C118.17 72.99 116.45 70.36 115.19 67.64C106.3 48.39 90.25 31.92 72.45 20.72C65.69 16.46 58.12 11.75 50.25 9.87C43.71 8.3 35.56 9.56 28.83 9.56C23.79 9.56 17.81 8.67 12.88 9.77ZM11.87 37.15C10.91 37.22 9.79 37.55 9.27 38.44C8.35 40.05 8.71 53.63 10.16 54.67C12.05 56.04 15.62 55.62 17.85 55.88C22.4 56.4 26.73 57.72 31.07 59.13C42.46 62.79 53.62 71.59 60.69 81.14C65.41 87.51 69.66 95.11 71.59 102.85C72.34 105.85 73.31 116.89 74.59 118.58C75.71 120.04 90.94 119.93 92.08 118.59C93.64 116.75 92.43 112.32 92.08 110.16C90.8 102.39 89.02 95.14 85.92 87.9C75.52 63.56 53.88 45.48 28.13 39.43C22.89 38.19 17.32 36.76 11.87 37.15ZM10.92 72.14C8.42 72.75 8.98 75.53 8.98 77.5C8.97 83.06 8.97 88.61 8.97 94.17C8.97 99.01 7.49 114.27 10.25 117.58C12.62 120.43 16.86 119.51 20.17 119.52C28.83 119.57 37.5 119.53 46.17 119.53C48.68 119.53 54.93 120.73 56.75 118.6C59 115.97 54.81 104.62 53.63 101.52C48.6 88.35 36.17 77.91 22.81 74.06C19.24 73.03 14.69 71.22 10.92 72.14Z" fill="#fefefe" fill-rule="evenodd" stroke="#fefefe" stroke-width="0.25" stroke-linejoin="round"/>
<path d="M118.5 38.86C115.3 38.62 113.5 34.42 111.61 32.23C106.68 26.56 101.24 21.51 95.58 16.6C93.44 14.75 89.59 13.46 89 10.5C90.27 8.72 99.97 9.56 102.5 9.56C106.45 9.56 113.28 8.21 116.73 10.44C120.61 12.95 119.03 27.6 119.01 32.17C119.01 34.16 119.69 37.17 118.5 38.86ZM12.88 9.77C17.81 8.67 23.79 9.56 28.83 9.56C35.56 9.56 43.71 8.3 50.25 9.87C58.12 11.75 65.69 16.46 72.45 20.72C90.25 31.92 106.3 48.39 115.19 67.64C116.45 70.36 118.17 72.99 118.84 75.98C120.23 82.19 119.03 97.35 119.03 104.5C119.03 108.8 120.43 115.22 116.92 118.42C115.28 119.91 110.53 120.49 109.42 118.09C108.38 115.84 108.91 112.61 108.64 110.17C108.08 105.06 107.2 99.41 105.68 94.5C100.31 77.22 91.78 61.53 78.64 48.86C67.23 37.86 52.33 28.24 36.83 24.33C31.3 22.93 25.86 21.6 20.17 21.06C17.36 20.79 12.98 21.4 10.52 20C6.76 17.86 9.16 10.61 12.88 9.77ZM11.87 37.15C17.32 36.76 22.89 38.19 28.13 39.43C53.88 45.48 75.52 63.56 85.92 87.9C89.02 95.14 90.8 102.39 92.08 110.16C92.43 112.32 93.64 116.75 92.08 118.59C90.94 119.93 75.71 120.04 74.59 118.58C73.31 116.89 72.34 105.85 71.59 102.85C69.66 95.11 65.41 87.51 60.69 81.14C53.62 71.59 42.46 62.79 31.07 59.13C26.73 57.72 22.4 56.4 17.85 55.88C15.62 55.62 12.05 56.04 10.16 54.67C8.71 53.63 8.35 40.05 9.27 38.44C9.79 37.55 10.91 37.22 11.87 37.15ZM10.92 72.14C14.69 71.22 19.24 73.03 22.81 74.06C36.17 77.91 48.6 88.35 53.63 101.52C54.81 104.62 59 115.97 56.75 118.6C54.93 120.73 48.68 119.53 46.17 119.53C37.5 119.53 28.83 119.57 20.17 119.52C16.86 119.51 12.62 120.43 10.25 117.58C7.49 114.27 8.97 99.01 8.97 94.17C8.97 88.61 8.97 83.06 8.98 77.5C8.98 75.53 8.42 72.75 10.92 72.14Z" fill="#670266" fill-rule="evenodd" stroke="#670266" stroke-width="0.25" stroke-linejoin="round"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 644 644" width="128" height="128">
<path d="M232.05888 549.60128h-1.65888v215.40864c0 15.54432 12.75904 28.30336 28.32384 28.30336h221.77792c-1.92512-134.59456-112.4352-243.712-248.44288-243.712z m0-177.64352h-1.65888v91.60704c182.90688 0.8192 331.65312 147.968 333.66016 329.74848h94.9248c-1.72032-232.59136-192.4096-421.29408-427.008-421.29408l0.08192-0.06144zM793.6 765.25568v-194.51904A606.65856 606.65856 0 0 0 438.31296 230.4h-179.6096c-15.60576 0.06144-28.24192 12.6976-28.30336 28.32384v27.46368c281.47712 0.83968 510.44352 227.6352 512.1024 507.41248h22.77376a28.44672 28.44672 0 0 0 28.32384-28.32384v-0.02048z m-74.09664-456.25344c26.07104 26.05056 52.69504 59.12576 74.09664 88.22784V258.4576a27.97568 27.97568 0 0 0-28.03712-28.0576h-142.92992c33.30048 23.06048 67.70688 49.39776 96.8704 78.56128v0.04096z" fill="#9828AC"/>
</svg>

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 938 B

View File

@ -6224,11 +6224,16 @@ function openExternalUrl(url: string) {
</div>
<div class="grid grid-cols-4 items-center gap-4">
<Label :class="connectionLabelClass">{{ t("connection.mqttProtocolVersion") }}</Label>
<select v-model="mqttProtocolVersion" class="col-span-3 flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
<option value="v5">MQTT 5.0</option>
<option value="v4">MQTT 3.1.1</option>
<option value="v3">MQTT 3.1</option>
</select>
<Select v-model="mqttProtocolVersion">
<SelectTrigger class="col-span-3 h-9">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="v5">MQTT 5.0</SelectItem>
<SelectItem value="v4">MQTT 3.1.1</SelectItem>
<SelectItem value="v3">MQTT 3.1</SelectItem>
</SelectContent>
</Select>
</div>
<div class="grid grid-cols-4 items-center gap-4">
<Label :class="connectionLabelClass">{{ t("connection.mqttTransport") }}</Label>