feat: 添加DeviceName显示

- 根据usb-device.json映射vendorId与productId
- 为页面添加toast

src/lib/components/SettingPanel/components/SerialSetting.svelte

@@ -5,10 +5,12 @@
     dataBitsValue,
     parityValue,
     stopBitsValue,
-  } from '$lib/stores/serial.ui';
-  import { serialOptions } from '$lib/stores/serial.options';
+  } from '$lib/stores/serial/serial.ui';
+  import { serialOptions } from '$lib/stores/serial/serial.options';
   import SerialParamSelect from './SerialParamSelect.svelte';
 
+  import { toast } from 'svelte-sonner';
+
   import { Button } from '$lib/components/ui/button';
 
   import { getSerialContext } from '$lib/serial/serial.store';
@@ -16,6 +18,8 @@
   const serial = getSerialContext();
   const serialState = serial.state;
 
+  $inspect($serialState);
+
   const dataBitsItems = [
     { value: '7', label: '7' },
     { value: '8', label: '8' },
@@ -35,12 +39,19 @@
   async function connect() {
     await serial.requestPort();
     await serial.openPort($serialOptions);
+    if ($serialState.error) {
+      toast.error(`连接串口失败: ${$serialState.error}`);
+    } else {
+      toast.success('串口连接成功');
+    }
   }
 </script>
 
 <div class="flex flex-col p-4">
   <div class="flex flex-col gap-y-1.5 pb-4">
-    <h3 class="leading-none font-semibold tracking-tight">串口设置</h3>
+    <h3 class="leading-none font-semibold tracking-tight">
+      {$serialState.portName ?? '串口设置'}
+    </h3>
     <p class="text-neutral/50">请选择串口连接相关参数</p>
   </div>
 

src/lib/serial/serial.providers.svelte

@@ -3,6 +3,7 @@
   import { get } from 'svelte/store';
   import { serialState, setSerialContext } from './serial.store';
   import * as service from './serial.service';
+  import { getDeviceName } from '$lib/utils/device';
 
   interface Props {
     children?: Snippet;
@@ -23,7 +24,8 @@
 
       const info = port.getInfo?.();
       const name = info
-        ? `USB ${info.usbVendorId ?? ''}:${info.usbProductId ?? ''}`
+        ? (getDeviceName(info) ??
+          `USB ${info.usbVendorId ?? ''}:${info.usbProductId ?? ''}`)
         : 'Serial Device';
       serialState.update((s) => ({
         ...s,

src/lib/utils/device.ts

@@ -0,0 +1,32 @@
+import USBJson from '$lib/assets/usb-device.json';
+
+type UsbIds = {
+  [vendorId: string]: {
+    name: string;
+    devices: {
+      [productId: string]: {
+        devname: string;
+      };
+    };
+  };
+};
+
+void (USBJson satisfies UsbIds);
+
+const USB_IDS: UsbIds = USBJson;
+
+export function getDeviceName(info: SerialPortInfo): string | undefined {
+  if (!info) {
+    return undefined;
+  }
+  const { usbProductId, usbVendorId } = info;
+  if (!usbVendorId || !usbProductId) {
+    return undefined;
+  }
+  const vendor = USB_IDS[usbVendorId.toString(16).padStart(4, '0')];
+  if (!vendor) {
+    return undefined;
+  }
+  const product = vendor.devices[usbProductId.toString(16).padStart(4, '0')];
+  return product ? product.devname : undefined;
+}

src/routes/+page.svelte

@@ -1,6 +1,20 @@
+<script lang="ts">
+  import DeviceSetting from '$lib/components/SettingPanel/DeviceSetting.svelte';
+  import { Toaster } from 'svelte-sonner';
+</script>
+
 <h1>Welcome to SvelteKit</h1>
 <p>
   Visit <a class="text-orange-400" href="https://svelte.dev/docs/kit"
     >svelte.dev/docs/kit</a
   > to read the documentation
 </p>
+<div class="flex">
+  <div class="flex w-60">
+    <DeviceSetting />
+  </div>
+
+  <div class="flex">123</div>
+</div>
+
+<Toaster />