init commit

src/render/components/SerialPort/ManagementView/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <!-- TODO: 使用form grid替换 -->
+  <n-descriptions :column="1">
+    <n-descriptions-item>
+      <n-button :disabled="serialPort.isOpen" type="primary" @click="onSelectBtnClick">选择串口</n-button>
+    </n-descriptions-item>
+    <n-descriptions-item label="波特率">
+      <n-select :disabled="serialPort.instance === null || serialPort.isOpen" v-model:value="serialPortOptions.baudRate" :options="BAUDRATE_OPTIONS" />
+    </n-descriptions-item>
+    <n-descriptions-item label="数据位">
+      <n-select :disabled="serialPort.instance === null || serialPort.isOpen" v-model:value="serialPortOptions.dataBits" :options="DATA_BITS_OPTIONS" />
+    </n-descriptions-item>
+    <n-descriptions-item label="停止位">
+      <n-select :disabled="serialPort.instance === null || serialPort.isOpen" v-model:value="serialPortOptions.stopBits" :options="STOPBITS_OPTIONS" />
+    </n-descriptions-item>
+    <n-descriptions-item label="奇偶校验">
+      <n-select :disabled="serialPort.instance === null || serialPort.isOpen" v-model:value="serialPortOptions.parity"   :options="PARITY_OPTIONS" />
+    </n-descriptions-item>
+    <n-descriptions-item>
+      <n-button :disabled="serialPort.instance === null" type="primary" @click="onTriggerBtnClick">{{ serialPort.isOpen ? '关闭串口' : '打开串口' }}</n-button>
+    </n-descriptions-item>
+  </n-descriptions>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NDescriptions, NDescriptionsItem, NSelect, NButton, useMessage } from 'naive-ui'
+import { BAUDRATE_OPTIONS, DATA_BITS_OPTIONS, STOPBITS_OPTIONS, PARITY_OPTIONS } from './data'
+
+import { useSerialPortStore } from '@/stores/serialPort'
+
+const message = useMessage()
+
+const serialPort = useSerialPortStore()
+
+const serialPortOptions = ref({
+  baudRate: BAUDRATE_OPTIONS[BAUDRATE_OPTIONS.length - 1].value,
+  dataBits: DATA_BITS_OPTIONS[0].value,
+  stopBits: STOPBITS_OPTIONS[0].value,
+  parity  : PARITY_OPTIONS[0].value,
+})
+
+let closedPromise
+const openSerialPort  = () => {
+  closedPromise = serialPort.open(serialPortOptions.value).catch((error) => {
+    console.error(error)
+    message.error('打开串口失败,' + error.message)
+  })
+}
+const closeSerialPort = async () => {
+  try {
+    await serialPort.close()
+    await closedPromise
+  } catch (error) {
+    console.error(error)
+    message.error('关闭串口失败,' + error.message)
+  }
+}
+
+const onSelectBtnClick  = serialPort.select
+const onTriggerBtnClick = async () => {
+  if (serialPort.isOpen) {
+    closeSerialPort()
+  } else {
+    openSerialPort()
+  }
+}
+</script>
+
+<style scoped lang="less">
+.n-button {
+  width: 100%;
+}
+</style>