chore: bump to 0.7.1

Author: Martlet-Tech

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "zcom",
   "private": true,
-  "version": "0.7.0",
+  "version": "0.7.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

package.json

@@ -1,6 +1,6 @@
 [package]
 name = "zcom"
-version = "0.7.0"
+version = "0.7.1"
 description = "High performance serial debug assistant"
 authors = ["zt"]
 edition = "2021"

src-tauri/Cargo.toml

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "ZCOM",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "identifier": "com.zcom.app",
   "build": {
     "frontendDist": "../dist",

src-tauri/tauri.conf.json

@@ -207,7 +207,6 @@ select:focus, input:focus, textarea:focus {
   margin-left: auto;
 }
 .menu-right .small-btn,
-.menu-right .baud-select,
 .menu-right .cs-trigger {
   height: 28px;
   box-sizing: border-box;
@@ -254,16 +253,16 @@ select:focus, input:focus, textarea:focus {
   flex-shrink: 0;
   transition: transform 0.15s;
 }
-.cs-arrow-icon svg,
-.cs-arrow svg {
+.cs-arrow-icon {
   display: block;
-  width: 10px;
-  height: 10px;
+  width: 8px;
+  height: 8px;
+  transition: transform 0.15s;
 }
 .custom-select.open .cs-arrow {
   transform: rotate(180deg);
 }
-.custom-select.open .cs-arrow-icon svg {
+.custom-select.open .cs-arrow-icon {
   transform: rotate(180deg);
 }
 .cs-dropdown {
@@ -306,12 +305,9 @@ select:focus, input:focus, textarea:focus {
 .cs-option.placeholder:hover {
   background: transparent;
 }
-.baud-select {
-  width: 72px;
-  padding: 3px 6px;
-  font-size: 13px;
-  height: 28px;
-  box-sizing: border-box;
+.baud-select.custom-select {
+  width: auto;
+  flex-shrink: 0;
 }
 .small-btn {
   padding: 3px 10px;

src/css/style.css

@@ -49,23 +49,13 @@
         <div class="cs-dropdown" id="com-select-dropdown"></div>
       </div>
       <button id="btn-serial-settings" class="small-btn" title="串口详细设置"><i data-lucide="settings"></i></button>
-      <select id="baud-select" class="baud-select">
-        <option value="300">300</option>
-        <option value="1200">1200</option>
-        <option value="2400">2400</option>
-        <option value="4800">4800</option>
-        <option value="9600">9600</option>
-        <option value="14400">14400</option>
-        <option value="19200">19200</option>
-        <option value="28800">28800</option>
-        <option value="38400">38400</option>
-        <option value="56000">56000</option>
-        <option value="57600">57600</option>
-        <option value="115200" selected>115200</option>
-        <option value="230400">230400</option>
-        <option value="460800">460800</option>
-        <option value="921600">921600</option>
-      </select>
+      <div id="baud-select" class="custom-select baud-select" tabindex="0">
+        <div class="cs-trigger">
+          <span class="cs-text" id="baud-select-text">115200</span>
+          <i data-lucide="chevron-down" class="cs-arrow-icon"></i>
+        </div>
+        <div class="cs-dropdown" id="baud-select-dropdown"></div>
+      </div>
       <button id="btn-refresh-ports" class="small-btn" title="刷新串口"><i data-lucide="refresh-cw"></i></button>
       <button id="btn-toggle-port" class="small-btn" disabled>打开</button>
       <span id="port-status" class="port-status" title="未连接"></span>

src/index.html

@@ -91,10 +91,17 @@ export function initMenu() {
 
   refresh();
 
+  function updateBaudSelection(rate) {
+    baudText.textContent = String(rate);
+    baudDropdown.querySelectorAll('.cs-option').forEach(o => {
+      o.classList.toggle('selected', parseInt(o.dataset.value) === rate);
+    });
+  }
+
   (async () => {
     const saved = await getSettings();
     baudRate = saved.baudRate || 115200;
-    baudSelect.value = String(baudRate);
+    updateBaudSelection(baudRate);
     charSize = saved.charSize || 8;
     stopBits = saved.stopBits || 1;
     parity = saved.parity || 'none';
@@ -136,12 +143,32 @@ export function initMenu() {
     if (!comEl.contains(e.target)) {
       closeComDropdown();
     }
+    if (!baudSelect.contains(e.target)) {
+      closeBaudDropdown();
+    }
   });
 
-  refreshBtn.addEventListener('click', refresh);
+  const BAUD_RATES = [300, 1200, 2400, 4800, 9600, 14400, 19200, 28800, 38400, 56000, 57600, 115200, 230400, 460800, 921600];
 
-  baudSelect.addEventListener('change', async () => {
-    baudRate = parseInt(baudSelect.value);
+  const baudText = document.getElementById('baud-select-text');
+  const baudDropdown = document.getElementById('baud-select-dropdown');
+
+  function closeBaudDropdown() {
+    baudSelect.classList.remove('open');
+  }
+
+  function toggleBaudDropdown() {
+    baudSelect.classList.toggle('open');
+  }
+
+  async function selectBaudOption(el) {
+    if (!el) return;
+    baudDropdown.querySelectorAll('.cs-option.selected').forEach(e => e.classList.remove('selected'));
+    el.classList.add('selected');
+    const val = parseInt(el.dataset.value);
+    baudRate = val;
+    baudText.textContent = String(val);
+    closeBaudDropdown();
     await patchSettings({ baudRate });
 
     if (portOpen) {
@@ -164,8 +191,50 @@ export function initMenu() {
         document.dispatchEvent(new CustomEvent('port-state-change', { detail: { open: false } }));
       }
     }
+  }
+
+  BAUD_RATES.forEach(rate => {
+    const opt = document.createElement('div');
+    opt.className = 'cs-option';
+    opt.textContent = String(rate);
+    opt.dataset.value = String(rate);
+    if (rate === baudRate) opt.classList.add('selected');
+    opt.addEventListener('click', () => selectBaudOption(opt));
+    baudDropdown.appendChild(opt);
+  });
+
+  baudSelect.addEventListener('click', (e) => {
+    if (e.target.closest('.cs-dropdown')) return;
+    toggleBaudDropdown();
+  });
+
+  baudSelect.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      toggleBaudDropdown();
+    } else if (e.key === 'Escape') {
+      closeBaudDropdown();
+    } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (!baudSelect.classList.contains('open')) {
+        baudSelect.classList.add('open');
+      }
+      const items = [...baudDropdown.querySelectorAll('.cs-option')];
+      if (!items.length) return;
+      const sel = baudDropdown.querySelector('.cs-option.selected');
+      const idx = items.indexOf(sel);
+      const next = e.key === 'ArrowDown'
+        ? Math.min(idx + 1, items.length - 1)
+        : Math.max(idx - 1, 0);
+      items.forEach(o => o.classList.remove('selected'));
+      items[next].classList.add('selected');
+      baudText.textContent = items[next].textContent;
+      baudRate = parseInt(items[next].dataset.value);
+    }
   });
 
+  refreshBtn.addEventListener('click', refresh);
+
   toggleBtn.addEventListener('click', async () => {
     if (portOpen) {
       try {