diff --git a/src/render/bootstrapScript/BD&time.ts b/src/render/bootstrapScript/BD&time.ts
new file mode 100644
index 0000000..fd2ecc4
--- /dev/null
+++ b/src/render/bootstrapScript/BD&time.ts
@@ -0,0 +1,5 @@
+import { bootstrap } from './base'
+import { App } from '@/app/BD&time'
+import { setupStore } from '@/stores'
+
+bootstrap(App, [ setupStore ])
diff --git a/src/render/bootstrapScript/BDCommunicationAssistant.ts b/src/render/bootstrapScript/BDCommunicationAssistant.ts
new file mode 100644
index 0000000..a67328c
--- /dev/null
+++ b/src/render/bootstrapScript/BDCommunicationAssistant.ts
@@ -0,0 +1,5 @@
+import { bootstrap } from './base'
+import { App } from '@/app/BDCommunicationAssistant'
+import { setupStore } from '@/stores'
+
+bootstrap(App, [ setupStore ])
diff --git a/src/render/bootstrapScript/BDComprehensiveExperimentalPlatform.ts b/src/render/bootstrapScript/BDComprehensiveExperimentalPlatform.ts
new file mode 100644
index 0000000..1be3332
--- /dev/null
+++ b/src/render/bootstrapScript/BDComprehensiveExperimentalPlatform.ts
@@ -0,0 +1,6 @@
+import { bootstrap } from './base'
+import { App } from '@/app/BDComprehensiveExperimentalPlatform'
+import { setupMap } from '@/components/Map'
+import { setupStore } from '@/stores'
+
+bootstrap(App, [ setupMap, setupStore ])
diff --git a/src/render/bootstrapScript/BDDataAnalysisPlatform.ts b/src/render/bootstrapScript/BDDataAnalysisPlatform.ts
new file mode 100644
index 0000000..efb2b9e
--- /dev/null
+++ b/src/render/bootstrapScript/BDDataAnalysisPlatform.ts
@@ -0,0 +1,6 @@
+import { bootstrap } from './base'
+import { App } from '@/app/BDDataAnalysisPlatform'
+import { setupMap } from '@/components/Map'
+import { setupStore } from '@/stores'
+
+bootstrap(App, [ setupMap, setupStore ])
diff --git a/src/render/bootstrapScript/BDMeteorologicalDataDisplayPlatform.ts b/src/render/bootstrapScript/BDMeteorologicalDataDisplayPlatform.ts
new file mode 100644
index 0000000..c916078
--- /dev/null
+++ b/src/render/bootstrapScript/BDMeteorologicalDataDisplayPlatform.ts
@@ -0,0 +1,6 @@
+import { bootstrap } from './base'
+import { App } from '@/app/BDMeteorologicalDataDisplayPlatform'
+import { setupMap } from '@/components/Map'
+import { setupStore } from '@/stores'
+
+bootstrap(App, [ setupMap, setupStore ])
diff --git a/src/render/bootstrapScript/BDMeteorologicalDataProtocol.ts b/src/render/bootstrapScript/BDMeteorologicalDataProtocol.ts
new file mode 100644
index 0000000..b553fe0
--- /dev/null
+++ b/src/render/bootstrapScript/BDMeteorologicalDataProtocol.ts
@@ -0,0 +1,4 @@
+import { bootstrap } from './base'
+import { App } from '@/app/BDMeteorologicalDataProtocol'
+
+bootstrap(App)
diff --git a/src/render/bootstrapScript/BDPositionTrackRetracing.ts b/src/render/bootstrapScript/BDPositionTrackRetracing.ts
new file mode 100644
index 0000000..6f96c09
--- /dev/null
+++ b/src/render/bootstrapScript/BDPositionTrackRetracing.ts
@@ -0,0 +1,6 @@
+import { bootstrap } from './base'
+import { App } from '@/app/BDPositionTrackRetracing'
+import { setupMap } from '@/components/Map'
+import { setupStore } from '@/stores'
+
+bootstrap(App, [ setupMap, setupStore ])
diff --git a/src/render/bootstrapScript/BDSatellite3DPostureControl.ts b/src/render/bootstrapScript/BDSatellite3DPostureControl.ts
new file mode 100644
index 0000000..5cfa8b0
--- /dev/null
+++ b/src/render/bootstrapScript/BDSatellite3DPostureControl.ts
@@ -0,0 +1,5 @@
+import { bootstrap } from './base'
+import { App } from '@/app/BDSatellite3DPostureControl'
+import { setupStore } from '@/stores'
+
+bootstrap(App, [ setupStore ])
diff --git a/src/render/bootstrapScript/BDSatelliteAttitudeControl.ts b/src/render/bootstrapScript/BDSatelliteAttitudeControl.ts
new file mode 100644
index 0000000..daff883
--- /dev/null
+++ b/src/render/bootstrapScript/BDSatelliteAttitudeControl.ts
@@ -0,0 +1,5 @@
+import { bootstrap } from './base'
+import { App } from '@/app/BDSatelliteAttitudeControl'
+import { setupStore } from '@/stores'
+
+bootstrap(App, [ setupStore ])
diff --git a/src/render/bootstrapScript/BDSatelliteParameterMonitoringPlatform.ts b/src/render/bootstrapScript/BDSatelliteParameterMonitoringPlatform.ts
new file mode 100644
index 0000000..1107c3b
--- /dev/null
+++ b/src/render/bootstrapScript/BDSatelliteParameterMonitoringPlatform.ts
@@ -0,0 +1,5 @@
+import { bootstrap } from './base'
+import { App } from '@/app/BDSatelliteParameterMonitoringPlatform'
+import { setupStore } from '@/stores'
+
+bootstrap(App, [ setupStore ])
diff --git a/src/render/bootstrapScript/BDSatelliteTimeConfiguration.ts b/src/render/bootstrapScript/BDSatelliteTimeConfiguration.ts
new file mode 100644
index 0000000..fd1053b
--- /dev/null
+++ b/src/render/bootstrapScript/BDSatelliteTimeConfiguration.ts
@@ -0,0 +1,5 @@
+import { bootstrap } from './base'
+import { App } from '@/app/BDSatelliteTimeConfiguration'
+import { setupStore } from '@/stores'
+
+bootstrap(App, [ setupStore ])
diff --git a/src/render/bootstrapScript/ClockConfig.ts b/src/render/bootstrapScript/ClockConfig.ts
new file mode 100644
index 0000000..0ae006b
--- /dev/null
+++ b/src/render/bootstrapScript/ClockConfig.ts
@@ -0,0 +1,5 @@
+import { bootstrap } from './base'
+import { App } from '@/app/ClockConfig'
+import { setupStore } from '@/stores'
+
+bootstrap(App, [ setupStore ])
diff --git a/src/render/bootstrapScript/ElectronicScreenDesign.ts b/src/render/bootstrapScript/ElectronicScreenDesign.ts
new file mode 100644
index 0000000..72b8277
--- /dev/null
+++ b/src/render/bootstrapScript/ElectronicScreenDesign.ts
@@ -0,0 +1,5 @@
+import { bootstrap } from './base'
+import { App } from '@/app/ElectronicScreenDesign'
+import { setupStore } from '@/stores'
+
+bootstrap(App, [ setupStore ])
diff --git a/src/render/bootstrapScript/FontDesign.ts b/src/render/bootstrapScript/FontDesign.ts
new file mode 100644
index 0000000..7555007
--- /dev/null
+++ b/src/render/bootstrapScript/FontDesign.ts
@@ -0,0 +1,5 @@
+import { bootstrap } from './base'
+import { App } from '@/app/FontDesign'
+import { setupStore } from '@/stores'
+
+bootstrap(App, [ setupStore ])
diff --git a/src/render/bootstrapScript/GeneratingConstellationChart.ts b/src/render/bootstrapScript/GeneratingConstellationChart.ts
new file mode 100644
index 0000000..2610d1b
--- /dev/null
+++ b/src/render/bootstrapScript/GeneratingConstellationChart.ts
@@ -0,0 +1,5 @@
+import { bootstrap } from './base'
+import { App } from '@/app/GeneratingConstellationChart'
+import { setupStore } from '@/stores'
+
+bootstrap(App, [ setupStore ])
diff --git a/src/render/bootstrapScript/GestureRecognition.ts b/src/render/bootstrapScript/GestureRecognition.ts
new file mode 100644
index 0000000..819e70e
--- /dev/null
+++ b/src/render/bootstrapScript/GestureRecognition.ts
@@ -0,0 +1,5 @@
+import { bootstrap } from './base'
+import { App } from '@/app/GestureRecognition'
+import { setupStore } from '@/stores'
+
+bootstrap(App, [ setupStore ])
diff --git a/src/render/bootstrapScript/NixieTubeConfiguration.ts b/src/render/bootstrapScript/NixieTubeConfiguration.ts
new file mode 100644
index 0000000..535cf16
--- /dev/null
+++ b/src/render/bootstrapScript/NixieTubeConfiguration.ts
@@ -0,0 +1,5 @@
+import { bootstrap } from './base'
+import { App } from '@/app/NixieTubeConfiguration'
+import { setupStore } from '@/stores'
+
+bootstrap(App, [ setupStore ])
diff --git a/src/render/bootstrapScript/VoltageMonitoring.ts b/src/render/bootstrapScript/VoltageMonitoring.ts
new file mode 100644
index 0000000..33bb125
--- /dev/null
+++ b/src/render/bootstrapScript/VoltageMonitoring.ts
@@ -0,0 +1,5 @@
+import { bootstrap } from './base'
+import { App } from '@/app/VoltageMonitoring'
+import { setupStore } from '@/stores'
+
+bootstrap(App, [ setupStore ])
diff --git a/src/render/bootstrapScript/WirelessCommunicationModuleConfiguration.ts b/src/render/bootstrapScript/WirelessCommunicationModuleConfiguration.ts
new file mode 100644
index 0000000..0fe74c7
--- /dev/null
+++ b/src/render/bootstrapScript/WirelessCommunicationModuleConfiguration.ts
@@ -0,0 +1,5 @@
+import { bootstrap } from './base'
+import { App } from '@/app/WirelessCommunicationModuleConfiguration'
+import { setupStore } from '@/stores'
+
+bootstrap(App, [ setupStore ])
diff --git a/src/render/bootstrapScript/base.ts b/src/render/bootstrapScript/base.ts
new file mode 100644
index 0000000..7c88197
--- /dev/null
+++ b/src/render/bootstrapScript/base.ts
@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import '@/common.less'
+
+export const bootstrap = (App, setupFuncs: Function[] = []) => {
+  const app = createApp(App)
+  
+  setupFuncs.forEach((setupFunc) => setupFunc.call(this, app))
+
+  app.mount('#app')
+}
diff --git a/src/render/bootstrapScript/distanceCalculationTool.ts b/src/render/bootstrapScript/distanceCalculationTool.ts
new file mode 100644
index 0000000..162e726
--- /dev/null
+++ b/src/render/bootstrapScript/distanceCalculationTool.ts
@@ -0,0 +1,6 @@
+import { bootstrap } from './base'
+import { App } from '@/app/distanceCalculationTool'
+import { setupMap } from '@/components/Map'
+import { setupStore } from '@/stores'
+
+bootstrap(App, [ setupMap, setupStore ])
diff --git a/src/render/bootstrapScript/index.ts b/src/render/bootstrapScript/index.ts
new file mode 100644
index 0000000..46e4f60
--- /dev/null
+++ b/src/render/bootstrapScript/index.ts
@@ -0,0 +1,6 @@
+import { bootstrap } from './base'
+import { App } from '@/app/index'
+import { setupRouter } from '@/router/index'
+import { setupStore } from '@/stores'
+
+bootstrap(App, [ setupRouter, setupStore ])
diff --git a/src/render/common.less b/src/render/common.less
new file mode 100644
index 0000000..404edee
--- /dev/null
+++ b/src/render/common.less
@@ -0,0 +1,58 @@
+
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+a {
+  text-decoration: none;
+}
+
+li {
+  list-style: none;
+}
+
+div::-webkit-scrollbar {
+  width: 0;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.w-h-full {
+  width: 100%;
+  height: 100%;
+}
+
+.text-center {
+  text-align: center;
+}
+
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.text-right {
+  text-align: right;
+}
diff --git a/src/render/components/Application/index.ts b/src/render/components/Application/index.ts
new file mode 100644
index 0000000..f6fa04d
--- /dev/null
+++ b/src/render/components/Application/index.ts
@@ -0,0 +1 @@
+export { default as Application } from './index.vue'
diff --git a/src/render/components/Application/index.vue b/src/render/components/Application/index.vue
new file mode 100644
index 0000000..0fa1ab1
--- /dev/null
+++ b/src/render/components/Application/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <n-config-provider :locale="zhCN" :date-locale="dateZhCN" :theme-overrides="themeOverrides">
+    <n-loading-bar-provider>
+      <n-message-provider>
+        <n-notification-provider>
+          <n-dialog-provider>
+            <slot name="default"></slot>
+          </n-dialog-provider>
+        </n-notification-provider>
+      </n-message-provider>
+    </n-loading-bar-provider>
+  </n-config-provider>
+</template>
+
+<script setup lang="ts">
+import {
+  zhCN,
+  dateZhCN,
+  NConfigProvider,
+  GlobalThemeOverrides,
+  NDialogProvider,
+  NMessageProvider,
+  NLoadingBarProvider,
+  NNotificationProvider,
+} from 'naive-ui'
+
+const themeOverrides: GlobalThemeOverrides = {
+  // common: {
+  //   // fontSize: '24px',
+  //   // fontWeight: 'bold',
+  //   fontWeightStrong: 'bold'
+  // },
+  // Button: {
+  //   fontSizeLarge: '18px',
+  //   iconSizeLarge: '28px',
+  //   heightLarge: '44px',
+  // }
+}
+</script>
diff --git a/src/render/components/Charts/CNR/data.ts b/src/render/components/Charts/CNR/data.ts
new file mode 100644
index 0000000..2aa5806
--- /dev/null
+++ b/src/render/components/Charts/CNR/data.ts
@@ -0,0 +1,47 @@
+import { reactive } from 'vue'
+import { graphic } from 'echarts/core'
+
+const active_color   = new graphic.LinearGradient(
+	0, 1, 0, 0,
+	[
+		{offset: 0.3, color: '#83bff6'},
+		{offset: 1,   color: '#188df0'}
+	]
+)
+const unactive_color = '#9ca3af'
+
+export const option = reactive({
+  grid: {
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    axisTick: { show: false },
+    axisLine: { show: false },
+    axisLabel: { color: 'black' }
+  },
+  yAxis: {
+    max: 60,
+    splitNumber: 3,
+    axisLabel: {
+      fontSize: 24
+    }
+  },
+  series: [{
+    type: 'bar',
+    barMaxWidth: '50%',
+    label: {
+      show: true,
+      position: 'top',
+      // formatter: function ({ value }) {
+      //   return !value || value[1] === 0 ? '' : value[1]
+      // }
+      // formatter: '{a}-{b}-{c}'
+    },
+    itemStyle: {
+      // color: ({ value }) => {
+      //   return value[1] ? active_color : unactive_color
+      // }
+    }
+  }]
+})
\ No newline at end of file
diff --git a/src/render/components/Charts/CNR/index.ts b/src/render/components/Charts/CNR/index.ts
new file mode 100644
index 0000000..dd04ab4
--- /dev/null
+++ b/src/render/components/Charts/CNR/index.ts
@@ -0,0 +1 @@
+export { default as CNR } from './index.vue';
diff --git a/src/render/components/Charts/CNR/index.vue b/src/render/components/Charts/CNR/index.vue
new file mode 100644
index 0000000..ecc44c9
--- /dev/null
+++ b/src/render/components/Charts/CNR/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <v-chart autoresize :option="option" />
+</template>
+
+<script lang="ts" setup>
+import { use } from 'echarts/core'
+import { BarChart } from 'echarts/charts'
+import { GridComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+import VChart from 'vue-echarts'
+import { option } from './data'
+import { Satellite } from '@/api/satellite/type.d'
+
+use([
+  CanvasRenderer,
+  BarChart,
+  GridComponent
+])
+
+
+const update = (satellites: Array<Satellite>) => {
+  const xAxisData  = []
+  const seriesData = []
+
+  for (let i = 0; i < satellites.value.length; i++) {
+    const { svid, cn0, active } = satellites.value[i]
+
+    xAxisData.push(svid)
+    seriesData.push([i, cn0, active])
+  }
+
+  option.xAxis.data     = xAxisData
+  option.series[0].data = seriesData
+}
+
+const clear = () => {
+  option.xAxis.data     = null
+  option.series[0].data = null
+}
+
+defineExpose({ update, clear })
+</script>
diff --git a/src/render/components/Charts/Clock/index.ts b/src/render/components/Charts/Clock/index.ts
new file mode 100644
index 0000000..c4ff6bb
--- /dev/null
+++ b/src/render/components/Charts/Clock/index.ts
@@ -0,0 +1 @@
+export { default as Clock } from './index.vue'
diff --git a/src/render/components/Charts/Clock/index.vue b/src/render/components/Charts/Clock/index.vue
new file mode 100644
index 0000000..3b66193
--- /dev/null
+++ b/src/render/components/Charts/Clock/index.vue
@@ -0,0 +1,250 @@
+<template>
+  <v-chart autoresize :option="option" />
+</template>
+
+<script lang="ts" setup>
+import { reactive } from "vue"
+
+import VChart from "vue-echarts"
+import { use } from "echarts/core"
+import { GaugeChart } from "echarts/charts"
+import { CanvasRenderer } from "echarts/renderers"
+import { TitleComponent } from "echarts/components"
+
+use([
+  GaugeChart,
+  CanvasRenderer,
+  TitleComponent,
+])
+
+// TODO: 将时间设置成属性
+const props = defineProps({
+  title: String
+})
+
+const option = reactive({
+  title: {
+    text: props.title,
+    left: 'center',
+    textStyle: {
+      fontSize: 28,
+    }
+  },
+  series: [
+    {
+      name: 'hour',
+      type: 'gauge',
+      animation: false,
+      startAngle: 90,
+      endAngle: -270,
+      min: 0,
+      max: 12,
+      splitNumber: 12,
+      clockwise: true,
+      axisLine: {
+        lineStyle: {
+          // width: 15,
+          // color: ['#00ca95'],
+          color: [[1, '#00ca95']]
+          // shadowColor: 'rgba(0, 0, 0, 0.5)',
+          // shadowBlur: 15
+        }
+      },
+      axisTick:{
+        lineStyle: {
+          color: '#00ca95',
+          width: 2
+        }
+      },
+      splitLine: {
+        length: 15,
+        lineStyle: {
+          color: '#00ca95',
+          shadowColor: 'rgba(0, 0, 0, 0.3)',
+          shadowBlur: 3,
+          shadowOffsetX: 1,
+          shadowOffsetY: 2
+        }
+      },
+      axisLabel: {
+        color: '#fff',
+        fontSize: 12,
+        distance: 15,
+        formatter: function (value) {
+          if (value === 0) {
+            return '';
+          }
+          return value + '';
+        }
+      },
+      pointer: {
+        icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+        width: 12,
+        length: '55%',
+        offsetCenter: [0, '8%'],
+        itemStyle: {
+          color: '#2AB8FF',
+          shadowColor: 'rgba(0, 0, 0, 0.3)',
+          shadowBlur: 8,
+          shadowOffsetX: 2,
+          shadowOffsetY: 4
+        }
+      },
+      detail: {
+        show: false
+      },
+      data: [
+        {
+          value: 0
+        }
+      ]
+    },
+    {
+      name: 'minute',
+      type: 'gauge',
+      animation: false,
+      startAngle: 90,
+      endAngle: -270,
+      min: 0,
+      max: 60,
+      clockwise: true,
+      axisLine: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        show: false
+      },
+      pointer: {
+        icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+        width: 8,
+        length: '70%',
+        offsetCenter: [0, '8%'],
+        itemStyle: {
+          color: '#2AB8FF',
+          shadowColor: 'rgba(0, 0, 0, 0.3)',
+          shadowBlur: 8,
+          shadowOffsetX: 2,
+          shadowOffsetY: 4
+        }
+      },
+      anchor: {
+        show: true,
+        size: 20,
+        showAbove: false,
+        itemStyle: {
+          borderWidth: 15,
+          borderColor: '#2AB8FF',
+          shadowColor: 'rgba(0, 0, 0, 0.3)',
+          shadowBlur: 8,
+          shadowOffsetX: 2,
+          shadowOffsetY: 4
+        }
+      },
+      detail: {
+        show: false
+      },
+      title: {
+        offsetCenter: ['0%', '-40%']
+      },
+      data: [
+        {
+          value: 0
+        }
+      ]
+    },
+    {
+      name: 'second',
+      type: 'gauge',
+      startAngle: 90,
+      endAngle: -270,
+      min: 0,
+      max: 60,
+      animationEasingUpdate: 'bounceOut',
+      clockwise: true,
+      axisLine: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        show: false
+      },
+      pointer: {
+        icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+        width: 4,
+        length: '85%',
+        offsetCenter: [0, '8%'],
+        itemStyle: {
+          color: '#2AB8FF',
+          shadowColor: 'rgba(0, 0, 0, 0.3)',
+          shadowBlur: 8,
+          shadowOffsetX: 2,
+          shadowOffsetY: 4
+        }
+      },
+      anchor: {
+        show: true,
+        size: 15,
+        showAbove: true,
+        itemStyle: {
+          color: '#2AB8FF',
+          shadowColor: 'rgba(0, 0, 0, 0.3)',
+          shadowBlur: 8,
+          shadowOffsetX: 2,
+          shadowOffsetY: 4
+        }
+      },
+      detail: {
+        show: false
+      },
+      title: {
+        offsetCenter: ['0%', '-40%']
+      },
+      data: [
+        {
+          value: 0
+        }
+      ]
+    }
+  ]
+})
+
+let date
+const update = (dateTime: Date) => {
+  if (!dateTime) return
+  const seconds     = dateTime.getSeconds()
+  const minutes     = dateTime.getMinutes()
+  const hours       = dateTime.getHours()
+  const second_data = seconds
+  const minute_data = second_data / 60 + minutes
+  const hour_data   = (minute_data / 60 + hours) % 12
+  const value = {
+    series: [
+      { data: [{ value: hour_data }] },
+      { data: [{ value: minute_data }] },
+      {
+        animation: second_data !== 0,
+        data: [{ value: second_data }]
+      }
+    ]
+  }
+  
+  Object.assign(option, value)
+
+  date = dateTime
+}
+
+const getDate = () => date
+
+defineExpose({ update, getDate })
+</script>
\ No newline at end of file
diff --git a/src/render/components/Charts/Planisphere/data.ts b/src/render/components/Charts/Planisphere/data.ts
new file mode 100644
index 0000000..d1ecfa6
--- /dev/null
+++ b/src/render/components/Charts/Planisphere/data.ts
@@ -0,0 +1,65 @@
+import { reactive } from "vue"
+
+export const active_color   = '#e5323e'
+export const unactive_color = '#9ca3af'
+
+export const option = reactive({
+  polar: {
+    radius: '85%'
+  },
+  angleAxis: {
+    min: 0,
+    max: 360,
+    interval: 45,
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      fontSize: 24,
+      formatter: function (value: number) {
+        switch (value)
+        {
+          case 0	 : return '北'
+          case 90	 : return '东'
+          case 180 : return '南'
+          case 270 : return '西'
+        }
+      },
+    }
+  },
+  radiusAxis: {
+    min: -90,
+    max: 0,
+    interval: 30,
+    axisLabel: {
+      rotate: -25,
+      showMinLabel: false,
+      showMaxLabel: false,
+      verticalAlign: 'bottom',
+      // formatter: function(value: number){
+      //   return Math.abs(value)
+      // },
+      formatter: function(value, index){
+        if(value === 0){
+            return '';
+        }
+
+        return -value;
+      },
+    }
+  },
+  series: [{
+    coordinateSystem: 'polar',
+    type: 'scatter',
+    symbolSize: 32,
+    label: {
+      show: true,
+      formatter: '{@[2]}'
+    },
+    itemStyle: {
+      color: ({ value }) => {
+				return value[3] ? active_color : unactive_color
+			}
+    },
+  }]
+})
\ No newline at end of file
diff --git a/src/render/components/Charts/Planisphere/index.ts b/src/render/components/Charts/Planisphere/index.ts
new file mode 100644
index 0000000..07e76e8
--- /dev/null
+++ b/src/render/components/Charts/Planisphere/index.ts
@@ -0,0 +1 @@
+export { default as Planisphere } from './index.vue';
diff --git a/src/render/components/Charts/Planisphere/index.vue b/src/render/components/Charts/Planisphere/index.vue
new file mode 100644
index 0000000..4fc09d5
--- /dev/null
+++ b/src/render/components/Charts/Planisphere/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <VChart autoresize :option="option" />
+</template>
+
+<script lang="ts" setup>
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { ScatterChart } from 'echarts/charts'
+import { PolarComponent } from 'echarts/components'
+import VChart from 'vue-echarts'
+import { option } from './data'
+import { Satellite } from '@/api/satellite/type.d'
+
+// TODO: 调研是否需要以及如何释放echart对象
+use([
+  CanvasRenderer,
+  ScatterChart,
+  PolarComponent
+])
+
+const update = (satellites: Array<Satellite>) => {
+  const data = satellites.value.map(({ svid, ele, az, active }) => {
+    return [parseInt(ele) * -1, az, svid, active]
+  })
+  
+  option.series[0].data = data
+}
+
+const clear = () => {
+  option.series[0].data = null
+}
+
+defineExpose({ update, clear })
+</script>
diff --git a/src/render/components/Charts/index.ts b/src/render/components/Charts/index.ts
new file mode 100644
index 0000000..d038c73
--- /dev/null
+++ b/src/render/components/Charts/index.ts
@@ -0,0 +1,3 @@
+import { Clock } from './Clock'
+
+export { Clock }
diff --git a/src/render/components/Map/amap/Map/data.ts b/src/render/components/Map/amap/Map/data.ts
new file mode 100644
index 0000000..1f52f96
--- /dev/null
+++ b/src/render/components/Map/amap/Map/data.ts
@@ -0,0 +1 @@
+export const zooms = [4, 20]
diff --git a/src/render/components/Map/amap/Map/index.ts b/src/render/components/Map/amap/Map/index.ts
new file mode 100644
index 0000000..c775f7f
--- /dev/null
+++ b/src/render/components/Map/amap/Map/index.ts
@@ -0,0 +1 @@
+export { default as Map } from './index.vue'
diff --git a/src/render/components/Map/amap/Map/index.vue b/src/render/components/Map/amap/Map/index.vue
new file mode 100644
index 0000000..86b1ac5
--- /dev/null
+++ b/src/render/components/Map/amap/Map/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <el-amap
+    ref="mapRef"
+    viewMode="3D"
+    :zooms="zooms"
+    :zoom="zoom"
+    :center="center"
+    v-bind="$attrs"
+  >
+    <el-amap-control-map-type :defaultType="1" />
+    <slot></slot>
+  </el-amap>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { zooms } from './data'
+
+defineProps({
+  zoom: {
+    type: Number,
+    default: 4.5,
+  },
+  center: {
+    type: Array,
+    default: [105, 31],
+  },
+})
+
+// TODO: 添加夜间模式
+// const mapStyle = ref('amap://styles/grey')
+
+// TODO: 调研高德地图的接口，实现按需加载以及其他地图功能
+
+
+const mapRef           = ref()
+const setZoomAndCenter = (zoom, center) => mapRef.value.$$getInstance()?.setZoomAndCenter(zoom, center, true)
+
+defineExpose({ setZoomAndCenter })
+</script>
+
+<style scoped lang="less">
+.el-vue-amap-container {
+  width: 100%;
+  height: 100%;
+
+  :deep(.amap-container) {
+
+    .amap-ctrl-overlay-layer {
+      display: none!important;
+    }
+    .amap-logo {
+      display: none!important;
+    }
+
+    .amap-copyright {
+      display: none!important;
+    }
+  }
+}
+</style>
diff --git a/src/render/components/Map/amap/MapInfoWindow.vue b/src/render/components/Map/amap/MapInfoWindow.vue
new file mode 100644
index 0000000..9e7b89e
--- /dev/null
+++ b/src/render/components/Map/amap/MapInfoWindow.vue
@@ -0,0 +1,18 @@
+<template>
+  <el-amap-info-window
+    v-model:visible="visible"
+    :position="position"
+  >
+    <slot></slot>
+  </el-amap-info-window>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue"
+
+const props = defineProps({
+  position: Array
+})
+
+const visible = computed(() => props.position.value !== null)
+</script>
diff --git a/src/render/components/Map/amap/MapMarker.vue b/src/render/components/Map/amap/MapMarker.vue
new file mode 100644
index 0000000..7eef123
--- /dev/null
+++ b/src/render/components/Map/amap/MapMarker.vue
@@ -0,0 +1,11 @@
+<template>
+  <el-amap-marker :icon="markIcon" anchor="bottom-center" v-if="!!position && position.length >= 2 && !isNaN(position[0])  && !isNaN(position[1]) " :position="position" />
+</template>
+
+<script lang="ts" setup>
+import markIcon from '@/assets/mark.png'
+
+defineProps({
+  position: Array<Number>
+})
+</script>
diff --git a/src/render/components/Map/amap/MapPolyline.vue b/src/render/components/Map/amap/MapPolyline.vue
new file mode 100644
index 0000000..3e5ebf6
--- /dev/null
+++ b/src/render/components/Map/amap/MapPolyline.vue
@@ -0,0 +1,13 @@
+<template>
+  <el-amap-polyline v-if="!!path && path.length >= 2" :path="path" :strokeColor="strokeColor" :strokeOpacity="strokeOpacity" :strokeWeight="strokeWeight" />
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  path: Array<Array<Number>>
+})
+
+const strokeColor   = '#fef301'
+const strokeOpacity = 1
+const strokeWeight  = 6
+</script>
diff --git a/src/render/components/Map/amap/MapText.vue b/src/render/components/Map/amap/MapText.vue
new file mode 100644
index 0000000..f0ea440
--- /dev/null
+++ b/src/render/components/Map/amap/MapText.vue
@@ -0,0 +1,10 @@
+<template>
+  <el-amap-text v-if="!!position && position.length >= 2 && !isNaN(position[0])  && !isNaN(position[1]) " :position="position" />
+</template>
+
+<script lang="ts" setup>
+
+defineProps({
+  position: Array<Number>
+})
+</script>
diff --git a/src/render/components/Map/amap/Marker.vue b/src/render/components/Map/amap/Marker.vue
new file mode 100644
index 0000000..48c1b9c
--- /dev/null
+++ b/src/render/components/Map/amap/Marker.vue
@@ -0,0 +1,9 @@
+<template>
+  <el-amap-marker v-for="(position, index) in positions" :key="index" :position="position" />
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  positions: Array
+})
+</script>
diff --git a/src/render/components/Map/amap/MouseTool.vue b/src/render/components/Map/amap/MouseTool.vue
new file mode 100644
index 0000000..d8ebd25
--- /dev/null
+++ b/src/render/components/Map/amap/MouseTool.vue
@@ -0,0 +1,12 @@
+<template>
+  <el-amap-mouse-tool
+    type="rule"
+    :auto-clear="false"
+  />
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped lang="less">
+</style>
diff --git a/src/render/components/Map/amap/PolylineView/index.ts b/src/render/components/Map/amap/PolylineView/index.ts
new file mode 100644
index 0000000..5fd25eb
--- /dev/null
+++ b/src/render/components/Map/amap/PolylineView/index.ts
@@ -0,0 +1 @@
+export { default as PolylineView } from './index.vue';
diff --git a/src/render/components/Map/amap/PolylineView/index.vue b/src/render/components/Map/amap/PolylineView/index.vue
new file mode 100644
index 0000000..37fbf97
--- /dev/null
+++ b/src/render/components/Map/amap/PolylineView/index.vue
@@ -0,0 +1,9 @@
+<template>
+  <el-amap-polyline v-for="(path, index) in paths" :key="index" :path="path" />
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  paths: Array
+})
+</script>
diff --git a/src/render/components/Map/amap/TrackLineView/data.ts b/src/render/components/Map/amap/TrackLineView/data.ts
new file mode 100644
index 0000000..0391357
--- /dev/null
+++ b/src/render/components/Map/amap/TrackLineView/data.ts
@@ -0,0 +1,2 @@
+export const timing        = [[0, 0.3], [1, 0.7]]
+export const rotationSpeed = 10
diff --git a/src/render/components/Map/amap/TrackLineView/index.ts b/src/render/components/Map/amap/TrackLineView/index.ts
new file mode 100644
index 0000000..7c89908
--- /dev/null
+++ b/src/render/components/Map/amap/TrackLineView/index.ts
@@ -0,0 +1,2 @@
+export { default as TrackLineView } from './index.vue';
+export { Journey } from './type';
diff --git a/src/render/components/Map/amap/TrackLineView/index.vue b/src/render/components/Map/amap/TrackLineView/index.vue
new file mode 100644
index 0000000..60357db
--- /dev/null
+++ b/src/render/components/Map/amap/TrackLineView/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <PolylineView :paths="journey.paths" />
+  <Marker :positions="positions" />
+  <el-amap-loca @init="initLoca" />
+</template>
+
+<script lang="ts" setup>
+import { reactive, watch } from 'vue'
+import Marker from '../Marker.vue'
+import { PolylineView } from '../PolylineView'
+import { Journey } from './type'
+import { timing, rotationSpeed } from './data'
+
+const props = defineProps({
+  journey: Journey
+})
+
+const positions  = reactive([])
+
+let mapInstance  = null
+let locaInstance = null
+let finished     = true
+
+const initLoca   = loca => {
+  locaInstance   = loca
+  mapInstance    = loca.map
+  loca.animate.start();
+}
+
+watch(
+  () => props.journey,
+  (value) => {
+    const { paths } = value
+    
+    clear()
+
+    if (paths.length > 0) load()
+  },
+  { deep: true },
+)
+
+const load  = () => {
+  finished = false
+  
+  locaInstance?.viewControl.addTrackAnimate({
+    path    : props.journey.paths[0], // 镜头轨迹，二维数组，支持海拔
+    duration: props.journey.duration, // 时长
+    timing,                           // 速率控制器
+    rotationSpeed,                    // 每秒旋转多少度
+  }, () => finished = true)
+}
+
+const clear = () => {
+  finished         = true
+  positions.length = 0
+
+  locaInstance?.viewControl.clearAnimates()
+}
+
+const run   = () => {
+  if (!finished) positions[0] = mapInstance?.getCenter().toArray()
+  
+  requestAnimationFrame(run)
+}
+run()
+</script>
diff --git a/src/render/components/Map/amap/TrackLineView/type.ts b/src/render/components/Map/amap/TrackLineView/type.ts
new file mode 100644
index 0000000..03aea2b
--- /dev/null
+++ b/src/render/components/Map/amap/TrackLineView/type.ts
@@ -0,0 +1,6 @@
+export class Journey {
+  constructor(paths, durationData) {
+    this.paths = paths
+    this.durationData = durationData
+  }
+}
\ No newline at end of file
diff --git a/src/render/components/Map/amap/index.ts b/src/render/components/Map/amap/index.ts
new file mode 100644
index 0000000..5a19d0d
--- /dev/null
+++ b/src/render/components/Map/amap/index.ts
@@ -0,0 +1,28 @@
+import type { App } from 'vue'
+import VueAMap, { initAMapApiLoader, lazyAMapApiLoaderInstance } from '@vuemap/vue-amap'
+import '@vuemap/vue-amap/dist/style.css'
+import { wgs84togcj02 } from 'coordtransform'
+initAMapApiLoader({
+  key: '763566888253f0a902f73609cf45a021',
+})
+
+export const setupMap = (app: App) => {
+  app.use(VueAMap)
+  
+  // 引入高德原生 SDK
+  lazyAMapApiLoaderInstance.then()
+}
+
+export const lonlat2Position = (longitude, latitude) => {
+  return wgs84togcj02(longitude, latitude)
+}
+
+export * from './Map'
+export * from './PolylineView'
+export * from './TrackLineView'
+export { default as Marker } from './Marker.vue'
+export { default as MapText } from './MapText.vue'
+export { default as MapMarker } from './MapMarker.vue'
+export { default as MapPolyline } from './MapPolyline.vue'
+export { default as MapInfoWindow } from './MapInfoWindow.vue'
+export { default as MouseTool } from './MouseTool.vue'
diff --git a/src/render/components/Map/index.ts b/src/render/components/Map/index.ts
new file mode 100644
index 0000000..cceba71
--- /dev/null
+++ b/src/render/components/Map/index.ts
@@ -0,0 +1 @@
+export * from './amap'
diff --git a/src/render/components/SerialPort/ManagementView/data.ts b/src/render/components/SerialPort/ManagementView/data.ts
new file mode 100644
index 0000000..fcc1118
--- /dev/null
+++ b/src/render/components/SerialPort/ManagementView/data.ts
@@ -0,0 +1,26 @@
+export const BAUDRATE_OPTIONS     = [
+  { label: 9600  , value: 9600       },
+  { label: 38400 , value: 38400      },
+  { label: 115200, value: 115200     },
+]
+
+export const DATA_BITS_OPTIONS    = [
+  { label: 8     , value: 8          },
+  { label: 7     , value: 7          },
+]
+
+export const STOPBITS_OPTIONS     = [
+  { label: 1     , value: 1          },
+  { label: 2     , value: 2          },
+]
+
+export const PARITY_OPTIONS       = [
+  { label: '无'  , value: 'none'     },
+  { label: '奇'  , value: 'odd'      },
+  { label: '偶'  , value: 'even'     },
+]
+
+export const FLOW_CONTROL_OPTIONS = [
+  { label: '无'  , value: 'none'     },
+  { label: '硬件', value: 'hardware' },
+]
diff --git a/src/render/components/SerialPort/ManagementView/index.ts b/src/render/components/SerialPort/ManagementView/index.ts
new file mode 100644
index 0000000..28895c9
--- /dev/null
+++ b/src/render/components/SerialPort/ManagementView/index.ts
@@ -0,0 +1 @@
+export { default as SerialPortManagementView } from './index.vue'
diff --git a/src/render/components/SerialPort/ManagementView/index.vue b/src/render/components/SerialPort/ManagementView/index.vue
new file mode 100644
index 0000000..e08c6c4
--- /dev/null
+++ b/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>
diff --git a/src/render/components/SerialPort/ReceivingMessageView/index.ts b/src/render/components/SerialPort/ReceivingMessageView/index.ts
new file mode 100644
index 0000000..1e19d95
--- /dev/null
+++ b/src/render/components/SerialPort/ReceivingMessageView/index.ts
@@ -0,0 +1 @@
+export { default as SerialPortReceivingMessageView } from './index.vue';
diff --git a/src/render/components/SerialPort/ReceivingMessageView/index.vue b/src/render/components/SerialPort/ReceivingMessageView/index.vue
new file mode 100644
index 0000000..fb3aa96
--- /dev/null
+++ b/src/render/components/SerialPort/ReceivingMessageView/index.vue
@@ -0,0 +1,64 @@
+<template>
+  <n-card embedded title="数据接收" class="h-full">
+    <div
+      ref="terminalRef"
+      class="h-full">
+    </div>
+    
+    <template #header-extra>
+      <n-space align="center" :wrap="false">
+        <n-button
+          type="primary"
+          size="large"
+          class="primary-button"
+          @click="clearBtnClick">
+          清　除
+        </n-button>
+        <n-switch size="large" v-model:value="appending">
+          <template #checked>
+            接　收
+          </template>
+          <template #unchecked>
+            暂　停
+          </template>
+        </n-switch>
+      </n-space>
+    </template>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { Terminal } from 'xterm'
+import { FitAddon } from 'xterm-addon-fit'
+import 'xterm/css/xterm.css'
+import { NCard, NSpace, NButton, NSwitch } from 'naive-ui'
+import { useSerialPortStore, SerialPortEventType } from '@/stores/serialPort'
+
+const terminalRef = ref()
+
+let term: Terminal
+const clearBtnClick = () => term?.clear()
+onMounted(() => {
+  term = new Terminal({
+    rows: Math.floor(terminalRef.value.clientHeight / 17)
+  })
+
+  const fitAddon = new FitAddon();
+  term.loadAddon(fitAddon)
+  if (terminalRef.value) {
+    term.open(terminalRef.value)
+    fitAddon.fit()
+  }
+})
+
+const appending        = ref(true)
+const onSerialPortData = (data: Uint8Array) => {
+  if (!data) return
+
+  if (appending.value) term?.write(data)
+}
+
+const serialPort = useSerialPortStore()
+serialPort.addEventListener(SerialPortEventType.data, onSerialPortData)
+</script>
diff --git a/src/render/components/SerialPort/SendingMessageView/index.ts b/src/render/components/SerialPort/SendingMessageView/index.ts
new file mode 100644
index 0000000..e266f07
--- /dev/null
+++ b/src/render/components/SerialPort/SendingMessageView/index.ts
@@ -0,0 +1 @@
+export { default as SerialPortSendingMessageView } from './index.vue'
diff --git a/src/render/components/SerialPort/SendingMessageView/index.vue b/src/render/components/SerialPort/SendingMessageView/index.vue
new file mode 100644
index 0000000..8b3707b
--- /dev/null
+++ b/src/render/components/SerialPort/SendingMessageView/index.vue
@@ -0,0 +1,51 @@
+<template>
+  <n-card embedded title="数据发送" class="h-full">
+    <n-input
+      v-model:value="message"
+      type="textarea"
+      size="large"
+      placeholder="输入要发送的信息"
+      class="h-full"
+      :autosize="{ maxRows: 8}"
+      :clearable="true"
+    />
+
+    <template #header-extra>
+      <n-space align="center" :wrap="false">
+        <n-button type="primary"
+          size="large"
+          :disabled="!serialPort.isOpen || message.length === 0"
+          @click="sendBtnClick">
+          发　送
+        </n-button>
+
+        <slot name="extra"></slot>
+      </n-space>
+    </template>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NCard, NInput, NSpace, NButton } from 'naive-ui'
+import { useSerialPortStore } from '@/stores/serialPort'
+
+const message        = ref('')
+
+const NEWLINE_REGEXP = /\n/g
+const serialPort     = useSerialPortStore()
+const sendBtnClick   = async () => {
+  if (!message.value) return
+  const text = message.value.replace(NEWLINE_REGEXP, '\r\n') + '\r\n'
+  await serialPort.write(text)
+  message.value = ''
+}
+
+const update = (text: string) => {
+  if ( text.length <= 0 ) return
+
+  message.value = text
+}
+
+defineExpose({ update })
+</script>
diff --git a/src/render/components/SerialPort/index.ts b/src/render/components/SerialPort/index.ts
new file mode 100644
index 0000000..7a6fba8
--- /dev/null
+++ b/src/render/components/SerialPort/index.ts
@@ -0,0 +1,3 @@
+export * from './ManagementView'
+export * from './SendingMessageView'
+export * from './ReceivingMessageView'
diff --git a/src/render/components/SerialPortManagementDrawer/index.ts b/src/render/components/SerialPortManagementDrawer/index.ts
new file mode 100644
index 0000000..0396d70
--- /dev/null
+++ b/src/render/components/SerialPortManagementDrawer/index.ts
@@ -0,0 +1 @@
+export { default as SerialPortManagementDrawer } from './index.vue'
diff --git a/src/render/components/SerialPortManagementDrawer/index.vue b/src/render/components/SerialPortManagementDrawer/index.vue
new file mode 100644
index 0000000..4a6b184
--- /dev/null
+++ b/src/render/components/SerialPortManagementDrawer/index.vue
@@ -0,0 +1,33 @@
+<template>
+  <n-button circle type="primary" size="large" class="drawer-control-button" @click="show = true">
+    <template #icon>
+      <n-icon>
+        <Cable />
+      </n-icon>
+    </template>
+  </n-button>
+  
+  <n-drawer v-model:show="show">
+    <n-drawer-content>
+      <SerialPortManagementView></SerialPortManagementView>
+    </n-drawer-content>
+  </n-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NButton, NIcon, NDrawer, NDrawerContent } from 'naive-ui'
+import { CableFilled as Cable } from '@vicons/material'
+import { SerialPortManagementView } from '@/components/SerialPort'
+
+const show = ref(false)
+</script>
+
+<style scoped lang="less">
+.drawer-control-button {
+  position: fixed;
+  right: 60px;
+  top: 120px;
+}
+</style>
+
diff --git a/src/render/components/Tabs/TabPane/index.ts b/src/render/components/Tabs/TabPane/index.ts
new file mode 100644
index 0000000..0f0bd2e
--- /dev/null
+++ b/src/render/components/Tabs/TabPane/index.ts
@@ -0,0 +1 @@
+export { default as TabPane } from './index.vue'
diff --git a/src/render/components/Tabs/TabPane/index.vue b/src/render/components/Tabs/TabPane/index.vue
new file mode 100644
index 0000000..7941328
--- /dev/null
+++ b/src/render/components/Tabs/TabPane/index.vue
@@ -0,0 +1,18 @@
+<template>
+  <n-tab-pane :name="(name as string)" :tab="tab">
+    <slot></slot>
+  </n-tab-pane>
+</template>
+
+<script setup lang="ts">
+import { NTabPane } from 'naive-ui'
+
+defineProps({
+  name: String,
+  tab: String
+})
+</script>
+
+<style scoped lang="less">
+
+</style>
\ No newline at end of file
diff --git a/src/render/components/Tabs/index.ts b/src/render/components/Tabs/index.ts
new file mode 100644
index 0000000..d0cd81c
--- /dev/null
+++ b/src/render/components/Tabs/index.ts
@@ -0,0 +1,3 @@
+export { default as Tabs } from './index.vue'
+// export * from './TabPane'
+export { TabPane } from './TabPane'
diff --git a/src/render/components/Tabs/index.vue b/src/render/components/Tabs/index.vue
new file mode 100644
index 0000000..3c71643
--- /dev/null
+++ b/src/render/components/Tabs/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <n-tabs type="segment" size="large" v-bind="$attrs">
+    <slot></slot>
+  </n-tabs>
+</template>
+
+<script setup lang="ts">
+import { NTabs } from 'naive-ui'
+
+</script>
+
+<style scoped lang="less">
+.n-tabs {
+  --n-tab-height: 50px;
+  --n-tab-text-color-active: #18a058 !important;
+  --n-tab-text-color-hover: #18a058 !important;
+  
+  position: relative;
+  // height: 100%;
+  min-height: var(--n-tab-height);
+
+  :deep(.n-tabs-nav) {
+    position: absolute;
+    height: var(--n-tab-height);
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    .n-tabs-tab--active {
+      background-color: inherit !important;
+      box-shadow: inherit !important;
+    }
+  }
+
+  :deep(.n-tab-pane) {
+    position: absolute;
+    padding: 0;
+    top: 0;
+    bottom: var(--n-tab-height);
+    overflow: auto;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/render/layout/absolute/Default.vue b/src/render/layout/absolute/Default.vue
new file mode 100644
index 0000000..002da6a
--- /dev/null
+++ b/src/render/layout/absolute/Default.vue
@@ -0,0 +1,12 @@
+<template>
+  <RootLayout>
+    <n-layout-content position="absolute" v-bind="$attrs.contentAttrs">
+      <slot name="default"></slot>
+    </n-layout-content>
+  </RootLayout>
+</template>
+
+<script setup lang="ts">
+import { NLayoutContent } from 'naive-ui'
+import { default as RootLayout } from '@/layout/absolute/Root.vue'
+</script>
diff --git a/src/render/layout/absolute/FixHeader.vue b/src/render/layout/absolute/FixHeader.vue
new file mode 100644
index 0000000..f28127c
--- /dev/null
+++ b/src/render/layout/absolute/FixHeader.vue
@@ -0,0 +1,16 @@
+<template>
+  <RootLayout>
+    <n-layout-header  position="absolute" v-bind="$attrs.headerAttrs">
+      <slot name="header"></slot>
+    </n-layout-header>
+
+    <n-layout-content position="absolute" v-bind="$attrs.contentAttrs">
+      <slot name="default"></slot>
+    </n-layout-content>
+  </RootLayout>
+</template>
+
+<script setup lang="ts">
+import { NLayoutHeader, NLayoutContent } from 'naive-ui'
+import { default as RootLayout } from '@/layout/absolute/Root.vue'
+</script>
diff --git a/src/render/layout/absolute/LeftSider.vue b/src/render/layout/absolute/LeftSider.vue
new file mode 100644
index 0000000..4671d85
--- /dev/null
+++ b/src/render/layout/absolute/LeftSider.vue
@@ -0,0 +1,16 @@
+<template>
+  <RootLayout has-sider>
+    <n-layout-sider v-bind="$attrs.siderAttrs">
+      <slot name="sider"></slot>
+    </n-layout-sider>
+
+    <n-layout-content v-bind="$attrs.contentAttrs">
+      <slot name="default"></slot>
+    </n-layout-content>
+  </RootLayout>
+</template>
+
+<script setup lang="ts">
+import { NLayoutSider, NLayoutContent } from 'naive-ui'
+import { default as RootLayout } from './Root.vue'
+</script>
diff --git a/src/render/layout/absolute/RightSider.vue b/src/render/layout/absolute/RightSider.vue
new file mode 100644
index 0000000..7c17595
--- /dev/null
+++ b/src/render/layout/absolute/RightSider.vue
@@ -0,0 +1,25 @@
+<template>
+  <RootLayout has-sider sider-placement="right" class="root-layout">
+    <n-layout-sider v-bind="$attrs.siderAttrs" position="absolute">
+      <slot name="sider"></slot>
+    </n-layout-sider>
+
+    <n-layout-content v-bind="$attrs.contentAttrs">
+      <slot name="default"></slot>
+    </n-layout-content>
+  </RootLayout>
+</template>
+
+<script setup lang="ts">
+import { NLayoutSider, NLayoutContent } from 'naive-ui'
+import { default as RootLayout } from './Root.vue'
+</script>
+
+<style scoped lang="less">
+.root-layout {
+  .n-layout-sider {
+    left: auto;
+    right: 0;
+  }
+}
+</style>
diff --git a/src/render/layout/absolute/Root.vue b/src/render/layout/absolute/Root.vue
new file mode 100644
index 0000000..96b7f6d
--- /dev/null
+++ b/src/render/layout/absolute/Root.vue
@@ -0,0 +1,9 @@
+<template>
+  <n-layout position="absolute">
+    <slot name="default"></slot>
+  </n-layout>
+</template>
+
+<script setup lang="ts">
+import { NLayout } from 'naive-ui'
+</script>
diff --git a/src/render/layout/default/index.ts b/src/render/layout/default/index.ts
new file mode 100644
index 0000000..14b3c99
--- /dev/null
+++ b/src/render/layout/default/index.ts
@@ -0,0 +1 @@
+export { default as Layout } from './index.vue'
diff --git a/src/render/layout/default/index.vue b/src/render/layout/default/index.vue
new file mode 100644
index 0000000..6f0cc2e
--- /dev/null
+++ b/src/render/layout/default/index.vue
@@ -0,0 +1,12 @@
+<template>
+  <!-- TODO: 重构所有的布局，解决layout-sider和layout-content同时存在时可能存在的冲突 -->
+  <n-layout position="absolute" v-bind="$attrs">
+    <!-- <n-layout-content position="absolute"> -->
+      <slot name="default"></slot>
+    <!-- </n-layout-content> -->
+  </n-layout>
+</template>
+
+<script setup lang="ts">
+import { NLayout } from 'naive-ui'
+</script>
diff --git a/src/render/layout/fixFooter/index.ts b/src/render/layout/fixFooter/index.ts
new file mode 100644
index 0000000..c519a6d
--- /dev/null
+++ b/src/render/layout/fixFooter/index.ts
@@ -0,0 +1 @@
+export { default as FixFooterLayout } from './index.vue'
diff --git a/src/render/layout/fixFooter/index.vue b/src/render/layout/fixFooter/index.vue
new file mode 100644
index 0000000..aafa1af
--- /dev/null
+++ b/src/render/layout/fixFooter/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <ParentLayout>
+    <n-layout-content position="absolute">
+      <slot name="default"></slot>
+    </n-layout-content>
+
+    <n-layout-footer position="absolute" bordered>
+      <slot name="footer"></slot>
+    </n-layout-footer>
+  </ParentLayout>
+</template>
+
+<script setup lang="ts">
+import { NLayoutFooter, NLayoutContent } from 'naive-ui'
+import { Layout as ParentLayout } from '@/layout/default'
+</script>
+
+<style lang="less" scoped>
+.n-layout {
+  --footer-height: 100px;
+
+  .n-layout-footer {
+    height: var(--footer-height)
+  }
+
+  .n-layout-content {
+    bottom: var(--footer-height)
+  }
+}
+</style>
diff --git a/src/render/layout/fixHeader/index.ts b/src/render/layout/fixHeader/index.ts
new file mode 100644
index 0000000..28f185c
--- /dev/null
+++ b/src/render/layout/fixHeader/index.ts
@@ -0,0 +1 @@
+export { default as FixHeaderLayout } from './index.vue'
diff --git a/src/render/layout/fixHeader/index.vue b/src/render/layout/fixHeader/index.vue
new file mode 100644
index 0000000..79a8b18
--- /dev/null
+++ b/src/render/layout/fixHeader/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <ParentLayout>
+    <n-layout-header  position="absolute" v-bind="$attrs.headerAttrs">
+      <slot name="header"></slot>
+    </n-layout-header>
+
+    <n-layout-content position="absolute" v-bind="$attrs.contentAttrs">
+      <slot name="default"></slot>
+    </n-layout-content>
+  </ParentLayout>
+</template>
+
+<script setup lang="ts">
+import { NLayoutHeader, NLayoutContent } from 'naive-ui'
+import { Layout as ParentLayout } from '@/layout/default'
+</script>
+
+<style lang="less" scoped>
+.n-layout {
+  .n-layout-header {
+    height: var(--header-height);
+    box-shadow: 0px 5px 3px 0px rgb(0 0 0 / 12%);
+    z-index: 11;
+  }
+
+  .n-layout-content {
+    padding-top: var(--header-height);
+  }
+}
+</style>
diff --git a/src/render/layout/leftSider/index.ts b/src/render/layout/leftSider/index.ts
new file mode 100644
index 0000000..ee284a9
--- /dev/null
+++ b/src/render/layout/leftSider/index.ts
@@ -0,0 +1 @@
+export { default as LeftSiderLayout } from './index.vue'
diff --git a/src/render/layout/leftSider/index.vue b/src/render/layout/leftSider/index.vue
new file mode 100644
index 0000000..eda0e76
--- /dev/null
+++ b/src/render/layout/leftSider/index.vue
@@ -0,0 +1,16 @@
+<template>
+  <ParentLayout :has-sider="true" sider-placement="left">
+    <n-layout-sider v-bind="$attrs.siderAttrs">
+      <slot name="sider"></slot>
+    </n-layout-sider>
+
+    <n-layout-content v-bind="$attrs.contentAttrs">
+      <slot name="default"></slot>
+    </n-layout-content>
+  </ParentLayout>
+</template>
+
+<script setup lang="ts">
+import { NLayoutSider, NLayoutContent } from 'naive-ui'
+import { Layout as ParentLayout } from '@/layout/default'
+</script>
diff --git a/src/render/layout/rightSider/index.ts b/src/render/layout/rightSider/index.ts
new file mode 100644
index 0000000..f27b8f0
--- /dev/null
+++ b/src/render/layout/rightSider/index.ts
@@ -0,0 +1 @@
+export { default as RightSiderLayout } from './index.vue'
diff --git a/src/render/layout/rightSider/index.vue b/src/render/layout/rightSider/index.vue
new file mode 100644
index 0000000..041365f
--- /dev/null
+++ b/src/render/layout/rightSider/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <ParentLayout :has-sider="true" sider-placement="right">
+    <n-layout-content>
+      <slot name="default"></slot>
+    </n-layout-content>
+
+    <n-layout-sider
+      bordered
+      :collapsed="collapsed"
+      :collapsed-width="0"
+    >
+      <slot name="sider"></slot>
+    </n-layout-sider>
+  </ParentLayout>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NLayoutSider, NLayoutContent } from 'naive-ui'
+import { Layout as ParentLayout } from '@/layout/default'
+
+const collapsed = ref(true)
+</script>
diff --git a/src/render/layout/static/LeftSider.vue b/src/render/layout/static/LeftSider.vue
new file mode 100644
index 0000000..f70562f
--- /dev/null
+++ b/src/render/layout/static/LeftSider.vue
@@ -0,0 +1,16 @@
+<template>
+  <RootLayout has-sider>
+    <n-layout-sider v-bind="$attrs.siderAttrs">
+      <slot name="sider"></slot>
+    </n-layout-sider>
+
+    <n-layout-content v-bind="$attrs.contentAttrs">
+      <slot name="default"></slot>
+    </n-layout-content>
+  </RootLayout>
+</template>
+
+<script setup lang="ts">
+import { NLayoutSider, NLayoutContent } from 'naive-ui'
+import { default as RootLayout } from '@/layout/static/Root.vue'
+</script>
diff --git a/src/render/layout/static/Root.vue b/src/render/layout/static/Root.vue
new file mode 100644
index 0000000..32ec910
--- /dev/null
+++ b/src/render/layout/static/Root.vue
@@ -0,0 +1,9 @@
+<template>
+  <n-layout v-bind="$attrs">
+    <slot name="default"></slot>
+  </n-layout>
+</template>
+
+<script setup lang="ts">
+import { NLayout } from 'naive-ui'
+</script>
diff --git a/src/render/page/BD&time.html b/src/render/page/BD&time.html
new file mode 100644
index 0000000..bff3fbb
--- /dev/null
+++ b/src/render/page/BD&time.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>北斗与时间的关系学习软件</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="../bootstrapScript/BD&time.ts"></script>
+</body>
+</html>
diff --git a/src/render/page/BD-communication-assistant.html b/src/render/page/BD-communication-assistant.html
new file mode 100644
index 0000000..26d452e
--- /dev/null
+++ b/src/render/page/BD-communication-assistant.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>北斗通信助手教学软件</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="../bootstrapScript/BDCommunicationAssistant.ts"></script>
+</body>
+</html>
diff --git a/src/render/page/BD-comprehensive-experimental-platform.html b/src/render/page/BD-comprehensive-experimental-platform.html
new file mode 100644
index 0000000..2ecc5df
--- /dev/null
+++ b/src/render/page/BD-comprehensive-experimental-platform.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>北斗综合实验平台</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="../bootstrapScript/BDComprehensiveExperimentalPlatform.ts"></script>
+</body>
+</html>
diff --git a/src/render/page/BD-data-analysis-platform.html b/src/render/page/BD-data-analysis-platform.html
new file mode 100644
index 0000000..52b62c3
--- /dev/null
+++ b/src/render/page/BD-data-analysis-platform.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>北斗数据分析平台</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="../bootstrapScript/BDDataAnalysisPlatform.ts"></script>
+</body>
+</html>
diff --git a/src/render/page/BD-meteorological-data-display-platform.html b/src/render/page/BD-meteorological-data-display-platform.html
new file mode 100644
index 0000000..ad0c28e
--- /dev/null
+++ b/src/render/page/BD-meteorological-data-display-platform.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>北斗气象数据展示平台</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="../bootstrapScript/BDMeteorologicalDataDisplayPlatform.ts"></script>
+</body>
+</html>
diff --git a/src/render/page/BD-meteorological-data-protocol.html b/src/render/page/BD-meteorological-data-protocol.html
new file mode 100644
index 0000000..71c7a60
--- /dev/null
+++ b/src/render/page/BD-meteorological-data-protocol.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>北斗气象数据协议</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="../bootstrapScript/BDMeteorologicalDataProtocol.ts"></script>
+</body>
+</html>
diff --git a/src/render/page/BD-position-track-retracing.html b/src/render/page/BD-position-track-retracing.html
new file mode 100644
index 0000000..3b13b60
--- /dev/null
+++ b/src/render/page/BD-position-track-retracing.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>北斗位置轨迹回溯软件</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="../bootstrapScript/BDPositionTrackRetracing.ts"></script>
+</body>
+</html>
diff --git a/src/render/page/BD-satellite-3D-posture-display.html b/src/render/page/BD-satellite-3D-posture-display.html
new file mode 100644
index 0000000..4da3252
--- /dev/null
+++ b/src/render/page/BD-satellite-3D-posture-display.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>北斗卫星3D姿态展示软件</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="../bootstrapScript/BDSatellite3DPostureControl.ts"></script>
+</body>
+</html>
diff --git a/src/render/page/BD-satellite-attitude-control.html b/src/render/page/BD-satellite-attitude-control.html
new file mode 100644
index 0000000..3711582
--- /dev/null
+++ b/src/render/page/BD-satellite-attitude-control.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>北斗卫星姿态控制软件</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="../bootstrapScript/BDSatelliteAttitudeControl.ts"></script>
+</body>
+</html>
diff --git a/src/render/page/BD-satellite-parameter-monitoring-platform.html b/src/render/page/BD-satellite-parameter-monitoring-platform.html
new file mode 100644
index 0000000..615df98
--- /dev/null
+++ b/src/render/page/BD-satellite-parameter-monitoring-platform.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>北斗卫星参数监测平台</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="../bootstrapScript/BDSatelliteParameterMonitoringPlatform.ts"></script>
+</body>
+</html>
diff --git a/src/render/page/BD-satellite-time-configuration.html b/src/render/page/BD-satellite-time-configuration.html
new file mode 100644
index 0000000..cfcfed5
--- /dev/null
+++ b/src/render/page/BD-satellite-time-configuration.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>北斗卫星时间配置软件</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="../bootstrapScript/BDSatelliteTimeConfiguration.ts"></script>
+</body>
+</html>
diff --git a/src/render/page/clock-config.html b/src/render/page/clock-config.html
new file mode 100644
index 0000000..3e22117
--- /dev/null
+++ b/src/render/page/clock-config.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>时钟配置软件</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="../bootstrapScript/ClockConfig.ts"></script>
+</body>
+</html>
diff --git a/src/render/page/distance-calculation-tool.html b/src/render/page/distance-calculation-tool.html
new file mode 100644
index 0000000..72c988c
--- /dev/null
+++ b/src/render/page/distance-calculation-tool.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>距离计算工具软件</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="../bootstrapScript/distanceCalculationTool.ts"></script>
+</body>
+</html>
diff --git a/src/render/page/electronic-screen-design.html b/src/render/page/electronic-screen-design.html
new file mode 100644
index 0000000..1ee81c9
--- /dev/null
+++ b/src/render/page/electronic-screen-design.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>电子屏幕设计软件</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="../bootstrapScript/ElectronicScreenDesign.ts"></script>
+</body>
+</html>
diff --git a/src/render/page/font-design.html b/src/render/page/font-design.html
new file mode 100644
index 0000000..797ba95
--- /dev/null
+++ b/src/render/page/font-design.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>字体设计软件</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="../bootstrapScript/FontDesign.ts"></script>
+</body>
+</html>
diff --git a/src/render/page/generating-constellation-chart.html b/src/render/page/generating-constellation-chart.html
new file mode 100644
index 0000000..2c670f1
--- /dev/null
+++ b/src/render/page/generating-constellation-chart.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>生成星座图工具软件</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="../bootstrapScript/GeneratingConstellationChart.ts"></script>
+</body>
+</html>
diff --git a/src/render/page/gesture-recognition.html b/src/render/page/gesture-recognition.html
new file mode 100644
index 0000000..daf5047
--- /dev/null
+++ b/src/render/page/gesture-recognition.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>手势识别软件</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="../bootstrapScript/GestureRecognition.ts"></script>
+</body>
+</html>
diff --git a/src/render/page/index.html b/src/render/page/index.html
new file mode 100644
index 0000000..dad3002
--- /dev/null
+++ b/src/render/page/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>北斗启航实验平台软件</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="../bootstrapScript/index.ts"></script>
+</body>
+</html>
diff --git a/src/render/page/nixie-tube-configuration.html b/src/render/page/nixie-tube-configuration.html
new file mode 100644
index 0000000..ff1d922
--- /dev/null
+++ b/src/render/page/nixie-tube-configuration.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>数码管配置软件</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="../bootstrapScript/NixieTubeConfiguration.ts"></script>
+</body>
+</html>
diff --git a/src/render/page/voltage-monitoring.html b/src/render/page/voltage-monitoring.html
new file mode 100644
index 0000000..cd5ccbe
--- /dev/null
+++ b/src/render/page/voltage-monitoring.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>模块电压监控软件</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="../bootstrapScript/VoltageMonitoring.ts"></script>
+</body>
+</html>
diff --git a/src/render/page/wireless-communication-module-configuration.html b/src/render/page/wireless-communication-module-configuration.html
new file mode 100644
index 0000000..94223c0
--- /dev/null
+++ b/src/render/page/wireless-communication-module-configuration.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>无线通信模块配置软件</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="../bootstrapScript/WirelessCommunicationModuleConfiguration.ts"></script>
+</body>
+</html>
diff --git a/src/render/router/index/index.ts b/src/render/router/index/index.ts
new file mode 100644
index 0000000..ee0a97c
--- /dev/null
+++ b/src/render/router/index/index.ts
@@ -0,0 +1,34 @@
+import { App } from 'vue'
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
+
+const RootRoute: RouteRecordRaw = {
+  path: '/',
+  name: 'root',
+  redirect: '/category',
+  children: [{
+    path: '/category',
+    name: 'category',
+    component: () => import('@/views/index/router-view/category/index.vue'),
+  }, {
+    path: '/class/:class_id',
+    name: 'class',
+    component: () => import('@/views/index/router-view/class/index.vue'),
+  }, {
+    path: '/course/:course_id',
+    name: 'course',
+    component: () => import('@/views/index/router-view/course/index.vue'),
+  }, ]
+}
+
+export const routes: RouteRecordRaw[] = [RootRoute]
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+})
+
+export const setupRouter = (app: App) => {
+  app.use(router)
+}
+
+export default router
diff --git a/src/render/shims-vue.d.ts b/src/render/shims-vue.d.ts
new file mode 100644
index 0000000..ac1ded7
--- /dev/null
+++ b/src/render/shims-vue.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/src/render/stores/index.ts b/src/render/stores/index.ts
new file mode 100644
index 0000000..efaf6c9
--- /dev/null
+++ b/src/render/stores/index.ts
@@ -0,0 +1,10 @@
+import type { App } from 'vue';
+import { createPinia } from 'pinia';
+
+const store = createPinia();
+
+export function setupStore(app: App<Element>) {
+  app.use(store);
+}
+
+export { store };
diff --git a/src/render/stores/modules/network/index.ts b/src/render/stores/modules/network/index.ts
new file mode 100644
index 0000000..c10c7c7
--- /dev/null
+++ b/src/render/stores/modules/network/index.ts
@@ -0,0 +1,10 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useNetworkStore = defineStore('network', () => {
+  const isOnLine = ref(window.navigator.onLine)
+  window.addEventListener( 'online' , () => isOnLine.value = true  )
+  window.addEventListener( 'offline', () => isOnLine.value = false )
+
+  return { isOnLine }
+})
diff --git a/src/render/stores/nmea.ts b/src/render/stores/nmea.ts
new file mode 100644
index 0000000..ffcf7a2
--- /dev/null
+++ b/src/render/stores/nmea.ts
@@ -0,0 +1,127 @@
+import EventEmitter from 'events'
+import { defineStore } from 'pinia'
+import { parse, Helpers } from 'nmea'
+
+export class NMEADataSource extends EventEmitter {}
+
+
+const verify = (value: String) => {
+  if (!value) {
+    return false
+  }
+
+  const dollar_index = value.indexOf('$')
+  const star_index   = value.indexOf('*')
+  if (value.indexOf('$') !== 0 || star_index <= dollar_index) {
+    return false
+  }
+  
+  const [sentence, checksum, ] = value.split('*')
+  return Helpers.verifyChecksum(sentence, checksum)
+}
+
+export const useNMEAStore = defineStore('nmea', {
+  state: () => ({
+    GGA: null,
+    GLL: null,
+    GSA: {},
+    GSV: {},
+    RMC: null,
+    VTG: null,
+    ZDA: null,
+    TXT: null,
+    // ANT: null,
+    // DHV: null,
+    // LPS: null,
+    // UTC: null,
+    // GST: null,
+    // INS: null,
+    // TIM: null,
+    handled: false,
+  }),
+  getters: {
+    dateTime   () {
+      if (!this.RMC || !this.RMC.date || !this.RMC.timestamp) return
+
+      return Helpers.parseDateTime(this.RMC.date, this.RMC.timestamp)
+    },
+    longitude  () {
+      if (!this.RMC || !this.RMC.lon || !this.RMC.lonPole) return
+      
+      return Helpers.parseLongitude(this.RMC.lon, this.RMC.lonPole)
+    },
+    latitude   () {
+      if (!this.RMC || !this.RMC.lat || !this.RMC.latPole) return
+      
+      return Helpers.parseLatitude(this.RMC.lat, this.RMC.latPole)
+    },
+    altitude   () {
+      if (!this.GGA || !this.GGA.alt || !this.GGA.altUnit) return
+    
+      return Helpers.parseAltitude(this.GGA.alt, this.GGA.altUnit)
+    },
+    satellites () {
+      return (talker_id) => {
+        const gsa  = this.GSA[talker_id]
+        const gsvs = this.GSV[talker_id]
+
+        if (!gsa || !gsvs ) return
+
+        const satelliteArr = []
+
+        const active_satellites = gsa.satellites
+
+        gsvs.forEach(({ satellites }) => {
+          satellites.forEach(satellite => {
+            if (active_satellites.indexOf(parseInt(satellite.id)) < 0) {
+              satellite.active = false
+            } else {
+              satellite.active = true
+            }
+
+            satelliteArr.push(satellite)
+          })
+        })
+
+        return satelliteArr
+      }
+    },
+  },
+  actions: {
+    bindDataSource(source: NMEADataSource) {
+      source.on('open', () => this.$reset())
+
+      let result;
+      source.on('data', (data: String) => {
+        if (!verify(data)) return
+
+        result = parse(data)
+        if (!result) return
+        
+        // 监控第一条语句，并重置所有state
+        if (result.sentence === 'GGA') this.$reset()
+
+        switch (result.sentence) {
+          case 'GSA':
+            this.GSA[result.talker_id] = result
+            break;
+          case 'GSV':
+            if (!this.GSV[result.talker_id]) {
+              this.GSV[result.talker_id] = []
+            }
+
+            this.GSV[result.talker_id].push(result)
+            break;
+          default:
+            this.$state[result.sentence] = result
+            break;
+        }
+        
+        // 监听最后一条语句，并设置handled为true
+        if (result.sentence === 'TXT') {
+          this.handled = true
+        }
+      })
+    },
+  },
+})
diff --git a/src/render/stores/serialPort/data.ts b/src/render/stores/serialPort/data.ts
new file mode 100644
index 0000000..0914d14
--- /dev/null
+++ b/src/render/stores/serialPort/data.ts
@@ -0,0 +1,7 @@
+export const filters = [
+  { usbProductId: 8963 , usbVendorId: 1659  },  // 核心处理模块（micro-usb），蓝色无线通信模块
+  { usbProductId: 29986, usbVendorId: 6790  },  // 核心处理模块(type-c)，红色无线通信模块
+  { usbProductId: 29987, usbVendorId: 6790  },  // 核心处理模块(type-c)
+  { usbProductId: 2    , usbVendorId: 12346 },  // 黑色无线通信模块（typc-c,micro-usb）
+  { usbProductId: 21970, usbVendorId: 6790  },  // 星座图监控软件配套红盒子接收机
+]
diff --git a/src/render/stores/serialPort/index.ts b/src/render/stores/serialPort/index.ts
new file mode 100644
index 0000000..11cb799
--- /dev/null
+++ b/src/render/stores/serialPort/index.ts
@@ -0,0 +1,140 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import { filters } from './data'
+
+
+let keepReading = false
+let reader      = ref()
+let writer      = ref()
+
+const encoder   = new TextEncoder()
+
+// TODO: 处理串口的连接和断开连接事件
+// navigator.serial.addEventListener("connect", (event) => {
+//   // TODO: Automatically open event.target or warn user a port is available.
+// });
+
+// navigator.serial.addEventListener("disconnect", (event) => {
+//   // TODO: Remove |event.target| from the UI.
+//   // If the serial port was opened, a stream error would be observed as well.
+// });
+
+export const useSerialPortStore = defineStore('serialPort', {
+  state: () => ({
+    instance: null,
+  }),
+  getters: {
+    isOpen () {
+      return Boolean(this.instance && reader.value && writer.value)
+    },
+  },
+  actions: {
+    async select() {
+      if (!('serial' in navigator)) throw new Error('当前环境不支持串口功能')
+
+      this.instance = await navigator.serial.requestPort({ filters })
+    },
+    
+    async open(options) {
+      if ( !options ) throw new Error('缺少串口配置参数')
+
+      if ( !this.instance ) throw new Error('未选择串口设备')
+
+      if ( this.isOpen ) throw new Error('串口已打开')
+      
+      try {
+        await this.instance.open(options)
+      } catch (error) {
+        console.error(error)
+        throw new Error('串口被占用')
+      }
+
+      // Turn on Data Terminal Ready (DTR) signal.
+      await this.instance.setSignals({ dataTerminalReady: true });
+      // Turn off Request To Send (RTS) signal.
+      await this.instance.setSignals({ requestToSend: true });
+
+      writer.value = this.instance.writable.getWriter()
+      reader.value = this.instance.readable.getReader()
+      
+      eventListeners[SerialPortEventType.afterOpen]?.forEach((cb: Function) => cb(this))
+      
+      keepReading = true
+      // Listen to data coming from the serial device.
+      while (this.instance.readable && keepReading) {
+
+        try {
+          while (true) {
+            const { value, done } = await reader.value.read()
+    
+            if (done) {
+              // reader.cancel() has been called.
+              break
+            }
+            
+            if (value) {
+              // value is a Uint8Array.
+              eventListeners[SerialPortEventType.data]?.forEach((cb: Function) => cb(value))
+            }
+          }
+        } catch (error) {
+          console.error(error)
+          throw new Error('读取串口数据出错')
+        } finally {
+          // Allow the serial port to be closed later.
+          reader.value.releaseLock()
+          reader.value = null
+        }
+      }
+
+      await this.instance.close()
+    },
+
+    async close() {
+      writer.value.releaseLock()
+      writer.value = null
+
+      keepReading = false
+      reader.value.cancel()
+    },
+
+    async write ( data: Uint8Array | string ) {
+      if (!data) return
+
+      if (!writer.value) throw new Error('串口未打开')
+
+      if (typeof(data) == 'string') {
+        // TODO: 跟其他串口通信助手一起测试一下编解码的问题
+        data = encoder.encode(data)
+      }
+      
+      await writer.value.write(data);
+    },
+
+    addEventListener (eventName: string, callback: Function) {
+      if (!(eventName in eventListeners)) {
+        eventListeners[eventName] = []
+      }
+
+      eventListeners[eventName].push(callback)
+    },
+
+    removeEventListener (eventName: string, callback: Function) {
+      if (!(eventName in eventListeners)) return
+
+      const index = eventListeners[eventName].indexOf(callback)
+      if (index < 0) return
+
+      eventListeners[eventName].splice(index, 1)
+    },
+  },
+})
+
+const eventListeners = {}
+export enum SerialPortEventType {
+  beforeOpen,
+  afterOpen,
+  beforeClose,
+  afterClose,
+  data
+}
\ No newline at end of file
diff --git a/src/render/types/index.d.ts b/src/render/types/index.d.ts
new file mode 100644
index 0000000..c318218
--- /dev/null
+++ b/src/render/types/index.d.ts
@@ -0,0 +1,9 @@
+import { IpcRenderer } from 'electron'
+
+export {};
+
+declare global {
+  interface Window {
+    ipcRenderer: IpcRenderer;
+  }
+}
diff --git a/src/render/utils/index.ts b/src/render/utils/index.ts
new file mode 100644
index 0000000..b757c52
--- /dev/null
+++ b/src/render/utils/index.ts
@@ -0,0 +1 @@
+export const hasIpcRenderer = () => 'ipcRenderer' in window
diff --git a/src/render/utils/parser.ts b/src/render/utils/parser.ts
new file mode 100644
index 0000000..2ae12c2
--- /dev/null
+++ b/src/render/utils/parser.ts
@@ -0,0 +1,133 @@
+const NEW_LINE = '\r\n'
+
+
+export class LineBreakParser {
+  chunks: string | undefined
+
+  constructor() {
+    // A container for holding stream data until a new line.
+    this.chunks = ''
+  }
+
+  parse(chunk) {
+    // Append new chunks to existing chunks.
+    this.chunks += chunk;
+    // For each line breaks in chunks, send the parsed lines out.
+    const lines = this.chunks?.split(NEW_LINE)
+    this.chunks = lines?.pop()
+    return lines
+  }
+
+}
+
+/*
+export class LineBreakTransformer {
+  chunks: string | undefined
+
+  constructor() {
+    // A container for holding stream data until a new line.
+    this.chunks = ''
+  }
+
+  transform(chunk, controller) {
+    // Append new chunks to existing chunks.
+    this.chunks += chunk;
+    // For each line breaks in chunks, send the parsed lines out.
+    const lines = this.chunks.split(NEW_LINE);
+    this.chunks = lines.pop();
+    lines.forEach((line) => controller.enqueue(line + '\r\n'));
+  }
+
+  flush(controller) {
+    // When the stream is closed, flush any remaining chunks out.
+    controller.enqueue(this.chunks);
+  }
+}
+
+// TODO: 修复bug
+export class InterByteTimeoutTransformer {
+  maxBufferSize: number
+  currentPacket: number[]
+  chunks: string | undefined
+  interval: number
+  intervalID: NodeJS.Timeout | undefined
+
+  constructor({ maxBufferSize = 65536, interval }) {
+    if (!interval) {
+      throw new TypeError('"interval" is required')
+    }
+
+    if (typeof interval !== 'number' || Number.isNaN(interval)) {
+      throw new TypeError('"interval" is not a number')
+    }
+
+    if (interval < 1) {
+      throw new TypeError('"interval" is not greater than 0')
+    }
+
+    if (typeof maxBufferSize !== 'number' || Number.isNaN(maxBufferSize)) {
+      throw new TypeError('"maxBufferSize" is not a number')
+    }
+
+    if (maxBufferSize < 1) {
+      throw new TypeError('"maxBufferSize" is not greater than 0')
+    }
+
+    this.maxBufferSize = maxBufferSize
+    this.currentPacket = []
+    this.interval = interval
+    
+  }
+
+  transform(chunk, controller) {
+    if (this.intervalID) {
+      clearTimeout(this.intervalID)
+    }
+
+    this.pushChunk(chunk, controller)
+
+    // for (let offset = 0; offset < chunk.length; offset++) {
+    //   this.currentPacket.push(chunk[offset])
+    //   if (this.currentPacket.length >= this.maxBufferSize) {
+    //     this.emitPacket(controller)
+    //   }
+    // }
+
+    // this.intervalID = setTimeout(this.emitPacket.bind(this), this.interval)
+    this.intervalID = setTimeout(() => this.emitPacket(controller), this.interval)
+  }
+
+  pushChunk(chunk, controller) {
+    if (this.chunks?.length + chunk.length >= this.maxBufferSize) {
+      const offset = this.maxBufferSize - this.chunks?.length
+      this.chunks += chunk.substr(0, offset)
+      this.emitPacket(controller)
+
+      this.pushChunk(chunk.substr(offset), controller)
+    } else {
+      this.chunks += chunk
+    }
+  }
+
+  emitPacket(controller) {
+    if (this.intervalID) {
+      clearTimeout(this.intervalID)
+    }
+
+    if (this.chunks?.length > 0) {
+      controller.enqueue(this.chunks)
+      this.chunks = ''
+    }
+    
+    // if (this.currentPacket.length > 0) {
+    //   controller.enqueue(this.currentPacket.join(''))
+    //   this.chunks = ''
+    // }
+    this.currentPacket = []
+  }
+
+  flush(controller) {
+    this.emitPacket(controller)
+  }
+}
+*/
diff --git a/src/render/views/BD&time/ConversionView/data.ts b/src/render/views/BD&time/ConversionView/data.ts
new file mode 100644
index 0000000..4aaf1d3
--- /dev/null
+++ b/src/render/views/BD&time/ConversionView/data.ts
@@ -0,0 +1,11 @@
+export const labelStyle = {
+  fontSize  : '18px',
+  fontWeight: 'bold',
+  marginBottom: '24px',
+}
+
+export const timePickerProps = {
+  actions: null
+}
+
+export const max_timestamp = new Date().getTime()
diff --git a/src/render/views/BD&time/ConversionView/index.ts b/src/render/views/BD&time/ConversionView/index.ts
new file mode 100644
index 0000000..4b68ae6
--- /dev/null
+++ b/src/render/views/BD&time/ConversionView/index.ts
@@ -0,0 +1 @@
+export { default as ConversionView } from './index.vue'
diff --git a/src/render/views/BD&time/ConversionView/index.vue b/src/render/views/BD&time/ConversionView/index.vue
new file mode 100644
index 0000000..10f5510
--- /dev/null
+++ b/src/render/views/BD&time/ConversionView/index.vue
@@ -0,0 +1,83 @@
+<template>
+  <n-grid y-gap="24" :cols="2" class="conversion-view">
+    <n-gi>
+      <n-text type="info" class="zda-data-view">
+        {{ zda }}
+      </n-text>
+    </n-gi>
+    <n-gi>
+      <n-date-picker
+        panel
+        input-readonly
+        size="large"
+        type="datetime"
+        :time-picker-props="timePickerProps"
+        :actions="null"
+        v-model:value="date_picker_timestamp"
+        class="date-picker-view"
+      />
+    </n-gi>
+    <n-gi>
+      <n-button type="primary" size="large" @click="update_zda_timestamp">刷新ZDA</n-button>
+    </n-gi>
+    <n-gi>
+      <n-button type="primary" size="large" @click="verify_zda_timestamp">验　　证</n-button>
+    </n-gi>
+  </n-grid>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted } from 'vue'
+import { useNotification, NText, NDatePicker, NGi, NGrid, NButton } from 'naive-ui'
+import { timePickerProps, max_timestamp } from './data'
+
+import { encode } from 'nmea'
+
+
+const zda_timestamp = ref(0)
+const update_zda_timestamp = () => zda_timestamp.value = Math.trunc(Math.random() * max_timestamp / 1000) * 1000
+const zda = computed(() => {
+  const date = new Date(zda_timestamp.value)
+  
+  const msg = {
+    type: 'time-zone',  // TODO: 修改成通过ZDA获取type
+    date,
+  }
+
+  return encode('GN', msg)
+})
+
+const date_picker_timestamp = ref(null)
+const notification = useNotification()
+const verify_zda_timestamp = () => {
+  if (date_picker_timestamp.value === zda_timestamp.value) {
+    notification['success']({
+      content: '答案正确',
+      duration: 1000,
+      closable: false,
+    })
+  } else {
+    notification['error']({
+      content: '答案错误',
+      duration: 1000,
+      closable: false,
+    })
+  }
+}
+
+onMounted(update_zda_timestamp)
+</script>
+
+<style scoped lang="less">
+.conversion-view {
+  place-items: center;
+
+  .zda-data-view {
+    font-size: 28px;
+  }
+
+  .date-picker-view {
+    zoom: 1.5;
+  }
+}
+</style>
diff --git a/src/render/views/BD&time/TimingView/data.ts b/src/render/views/BD&time/TimingView/data.ts
new file mode 100644
index 0000000..b82f99d
--- /dev/null
+++ b/src/render/views/BD&time/TimingView/data.ts
@@ -0,0 +1 @@
+export const actions = ['now']
diff --git a/src/render/views/BD&time/TimingView/index.ts b/src/render/views/BD&time/TimingView/index.ts
new file mode 100644
index 0000000..038886b
--- /dev/null
+++ b/src/render/views/BD&time/TimingView/index.ts
@@ -0,0 +1 @@
+export { default as TimingView } from './index.vue'
diff --git a/src/render/views/BD&time/TimingView/index.vue b/src/render/views/BD&time/TimingView/index.vue
new file mode 100644
index 0000000..5c66757
--- /dev/null
+++ b/src/render/views/BD&time/TimingView/index.vue
@@ -0,0 +1,97 @@
+<template>
+  <n-grid y-gap="24" :cols="3">
+    <n-gi class="w-h-full">
+      <Clock title="北京时间" ref="BJ_clock"/>
+    </n-gi>
+    <n-gi>
+      <n-date-picker
+        panel
+        input-readonly
+        size="large"
+        type="datetime"
+        :actions="actions"
+        v-model:value="dateTime"
+        class="date-picker-view" />
+    </n-gi>
+    <n-gi class="w-h-full">
+      <Clock title="系统时间" ref="system_clock" />
+    </n-gi>
+    <n-gi>
+      <n-button :disabled="disabled"  size="large" type="primary" @click="onBDTimingBtnClick">授　　时</n-button>
+    </n-gi>
+    <n-gi>
+      <n-button :disabled="!dateTime" size="large" type="primary" @click="onDatePickerTimingBtnClick">授　　时</n-button>
+    </n-gi>
+  </n-grid>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, onMounted } from 'vue'
+import { NGi, NGrid, NDatePicker, NButton } from 'naive-ui'
+import { Clock } from '@/components/Charts'
+import { useSerialPortStore, SerialPortEventType } from '@/stores/serialPort'
+import { useNMEAStore, NMEADataSource } from '@/stores/nmea'
+import { actions } from './data'
+import { LineBreakParser } from '@/utils/parser'
+
+const nmea       = useNMEAStore()
+
+const dataSource = new NMEADataSource()
+nmea.bindDataSource(dataSource)
+const decoder    = new TextDecoder()
+const parser     = new LineBreakParser()
+const onSerialPortData = (data: Uint8Array) => {
+  const lineArr = parser.parse(decoder.decode(data))
+  lineArr.forEach(line => dataSource.emit('data', line))
+}
+
+const disabled  = ref(true)
+
+const BJ_clock  = ref(null)
+watch(() => nmea.handled, (value) => {
+  if (!value) return
+
+  const BJDateTime = nmea.dateTime
+  if (BJDateTime === undefined) {
+    disabled.value = true
+  } else {
+    disabled.value = false
+    BJ_clock.value.update(BJDateTime)
+  }
+})
+
+const system_clock = ref(null)
+let currentTimeStamp = (new Date()).valueOf()
+onMounted(() => {
+
+  setInterval(() => {
+    currentTimeStamp += 1000
+    system_clock.value.update(new Date(currentTimeStamp))
+  }, 1000)
+})
+
+const onBDTimingBtnClick = () => {
+  const date = BJ_clock.value.getDate()
+  
+  currentTimeStamp = date.valueOf()
+}
+
+
+const dateTime = ref(null)  // 值为时间戳
+const onDatePickerTimingBtnClick = () => {
+  currentTimeStamp = dateTime.value
+}
+
+const serialPort = useSerialPortStore()
+serialPort.addEventListener(SerialPortEventType.data, onSerialPortData)
+</script>
+
+<style scoped lang="less">
+.n-grid {
+  place-items: center;
+
+  .date-picker-view {
+    zoom: 1.5;
+  }
+} 
+</style>
diff --git a/src/render/views/BDComprehensiveExperimentalPlatform/MapView/disasterInfoView/data.ts b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/disasterInfoView/data.ts
new file mode 100644
index 0000000..601c1da
--- /dev/null
+++ b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/disasterInfoView/data.ts
@@ -0,0 +1,3 @@
+export const type   = 'disaster'
+// e.g.:@R,0000001,2023-03-31,9:00:00,A,40.236154,N,114.231546,E,0*
+export const regExp = /^@R,.*,.*,.*,[AV],.*,[NS]?,.*,[EW]?,[01]?\*$/
diff --git a/src/render/views/BDComprehensiveExperimentalPlatform/MapView/disasterInfoView/index.ts b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/disasterInfoView/index.ts
new file mode 100644
index 0000000..ee3d059
--- /dev/null
+++ b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/disasterInfoView/index.ts
@@ -0,0 +1,2 @@
+export { default as disasterInfoView } from './index.vue';
+export { regExp as disasterRegExp, type as disasterType} from './data';
diff --git a/src/render/views/BDComprehensiveExperimentalPlatform/MapView/disasterInfoView/index.vue b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/disasterInfoView/index.vue
new file mode 100644
index 0000000..7ad4ed7
--- /dev/null
+++ b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/disasterInfoView/index.vue
@@ -0,0 +1,68 @@
+<template>
+  <n-descriptions label-placement="left" :column="1" size="large">
+    <n-descriptions-item label="经　度">
+      {{ longitude }}
+    </n-descriptions-item>
+    <n-descriptions-item label="纬　度">
+      {{ latitude }}
+    </n-descriptions-item>
+    <n-descriptions-item label="日　期">
+      {{ date }}
+    </n-descriptions-item>
+    <n-descriptions-item label="时　间">
+      {{ time }}
+    </n-descriptions-item>
+  </n-descriptions>
+
+  <n-alert :title="title" :type="type" class="mt-2">
+    <template #icon>
+      <n-icon>
+        <Warning />
+      </n-icon>
+    </template>
+  </n-alert>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { WarningFilled as Warning } from '@vicons/material'
+import { NAlert, NIcon, NDescriptions, NDescriptionsItem } from 'naive-ui'
+
+const props = defineProps({
+  longitude: {
+    type: Number,
+    default: NaN,
+  },
+  latitude: {
+    type: Number,
+    default: NaN,
+  },
+  date: {
+    type: String,
+    default: '',
+  },
+  time: {
+    type: String,
+    default: '',
+  },
+  has_disaster: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const title = computed(() => {
+  if (props.has_disaster) {
+    return '灾害'
+  } else {
+    return '正常'
+  }
+})
+const type = computed(() => {
+  if (props.has_disaster) {
+    return 'error'
+  } else {
+    return 'success'
+  }
+})
+</script>
diff --git a/src/render/views/BDComprehensiveExperimentalPlatform/MapView/elevationInfoView/data.ts b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/elevationInfoView/data.ts
new file mode 100644
index 0000000..6482481
--- /dev/null
+++ b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/elevationInfoView/data.ts
@@ -0,0 +1,2 @@
+export const type   = 'elevation'
+export const regExp = /^@O,.*,.*,.*,[AV],.*,[NS]?,.*,[EW]?,.*\*$/
diff --git a/src/render/views/BDComprehensiveExperimentalPlatform/MapView/elevationInfoView/index.ts b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/elevationInfoView/index.ts
new file mode 100644
index 0000000..6d6badc
--- /dev/null
+++ b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/elevationInfoView/index.ts
@@ -0,0 +1,2 @@
+export { default as elevationInfoView } from './index.vue';
+export { regExp as elevationRegExp, type as elevationType } from './data';
diff --git a/src/render/views/BDComprehensiveExperimentalPlatform/MapView/elevationInfoView/index.vue b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/elevationInfoView/index.vue
new file mode 100644
index 0000000..15d8e31
--- /dev/null
+++ b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/elevationInfoView/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <n-descriptions label-placement="left" :column="1" size="large">
+    <n-descriptions-item label="经　度">
+      {{ longitude }}
+    </n-descriptions-item>
+    <n-descriptions-item label="纬　度">
+      {{ latitude }}
+    </n-descriptions-item>
+    <n-descriptions-item label="日　期">
+      {{ date }}
+    </n-descriptions-item>
+    <n-descriptions-item label="时　间">
+      {{ time }}
+    </n-descriptions-item>
+    <n-descriptions-item label="高　度">
+      {{ elevation }} m
+    </n-descriptions-item>
+  </n-descriptions>
+</template>
+
+<script lang="ts" setup>
+import { NDescriptions, NDescriptionsItem } from 'naive-ui'
+
+defineProps({
+  longitude: {
+    type: Number,
+    default: NaN,
+  },
+  latitude: {
+    type: Number,
+    default: NaN,
+  },
+  date: {
+    type: String,
+    default: '',
+  },
+  time: {
+    type: String,
+    default: '',
+  },
+  elevation: {
+    type: String,
+    default: '',
+  },
+})
+</script>
diff --git a/src/render/views/BDComprehensiveExperimentalPlatform/MapView/index.ts b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/index.ts
new file mode 100644
index 0000000..22bfefd
--- /dev/null
+++ b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/index.ts
@@ -0,0 +1 @@
+export { default as MapView } from './index.vue'
diff --git a/src/render/views/BDComprehensiveExperimentalPlatform/MapView/index.vue b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/index.vue
new file mode 100644
index 0000000..b6f31e4
--- /dev/null
+++ b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/index.vue
@@ -0,0 +1,114 @@
+<template>
+  <Map ref="mapRef" class="w-h-full">
+    <MapInfoWindow v-if="position" :position="position">
+      <weatherInfoView   :longitude="longitude" :latitude="latitude" :date="date" :time="time" :temperature="temperature" :humidity="humidity" :pressure="pressure" :pm25="pm25" v-if="dataType === weatherType" />
+      <disasterInfoView  :longitude="longitude" :latitude="latitude" :date="date" :time="time" :has_disaster="has_disaster" v-else-if="dataType === disasterType" />
+      <elevationInfoView :longitude="longitude" :latitude="latitude" :date="date" :time="time" :elevation="elevation" v-else-if="dataType === elevationType" />
+      <velocityInfoView  :longitude="longitude" :latitude="latitude" :date="date" :time="time" :velocity="velocity" v-else-if="dataType === velocityType" />
+    </MapInfoWindow>
+  </Map>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { Map, MapInfoWindow, lonlat2Position } from '@/components/Map'
+import { weatherInfoView  , weatherRegExp  , weatherType   } from './weatherInfoView'
+import { velocityInfoView , velocityRegExp , velocityType  } from './velocityInfoView'
+import { disasterInfoView , disasterRegExp , disasterType  } from './disasterInfoView'
+import { elevationInfoView, elevationRegExp, elevationType } from './elevationInfoView'
+
+import { useSerialPortStore, SerialPortEventType } from '@/stores/serialPort'
+import { LineBreakParser } from '@/utils/parser'
+
+const longitude = ref(NaN)
+const latitude  = ref(NaN)
+const date      = ref('')
+const time      = ref('')
+const position  = computed(() => {
+  if (!longitude.value || !latitude.value) return
+
+  return lonlat2Position(longitude.value, latitude.value)
+})
+
+const mapRef = ref()
+
+const dataType  = ref('')
+const handle    = data => {
+  // TODO: 添加协格式验证
+  if (data.length < 4) return
+  
+  const dataArray = data.substring(3, data.length - 1).split(',')
+  if (!dataArray[4] || !dataArray[6]) { return }
+
+  date.value      = dataArray[1]
+  time.value      = dataArray[2]
+  longitude.value = dataArray[7] === 'E' ? parseFloat(dataArray[6]) : -parseFloat(dataArray[6])
+  latitude.value  = dataArray[5] === 'N' ? parseFloat(dataArray[4]) : -parseFloat(dataArray[4])
+
+  if (weatherRegExp.test(data))   handleWeather(dataArray)
+
+  if (disasterRegExp.test(data))  handleDisaster(dataArray)
+
+  if (velocityRegExp.test(data))  handleVelocity(dataArray)
+
+  if (elevationRegExp.test(data)) handleElevation(dataArray)
+
+  mapRef.value.setZoomAndCenter(16, lonlat2Position(longitude.value, latitude.value))
+}
+const decoder    = new TextDecoder()
+const parser     = new LineBreakParser()
+const onSerialPortData = (data: Uint8Array) => {
+  const lineArr = parser.parse(decoder.decode(data))
+  lineArr.forEach(line => handle(line))
+}
+
+const temperature   = ref('')
+const humidity      = ref('')
+const pressure      = ref('')
+const pm25          = ref('')
+// 处理气象数据
+const handleWeather = dataArray => {
+  if (!dataArray) { return }
+  
+  dataType.value    = weatherType
+
+  temperature.value = dataArray[8]
+  humidity.value    = dataArray[9]
+  pressure.value    = dataArray[10]
+  pm25.value        = dataArray[11]
+}
+
+const has_disaster   = ref(false)
+// 处理灾难预警数据
+const handleDisaster = dataArray => {
+  if (!dataArray) { return }
+  
+  dataType.value     = disasterType
+
+  has_disaster.value = dataArray[8] === '1'
+}
+
+const velocity       = ref('')
+// 处理速度数据
+const handleVelocity = dataArray => {
+  if (!dataArray) { return }
+  
+  dataType.value = velocityType
+
+  velocity.value = dataArray[8]
+}
+
+const elevation       = ref('')
+// 处理高度数据
+const handleElevation = dataArray => {
+  if (!dataArray) { return }
+  
+  dataType.value = elevationType
+
+  elevation.value = JSON.parse(dataArray[8]).elevation
+}
+
+
+const serialPort = useSerialPortStore()
+serialPort.addEventListener(SerialPortEventType.data, onSerialPortData)
+</script>
\ No newline at end of file
diff --git a/src/render/views/BDComprehensiveExperimentalPlatform/MapView/velocityInfoView/data.ts b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/velocityInfoView/data.ts
new file mode 100644
index 0000000..b2ff658
--- /dev/null
+++ b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/velocityInfoView/data.ts
@@ -0,0 +1,2 @@
+export const type   = 'velocity'
+export const regExp = /^@V,.*,.*,.*,[AV],.*,[NS]?,.*,[EW]?,.*\*$/
diff --git a/src/render/views/BDComprehensiveExperimentalPlatform/MapView/velocityInfoView/index.ts b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/velocityInfoView/index.ts
new file mode 100644
index 0000000..3a46710
--- /dev/null
+++ b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/velocityInfoView/index.ts
@@ -0,0 +1,2 @@
+export { default as velocityInfoView } from './index.vue';
+export { regExp as velocityRegExp, type as velocityType } from './data';
diff --git a/src/render/views/BDComprehensiveExperimentalPlatform/MapView/velocityInfoView/index.vue b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/velocityInfoView/index.vue
new file mode 100644
index 0000000..5e6d9c9
--- /dev/null
+++ b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/velocityInfoView/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <n-descriptions label-placement="left" :column="1" size="large">
+    <n-descriptions-item label="经　度">
+      {{ longitude }}
+    </n-descriptions-item>
+    <n-descriptions-item label="纬　度">
+      {{ latitude }}
+    </n-descriptions-item>
+    <n-descriptions-item label="日　期">
+      {{ date }}
+    </n-descriptions-item>
+    <n-descriptions-item label="时　间">
+      {{ time }}
+    </n-descriptions-item>
+    <n-descriptions-item label="速　度">
+      {{ velocity }} m/s
+    </n-descriptions-item>
+  </n-descriptions>
+</template>
+
+<script lang="ts" setup>
+import { NDescriptions, NDescriptionsItem } from 'naive-ui'
+
+defineProps({
+  longitude: {
+    type: Number,
+    default: NaN,
+  },
+  latitude: {
+    type: Number,
+    default: NaN,
+  },
+  date: {
+    type: String,
+    default: '',
+  },
+  time: {
+    type: String,
+    default: '',
+  },
+  velocity: {
+    type: String,
+    default: '',
+  },
+})
+</script>
diff --git a/src/render/views/BDComprehensiveExperimentalPlatform/MapView/weatherInfoView/data.ts b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/weatherInfoView/data.ts
new file mode 100644
index 0000000..bb7d9a7
--- /dev/null
+++ b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/weatherInfoView/data.ts
@@ -0,0 +1,3 @@
+export const type   = 'weather'
+// e.g.:@W,0000001,2023-03-31,9:00:00,A,40.236154,N,114.231546,E,20,68,101,39*
+export const regExp = /^@W,.*,.*,.*,[AV],.*,[NS]?,.*,[EW]?,.*,.*,.*,.*\*$/
diff --git a/src/render/views/BDComprehensiveExperimentalPlatform/MapView/weatherInfoView/index.ts b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/weatherInfoView/index.ts
new file mode 100644
index 0000000..af1495d
--- /dev/null
+++ b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/weatherInfoView/index.ts
@@ -0,0 +1,2 @@
+export { default as weatherInfoView } from './index.vue';
+export { regExp as weatherRegExp, type as weatherType } from './data';
diff --git a/src/render/views/BDComprehensiveExperimentalPlatform/MapView/weatherInfoView/index.vue b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/weatherInfoView/index.vue
new file mode 100644
index 0000000..a3e8001
--- /dev/null
+++ b/src/render/views/BDComprehensiveExperimentalPlatform/MapView/weatherInfoView/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <n-descriptions label-placement="left" :column="1" size="large">
+    <n-descriptions-item label="经　度">
+      {{ longitude }}
+    </n-descriptions-item>
+    <n-descriptions-item label="纬　度">
+      {{ latitude }}
+    </n-descriptions-item>
+    <n-descriptions-item label="日　期">
+      {{ date }}
+    </n-descriptions-item>
+    <n-descriptions-item label="时　间">
+      {{ time }}
+    </n-descriptions-item>
+    <n-descriptions-item label="温　度">
+      {{ temperature }} ℃
+    </n-descriptions-item>
+    <n-descriptions-item label="湿　度">
+      {{ humidity }} %
+    </n-descriptions-item>
+    <n-descriptions-item label="气　压">
+      {{ pressure }} kPa
+    </n-descriptions-item>
+    <n-descriptions-item label="PM2.5">
+      {{ pm25 }} μg/m³
+    </n-descriptions-item>
+  </n-descriptions>
+</template>
+
+<script lang="ts" setup>
+import { NDescriptions, NDescriptionsItem } from 'naive-ui'
+defineProps({
+  longitude: {
+    type: Number,
+    default: NaN,
+  },
+  latitude: {
+    type: Number,
+    default: NaN,
+  },
+  date: {
+    type: String,
+    default: '',
+  },
+  time: {
+    type: String,
+    default: '',
+  },
+  temperature: {
+    type: String,
+    default: '',
+  },
+  humidity: {
+    type: String,
+    default: '',
+  },
+  pressure: {
+    type: String,
+    default: '',
+  },
+  pm25: {
+    type: String,
+    default: '',
+  },
+})
+</script>
diff --git a/src/render/views/BDDataAnalysisPlatform/BasicInfoView/index.ts b/src/render/views/BDDataAnalysisPlatform/BasicInfoView/index.ts
new file mode 100644
index 0000000..f06cd89
--- /dev/null
+++ b/src/render/views/BDDataAnalysisPlatform/BasicInfoView/index.ts
@@ -0,0 +1 @@
+export { default as BasicInfoView } from './index.vue';
diff --git a/src/render/views/BDDataAnalysisPlatform/BasicInfoView/index.vue b/src/render/views/BDDataAnalysisPlatform/BasicInfoView/index.vue
new file mode 100644
index 0000000..256006f
--- /dev/null
+++ b/src/render/views/BDDataAnalysisPlatform/BasicInfoView/index.vue
@@ -0,0 +1,50 @@
+<template>
+	<n-descriptions label-placement="left" :column="1">
+    <n-descriptions-item label="UTC时间">
+      <n-time v-if="dateTime" :time="dateTime" time-zone="UTC" />
+    </n-descriptions-item>
+    <n-descriptions-item label="北京时间">
+      <n-time v-if="dateTime" :time="dateTime" time-zone="Asia/Shanghai" />
+    </n-descriptions-item>
+    <n-descriptions-item label="经　　度">
+      {{ longitude }}
+    </n-descriptions-item>
+    <n-descriptions-item label="纬　　度">
+      {{ latitude }}
+    </n-descriptions-item>
+    <n-descriptions-item label="海　　拔">
+      {{ altitude }}
+    </n-descriptions-item>
+  </n-descriptions>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { NDescriptions, NDescriptionsItem, NTime } from 'naive-ui'
+import { useNMEAStore } from '@/stores/nmea'
+
+const dateTime  = ref()
+const longitude = ref()
+const latitude  = ref()
+const altitude  = ref()
+
+const nmea      = useNMEAStore()
+watch(() => nmea.handled, (value) => {
+  if (!value) return
+
+  dateTime.value  = nmea.dateTime
+  longitude.value = nmea.longitude
+  latitude.value  = nmea.latitude
+  altitude.value  = nmea.altitude
+})
+</script>
+
+<style scoped lang="less">
+.n-descriptions {
+  --n-font-size: 6vh !important;
+
+  :deep(.n-descriptions-separator) {
+    margin-right: 72px;
+  }
+}
+</style>
diff --git a/src/render/views/BDDataAnalysisPlatform/MapView.vue b/src/render/views/BDDataAnalysisPlatform/MapView.vue
new file mode 100644
index 0000000..7500372
--- /dev/null
+++ b/src/render/views/BDDataAnalysisPlatform/MapView.vue
@@ -0,0 +1,23 @@
+<template>
+  <Map ref="mapRef" class="w-h-full">
+    <MapMarker :position="position"/>
+  </Map>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { Map, MapMarker, lonlat2Position } from '@/components/Map'
+import { useNMEAStore } from '@/stores/nmea'
+
+const nmea     = useNMEAStore()
+const position = ref()
+
+const mapRef = ref()
+watch(() => nmea.handled, (value) => {
+  if (!value || !nmea.longitude || !nmea.latitude) return
+
+  position.value = lonlat2Position( nmea.longitude, nmea.latitude )
+
+  mapRef.value.setZoomAndCenter(16, position.value)
+})
+</script>
diff --git a/src/render/views/BDDataAnalysisPlatform/PlanisphereView/data.ts b/src/render/views/BDDataAnalysisPlatform/PlanisphereView/data.ts
new file mode 100644
index 0000000..84e6fef
--- /dev/null
+++ b/src/render/views/BDDataAnalysisPlatform/PlanisphereView/data.ts
@@ -0,0 +1,58 @@
+import { reactive } from "vue"
+
+export const active_color   = '#e5323e'
+export const unactive_color = '#9ca3af'
+
+export const option = reactive({
+  polar: {
+    radius: '85%'
+  },
+  angleAxis: {
+    min: 0,
+    max: 360,
+    interval: 45,
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      fontSize: 24,
+      formatter: function (value: number) {
+        switch (value)
+        {
+          case 0	 : return '北'
+          case 90	 : return '东'
+          case 180 : return '南'
+          case 270 : return '西'
+        }
+      },
+    }
+  },
+  radiusAxis: {
+    min: -90,
+    max: 0,
+    interval: 30,
+    axisLabel: {
+      rotate: -25,
+      showMinLabel: false,
+      showMaxLabel: false,
+      verticalAlign: 'bottom',
+      formatter: function(value: number){
+        return Math.abs(value)
+      },
+    }
+  },
+  series: [{
+    coordinateSystem: 'polar',
+    type: 'scatter',
+    symbolSize: 32,
+    label: {
+      show: true,
+      formatter: '{@[2]}'
+    },
+    itemStyle: {
+      color: ({ value }) => {
+				return value[3] ? active_color : unactive_color
+			}
+    },
+  }]
+})
\ No newline at end of file
diff --git a/src/render/views/BDDataAnalysisPlatform/PlanisphereView/index.ts b/src/render/views/BDDataAnalysisPlatform/PlanisphereView/index.ts
new file mode 100644
index 0000000..378ab3d
--- /dev/null
+++ b/src/render/views/BDDataAnalysisPlatform/PlanisphereView/index.ts
@@ -0,0 +1 @@
+export { default as PlanisphereView } from './index.vue';
diff --git a/src/render/views/BDDataAnalysisPlatform/PlanisphereView/index.vue b/src/render/views/BDDataAnalysisPlatform/PlanisphereView/index.vue
new file mode 100644
index 0000000..97b5526
--- /dev/null
+++ b/src/render/views/BDDataAnalysisPlatform/PlanisphereView/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="w-h-full">
+    <VChart :option="option" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { watch } from "vue"
+import { use } from "echarts/core"
+import { CanvasRenderer } from "echarts/renderers"
+import { ScatterChart } from "echarts/charts"
+import { PolarComponent } from "echarts/components"
+import VChart from "vue-echarts"
+
+import { useNMEAStore } from "@/stores/nmea"
+import { option } from './data'
+
+// TODO: 调研是否需要以及如何释放echart对象
+use([
+  CanvasRenderer,
+  ScatterChart,
+  PolarComponent
+])
+
+const nmea = useNMEAStore()
+watch(() => nmea.handled, (value) => {
+  if (!value) return
+  
+  const satellites = nmea.satellites('BD')
+  if (!satellites) return
+  
+  const data       = satellites.map(({ id, elevationDeg, azimuthTrue, active }) => {
+    return [parseInt(elevationDeg) * -1, azimuthTrue, id, active]
+  })
+  
+  option.series[0].data = data
+})
+</script>
diff --git a/src/render/views/BDDataAnalysisPlatform/SNRView/data.ts b/src/render/views/BDDataAnalysisPlatform/SNRView/data.ts
new file mode 100644
index 0000000..21dbcde
--- /dev/null
+++ b/src/render/views/BDDataAnalysisPlatform/SNRView/data.ts
@@ -0,0 +1,45 @@
+import { reactive } from "vue"
+import { graphic } from "echarts/core"
+
+const active_color   = new graphic.LinearGradient(
+	0, 1, 0, 0,
+	[
+		{offset: 0.3, color: '#83bff6'},
+		{offset: 1,   color: '#188df0'}
+	]
+)
+const unactive_color = '#9ca3af'
+
+export const option = reactive({
+  grid: {
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    axisTick: { show: false },
+    axisLine: { show: false },
+    axisLabel: { color: 'black' }
+  },
+  yAxis: {
+    max: 60,
+    axisLabel: {
+      fontSize: 24
+    }
+  },
+  series: [{
+    type: 'bar',
+    barMaxWidth: '50%',
+    label: {
+      show: true,
+      position: 'top',
+      formatter: function ({ value }) {
+        return !value || value[1] === 0 ? '' : value[1]
+      }
+    },
+    itemStyle: {
+      color: ({ value }) => {
+        return value[2] ? active_color : unactive_color
+      }
+    }
+  }]
+})
\ No newline at end of file
diff --git a/src/render/views/BDDataAnalysisPlatform/SNRView/index.ts b/src/render/views/BDDataAnalysisPlatform/SNRView/index.ts
new file mode 100644
index 0000000..11b2b8d
--- /dev/null
+++ b/src/render/views/BDDataAnalysisPlatform/SNRView/index.ts
@@ -0,0 +1 @@
+export { default as SNRView } from './index.vue';
diff --git a/src/render/views/BDDataAnalysisPlatform/SNRView/index.vue b/src/render/views/BDDataAnalysisPlatform/SNRView/index.vue
new file mode 100644
index 0000000..ec1be81
--- /dev/null
+++ b/src/render/views/BDDataAnalysisPlatform/SNRView/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="w-h-full">
+    <v-chart :option="option" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { watch } from "vue"
+import { use } from "echarts/core"
+import { CanvasRenderer } from "echarts/renderers"
+import { BarChart } from "echarts/charts"
+import { GridComponent } from "echarts/components"
+import VChart from "vue-echarts"
+
+import { useNMEAStore } from "@/stores/nmea"
+
+import { option } from './data'
+
+
+use([
+  CanvasRenderer,
+  BarChart,
+  GridComponent
+])
+
+const nmea = useNMEAStore()
+watch(() => nmea.handled, (value) => {
+  if (!value) return
+  
+  const xAxisData  = []
+  const seriesData = []
+
+  const satellites = nmea.satellites('BD')
+  if (!satellites) return
+  
+  satellites.forEach(({ id, SNRdB, active }) => {
+    xAxisData.push(id)
+    seriesData.push([id, SNRdB, active])
+  })
+  
+  option.xAxis.data     = xAxisData
+  option.series[0].data = seriesData
+})
+</script>
diff --git a/src/render/views/BDMeteorologicalDataDisplayPlatform/MapView/MeteorologicalDataView.vue b/src/render/views/BDMeteorologicalDataDisplayPlatform/MapView/MeteorologicalDataView.vue
new file mode 100644
index 0000000..438db42
--- /dev/null
+++ b/src/render/views/BDMeteorologicalDataDisplayPlatform/MapView/MeteorologicalDataView.vue
@@ -0,0 +1,53 @@
+<template>
+  <n-h2>小小气象站</n-h2>
+  <n-descriptions label-placement="left" :column="1" size="large">
+    <n-descriptions-item label="日　期">
+      {{ date }}
+    </n-descriptions-item>
+    <n-descriptions-item label="时　间">
+      {{ time }}
+    </n-descriptions-item>
+    <n-descriptions-item label="温　度">
+      {{ temperature }} ℃
+    </n-descriptions-item>
+    <n-descriptions-item label="湿　度">
+      {{ humidity }} %
+    </n-descriptions-item>
+    <n-descriptions-item label="气　压">
+      {{ pressure }} kPa
+    </n-descriptions-item>
+    <n-descriptions-item label="PM2.5">
+      {{ pm25 }} μg/m³
+    </n-descriptions-item>
+  </n-descriptions>
+</template>
+
+<script lang="ts" setup>
+import { NH2, NDescriptions, NDescriptionsItem } from 'naive-ui'
+defineProps({
+  date: {
+    type: String,
+    default: '',
+  },
+  time: {
+    type: String,
+    default: '',
+  },
+  temperature: {
+    type: String,
+    default: '',
+  },
+  humidity: {
+    type: String,
+    default: '',
+  },
+  pressure: {
+    type: String,
+    default: '',
+  },
+  pm25: {
+    type: String,
+    default: '',
+  },
+})
+</script>
diff --git a/src/render/views/BDMeteorologicalDataDisplayPlatform/MapView/index.ts b/src/render/views/BDMeteorologicalDataDisplayPlatform/MapView/index.ts
new file mode 100644
index 0000000..22bfefd
--- /dev/null
+++ b/src/render/views/BDMeteorologicalDataDisplayPlatform/MapView/index.ts
@@ -0,0 +1 @@
+export { default as MapView } from './index.vue'
diff --git a/src/render/views/BDMeteorologicalDataDisplayPlatform/MapView/index.vue b/src/render/views/BDMeteorologicalDataDisplayPlatform/MapView/index.vue
new file mode 100644
index 0000000..b676d02
--- /dev/null
+++ b/src/render/views/BDMeteorologicalDataDisplayPlatform/MapView/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <Map ref="mapRef" class="w-h-full">
+    <MapInfoWindow v-if="position" :position="position">
+      <MeteorologicalDataView :date="date" :time="time" :temperature="temperature" :humidity="humidity" :pressure="pressure" :pm25="pm25" />
+    </MapInfoWindow>
+  </Map>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { Map, MapInfoWindow, lonlat2Position } from '@/components/Map'
+import MeteorologicalDataView from './MeteorologicalDataView.vue'
+import { useSerialPortStore, SerialPortEventType } from '@/stores/serialPort'
+import { LineBreakParser } from '@/utils/parser'
+
+const longitude   = ref(NaN)
+const latitude    = ref(NaN)
+const date        = ref('')
+const time        = ref('')
+const temperature = ref('')
+const humidity    = ref('')
+const pressure    = ref('')
+const pm25        = ref('')
+const position    = computed(() => {
+  if (!longitude.value || !latitude.value) return
+
+  return lonlat2Position(longitude.value, latitude.value)
+})
+
+
+// TODO: 已使用综合展示平台中的气象数据协议替代，后续将协议处理的代码重构
+const mapRef = ref()
+const handle = data => {
+  const startMarkIndex    = data.indexOf('@')
+  const checksumMarkIndex = data.indexOf('*')
+  if (startMarkIndex < 0 || checksumMarkIndex < startMarkIndex) return
+
+  const info    = data.substring(startMarkIndex + 3, checksumMarkIndex)
+  const infoArr = info.split(',')
+  if (infoArr[3] != 'A') return
+
+  date.value        = infoArr[1]
+  time.value        = infoArr[2]
+  longitude.value   = infoArr[7] === 'E' ? parseFloat(infoArr[6]) : -parseFloat(infoArr[6])
+  latitude.value    = infoArr[5] === 'N' ? parseFloat(infoArr[4]) : -parseFloat(infoArr[4])
+  temperature.value = infoArr[8]
+  humidity.value    = infoArr[9]
+  pressure.value    = infoArr[10]
+  pm25.value        = infoArr[11]
+
+  mapRef.value.setZoomAndCenter(16, lonlat2Position(longitude.value, latitude.value))
+}
+
+const decoder    = new TextDecoder()
+const parser     = new LineBreakParser()
+const onSerialPortData = (data: Uint8Array) => {
+  const lineArr = parser.parse(decoder.decode(data))
+  lineArr.forEach(line => handle(line))
+}
+
+const serialPort = useSerialPortStore()
+serialPort.addEventListener(SerialPortEventType.data, onSerialPortData)
+</script>
\ No newline at end of file
diff --git a/src/render/views/BDMeteorologicalDataProtocol/CorrectAnswerView.vue b/src/render/views/BDMeteorologicalDataProtocol/CorrectAnswerView.vue
new file mode 100644
index 0000000..c098ec5
--- /dev/null
+++ b/src/render/views/BDMeteorologicalDataProtocol/CorrectAnswerView.vue
@@ -0,0 +1,85 @@
+<template>
+  <n-space :item-style="itemStyle" class="verification-result-view">
+    <n-card title="时间数据">
+      <n-descriptions label-placement="top" :column="1">
+        <n-descriptions-item label="日　期:">
+          {{ data.date }}
+        </n-descriptions-item>
+        <n-descriptions-item label="时　间:">
+          {{ data.time }}
+        </n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+    <n-card title="位置数据">
+      <n-descriptions :column="1">
+        <n-descriptions-item label="经　度:">
+          {{ data.lon ? data.lon + '° ' + data.uLon : '' }}
+        </n-descriptions-item>
+        <n-descriptions-item label="纬　度:">
+          {{ data.lat ? data.lat + '° ' + data.uLat : '' }}
+        </n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+    <n-card title="气象数据">
+      <n-descriptions label-placement="left" :column="1">
+        <n-descriptions-item label="温　度">
+          {{ data.tem ? data.tem + ' ℃' : '' }}
+        </n-descriptions-item>
+        <n-descriptions-item label="湿　度">
+          {{ data.hum ? data.hum + ' %' : '' }}
+        </n-descriptions-item>
+        <n-descriptions-item label="气　压">
+          {{ data.kPa ? data.kPa + ' KPa' : '' }}
+        </n-descriptions-item>
+        <n-descriptions-item label="PM2.5">
+          {{ data.pm25 ? data.pm25 + ' μg/m³°' : '' }}
+        </n-descriptions-item>
+      </n-descriptions>
+    </n-card>
+  </n-space>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { NSpace, NCard, NDescriptions, NDescriptionsItem } from 'naive-ui'
+
+const data = ref({
+  date: undefined,
+  time: undefined,
+  lon : undefined,
+  uLon: undefined,
+  lat : undefined,
+  uLat: undefined,
+  tem : undefined,
+  hum : undefined,
+  kPa : undefined,
+  pm25: undefined,
+})
+
+const showAnswer  = answer => {
+  if (!answer) return
+
+  Object.keys(answer).forEach( key => {
+    data.value[key] = answer[key]
+  })
+}
+const clearAnswer = () => {
+  Object.keys(data.value).forEach( key => {
+    data.value[key] = undefined
+  })
+  
+}
+
+defineExpose({ showAnswer, clearAnswer })
+
+const itemStyle = {
+  flex: '1 1 30%',
+}
+</script>
+
+<style lang="less" scoped>
+.verification-result-view {
+  .n-card {
+    height: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/render/views/BDMeteorologicalDataProtocol/DataFormView/data.ts b/src/render/views/BDMeteorologicalDataProtocol/DataFormView/data.ts
new file mode 100644
index 0000000..b1701b8
--- /dev/null
+++ b/src/render/views/BDMeteorologicalDataProtocol/DataFormView/data.ts
@@ -0,0 +1,7 @@
+export const itemStyle = {
+  flex: '1 1 30%',
+}
+
+export const timePickerProps = {
+  actions: null
+}
diff --git a/src/render/views/BDMeteorologicalDataProtocol/DataFormView/index.ts b/src/render/views/BDMeteorologicalDataProtocol/DataFormView/index.ts
new file mode 100644
index 0000000..3044866
--- /dev/null
+++ b/src/render/views/BDMeteorologicalDataProtocol/DataFormView/index.ts
@@ -0,0 +1 @@
+export { default as DataFormView } from './index.vue'
diff --git a/src/render/views/BDMeteorologicalDataProtocol/DataFormView/index.vue b/src/render/views/BDMeteorologicalDataProtocol/DataFormView/index.vue
new file mode 100644
index 0000000..58d8995
--- /dev/null
+++ b/src/render/views/BDMeteorologicalDataProtocol/DataFormView/index.vue
@@ -0,0 +1,307 @@
+<template>
+  <n-form
+    ref="formRef"
+    :model="modelRef"
+    :rules="rules"
+    class="data-form-view">
+    <n-space :item-style="itemStyle">
+      <n-card title="时间数据">
+        <n-form-item path="date_picker_timestamp">
+          <n-date-picker
+            panel
+            input-readonly
+            size="large"
+            type="datetime"
+            :time-picker-props="timePickerProps"
+            :actions="null"
+            v-model:value="modelRef.date_picker_timestamp"
+            class="mx-auto"
+          />
+        </n-form-item>
+      </n-card>
+
+      <n-card title="位置数据">
+        <n-space justify="space-around" vertical class="h-full">
+          <n-form-item :show-feedback="false" label="经度：" path="ulon">
+            <n-radio-group v-model:value="modelRef.uLon">
+              <n-space>
+                <n-radio label="东" value="E" />
+                <n-radio label="西" value="W" />
+              </n-space>
+            </n-radio-group>
+          </n-form-item>
+
+          <n-form-item :show-label="false" path="lon">
+            <n-input-number :show-button="false"
+              v-model:value="modelRef.lon"
+              :min="0"
+              :max="180"
+            >
+              <template #suffix>
+                °
+              </template>
+            </n-input-number>
+          </n-form-item>
+
+          <n-divider />
+
+          <n-form-item :show-feedback="false" label="纬度：" path="uLat">
+            <n-radio-group v-model:value="modelRef.uLat">
+              <n-space>
+                <n-radio label="北" value="N" />
+                <n-radio label="南" value="S" />
+              </n-space>
+            </n-radio-group>
+          </n-form-item>
+
+          <n-form-item :show-label="false" path="lat">
+            <n-input-number :show-button="false"
+              v-model:value="modelRef.lat"
+              :min="0"
+              :max="90"
+            >
+              <template #suffix>
+                °
+              </template>
+            </n-input-number>
+          </n-form-item>
+        </n-space>
+      </n-card>
+
+      <n-card title="气象数据">
+        <n-space justify="space-around" vertical class="h-full">
+          <n-form-item label="温度：" path="tem">
+            <n-input-number :show-button="false"
+              v-model:value="modelRef.tem"
+              :precision="2"
+              :min="-273.15"
+            >
+              <template #suffix>
+                ℃
+              </template>
+            </n-input-number>
+          </n-form-item>
+          <n-form-item label="湿度：" path="hum">
+            <n-input-number :show-button="false"
+              v-model:value="modelRef.hum"
+              :precision="0"
+              :min="0"
+              :max="100"
+            >
+              <template #suffix>
+                %
+              </template>
+            </n-input-number>
+          </n-form-item>
+          <n-form-item label="气压：" path="kPa">
+            <n-input-number :show-button="false"
+              v-model:value="modelRef.kPa"
+              :precision="2"
+              :min="0"
+            >
+              <template #suffix>
+                KPa
+              </template>
+            </n-input-number>
+          </n-form-item>
+          <n-form-item label="PM2.5：" path="pm25">
+            <n-input-number :show-button="false"
+              v-model:value="modelRef.pm25"
+              :precision="0"
+              :min="0"
+            >
+              <template #suffix>
+                μg/m³
+              </template>
+            </n-input-number>
+          </n-form-item>
+        </n-space>
+      </n-card>
+    </n-space>
+
+    <div class="text-center">
+      <n-button type="primary" size="large" @click="onValidateButtonClick">验证结果</n-button>
+    </div>
+  </n-form>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { NForm, NSpace, NCard, NDatePicker, NButton, NFormItem, NRadio, NRadioGroup, NInputNumber, NDivider, useMessage } from 'naive-ui'
+import type {FormRules, FormItemRule, FormInst } from 'naive-ui'
+import { itemStyle, timePickerProps } from './data'
+
+const emit = defineEmits( ['submit'] )
+
+const message  = useMessage()
+
+const modelRef = ref({
+  date_picker_timestamp: undefined,
+  date  : undefined,
+  time  : undefined,
+  status: 'A',
+  lat   : undefined,
+  uLat  : 'N',
+  lon   : undefined,
+  uLon  : 'E',
+  tem   : undefined,
+  hum   : undefined,
+  kPa   : undefined,
+  pm25  : undefined,
+})
+
+const rules: FormRules = {
+  date_picker_timestamp: [
+    {
+      required: true,
+      validator (_: FormItemRule, value: string) {
+        if (!value) {
+          return new Error('请选择日期和时间')
+        }
+        return true
+      }
+    }
+  ],
+  lat: [
+    {
+      required: true,
+      validator (_: FormItemRule, value: string) {
+        if (!value) {
+          return new Error('请输入纬度')
+        }
+        return true
+      }
+    }
+  ],
+  uLat: [
+    {
+      required: true,
+    }
+  ],
+  lon: [
+    {
+      required: true,
+      validator (_: FormItemRule, value: string) {
+        if (!value) {
+          return new Error('请输入经度')
+        }
+        return true
+      }
+    }
+  ],
+  uLon: [
+    {
+      required: true,
+    }
+  ],
+  tem: [
+    {
+      required: true,
+      validator (_: FormItemRule, value: string) {
+        if (!value) {
+          return new Error('请输入温度')
+        }
+        return true
+      }
+    }
+  ],
+  hum: [
+    {
+      required: true,
+      validator (_: FormItemRule, value: string) {
+        if (!value) {
+          return new Error('请输入湿度')
+        }
+        return true
+      }
+    }
+  ],
+  kPa: [
+    {
+      required: true,
+      validator (_: FormItemRule, value: string) {
+        if (!value) {
+          return new Error('请输入气压')
+        }
+        return true
+      }
+    }
+  ],
+  pm25: [
+    {
+      required: true,
+      validator (_: FormItemRule, value: string) {
+        if (!value) {
+          return new Error('请输入PM2.5')
+        }
+        return true
+      }
+    }
+  ],
+}
+
+const formRef = ref<FormInst | null>(null)
+const onValidateButtonClick = (e: MouseEvent) => {
+  e.preventDefault()
+  
+  formRef.value?.validate((errors) => {
+    if (errors) {
+      return
+    }
+
+    const dateTime = new Date(modelRef.value.date_picker_timestamp)
+
+    modelRef.value.date = dateTime.toLocaleDateString().replace(/\//g, '-')
+    modelRef.value.time = dateTime.toLocaleTimeString()
+
+    emit('submit')
+    checkAnswer()
+  })
+}
+
+let originalData
+const setOriginalData = data => {
+  if (!data) return
+
+  originalData = data
+}
+
+const checkAnswer = () => {
+  if (!originalData) throw new Error('原始数据未获得');
+  
+  let correct = true
+  for (const key in originalData) {
+    if (Object.prototype.hasOwnProperty.call(originalData, key)) {
+      if (originalData[key] != modelRef.value[key]) {
+        correct = false
+        break
+      }
+    }
+  }
+
+  if (correct) {
+    message.success('答案正确')
+  } else {
+    message.error('答案错误')
+  }
+}
+
+
+defineExpose({ setOriginalData })
+</script>
+
+
+<style scoped lang="less">
+.data-form-view {
+  .n-space{
+    .n-card {
+      height: 100%;
+    }
+  }
+
+  >div {
+    .n-button {
+      margin-top: 8px;
+    }
+  }
+}
+</style>
diff --git a/src/render/views/BDMeteorologicalDataProtocol/DataProtocolView.vue b/src/render/views/BDMeteorologicalDataProtocol/DataProtocolView.vue
new file mode 100644
index 0000000..3a7130e
--- /dev/null
+++ b/src/render/views/BDMeteorologicalDataProtocol/DataProtocolView.vue
@@ -0,0 +1,55 @@
+<template>
+  <n-space justify="space-between" align="center">
+    <n-text>数据协议：</n-text>
+    <n-text>{{ protocol }}</n-text>
+    <n-button secondary type="primary" size="large" @click="refresh">刷  新</n-button>
+  </n-space>
+</template>
+<script lang="ts" setup>
+import { ref, computed, onMounted } from 'vue'
+import { NSpace, NText, NButton } from 'naive-ui'
+
+const emit = defineEmits([ 'refresh' ])
+
+const data = ref({
+  date  : '',
+  time  : '',
+  status: 'A',
+  lat   : NaN,
+  uLat  : 'N',
+  lon   : NaN,
+  uLon  : 'E',
+  tem   : NaN,
+  hum   : NaN,
+  kPa   : NaN,
+  pm25  : NaN,
+})
+
+const protocol = computed(() => `@WEATHER,${data.value.date},${data.value.time},${data.value.status},${data.value.lat},${data.value.uLat},${data.value.lon},${data.value.uLon},${data.value.tem},${data.value.hum},${data.value.kPa},${data.value.pm25}*`)
+
+const refresh = () => {
+  const dateTime = new Date(Math.random() * Date.now())
+  
+  data.value.date = dateTime.toLocaleDateString().replace(/\//g, '-')
+  data.value.time = dateTime.toLocaleTimeString()
+
+  data.value.lat  = parseFloat((Math.random() * 90).toFixed(6))
+  data.value.lon  = parseFloat((Math.random() * 180).toFixed(6))
+
+  
+  data.value.tem  = parseFloat((Math.random() * 40).toFixed(2))
+  data.value.hum  = parseFloat((Math.random() * 100).toFixed(0))
+  data.value.kPa  = parseFloat((Math.random() * 2 + 100).toFixed(2))
+  data.value.pm25 = parseFloat((Math.random() * 500).toFixed(0))
+
+  emit('refresh', data.value)
+}
+
+onMounted(refresh)
+</script>
+
+<style lang="less" scoped>
+.n-text {
+  font-size: 18px;
+}
+</style>
\ No newline at end of file
diff --git a/src/render/views/BDPositionTrackRetracing/InteractionView.vue b/src/render/views/BDPositionTrackRetracing/InteractionView.vue
new file mode 100644
index 0000000..cb3baed
--- /dev/null
+++ b/src/render/views/BDPositionTrackRetracing/InteractionView.vue
@@ -0,0 +1,49 @@
+<template>
+  <n-space justify="space-between" class="interaction-view">
+    <n-space>
+      <n-button type="primary" size="large" @click="readBtnClick" > 读取轨迹数据 </n-button>
+      <n-button type="success" size="large" @click="playBtnClick" > 播放轨迹动画 </n-button>
+      <n-button type="error"   size="large" @click="clearBtnClick"> 清除轨迹数据 </n-button>
+    </n-space>
+
+    <n-space align="center">
+      <n-text>删除前</n-text>
+      <n-input-number placeholder="请输入删除点的数量" min="1" v-model:value="delPointCount" :show-button="false" />
+      <n-text>个点</n-text>
+      <n-button type="warning" size="large" @click="deleteBtnClick">删除</n-button>
+    </n-space>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NSpace, NButton, NInputNumber, NText, useMessage } from 'naive-ui'
+
+const emit = defineEmits(['read', 'play', 'clear', 'delete'])
+
+const message = useMessage()
+
+const playBtnClick   = () => emit('play')
+const readBtnClick   = () => emit('read')
+const clearBtnClick  = () => emit('clear')
+
+const delPointCount  = ref()
+const deleteBtnClick = () => {
+  if (!delPointCount.value) {
+    message.error('请输入删除点的数量')
+    return
+  }
+
+  emit('delete', delPointCount.value)
+}
+</script>
+
+<style scoped lang="less">
+.interaction-view {
+  margin: 10px 20px;
+
+  .n-text {
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/render/views/BDPositionTrackRetracing/MapView.vue b/src/render/views/BDPositionTrackRetracing/MapView.vue
new file mode 100644
index 0000000..27bd219
--- /dev/null
+++ b/src/render/views/BDPositionTrackRetracing/MapView.vue
@@ -0,0 +1,77 @@
+<template>
+  <Map ref="mapRef" :dragEnable="false" :animateEnable="false">
+    <el-amap-loca @init="initLoca" />   <!-- 高德地图数据可视化库，不可用于其他地图开发框架 -->
+    <MapMarker :position="position" />
+    <MapPolyline :path="path" />
+  </Map>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { Map, MapMarker, MapPolyline } from '@/components/Map'
+
+const props = defineProps({
+  path: Array<Array<Number>>
+})
+
+let mapInstance = null         // 地图对象实例
+let viewControl = null         // 镜头控制器
+let finished    = true         // 轨迹回放动画是否结束
+
+const initLoca  = loca => {
+  mapInstance   = loca.map
+  viewControl   = loca.viewControl
+  loca.animate.start();
+}
+
+const mapRef = ref()
+watch(
+  () => props.path,
+  (value) => {
+    reset()
+
+    if (value && value.length > 0) {
+      mapRef.value.setZoomAndCenter(16, value[0])
+    }
+  },
+  { deep: true }
+)
+
+const position = ref()
+const reset    = () => {
+  viewControl?.clearAnimates()
+  finished       = true
+  position.value = null
+}
+
+const run      = () => {
+  if (!finished) position.value = mapInstance?.getCenter().toArray()
+  
+  requestAnimationFrame(run)
+}
+run()
+
+const play    = () => {
+  if (!props.path || props.path.length === 0) return
+
+  playTrackAnimate()
+}
+
+const timing           = [[0, 0.3], [1, 0.7]]
+const rotationSpeed    = 10
+const duration         = 50000
+const playTrackAnimate = () => {
+  finished = false
+  
+  viewControl?.addTrackAnimate({
+    path: props.path,       // 镜头轨迹，二维数组，支持海拔
+    duration,               // 时长
+    timing,                 // 速率控制器
+    rotationSpeed,          // 每秒旋转多少度
+  },
+  () => finished = true     // 动画节后后的回到函数
+)}
+
+
+defineExpose({ play })
+</script>
\ No newline at end of file
diff --git a/src/render/views/BDSatellite3DPostureControl/SatelliteModelView/index copy.vue b/src/render/views/BDSatellite3DPostureControl/SatelliteModelView/index copy.vue
new file mode 100644
index 0000000..cdb3c40
--- /dev/null
+++ b/src/render/views/BDSatellite3DPostureControl/SatelliteModelView/index copy.vue	
@@ -0,0 +1,347 @@
+<template>
+  <div ref="satelliteRef" />
+</template>
+
+<!-- <script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import * as THREE from 'three'
+
+import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js'
+import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
+
+import { useSerialPortStore } from '@/stores/serialPort'
+
+const satelliteRef = ref(null)
+
+const accRate = 16384.0
+const gyrRate = 131.072
+
+const init = async () => {
+  initRenderer()
+  initScene()
+  initCamera()
+  await initSatellite()
+}
+
+let renderer  = null
+const initRenderer = () => {
+  const w = satelliteRef.value.clientWidth, h = satelliteRef.value.clientHeight
+  renderer = new THREE.WebGLRenderer()
+  // renderer.setPixelRatio(window.devicePixelRatio)
+  renderer.setSize(w, h)
+
+  satelliteRef.value.appendChild(renderer.domElement)
+}
+
+let scene = null
+const initScene = () => {
+  // 初始化场景
+  scene = new THREE.Scene()
+
+  // 为场景添加光源
+  const ambientLight = new THREE.AmbientLight()
+  scene.add(ambientLight)
+}
+
+let camera = null
+const initCamera = () => {
+  // 初始化相机
+  const w = satelliteRef.value.clientWidth, h = satelliteRef.value.clientHeight
+  const aspect = w / h
+  const frustumSize = 750
+
+  camera = new THREE.OrthographicCamera(
+    frustumSize * aspect / -2, frustumSize * aspect / 2,
+    frustumSize / 2, frustumSize / -2)
+  camera.position.z = 750
+  camera.lookAt(scene.position)
+  scene.add(camera)
+}
+
+let satellite = null
+const initSatellite = async () => {
+  // 初始化卫星模型
+  const modelDirPath = '/models/satellite/'
+  const modelName = 'satellite'
+
+  const mtlLoader = new MTLLoader().setPath(modelDirPath)
+  const objLoader = new OBJLoader().setPath(modelDirPath)
+
+  const mtl = await mtlLoader.loadAsync( modelName + '.mtl' )
+  mtl.preload()
+  objLoader.setMaterials(mtl)
+
+  const obj = await objLoader.loadAsync( modelName + '.obj' )
+
+  // 修正模型的位置和角度
+  const x = 100, y = 72, z = 25
+  obj.rotateZ(Math.PI)
+  obj.position.set(x, y, z)
+
+  satellite = new THREE.Group()
+  satellite.add(obj)
+  scene?.add(satellite)
+}
+
+let acc = new Array(3), gyr = new Array(3)
+let firstSample = true
+let lastTime = 0
+let RwGyro = [0, 0, 0]  // 重新读取陀螺仪
+let Awz    = [0, 0]     // XZ/ YZ平面和Z轴（度）R的投影之间的角度
+let RwEst  = [0, 0, 0]
+
+const wGyro = 10.0
+const HALF_PI = Math.PI / 2
+
+const render = () => {
+  if (acc && gyr) {
+    updateRwExt(acc, gyr)
+  }
+  
+  if (satellite) {
+    satellite.rotation.x = HALF_PI * -RwEst[0]
+    satellite.rotation.z = HALF_PI * RwEst[1]
+    // satellite.rotation.y = HALF_PI * RwEst[2]
+  }
+  renderer?.render(scene, camera)
+}
+
+const updateRwExt = (acc, gyr) => {
+  normalize3DVec(acc)
+  
+  let currentTime = Date.now()
+  let interval    = currentTime - lastTime
+  lastTime        = currentTime
+
+  if (firstSample || isNaN(RwEst[0])) {
+    for (let index = 0; index < 3; index++) {
+      RwEst[index] = acc[index]// 初始化加速度传感器读数
+    }
+  } else {
+    // 对RwGyro进行评估
+    if (Math.abs(RwEst[2]) < 0.1) {
+      // Rz值非常的小，它的作用是作为Axz与Ayz的计算参照值，防止放大的波动产生错误的结果。
+      // 这种情况下就跳过当前的陀螺仪数据，使用以前的。
+      for (let index = 0; index < 3; index++) {
+        RwGyro[index] = RwEst[index]
+      }
+    } else {
+      // ZX/ZY平面和Z轴R的投影之间的角度，基于最近一次的RwEst值
+      for (let index = 0; index < 2; index++) {
+        let tmpf = gyr[index] // 获取当前陀螺仪的deg/s
+        tmpf *= interval / 1000.0 // 得到角度变化值
+        Awz[index] = Math.atan2(RwEst[index], RwEst[2]) * 180 / Math.PI // 得到角度并转换为度
+        Awz[index] += tmpf // 根据陀螺仪的运动得到更新后的角度
+      }
+
+      // 判断RzGyro是多少，主要看Axz的弧度是多少
+      // 当Axz在-90 ..90 => cos(Awz) >= 0这个范围内的时候RzGyro是准确的
+      let signRzGyro = (Math.cos(Awz[0] * Math.PI / 180) >= 0) ? 1 : -1
+
+      // 从Awz的角度值反向计算RwGyro的公式请查看网页 http://starlino.com/imu_guide.html
+      for (let index = 0; index < 2; index++) {
+        RwGyro[0] = Math.sin(Awz[0] * Math.PI / 180)
+        RwGyro[0] /= Math.sqrt(1 + squared(Math.cos(Awz[0] * Math.PI / 180)) * squared(Math.tan(Awz[1] * Math.PI / 180)))
+        RwGyro[1] = Math.sin(Awz[1] * Math.PI / 180)
+        RwGyro[1] /= Math.sqrt(1 + squared(Math.cos(Awz[1] * Math.PI / 180)) * squared(Math.tan(Awz[0] * Math.PI / 180)))
+      }
+      RwGyro[2] = signRzGyro * Math.sqrt(1 - squared(RwGyro[0]) - squared(RwGyro[1]))
+
+      // 把陀螺仪与加速度传感器的值进行结合
+      for (let index = 0; index < 3; index++) {
+        RwEst[index] = (acc[index] + wGyro * RwGyro[index]) / (1 + wGyro)
+      }
+
+      normalize3DVec(RwEst)
+    }
+  }
+}
+
+const normalize3DVec = (vector) => {
+  const R = Math.sqrt(squared(vector[0]) + squared(vector[1]) + squared(vector[2]))
+  vector[0] /= R
+  vector[1] /= R
+  vector[2] /= R
+}
+
+const squared = x => Math.pow(x, 2)
+
+const animate = () => {
+  // render()
+  console.log(renderer, scene, camera, satellite );
+  
+  if (satellite) {
+    satellite.rotation.x += 0.01
+    satellite.rotation.y += 0.01
+  }
+  
+  renderer?.render(scene, camera)
+  requestAnimationFrame(animate)
+}
+
+// 判断字符串是否满足协议格式
+const isValidFormat = data => {
+  if (!data) {
+    return false
+  }
+
+  if (data.indexOf('@POSE') < 0) {
+    return false
+  }
+
+  const splitIndex = data.indexOf('*') + 1
+  const dataStr = data.substring(0, splitIndex)
+  const csStr = data.substring(splitIndex)
+
+  if (!dataStr || !csStr) {
+    return false
+  }
+
+  if (dataStr.length !== parseInt(csStr.trim())) {
+    return false
+  }
+
+  return true
+}
+
+// 将data转换成加速度和角速度
+const data2AccGyr = data => {
+  const startIndex = data.indexOf(',') + 1
+  const endIndex   = data.indexOf('*')
+  const dataArr    = data.substring(startIndex, endIndex).split(',').map(parseFloat)
+
+  acc = new Array(3), gyr = new Array(3)
+
+  acc[0] = dataArr[0] / accRate
+  acc[1] = dataArr[1] / accRate
+  acc[2] = dataArr[2] / accRate
+  gyr[0] = dataArr[3] / gyrRate
+  gyr[1] = dataArr[4] / gyrRate
+  gyr[2] = dataArr[5] / gyrRate
+}
+
+const serialPort = useSerialPortStore()
+
+onMounted(() => {
+  init()
+  animate()
+})
+</script> -->
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import * as THREE from 'three'
+import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js'
+import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
+
+const satelliteRef = ref(null)
+
+const init = async () => {
+  initRenderer()
+  initScene()
+  initCamera()
+  initOrbitControls()
+  initCube()
+  // await initSphere()
+  await initSatellite()
+}
+
+let renderer = null
+const initRenderer = () => {
+  renderer = new THREE.WebGLRenderer();
+  renderer.setSize( satelliteRef.value.clientWidth, satelliteRef.value.clientHeight );
+  satelliteRef.value.appendChild( renderer.domElement )
+}
+
+let scene = null
+const initScene = () => {
+  scene = new THREE.Scene();
+  
+  const ambientLight = new THREE.AmbientLight()
+  scene.add(ambientLight)
+}
+
+let camera = null
+const initCamera = () => {
+  camera = new THREE.PerspectiveCamera( 75, satelliteRef.value.clientWidth / satelliteRef.value.clientHeight, 0.1, 5000 )
+  // camera = new THREE.OrthographicCamera( satelliteRef.value.clientWidth / - 2, satelliteRef.value.clientWidth / 2, satelliteRef.value.clientHeight / 2, satelliteRef.value.clientHeight / - 2, 1, 1000 );
+  camera.position.z = 5;
+  
+  scene?.add(camera)
+}
+
+const initOrbitControls = () => {
+  const controls = new OrbitControls( camera, renderer.domElement );
+}
+
+let cube = null
+const initCube = () => {
+  const box = new THREE.BoxGeometry( 1,1,1 );
+  const box_material = new THREE.MeshBasicMaterial( { color: 0x00FF00 } );
+  const box_cube = new THREE.Mesh( box, box_material );
+  scene?.add( box_cube );
+
+  const geometry = new THREE.SphereGeometry()
+  const material = new THREE.MeshBasicMaterial( { color: 0xFFFFFF } );
+  cube = new THREE.Mesh( geometry, material );
+  scene?.add( cube );
+
+  console.log(box_cube, 'cube');
+  
+}
+
+const initSphere = async () => {
+  // 初始化卫星模型
+  const modelName    = 'Sphere'
+  const modelDirPath = '../models/Sphere/'
+
+  // const mtlLoader = new MTLLoader().setPath(modelDirPath)
+  const objLoader = new OBJLoader().setPath(modelDirPath)
+
+  // const mtl = await mtlLoader.loadAsync( modelName + '.mtl' )
+  // mtl.preload()
+  // objLoader.setMaterials(mtl)
+
+  const sphere = await objLoader.loadAsync( modelName + '.obj' )
+  scene?.add(sphere)
+
+  console.log(sphere, 'sphere');
+  
+}
+
+let satellite = null
+const initSatellite = async () => {
+  // 初始化卫星模型
+  const modelName    = 'Sphere'
+  const modelDirPath = '../models/Sphere/'
+  // const modelName    = 'Circle'
+  // const modelDirPath = '../models/Circle/'
+
+  const mtlLoader = new MTLLoader().setPath(modelDirPath)
+  const objLoader = new OBJLoader().setPath(modelDirPath)
+
+  const mtl = await mtlLoader.loadAsync( modelName + '.mtl' )
+  mtl.preload()
+  objLoader.setMaterials(mtl)
+
+  satellite = await objLoader.loadAsync( modelName + '.obj' )
+  scene.add(satellite)
+
+  console.log(satellite, 'satellite');
+}
+
+const animate = () => {
+  requestAnimationFrame( animate );
+
+  cube.rotation.x += 0.01;
+  cube.rotation.y += 0.01;
+
+  renderer.render( scene, camera );
+};
+
+onMounted(() => {
+  init()
+  animate()
+})
+</script>
diff --git a/src/render/views/BDSatellite3DPostureControl/SatelliteModelView/index.ts b/src/render/views/BDSatellite3DPostureControl/SatelliteModelView/index.ts
new file mode 100644
index 0000000..99c79b9
--- /dev/null
+++ b/src/render/views/BDSatellite3DPostureControl/SatelliteModelView/index.ts
@@ -0,0 +1 @@
+export { default as SatelliteModelView } from './index.vue';
diff --git a/src/render/views/BDSatellite3DPostureControl/SatelliteModelView/index.vue b/src/render/views/BDSatellite3DPostureControl/SatelliteModelView/index.vue
new file mode 100644
index 0000000..2482d76
--- /dev/null
+++ b/src/render/views/BDSatellite3DPostureControl/SatelliteModelView/index.vue
@@ -0,0 +1,218 @@
+<template>
+  <div ref="satelliteRef" id="satellite" />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import * as THREE from 'three'
+
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
+import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'
+
+import { useSerialPortStore, SerialPortEventType } from '@/stores/serialPort'
+import { LineBreakParser } from '@/utils/parser'
+
+const accRate = 16384.0
+const gyrRate = 131.072
+
+const satelliteRef = ref(null)
+
+let renderer  = null
+let scene     = null
+let camera    = null
+let satellite = null
+const initSatellite = async () => {
+  // 创建场景对象Scene
+  scene = new THREE.Scene()
+
+  // 添加相机
+  const w = satelliteRef.value.clientWidth, h = satelliteRef.value.clientHeight
+  const aspect = w / h
+  const frustumSize = 15
+
+  camera = new THREE.OrthographicCamera(
+    frustumSize * aspect / -2, frustumSize * aspect / 2,
+    frustumSize / 2, frustumSize / -2)
+  camera.position.z = 100
+  scene.add(camera)
+
+
+  // 添加renderer
+  renderer = new THREE.WebGLRenderer()
+  renderer.setPixelRatio(window.devicePixelRatio)
+  renderer.setSize(w, h)
+  
+
+  // 加载卫星模型
+  const modelDirPath = '../models/geo/'
+
+  const rgbeLoader    = new RGBELoader().setPath(modelDirPath)
+  const environment   = await rgbeLoader.loadAsync('env.hdr')
+  environment.mapping = THREE.EquirectangularReflectionMapping
+  scene.environment   = environment
+
+  const gltfLoader = new GLTFLoader().setPath(modelDirPath)
+  const geoModel   = await gltfLoader.loadAsync('geo.gltf')
+  geoModel.scene.traverse( function ( child ) {
+    if ( child.isMesh ) {
+      child.material.emissive    = child.material.color
+      child.material.emissiveMap = child.material.map 
+    }
+  })
+  satellite = geoModel.scene
+
+
+  scene.add(satellite)
+  camera.lookAt(satellite.position)
+  
+  satelliteRef.value.appendChild(renderer.domElement)
+}
+
+let acc = new Array(3), gyr = new Array(3)
+let firstSample = true
+let lastTime = 0
+let RwGyro = [0, 0, 0]  // 重新读取陀螺仪
+let Awz    = [0, 0]     // XZ/ YZ平面和Z轴（度）R的投影之间的角度
+let RwEst  = [0, 0, 0]
+
+const wGyro = 10.0
+const HALF_PI = Math.PI / 2
+
+const render = () => {
+  if (acc && gyr) {
+    updateRwExt(acc, gyr)
+  }
+  
+  if (satellite) {
+    satellite.rotation.x = HALF_PI * -RwEst[0]
+    satellite.rotation.z = HALF_PI * RwEst[1]
+    // satellite.rotation.y = HALF_PI * RwEst[2]
+  }
+  renderer?.render(scene, camera)
+}
+
+const updateRwExt = (acc, gyr) => {
+  normalize3DVec(acc)
+  
+  let currentTime = Date.now()
+  let interval    = currentTime - lastTime
+  lastTime        = currentTime
+
+  if (firstSample || isNaN(RwEst[0])) {
+    for (let index = 0; index < 3; index++) {
+      RwEst[index] = acc[index]// 初始化加速度传感器读数
+    }
+  } else {
+    // 对RwGyro进行评估
+    if (Math.abs(RwEst[2]) < 0.1) {
+      // Rz值非常的小，它的作用是作为Axz与Ayz的计算参照值，防止放大的波动产生错误的结果。
+      // 这种情况下就跳过当前的陀螺仪数据，使用以前的。
+      for (let index = 0; index < 3; index++) {
+        RwGyro[index] = RwEst[index]
+      }
+    } else {
+      // ZX/ZY平面和Z轴R的投影之间的角度，基于最近一次的RwEst值
+      for (let index = 0; index < 2; index++) {
+        let tmpf = gyr[index] // 获取当前陀螺仪的deg/s
+        tmpf *= interval / 1000.0 // 得到角度变化值
+        Awz[index] = Math.atan2(RwEst[index], RwEst[2]) * 180 / Math.PI // 得到角度并转换为度
+        Awz[index] += tmpf // 根据陀螺仪的运动得到更新后的角度
+      }
+
+      // 判断RzGyro是多少，主要看Axz的弧度是多少
+      // 当Axz在-90 ..90 => cos(Awz) >= 0这个范围内的时候RzGyro是准确的
+      let signRzGyro = (Math.cos(Awz[0] * Math.PI / 180) >= 0) ? 1 : -1
+
+      // 从Awz的角度值反向计算RwGyro的公式请查看网页 http://starlino.com/imu_guide.html
+      for (let index = 0; index < 2; index++) {
+        RwGyro[0] = Math.sin(Awz[0] * Math.PI / 180)
+        RwGyro[0] /= Math.sqrt(1 + squared(Math.cos(Awz[0] * Math.PI / 180)) * squared(Math.tan(Awz[1] * Math.PI / 180)))
+        RwGyro[1] = Math.sin(Awz[1] * Math.PI / 180)
+        RwGyro[1] /= Math.sqrt(1 + squared(Math.cos(Awz[1] * Math.PI / 180)) * squared(Math.tan(Awz[0] * Math.PI / 180)))
+      }
+      RwGyro[2] = signRzGyro * Math.sqrt(1 - squared(RwGyro[0]) - squared(RwGyro[1]))
+
+      // 把陀螺仪与加速度传感器的值进行结合
+      for (let index = 0; index < 3; index++) {
+        RwEst[index] = (acc[index] + wGyro * RwGyro[index]) / (1 + wGyro)
+      }
+
+      normalize3DVec(RwEst)
+    }
+  }
+}
+
+const normalize3DVec = (vector) => {
+  const R = Math.sqrt(squared(vector[0]) + squared(vector[1]) + squared(vector[2]))
+  vector[0] /= R
+  vector[1] /= R
+  vector[2] /= R
+}
+
+const squared = x => Math.pow(x, 2)
+
+const animate = () => {
+  render()
+  requestAnimationFrame(animate)
+}
+
+// 判断字符串是否满足协议格式
+const isValidFormat = data => {
+  if (!data) {
+    return false
+  }
+
+  if (data.indexOf('@POSE') < 0) {
+    return false
+  }
+
+  const splitIndex = data.indexOf('*') + 1
+  const dataStr = data.substring(0, splitIndex)
+  const csStr = data.substring(splitIndex)
+
+  if (!dataStr || !csStr) {
+    return false
+  }
+
+  if (dataStr.length !== parseInt(csStr.trim())) {
+    return false
+  }
+
+  return true
+}
+
+// 将data转换成加速度和角速度
+const data2AccGyr = data => {
+  const startIndex = data.indexOf(',') + 1
+  const endIndex   = data.indexOf('*')
+  const dataArr    = data.substring(startIndex, endIndex).split(',').map(parseFloat)
+
+  acc = new Array(3), gyr = new Array(3)
+
+  acc[0] = dataArr[0] / accRate
+  acc[1] = dataArr[1] / accRate
+  acc[2] = dataArr[2] / accRate
+  gyr[0] = dataArr[3] / gyrRate
+  gyr[1] = dataArr[4] / gyrRate
+  gyr[2] = dataArr[5] / gyrRate
+}
+
+const decoder    = new TextDecoder()
+const parser     = new LineBreakParser()
+const onSerialPortData = (data: Uint8Array) => {
+  const lineArr = parser.parse(decoder.decode(data))
+  lineArr.forEach(line => {
+    if (!isValidFormat(line)) return
+
+    data2AccGyr(line)
+  })
+}
+
+const serialPort = useSerialPortStore()
+serialPort.addEventListener(SerialPortEventType.data, onSerialPortData)
+
+onMounted(() => {
+  initSatellite()
+  animate()
+})
+</script>
diff --git a/src/render/views/BDSatelliteAttitudeControl/RemoteControlView/index.ts b/src/render/views/BDSatelliteAttitudeControl/RemoteControlView/index.ts
new file mode 100644
index 0000000..806071d
--- /dev/null
+++ b/src/render/views/BDSatelliteAttitudeControl/RemoteControlView/index.ts
@@ -0,0 +1 @@
+export { default as RemoteControlView } from './index.vue'
diff --git a/src/render/views/BDSatelliteAttitudeControl/RemoteControlView/index.vue b/src/render/views/BDSatelliteAttitudeControl/RemoteControlView/index.vue
new file mode 100644
index 0000000..07c3ab2
--- /dev/null
+++ b/src/render/views/BDSatelliteAttitudeControl/RemoteControlView/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <n-space justify="space-around" class="remote-control-view">
+    <MotorControlView v-for="_,index in 3" :index="index" :key="index" />
+  </n-space>
+</template>
+
+<script lang="ts" setup>
+import { NSpace } from 'naive-ui'
+import { MotorControlView } from '../components/MotorControlView'
+</script>
+
+<style scoped lang="less">
+.remote-control-view {
+  padding: 75px;
+  box-sizing: border-box;
+}
+</style>
diff --git a/src/render/views/BDSatelliteAttitudeControl/components/MotorControlView/data.ts b/src/render/views/BDSatelliteAttitudeControl/components/MotorControlView/data.ts
new file mode 100644
index 0000000..db96cbe
--- /dev/null
+++ b/src/render/views/BDSatelliteAttitudeControl/components/MotorControlView/data.ts
@@ -0,0 +1,3 @@
+export const MAX = 255
+
+export const MIN = 180
diff --git a/src/render/views/BDSatelliteAttitudeControl/components/MotorControlView/index.ts b/src/render/views/BDSatelliteAttitudeControl/components/MotorControlView/index.ts
new file mode 100644
index 0000000..5e763a9
--- /dev/null
+++ b/src/render/views/BDSatelliteAttitudeControl/components/MotorControlView/index.ts
@@ -0,0 +1 @@
+export { default as MotorControlView } from './index.vue'
diff --git a/src/render/views/BDSatelliteAttitudeControl/components/MotorControlView/index.vue b/src/render/views/BDSatelliteAttitudeControl/components/MotorControlView/index.vue
new file mode 100644
index 0000000..69136c4
--- /dev/null
+++ b/src/render/views/BDSatelliteAttitudeControl/components/MotorControlView/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <n-space vertical justify="space-between" class="h-full motor-control-view">
+
+    <n-slider :min="MIN" :max="MAX" v-model:value="speed" :step="10" :tooltip="false" vertical >
+      <template #thumb>
+        <n-button type="primary" size="large" circle />
+      </template>
+    </n-slider>
+
+    <n-button secondary type="primary" size="large" :disabled="!serialPort.isOpen" @click="onBtnClick">设置 {{ props.index + 1 }} 号电机速度</n-button>
+
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NSpace, NSlider, NButton, useMessage } from 'naive-ui'
+import { useSerialPortStore } from '@/stores/serialPort'
+import { MIN, MAX } from './data'
+
+const props = defineProps({
+  index: {
+    type: Number,
+    required: true,
+  },
+})
+
+const message    = useMessage()
+const serialPort = useSerialPortStore()
+
+const speed      = ref(MIN)
+const onBtnClick = () => {
+  if (!serialPort.isOpen) {
+    message.error('请先连接无线通信模块并打开串口')
+    return
+  }
+
+  const value   = speed.value === MIN ? 0 : speed.value
+  const commond = `$MOTOR,${props.index},${value}*${value.toString().length + 10}\r\n`
+  serialPort.write(commond)
+}
+</script>
+
+<style scoped lang="less">
+.n-slider {
+  height: 70vh;
+  margin: 0 auto;
+  box-sizing: content-box;
+}
+</style>
diff --git a/src/render/views/BDSatelliteParameterMonitoringPlatform/AttitudeParameterView/index.ts b/src/render/views/BDSatelliteParameterMonitoringPlatform/AttitudeParameterView/index.ts
new file mode 100644
index 0000000..07da4ab
--- /dev/null
+++ b/src/render/views/BDSatelliteParameterMonitoringPlatform/AttitudeParameterView/index.ts
@@ -0,0 +1 @@
+export { default as AttitudeParameterView } from './index.vue';
diff --git a/src/render/views/BDSatelliteParameterMonitoringPlatform/AttitudeParameterView/index.vue b/src/render/views/BDSatelliteParameterMonitoringPlatform/AttitudeParameterView/index.vue
new file mode 100644
index 0000000..4881cb1
--- /dev/null
+++ b/src/render/views/BDSatelliteParameterMonitoringPlatform/AttitudeParameterView/index.vue
@@ -0,0 +1,96 @@
+<template>
+  <n-card title="姿态参数" class="h-full">
+    <n-space vertical justify="space-around" class="h-full">
+      <n-descriptions label-placement="left">
+        <n-descriptions-item label="X角加速度">
+          {{ x_angular_acceleration }}
+        </n-descriptions-item>
+      </n-descriptions>
+      <n-descriptions label-placement="left">
+        <n-descriptions-item label="Y角加速度">
+          {{ y_angular_acceleration }}
+        </n-descriptions-item>
+      </n-descriptions>
+      <n-descriptions label-placement="left">
+        <n-descriptions-item label="Z角加速度">
+          {{ z_angular_acceleration }}
+        </n-descriptions-item>
+      </n-descriptions>
+      <n-descriptions label-placement="left">
+        <n-descriptions-item label="X轴加速度">
+          {{ x_axis_acceleration }}
+        </n-descriptions-item>
+      </n-descriptions>
+      <n-descriptions label-placement="left">
+        <n-descriptions-item label="Y轴加速度">
+          {{ y_axis_acceleration }}
+        </n-descriptions-item>
+      </n-descriptions>
+      <n-descriptions label-placement="left">
+        <n-descriptions-item label="Z轴加速度">
+          {{ z_axis_acceleration }}
+        </n-descriptions-item>
+      </n-descriptions>
+    </n-space>
+  </n-card>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { NCard, NSpace, NDescriptions, NDescriptionsItem } from 'naive-ui'
+
+import { useSerialPortStore, SerialPortEventType } from '@/stores/serialPort'
+import { LineBreakParser } from '@/utils/parser'
+
+const x_angular_acceleration = ref()
+const y_angular_acceleration = ref()
+const z_angular_acceleration = ref()
+
+const x_axis_acceleration    = ref()
+const y_axis_acceleration    = ref()
+const z_axis_acceleration    = ref()
+
+
+const handle = (data: string) => {
+  const startMarkIndex    = data.indexOf('@')
+  const checksumMarkIndex = data.indexOf('*')
+
+  if (startMarkIndex < 0 || checksumMarkIndex < startMarkIndex) return
+
+  // 校验和验证
+  const info = data.substring(startMarkIndex + 1, checksumMarkIndex)
+  const cs   = parseInt(data.substring(checksumMarkIndex + 1))
+  if (cs != info.length + 2) return
+
+  const infoArr = info.split(',')
+  if (infoArr.length != 7 || infoArr[0] != 'POSE') return
+
+  x_angular_acceleration.value = infoArr[1]
+  y_angular_acceleration.value = infoArr[2]
+  z_angular_acceleration.value = infoArr[3]
+  x_axis_acceleration.value    = infoArr[4]
+  y_axis_acceleration.value    = infoArr[5]
+  z_axis_acceleration.value    = infoArr[6]
+}
+
+const decoder    = new TextDecoder()
+const parser     = new LineBreakParser()
+const onSerialPortData = (data: Uint8Array) => {
+  const lineArr = parser.parse(decoder.decode(data))
+  lineArr.forEach(line => handle(line))
+}
+
+const serialPort = useSerialPortStore()
+serialPort.addEventListener(SerialPortEventType.data, onSerialPortData)
+</script>
+
+<style scoped lang="less">
+:deep(.n-card-header) {
+  font-size: 4vh;
+}
+
+:deep(.n-descriptions) {
+  font-size: 3vh;
+}
+</style>
+
diff --git a/src/render/views/BDSatelliteParameterMonitoringPlatform/ParameterMonitoringView/index.ts b/src/render/views/BDSatelliteParameterMonitoringPlatform/ParameterMonitoringView/index.ts
new file mode 100644
index 0000000..e9bcce8
--- /dev/null
+++ b/src/render/views/BDSatelliteParameterMonitoringPlatform/ParameterMonitoringView/index.ts
@@ -0,0 +1 @@
+export { default as ParameterMonitoringView } from './index.vue'
diff --git a/src/render/views/BDSatelliteParameterMonitoringPlatform/ParameterMonitoringView/index.vue b/src/render/views/BDSatelliteParameterMonitoringPlatform/ParameterMonitoringView/index.vue
new file mode 100644
index 0000000..da7c8f9
--- /dev/null
+++ b/src/render/views/BDSatelliteParameterMonitoringPlatform/ParameterMonitoringView/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="flex">
+    <div class="flex-1">
+      <AttitudeParameterView />
+    </div>
+    <div class="flex flex-col flex-1">
+      <div class="flex-1">
+        <StateParameterView />
+      </div>
+      <div class="flex-1">
+        <SatelliteTimeView />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import  { AttitudeParameterView } from '../AttitudeParameterView'
+import  { StateParameterView } from '../StateParameterView'
+import  { SatelliteTimeView } from '../SatelliteTimeView' 
+</script>
+
+<style scoped lang="less">
+</style>
+
diff --git a/src/render/views/BDSatelliteParameterMonitoringPlatform/SatelliteTimeView/index.ts b/src/render/views/BDSatelliteParameterMonitoringPlatform/SatelliteTimeView/index.ts
new file mode 100644
index 0000000..333bc2e
--- /dev/null
+++ b/src/render/views/BDSatelliteParameterMonitoringPlatform/SatelliteTimeView/index.ts
@@ -0,0 +1 @@
+export { default as SatelliteTimeView } from './index.vue';
diff --git a/src/render/views/BDSatelliteParameterMonitoringPlatform/SatelliteTimeView/index.vue b/src/render/views/BDSatelliteParameterMonitoringPlatform/SatelliteTimeView/index.vue
new file mode 100644
index 0000000..6746ded
--- /dev/null
+++ b/src/render/views/BDSatelliteParameterMonitoringPlatform/SatelliteTimeView/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <n-card title="卫星时间" class="h-full">
+    <n-space vertical justify="space-around" class="h-full">
+      <n-descriptions label-placement="left">
+        <n-descriptions-item label=" 　日 　　期 　">
+          {{ date }}
+        </n-descriptions-item>
+      </n-descriptions>
+      <n-descriptions label-placement="left">
+        <n-descriptions-item label=" 　时 　　间 　">
+          {{ time }}
+        </n-descriptions-item>
+      </n-descriptions>
+    </n-space>
+  </n-card>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { NCard, NSpace, NDescriptions, NDescriptionsItem } from 'naive-ui'
+
+import { useSerialPortStore, SerialPortEventType } from '@/stores/serialPort'
+import { LineBreakParser } from '@/utils/parser'
+
+const date = ref()
+const time = ref()
+
+const handle = (data: string) => {
+  const startMarkIndex    = data.indexOf('@')
+  const checksumMarkIndex = data.indexOf('*')
+
+  if (startMarkIndex < 0 || checksumMarkIndex < startMarkIndex) return
+
+  // 校验和验证
+  const info = data.substring(startMarkIndex + 1, checksumMarkIndex)
+  const cs   = parseInt(data.substring(checksumMarkIndex + 1))
+  if (cs != info.length + 2) return
+
+  const infoArr = info.split(',')
+  if (infoArr.length != 3 || infoArr[0] != 'TIME') return
+
+  date.value = infoArr[1]
+  time.value = infoArr[2]
+}
+
+const decoder    = new TextDecoder()
+const parser     = new LineBreakParser()
+const onSerialPortData = (data: Uint8Array) => {
+  const lineArr = parser.parse(decoder.decode(data))
+  lineArr.forEach(line => handle(line))
+}
+
+const serialPort = useSerialPortStore()
+serialPort.addEventListener(SerialPortEventType.data, onSerialPortData)
+</script>
+
+<style scoped lang="less">
+:deep(.n-card-header) {
+  font-size: 4vh;
+}
+
+:deep(.n-descriptions) {
+  font-size: 3vh;
+}
+</style>
+
diff --git a/src/render/views/BDSatelliteParameterMonitoringPlatform/StateParameterView/index.ts b/src/render/views/BDSatelliteParameterMonitoringPlatform/StateParameterView/index.ts
new file mode 100644
index 0000000..d1812c6
--- /dev/null
+++ b/src/render/views/BDSatelliteParameterMonitoringPlatform/StateParameterView/index.ts
@@ -0,0 +1 @@
+export { default as StateParameterView } from './index.vue';
diff --git a/src/render/views/BDSatelliteParameterMonitoringPlatform/StateParameterView/index.vue b/src/render/views/BDSatelliteParameterMonitoringPlatform/StateParameterView/index.vue
new file mode 100644
index 0000000..4a89e7d
--- /dev/null
+++ b/src/render/views/BDSatelliteParameterMonitoringPlatform/StateParameterView/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <n-card title="状态参数" class="h-full">
+    <n-space vertical justify="space-around" class="h-full">
+      <n-descriptions label-placement="left">
+        <n-descriptions-item label="太阳能板1电压">
+          {{ solar_panel_one_voltage }}
+        </n-descriptions-item>
+      </n-descriptions>
+      <n-descriptions label-placement="left">
+        <n-descriptions-item label="太阳能板2电压">
+          {{ solar_panel_two_voltage }}
+        </n-descriptions-item>
+      </n-descriptions>
+      <n-descriptions label-placement="left">
+        <n-descriptions-item label=" 　温 　　度 　">
+          {{ temperature }}
+        </n-descriptions-item>
+      </n-descriptions>
+    </n-space>
+  </n-card>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { NCard, NSpace, NDescriptions, NDescriptionsItem } from 'naive-ui'
+
+import { useSerialPortStore, SerialPortEventType } from '@/stores/serialPort'
+import { LineBreakParser } from '@/utils/parser'
+
+const solar_panel_one_voltage = ref()
+const solar_panel_two_voltage = ref()
+const temperature             = ref()
+
+const handle = (data: string) => {
+  const startMarkIndex    = data.indexOf('@')
+  const checksumMarkIndex = data.indexOf('*')
+
+  if (startMarkIndex < 0 || checksumMarkIndex < startMarkIndex) return
+
+  // 校验和验证
+  const info = data.substring(startMarkIndex + 1, checksumMarkIndex)
+  const cs   = parseInt(data.substring(checksumMarkIndex + 1))
+  if (cs != info.length + 2) return
+
+  const infoArr = info.split(',')
+  if (infoArr.length != 4 || infoArr[0] != 'SATSTA') return
+
+  solar_panel_one_voltage.value = infoArr[1]
+  solar_panel_two_voltage.value = infoArr[2]
+  temperature.value             = infoArr[3]
+}
+
+const decoder    = new TextDecoder()
+const parser     = new LineBreakParser()
+const onSerialPortData = (data: Uint8Array) => {
+  const lineArr = parser.parse(decoder.decode(data))
+  lineArr.forEach(line => handle(line))
+}
+
+const serialPort = useSerialPortStore()
+serialPort.addEventListener(SerialPortEventType.data, onSerialPortData)
+</script>
+
+<style scoped lang="less">
+:deep(.n-card-header) {
+  font-size: 4vh;
+}
+
+:deep(.n-descriptions) {
+  font-size: 3vh;
+}
+</style>
+
diff --git a/src/render/views/BDSatelliteTimeConfiguration/CustomTimingView/data.ts b/src/render/views/BDSatelliteTimeConfiguration/CustomTimingView/data.ts
new file mode 100644
index 0000000..b6e5fe8
--- /dev/null
+++ b/src/render/views/BDSatelliteTimeConfiguration/CustomTimingView/data.ts
@@ -0,0 +1,5 @@
+export const actions = null
+
+export const timePickerProps = {
+  actions: null
+}
diff --git a/src/render/views/BDSatelliteTimeConfiguration/CustomTimingView/index.ts b/src/render/views/BDSatelliteTimeConfiguration/CustomTimingView/index.ts
new file mode 100644
index 0000000..30d3c17
--- /dev/null
+++ b/src/render/views/BDSatelliteTimeConfiguration/CustomTimingView/index.ts
@@ -0,0 +1 @@
+export { default as CustomTimingView } from './index.vue';
diff --git a/src/render/views/BDSatelliteTimeConfiguration/CustomTimingView/index.vue b/src/render/views/BDSatelliteTimeConfiguration/CustomTimingView/index.vue
new file mode 100644
index 0000000..808a7ff
--- /dev/null
+++ b/src/render/views/BDSatelliteTimeConfiguration/CustomTimingView/index.vue
@@ -0,0 +1,55 @@
+<template>
+  <n-card title="通过控件给卫星授时" bordered embedded>
+    <n-date-picker
+      ref="datePickerRef"
+      panel
+      input-readonly
+      size="large"
+      type="datetime"
+      :actions="actions"
+      :time-picker-props="timePickerProps"
+      v-model:value="dateTime" />
+
+    <n-button type="primary" size="large" :disabled="!serialPort.isOpen || !dateTime" @click="onTimingBtnClick">
+      通过控件给卫星授时
+    </n-button>
+  </n-card>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { NCard, NDatePicker, NButton, useMessage } from 'naive-ui'
+
+import { useSerialPortStore } from '@/stores/serialPort'
+
+import { actions, timePickerProps } from './data'
+
+
+const datePickerRef = ref(null)
+const dateTime      = ref(null)  // 值为时间戳
+const serialPort    = useSerialPortStore()
+const message       = useMessage()
+const onTimingBtnClick = async () => {
+  if (!serialPort.isOpen) {
+    message.error('请先连接无线通信模块并打开串口')
+    return
+  }
+  
+  const dateTimeString = datePickerRef.value?.displayTime.replace(' ', ',')
+  await serialPort.write(`$TIME,${dateTimeString}*26\r\n`)
+}
+</script>
+
+<style scoped lang="less">
+:deep(.n-card-header) {
+  font-size: 4vh;
+}
+
+.n-date-panel {
+  zoom: 1.6;
+}
+
+.n-button {
+  margin-top: 36px;
+}
+</style>
diff --git a/src/render/views/BDSatelliteTimeConfiguration/SystemTimingView/data.ts b/src/render/views/BDSatelliteTimeConfiguration/SystemTimingView/data.ts
new file mode 100644
index 0000000..46e9500
--- /dev/null
+++ b/src/render/views/BDSatelliteTimeConfiguration/SystemTimingView/data.ts
@@ -0,0 +1 @@
+export const weekdays = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
diff --git a/src/render/views/BDSatelliteTimeConfiguration/SystemTimingView/index.ts b/src/render/views/BDSatelliteTimeConfiguration/SystemTimingView/index.ts
new file mode 100644
index 0000000..a4fb3a8
--- /dev/null
+++ b/src/render/views/BDSatelliteTimeConfiguration/SystemTimingView/index.ts
@@ -0,0 +1 @@
+export { default as SystemTimingView } from './index.vue';
diff --git a/src/render/views/BDSatelliteTimeConfiguration/SystemTimingView/index.vue b/src/render/views/BDSatelliteTimeConfiguration/SystemTimingView/index.vue
new file mode 100644
index 0000000..9845fc2
--- /dev/null
+++ b/src/render/views/BDSatelliteTimeConfiguration/SystemTimingView/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <n-card title="通过系统给卫星授时" bordered embedded>
+    <n-descriptions label-placement="left" :column="1" size="large">
+      <n-descriptions-item label="时间">
+        <n-time ref="timeRef" :time="time" />
+      </n-descriptions-item>
+      <n-descriptions-item label="星期">
+        {{ weekday }}
+      </n-descriptions-item>
+    </n-descriptions>
+    
+    <n-button type="primary" size="large" :disabled="!serialPort.isOpen" @click="onTimingBtnClick">
+      通过控件给卫星授时
+    </n-button>
+  </n-card>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted } from 'vue'
+import { NCard, NDescriptions, NDescriptionsItem, NButton, NTime, useMessage } from 'naive-ui'
+
+import { useSerialPortStore } from '@/stores/serialPort'
+
+import { weekdays } from './data'
+
+const serialPort = useSerialPortStore()
+
+const time    = ref(new Date().valueOf())
+const weekday = computed(() => weekdays[new Date(time.value).getDay()])
+
+onMounted(() => {
+  setInterval(() => time.value += 1000, 1000)
+})
+
+const timeRef = ref(null)
+const message = useMessage()
+const onTimingBtnClick = async () => {
+  if (!serialPort.isOpen) {
+    message.error('请先连接无线通信模块并打开串口')
+    return
+  }
+  
+  const dateTimeString = timeRef.value?.$el.getInnerHTML().replace(' ', ',')
+  await serialPort.write(`$TIME,${dateTimeString}*26\r\n`)
+}
+</script>
+
+<style scoped lang="less">
+
+:deep(.n-card-header) {
+  font-size: 4vh;
+}
+
+.n-descriptions {
+  --n-line-height: 3 !important;
+  font-size: 3vh;
+  height: 509px;
+}
+
+.n-button {
+  margin-top: 36px;
+}
+</style>
diff --git a/src/render/views/ClockConfig/AnimationConfigView/data.ts b/src/render/views/ClockConfig/AnimationConfigView/data.ts
new file mode 100644
index 0000000..cfb963a
--- /dev/null
+++ b/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
+  })
+)
diff --git a/src/render/views/ClockConfig/AnimationConfigView/index.ts b/src/render/views/ClockConfig/AnimationConfigView/index.ts
new file mode 100644
index 0000000..f900ea1
--- /dev/null
+++ b/src/render/views/ClockConfig/AnimationConfigView/index.ts
@@ -0,0 +1 @@
+export { default as AnimationConfigView } from './index.vue'
diff --git a/src/render/views/ClockConfig/AnimationConfigView/index.vue b/src/render/views/ClockConfig/AnimationConfigView/index.vue
new file mode 100644
index 0000000..193a914
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/render/views/ClockConfig/GestureRecognitionConfigView/data.ts b/src/render/views/ClockConfig/GestureRecognitionConfigView/data.ts
new file mode 100644
index 0000000..30f9e6f
--- /dev/null
+++ b/src/render/views/ClockConfig/GestureRecognitionConfigView/data.ts
@@ -0,0 +1,22 @@
+export const MAX_DISTANCE    = -300
+export const MIN_DISTANCE    = -900
+
+export const timeOutOptions  = [200, 600, 1000, 1500, 2000].map(
+  (v) => ({
+    label: v,
+    value: v
+  })
+)
+
+export const intervalOptions = [0.5, 1, 2, 3].map(
+  (v) => ({
+    label: v,
+    value: v
+  })
+)
+
+export const eventOptions = [
+  { label: '屏幕向右翻页', value: 0 },
+  { label: '屏幕向左翻页', value: 1 },
+  { label: '显示日期'    , value: 2 },
+]
\ No newline at end of file
diff --git a/src/render/views/ClockConfig/GestureRecognitionConfigView/index.ts b/src/render/views/ClockConfig/GestureRecognitionConfigView/index.ts
new file mode 100644
index 0000000..add2f35
--- /dev/null
+++ b/src/render/views/ClockConfig/GestureRecognitionConfigView/index.ts
@@ -0,0 +1 @@
+export { default as GestureRecognitionConfigView } from './index.vue'
diff --git a/src/render/views/ClockConfig/GestureRecognitionConfigView/index.vue b/src/render/views/ClockConfig/GestureRecognitionConfigView/index.vue
new file mode 100644
index 0000000..308db8b
--- /dev/null
+++ b/src/render/views/ClockConfig/GestureRecognitionConfigView/index.vue
@@ -0,0 +1,115 @@
+<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="inputValue">
+      <n-slider :max="MAX_DISTANCE" :min="MIN_DISTANCE" v-model:value="model.distance" :tooltip="false" :step="10">
+        <template #thumb>
+          <n-button type="primary" size="large" circle />
+        </template>
+      </n-slider>
+    </n-form-item>
+
+    <n-form-item size="large" label-placement="left" label="　超　　时　：" path="timeOut">
+      <n-select
+        placeholder="请选择超时时间"
+        v-model:value="model.timeOut"
+        :options="timeOutOptions"
+      />
+
+      <template #feedback>
+        单位：毫秒
+        <br>
+        遮挡物离开第一个红外传感器和遮挡第二个红外传感器之间的时间，超过这个时间则不会触发动画效果，建议值: 200
+      </template>
+    </n-form-item>
+
+    <n-form-item size="large" label-placement="left" label="　间　　隔　：" path="interval">
+      <n-select
+        placeholder="请选择间隔时间"
+        v-model:value="model.interval"
+        :options="intervalOptions"
+      />
+
+      <template #feedback>
+        单位：秒
+        <br>
+        两次动画之间的时间间隔，小于这个值不会触发动画，建议值: 1
+      </template>
+    </n-form-item>
+
+    <n-form-item size="large" label-placement="left" label="从左到右事件：" path="ltr">
+      <n-select
+        placeholder="请设置从左到右事件"
+        v-model:value="model.ltr"
+        :options="eventOptions"/>
+    </n-form-item>
+
+    <n-form-item size="large" label-placement="left" label="从右到左事件：" path="rtl">
+      <n-select
+        placeholder="请设置从右到左事件"
+        v-model:value="model.rtl"
+        :options="eventOptions"/>
+    </n-form-item>
+
+    <div class="text-center">
+      <n-button :disabled="!serialPort.isOpen" type="primary" size="large" @click="onClick">发送手势识别设置命令</n-button>
+    </div>
+
+    <ResetButtonView />
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NSpace, NFormItem, NSlider, NSelect, NButton, useMessage } from 'naive-ui'
+import ResetButtonView from '../ResetButtonView.vue'
+import { MAX_DISTANCE, MIN_DISTANCE, timeOutOptions, intervalOptions, eventOptions } from './data'
+import { useSerialPortStore } from '@/stores/serialPort'
+
+const model = ref({
+  distance: -300,
+  timeOut : null,
+  interval: null,
+  ltr: null,
+  rtl: null
+})
+
+const message    = useMessage()
+const serialPort = useSerialPortStore()
+const onClick = () => {
+  if (!serialPort.isOpen) {
+    message.error('请先连接无线通信模块并打开串口')
+    return
+  }
+
+  const value = model.value
+  if (!value.timeOut) {
+    message.error('请设置超时时间')
+    return
+  }
+
+  if (!value.interval) {
+    message.error('请设置间隔时间')
+    return
+  }
+
+  if (value.ltr === null) {
+    message.error('请设置从左到右事件')
+    return
+  }
+
+  if (value.rtl === null) {
+    message.error('请设置从右到左事件')
+    return
+  }
+
+  let cmd = `$GESTE,0,1,${-value.distance},${value.timeOut},5,${value.interval},${value.ltr},${value.rtl}*`
+  cmd += cmd.length
+  cmd += '\r\n'
+  
+  serialPort.write(cmd)
+}
+</script>
+
+<style scoped lang="less">
+
+</style>
\ No newline at end of file
diff --git a/src/render/views/ClockConfig/ResetButtonView.vue b/src/render/views/ClockConfig/ResetButtonView.vue
new file mode 100644
index 0000000..e364105
--- /dev/null
+++ b/src/render/views/ClockConfig/ResetButtonView.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="reset-button-container">
+    <n-button :disabled="!serialPort.isOpen" type="primary" size="large" @click="onResetBtnClick">恢复默认设置</n-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NButton } from 'naive-ui'
+import { useSerialPortStore } from '@/stores/serialPort'
+
+const serialPort = useSerialPortStore()
+const onResetBtnClick = () => {
+  if (!serialPort.isOpen) return
+  
+  let cmd = `$RECOVERY,1*`
+  cmd += cmd.length
+  cmd += '\r\n'
+  serialPort.write(cmd)
+}
+</script>
+
+<style scoped lang="less">
+.reset-button-container {
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/render/views/ClockConfig/ScreenConfigView/data.ts b/src/render/views/ClockConfig/ScreenConfigView/data.ts
new file mode 100644
index 0000000..0fda6ee
--- /dev/null
+++ b/src/render/views/ClockConfig/ScreenConfigView/data.ts
@@ -0,0 +1,4 @@
+export const count = 10
+
+export const MIN = 0
+export const MAX = 30
diff --git a/src/render/views/ClockConfig/ScreenConfigView/index.ts b/src/render/views/ClockConfig/ScreenConfigView/index.ts
new file mode 100644
index 0000000..cc5ba40
--- /dev/null
+++ b/src/render/views/ClockConfig/ScreenConfigView/index.ts
@@ -0,0 +1 @@
+export { default as ScreenConfigView } from './index.vue'
diff --git a/src/render/views/ClockConfig/ScreenConfigView/index.vue b/src/render/views/ClockConfig/ScreenConfigView/index.vue
new file mode 100644
index 0000000..66bd5ac
--- /dev/null
+++ b/src/render/views/ClockConfig/ScreenConfigView/index.vue
@@ -0,0 +1,87 @@
+<template>
+  <n-space vertical class="screen-config-view">
+    <n-card title="颜色设置" class="color-config-card">
+      <n-p>说明:北斗小时钟可设置10种颜色，10种颜色按照顺序不断切换，按照下方调色板排列顺序，分别设置对应位置的颜色</n-p>
+
+      <n-grid x-gap="24" y-gap="24" :cols="4">
+        <n-gi v-for="n in count" :key="n">
+          <input type="color" @change="onColorInputChange($event.target.value, n - 1)">
+        </n-gi> 
+      </n-grid>
+    </n-card>
+    
+    <n-card title="亮度设置" class="brightness-config-card">
+      <n-space justify="space-between" item-style="flex: 1 1 50%; text-align: center; padding: 24px">
+        <n-slider :min="MIN" :max="MAX" v-model:value="brightness" :tooltip="false" >
+          <template #thumb>
+            <n-button type="primary" size="large" circle />
+          </template>
+        </n-slider>
+
+        <n-button :disabled="!serialPort.isOpen" type="primary" size="large" secondary @click="onBrightnessBtnClick">发送亮度设置命令</n-button>
+
+      </n-space>
+    </n-card>
+
+    <ResetButtonView />
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NSpace, NCard, NGrid, NGi, NP, NSlider, NButton } from 'naive-ui'
+import convert from 'color-convert'
+import ResetButtonView from '../ResetButtonView.vue'
+import { count, MIN, MAX } from './data'
+import { useSerialPortStore } from '@/stores/serialPort'
+
+
+const serialPort = useSerialPortStore()
+
+const onColorInputChange = (color, index) => {
+  if (!serialPort.isOpen) return
+
+  const rgb = convert.hex.rgb(color)
+  
+  let cmd = `$LEDRGB,${index},${rgb[0]},${rgb[1]},${rgb[2]}*`
+  cmd += cmd.length
+  cmd += '\r\n'
+  serialPort.write(cmd)
+}
+
+const brightness = ref(MIN)
+const onBrightnessBtnClick = () => {
+  if (!serialPort.isOpen) return
+  
+  let cmd = `$LEDBT,${brightness.value}*`
+  cmd += cmd.length
+  cmd += '\r\n'
+  serialPort.write(cmd)
+}
+</script>
+
+<style scoped lang="less">
+.screen-config-view {
+  padding: 24px;
+  row-gap: 48px !important;
+
+  .color-config-card {
+    .n-grid {
+
+      &>div {
+        text-align: center;
+
+        input {
+          width: 60%;
+        }
+      }
+    }
+  }
+
+  .brightness-config-card {
+    .n-space {
+      gap: 0 !important;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/render/views/ClockConfig/SoundDetectionModuleConfigView/data.ts b/src/render/views/ClockConfig/SoundDetectionModuleConfigView/data.ts
new file mode 100644
index 0000000..d20c52d
--- /dev/null
+++ b/src/render/views/ClockConfig/SoundDetectionModuleConfigView/data.ts
@@ -0,0 +1,5 @@
+export const options = [
+  { label: '屏幕向右翻页', value: 0 },
+  { label: '屏幕向左翻页', value: 1 },
+  { label: '显示日期'    , value: 2 },
+]
diff --git a/src/render/views/ClockConfig/SoundDetectionModuleConfigView/index.ts b/src/render/views/ClockConfig/SoundDetectionModuleConfigView/index.ts
new file mode 100644
index 0000000..6ad8adc
--- /dev/null
+++ b/src/render/views/ClockConfig/SoundDetectionModuleConfigView/index.ts
@@ -0,0 +1 @@
+export { default as SoundDetectionModuleConfigView } from './index.vue'
diff --git a/src/render/views/ClockConfig/SoundDetectionModuleConfigView/index.vue b/src/render/views/ClockConfig/SoundDetectionModuleConfigView/index.vue
new file mode 100644
index 0000000..7f98d74
--- /dev/null
+++ b/src/render/views/ClockConfig/SoundDetectionModuleConfigView/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <n-space vertical justify="center" class="sound-detect-module-config-view">
+    <div>
+      <n-select
+        placeholder="请设置声音检测模块事件"
+        v-model:value="value"
+        :options="options"
+        @update:value="onSelectUpdate"
+        class="mx-auto"
+        style="width: 50%; "/>
+    </div>
+
+    <ResetButtonView />
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NSpace, NSelect, useMessage } from 'naive-ui'
+import ResetButtonView from '../ResetButtonView.vue'
+import { options } from './data'
+import { useSerialPortStore } from '@/stores/serialPort'
+
+const message    = useMessage()
+const serialPort = useSerialPortStore()
+
+const value      = ref(null)
+const onSelectUpdate   = () => {
+  if (!serialPort.isOpen) {
+    message.error('请先连接无线通信模块并打开串口')
+    return
+  }
+
+  let cmd = `$SDEVENT,${value.value}*`
+  cmd += cmd.length
+  cmd += '\r\n'
+  
+  serialPort.write(cmd)
+}
+</script>
+
+<style scoped lang="less">
+.sound-detect-module-config-view {
+  row-gap: 48px !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/render/views/DistanceCalculationTool/PointInfoInputFormView/data.ts b/src/render/views/DistanceCalculationTool/PointInfoInputFormView/data.ts
new file mode 100644
index 0000000..b9e6db0
--- /dev/null
+++ b/src/render/views/DistanceCalculationTool/PointInfoInputFormView/data.ts
@@ -0,0 +1,4 @@
+export const MAX_LNG = 180
+export const MIN_LNG = -180
+export const MAX_LAT = 90
+export const MIN_LAT = -90
diff --git a/src/render/views/DistanceCalculationTool/PointInfoInputFormView/index.ts b/src/render/views/DistanceCalculationTool/PointInfoInputFormView/index.ts
new file mode 100644
index 0000000..47e9399
--- /dev/null
+++ b/src/render/views/DistanceCalculationTool/PointInfoInputFormView/index.ts
@@ -0,0 +1 @@
+export { default as PointInfoInputFormView } from './index.vue'
diff --git a/src/render/views/DistanceCalculationTool/PointInfoInputFormView/index.vue b/src/render/views/DistanceCalculationTool/PointInfoInputFormView/index.vue
new file mode 100644
index 0000000..54092ed
--- /dev/null
+++ b/src/render/views/DistanceCalculationTool/PointInfoInputFormView/index.vue
@@ -0,0 +1,174 @@
+<template>
+  <n-form ref="formRef" :model="model" :rules="rules" size="large" label-placement="left">
+    <n-form-item label="起点：" :show-feedback="false">
+      <n-grid :cols="2" :x-gap="24">
+        <n-form-item-gi path="start_point.lng">
+          <n-input-number
+            v-model:value="model.start_point.lng"
+            placeholder="请输入起点经度"
+            clearable
+            :show-button="false"
+            :min="MIN_LNG"
+            :max="MAX_LNG"
+          >
+            <template #suffix>
+              °
+            </template>
+          </n-input-number>
+        </n-form-item-gi>
+        <n-form-item-gi path="start_point.lat">
+          <n-input-number
+            v-model:value="model.start_point.lat"
+            placeholder="请输入起点纬度"
+            clearable
+            :show-button="false"
+            :min="MIN_LAT"
+            :max="MAX_LAT"
+          >
+            <template #suffix>
+              °
+            </template>
+          </n-input-number>
+        </n-form-item-gi>
+      </n-grid>
+    </n-form-item>
+    <n-form-item label="终点：" :show-feedback="false">
+      <n-grid :cols="2" :x-gap="24">
+        <n-form-item-gi path="end_point.lng">
+          <n-input-number
+            v-model:value="model.end_point.lng"
+            placeholder="请输入终点经度"
+            clearable
+            :show-button="false"
+            :min="MIN_LNG"
+            :max="MAX_LNG"
+          >
+            <template #suffix>
+              °
+            </template>
+          </n-input-number>
+        </n-form-item-gi>
+        <n-form-item-gi path="end_point.lat">
+          <n-input-number
+            v-model:value="model.end_point.lat"
+            placeholder="请输入终点纬度"
+            clearable
+            :show-button="false"
+            :min="MIN_LAT"
+            :max="MAX_LAT"
+          >
+            <template #suffix>
+              °
+            </template>
+          </n-input-number>
+        </n-form-item-gi>
+      </n-grid>
+    </n-form-item>
+    <n-form-item :show-feedback="false">
+      <n-space justify="end" class="w-full">
+        <n-button type="primary" @click="handleCalculateButtonClick">计算</n-button>
+        <n-button type="warning" @click="handleClearButtonClick" secondary>清除</n-button>
+      </n-space>
+    </n-form-item>
+  </n-form>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { NForm, NFormItem, NGrid, NFormItemGi, NSpace, NInputNumber, NButton, FormRules, useMessage } from 'naive-ui'
+import { MAX_LNG, MIN_LNG, MAX_LAT, MIN_LAT } from './data'
+
+const emit = defineEmits([ 'submit', 'reset' ])
+
+const message = useMessage()
+
+interface ModelType {
+  start_point: {
+    lng: number | null,
+    lat: number | null,
+  }
+  end_point: {
+    lng: number | null,
+    lat: number | null,
+  }
+}
+const model = ref<ModelType>({
+  start_point: {
+    lng: null,
+    lat: null,
+  },
+  end_point: {
+    lng: null,
+    lat: null,
+  },
+})
+
+const rules: FormRules = {
+  start_point: {
+    lng: {
+      required: true,
+      message: '请输入经度',
+      trigger: ['input', 'blur'],
+      type: 'number',
+    },
+    lat: {
+      required: true,
+      message: '请输入纬度',
+      trigger: ['input', 'blur'],
+      type: 'number',
+    }
+  },
+  end_point: {
+    lng: {
+      required: true,
+      message: '请输入经度',
+      trigger: ['input', 'blur'],
+      type: 'number',
+    },
+    lat: {
+      required: true,
+      message: '请输入纬度',
+      trigger: ['input', 'blur'],
+      type: 'number',
+    }
+  }
+}
+
+const formRef = ref()
+const handleCalculateButtonClick = (e: MouseEvent) => {
+  e.preventDefault()
+
+  formRef.value?.validate((errors) => {
+    if (errors) {
+      message.error('验证失败')
+      return
+    }
+    
+    emit('submit', model.value)
+  })
+}
+
+const handleClearButtonClick = (e: MouseEvent) => {
+  e.preventDefault()
+
+  model.value.start_point.lng = null
+  model.value.start_point.lat = null
+  model.value.end_point.lng   = null
+  model.value.end_point.lat   = null
+  
+  emit('reset')
+}
+</script>
+
+<style lang="less" scoped>
+.n-form {
+  background-color: white;
+  border: 1px solid #ea4;
+  border-radius: 4px;
+  padding: 5px 12px;
+
+  .n-form-item {
+    color: whitesmoke;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/render/views/DistanceCalculationTool/ResultView.vue b/src/render/views/DistanceCalculationTool/ResultView.vue
new file mode 100644
index 0000000..e0f6f98
--- /dev/null
+++ b/src/render/views/DistanceCalculationTool/ResultView.vue
@@ -0,0 +1,36 @@
+<template>
+  <div v-if="!isNaN(distance)">两点相距{{distance}}米</div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import * as turf from '@turf/turf'
+
+const props = defineProps({
+  start_point: {
+    type: Array<number>,
+    default: null
+  },
+  end_point: {
+    type: Array<number>,
+    default: null
+  },
+})
+
+const options  = {units: 'meters'}
+const distance = computed(()=> {
+  if (!props.start_point || !props.end_point) return
+
+  const from = turf.point(props.start_point)
+  const to   = turf.point(props.end_point)
+
+  return turf.distance(from, to, options).toFixed(2)
+})
+</script>
+
+<style scoped lang="less">
+div {
+  font-size: clamp(5rem, 3.864rem + 2.27vw, 7.5rem);
+  padding-top: 10rem;
+}
+</style>
diff --git a/src/render/views/ElectronicScreenDesign/ClearButtonView.vue b/src/render/views/ElectronicScreenDesign/ClearButtonView.vue
new file mode 100644
index 0000000..db714e9
--- /dev/null
+++ b/src/render/views/ElectronicScreenDesign/ClearButtonView.vue
@@ -0,0 +1,24 @@
+<template>
+  <n-button :disabled="!serialPort.isOpen" type="primary" size="large" @click="onClick">清理屏幕</n-button>
+</template>
+
+<script setup lang="ts">
+import { NButton, useMessage } from 'naive-ui'
+import { useSerialPortStore } from '@/stores/serialPort'
+
+const emit = defineEmits([ 'clear' ])
+
+const message    = useMessage()
+
+const serialPort = useSerialPortStore()
+
+const onClick = () => {
+  if (!serialPort.isOpen) {
+    message.error('请连接并打开串口设备')
+    return
+  }
+
+  serialPort.write('$LEDCL,0*9\r\n')
+  emit('clear')
+}
+</script>
diff --git a/src/render/views/ElectronicScreenDesign/ColorPickerView.vue b/src/render/views/ElectronicScreenDesign/ColorPickerView.vue
new file mode 100644
index 0000000..a846204
--- /dev/null
+++ b/src/render/views/ElectronicScreenDesign/ColorPickerView.vue
@@ -0,0 +1,14 @@
+<template>
+  <input type="color" value="#ffffff" />
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="less" scoped>
+input {
+  width: 96px;
+  height: 40px;
+}
+</style>
\ No newline at end of file
diff --git a/src/render/views/ElectronicScreenDesign/LEDPanelView/components/LED.vue b/src/render/views/ElectronicScreenDesign/LEDPanelView/components/LED.vue
new file mode 100644
index 0000000..820a0e6
--- /dev/null
+++ b/src/render/views/ElectronicScreenDesign/LEDPanelView/components/LED.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="led">
+    <div ref="entryRef" class="h-full" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const entryRef    = ref(null)
+const changeColor = color => entryRef.value.style.backgroundColor = color
+
+defineExpose( { changeColor })
+</script>
+
+<style lang="less" scoped>
+.led {
+  padding: 0.3vw;
+  height: calc(100vw / 32);
+  background-color: white;
+  border: 2px solid black;
+
+  div {
+    background-color: black;
+    border-radius: 50%;
+    border: 1px solid black;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/render/views/ElectronicScreenDesign/LEDPanelView/data.ts b/src/render/views/ElectronicScreenDesign/LEDPanelView/data.ts
new file mode 100644
index 0000000..43cef52
--- /dev/null
+++ b/src/render/views/ElectronicScreenDesign/LEDPanelView/data.ts
@@ -0,0 +1 @@
+export const ROWS = 8, COLS = 32
diff --git a/src/render/views/ElectronicScreenDesign/LEDPanelView/index.ts b/src/render/views/ElectronicScreenDesign/LEDPanelView/index.ts
new file mode 100644
index 0000000..5be0210
--- /dev/null
+++ b/src/render/views/ElectronicScreenDesign/LEDPanelView/index.ts
@@ -0,0 +1 @@
+export { default as LEDPanelView } from './index.vue'
diff --git a/src/render/views/ElectronicScreenDesign/LEDPanelView/index.vue b/src/render/views/ElectronicScreenDesign/LEDPanelView/index.vue
new file mode 100644
index 0000000..fa958a6
--- /dev/null
+++ b/src/render/views/ElectronicScreenDesign/LEDPanelView/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <n-grid x-gap="0" :cols="COLS">
+    <n-gi v-for="n in COLS * ROWS" :key="n">
+      <LED ref="ledRefs" @click="onClick(n - 1)" />
+    </n-gi>
+  </n-grid>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NGrid, NGi, useMessage } from 'naive-ui'
+import convert from 'color-convert'
+import LED from './components/LED.vue'
+import { useSerialPortStore } from '@/stores/serialPort'
+import { ROWS, COLS } from './data'
+
+const message = useMessage()
+
+let color
+const changeColor = (value) => {
+  if (!value) return
+
+  color = value
+}
+
+
+const ledRefs = ref(null)
+const clear   = () => {
+  ledRefs.value.forEach(ledRef => {
+    ledRef.changeColor('#000000')
+  });
+}
+const serialPort = useSerialPortStore()
+const onClick = (index: number) => {
+  if (!serialPort.isOpen) {
+    message.error('请连接并打开串口设备')
+    return
+  }
+
+  if (!color) return
+  ledRefs.value[index].changeColor(color)
+
+  const x = index % COLS
+  const y = Math.floor(index / COLS)
+
+  const rgb = convert.hex.rgb(color)
+  
+  let cmd = `$LEDPX,${x},${y},${rgb[0]},${rgb[1]},${rgb[2]}*`
+  cmd += cmd.length
+  cmd += '\r\n'
+  
+  serialPort.write(cmd)
+}
+
+defineExpose( { changeColor, clear })
+</script>
diff --git a/src/render/views/FontDesign/DotMatrixScreenDisplayView/LEDPanelView/components/LED.vue b/src/render/views/FontDesign/DotMatrixScreenDisplayView/LEDPanelView/components/LED.vue
new file mode 100644
index 0000000..1c1bdf3
--- /dev/null
+++ b/src/render/views/FontDesign/DotMatrixScreenDisplayView/LEDPanelView/components/LED.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="led">
+    <div class="h-full" />
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style lang="less" scoped>
+.led {
+  padding: 0.3vw;
+  height: calc(100vw / 32);
+  background-color: white;
+  border: 2px solid black;
+
+  div {
+    background-color: black;
+    border-radius: 50%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/render/views/FontDesign/DotMatrixScreenDisplayView/LEDPanelView/data.ts b/src/render/views/FontDesign/DotMatrixScreenDisplayView/LEDPanelView/data.ts
new file mode 100644
index 0000000..43cef52
--- /dev/null
+++ b/src/render/views/FontDesign/DotMatrixScreenDisplayView/LEDPanelView/data.ts
@@ -0,0 +1 @@
+export const ROWS = 8, COLS = 32
diff --git a/src/render/views/FontDesign/DotMatrixScreenDisplayView/LEDPanelView/index.ts b/src/render/views/FontDesign/DotMatrixScreenDisplayView/LEDPanelView/index.ts
new file mode 100644
index 0000000..5be0210
--- /dev/null
+++ b/src/render/views/FontDesign/DotMatrixScreenDisplayView/LEDPanelView/index.ts
@@ -0,0 +1 @@
+export { default as LEDPanelView } from './index.vue'
diff --git a/src/render/views/FontDesign/DotMatrixScreenDisplayView/LEDPanelView/index.vue b/src/render/views/FontDesign/DotMatrixScreenDisplayView/LEDPanelView/index.vue
new file mode 100644
index 0000000..79c369c
--- /dev/null
+++ b/src/render/views/FontDesign/DotMatrixScreenDisplayView/LEDPanelView/index.vue
@@ -0,0 +1,62 @@
+<template>
+  <n-grid x-gap="0" :cols="COLS">
+    <n-gi v-for="n in COLS * ROWS" :key="n">
+      <LED ref="ledRefs" />
+    </n-gi>
+  </n-grid>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NGrid, NGi } from 'naive-ui'
+import LED from './components/LED.vue'
+import { ROWS, COLS } from './data'
+
+const ledRefs = ref()
+
+const showChar  = (index, data, color) => {
+  if (!data) return
+
+  clearArea(index)
+
+  if (data.length === 15) {
+    for (let i = 0; i < data.length; i++) {
+      if (data[i]) {
+        const x = Math.floor(i / 3) 
+        const y = i % 3 + index * 4
+
+        ledRefs.value[x * COLS + y].$el.children[0].style.backgroundColor = color
+      }
+    }
+  }
+
+  
+  if (data.length === 28) {
+    for (let i = 0; i < data.length; i++) {
+      if (data[i]) {
+        const x = Math.floor(i / 4) 
+        const y = i % 4 + index * 4
+
+        ledRefs.value[x * COLS + y].$el.children[0].style.backgroundColor = color
+      }
+    }
+  }
+}
+
+const clearArea = (areaIndex) => {
+  for (let i = 0; i < 7; i++) {
+    for (let j = 0; j < 4; j++) {
+      const ledIndex = i * COLS + areaIndex * 4 + j
+      ledRefs.value[ledIndex].$el.children[0].style.backgroundColor = 'black'
+    }
+  }
+}
+
+const clearAll  = () => {
+  ledRefs.value.forEach(ledRef => {
+    ledRef.$el.children[0].style.backgroundColor = 'black'
+  });
+}
+
+defineExpose( { showChar, clearArea, clearAll })
+</script>
diff --git a/src/render/views/FontDesign/DotMatrixScreenDisplayView/index.ts b/src/render/views/FontDesign/DotMatrixScreenDisplayView/index.ts
new file mode 100644
index 0000000..aeb741b
--- /dev/null
+++ b/src/render/views/FontDesign/DotMatrixScreenDisplayView/index.ts
@@ -0,0 +1 @@
+export { default as DotMatrixScreenDisplayView } from './index.vue'
diff --git a/src/render/views/FontDesign/DotMatrixScreenDisplayView/index.vue b/src/render/views/FontDesign/DotMatrixScreenDisplayView/index.vue
new file mode 100644
index 0000000..28110a3
--- /dev/null
+++ b/src/render/views/FontDesign/DotMatrixScreenDisplayView/index.vue
@@ -0,0 +1,116 @@
+<template>
+  <n-space vertical justify="space-around" class="dot_matrix_screen_display">
+    
+    <n-grid :cols="count" class="top-container">
+      <n-gi v-for="n in count">
+        <n-input
+          :disabled="!hasFont"
+          type="text"
+          maxlength="1"
+          placeholder=""
+          v-model:value="inputValues[n - 1]"
+          :allow-input="onlyAllow" />
+      </n-gi>
+    </n-grid>
+
+    <LEDPanelView ref="ledPanelViewRef" />
+  
+    <n-space :item-style="itemStyle" class="bottom-container">
+      <input type="color" v-model="color" />
+
+      <n-space vertical>
+        <div>
+          <n-text v-if="!hasFont">字库未创建，请先创建字库</n-text>
+          
+          <n-radio-group v-else v-model:value="fontLibrarySelected" name="radiogroup">
+            <n-space>
+              <n-radio v-for="value, key in fontTypes" :key="key" :value="key">
+                {{ value }}
+              </n-radio>
+            </n-space>
+          </n-radio-group>
+        </div>
+
+        <n-button type="primary" size="large" @click="onClearBtnClick">清理屏幕</n-button>
+      </n-space>
+    </n-space>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+import { NSpace, NGrid, NGi, NInput, NRadioGroup, NRadio, NText, NButton } from 'naive-ui'
+import { LEDPanelView } from './LEDPanelView'
+import { hasIpcRenderer } from '@/utils'
+
+const itemStyle = { textAlign: 'center', flex: '1 1 50%'}
+
+const count     = 8
+const hasFont   = ref(false)
+const chars     = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ':', '.', '-']
+const onlyAllow = (value: string) => !value || chars.indexOf(value) >= 0
+
+const ledPanelViewRef = ref()
+const inputValues = ref(new Array(count).fill(null))
+for (let i = 0; i < count; i++) {
+  watch(
+    () => inputValues.value[i],
+    value => {
+      if (!value) {
+        ledPanelViewRef.value.clearArea(i)
+      } else {
+        const charData = fontLibrary[fontLibrarySelected.value][value]
+        ledPanelViewRef.value.showChar(i, charData, color.value)
+      }
+    }
+  )
+}
+
+const color     = ref('#eeeeee')
+
+const fontTypes           = { font35: '3*5',  font47: '4*7' }
+const fontLibrarySelected = ref(Object.keys(fontTypes)[0])
+let fontLibrary
+
+
+
+onMounted(() => {
+  if (!hasIpcRenderer()) return
+
+  const { data } = window.ipcRenderer.sendSync('LOAD_FONT_LIBRARY')
+  if (!data) return
+
+  fontLibrary = JSON.parse(data)
+  hasFont.value = true
+})
+
+const onClearBtnClick = () => {
+  inputValues.value.fill(null)
+}
+</script>
+
+<style scoped lang="less">
+.dot_matrix_screen_display {
+
+  .top-container {
+    .n-input {
+      height: calc(100vw / 8);
+
+      :deep(input) {
+        height: 100%;
+        font-size: 56px;
+        text-align: center;
+      }
+    }
+  }
+
+  .bottom-container {
+    gap: 0 !important;
+
+    input {
+      margin-top: 24px;
+      width: 96px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/render/views/FontDesign/EditFontView/Font35View/DotMatrixScreen35View.vue b/src/render/views/FontDesign/EditFontView/Font35View/DotMatrixScreen35View.vue
new file mode 100644
index 0000000..fb1e40f
--- /dev/null
+++ b/src/render/views/FontDesign/EditFontView/Font35View/DotMatrixScreen35View.vue
@@ -0,0 +1,15 @@
+<template>
+  <n-grid cols="3">
+    <n-gi v-for="n, index in 15" :key="n">
+      <LED :active="data[index]" @click="onClick(index)" />
+    </n-gi>
+  </n-grid>
+</template>
+
+<script setup lang="ts">
+import { NGrid, NGi } from 'naive-ui'
+import LED from '../../LED.vue'
+
+const props   = defineProps({ data: Array })
+const onClick = (index) => props.data[index] = !props.data[index]
+</script>
diff --git a/src/render/views/FontDesign/EditFontView/Font35View/index.ts b/src/render/views/FontDesign/EditFontView/Font35View/index.ts
new file mode 100644
index 0000000..ced59a7
--- /dev/null
+++ b/src/render/views/FontDesign/EditFontView/Font35View/index.ts
@@ -0,0 +1 @@
+export { default as Font35View } from './index.vue'
diff --git a/src/render/views/FontDesign/EditFontView/Font35View/index.vue b/src/render/views/FontDesign/EditFontView/Font35View/index.vue
new file mode 100644
index 0000000..fbeaa16
--- /dev/null
+++ b/src/render/views/FontDesign/EditFontView/Font35View/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <n-grid cols="13" class="font_35_view_container">
+    <n-gi v-for="font, index in fonts" :key="index"><br>{{ font }}</n-gi>
+    <n-gi v-for="font, index in fonts" :key="index">
+      <DotMatrixScreen35View :data="font35Library[font]" />
+    </n-gi>
+  </n-grid>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NGrid, NGi } from 'naive-ui'
+import DotMatrixScreen35View from './DotMatrixScreen35View.vue'
+
+const fonts = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ':', '.', '-']
+
+let defaultValue = {}
+fonts.forEach((key: string) => {
+  defaultValue[key] = new Array(15).fill(false)
+})
+const font35Library   = ref(defaultValue)
+
+
+const getFontLibrary  = () => font35Library
+const loadFontLibrary = (value) => {
+  if (!value) return
+
+  font35Library.value = value
+}
+
+defineExpose({ getFontLibrary, loadFontLibrary })
+</script>
+
+<style scoped lang="less">
+.font_35_view_container {
+  >div {
+    padding: 0 calc(100vw / 13 / 4 / 2);
+    border-right: gray dashed 1px;
+    font-size: 24px;
+  }
+}
+</style>
diff --git a/src/render/views/FontDesign/EditFontView/Font47View/DotMatrixScreen47View.vue b/src/render/views/FontDesign/EditFontView/Font47View/DotMatrixScreen47View.vue
new file mode 100644
index 0000000..50907ff
--- /dev/null
+++ b/src/render/views/FontDesign/EditFontView/Font47View/DotMatrixScreen47View.vue
@@ -0,0 +1,15 @@
+<template>
+  <n-grid cols="4">
+    <n-gi v-for="n, index in 28" :key="n">
+      <LED :active="data[index]" @click="onClick(index)" />
+    </n-gi>
+  </n-grid>
+</template>
+
+<script setup lang="ts">
+import { NGrid, NGi } from 'naive-ui'
+import LED from '../../LED.vue'
+
+const props   = defineProps({ data: Array })
+const onClick = (index) => props.data[index] = !props.data[index]
+</script>
diff --git a/src/render/views/FontDesign/EditFontView/Font47View/index.ts b/src/render/views/FontDesign/EditFontView/Font47View/index.ts
new file mode 100644
index 0000000..de524ff
--- /dev/null
+++ b/src/render/views/FontDesign/EditFontView/Font47View/index.ts
@@ -0,0 +1 @@
+export { default as Font47View } from './index.vue'
diff --git a/src/render/views/FontDesign/EditFontView/Font47View/index.vue b/src/render/views/FontDesign/EditFontView/Font47View/index.vue
new file mode 100644
index 0000000..24d9ff7
--- /dev/null
+++ b/src/render/views/FontDesign/EditFontView/Font47View/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <n-grid cols="13">
+    <n-gi v-for="font, index in fonts" :key="index"><br>{{ font }}</n-gi>
+    <n-gi v-for="font, index in fonts" :key="index">
+      <DotMatrixScreen47View :data="font47Library[font]" />
+    </n-gi>
+  </n-grid>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NGrid, NGi } from 'naive-ui'
+import DotMatrixScreen47View from './DotMatrixScreen47View.vue'
+
+const fonts = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ':', '.', '-']
+
+let defaultValue = {}
+fonts.forEach((key: string) => {
+  defaultValue[key] = new Array(28).fill(false)
+})
+const font47Library   = ref(defaultValue)
+
+
+const getFontLibrary  = () => font47Library
+const loadFontLibrary = (value) => {
+  if (!value) return
+
+  font47Library.value = value
+}
+
+defineExpose({ getFontLibrary, loadFontLibrary })
+</script>
+
+<style scoped lang="less">
+.n-grid {
+  >div {
+    border-right: gray dashed 1px;
+    font-size: 24px;
+  }
+}
+</style>
diff --git a/src/render/views/FontDesign/EditFontView/index.ts b/src/render/views/FontDesign/EditFontView/index.ts
new file mode 100644
index 0000000..4af19ed
--- /dev/null
+++ b/src/render/views/FontDesign/EditFontView/index.ts
@@ -0,0 +1 @@
+export { default as EditFontView } from './index.vue'
diff --git a/src/render/views/FontDesign/EditFontView/index.vue b/src/render/views/FontDesign/EditFontView/index.vue
new file mode 100644
index 0000000..c443b03
--- /dev/null
+++ b/src/render/views/FontDesign/EditFontView/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <n-space vertical justify="space-around" class="text-center">
+    <n-text>3*5矩阵显示效果设计</n-text>
+    <Font35View ref="font35ViewRef" />
+    <n-text>4*7矩阵显示效果设计</n-text>
+    <Font47View ref="font47ViewRef" />
+    <n-button size="large" type="primary" @click="onClick">保存字库</n-button>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { NSpace, NText, NButton, useMessage, useDialog } from 'naive-ui'
+import { Font35View } from './Font35View'
+import { Font47View } from './Font47View'
+import { hasIpcRenderer } from '@/utils'
+
+const message = useMessage()
+const dialog  = useDialog() 
+
+const font35ViewRef = ref()
+const font47ViewRef = ref()
+const onClick = () => {
+  if (!hasIpcRenderer()) return
+
+  const font35Library = font35ViewRef.value.getFontLibrary()
+  const font47Library = font47ViewRef.value.getFontLibrary()
+  
+  const fontLibrary = {
+    font35: font35Library.value,
+    font47: font47Library.value,
+  }
+  const { err } = window.ipcRenderer.sendSync('SAVE_FONT_LIBRARY', JSON.stringify(fontLibrary))
+  if (err) {
+    message.error(err)
+    return
+  }
+
+  dialog.success({
+    title: '系统消息',
+    content: '保存字库成功，重启软件后生效',
+    positiveText: '确定',
+    closable: false,
+    maskClosable: false,
+  })
+}
+
+onMounted(() => {
+  if (!hasIpcRenderer()) return
+
+  const { data } = window.ipcRenderer.sendSync('LOAD_FONT_LIBRARY')
+  if (!data) return
+
+  const fontLibrary = JSON.parse(data)
+  font35ViewRef.value.loadFontLibrary(fontLibrary.font35)
+  font47ViewRef.value.loadFontLibrary(fontLibrary.font47)
+})
+</script>
diff --git a/src/render/views/FontDesign/LED.vue b/src/render/views/FontDesign/LED.vue
new file mode 100644
index 0000000..0f95da6
--- /dev/null
+++ b/src/render/views/FontDesign/LED.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="led">
+    <div class="h-full" :class="active ? 'active' : ''" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps({ active: Boolean })
+// const active = ref(false)
+</script>
+
+<style lang="less" scoped>
+.led {
+  padding: 0.3vw;
+  height: calc(100vw / 52);
+  background-color: white;
+  border: 2px solid black;
+
+  div {
+    background-color: black;
+    border-radius: 50%;
+
+    &.active {
+      background-color: red;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/render/views/GeneratingConstellationChart/ConstellationChartView.vue b/src/render/views/GeneratingConstellationChart/ConstellationChartView.vue
new file mode 100644
index 0000000..e01daf2
--- /dev/null
+++ b/src/render/views/GeneratingConstellationChart/ConstellationChartView.vue
@@ -0,0 +1,40 @@
+<template>
+  <n-space vertical class="h-full" :wrap-item="false">
+    <Planisphere ref="planisphereRref" class="planisphere" />
+    <CNR ref="cnrRef" class="cnr" />
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NSpace } from 'naive-ui'
+import { Planisphere } from '@/components/Charts/Planisphere'
+import { CNR } from '@/components/Charts/CNR'
+import { Satellite } from '@/api/satellite/type.d'
+
+
+const cnrRef          = ref()
+const planisphereRref = ref()
+
+const update     = (data: Array<Satellite>) => {
+  cnrRef.value.update(data)
+  planisphereRref.value.update(data)
+}
+
+const clear = () => {
+  cnrRef.value.clear()
+  planisphereRref.value.clear()
+}
+
+defineExpose({ update, clear })
+</script>
+
+<style scoped lang="less">
+.planisphere {
+  height: 70%;
+}
+
+.cnr {
+  height: 30%;
+}
+</style>
diff --git a/src/render/views/GeneratingConstellationChart/SatelliteDataFormView/ControlButtonGroupView.vue b/src/render/views/GeneratingConstellationChart/SatelliteDataFormView/ControlButtonGroupView.vue
new file mode 100644
index 0000000..65c929a
--- /dev/null
+++ b/src/render/views/GeneratingConstellationChart/SatelliteDataFormView/ControlButtonGroupView.vue
@@ -0,0 +1,62 @@
+<template>
+  <n-space justify="space-around" class="control-button-group-view">
+    <n-button size="large" @click="onAdd"   >添加</n-button>
+    <n-button size="large" @click="onSubmit">提交</n-button>
+    <n-button size="large" @click="onClear" >清除</n-button>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+import { NSpace, NButton, useMessage } from 'naive-ui'
+import { Satellite } from '@/api/satellite/type.d'
+
+const emit = defineEmits([ 'submit', 'clear' ])
+
+const message = useMessage()
+
+const satellites = inject('satellites')
+const onAdd      = () => satellites.value.push(new Satellite())
+const onClear    = () => {
+  satellites.value.splice(1, satellites.value.length - 1)
+  satellites.value[0].svid = null
+  satellites.value[0].cn0  = null
+  satellites.value[0].ele  = null
+  satellites.value[0].az   = null
+
+  emit('clear')
+}
+const onSubmit   = () => {
+  try {
+    satellites.value.forEach(satellite => {
+      if (!satellite.svid || isNaN(satellite.svid)) {
+        throw new Error('卫星编号数据有误')
+      }
+      
+      if (!satellite.cn0 || isNaN(satellite.cn0)) {
+        throw new Error('载噪比数据有误')
+      }
+      
+      if (!satellite.ele || isNaN(satellite.ele)) {
+        throw new Error('仰角数据有误')
+      }
+      
+      if (!satellite.az || isNaN(satellite.az)) {
+        throw new Error('方位角数据有误')
+      }
+    })
+
+    emit('submit')
+  } catch (e) {
+    console.error(e)
+    message.error(e.message)
+  }
+}
+</script>
+
+<style scoped lang="less">
+.control-button-group-view {
+  padding: 24px;
+  border-bottom: 1px solid var(--n-border-color);
+}
+</style>
diff --git a/src/render/views/GeneratingConstellationChart/SatelliteDataFormView/DataFormView/SatelliteDataFormItem.vue b/src/render/views/GeneratingConstellationChart/SatelliteDataFormView/DataFormView/SatelliteDataFormItem.vue
new file mode 100644
index 0000000..823b4e6
--- /dev/null
+++ b/src/render/views/GeneratingConstellationChart/SatelliteDataFormView/DataFormView/SatelliteDataFormItem.vue
@@ -0,0 +1,32 @@
+<template>
+  <n-grid :cols="24" :x-gap="18">
+    <n-form-item-gi ref="svidFormItemGiRef" :span="12" label="编　号">
+      <n-input-number :show-button="false" v-model:value="satellite.svid" placeholder="请输入卫星编号" />
+    </n-form-item-gi>
+    <n-form-item-gi :span="12" label="载噪比" path="cn0">
+      <n-input-number :show-button="false" v-model:value="satellite.cn0"  placeholder="请输入载噪比" />
+    </n-form-item-gi>
+    <n-form-item-gi :span="12" label="仰　角" path="ele">
+      <n-input-number :show-button="false" v-model:value="satellite.ele"  placeholder="请输入仰角" min="0" max="90" />
+    </n-form-item-gi>
+    <n-form-item-gi :span="12" label="方位角" path="az">
+      <n-input-number :show-button="false" v-model:value="satellite.az"   placeholder="请输入方位角" min="0" max="360" />
+    </n-form-item-gi>
+  </n-grid>
+</template>
+
+<script setup lang="ts">
+import { NGrid, NFormItemGi, NInputNumber } from 'naive-ui'
+import { Satellite } from '@/api/satellite/type.d'
+
+defineProps({
+  satellite: Satellite
+})
+</script>
+
+<style scoped lang="less">
+.n-grid {
+  padding: 24px 0;
+  border-bottom: 1px solid var(--n-border-color);
+}
+</style>
\ No newline at end of file
diff --git a/src/render/views/GeneratingConstellationChart/SatelliteDataFormView/DataFormView/index.ts b/src/render/views/GeneratingConstellationChart/SatelliteDataFormView/DataFormView/index.ts
new file mode 100644
index 0000000..3044866
--- /dev/null
+++ b/src/render/views/GeneratingConstellationChart/SatelliteDataFormView/DataFormView/index.ts
@@ -0,0 +1 @@
+export { default as DataFormView } from './index.vue'
diff --git a/src/render/views/GeneratingConstellationChart/SatelliteDataFormView/DataFormView/index.vue b/src/render/views/GeneratingConstellationChart/SatelliteDataFormView/DataFormView/index.vue
new file mode 100644
index 0000000..3af17ec
--- /dev/null
+++ b/src/render/views/GeneratingConstellationChart/SatelliteDataFormView/DataFormView/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <n-scrollbar>
+    <n-form
+      size="large"
+      class="data-form-view"
+    >
+      <SatelliteDataFormItem v-for="(satellite, index) in satellites" v-key="index" :index="index" :satellite="satellite" />
+      
+    </n-form>
+  </n-scrollbar>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+import { NForm, NScrollbar } from 'naive-ui'
+import SatelliteDataFormItem from './SatelliteDataFormItem.vue'
+
+const satellites = inject('satellites')
+</script>
+
+<style scoped lang="less">
+.data-form-view {
+  margin: 0 24px;
+}
+</style>
\ No newline at end of file
diff --git a/src/render/views/GeneratingConstellationChart/SatelliteDataFormView/index.ts b/src/render/views/GeneratingConstellationChart/SatelliteDataFormView/index.ts
new file mode 100644
index 0000000..128f2cc
--- /dev/null
+++ b/src/render/views/GeneratingConstellationChart/SatelliteDataFormView/index.ts
@@ -0,0 +1 @@
+export { default as SatelliteDataFormView } from './index.vue'
diff --git a/src/render/views/GeneratingConstellationChart/SatelliteDataFormView/index.vue b/src/render/views/GeneratingConstellationChart/SatelliteDataFormView/index.vue
new file mode 100644
index 0000000..fb29973
--- /dev/null
+++ b/src/render/views/GeneratingConstellationChart/SatelliteDataFormView/index.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="h-full flex flex-col">
+    <ControlButtonGroupView @submit="emit('submit')" @clear="emit('clear')" />
+    <DataFormView class="data-form-view" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DataFormView } from './DataFormView'
+import ControlButtonGroupView from './ControlButtonGroupView.vue'
+
+const emit = defineEmits([ 'submit', 'clear' ])
+</script>
+
+<style scoped lang="less">
+.data-form-view {
+  flex-grow: 1;
+}
+</style>
diff --git a/src/render/views/GestureRecognition/GestureAnimationView.vue b/src/render/views/GestureRecognition/GestureAnimationView.vue
new file mode 100644
index 0000000..71a3c28
--- /dev/null
+++ b/src/render/views/GestureRecognition/GestureAnimationView.vue
@@ -0,0 +1,54 @@
+<template>
+  <img :src="src">
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import left  from '@/assets/left.png'
+import right from '@/assets/right.png'
+
+import { LineBreakParser } from '@/utils/parser'
+import { useSerialPortStore, SerialPortEventType } from '@/stores/serialPort'
+
+let timeOutID
+const src           = ref(null)
+const showAnimation = (type: number) => {
+  if (timeOutID) {
+    clearInterval(timeOutID)
+  }
+
+  switch (type) {
+    case 0:
+      src.value = left
+      break;
+    case 1:
+      src.value = right
+      break;
+  }
+
+  timeOutID = setTimeout(() => src.value = null, 1000)
+}
+
+const decoder = new TextDecoder()
+const parser  = new LineBreakParser()
+const onSerialPortData = (data: Uint8Array) => {
+  const lineArr = parser.parse(decoder.decode(data))
+  if (lineArr.length === 0) return
+
+  const infoArr = lineArr[0].split(',')
+  if (infoArr.length != 2) return
+  if (infoArr[0] != '@GESTE') return
+
+  showAnimation(parseInt(infoArr[1][0]))
+}
+
+const serialPort = useSerialPortStore()
+serialPort.addEventListener(SerialPortEventType.data, onSerialPortData)
+</script>
+
+<style lang="less" scoped>
+img {
+  width: 65%;
+  height: auto;
+}
+</style>
diff --git a/src/render/views/GestureRecognition/ParamConfigView/data.ts b/src/render/views/GestureRecognition/ParamConfigView/data.ts
new file mode 100644
index 0000000..f75f5c5
--- /dev/null
+++ b/src/render/views/GestureRecognition/ParamConfigView/data.ts
@@ -0,0 +1,16 @@
+export const MAX_DISTANCE    = -300
+export const MIN_DISTANCE    = -900
+
+export const timeOutOptions  = [200, 600, 1000, 1500, 2000].map(
+  (v) => ({
+    label: v,
+    value: v
+  })
+)
+
+export const intervalOptions = [0.5, 1, 2, 3].map(
+  (v) => ({
+    label: v,
+    value: v
+  })
+)
\ No newline at end of file
diff --git a/src/render/views/GestureRecognition/ParamConfigView/index.ts b/src/render/views/GestureRecognition/ParamConfigView/index.ts
new file mode 100644
index 0000000..338fde4
--- /dev/null
+++ b/src/render/views/GestureRecognition/ParamConfigView/index.ts
@@ -0,0 +1 @@
+export { default as ParamConfigView } from './index.vue'
diff --git a/src/render/views/GestureRecognition/ParamConfigView/index.vue b/src/render/views/GestureRecognition/ParamConfigView/index.vue
new file mode 100644
index 0000000..2bb8ea8
--- /dev/null
+++ b/src/render/views/GestureRecognition/ParamConfigView/index.vue
@@ -0,0 +1,117 @@
+<template>
+  <n-space vertical justify="space-around" align="center" item-style="width: 50%;" class="param-config-view">
+
+    <n-form-item size="large" label-placement="left" label="距　离：" path="inputValue">
+      <n-slider :max="MAX_DISTANCE" :min="MIN_DISTANCE" v-model:value="model.distance" :tooltip="false" :step="10">
+        <template #thumb>
+          <n-button type="primary" size="large" circle />
+        </template>
+      </n-slider>
+    </n-form-item>
+
+    <n-form-item size="large" label-placement="left" label="超　时：" path="timeOut">
+      <n-select
+        placeholder="请选择超时时间"
+        v-model:value="model.timeOut"
+        :options="timeOutOptions"
+      />
+
+      <template #feedback>
+        单位：毫秒
+        <br>
+        遮挡物离开第一个红外传感器和遮挡第二个红外传感器之间的时间，超过这个时间则不会触发动画效果，建议值: 200
+      </template>
+    </n-form-item>
+
+    <n-form-item size="large" label-placement="left" label="间　隔：" path="interval">
+      <n-select
+        placeholder="请选择间隔时间"
+        v-model:value="model.interval"
+        :options="intervalOptions"
+      />
+
+      <template #feedback>
+        单位：秒
+        <br>
+        两次动画之间的时间间隔，小于这个值不会触发动画，建议值: 1
+      </template>
+    </n-form-item>
+
+    <div class="text-right">
+      <n-button :disabled="!serialPort.isOpen" type="primary" size="large" @click="onClick">发送配置指令</n-button>
+    </div>
+    
+  </n-space>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { NSpace, NFormItem, NSlider, NSelect, NButton, useMessage } from 'naive-ui'
+import { MAX_DISTANCE, MIN_DISTANCE, timeOutOptions, intervalOptions } from './data'
+import { useSerialPortStore, SerialPortEventType } from '@/stores/serialPort'
+import { LineBreakParser } from '@/utils/parser'
+
+const message = useMessage()
+
+const model = ref({
+  distance: -300,
+  timeOut : null,
+  interval: null,
+})
+
+const serialPort = useSerialPortStore()
+const onClick = () => {
+  if (!serialPort.isOpen) {
+    message.error('请先连接无线通信模块并打开串口')
+    return
+  }
+
+  const value = model.value
+  if (!value.timeOut) {
+    message.error('请设置超时时间')
+    return
+  }
+
+  if (!value.interval) {
+    message.error('请设置间隔时间')
+    return
+  }
+
+  let cmd = `$GESTE,0,1,${-value.distance},${value.timeOut},5,${value.interval},0,1*`
+  cmd += cmd.length
+  cmd += '\r\n'
+  
+  serialPort.write(cmd)
+}
+
+const decoder          = new TextDecoder()
+const parser           = new LineBreakParser()
+const onSerialPortData = (data: Uint8Array) => {
+  const result: Array<String>  = parser.parse(decoder.decode(data))
+  if (result.length === 0) return
+  
+  const infoArr: Array<String> = result[0].split(',')
+  if (infoArr.length != 2) return
+  if (infoArr[0] != '@RESULT') return
+
+  if (parseInt(infoArr[1][0]) === 0) {
+    message.success('配置成功')
+  } else {
+    message.error('配置失败')
+  }
+}
+
+onMounted(() => serialPort.addEventListener(SerialPortEventType.data, onSerialPortData))
+</script>
+
+<style lang="less" scoped>
+.param-config-view {
+  :deep(.n-form-item-label) {
+    font-size: 28px;
+  }
+
+  :deep(.n-form-item-feedback-wrapper) {
+    font-size: 20px;
+  }
+}
+</style>
diff --git a/src/render/views/NixieTubeConfiguration/NixieTubeControlView/components/BlockLED.vue b/src/render/views/NixieTubeConfiguration/NixieTubeControlView/components/BlockLED.vue
new file mode 100644
index 0000000..cb214a2
--- /dev/null
+++ b/src/render/views/NixieTubeConfiguration/NixieTubeControlView/components/BlockLED.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="block-led" :class="{ active: active }" @click="onClick">
+    <div class="befor-triangle"></div>
+    <div v-if="type" class="rectangle"></div>
+    <div class="after-triangle"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { inject, computed } from 'vue'
+
+export interface Props {
+  type?: number
+  secondaryIndex?: number
+  tertiaryIndex?: number
+}
+const props = withDefaults(defineProps<Props>(), { type: 1 })
+
+
+const dataArr        = inject('dataArr')
+const current        = inject('current')
+const secondaryIndex = props.secondaryIndex
+const tertiaryIndex  = props.tertiaryIndex
+
+
+
+const active  = computed(() => dataArr.value[current.value][secondaryIndex][tertiaryIndex])
+const onClick = () => {
+  if (dataArr.value[current.value][secondaryIndex][tertiaryIndex] === 0) {
+    dataArr.value[current.value][secondaryIndex][tertiaryIndex] = 1
+  } else {
+    dataArr.value[current.value][secondaryIndex][tertiaryIndex] = 0
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.block-led {
+
+  height: calc(var(--led-short-side-half-width) * 2);
+
+  div {
+    display: inline-block;
+
+    &.befor-triangle {
+      border: var(--led-short-side-half-width) solid transparent;
+      border-right-color: var(--inactive-color);
+    }
+
+    &.rectangle {
+      width:  calc(var(--led-short-side-half-width) * 6);
+      height: calc(var(--led-short-side-half-width) * 2);
+      background-color: var(--inactive-color);
+    }
+
+    &.after-triangle {
+      border: var(--led-short-side-half-width) solid transparent;
+      border-left-color: var(--inactive-color);
+    }
+  }
+
+  &.active {
+
+    div {
+      display: inline-block;
+
+      &.befor-triangle {
+        border-right-color: var(--active-color);
+      }
+
+      &.rectangle {
+        background-color: var(--active-color);
+      }
+
+      &.after-triangle {
+        border-left-color: var(--active-color);
+      }
+    }
+
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/render/views/NixieTubeConfiguration/NixieTubeControlView/components/CutOffDot.vue b/src/render/views/NixieTubeConfiguration/NixieTubeControlView/components/CutOffDot.vue
new file mode 100644
index 0000000..a404720
--- /dev/null
+++ b/src/render/views/NixieTubeConfiguration/NixieTubeControlView/components/CutOffDot.vue
@@ -0,0 +1,16 @@
+<template>
+  <n-space vertical justify="space-around" class="cut-off-dot-view">
+    <DotLED v-for="i in 2" :key="i" :secondaryIndex="2 - i" :tertiaryIndex="0" />
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { NSpace } from 'naive-ui'
+import DotLED from './DotLED.vue'
+</script>
+
+<style lang="less" scoped>
+.cut-off-dot-view {
+  height: calc(var(--led-short-side-half-width) * 2 * 8)
+}
+</style>
diff --git a/src/render/views/NixieTubeConfiguration/NixieTubeControlView/components/DigitalTube.vue b/src/render/views/NixieTubeConfiguration/NixieTubeControlView/components/DigitalTube.vue
new file mode 100644
index 0000000..421c878
--- /dev/null
+++ b/src/render/views/NixieTubeConfiguration/NixieTubeControlView/components/DigitalTube.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="digital-tube">
+    <BlockLED v-for="i in 7" :key="i" :secondaryIndex="secondaryIndex" :tertiaryIndex="i" :class="getClass(i)" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import BlockLED from './BlockLED.vue'
+
+
+defineProps({
+  secondaryIndex: Number,
+})
+
+const getClass = (i: number) => {
+  switch (i) {
+    case 1:
+      return 'top-horizontal-led'
+    case 2:
+      return 'top-right-vertical-led'
+    case 3:
+      return 'bottom-right-vertical-led'
+    case 4:
+      return 'bottom-horizontal-led'
+    case 5:
+      return 'bottom-left-vertical-led'
+    case 6:
+      return 'top-left-vertical-led'
+    case 7:
+      return 'middle-horizontal-led'
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.digital-tube {
+
+  position: relative;
+  width: calc(var(--led-short-side-half-width) * 10);
+  height: calc(var(--led-short-side-half-width) * 18);
+
+  :deep(.block-led) {
+    position: absolute;
+
+    &.top-horizontal-led {
+      top: 0;
+    }
+    &.middle-horizontal-led {
+      top: calc(var(--led-short-side-half-width) * 8);
+    }
+    &.bottom-horizontal-led {
+      bottom: 0;
+    }
+
+    &.top-left-vertical-led {
+      rotate: 90deg;
+      top: calc(var(--led-short-side-half-width) * 4);
+      left: calc(var(--led-short-side-half-width) * -4);
+    }
+
+    &.top-right-vertical-led {
+      rotate: 90deg;
+      top: calc(var(--led-short-side-half-width) * 4);
+      right: calc(var(--led-short-side-half-width) * -4);
+    }
+
+    &.bottom-left-vertical-led {
+      rotate: 90deg;
+      bottom: calc(var(--led-short-side-half-width) * 4);
+      left: calc(var(--led-short-side-half-width) * -4);
+    }
+
+    &.bottom-right-vertical-led {
+      rotate: 90deg;
+      bottom: calc(var(--led-short-side-half-width) * 4);
+      right: calc(var(--led-short-side-half-width) * -4);
+    }
+
+  }
+}
+</style>
diff --git a/src/render/views/NixieTubeConfiguration/NixieTubeControlView/components/DotLED.vue b/src/render/views/NixieTubeConfiguration/NixieTubeControlView/components/DotLED.vue
new file mode 100644
index 0000000..219ffe9
--- /dev/null
+++ b/src/render/views/NixieTubeConfiguration/NixieTubeControlView/components/DotLED.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="dot-led" :class="{ active: active }" @click="onClick">
+    <div class="befor-triangle"></div>
+    <div class="after-triangle"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { inject, computed } from 'vue'
+
+const props = defineProps({
+  secondaryIndex: Number,
+  tertiaryIndex: Number,
+})
+
+const dataArr        = inject('dataArr')
+const current        = inject('current')
+const secondaryIndex = props.secondaryIndex
+const tertiaryIndex  = props.tertiaryIndex
+
+const active  = computed(() => dataArr.value[current.value][secondaryIndex][tertiaryIndex])
+const onClick = () => {
+  if (dataArr.value[current.value][secondaryIndex][tertiaryIndex] === 0) {
+    dataArr.value[current.value][secondaryIndex][tertiaryIndex] = 1
+  } else {
+    dataArr.value[current.value][secondaryIndex][tertiaryIndex] = 0
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.dot-led {
+
+  height: calc(var(--led-short-side-half-width) * 2);
+
+  div {
+    display: inline-block;
+
+    &.befor-triangle {
+      border: var(--led-short-side-half-width) solid transparent;
+      border-right-color: var(--inactive-color);
+    }
+
+    &.after-triangle {
+      border: var(--led-short-side-half-width) solid transparent;
+      border-left-color: var(--inactive-color);
+    }
+  }
+
+  &.active {
+    div {
+      &.befor-triangle {
+        border-right-color: var(--active-color);
+      }
+
+      &.after-triangle {
+        border-left-color: var(--active-color);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/render/views/NixieTubeConfiguration/NixieTubeControlView/components/FourDigitTube.vue b/src/render/views/NixieTubeConfiguration/NixieTubeControlView/components/FourDigitTube.vue
new file mode 100644
index 0000000..59e6bfc
--- /dev/null
+++ b/src/render/views/NixieTubeConfiguration/NixieTubeControlView/components/FourDigitTube.vue
@@ -0,0 +1,23 @@
+<template>
+  <n-space justify="space-around" class="nixie-tube-control-view">
+    <DigitalTube :secondaryIndex="3" />
+    <DigitalTube :secondaryIndex="2" />
+    <CutOffDot />
+    <DigitalTube :secondaryIndex="1" />
+    <DigitalTube :secondaryIndex="0" />
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { NSpace } from 'naive-ui'
+import CutOffDot from './CutOffDot.vue'
+import DigitalTube from './DigitalTube.vue'
+</script>
+
+<style lang="less" scoped>
+.nixie-tube-control-view {
+  --led-short-side-half-width: 20px;
+  --active-color: red;
+  --inactive-color: gray;
+}
+</style>
diff --git a/src/render/views/NixieTubeConfiguration/NixieTubeControlView/data.ts b/src/render/views/NixieTubeConfiguration/NixieTubeControlView/data.ts
new file mode 100644
index 0000000..d2225f2
--- /dev/null
+++ b/src/render/views/NixieTubeConfiguration/NixieTubeControlView/data.ts
@@ -0,0 +1,14 @@
+import { ref } from 'vue'
+
+export const FOUR_DIGIT_TUBE_NUM               = 5
+export const DIGIT_TUBE_NUM_OF_FOUR_DIGIT_TUBE = 4
+export const LED_NUM_OF_DIGIT_TUBE             = 8
+export const DEFAULT_SELECTED_INDEX            = 0
+
+export const dataArr = ref(new Array(FOUR_DIGIT_TUBE_NUM))
+for (let i = 0; i < FOUR_DIGIT_TUBE_NUM; i++) {
+  dataArr.value[i] = new Array(DIGIT_TUBE_NUM_OF_FOUR_DIGIT_TUBE)
+  for (let j = 0; j < DIGIT_TUBE_NUM_OF_FOUR_DIGIT_TUBE; j++) {
+    dataArr.value[i][j] = new Array(LED_NUM_OF_DIGIT_TUBE).fill(0)
+  }
+}
diff --git a/src/render/views/NixieTubeConfiguration/NixieTubeControlView/index.ts b/src/render/views/NixieTubeConfiguration/NixieTubeControlView/index.ts
new file mode 100644
index 0000000..1880f25
--- /dev/null
+++ b/src/render/views/NixieTubeConfiguration/NixieTubeControlView/index.ts
@@ -0,0 +1 @@
+export { default as NixieTubeControlView } from './index.vue'
diff --git a/src/render/views/NixieTubeConfiguration/NixieTubeControlView/index.vue b/src/render/views/NixieTubeConfiguration/NixieTubeControlView/index.vue
new file mode 100644
index 0000000..3541d13
--- /dev/null
+++ b/src/render/views/NixieTubeConfiguration/NixieTubeControlView/index.vue
@@ -0,0 +1,16 @@
+<template>
+  <FourDigitTube />
+</template>
+
+<script setup lang="ts">
+import FourDigitTube from './components/FourDigitTube.vue'
+</script>
+
+<style lang="less" scoped>
+.nixie-tube-control-view {
+  
+  :deep(.digital-tube) {
+    display: inline-block;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/render/views/NixieTubeConfiguration/NixieTubeSelectView/data.ts b/src/render/views/NixieTubeConfiguration/NixieTubeSelectView/data.ts
new file mode 100644
index 0000000..c25f4ae
--- /dev/null
+++ b/src/render/views/NixieTubeConfiguration/NixieTubeSelectView/data.ts
@@ -0,0 +1,7 @@
+import { FOUR_DIGIT_TUBE_NUM } from '../NixieTubeControlView/data'
+
+export const options = new Array(FOUR_DIGIT_TUBE_NUM)
+
+for (let i = 0; i < FOUR_DIGIT_TUBE_NUM; i++) {
+  options[i] = { label: i + 1, value: i}
+}
diff --git a/src/render/views/NixieTubeConfiguration/NixieTubeSelectView/index.ts b/src/render/views/NixieTubeConfiguration/NixieTubeSelectView/index.ts
new file mode 100644
index 0000000..241d555
--- /dev/null
+++ b/src/render/views/NixieTubeConfiguration/NixieTubeSelectView/index.ts
@@ -0,0 +1 @@
+export { default as NixieTubeSelectView } from './index.vue'
diff --git a/src/render/views/NixieTubeConfiguration/NixieTubeSelectView/index.vue b/src/render/views/NixieTubeConfiguration/NixieTubeSelectView/index.vue
new file mode 100644
index 0000000..99df002
--- /dev/null
+++ b/src/render/views/NixieTubeConfiguration/NixieTubeSelectView/index.vue
@@ -0,0 +1,22 @@
+<template>
+  <n-form-item label="选择数码管：" label-placement="left">
+    <n-select
+      v-model:value="current"
+      :options="options"
+    />
+  </n-form-item>
+</template>
+
+<script lang="ts" setup>
+import { inject } from 'vue'
+import { NFormItem, NSelect } from 'naive-ui'
+import { options } from './data'
+
+const current = inject('current')
+</script>
+
+<style lang="less" scoped>
+.n-select {
+  width: 80px;
+}
+</style>
diff --git a/src/render/views/NixieTubeConfiguration/SendCMDButtonView.vue b/src/render/views/NixieTubeConfiguration/SendCMDButtonView.vue
new file mode 100644
index 0000000..d6d6887
--- /dev/null
+++ b/src/render/views/NixieTubeConfiguration/SendCMDButtonView.vue
@@ -0,0 +1,40 @@
+<template>
+  <n-button type="primary" size="large" :disabled="!serialPort.isOpen" @click="onBtnClick">发送配置命令</n-button>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+import { NButton } from 'naive-ui'
+import { useSerialPortStore } from '@/stores/serialPort'
+
+
+const dataArr    = inject('dataArr')
+const current    = inject('current')
+
+const onBtnClick = () => {
+  const clockNixieTubeData = dataArr.value[current.value]
+  for (let i = 0; i < clockNixieTubeData.length; i++) {
+    const sevenSegmentNixieTubeData = clockNixieTubeData[i];
+    
+    let value = ''
+    for (let j = 0; j < sevenSegmentNixieTubeData.length; j++) {
+      value += sevenSegmentNixieTubeData[j]
+    }
+    
+    sendCMD(current.value, i, value)
+  }
+}
+
+const serialPort = useSerialPortStore()
+const sendCMD    = (num: number, index: number, value: string) => {
+  if (!value) return
+
+  if (!serialPort.isOpen) return
+
+  let cmd = `$DIGITCTL,${num},${index},${value}*`
+  cmd += cmd.length
+  cmd += '\r\n'
+  
+  serialPort.write(cmd)
+}
+</script>
diff --git a/src/render/views/VoltageMonitoring/MonitorView/index.ts b/src/render/views/VoltageMonitoring/MonitorView/index.ts
new file mode 100644
index 0000000..9cc160f
--- /dev/null
+++ b/src/render/views/VoltageMonitoring/MonitorView/index.ts
@@ -0,0 +1 @@
+export { default as MonitorView } from './index.vue'
diff --git a/src/render/views/VoltageMonitoring/MonitorView/index.vue b/src/render/views/VoltageMonitoring/MonitorView/index.vue
new file mode 100644
index 0000000..dd5d545
--- /dev/null
+++ b/src/render/views/VoltageMonitoring/MonitorView/index.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="w-h-full">
+    <v-chart autoresize :option="option" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from "vue"
+
+import { use } from "echarts/core"
+import { CanvasRenderer } from "echarts/renderers"
+import { LineChart } from "echarts/charts"
+import { GridComponent, LegendComponent } from "echarts/components"
+import VChart from "vue-echarts"
+
+import { useSerialPortStore, SerialPortEventType } from '@/stores/serialPort'
+import { LineBreakParser } from '@/utils/parser'
+
+// TODO: 调研是否需要以及如何释放echart对象
+use([
+  CanvasRenderer,
+  LineChart,
+  GridComponent,
+  LegendComponent,
+])
+
+const COUNTER    = 30
+// const PROPORTION = 5 / 1024
+const PROPORTION = 3.3 / 4096
+
+const option = reactive({
+  legend: {
+    left: 'right',
+    top: 30,
+    data: []
+  },
+  grid: {
+    top: 100
+  },
+  xAxis: [{
+    data: new Array(COUNTER).fill('')
+  }],
+  yAxis: [{
+    name: '电压值(V)',
+    max: 5,
+    min: 0,
+  }],
+  series: []
+})
+
+const handle = (data: string) => {
+  const startMarkIndex    = data.indexOf('@')
+  const checksumMarkIndex = data.indexOf('*')
+
+  if (startMarkIndex < 0 || checksumMarkIndex < startMarkIndex) return
+
+  // 校验和验证
+  const info = data.substring(startMarkIndex + 1, checksumMarkIndex)
+  const cs   = parseInt(data.substring(checksumMarkIndex + 1))
+  if (cs != info.length + 2) return
+
+  const infoArr = info.split(',')
+  if (infoArr[0] != 'PLOTTER' || infoArr.length % 2 === 0) return
+
+  const pins     = []
+  const voltages = []
+  for (let index = 1; index < infoArr.length; index++) {
+    const element = infoArr[index]
+
+    if (index % 2 === 0) {
+      voltages.push((parseInt(element) * PROPORTION).toFixed(6))
+    } else {
+      pins.push(element)
+    }
+  }
+
+  if (option.legend.data.length != pins.length || option.legend.data.toString() != pins.toString()) {
+    resetOption(pins)
+  }
+  
+  for (let index = 0; index < voltages.length; index++) {
+    if (option.series[index].data.length + 1 > COUNTER) option.series[index].data.shift()
+
+    option.series[index].data.push(voltages[index])
+  }
+}
+
+const decoder    = new TextDecoder()
+const parser     = new LineBreakParser()
+const onSerialPortData = (data: Uint8Array) => {
+  const lineArr = parser.parse(decoder.decode(data))
+  lineArr.forEach(line => handle(line))
+}
+
+const serialPort = useSerialPortStore()
+serialPort.addEventListener(SerialPortEventType.data, onSerialPortData)
+
+const resetOption = (pins) => {
+  option.legend.data = pins
+  option.series.length = 0
+  for (let index = 0; index < pins.length; index++) {
+    const pin:string = pins[index];
+    option.series.push({
+      name: pin,
+      type: 'line',
+      data: [],
+    })
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/render/views/VoltageMonitoring/SelectDeviceView/data.ts b/src/render/views/VoltageMonitoring/SelectDeviceView/data.ts
new file mode 100644
index 0000000..29365f0
--- /dev/null
+++ b/src/render/views/VoltageMonitoring/SelectDeviceView/data.ts
@@ -0,0 +1,5 @@
+export const options = [
+  { label: 'PM2.5模块'  , value: 'A;6', },
+  { label: '太阳能电池板', value: 'A;6,7', },
+  { label: '红外传感器'  , value: 'A;4,5', },
+]
diff --git a/src/render/views/VoltageMonitoring/SelectDeviceView/index.ts b/src/render/views/VoltageMonitoring/SelectDeviceView/index.ts
new file mode 100644
index 0000000..36e1abf
--- /dev/null
+++ b/src/render/views/VoltageMonitoring/SelectDeviceView/index.ts
@@ -0,0 +1 @@
+export { default as SelectDeviceView } from './index.vue';
diff --git a/src/render/views/VoltageMonitoring/SelectDeviceView/index.vue b/src/render/views/VoltageMonitoring/SelectDeviceView/index.vue
new file mode 100644
index 0000000..f0d9015
--- /dev/null
+++ b/src/render/views/VoltageMonitoring/SelectDeviceView/index.vue
@@ -0,0 +1,68 @@
+<template>
+  <n-space vertical justify="space-between">
+    <n-select placeholder="选择设备" v-model:value="option" :options="options" />
+    <n-button
+      type="primary"
+      class="w-full"
+      :disabled="!serialPort.isOpen || !option"
+      @click="onBtnClick">
+      监控选择的设备
+    </n-button>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { NSpace, NSelect, NButton, useMessage } from 'naive-ui'
+
+import { options } from './data'
+
+import { useSerialPortStore, SerialPortEventType } from '@/stores/serialPort'
+import { LineBreakParser } from '@/utils/parser'
+
+const message = useMessage()
+
+const serialPort = useSerialPortStore()
+
+const option     = ref(null)
+const onBtnClick = async () => {
+  if ( !serialPort.isOpen || !option.value) return
+
+  const dataArr = option.value.split(';')
+  if (dataArr.length != 2) return
+
+  const type = dataArr[0]
+  const portArrStr = dataArr[1]
+  const count = portArrStr.split(',').length
+  const command = `$MONITOR,${type},${count},${portArrStr}*${type.length + count.toString().length + portArrStr.length + 12}\r\n`
+
+  await serialPort.write(command)
+}
+
+const decoder          = new TextDecoder()
+const parser           = new LineBreakParser()
+const onSerialPortData = (data: Uint8Array) => {
+  debugger
+  const result: Array<String>  = parser.parse(decoder.decode(data))
+  if (result.length === 0) return
+  
+  const infoArr: Array<String> = result[0].split(',')
+  if (infoArr.length != 2) return
+  if (infoArr[0] != '@RESULT') return
+
+  if (parseInt(infoArr[1][0]) === 0) {
+    message.success('配置成功')
+  } else {
+    message.error('配置失败')
+  }
+}
+onMounted(() => serialPort.addEventListener(SerialPortEventType.data, onSerialPortData))
+</script>
+
+<style scoped>
+.n-space {
+  margin: 0 auto;
+  width: 30%;
+  height: 30%;
+}
+</style>
diff --git a/src/render/views/WirelessCommunicationModuleConfiguration/ConfigurationParameterFormView/data.ts b/src/render/views/WirelessCommunicationModuleConfiguration/ConfigurationParameterFormView/data.ts
new file mode 100644
index 0000000..f2311e7
--- /dev/null
+++ b/src/render/views/WirelessCommunicationModuleConfiguration/ConfigurationParameterFormView/data.ts
@@ -0,0 +1,21 @@
+// 信道选择范围为100-125
+export const channelOptions  = Array.from({ length: 26 }, (_val, index) => index + 100).map(
+  v => ({
+    label: v,
+    value: v
+  })
+)
+
+export const baudRateOptions = [
+  { label: 9600  , value: 4 },
+  { label: 38400 , value: 6 },
+  { label: 115200, value: 7 },
+]
+
+// 2.4G查询指令
+// 实例：AA 5C 00 00 00 00 00 00 00 00 00 00 00 00 00 12 00 18
+export const queryCMD  = new Uint8Array([0xAA, 0x5C, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x12, 0x00, 0x18])
+
+// 2.4G设置指令缓存
+// 实例：AA 5A 00 00 0A 5A 00 00 00 07 00 66 00 00 00 00 00 D5
+export const configCMD = new Uint8Array([0xAA, 0x5A, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x12, 0x00, 0x00])
diff --git a/src/render/views/WirelessCommunicationModuleConfiguration/ConfigurationParameterFormView/index.ts b/src/render/views/WirelessCommunicationModuleConfiguration/ConfigurationParameterFormView/index.ts
new file mode 100644
index 0000000..20f6f4e
--- /dev/null
+++ b/src/render/views/WirelessCommunicationModuleConfiguration/ConfigurationParameterFormView/index.ts
@@ -0,0 +1 @@
+export { default as ConfigurationParameterFormView } from './index.vue';
diff --git a/src/render/views/WirelessCommunicationModuleConfiguration/ConfigurationParameterFormView/index.vue b/src/render/views/WirelessCommunicationModuleConfiguration/ConfigurationParameterFormView/index.vue
new file mode 100644
index 0000000..dd4ffb3
--- /dev/null
+++ b/src/render/views/WirelessCommunicationModuleConfiguration/ConfigurationParameterFormView/index.vue
@@ -0,0 +1,149 @@
+<template>
+  <n-form ref="formRef" :disabled="!serialPort.isOpen" :model="modelRef" :rules="rules">
+    <n-form-item path="netid" label="组网ID">
+      <n-input
+        v-model:value="modelRef.netid"
+        maxlength="4"
+        show-count
+        clearable
+        :allow-input="onlyAllowNumber"
+        @keydown.enter.prevent />
+    </n-form-item>
+
+    <n-form-item path="channel" label="信　道">
+      <n-select
+        v-model:value="modelRef.channel"
+        placeholder="选择信道"
+        :options="channelOptions"
+      />
+    </n-form-item>
+
+    <n-form-item path="baudRate" label="波特率">
+      <n-select
+        v-model:value="modelRef.baudRate"
+        placeholder="选择波特率"
+        :options="baudRateOptions"
+      />
+    </n-form-item>
+    <n-form-item>
+      <n-button :disabled="!serialPort.isOpen" size="large" type="primary" @click="handleValidateButtonClick">
+        配　置
+      </n-button>
+    </n-form-item>
+  </n-form>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NForm, NFormItem, NInput, NSelect, NButton, useMessage } from 'naive-ui'
+import type {FormRules, FormItemRule } from 'naive-ui'
+import { channelOptions, baudRateOptions, queryCMD, configCMD } from './data'
+
+import { useSerialPortStore, SerialPortEventType } from '@/stores/serialPort'
+
+const message = useMessage()
+
+interface ModelType {
+  netid: string | null
+  channel: number | null
+  baudRate: number | null
+}
+
+const modelRef = ref<ModelType>({
+  netid: null,
+  channel: null,
+  baudRate: null
+})
+
+const rules: FormRules = {
+  netid: [
+    {
+      required: true,
+      validator (_: FormItemRule, value: string) {
+        if (!value) {
+          return new Error('请输入组网ID')
+        } else if (value.length != 4) {
+          return new Error('组网ID应为4位数字，取值范围0000-9999')
+        }
+        return true
+      },
+      trigger: ['input', 'blur']
+    }
+  ],
+  channel: [
+    {
+      required: true,
+    }
+  ],
+  baudRate: [
+    {
+      required: true,
+    }
+  ]
+}
+
+const onlyAllowNumber = (value: string) => !value || /^\d+$/.test(value)
+
+const formRef = ref()
+const handleValidateButtonClick = (e: MouseEvent) => {
+  e.preventDefault()
+  
+  formRef.value?.validate((errors) => {
+    if (errors) {
+      message.error('设置失败')
+      return
+    }
+
+    if (!serialPort.isOpen) {
+      message.error('请先连接无线通信模块并打开串口')
+      return
+    }
+
+    configWireless()
+  })
+}
+
+const queryWireless  = async () => {
+  await serialPort.write(queryCMD)
+}
+const configWireless = async () => {
+  const netid = parseInt(modelRef.value.netid as string)
+  configCMD[4]   = netid / 100
+  configCMD[5]   = netid % 100
+  configCMD[9]   = modelRef.value.baudRate as number
+  configCMD[11]  = modelRef.value.channel as number
+  configCMD[17]  = getCheckSum(configCMD)
+
+  await serialPort.write(configCMD)
+}
+const getCheckSum    = (cmd: Uint8Array) => {
+  let checkbyte = 0
+  // 指令的最后一位是存储前面所有位的校验和
+  // 所以计算校验和时，最后一位不纳入计算，只计算前面所有位
+  for (let index = 0; index < cmd.length - 1; index++) {
+    checkbyte += cmd[index]
+  }
+  return checkbyte & 0x00FF
+}
+
+const serialPort = useSerialPortStore()
+serialPort.addEventListener(SerialPortEventType.afterOpen, queryWireless)
+serialPort.addEventListener(SerialPortEventType.data, (data: Uint8Array) => {
+  switch (data[1]) {
+    case 0x5B:
+      message.success('配置设备信息成功')
+      break;
+    case 0x5D:
+      modelRef.value.netid    = ('0000' + (Number(data[4])*100 + data[5])).slice(-4)
+      modelRef.value.channel  = data[11]
+      modelRef.value.baudRate = data[9]
+      break;
+  }
+})
+</script>
+
+<style scoped lang="less">
+.n-form {
+  text-align: initial;
+}
+</style>
diff --git a/src/render/views/WirelessCommunicationModuleConfiguration/SketchMapView.vue b/src/render/views/WirelessCommunicationModuleConfiguration/SketchMapView.vue
new file mode 100644
index 0000000..ebcb4fc
--- /dev/null
+++ b/src/render/views/WirelessCommunicationModuleConfiguration/SketchMapView.vue
@@ -0,0 +1,11 @@
+<template>
+  <n-space vertical align="center" :wrap-item="false" class="h-full">
+    <n-image :src="WirelessCommunicationModuleConfigurationImage" />
+  </n-space>
+</template>
+
+
+<script setup lang="ts">
+import { NSpace, NImage } from 'naive-ui'
+import WirelessCommunicationModuleConfigurationImage from '@/assets/WirelessCommunicationModuleConfiguration.png'
+</script>
diff --git a/src/render/views/index/ConnectUsModalView/index.ts b/src/render/views/index/ConnectUsModalView/index.ts
new file mode 100644
index 0000000..56749e7
--- /dev/null
+++ b/src/render/views/index/ConnectUsModalView/index.ts
@@ -0,0 +1,2 @@
+// TODO: 使用use接口导出
+export { default as ConnectUsModalView } from './index.vue'
diff --git a/src/render/views/index/ConnectUsModalView/index.vue b/src/render/views/index/ConnectUsModalView/index.vue
new file mode 100644
index 0000000..7c12cb6
--- /dev/null
+++ b/src/render/views/index/ConnectUsModalView/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <n-modal
+    embedded
+    v-model:show="showModal"
+    style="width: 768px;"
+    preset="card"
+    title="联系我们"
+    size="huge"
+    class="connect-us-modal">
+
+    <n-image preview-disabled :src="qrcode" class="w-full" />
+    <n-ul>
+      <n-li>北京华云智联科技有限公司 (HwaSmart Corporation Ltd).</n-li>
+      <n-li>北京市海淀区黑泉路8号1幢宝盛广场B座8013</n-li>
+      <n-li>400-166-5286</n-li>
+      <n-li>sales@hwasmart.com</n-li>
+      <n-li>版本号：{{ version }}</n-li>
+    </n-ul>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NModal, NImage, NUl, NLi } from 'naive-ui'
+import qrcode from '@/assets/index/qrcode.jpg'
+import { version } from '@/../../package.json'
+
+const showModal = ref(false)
+
+const show = () => showModal.value = true
+defineExpose({
+  show
+})
+</script>
+
+<style scoped lang="less">
+.connect-us-modal {
+
+  .n-image {
+    :deep(img) {
+      margin: 0 auto;
+    }
+  }
+
+  .n-ul {
+    padding: 0;
+  }
+}
+</style>
diff --git a/src/render/views/index/HeaderView/components/BatteryStatus/index.ts b/src/render/views/index/HeaderView/components/BatteryStatus/index.ts
new file mode 100644
index 0000000..e00517e
--- /dev/null
+++ b/src/render/views/index/HeaderView/components/BatteryStatus/index.ts
@@ -0,0 +1 @@
+export { default as BatteryStatus } from './index.vue'
diff --git a/src/render/views/index/HeaderView/components/BatteryStatus/index.vue b/src/render/views/index/HeaderView/components/BatteryStatus/index.vue
new file mode 100644
index 0000000..e88cd89
--- /dev/null
+++ b/src/render/views/index/HeaderView/components/BatteryStatus/index.vue
@@ -0,0 +1,78 @@
+<template>
+  <n-icon>
+    <template #default v-if="battery.charging" >
+      <BatteryCharging20Filled   v-if     ="battery.level < .3" />
+      <BatteryCharging30Filled   v-else-if="battery.level < .5" />
+      <BatteryCharging50Filled   v-else-if="battery.level < .6" />
+      <BatteryCharging60Filled   v-else-if="battery.level < .8" />
+      <BatteryCharging80Filled   v-else-if="battery.level < .9" />
+      <BatteryCharging90Filled   v-else-if="battery.level <  1"  />
+      <BatteryChargingFullFilled v-else/>
+    </template>
+    <template #default v-else >
+      <BatteryAlertFilled v-if     ="battery.level < .2" />
+      <Battery20Filled    v-else-if="battery.level < .3" />
+      <Battery30Filled    v-else-if="battery.level < .5" />
+      <Battery50Filled    v-else-if="battery.level < .6" />
+      <Battery60Filled    v-else-if="battery.level < .8" />
+      <Battery80Filled    v-else-if="battery.level < .9" />
+      <Battery90Filled    v-else-if="battery.level <  1"  />
+      <BatteryFullFilled  v-else />
+    </template>
+  </n-icon>
+
+  <n-text>{{ Math.round(battery.level * 100)}}%</n-text>
+</template>
+
+<script setup lang="ts">
+import { reactive, onMounted } from 'vue'
+import { NIcon, NText } from 'naive-ui'
+import {
+  BatteryAlertFilled,
+  Battery20Filled, BatteryCharging20Filled,
+  Battery30Filled, BatteryCharging30Filled,
+  Battery50Filled, BatteryCharging50Filled,
+  Battery60Filled, BatteryCharging60Filled,
+  Battery80Filled, BatteryCharging80Filled,
+  Battery90Filled, BatteryCharging90Filled,
+  BatteryFullFilled, BatteryChargingFullFilled,
+} from '@vicons/material'
+import { BatteryManager } from './type'
+
+const battery = reactive({
+  charging: false,
+  level   : 0,
+})
+
+const updateBatteryState = (batteryManager: BatteryManager) => {
+  const { level, charging } = batteryManager
+
+  battery.charging = charging
+  battery.level = level
+}
+
+onMounted(async () => {
+  const batteryManager: BatteryManager = await (window.navigator as any).getBattery();
+  updateBatteryState(batteryManager);
+
+  // 电池充电状态更新时被调用
+  batteryManager.onchargingchange        = ({ target }: { target: BatteryManager}) => updateBatteryState( target )
+  // 电池充电时间更新时被调用
+  batteryManager.onchargingtimechange    = ({ target }: { target: BatteryManager}) => updateBatteryState( target )
+  // 电池断开充电时间更新时被调用
+  batteryManager.ondischargingtimechange = ({ target }: { target: BatteryManager}) => updateBatteryState( target )
+  // 电池电量更新时被调用
+  batteryManager.onlevelchange           = ({ target }: { target: BatteryManager}) => updateBatteryState( target )
+});
+</script>
+
+<style scoped lang="less">
+.n-icon {
+  transform: rotate(90deg);
+  font-size: 18px;
+}
+
+.n-text {
+  color: var(--hwa-text-color);
+}
+</style>
\ No newline at end of file
diff --git a/src/render/views/index/HeaderView/components/BatteryStatus/type.ts b/src/render/views/index/HeaderView/components/BatteryStatus/type.ts
new file mode 100644
index 0000000..f4d27c4
--- /dev/null
+++ b/src/render/views/index/HeaderView/components/BatteryStatus/type.ts
@@ -0,0 +1,10 @@
+export interface BatteryManager {
+  charging                : boolean;          // 当前电池是否正在充电
+  chargingTime            : number;           // 距离充电完毕还需多少秒，如果为 0 则充电完毕
+  dischargingTime         : number;           // 距离电池耗电至空且挂起需要多少秒
+  level                   : number;           // 电量的放大等级，这个值在 0.0 至 1.0 之间
+  onchargingchange        : Function | null;  // 电池充电状态更新时被调用
+  onchargingtimechange    : Function | null;  // 电池充电时间更新时被调用
+  ondischargingtimechange : Function | null;  // 电池断开充电时间更新时被调用
+  onlevelchange           : Function | null;  // 电池电量更新时被调用
+}
diff --git a/src/render/views/index/HeaderView/components/HomeButton.vue b/src/render/views/index/HeaderView/components/HomeButton.vue
new file mode 100644
index 0000000..b284808
--- /dev/null
+++ b/src/render/views/index/HeaderView/components/HomeButton.vue
@@ -0,0 +1,14 @@
+<template>
+  <n-icon @click="onClick">
+    <Home />
+  </n-icon>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { NIcon } from 'naive-ui'
+import { HomeFilled as Home } from '@vicons/material'
+
+const router  = useRouter()
+const onClick = () => router.push('/')
+</script>
diff --git a/src/render/views/index/HeaderView/components/Logo.vue b/src/render/views/index/HeaderView/components/Logo.vue
new file mode 100644
index 0000000..edb012a
--- /dev/null
+++ b/src/render/views/index/HeaderView/components/Logo.vue
@@ -0,0 +1,23 @@
+<template>
+  <img :src="logo" @dblclick="onPowerBtnDBClick" />
+</template>
+
+<script setup lang="ts">
+import { useDialog } from 'naive-ui'
+import logo from '@/assets/logo.png'
+import { hasIpcRenderer } from '@/utils'
+
+const dialog = useDialog()
+const onPowerBtnDBClick = () => {
+  dialog.warning({
+    title: '系统提示',
+    content: '您确定需要退出软件吗？',
+    positiveText: '确定',
+    onPositiveClick: () => {
+      if (hasIpcRenderer()) {
+        window.ipcRenderer.send('QUIT')
+      }
+    }
+  })
+}
+</script>
diff --git a/src/render/views/index/HeaderView/components/NetworkStatus.vue b/src/render/views/index/HeaderView/components/NetworkStatus.vue
new file mode 100644
index 0000000..e0a0647
--- /dev/null
+++ b/src/render/views/index/HeaderView/components/NetworkStatus.vue
@@ -0,0 +1,24 @@
+<template>
+  <n-icon>
+    <component :is=" network.isOnLine ? Wifi : WifiOff" />
+  </n-icon>
+</template>
+
+<script setup lang="ts">
+import { NIcon } from 'naive-ui'
+import {
+  WifiFilled as Wifi,
+  WifiOffFilled as WifiOff,
+} from '@vicons/material'
+
+import { useNetworkStore } from '@/stores/modules/network'
+
+const network = useNetworkStore()
+</script>
+
+
+<style scoped lang="less">
+.n-icon {
+  font-size: 18px;
+}
+</style>
diff --git a/src/render/views/index/HeaderView/components/RouterBackButton.vue b/src/render/views/index/HeaderView/components/RouterBackButton.vue
new file mode 100644
index 0000000..5e53df8
--- /dev/null
+++ b/src/render/views/index/HeaderView/components/RouterBackButton.vue
@@ -0,0 +1,14 @@
+<template>
+  <n-icon @click="onClick">
+    <ArrowBack />
+  </n-icon>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { NIcon } from 'naive-ui'
+import { ArrowBackIosFilled as ArrowBack } from '@vicons/material'
+
+const router  = useRouter()
+const onClick = () => router.back()
+</script>
diff --git a/src/render/views/index/HeaderView/components/SystemDateTime.vue b/src/render/views/index/HeaderView/components/SystemDateTime.vue
new file mode 100644
index 0000000..3ff96ac
--- /dev/null
+++ b/src/render/views/index/HeaderView/components/SystemDateTime.vue
@@ -0,0 +1,17 @@
+<template>
+  <n-time :time="time" format="yyyy-MM-dd HH:mm" />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { NTime } from 'naive-ui'
+
+const time = ref<number>(0)
+onMounted(() => {
+  time.value = new Date().valueOf()
+
+  setInterval(() => {
+    time.value += 1000
+  }, 1000)
+})
+</script>
diff --git a/src/render/views/index/HeaderView/index.ts b/src/render/views/index/HeaderView/index.ts
new file mode 100644
index 0000000..1a05d28
--- /dev/null
+++ b/src/render/views/index/HeaderView/index.ts
@@ -0,0 +1 @@
+export { default as HeaderView } from './index.vue'
diff --git a/src/render/views/index/HeaderView/index.vue b/src/render/views/index/HeaderView/index.vue
new file mode 100644
index 0000000..4723ef4
--- /dev/null
+++ b/src/render/views/index/HeaderView/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <n-space align="start" justify="space-between" :wrap-item="false" class="header">
+
+    <n-space :wrap-item="false" class="navigation-bar">
+      <Logo v-if="!show" />
+      <RouterBackButton v-if="show" class="router-back-button" />
+      <HomeButton v-if="show" />
+    </n-space>
+    
+    <n-space align="center" :wrap-item="false" class="status-bar" >
+      <NetworkStatus  />
+      <BatteryStatus  />
+      <SystemDateTime />
+    </n-space>
+
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { NSpace } from 'naive-ui'
+import Logo from './components/Logo.vue'
+import HomeButton from './components/HomeButton.vue'
+import RouterBackButton from './components/RouterBackButton.vue'
+import NetworkStatus from './components/NetworkStatus.vue'
+import SystemDateTime from './components/SystemDateTime.vue'
+import { BatteryStatus } from './components/BatteryStatus'
+
+import { useRoute } from 'vue-router'
+
+
+const route = useRoute()
+const show  = computed(() => route.path != '/' && route.path != '/category' )
+</script>
+
+<style scoped lang="less">
+.header {
+  height: 100%;
+  padding: 0 24px;
+  color: var(--hwa-text-color);
+  
+  .navigation-bar {
+    font-size: 32px;
+
+    .router-back-button {
+      margin-left: 18px;
+    }
+  }
+}
+</style>
diff --git a/src/render/views/index/QuickBurningModalView/index.ts b/src/render/views/index/QuickBurningModalView/index.ts
new file mode 100644
index 0000000..6c8a85e
--- /dev/null
+++ b/src/render/views/index/QuickBurningModalView/index.ts
@@ -0,0 +1,2 @@
+// TODO: 使用use接口导出
+export { default as QuickBurningModalView } from './index.vue'
diff --git a/src/render/views/index/QuickBurningModalView/index.vue b/src/render/views/index/QuickBurningModalView/index.vue
new file mode 100644
index 0000000..21aa824
--- /dev/null
+++ b/src/render/views/index/QuickBurningModalView/index.vue
@@ -0,0 +1,90 @@
+<template>
+  <n-modal
+    embedded
+    v-model:show="showModal"
+    style="width: 800px;"
+    preset="card"
+    title="快捷烧录"
+    size="huge">
+
+    <n-space>
+      <n-button v-for="program, index in programs" :key="index" size="large" @click="onBurnProgramBtnClick(program.filePath)">{{ program.name }}</n-button>
+    </n-space>
+    
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { h, ref, onMounted } from 'vue'
+import { NModal, NSpace, NButton, NSpin, NH3, useMessage, useDialog } from 'naive-ui'
+import { findAllCommon } from '@/api/program'
+import { hasIpcRenderer } from '@/utils'
+
+const message = useMessage()
+const dialog  = useDialog()
+
+const programs = findAllCommon()
+
+// TODO：烧录程序的逻辑提取到开发板（DeveloperBoard）类中
+const onBurnProgramBtnClick = async (binFileName: string) => {
+  if (!hasIpcRenderer()) return
+
+  if (!('serial' in navigator)) return
+
+  try {
+    await navigator.serial.requestPort()
+    
+    window.ipcRenderer.send('BURN_PROGRAM', binFileName)
+    
+  
+    dialog.info({
+      title: '系统提示',
+      closable: false,
+      maskClosable: false,
+      class: 'text-center',
+      content: () => h(
+          NSpin,
+          {
+            large: 'large',
+          },
+          {
+            description: () => h(
+              NH3,
+              {},
+              {
+                default: '程序烧录中……'
+              }
+            )
+          }
+        )
+    })
+  } catch (error) {
+    console.error(error)
+    message.error('程序烧录失败')
+  } finally {
+    dialog.destroyAll()
+  }
+}
+
+const onBurnProgramFeedback = ({ err }) => {
+  dialog.destroyAll()
+  
+  if (err) {
+    message.error(err.message)
+  } else {
+    message.success('程序烧录成功')
+  }
+}
+
+onMounted(() => {
+  if (!hasIpcRenderer()) return
+  // TODO: 程序烧录反馈设置为全局事件
+  window.ipcRenderer.receive('BURN_PROGRAM_FEEDBACK', onBurnProgramFeedback)
+})
+
+
+const showModal  = ref(false)
+const show       = () => showModal.value = true
+
+defineExpose({ show })
+</script>
diff --git a/src/render/views/index/SystemSettingsModalView/CommonToolsView.vue b/src/render/views/index/SystemSettingsModalView/CommonToolsView.vue
new file mode 100644
index 0000000..961764f
--- /dev/null
+++ b/src/render/views/index/SystemSettingsModalView/CommonToolsView.vue
@@ -0,0 +1,45 @@
+<template>
+  <n-divider title-placement="left">
+    常用工具
+  </n-divider>
+  <n-space>
+    <n-button size="large" strong secondary type="primary" @click="onSystemRepairButtonClick">系统修复</n-button>
+    <n-button size="large" strong secondary type="primary" @click="onSoftwareUpgradeButtonClick">软件升级</n-button>
+    <n-button size="large" strong secondary type="primary" @click="onWirelessCommunicationModuleConfigButtonClick">通信模块配置</n-button>
+    <!-- TODO: 添加无线投屏功能 -->
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { NDivider, NSpace, NButton, useMessage } from 'naive-ui'
+import { hasIpcRenderer } from '@/utils'
+
+const message = useMessage()
+
+const onSystemRepairButtonClick = () => {
+  if (!hasIpcRenderer()) return
+  
+  const result = window.ipcRenderer.sendSync('SYSTEM_REPAIR')
+  if (result != 'OK') {
+    message.error(result.message)
+  } else {
+    message.success('系统修复成功')
+  }
+}
+
+const onSoftwareUpgradeButtonClick = () => {
+  if (!hasIpcRenderer()) return
+  
+  const result = window.ipcRenderer.sendSync('SOFTWARE_UPGRADE')
+  if (result != 'OK') {
+    message.error(result.message)
+  } else {
+    message.success('软件升级成功')
+  }
+}
+const onWirelessCommunicationModuleConfigButtonClick = () => {
+  if (hasIpcRenderer()) window.ipcRenderer.send('LAUNCH_LOCAL_SOFTWARE', {
+    subWindowName: 'WirelessCommunicationModuleConfigurationWindow'
+  })
+}
+</script>
diff --git a/src/render/views/index/SystemSettingsModalView/ConnectNetworkView.vue b/src/render/views/index/SystemSettingsModalView/ConnectNetworkView.vue
new file mode 100644
index 0000000..778cb9b
--- /dev/null
+++ b/src/render/views/index/SystemSettingsModalView/ConnectNetworkView.vue
@@ -0,0 +1,139 @@
+<template>
+  <n-divider title-placement="left">
+    网络配置
+  </n-divider>
+  <n-card title=" ">
+    <template #header-extra>
+      <n-button @click="onRefreshClick">
+        <n-icon>
+          <RefreshFilled />
+        </n-icon>
+      </n-button>
+    </template>
+
+    <n-data-table
+      striped
+      :columns="columns"
+      :data="networks"
+      :max-height="235"
+    />
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { h, ref } from 'vue'
+import { NDivider, NCard, NDataTable, NInput, NButton, NIcon, useMessage } from 'naive-ui'
+import { Wifi1BarFilled, Wifi2BarFilled, WifiFilled, RefreshFilled } from '@vicons/material'
+import { hasIpcRenderer } from '@/utils'
+
+const emit = defineEmits(['done'])
+
+const message = useMessage()
+const columns = [
+  {
+    title: '名称',
+    key: 'ssid',
+    width: 200,
+    ellipsis: true
+  },
+  {
+    title: '信号',
+    key: 'signal_level',
+    render (row) {
+      return h(
+        NIcon,
+        {
+          size: 24,
+        },
+        {
+          default: () => h(
+            row.signal_level > -60 ? WifiFilled : row.signal_level > -70 ? Wifi2BarFilled : Wifi1BarFilled
+          )
+        }
+      )
+    }
+  },
+  {
+    title: '密码',
+    key: 'password',
+    width: 200,
+    render (row) {
+      return h(
+        NInput,
+        {
+          type: 'password',
+          onUpdateValue: ($event) => row.password = $event
+        }
+      )
+    }
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    render (row) {
+      return h(
+        NButton,
+        {
+          type: 'info',
+          secondary: true,
+          disabled: row.ssid === current.value?.ssid || !row.password,
+          onClick: () => connect({ ssid:row.ssid, password: row.password })
+        },
+        { default: () => row.ssid === current.value?.ssid ? '已连接' : '连　接' }
+      )
+    }
+  }
+]
+
+const connect = ( connectionOpts ) => {
+  if (!connectionOpts.password) {
+    message.error('密码为空')
+    return
+  }
+  
+  if (!hasIpcRenderer()) return
+  
+  const result = window.ipcRenderer.sendSync('NETWORK_CONNECT', connectionOpts)
+  if (result === 'OK') {
+    message.success('网络连接成功')
+    emit('done')
+  } else {
+    message.error(result.message)
+  }
+}
+
+const current  = ref(undefined)
+const networks = ref(undefined)
+const init  = () => {
+  if (!hasIpcRenderer()) return
+
+  const result   = window.ipcRenderer.sendSync('NETWORK_QUERY')
+  if (!result.networks) return
+  
+  current.value  = result.current[0]
+  networks.value = result.networks
+}
+const reset = () => {
+  current.value  = undefined
+  networks.value = undefined
+}
+
+const onRefreshClick = () => {
+  if (!hasIpcRenderer()) return
+
+  window.ipcRenderer.sendSync('NETWORK_DISCONNECT')
+
+  setTimeout(() => {
+    reset()
+    init()
+  }, 500)
+}
+
+defineExpose({ init, reset })
+</script>
+
+<style scoped lang="less">
+.n-table {
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/render/views/index/SystemSettingsModalView/index.ts b/src/render/views/index/SystemSettingsModalView/index.ts
new file mode 100644
index 0000000..fac41e5
--- /dev/null
+++ b/src/render/views/index/SystemSettingsModalView/index.ts
@@ -0,0 +1,2 @@
+// TODO: 使用use接口导出
+export { default as SystemSettingsModalView } from './index.vue'
diff --git a/src/render/views/index/SystemSettingsModalView/index.vue b/src/render/views/index/SystemSettingsModalView/index.vue
new file mode 100644
index 0000000..a3d0e6f
--- /dev/null
+++ b/src/render/views/index/SystemSettingsModalView/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <n-modal
+    embedded
+    v-model:show="showModal"
+    style="width: 800px;"
+    preset="card"
+    title="系统设置"
+    size="huge"
+    :on-after-enter="onAfterEnter"
+    :on-after-leave="onAfterLeave">
+    
+    <CommonToolsView />
+
+    <ConnectNetworkView ref="connectNetworkViewRef" @done="closeModal" />
+    
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NModal } from 'naive-ui'
+import CommonToolsView from './CommonToolsView.vue'
+import ConnectNetworkView from './ConnectNetworkView.vue'
+
+const connectNetworkViewRef = ref(null)
+const onAfterEnter = () => connectNetworkViewRef.value.init()
+const onAfterLeave = () => connectNetworkViewRef.value.reset()
+
+const showModal  = ref(false)
+const openModel  = () => showModal.value = true
+const closeModal = () => showModal.value = false
+
+defineExpose({ openModel })
+</script>
diff --git a/src/render/views/index/ToolbarView/index.ts b/src/render/views/index/ToolbarView/index.ts
new file mode 100644
index 0000000..d24af55
--- /dev/null
+++ b/src/render/views/index/ToolbarView/index.ts
@@ -0,0 +1 @@
+export { default as ToolbarView } from './index.vue'
diff --git a/src/render/views/index/ToolbarView/index.vue b/src/render/views/index/ToolbarView/index.vue
new file mode 100644
index 0000000..cb94cb1
--- /dev/null
+++ b/src/render/views/index/ToolbarView/index.vue
@@ -0,0 +1,96 @@
+<template>
+  <n-space class="toolbar">
+
+    <n-popover  :show="!network.isOnLine" placement="bottom">
+      <template #trigger>
+        <n-button size="large" circle type="info" @click="emit('systemSettings')">
+          <template #icon>
+            <n-icon>
+              <Settings />
+            </n-icon>
+          </template>
+        </n-button>
+      </template>
+      请连接网络
+    </n-popover >
+
+    <n-button size="large" circle type="info" @click="emit('quickBurning')">
+      <template #icon>
+        <n-icon>
+          <DeveloperBoard />
+        </n-icon>
+      </template>
+    </n-button>
+
+    <n-button size="large" circle type="info" @click="emit('connectUs')">
+      <template #icon>
+        <n-icon>
+          <Phone />
+        </n-icon>
+      </template>
+    </n-button>
+
+    <n-button size="large" circle type="info" @click="onPowerBtnClick" @mouseup="onPowerBtnMouseup" @mousedown="onPowerBtnMousedown" @touchend="onPowerBtnMouseup" @touchstart="onPowerBtnMousedown">
+      <template #icon>
+        <n-icon>
+          <Power />
+        </n-icon>
+      </template>
+    </n-button>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { NSpace, NPopover , NButton, NIcon, useDialog } from 'naive-ui'
+import {
+  PhoneFilled as Phone,
+  SettingsFilled as Settings,
+  PowerSettingsNewFilled as Power,
+  DeveloperBoardFilled as DeveloperBoard,
+} from '@vicons/material'
+import { hasIpcRenderer } from '@/utils'
+import { useNetworkStore } from '@/stores/modules/network'
+
+const emit = defineEmits([ 'systemSettings', 'quickBurning', 'connectUs' ])
+
+const network = useNetworkStore()
+
+const dialog          = useDialog()
+const onPowerBtnClick = () => {
+  dialog.warning({
+    title: '系统提示',
+    content: '您确定需要关机吗？',
+    positiveText: '确定',
+    onPositiveClick: () => {
+      if (hasIpcRenderer()) {
+        window.ipcRenderer.send('SHUTDOWN')
+      }
+    }
+  })
+}
+
+let rebootTimeoutID
+const onPowerBtnMousedown = () => {
+  rebootTimeoutID = setTimeout(() => {
+    dialog.warning({
+      title: '系统提示',
+      content: '您确定需要重启吗？',
+      positiveText: '确定',
+      onPositiveClick: () => {
+        if (hasIpcRenderer()) window.ipcRenderer.send('REBOOT')
+      }
+    })
+    
+  }, 3000);
+}
+const onPowerBtnMouseup   = () => clearTimeout(rebootTimeoutID)
+</script>
+
+<style scoped lang="less">
+.toolbar {
+
+  .n-button {
+    box-shadow: rgb(0 0 0 / 12%) 0px 2px 8px 0px;
+  }
+}
+</style>
diff --git a/src/render/views/index/router-view/category/index.vue b/src/render/views/index/router-view/category/index.vue
new file mode 100644
index 0000000..22141a8
--- /dev/null
+++ b/src/render/views/index/router-view/category/index.vue
@@ -0,0 +1,119 @@
+<template>
+  <Layout :contentAttrs="contentAttrs" class="category-layout">
+
+    <n-space class="category-container h-full" align="center" justify="center" :wrap-item="false">
+      <div v-for="category in categories" :key="category.id" class="category-item" :class="category.key">
+        <img :src="getImageSrc(category.key)">
+
+        <n-text strong>{{ category.name }}</n-text>
+
+        <n-space justify="center">
+          <router-link v-for="clazz in category.classes" :to="`/class/${clazz.id}`">
+            <button>{{ clazz.name }}</button>
+          </router-link>
+        </n-space>
+      </div>
+    </n-space>
+    
+  </Layout>
+</template>
+
+<script setup lang="ts">
+import { NSpace, NText } from 'naive-ui'
+import { default as Layout } from '@/layout/absolute/Default.vue'
+import { allIncludeClass } from '@/api/course/category'
+import kpk from '@/assets/index/kpk_bg.png'
+import hdk from '@/assets/index/hdk_bg.png'
+import gck from '@/assets/index/gck_bg.png'
+
+const categories = allIncludeClass()
+
+const contentAttrs = {
+  class: 'content',
+  contentStyle: {
+    height: '100vh',
+    padding: 'calc(var(--hwa-header-height) + 24px + 55px) 24px 24px 24px'
+  }
+}
+
+const getImageSrc = (key: string) => {
+  switch (key) {
+    case 'kpk':
+      return kpk
+    case 'hdk':
+      return hdk
+    case 'gck':
+      return gck
+  }
+}
+</script>
+
+<style scoped lang="less">
+.category-layout {
+
+  :deep(.content) {
+    background-image: linear-gradient(#021f4b, #014a77);
+    
+    .category-container {
+
+      .category-item {
+        width: 31vw;
+        position: relative;
+
+        img {
+          width: 100%;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+        }
+
+        .n-text {
+          --n-font-weight-strong: 800 !important;
+
+          position: absolute;
+          bottom: 13.7vh;
+          left: 0;
+          right: 0;
+          text-align: center;
+          font-size: 1.5vw;
+          color: whitesmoke;
+        }
+
+        .n-space {
+          position: absolute;
+          bottom: 4.5vh;
+          left: 0;
+          right: 0;
+
+          button {
+            padding: 0 1vw;
+            height: 6vh;
+            color: whitesmoke;
+            font-size: 1.3vw;
+            border: none;
+            border-radius: 5px;
+            font-weight: 800;
+          }
+        }
+
+        &.kpk {
+          button {
+            background: linear-gradient(#17a73d, #8aea6b);
+          }
+        }
+        &.hdk {
+          button {
+            background: linear-gradient(#0065e4, #3abff9);
+          }
+        }
+        &.gck {
+          button {
+            background: linear-gradient(#d58619, #edd96f);
+          }
+        }
+      }
+      }
+  }
+}
+</style>
diff --git a/src/render/views/index/router-view/class/CourseListItemView/index.ts b/src/render/views/index/router-view/class/CourseListItemView/index.ts
new file mode 100644
index 0000000..f5cdee5
--- /dev/null
+++ b/src/render/views/index/router-view/class/CourseListItemView/index.ts
@@ -0,0 +1 @@
+export { default as CourseListItemView } from './index.vue'
diff --git a/src/render/views/index/router-view/class/CourseListItemView/index.vue b/src/render/views/index/router-view/class/CourseListItemView/index.vue
new file mode 100644
index 0000000..9c4a075
--- /dev/null
+++ b/src/render/views/index/router-view/class/CourseListItemView/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <router-link :to="`/course/${course.id}`">
+    <n-card
+      embedded
+      bordered
+      :title="course.name">
+      <template #cover>
+        <img :src="getImageUrl(course.thumbnail)" />
+      </template>
+      <!-- TODO: 后续添加课程介绍文字 -->
+      <!-- {{ course.description }} -->
+    </n-card>
+  </router-link>
+</template>
+
+<script setup lang="ts">
+import { NCard } from 'naive-ui'
+import { Course } from '@/api/course/type.d'
+
+const props = defineProps({
+  course: Course
+})
+
+const COURSE_IMAGE_ROOT_PATH = process.env.NODE_ENV === 'development' ? '/img/course/course/' : '../img/course/course/'
+const getImageUrl = (imageFileName: string) => {
+  return new URL(COURSE_IMAGE_ROOT_PATH + `${props.course.dir}/${imageFileName}`, import.meta.url).href
+}
+</script>
+
+<style scoped lang="less">
+.n-card {
+  :deep(.n-card-header) {
+      padding-top: 12px;
+      padding-bottom: 12px;
+      background-color: #99C1EA;
+    }
+
+  :deep(.n-card__content) {
+    padding-bottom: 12px;
+  }
+}
+</style>
diff --git a/src/render/views/index/router-view/class/index.vue b/src/render/views/index/router-view/class/index.vue
new file mode 100644
index 0000000..f4b9149
--- /dev/null
+++ b/src/render/views/index/router-view/class/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <Layout :contentAttrs="contentAttrs" class="course-list">
+    <n-h2 prefix="bar">{{ clazz.name }}</n-h2>
+
+    <n-grid :x-gap="24" :y-gap="24" cols="2 m:3 l:4 xl:5 2xl:6" responsive="screen">
+      <n-grid-item v-for="course in clazz.courses" :key="course.id">
+        <CourseListItemView :course="course" />
+      </n-grid-item>
+    </n-grid>
+  </Layout>
+</template>
+
+<script setup lang="ts">
+import { NH2, NGrid, NGridItem } from 'naive-ui'
+import { default as Layout } from '@/layout/absolute/Default.vue'
+import { CourseListItemView } from './CourseListItemView'
+import { useRoute } from 'vue-router'
+import { findByPkIncludeCourse } from '@/api/course/class'
+
+// TODO: 重构路由参数的获取
+const route  = useRoute()
+let class_id = route.params.class_id
+class_id     = Array.isArray(class_id) ? class_id[0] : class_id
+const clazz  = findByPkIncludeCourse(parseInt(class_id))
+
+
+const contentAttrs = {
+  class: 'content',
+  embedded: true,
+  contentStyle: {
+    padding: 'calc(var(--hwa-header-height)) 24px 24px 24px'
+  }
+}
+</script>
+
+<style scoped lang="less">
+.course-list {
+  
+  :deep(.content) {
+    background-image: linear-gradient(#021f4b, #014a77);
+
+    .n-h2 {
+      --n-bar-color: #fafafc !important;
+      --n-text-color: #fafafc !important;
+    }
+  }
+}
+</style>
diff --git a/src/render/views/index/router-view/course/ContentView/index.ts b/src/render/views/index/router-view/course/ContentView/index.ts
new file mode 100644
index 0000000..e0def09
--- /dev/null
+++ b/src/render/views/index/router-view/course/ContentView/index.ts
@@ -0,0 +1 @@
+export { default as ContentView } from './index.vue'
diff --git a/src/render/views/index/router-view/course/ContentView/index.vue b/src/render/views/index/router-view/course/ContentView/index.vue
new file mode 100644
index 0000000..e1fec2f
--- /dev/null
+++ b/src/render/views/index/router-view/course/ContentView/index.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="course-content-container">
+    <n-h2>{{ course.name }}</n-h2>
+
+    <n-carousel ref="carouselRef" show-arrow :show-dots="false" :loop="false" @update:current-index="onCurrentIndexUpdate">
+      <template #arrow="{ prev, next }">
+        <div class="custom-arrow">
+          <n-button text class="custom-arrow-left" @click="prev">
+            <n-icon>
+              <ArrowBack />
+            </n-icon>
+          </n-button>
+
+          <n-button text class="custom-arrow-right" @click="next">
+            <n-icon>
+              <ArrowForward />
+            </n-icon>
+          </n-button>
+        </div>
+
+        <n-button text class="fullscreen" @click="onFullscreenClick">
+          <n-icon>
+            <component :is="isFullscreen ? ZoomIn : ZoomOut"/>
+          </n-icon>
+        </n-button>
+      </template>
+      <img v-for="n in course.imageCount" :src="getImageUrl(n + '.JPG')">
+    </n-carousel>
+    
+    <n-scrollbar ref="scrollbarRef" x-scrollable trigger="none">
+      <n-space :wrap="false">
+        <div v-for="n in course.imageCount" :class="index === (n - 1) ? 'active' : ''" @click="onThumbnailClick(n - 1)">
+          <img :src="getImageUrl(n + '.JPG')" />
+          <span> {{ n }}</span>
+        </div>
+      </n-space>
+    </n-scrollbar>
+    
+  </div>
+</template>
+
+
+<script lang="ts" setup>
+import { ref, watch, onMounted } from 'vue'
+import { NSpace, NScrollbar, NH2, NCarousel, NButton, NIcon } from 'naive-ui'
+import { 
+  ArrowBackIosFilled as ArrowBack,
+  ArrowForwardIosFilled as ArrowForward,
+  ZoomOutMapFilled as ZoomOut,
+  ZoomInMapFilled  as ZoomIn,
+} from '@vicons/material'
+import { Course } from '@/api/course/type.d'
+
+const props = defineProps({
+  course: Course
+})
+
+
+
+const isFullscreen = ref<Boolean>(document.fullscreenElement != null)
+const carouselRef  = ref<HTMLElement | null>(null)
+const index = ref()
+const onThumbnailClick = (value: number) => {
+  index.value = value
+  carouselRef.value?.to(value)
+}
+onMounted(() => index.value = carouselRef.value?.getCurrentIndex())
+const onCurrentIndexUpdate = (currentIndex: number) => {
+  index.value = currentIndex
+}
+const onFullscreenClick = () => {
+  if (isFullscreen.value) {
+    document.exitFullscreen()
+  } else {
+    carouselRef.value.$el.requestFullscreen()
+  }
+
+  isFullscreen.value = !isFullscreen.value
+}
+
+const scrollbarRef = ref()
+watch(index, value => {
+  scrollbarRef.value.scrollTo({ left: value * 162})
+})
+
+const COURSE_IMAGE_ROOT_PATH = process.env.NODE_ENV === 'development' ? '/img/course/course/' : '../img/course/course/'
+const getImageUrl = (imageFileName: string) => {
+  return new URL(COURSE_IMAGE_ROOT_PATH + `${props.course.dir}/${imageFileName}`, import.meta.url).href
+}
+</script>
+
+<style scoped lang="less">
+
+.course-content-container {
+  --hwa-title-height: 36px;
+  --hwa-list-height: 85px;
+
+  position: relative;
+
+  .n-h {
+    margin-left: 12px;
+    color: whitesmoke;
+  }
+
+  .n-carousel {
+    // TODO: 校验PPT轮播图高度计算的方法是否正确，为何在全屏模式下和高分辨率下高度不适配
+    height: calc(100vh - var(--hwa-header-height) - 24px - var(--hwa-title-height) - var(--hwa-list-height) - 60px);
+    margin-bottom: 30px;
+
+    .n-button {
+      font-size: 38px;
+      color: whitesmoke;
+    }
+
+    .fullscreen {
+      position: absolute;
+      top: 0;
+      right: 24px;
+    }
+
+    .custom-arrow {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .custom-arrow-left {
+        margin-left: 34px;
+      }
+      .custom-arrow-right {
+        margin-right: 24px;
+      }
+    }
+
+    img {
+      max-width: 100%;
+      max-height: 100%;
+      margin: 0 auto;
+    }
+  }
+
+  .n-scrollbar {
+    .n-space {
+      padding: 0 12px;
+
+      div {
+        &.active {
+          img {
+            border: 1px solid gray;
+          }
+        }
+
+        img {
+          height: var(--hwa-list-height);
+        }
+      }
+
+    }
+  }
+}
+</style>
diff --git a/src/render/views/index/router-view/course/ProgramBurnButtonListView/index.ts b/src/render/views/index/router-view/course/ProgramBurnButtonListView/index.ts
new file mode 100644
index 0000000..db53a54
--- /dev/null
+++ b/src/render/views/index/router-view/course/ProgramBurnButtonListView/index.ts
@@ -0,0 +1 @@
+export { default as ProgramBurnButtonListView } from './index.vue'
diff --git a/src/render/views/index/router-view/course/ProgramBurnButtonListView/index.vue b/src/render/views/index/router-view/course/ProgramBurnButtonListView/index.vue
new file mode 100644
index 0000000..dd2b628
--- /dev/null
+++ b/src/render/views/index/router-view/course/ProgramBurnButtonListView/index.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <n-h2>程序烧录</n-h2>
+      <n-space vertical align="center" :wrap-item="false">
+        <n-button v-for="program, index in programs" :key="index" :bordered="false" size="large" @click="onBurnProgramBtnClick(program.filePath)">{{ program.name }}</n-button>
+      </n-space>
+  </div>
+</template>
+
+
+<script lang="ts" setup>
+import { h, onMounted, onUnmounted } from 'vue'
+import { NH2, NSpace, NButton, NSpin, NH3, useMessage, useDialog } from 'naive-ui'
+import { hasIpcRenderer } from '@/utils'
+
+defineProps({
+  programs: Array<string>
+})
+
+const message = useMessage()
+const dialog  = useDialog()
+
+const onBurnProgramBtnClick = async (binFileName: string) => {
+  if (!hasIpcRenderer()) return
+
+  if (!('serial' in navigator)) return
+
+  try {
+    await navigator.serial.requestPort()
+    
+    window.ipcRenderer.send('BURN_PROGRAM', binFileName)
+  
+    dialog.info({
+      title: '系统提示',
+      closable: false,
+      maskClosable: false,
+      class: 'text-center',
+      content: () => h(
+          NSpin,
+          {
+            large: 'large',
+          },
+          {
+            description: () => h(
+              NH3,
+              {},
+              {
+                default: '程序烧录中……'
+              }
+            )
+          }
+        )
+    })
+  } catch (error) {
+    console.error(error)
+    message.error('程序烧录失败')
+    dialog.destroyAll()
+  }
+}
+
+const onBurnProgramFeedback = ({ err }) => {
+  dialog.destroyAll()
+  
+  if (err) {
+    message.error(err.message)
+  } else {
+    message.success('程序烧录成功')
+  }
+}
+
+onMounted(() => {
+  if (!hasIpcRenderer()) return
+  
+  window.ipcRenderer.receive('BURN_PROGRAM_FEEDBACK', onBurnProgramFeedback)
+})
+onUnmounted(() => {
+  if (!hasIpcRenderer()) return
+
+  window.ipcRenderer.unreceive('BURN_PROGRAM_FEEDBACK')
+})
+</script>
+
+<style scoped lang="less">
+:deep(.n-h) {
+  text-align: center;
+}
+
+.n-button {
+  --n-text-color: #FFF !important;
+
+  --n-color: #e87611 !important;
+  --n-color-hover: #e28946 !important;
+  --n-color-focus: #e38945 !important;
+  --n-color-pressed: #c16306 !important;
+
+  color: var(--n-text-color);
+  background-color: var(--n-color);
+  &:hover {
+    color: var(--n-text-color);
+    background-color: var(--n-color-hover);
+  }
+  &:focus {
+    color: var(--n-text-color);
+    background-color: var(--n-color-focus);
+  }
+  &:active {
+    color: var(--n-text-color);
+    background-color: var(--n-color-pressed);
+  }
+}
+</style>
diff --git a/src/render/views/index/router-view/course/SoftwareLaunchButtonListView/index.ts b/src/render/views/index/router-view/course/SoftwareLaunchButtonListView/index.ts
new file mode 100644
index 0000000..38e8bf3
--- /dev/null
+++ b/src/render/views/index/router-view/course/SoftwareLaunchButtonListView/index.ts
@@ -0,0 +1 @@
+export { default as SoftwareLaunchButtonListView } from './index.vue';
diff --git a/src/render/views/index/router-view/course/SoftwareLaunchButtonListView/index.vue b/src/render/views/index/router-view/course/SoftwareLaunchButtonListView/index.vue
new file mode 100644
index 0000000..10605c7
--- /dev/null
+++ b/src/render/views/index/router-view/course/SoftwareLaunchButtonListView/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <n-h2>配套软件</n-h2>
+    
+    <n-space vertical align="center" :wrap-item="false">
+      <n-button v-for="software in softwares" :bordered="false" size="large" @click="onBtnClick(software.command, software.params)">{{ software.name }}</n-button>
+    </n-space>
+  </div>
+</template>
+
+
+<script lang="ts" setup>
+import { NH2, NSpace, NButton } from 'naive-ui'
+import { Software } from '@/api/course/type.d'
+import { hasIpcRenderer } from '@/utils'
+
+defineProps({
+  softwares: Array<Software>
+})
+
+const onBtnClick = (command: String, params: Object) => {
+  if (hasIpcRenderer()) {
+    window.ipcRenderer.send(command, params)
+  }
+}
+</script>
+
+<style scoped lang="less">
+:deep(.n-h) {
+  text-align: center;
+}
+
+
+.n-button {
+  --n-text-color: #FFF !important;
+
+  --n-color: #e87611 !important;
+  --n-color-hover: #e28946 !important;
+  --n-color-focus: #e38945 !important;
+  --n-color-pressed: #c16306 !important;
+
+  color: var(--n-text-color);
+  background-color: var(--n-color);
+  &:hover {
+    color: var(--n-text-color);
+    background-color: var(--n-color-hover);
+  }
+  &:focus {
+    color: var(--n-text-color);
+    background-color: var(--n-color-focus);
+  }
+  &:active {
+    color: var(--n-text-color);
+    background-color: var(--n-color-pressed);
+  }
+}
+</style>
diff --git a/src/render/views/index/router-view/course/index.vue b/src/render/views/index/router-view/course/index.vue
new file mode 100644
index 0000000..5f95bde
--- /dev/null
+++ b/src/render/views/index/router-view/course/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <Layout :siderAttrs="siderAttrs" :contentAttrs="contentAttrs" class="router-view-layout">
+    <template #sider>
+      <n-space vertical :item-style="itemStyle" class="h-full">
+        <ProgramBurnButtonListView :programs="course.programs" />
+        <SoftwareLaunchButtonListView :softwares="course.softwares" />
+      </n-space>
+    </template>
+    
+    <template #default>
+      <ContentView :course="course" />
+    </template>
+  </Layout>
+</template>
+
+<script setup lang="ts">
+import { NSpace } from 'naive-ui'
+import { useRoute } from 'vue-router'
+import { default as Layout } from '@/layout/static/LeftSider.vue'
+import { ContentView } from './ContentView'
+import { ProgramBurnButtonListView } from './ProgramBurnButtonListView'
+import { SoftwareLaunchButtonListView } from './SoftwareLaunchButtonListView'
+import { findByPk } from '@/api/course/course'
+
+// TODO: 重构路由参数的获取
+const route   = useRoute()
+let course_id = route.params.course_id
+course_id     = Array.isArray(course_id) ? course_id[0] : course_id
+const course  = findByPk(parseInt(course_id))
+
+const itemStyle = { flex: '1 1 50%' }
+
+const siderAttrs = {
+  class: 'sider',
+  contentStyle: {
+    paddingTop: 'calc(var(--hwa-header-height))'
+  }
+}
+
+const contentAttrs = {
+  class: 'content',
+  contentStyle: {
+    paddingTop: 'calc(var(--hwa-header-height))',
+    backgroundImage: 'linear-gradient(#0088c4, #00d4de)',
+  }
+}
+</script>
+
+<style scoped lang="less">
+.router-view-layout {
+  
+  height: 100vh;
+
+  :deep(.n-layout-sider) {
+    background-image: linear-gradient(#021f4b, #014a77);
+    .n-space {
+
+      .n-h {
+        color: rgb(250, 250, 252);
+      }
+      
+      .n-space {
+        row-gap: 24px !important;
+
+        .n-button {
+          --n-height: 52px !important;
+          --n-font-size: 18px !important;
+    
+          width: 80%;
+        }
+      }
+    }
+  }
+}
+</style>