init commit

src/render/views/ClockConfig/AnimationConfigView/data.ts

@@ -0,0 +1,13 @@
+export const animationDurationOptions   = [10, 100, 1000].map(
+  (v) => ({
+    label: v,
+    value: v
+  })
+)
+
+export const dateDisplayDurationOptions = [0, 1, 3, 5].map(
+  (v) => ({
+    label: v,
+    value: v
+  })
+)

src/render/views/ClockConfig/AnimationConfigView/index.ts

@@ -0,0 +1 @@
+export { default as AnimationConfigView } from './index.vue'

src/render/views/ClockConfig/AnimationConfigView/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <n-space  vertical justify="space-around" align="center" item-style="width: 50%;" class="gesture-recognition-config-view">
+    <n-form-item size="large" label-placement="left" label="翻页动画时长：" path="animationDuration">
+      <n-select
+        :disabled="!serialPort.isOpen"
+        placeholder="请选择翻页动画时长"
+        v-model:value="model.animationDuration"
+        :options="animationDurationOptions"
+        @update:value="onAnimationDurationUpdate"
+      />
+
+      <template #feedback>
+        单位：毫秒
+      </template>
+    </n-form-item>
+
+    <n-form-item size="large" label-placement="left" label="日期显示时长：" path="dateDisplayDuration">
+      <n-select
+        :disabled="!serialPort.isOpen"
+        placeholder="请选择日期显示时长"
+        v-model:value="model.dateDisplayDuration"
+        :options="dateDisplayDurationOptions"
+        @update:value="onDateDisplayDurationUpdate"
+      />
+
+      <template #feedback>
+        单位：秒
+        <br>
+        选择0时，将不会自动从日期切换回时间
+      </template>
+    </n-form-item>
+
+    <ResetButtonView />
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NSpace, NFormItem, NSelect, useMessage } from 'naive-ui'
+import ResetButtonView from '../ResetButtonView.vue'
+import { animationDurationOptions, dateDisplayDurationOptions } from './data'
+import { useSerialPortStore } from '@/stores/serialPort'
+
+const message = useMessage()
+
+const serialPort = useSerialPortStore()
+const model = ref({
+  animationDuration  : null,
+  dateDisplayDuration: null,
+})
+
+const onAnimationDurationUpdate   = () => {
+  if (!serialPort.isOpen) {
+    message.error('请先连接无线通信模块并打开串口')
+    return
+  }
+
+  let cmd = `$SCANSP,${model.value.animationDuration}*`
+  cmd += cmd.length
+  cmd += '\r\n'
+  
+  serialPort.write(cmd)
+}
+
+const onDateDisplayDurationUpdate = () => {
+  if (!serialPort.isOpen) {
+    message.error('请先连接无线通信模块并打开串口')
+    return
+  }
+
+  let cmd = `$SETSDT,${model.value.dateDisplayDuration}*`
+  cmd += cmd.length
+  cmd += '\r\n'
+
+  serialPort.write(cmd)
+}
+</script>
+
+<style scoped lang="less">
+
+</style>